@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;700;800&family=Fredoka:wght@500;600;700&family=Playfair+Display:ital,wght@1,600;1,700&family=Indie+Flower&display=swap');

:root {
  --color-primary: #FF6B9D;
  --color-secondary: #4ECDC4;
  --color-accent: #FFD166;
  --color-purple: #A78BFA;
  --color-green: #6FCF97;
  --color-bg: #FFF9F0;
  --color-text: #2D2A32;
  --ink: #2D2A32;
  --radius: 22px;
  --shadow: 0 6px 0 var(--ink);
  --shadow-sm: 0 4px 0 var(--ink);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Baloo 2', 'Comic Neue', system-ui, -apple-system, sans-serif;
  background-color: #FFF9F0;
  background-image: url('../img/bg-hills.svg');
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  color: var(--color-text);
  font-size: 18px;
  line-height: 1.5;
  min-height: 100vh;
}

h1, h2, h3 { font-family: 'Fredoka', 'Baloo 2', sans-serif; font-weight: 700; }

/* ---- Auth pages ---- */
.auth-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}
.auth-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 32px 24px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow);
  text-align: center;
  border: 4px solid var(--ink);
  position: relative;
}
.mascot-title { font-size: 48px; margin-bottom: 8px; }
.auth-site-icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  object-fit: cover;
  display: block;
  margin: 0 auto 8px;
  box-shadow: var(--shadow-sm);
}
.subtitle { color: #6b6570; margin-top: -8px; }

.auth-form { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; text-align: left; }
.auth-form label { font-weight: 700; font-size: 14px; display: flex; flex-direction: column; gap: 6px; }
.auth-form input {
  font-size: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 3px solid var(--ink);
  background: #FAFAFA;
  font-family: inherit;
}
.auth-form input:focus { outline: none; border-color: var(--color-secondary); }

.password-field { position: relative; display: flex; }
.password-field input { flex: 1; padding-right: 46px; }
.password-toggle {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 6px;
  line-height: 1;
}

.btn {
  font-family: 'Fredoka', sans-serif;
  font-size: 17px;
  font-weight: 600;
  padding: 14px;
  border-radius: 16px;
  border: 3px solid var(--ink);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.05s;
}
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:active { transform: translateY(4px); box-shadow: none; }

.auth-links { display: flex; flex-direction: column; gap: 8px; margin-top: 18px; }
.auth-links a { color: var(--color-secondary); font-weight: 700; text-decoration: none; font-size: 14px; }

.alert { padding: 12px 14px; border-radius: 12px; font-size: 14px; margin-bottom: 8px; border: 3px solid var(--ink); font-weight: 700; }
.alert-error { background: #FFE1E8; color: #C41E4C; }
.alert-success { background: #DFF7EE; color: #146C4A; }
.alert-info { background: #E6F0FF; color: #1B4B91; }
.facsimile { background: #F4F4F4; padding: 12px; border-radius: 10px; font-size: 12px; text-align: left; white-space: pre-wrap; border: 2px dashed var(--ink); }

/* ---- Top bar ---- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: #fff;
  border-bottom: 4px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 10;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text); font-weight: 700; font-family: 'Fredoka', sans-serif; }
.brand-icon { width: 42px; height: 42px; border-radius: 50%; border: 3px solid var(--ink); object-fit: cover; display: block; }
.brand-name { display: flex; flex-direction: column; line-height: 1.05; }
.brand-main { font-size: 34px; font-weight: 400; font-family: 'Indie Flower', 'Playfair Display', cursive; font-style: normal; }
.brand-suffix { font-size: 13px; font-weight: 500; font-family: 'Baloo 2', sans-serif; letter-spacing: 1px; text-transform: uppercase; color: var(--color-primary); opacity: 0.85; }

@media (max-width: 400px) {
  .brand-main { font-size: 22px; }
  .brand-icon { width: 36px; height: 36px; }
}

.profile-menu { position: relative; }
.profile-avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  max-width: 130px;
}
.profile-username-label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.profile-avatar {
  width: 46px; height: 46px; border-radius: 50%;
  border: 3px solid var(--ink);
  box-shadow: 0 0 0 3px var(--color-accent);
  font-size: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.profile-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 58px;
  background: #fff;
  border-radius: 16px;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
  padding: 14px;
  min-width: 230px;
  font-size: 14px;
  z-index: 20;
}
.profile-dropdown.open { display: block; }
.profile-dropdown a {
  display: block;
  padding: 8px 4px;
  color: var(--color-text);
  text-decoration: none;
  font-weight: 700;
}
.profile-stat { padding: 3px 0; }

.profile-lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 13px;
}
.lang-pill {
  font-size: 12px !important;
  font-weight: 700;
  padding: 3px 8px !important;
  border-radius: 12px;
  border: 2px solid #eee;
  background: #FAFAFA;
}
.lang-pill.active { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }

/* ---- Page layout ---- */
.page { max-width: 700px; margin: 0 auto; padding: 20px; }
.page-title { font-size: 26px; margin-bottom: 2px; }
.page-subtitle { color: #6b6570; margin-top: 0; font-weight: 600; }
.back-link { display: inline-block; margin-bottom: 10px; color: var(--color-secondary); font-weight: 700; text-decoration: none; }

.level-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 16px;
}
.category-grid, .game-grid, .stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 16px;
}

.level-card {
  aspect-ratio: 1;
  width: calc(50% - 7px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: var(--radius);
  text-decoration: none;
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  transition: transform 0.05s;
}
.level-card:active { transform: translateY(5px); box-shadow: none; }
.level-code {
  font-size: 32px;
  text-shadow: -1px -1px 0 rgba(45,42,50,0.35), 1px -1px 0 rgba(45,42,50,0.35),
               -1px 1px 0 rgba(45,42,50,0.35), 1px 1px 0 rgba(45,42,50,0.35);
}
.level-label {
  font-size: 14px;
  text-shadow: -1px -1px 0 rgba(45,42,50,0.3), 1px -1px 0 rgba(45,42,50,0.3),
               -1px 1px 0 rgba(45,42,50,0.3), 1px 1px 0 rgba(45,42,50,0.3);
}
.level-a1 { background: #FF8789; }
.level-a2 { background: #86DC9B; }
.level-b1 { background: #DE83EC; }
.level-b2 { background: #FEE066; }
.level-c1 { background: #67B7FF; }

.category-card, .game-card {
  position: relative;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 16px;
  padding: 16px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 700;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.05s;
}
.category-card:active, .game-card:active { transform: translateY(4px); box-shadow: none; }
.game-new-badge {
  position: absolute;
  top: -10px; right: 10px;
  background: #FFD166;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
  padding: 4px 10px;
  border-radius: 20px;
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-sm);
  animation: newBadgePulse 1.6s ease-in-out infinite;
}
@keyframes newBadgePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.category-count { font-size: 12px; color: #6b6570; font-weight: 500; }
.game-type-tag {
  align-self: flex-start;
  background: var(--color-purple);
  color: #fff;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 800;
  border: 2px solid var(--ink);
}
.game-test-badge {
  align-self: flex-start;
  background: #FFE1E8;
  color: #C41E4C;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  font-weight: 800;
  border: 2px solid #C41E4C;
}
.game-title { font-size: 15px; }
.game-status { font-size: 12px; color: #146C4A; font-weight: 600; }
.game-status-incomplete { color: #2E86DE; }

.stat-box {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
  border: 4px solid var(--ink);
}

/* ---- Sistema "carte" degli obiettivi (stile Steam / trading card) ---- */
/* Struttura: .achv-card (la "cornice" colorata, diversa per ogni rarità)
   > .achv-card-inner (il riquadro bianco con foto + titolo dentro). */

.achv-card {
  position: relative;
  border-radius: 20px;
  padding: 7px;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
}
.achv-card-inner {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.achv-card-image {
  aspect-ratio: 4 / 3;
  background: repeating-conic-gradient(#f2f2f2 0% 25%, #fafafa 0% 50%) 50% / 24px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.achv-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.achv-card-fallback-icon { font-size: 44px; }
.achv-card-title {
  padding: 10px 10px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-align: center;
  line-height: 1.25;
}

/* Ogni rarità ha una cornice particolare (colore/gradiente diverso), più un
   piccolo distintivo rotondo nell'angolo con l'emoji della rarità. Da Bronzo in
   su, il gradiente è animato (si muove lentamente); la Comune resta ferma. */
.card-rarity-comune { background: var(--ink); box-shadow: 0 4px 0 #1a1820; }
.card-rarity-bronzo {
  background: linear-gradient(120deg, #E3A063, #8B5A2B, #D89865, #E3A063);
  background-size: 300% 300%;
  animation: achvSpecialShift 5s ease infinite;
  box-shadow: 0 4px 0 #6b431d;
}
.card-rarity-argento {
  background: linear-gradient(120deg, #F2F5F7, #9AA5AC, #E8ECEF, #F2F5F7);
  background-size: 300% 300%;
  animation: achvSpecialShift 5s ease infinite;
  box-shadow: 0 4px 0 #7a838a;
}
.card-rarity-oro {
  background: linear-gradient(120deg, #FFE9A8, #E8AA1F, #FFF3C4, #FFE9A8);
  background-size: 300% 300%;
  animation: achvSpecialShift 5s ease infinite;
  box-shadow: 0 4px 0 #B8790A;
}
.card-rarity-diamante {
  background: linear-gradient(120deg, #B9F2FF, #6FE0EF, #ffffff, #9EE8FF, #B9F2FF);
  background-size: 300% 300%;
  animation: achvSpecialShift 5s ease infinite;
  box-shadow: 0 0 0 3px #fff, 0 0 16px 3px rgba(127, 231, 240, 0.65), 0 4px 0 #3FBFCB;
}
.card-rarity-speciale {
  background: linear-gradient(120deg, #FF6B9D, #FFD166, #6FCF97, #4ECDC4, #A78BFA, #FF6B9D);
  background-size: 300% 300%;
  animation: achvSpecialShift 5s ease infinite;
  box-shadow: 0 0 0 3px #fff, 0 0 20px 5px rgba(255, 107, 157, 0.5), 0 4px 0 #7a3d63;
}
@keyframes achvSpecialShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.achv-card::before {
  content: '📄';
  position: absolute;
  top: -10px; left: -10px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  z-index: 3;
}
.card-rarity-bronzo::before { content: '🥉'; }
.card-rarity-argento::before { content: '🥈'; }
.card-rarity-oro::before { content: '🥇'; }
.card-rarity-diamante::before { content: '💎'; }
.card-rarity-speciale::before { content: '🌟'; }

.achv-card-btn { all: unset; cursor: pointer; display: block; width: 100%; box-sizing: border-box; }
.achv-card-btn:active .achv-card { transform: translateY(3px); box-shadow: none; }

/* Carta "girata" (obiettivo non ancora sbloccato): mostra un retro-carta
   invece della foto, come una vera carta collezionabile coperta. */
.achv-card.locked { filter: grayscale(0.5); }
.achv-card.locked::before { content: '❔'; }
.achv-card.locked .achv-card-image {
  background: repeating-linear-gradient(45deg, #2D2A32, #2D2A32 10px, #423d4d 10px, #423d4d 20px);
}
.achv-lock-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.4);
}

/* Versione grande della carta, usata nell'anteprima a schermo intero */
.achv-card-lg { width: min(92vw, 420px); margin: 0 auto; padding: 12px; border-radius: 30px; }
.achv-card-lg .achv-card-inner { border-radius: 21px; }
.achv-card-lg .achv-card-title { font-size: 20px; padding: 16px 14px 6px; }
.achv-card-lg .achv-card-fallback-icon { font-size: 80px; }
.achv-card-lg::before { width: 46px; height: 46px; font-size: 22px; top: -16px; left: -16px; }

/* ---- Carta Lealtà (achievements.php): la carta più alta raggiunta, con lo stato
   "in perdita" quando l'utente è inattivo da troppo tempo (grigia e sbiadita). ---- */
.loyalty-showcase { text-align: center; margin: 20px 0; }
.loyalty-card-display.losing .achv-card-image img,
.loyalty-card-display.losing .achv-card-fallback-icon {
  filter: grayscale(1) brightness(0.9);
}
.loyalty-losing-label {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, .75);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .04em;
  padding: 4px 14px;
  border-radius: 20px;
  z-index: 2;
}

.achievement-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 16px;
  margin-top: 16px;
}
@media (min-width: 480px) {
  .achievement-grid-v2 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) {
  .achievement-grid-v2 { grid-template-columns: repeat(4, 1fr); }
}

/* Anteprima cliccata: la carta grande al centro, con titolo e rarità sotto */
.achv-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(45, 42, 50, 0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 300; padding: 20px;
}
.achv-modal-box {
  position: relative;
  max-width: 460px;
  width: 100%;
  text-align: center;
}
.achv-modal-close-x {
  position: absolute;
  top: -6px; right: 4px;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid var(--ink);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  z-index: 2;
}
.achv-modal-close-x:active { transform: translateY(2px); box-shadow: none; }
.achv-modal-title {
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin-top: 16px;
}
.achv-modal-condition { color: #fff; font-weight: 600; font-size: 13px; margin-top: 8px; }

/* Switch "mostra solo ottenuti" */
.achv-filter-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  margin: 6px 0 4px;
  cursor: pointer;
  width: fit-content;
}
.achv-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.achv-switch input { opacity: 0; width: 0; height: 0; }
.achv-switch-slider {
  position: absolute; inset: 0;
  background: #ddd;
  border: 2px solid var(--ink);
  border-radius: 20px;
  transition: background 0.15s;
}
.achv-switch-slider::before {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  left: 2px; top: 2px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid var(--ink);
  transition: transform 0.15s;
}
.achv-switch input:checked + .achv-switch-slider { background: var(--color-secondary); }
.achv-switch input:checked + .achv-switch-slider::before { transform: translateX(18px); }

.rarity-pill {
  display: inline-block;
  font-size: 11px; font-weight: 800;
  padding: 3px 10px; border-radius: 20px;
  border: 2px solid var(--ink);
  margin-top: 10px;
}
.rarity-pill-comune { background: #eee; }
.rarity-pill-bronzo { background: #CD7F32; color: #fff; }
.rarity-pill-argento { background: #C7CDD4; }
.rarity-pill-oro { background: #FFD166; }
.rarity-pill-diamante { background: #7FE7F0; }
.rarity-pill-speciale {
  background: linear-gradient(120deg, #FF6B9D, #FFD166, #6FCF97, #4ECDC4, #A78BFA);
  background-size: 300% 300%;
  animation: achvSpecialShift 5s ease infinite;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* Comparsa "hai sbloccato un obiettivo!" a fine gioco */
.achv-unlock-overlay {
  position: fixed; inset: 0;
  background: rgba(45, 42, 50, 0.8);
  display: flex; align-items: center; justify-content: center;
  z-index: 400; padding: 20px;
}
.achv-unlock-box {
  background: #fff;
  border-radius: 22px;
  padding: 24px 20px;
  max-width: 460px;
  width: 100%;
  text-align: center;
  border: 6px solid var(--ink);
  box-shadow: var(--shadow);
}
.achv-unlock-heading { font-family: 'Fredoka', sans-serif; font-weight: 800; font-size: 20px; margin-bottom: 14px; }
.achv-unlock-cards { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.achv-unlock-cards .achv-card { width: 150px; animation: achvPopIn 0.35s ease; }
@keyframes achvPopIn {
  0% { transform: scale(0.4) rotate(-6deg); opacity: 0; }
  70% { transform: scale(1.08) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #6b6570;
  font-size: 16px;
  font-weight: 600;
  background: #fff;
  border-radius: var(--radius);
  border: 3px dashed var(--ink);
  margin-top: 16px;
}

/* Tablet / desktop */
@media (min-width: 640px) {
  .level-card { width: calc(20% - 11.2px); }
  .category-grid, .game-grid { grid-template-columns: repeat(3, 1fr); }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---- Landing page (Home, Deutsch) — stile manga ---- */
.landing-page { overflow-x: hidden; }

.landing-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 4px solid var(--ink);
  position: sticky;
  top: 0;
  z-index: 10;
}
.btn-login-top {
  font-family: 'Fredoka', sans-serif;
  background: var(--color-secondary);
  color: #fff;
  padding: 10px 22px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn-login-top:active { transform: translateY(3px); box-shadow: none; }

.landing-hero {
  position: relative;
  text-align: center;
  padding: 40px 20px 20px;
  max-width: 760px;
  margin: 0 auto;
  overflow: visible;
}
.hero-mascot-wrap { position: relative; z-index: 1; display: inline-block; }
.hero-mascot-img { width: 210px; height: auto; filter: drop-shadow(0 6px 0 rgba(45,42,50,0.15)); }
.hero-sparkle { position: absolute; width: 30px; height: 30px; }
.hero-sparkle.s1 { top: 10px; left: 8%; }
.hero-sparkle.s2 { top: 60px; right: 6%; width: 40px; height: 40px; }
.hero-sparkle.s3 { bottom: 30px; left: 12%; width: 24px; height: 24px; }

.speech-bubble {
  position: relative;
  display: inline-block;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 20px;
  padding: 8px 20px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 15px;
  margin-bottom: 6px;
  z-index: 1;
}
.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 14px solid var(--ink);
}
.speech-bubble::before {
  content: "";
  position: absolute;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 10px solid #fff;
  z-index: 2;
}

.landing-hero h1 {
  position: relative; z-index: 1;
  font-size: 28px; line-height: 1.25; margin: 14px 0 12px;
}
.landing-hero .highlight {
  color: var(--color-primary);
  position: relative;
  display: inline-block;
}
.hero-subtitle { position: relative; z-index: 1; font-size: 16px; color: #6b6570; font-weight: 600; max-width: 480px; margin: 0 auto 24px; }
.hero-actions { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 12px; align-items: center; }

.btn-lg { font-size: 17px; padding: 16px 28px; display: inline-block; text-decoration: none; width: 100%; max-width: 320px; text-align: center; }
.btn-secondary { background: #fff; color: var(--color-text); border: 3px solid var(--ink); }
.btn-secondary:active { transform: translateY(3px); }

.landing-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  max-width: 900px;
  margin: 32px auto;
  padding: 0 20px;
}
.feature-card {
  background: #fff;
  border-radius: var(--radius);
  border: 4px solid var(--ink);
  padding: 22px 18px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  position: relative;
}
.feature-card:nth-child(2n) { transform: rotate(-1deg); }
.feature-card:nth-child(2n+1) { transform: rotate(1deg); }
.feature-icon {
  font-size: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  margin: 0 auto 10px;
  background: var(--color-accent);
  border: 3px solid var(--ink);
  border-radius: 50%;
}
.feature-card h3 { margin: 4px 0; font-size: 17px; }
.feature-card p { margin: 0; font-size: 14px; color: #6b6570; font-weight: 500; }

.landing-cta {
  position: relative;
  text-align: center;
  padding: 44px 20px 60px;
}
.landing-cta h2 { font-size: 24px; margin-bottom: 18px; }
.landing-cta-badge {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 16px;
  border-radius: 20px;
  border: 3px solid var(--ink);
  transform: rotate(-4deg);
  margin-bottom: 14px;
}

.landing-about {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 700px;
  margin: 12px auto 40px;
  padding: 24px 20px;
  text-align: center;
}
.landing-about-img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-sm);
  background: var(--color-accent);
  flex-shrink: 0;
}
.landing-about-text h2 { font-size: 22px; margin: 0 0 10px; }
.landing-about-text p { margin: 0; font-size: 15px; color: #6b6570; font-weight: 500; line-height: 1.6; }

.landing-footer {
  text-align: center;
  padding: 20px;
  font-size: 12px;
  color: #a09aa5;
  font-weight: 600;
}

@media (min-width: 640px) {
  .landing-hero h1 { font-size: 38px; }
  .hero-actions { flex-direction: row; justify-content: center; }
  .btn-lg { width: auto; }
  .landing-features { grid-template-columns: repeat(3, 1fr); }
  .hero-mascot-img { width: 230px; }
  .landing-about { flex-direction: row; text-align: left; max-width: 800px; }
  .landing-about-img { width: 160px; height: 160px; }
}

/* ---- Aiutante in-game (icona in basso a destra) ---- */
.help-fab {
  display: none; /* visibile solo durante il gioco vero e proprio, non in apertura/risultati */
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: #fff;
  box-shadow: var(--shadow-sm);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  z-index: 30;
}
.help-fab img { width: 100%; height: 100%; object-fit: cover; display: block; }
.help-fab:active { transform: translateY(3px); box-shadow: none; }

.help-panel {
  display: none;
  position: fixed;
  bottom: 96px;
  right: 20px;
  max-width: 280px;
  width: calc(100% - 40px);
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 18px;
  padding: 16px;
  box-shadow: var(--shadow-sm);
  z-index: 30;
  font-size: 14px;
}
.help-panel.open { display: block; }

/* Sfocatura del gioco quando si apre l'aiutino (e pausa, per i giochi a tempo) */
.quiz-wrap.blurred {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.2s ease;
}
.help-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-family: 'Fredoka', sans-serif;
}
.help-rules-list { margin: 0; padding-left: 20px; }
.help-rules-list li { margin-bottom: 6px; }

/* ---- Personalizzazione avatar ---- */
.avatar-preview-wrap { display: flex; justify-content: center; margin: 10px 0 24px; }
.avatar-preview {
  width: 96px; height: 96px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 46px;
  box-shadow: var(--shadow-sm);
}

.color-swatch-grid { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0 24px; }
.color-swatch {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  cursor: pointer;
  padding: 0;
}
.color-swatch.selected { box-shadow: 0 0 0 4px var(--color-secondary); }

.emoji-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.emoji-choice {
  font-size: 26px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 8px 0;
  cursor: pointer;
}
.emoji-choice.selected { background: var(--color-accent); }
.emoji-choice:active { transform: translateY(2px); }

@media (min-width: 480px) {
  .emoji-grid { grid-template-columns: repeat(8, 1fr); }
}

/* ---- Musica di sottofondo: elenco tracce nelle Impostazioni ---- */
.music-track-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 24px; }
.music-track-choice {
  display: flex; align-items: center; gap: 10px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 10px 14px;
  cursor: pointer;
}
.music-track-choice.selected { background: var(--color-accent); }
.music-track-choice input { margin: 0; width: 18px; height: 18px; flex-shrink: 0; }
.music-track-label { flex: 1; font-weight: 700; }
.music-preview-btn {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
}
.music-preview-btn:active { transform: translateY(2px); }

/* ---- Musica di sottofondo: widget in-game (icona in alto a sinistra) ---- */
.music-fab {
  display: none; /* visibile solo durante il gioco vero e proprio, come l'aiutino */
  position: fixed;
  top: 92px;
  left: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 22px;
  cursor: pointer;
  z-index: 30;
}
.music-fab:active { transform: translateY(3px); box-shadow: none; }

.music-panel {
  display: none;
  position: fixed;
  top: 152px;
  left: 16px;
  max-width: 240px;
  width: calc(100% - 32px);
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 18px;
  padding: 14px;
  box-shadow: var(--shadow-sm);
  z-index: 30;
  font-size: 14px;
}
.music-panel.open { display: block; }
.music-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  font-family: 'Fredoka', sans-serif;
}
.music-panel .achv-filter-row { margin-bottom: 12px; cursor: pointer; }
.music-panel .music-track-choice { padding: 6px 10px; font-size: 13px; }
.music-panel .music-track-label { font-weight: 600; }

/* ---- Motore Quiz ---- */
.quiz-wrap { max-width: 640px; margin: 0 auto; }
.quiz-screen { animation: quizFadeIn 0.25s ease; }
@keyframes quizFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.quiz-rules-box {
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 16px 0;
}
.quiz-rules-box h3 { margin: 0 0 8px; font-size: 16px; }
.quiz-rules-box ul { margin: 0; padding-left: 20px; }
.quiz-rules-box li { margin-bottom: 6px; }

.site-update-box {
  background: var(--color-accent);
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 20px 0;
}
.site-update-box h3 { margin: 0 0 8px; font-size: 16px; }
.site-update-box p { margin: 0; line-height: 1.5; }

.quiz-intro-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0 24px;
  font-weight: 700;
  font-size: 14px;
}
.quiz-intro-meta span {
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 6px 14px;
}

.quiz-hud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
}
.quiz-hearts { display: flex; gap: 4px; font-size: 22px; }
.quiz-progress { font-size: 14px; color: #6b6570; }

.quiz-progress-bar {
  width: 100%;
  height: 12px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 24px;
}
.quiz-progress-fill {
  height: 100%;
  background: var(--color-secondary);
  transition: width 0.3s ease;
}

.quiz-question {
  font-family: 'Fredoka', sans-serif;
  font-size: 24px;
  font-weight: 600;
  text-align: center;
  background: #FFE0EC;
  border: none;
  border-radius: var(--radius);
  padding: 28px 20px;
  margin-bottom: 20px;
  min-height: 40px;
  box-shadow: 0 3px 10px rgba(45, 42, 50, 0.12);
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.quiz-options-2col {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.quiz-option {
  font-family: 'Baloo 2', sans-serif;
  font-size: 18px;
  font-weight: 700;
  padding: 18px 20px;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 16px;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform 0.05s;
}
.quiz-option:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.quiz-option.selected { background: var(--color-accent); }
.quiz-option.correct { background: #6FCF97; color: #fff; }
.quiz-option.wrong { background: #FF6B9D; color: #fff; }
.quiz-option:disabled { cursor: default; }

/* ---- Gira e indovina: carta centrale che si gira + opzioni sinistra/destra ---- */
.flip-card-wrap {
  perspective: 1200px;
  width: min(70vw, 280px);
  aspect-ratio: 500 / 650;
  margin: 20px auto;
}
.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}
.flip-card.flipped { transform: rotateY(180deg); cursor: default; }
.flip-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border: 6px solid var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flip-card-image-face {
  background: #fff;
}
.flip-card-image-face img { width: 100%; height: 100%; object-fit: cover; }
.flip-card-hidden-face {
  transform: rotateY(180deg);
  background: repeating-linear-gradient(45deg, #2D2A32, #2D2A32 10px, #423d4d 10px, #423d4d 20px);
  font-family: 'Fredoka', sans-serif;
  font-size: 110px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 4px 0 rgba(0,0,0,0.25);
}

.flip-options-row {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.flip-options-row.visible { opacity: 1; pointer-events: auto; }
.flip-option-btn {
  flex: 1;
  max-width: 220px;
  font-family: 'Baloo 2', sans-serif;
  font-size: 17px;
  font-weight: 700;
  padding: 16px 14px;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 16px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform 0.05s;
}
.flip-option-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.flip-option-btn.correct { background: #6FCF97; color: #fff; }
.flip-option-btn.wrong { background: #FF6B9D; color: #fff; }
.flip-option-btn:disabled { cursor: default; }
.flip-hint-text { text-align: center; font-size: 13px; color: #999; font-weight: 700; margin-top: 10px; }

.quiz-multi-actions { display: flex; justify-content: center; margin-top: 8px; }

.quiz-result-emoji { font-size: 64px; text-align: center; margin-bottom: 8px; }
.quiz-result-character { display: block; margin: 0 auto 12px; width: 160px; height: auto; }
.quiz-result-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 16px;
}

/* Su schermi molto grandi (lavagne interattive / display in aula), ingrandisco
   testo e tocchi per la lettura e l'uso a distanza. */
@media (min-width: 1100px) {
  .quiz-wrap { max-width: 900px; }
  .quiz-question { font-size: 36px; padding: 44px 32px; }
  .quiz-option { font-size: 26px; padding: 26px 24px; }
  .quiz-hearts { font-size: 32px; }
  .quiz-progress { font-size: 18px; }
  .quiz-intro-meta span { font-size: 18px; padding: 10px 20px; }
  .quiz-rules-box { font-size: 19px; padding: 26px 30px; }
  .quiz-result-emoji { font-size: 96px; }
  .quiz-result-character { width: 240px; }
}

@media (min-width: 480px) and (max-width: 1099px) {
  .quiz-options { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 479px) {
  .quiz-options-2col .quiz-option { font-size: 15px; padding: 14px 10px; }
}

/* ---- Motore Abbina tutti: carte da trascinare nella casella giusta ---- */
.matchall-instructions { text-align: center; font-weight: 600; color: #6b6570; margin-bottom: 6px; }
.matchall-section-title {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #6b6570;
  margin: 18px 0 10px;
  text-align: center;
}
.matchall-deck, .matchall-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 14px;
}
.matchall-slot-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.matchall-card, .matchall-slot {
  width: min(22vw, 100px);
  aspect-ratio: 500 / 650;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.matchall-card {
  position: relative;
  background: #fff;
  border: 4px solid var(--ink);
  box-shadow: var(--shadow-sm);
  cursor: grab;
  touch-action: none; /* impedisce alla pagina di scorrere mentre si trascina la carta sul telefono */
  user-select: none;
}
.matchall-card img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.matchall-card-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.65);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  text-align: center;
  padding: 3px 4px;
  line-height: 1.15;
  pointer-events: none;
  word-break: break-word;
}
.matchall-card-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 3.2vw, 15px);
  text-align: center;
  padding: 6px;
  word-break: break-word;
  pointer-events: none;
}
.matchall-card-dragging { z-index: 1000; box-shadow: var(--shadow); transform: scale(1.06); cursor: grabbing; }
.matchall-slot {
  background: #FAFAFA;
  border: 3px dashed #ccc;
}
.matchall-slot.matchall-slot-hover { border-color: var(--color-secondary); background: var(--color-accent); }
.matchall-slot-label {
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  max-width: min(22vw, 100px);
  word-break: break-word;
}

/* ---- Motore Impiccato ---- */
.hangman-play-area {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.hangman-image-wrap {
  width: min(34vw, 170px);
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  border: 4px solid var(--ink);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.hangman-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .5s ease; }
.hangman-figure-wrap { width: min(42vw, 190px); margin: 0; flex-shrink: 0; }
.hangman-figure { width: 100%; height: auto; display: block; }
.hangman-fixed { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; fill: none; }
.hangman-part { stroke: #FF6B9D; stroke-width: 5; stroke-linecap: round; fill: none; opacity: 0; transition: opacity .3s; }
.hangman-part.visible { opacity: 1; }
.hangman-attempts { text-align: center; font-weight: 700; color: #6b6570; margin: 0 0 14px; }
.hangman-word { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0 22px; }
.hangman-word-group { display: flex; gap: 6px; } /* le lettere di UNA parola restano sempre unite, mai spezzate a metà andando a capo */
.hangman-word-space { width: 14px; height: 32px; flex-shrink: 0; } /* spazio tra due parole: qui è permesso andare a capo */
.hangman-char {
  min-width: 22px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(18px, 5vw, 26px);
}
.hangman-char-blank { border-bottom: 4px solid var(--ink); }
.hangman-char-revealed { border-bottom: 4px solid var(--color-secondary); color: var(--color-secondary); }
.hangman-char-symbol { color: #999; min-width: 14px; }
.hangman-keyboard {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 8px;
  max-width: 480px;
  margin: 0 auto;
}
.hangman-key {
  padding: 10px 0;
  border-radius: 10px;
  border: 3px solid var(--ink);
  background: #fff;
  font-weight: 700;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
}
.hangman-key:active { transform: translateY(2px); }
.hangman-key:disabled { cursor: default; opacity: .45; }
.hangman-key.correct { background: #6FCF97; color: #fff; border-color: #6FCF97; opacity: 1; }
.hangman-key.wrong { background: #FF6B9D; color: #fff; border-color: #FF6B9D; opacity: 1; }

/* ---- Motore Gira la ruota ---- */
.wheel-wrap {
  position: relative;
  width: min(76vw, 88%);
  margin: 10px auto 18px;
  touch-action: none; /* impedisce alla pagina di scorrere mentre si trascina la ruota sul telefono */
  cursor: grab;
}
.wheel-wrap:active { cursor: grabbing; }
.wheel-svg {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 50%;
  border: 6px solid var(--ink);
  box-shadow: var(--shadow);
  transition: transform 4s cubic-bezier(0.17, 0.67, 0.12, 0.99);
}
.wheel-pointer {
  position: absolute;
  top: 50%;
  right: -14px;
  transform: translateY(-50%);
  font-size: 40px;
  line-height: 1;
  color: var(--color-secondary);
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(-2px 0 0 #fff) drop-shadow(-2px 0 3px rgba(0,0,0,.25));
}
.wheel-hint { text-align: center; font-size: 13px; color: #999; font-weight: 700; margin: 0 0 14px; }
.wheel-result-row { display: flex; align-items: stretch; gap: 10px; margin: 4px 0 6px; }
.wheel-result-row .wheel-result-box { margin: 0; flex: 1; }
.wheel-check-btn {
  flex-shrink: 0;
  width: 54px;
  border-radius: var(--radius);
  border: 4px solid var(--ink);
  background: #fff;
  color: #ccc;
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.wheel-check-btn:disabled { opacity: .4; cursor: default; }
.wheel-check-btn.checked { background: #6FCF97; color: #fff; border-color: #6FCF97; opacity: 1; }
.wheel-result-box {
  width: 100%;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 4px 0 16px;
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  word-break: break-word;
}
.wheel-result-box strong { font-family: 'Fredoka', sans-serif; }
.wheel-slice { stroke: #fff; stroke-width: 2; }
.wheel-slice-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  fill: var(--ink);
  pointer-events: none;
}
.wheel-slice.winning {
  filter: brightness(1.18) drop-shadow(0 0 10px rgba(255,255,255,.95));
  stroke: var(--color-secondary);
  stroke-width: 4;
}
.wheel-slice-text.winning {
  paint-order: stroke;
  stroke: #fff;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.wheel-slice.disabled { opacity: .28; }
.wheel-slice-text.disabled { opacity: .4; }
.wheel-hub {
  fill: #fff;
  stroke: var(--ink);
  stroke-width: 5;
  cursor: pointer;
}
/* Le tre immagini di Rachele (1/2/3) stanno dentro l'SVG che ruota, sovrapposte
   nello stesso punto: girano insieme alla ruota, e sfumano una nell'altra. */
.wheel-hub-img { opacity: 0; transition: opacity .3s ease; pointer-events: none; }
.wheel-hub-img.visible { opacity: 1; }

.wheel-exit-btn {
  position: fixed;
  top: 92px;
  right: 16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 22px;
  font-weight: 700;
  cursor: pointer;
  z-index: 30;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.wheel-exit-btn:active { transform: translateY(3px); box-shadow: none; }

/* ---- Motore Abbinamento ---- */

.match-stats-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 16px;
}
.match-stats-bar span {
  font-size: 13px;
  font-weight: 700;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 6px 12px;
}

/* Spazio fisso per la foto, con animazione di ingresso da destra */
.match-photo-stage {
  position: sticky;
  top: 74px; /* resta visibile appena sotto la barra in alto mentre scorri le parole */
  z-index: 5;
  width: 100%;
  max-width: 420px;
  aspect-ratio: 650 / 320;
  margin: 0 auto 20px;
  border: 5px solid var(--ink);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(135deg, var(--color-purple), #6F5AC4);
}
.match-photo-slider {
  position: absolute;
  inset: 0;
  transform: translateX(130%);
  opacity: 0;
  transition: transform 0.6s cubic-bezier(.34,1.56,.64,1), opacity 0.25s ease;
}
.match-photo-slider.slide-in { transform: translateX(0); opacity: 1; }
.match-photo-slider.fade-out { opacity: 0; transition: opacity 0.35s ease; }
.match-photo-slider img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* non taglia mai la foto in altezza (o larghezza): la mostra intera */
  display: block;
}

.match-countdown {
  display: none;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 20px;
  border: 3px solid var(--ink);
  box-shadow: var(--shadow-sm);
}
/* Modalità Insegnante: quadratino "spento" (grigio, cliccabile per accendere il tempo) */
.match-countdown:not(.counting) {
  background: #9a9a9a;
  font-size: 20px;
  cursor: pointer;
}
.match-countdown.counting { cursor: pointer; }

.match-words-title { font-size: 15px; margin: 0 0 10px; }
.match-words-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  /* Solo le parole scorrono: la foto sopra resta sempre visibile e ferma */
  max-height: 42vh;
  overflow-y: auto;
  padding: 2px 4px 2px 2px;
  -webkit-overflow-scrolling: touch;
}
.match-word {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Baloo 2', sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
  padding: 12px 14px;
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 14px;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.match-word-bullet { font-size: 15px; flex-shrink: 0; }
.match-word:active { transform: translateY(3px); box-shadow: none; }
.match-word.shake { animation: matchShake 0.4s ease; background: #FF6B9D; color: #fff; }

/* Variante a 4 colonne (per giochi con tanti oggetti, es. 20): parole più compatte
   per stare leggibili anche così, in particolare su telefono. */
.match-words-list.match-words-4col { grid-template-columns: repeat(4, 1fr); }
.match-words-list.match-words-4col .match-word {
  font-size: 11px;
  padding: 8px 6px;
  gap: 4px;
  text-align: center;
  justify-content: center;
}
.match-words-list.match-words-4col .match-word-bullet { display: none; } /* niente spazio sprecato per la pallina, con poco posto */

@keyframes matchShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

@media (min-width: 480px) {
  .match-word { font-size: 15px; padding: 12px 14px; }
}
@media (min-width: 1100px) {
  .match-photo-stage { max-width: 560px; }
  .match-countdown { width: 60px; height: 60px; font-size: 26px; }
  .match-word { font-size: 20px; padding: 16px 18px; }
  .match-words-title { font-size: 20px; }
  .match-words-list { max-height: 46vh; }
  .match-words-list.match-words-4col .match-word { font-size: 15px; padding: 12px 10px; }
  .match-stats-bar span { font-size: 16px; padding: 8px 16px; }
}

/* ---- Motore Anagramma ---- */
.ana-slots {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0;
}
.ana-slot {
  width: 48px; height: 56px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: #fff;
  font-size: 24px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ana-slot.filled { background: var(--color-accent); }
.ana-slot.correct { background: #6FCF97; color: #fff; }
.ana-slot.wrong { background: #FF6B9D; color: #fff; }

.ana-letter-pool {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}
.ana-tile {
  width: 48px; height: 48px;
  border: 3px solid var(--ink);
  border-radius: 10px;
  background: var(--color-secondary);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.ana-tile:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
.ana-tile.used, .ana-tile:disabled { opacity: 0.25; cursor: default; }

@media (min-width: 1100px) {
  .ana-slot { width: 64px; height: 72px; font-size: 32px; }
  .ana-tile { width: 62px; height: 62px; font-size: 26px; }
}

/* ---- Motore Cruciverba ---- */
.cw-grid-wrap { overflow-x: auto; margin: 16px 0; }
.cw-grid {
  display: inline-grid;
  gap: 2px;
  background: var(--ink);
  border: 4px solid var(--ink);
  border-radius: 8px;
  width: max-content;
  margin: 0 auto;
}
.cw-cell {
  position: relative;
  width: 38px; height: 38px;
  background: #fff;
}
.cw-cell-empty { background: transparent; }
.cw-cell-number {
  position: absolute;
  top: 1px; left: 3px;
  font-size: 9px;
  font-weight: 700;
  color: #6b6570;
}
.cw-input {
  width: 100%; height: 100%;
  border: none;
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  font-family: 'Fredoka', sans-serif;
  background: transparent;
  text-transform: uppercase;
}
.cw-input:focus { outline: 2px solid var(--color-secondary); }
.cw-input.correct { background: #6FCF97; color: #fff; }
.cw-input.wrong { background: #FF6B9D; color: #fff; }

.cw-clues { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 16px; }
.cw-clue-list { flex: 1; min-width: 220px; background: #fff; border: 3px solid var(--ink); border-radius: 16px; padding: 14px 16px; }
.cw-clue-list h3 { margin: 0 0 8px; font-size: 15px; }
.cw-clue-list ul { margin: 0; padding-left: 18px; font-size: 14px; }
.cw-clue-list li { margin-bottom: 6px; }

@media (min-width: 1100px) {
  .cw-cell { width: 56px; height: 56px; }
  .cw-input { font-size: 26px; }
  .cw-cell-number { font-size: 12px; }
  .cw-clue-list { font-size: 16px; }
}

.stats-mascot {
  display: block;
  width: 140px;
  height: auto;
  margin: 4px auto 16px;
}
@media (min-width: 1100px) {
  .stats-mascot { width: 200px; }
}

.quiz-question-img {
  display: block;
  width: 100%;
  max-width: 360px;
  max-height: 280px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 4px solid var(--ink);
  margin: 0 auto 16px;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 1100px) {
  .quiz-question-img { max-width: 480px; max-height: 360px; }
}

/* Sfoca il contenuto di gioco quando è aperto l'aiutino */
.page.blurred {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
  transition: filter 0.2s ease;
}

/* ---- Schermi desktop grandi (oltre le lavagne): un po' più di respiro ----
   Fino a 1100px il sito ingrandisce testo/pulsanti pensando alle lavagne viste
   da lontano, ma la colonna di contenuto restava stretta anche su un normale
   monitor da scrivania. Da qui in su la allarghiamo un po', restando centrata. */
@media (min-width: 1400px) {
  .page { max-width: 1000px; }
  .quiz-wrap { max-width: 1000px; }
  .landing-hero { max-width: 900px; }
  .landing-features { max-width: 1100px; }
}

/* ---- Barra di ricerca giochi nella dashboard ---- */
.dashboard-search { margin: 8px 0 24px; }
.dashboard-search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 18px;
  padding: 4px 6px 4px 18px;
  box-shadow: var(--shadow-sm);
}
.dashboard-search-icon { font-size: 20px; flex-shrink: 0; }
.dashboard-search input {
  flex: 1;
  width: 100%;
  min-width: 0;
  font-size: 17px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  padding: 12px 4px;
  border: none;
  background: transparent;
}
.dashboard-search input:focus { outline: none; }
.dashboard-search-clear {
  display: none;
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: #fff;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
}
.dashboard-search-clear.visible { display: block; }

/* I risultati sostituiscono la griglia dei livelli, non ci si sovrappongono */
.dashboard-search-results {
  display: none;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.dashboard-search-results.visible { display: flex; }
.dashboard-search-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 18px;
  text-decoration: none;
  color: var(--color-text);
  background: #fff;
  border: 3px solid var(--ink);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.dashboard-search-item:active { transform: translateY(3px); box-shadow: none; }
.dashboard-search-title { font-weight: 800; font-size: 16px; font-family: 'Fredoka', sans-serif; }
.dashboard-search-location { font-size: 13px; color: var(--color-secondary); font-weight: 700; }
.dashboard-search-empty {
  padding: 20px;
  font-size: 15px;
  color: #6b6570;
  text-align: center;
  background: #fff;
  border: 3px dashed var(--ink);
  border-radius: 16px;
}

@media (min-width: 1100px) {
  .dashboard-search input { font-size: 20px; }
  .dashboard-search-title { font-size: 19px; }
  .dashboard-search-location { font-size: 15px; }
}

/* ---- Grafici pagina statistiche ---- */
.chart-card {
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-top: 18px;
  box-shadow: var(--shadow-sm);
}
.chart-title { font-size: 15px; margin: 0 0 14px; }

/* ---- Riga di grafici affiancati (es. admin: giochi completati da un utente) ---- */
.admin-charts-row { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.admin-charts-row .chart-card { flex: 1 1 280px; min-width: 280px; margin-top: 18px; }

/* ---- "I miei studenti" (insegnanti): scelta classi + schede vista ---- */
.class-picker-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.class-picker-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #FAFAFA;
  border: 2px solid #eee;
  border-radius: 12px;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.class-picker-item input { margin: 0; }

.students-view-tabs { display: flex; gap: 10px; margin: 18px 0 4px; flex-wrap: wrap; }
.students-view-tab {
  padding: 8px 16px;
  border-radius: 20px;
  border: 3px solid var(--ink);
  background: #fff;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  color: var(--color-text);
}
.students-view-tab.active { background: var(--color-secondary); color: #fff; border-color: var(--color-secondary); }

.score-timeline-svg { width: 100%; height: 140px; display: block; overflow: visible; }
.score-timeline-gridline { stroke: #eee; stroke-width: 1; vector-effect: non-scaling-stroke; }
.score-timeline-line { fill: none; stroke: var(--color-secondary); stroke-width: 2; }
.score-timeline-dot { fill: var(--color-secondary); stroke: #fff; stroke-width: 1; cursor: pointer; }
.score-timeline-legend { display: flex; justify-content: space-between; font-size: 11px; color: #999; margin-top: 4px; }

.bar-chart { display: flex; flex-direction: column; gap: 10px; }
.bar-row { display: flex; flex-direction: column; gap: 4px; }
.bar-label { font-size: 13px; font-weight: 700; }
.bar-track {
  background: #F4F1FA;
  border: 2px solid var(--ink);
  border-radius: 10px;
  height: 26px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  border-radius: 8px 0 0 8px;
  transition: width 0.4s ease;
}
.bar-fill-good { background: #6FCF97; }
.bar-fill-mid { background: #FFD166; color: #2D2A32; }
.bar-fill-low { background: #FF6B9D; }
.bar-fill-great { background: var(--color-purple); justify-content: center; padding-right: 0; }

.donut-chart-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center; }
.donut-chart { width: 160px; height: 160px; flex-shrink: 0; }
.donut-legend { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 700; }
.donut-legend-item { display: flex; align-items: center; gap: 8px; }
.donut-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; }

@media (min-width: 1100px) {
  .chart-title { font-size: 19px; }
  .bar-label { font-size: 16px; }
  .bar-track { height: 32px; }
  .bar-fill { font-size: 14px; }
}

/* ---- Classifiche ---- */
.leaderboard-list { display: flex; flex-direction: column; gap: 8px; }
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #FAFAFA;
  border: 2px solid #eee;
  border-radius: 12px;
}
.leaderboard-row-me {
  background: #FFF3D6;
  border: 3px solid var(--color-accent);
}
.leaderboard-rank {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 16px;
  width: 34px;
  flex-shrink: 0;
  text-align: center;
}
.leaderboard-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.leaderboard-name { flex: 1; font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-name a { color: inherit; text-decoration: none; }
.leaderboard-name a:hover { text-decoration: underline; }
.leaderboard-value { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 16px; color: var(--color-secondary); flex-shrink: 0; }
.leaderboard-separator { text-align: center; font-size: 20px; color: #ccc; margin: 6px 0; letter-spacing: 4px; }

@media (min-width: 1100px) {
  .leaderboard-rank { font-size: 20px; }
  .leaderboard-name { font-size: 18px; }
  .leaderboard-value { font-size: 20px; }
  .leaderboard-avatar { width: 40px; height: 40px; font-size: 20px; }
}

/* Intestazione di gruppo quando le carte sono raggruppate per tipo di carta (rarità) */
.achv-rarity-heading {
  margin-top: 24px;
  margin-bottom: 4px;
  clear: both;
}
.achv-rarity-heading:first-of-type { margin-top: 10px; }

/* ---- Spazio pubblicitario (AdSense) ---- */
.ad-slot-wrap {
  margin: 24px auto 8px;
  max-width: 728px;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #FAFAFA;
  border: 3px dashed #ccc;
  border-radius: 16px;
  padding: 12px;
}
.ad-slot-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #999;
  font-weight: 800;
}
.ad-slot-wrap ins.adsbygoogle { width: 100%; }
.ad-slot-remove-link {
  font-size: 11px;
  color: #999;
  text-decoration: none;
  margin-top: 2px;
}
.ad-slot-remove-link:hover { text-decoration: underline; color: var(--color-secondary); }

/* ---- Banner di consenso cookie pubblicitari ---- */
.ads-consent-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: #fff;
  border-top: 4px solid var(--ink);
  box-shadow: 0 -4px 12px rgba(0,0,0,0.15);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  z-index: 500;
}
.ads-consent-banner p { margin: 0; font-size: 13px; flex: 1; min-width: 200px; }
.ads-consent-banner a { color: var(--color-secondary); font-weight: 700; }
.ads-consent-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ---- Pagina donazioni: istruzione username in evidenza ---- */
.donate-username-callout {
  background: #FFF3C4;
  border: 3px solid var(--ink);
  border-radius: 14px;
  padding: 14px 16px;
  margin: 18px 0 14px;
  text-align: left;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.donate-username-callout a { color: #B8790A; font-weight: 700; }
.donate-fineprint { font-size: 13px; color: #6b6570; margin-top: 4px; }

/* ---- Valutazione a stelle e commento a fine gioco ---- */
.feedback-widgets { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.star-rating { display: flex; justify-content: center; gap: 6px; margin: 16px 0 4px; }
.star-btn {
  background: none;
  border: none;
  font-size: 32px;
  cursor: pointer;
  filter: grayscale(1) opacity(0.35);
  transition: transform 0.1s;
  padding: 2px;
}
.star-btn.selected { filter: none; }
.star-btn:active { transform: scale(1.2); }
.star-rating-status { text-align: center; font-size: 13px; color: #6b6570; min-height: 18px; margin-bottom: 10px; }

.game-rating-badge { font-size: 12px; color: #6b6570; font-weight: 700; white-space: nowrap; }

/* Box "Scrivi a Rachele" */
.comment-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(45, 42, 50, 0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 350; padding: 20px;
}
.comment-modal-box {
  background: #fff;
  border: 6px solid var(--ink);
  border-radius: 22px;
  padding: 20px;
  max-width: 420px;
  width: 100%;
  box-shadow: var(--shadow);
}
.comment-modal-box h3 { margin-top: 0; font-family: 'Fredoka', sans-serif; }
.comment-modal-box textarea {
  width: 100%;
  min-height: 110px;
  border-radius: 14px;
  border: 3px solid var(--ink);
  padding: 10px 12px;
  font-family: inherit;
  font-size: 15px;
  box-sizing: border-box;
  resize: vertical;
}
.comment-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 12px; }
.comment-modal-status { font-size: 13px; margin-top: 8px; min-height: 16px; }


/* ---- Livelli/sezioni chiusi per la classe dell'utente (Admin → Classi) ---- */
.is-class-locked {
  position: relative;
  opacity: 0.55;
  filter: grayscale(0.85);
  cursor: not-allowed;
  box-shadow: none !important;
}
.is-class-locked:active { transform: none !important; }
.class-lock-badge {
  position: absolute;
  top: 6px;
  right: 10px;
  font-size: 22px;
  line-height: 1;
}

/* ---- Motore "Trascina a gruppo": scena a tutto schermo ----
   Durante il gioco la scena è fissa sotto la barra in alto e usa TUTTO lo spazio:
   in alto il mazzo delle carte, in basso i gruppi. Le misure delle carte (nel mazzo
   e dentro ai gruppi) le calcola fitAll() in groups.php con la variabile --card-w,
   così tutto entra sempre nello schermo senza scorrere, su telefono, iPad e PC. */
body.groups-immersive { overflow: hidden; }
body.groups-immersive .ad-slot-wrap { display: none; }
/* con l'aiutino aperto la sfocatura va sulla scena (un filtro sulla pagina
   sposterebbe la scena fissa) */
body.groups-immersive .page.blurred, body.wheel-immersive .page.blurred { filter: none; }
body.groups-immersive .page.blurred .groups-scene,
body.wheel-immersive .page.blurred .wheel-scene { filter: blur(6px); }

.groups-scene {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: 80px;                       /* corretto da JS sotto la barra in alto */
  max-width: 1500px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 10px 18px 14px;
  flex-direction: column;
  z-index: 20;
  animation: quizFadeIn .25s ease;
}
.groups-scene .quiz-hud { padding-left: 62px; padding-right: 62px; margin-bottom: 4px; }
.groups-scene .quiz-progress-bar { margin: 0 62px 6px; width: auto; }
.groups-scene .matchall-instructions { margin: 2px 0 6px; font-size: clamp(12px, 1.6vw, 17px); }

.groups-deck {
  --card-w: 120px;
  flex: 1.4 1 0;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 12px;
  padding: 4px 0 10px;
}
.groups-card {
  --text-h: calc(var(--card-w) * 0.3);
  width: var(--card-w);
  box-sizing: border-box;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: calc(var(--card-w) * 0.1);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  cursor: grab;
  touch-action: none; /* la pagina non scorre mentre si trascina la carta col dito */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition: transform .12s ease, box-shadow .12s ease, width .25s ease;
}
.groups-card-img { width: 100%; aspect-ratio: 1 / 1; background: #f4f1fa; flex-shrink: 0; }
.groups-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.groups-card-text {
  height: var(--text-h);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(8px, calc(var(--card-w) * 0.115), 24px);
  line-height: 1.08;
  text-align: center;
  padding: 0 4px;
  border-top: 3px solid var(--ink);
  overflow: hidden;
  word-break: break-word;
  pointer-events: none;
}
/* carta senza immagine: stessa misura delle altre, testo grande al centro */
.groups-card-textonly { background: var(--color-accent); }
.groups-card-textonly .groups-card-text {
  height: calc(var(--card-w) * 1.3 - 8px);
  border-top: none;
  font-size: clamp(7px, calc(var(--card-w) * 0.15), 30px);
  padding: 0 6px;
  word-break: normal;
  overflow-wrap: anywhere;
}
.groups-card-selected { transform: translateY(-4px) scale(1.04); box-shadow: 0 0 0 4px var(--color-secondary), var(--shadow); }
.groups-card-dragging { z-index: 1000; transform: scale(1.06) rotate(-2deg); box-shadow: var(--shadow); cursor: grabbing; pointer-events: none; transition: none; }
.groups-card-placeholder { border: 3px dashed #ccc; border-radius: 14px; background: #FAFAFA; flex-shrink: 0; }
.groups-card-wrong { animation: matchShake 0.4s ease; border-color: #FF6B9D; }

.groups-zones {
  flex: 1.2 1 0;
  min-height: 0;
  display: grid;
  gap: clamp(8px, 1.4vw, 18px);
}
.groups-zones-2 { grid-template-columns: repeat(2, 1fr); }
.groups-zones-3 { grid-template-columns: repeat(3, 1fr); }
.groups-zone {
  position: relative;
  min-height: 0;
  min-width: 0;
  border: 4px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  transition: transform .12s ease, background-color .2s ease;
}
.groups-zone-c0 { background: #FFE0EC; }
.groups-zone-c1 { background: #DDEBFF; }
.groups-zone-c2 { background: #FFF1BF; }
.groups-zone-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: clamp(14px, 2.4vw, 30px);
  text-align: center;
  line-height: 1.1;
  padding: 2px 2px 6px;
  word-break: break-word;
}
.groups-zone-items {
  --card-w: 80px;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 6px;
  overflow: hidden;
  border: 3px dashed rgba(45, 42, 50, .25);
  border-radius: 12px;
  padding: 6px;
}
.groups-zone-count {
  position: absolute;
  top: -12px; right: -10px;
  min-width: 28px; height: 28px;
  border-radius: 14px;
  background: #fff;
  border: 3px solid var(--ink);
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}
.groups-zones-armed .groups-zone { cursor: pointer; animation: groupsPulse 1.2s ease-in-out infinite; }
.groups-zone.groups-zone-hover { transform: scale(1.03); background: var(--color-accent); }
.groups-zone.groups-zone-ok { animation: groupsOk .45s ease; }
.groups-zone.groups-zone-wrong { animation: matchShake 0.4s ease; }
.groups-zone.groups-zone-wrong::after {
  content: '✖';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; color: #FF6B9D;
  animation: groupsFade .8s ease forwards;
  pointer-events: none;
}

/* Carte già sistemate: dentro al gruppo (la misura la decide --card-w del gruppo) */
.groups-card.groups-card-placed {
  border-width: 3px;
  box-shadow: none;
  cursor: default;
  animation: groupsPop .3s ease;
}
.groups-card-placed .groups-card-text { border-top-width: 2px; }
.groups-card-placed-late { opacity: .75; }

@keyframes groupsPop { from { transform: scale(.4); } to { transform: scale(1); } }
@keyframes groupsOk { 0% { box-shadow: 0 0 0 0 #6FCF97; } 60% { box-shadow: 0 0 0 10px rgba(111,207,151,.35); } 100% { box-shadow: var(--shadow-sm); } }
@keyframes groupsFade { 0% { opacity: 1; transform: scale(.6); } 40% { opacity: 1; transform: scale(1.1); } 100% { opacity: 0; transform: scale(1); } }
@keyframes groupsPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }

@media (max-width: 599px) {
  .groups-scene { padding: 8px 10px 10px; }
  .groups-scene .quiz-hud { padding-left: 58px; padding-right: 0; }
  .groups-scene .quiz-progress-bar { margin: 0 0 4px; }
  .groups-deck { gap: 8px; }
  .groups-zone { padding: 4px 4px 6px; border-radius: 14px; }
  .groups-zone-items { gap: 4px; padding: 4px; }
  .groups-zones { margin-bottom: 64px; } /* sopra al pulsante "Aiutino" in basso a destra */
}
@media (max-height: 560px) {
  .groups-scene .matchall-instructions { display: none; }
}

/* ---- Giochi su tablet (iPad) e schermi medi ----
   Prima, da 740px a 1399px la colonna dei giochi restava larga quanto su telefono
   (640-700px) con elementi piccoli: su iPad restava tanto spazio vuoto a destra e
   sinistra. Qui la pagina di gioco (play.php → .page-game) si allarga e gli
   elementi di ogni motore crescono in proporzione. */
@media (min-width: 740px) {
  .page.page-game { max-width: min(1000px, 94vw); padding: 20px 24px; }
  .page-game .quiz-wrap { max-width: 100%; }
  .page-game .page-title { font-size: 32px; }
  .page-game .quiz-intro-meta span { font-size: 16px; padding: 8px 16px; }
  .page-game .quiz-rules-box { font-size: 17px; padding: 22px 26px; }
  .page-game .quiz-hearts { font-size: 28px; }
  .page-game .quiz-progress { font-size: 16px; }
  .page-game .matchall-instructions { font-size: 17px; }

  /* Quiz */
  .page-game .quiz-question { font-size: 30px; padding: 36px 28px; }
  .page-game .quiz-option { font-size: 22px; padding: 22px 20px; }
  .page-game .quiz-options-2col .quiz-option { font-size: 20px; padding: 20px 14px; }
  .page-game .quiz-question-img { max-width: 460px; max-height: 340px; }

  /* Abbina tutti */
  .page-game .matchall-card, .page-game .matchall-slot { width: 132px; }
  .page-game .matchall-slot-label { max-width: 132px; font-size: 15px; }
  .page-game .matchall-card-text { font-size: 18px; }
  .page-game .matchall-card-caption { font-size: 12px; }
  .page-game .matchall-section-title { font-size: 16px; }
  .page-game .matchall-deck, .page-game .matchall-slots { gap: 16px 20px; }

  /* Gira e indovina */
  .page-game .flip-card-wrap { width: min(42vh, 360px); }
  .page-game .flip-option-btn { font-size: 22px; max-width: 320px; padding: 20px 16px; }
  .page-game .flip-hint-text { font-size: 15px; }

  /* Impiccato */
  .page-game .hangman-image-wrap { width: 230px; }
  .page-game .hangman-figure-wrap { width: 250px; }
  .page-game .hangman-attempts { font-size: 18px; }
  .page-game .hangman-char { min-width: 30px; height: 44px; font-size: 32px; }
  .page-game .hangman-word-space { width: 22px; height: 44px; }
  .page-game .hangman-keyboard { max-width: 720px; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 10px; }
  .page-game .hangman-key { font-size: 22px; padding: 14px 0; }

  /* Abbinamento */
  .page-game .match-photo-stage { max-width: 600px; }
  .page-game .match-word { font-size: 18px; padding: 14px 16px; }
  .page-game .match-words-title { font-size: 18px; }
  .page-game .match-words-list { max-height: 46vh; }
  .page-game .match-words-list.match-words-4col .match-word { font-size: 15px; padding: 12px 8px; }

  /* Anagramma */
  .page-game .ana-slot { width: 60px; height: 68px; font-size: 30px; }
  .page-game .ana-tile { width: 58px; height: 58px; font-size: 26px; }

  /* Ruota */
  .page-game .wheel-wrap { width: min(62vh, 560px); }
}
@media (min-width: 1100px) {
  .page.page-game { max-width: 1100px; }
  .page-game .matchall-card, .page-game .matchall-slot { width: 150px; }
  .page-game .matchall-slot-label { max-width: 150px; font-size: 17px; }
}
/* iPad in orizzontale (schermo basso): niente testi "da lavagna" troppo alti,
   così domanda + risposte stanno nello schermo senza scorrere. */
@media (min-width: 1000px) and (max-height: 1050px) and (pointer: coarse) {
  .page-game .quiz-question { font-size: 30px; padding: 28px 24px; }
  .page-game .quiz-option { font-size: 22px; padding: 18px 18px; }
  .page-game .quiz-question-img { max-height: 30vh; }
  .page-game .flip-card-wrap { width: min(40vh, 340px); }
}

/* Il pulsante 🎵 (fisso in alto a sinistra) copriva i cuori: spazio a sinistra nella barra cuori */
@media (max-width: 1199px) {
  .page-game .quiz-hud { padding-left: 58px; }
}
/* ---- Livelli, categorie ed elenco giochi su tablet (iPad) e schermi medi ----
   (dashboard.php, levels.php, category.php → .page-wide): colonna più larga e
   riquadri più grandi, invece della colonna stretta da telefono. */
@media (min-width: 740px) {
  .page.page-wide { max-width: min(1000px, 94vw); padding: 24px 28px; }
  .page-wide .page-title { font-size: 34px; }
  .page-wide .page-subtitle { font-size: 18px; }
  .page-wide .back-link { font-size: 18px; }
  .page-wide .level-grid { gap: 20px; margin-top: 24px; }
  .page-wide .level-card { width: calc(20% - 16px); border-radius: 26px; }
  .page-wide .level-code { font-size: 54px; }
  .page-wide .level-label { font-size: 18px; }
  .page-wide .category-grid, .page-wide .game-grid { gap: 20px; margin-top: 22px; }
  .page-wide .category-card, .page-wide .game-card { padding: 22px 22px; border-radius: 20px; gap: 8px; }
  .page-wide .category-card { font-size: 22px; font-family: 'Fredoka', sans-serif; min-height: 96px; justify-content: center; }
  .page-wide .category-count { font-size: 15px; font-family: 'Baloo 2', sans-serif; }
  .page-wide .game-title { font-size: 20px; line-height: 1.25; }
  .page-wide .game-type-tag, .page-wide .game-test-badge { font-size: 13px; padding: 4px 12px; }
  .page-wide .game-status { font-size: 14px; }
  .page-wide .game-rating-badge { font-size: 14px; }
  .page-wide .game-new-badge { font-size: 13px; }
  .page-wide .dashboard-search input { font-size: 20px; }
  .page-wide .site-update-box { font-size: 17px; }
}
@media (min-width: 1000px) {
  .page-wide .category-grid, .page-wide .game-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1100px) {
  .page.page-wide { max-width: 1100px; }
}

/* ---- Gira la ruota: scena a tutto schermo ("immersiva") ----
   La scena è fissa sotto la barra in alto e copre tutto lo schermo; posizione e
   misura di ruota e freccia le calcola layoutScene() in wheel.php. */
body.wheel-immersive { overflow: hidden; }
body.wheel-immersive .ad-slot-wrap { display: none; }
.wheel-scene {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  top: 80px;                     /* corretto da JS sotto la barra in alto */
  overflow: hidden;              /* durante lo zoom la ruota esce dallo schermo a sinistra */
  z-index: 20;
  touch-action: none;
}
.wheel-scene .wheel-wrap {
  position: absolute;
  width: 300px; height: 300px;   /* misure vere da JS */
  margin: 0;
  transform-origin: 100% 50%;    /* zoom verso la freccia, sul bordo destro della ruota */
  transition: transform 1.5s cubic-bezier(.45, 0, .2, 1);
  cursor: grab;
  touch-action: none;
}
.wheel-scene.zoomed .wheel-wrap { transform: scale(var(--wheel-zoom, 1.75)); }
.wheel-scene.unzooming .wheel-wrap { transition-duration: .8s; }
.wheel-scene .wheel-svg { width: 100%; height: 100%; box-sizing: border-box; }
.wheel-scene .wheel-pointer {
  position: absolute;
  right: auto;
  transform: translateY(-50%);
  z-index: 3;
  line-height: 1;
}
.wheel-scene.zoomed .wheel-pointer { animation: wheelPointerTick .5s ease-in-out 3 1.4s; }
@keyframes wheelPointerTick {
  0%, 100% { transform: translateY(-50%) rotate(0deg); }
  50% { transform: translateY(-50%) rotate(-14deg); }
}

/* Immagine di Rachele al centro: elemento HTML sopra il cerchio bianco dell'SVG
   (cerchio di raggio 50 su 300 con bordo: immagine larga il 30% della ruota). */
.wheel-hub-html {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc((100% - 12px) * 0.3);
  aspect-ratio: 1 / 1;
  margin-left: calc((100% - 12px) * -0.15);
  margin-top: calc((100% - 12px) * -0.15);
  border-radius: 50%;
  overflow: hidden;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
}
.wheel-hub-html .wheel-hub-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .35s ease;
}
.wheel-hub-html .wheel-hub-img.visible { opacity: 1; }

/* Box del titolo: sempre in alto al centro, sopra la ruota */
.wheel-titlebox {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(640px, calc(100% - 150px));
  box-sizing: border-box;
  background: #fff;
  border: 4px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: 10px 22px 12px;
  text-align: center;
  z-index: 5;
  pointer-events: none;
}
.wheel-titlebox-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-word;
  text-wrap: balance;
}
.wheel-titlebox-result {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-secondary);
  margin-top: 4px;
  min-height: 1.2em;
  word-break: break-word;
  text-wrap: balance;
}
.wheel-titlebox-result.is-hint { color: #9a94a0; font-size: 15px !important; font-weight: 600; }
.wheel-titlebox-result.pop { animation: wheelResultPop .5s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes wheelResultPop { 0% { transform: scale(.7); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

/* Spunta (e "rimetti tutti in gioco"): a destra in orizzontale, in basso in verticale */
.wheel-side-controls {
  position: absolute;
  display: flex;
  gap: 12px;
  align-items: center;
  z-index: 5;
}
.wheel-scene.is-landscape .wheel-side-controls {
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  flex-direction: column;
}
.wheel-scene.is-portrait .wheel-side-controls {
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
}
.wheel-side-controls .wheel-check-btn {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  font-size: 38px;
}
.wheel-reset-btn {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 4px solid var(--ink);
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 22px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.wheel-reset-btn:active, .wheel-side-controls .wheel-check-btn:active:not(:disabled) { transform: translateY(3px); box-shadow: none; }
@media (max-width: 479px) {
  .wheel-titlebox { max-width: calc(100% - 130px); padding: 8px 12px 10px; border-radius: 16px; }
  .wheel-side-controls .wheel-check-btn { width: 64px; height: 64px; font-size: 32px; }
}
@media (max-width: 599px) {
  .groups-scene .matchall-instructions { padding-left: 54px; text-align: left; }
}

/* Ruota e "Trascina a gruppo": la barra del sito resta SEMPRE sopra la scena di gioco */
body.wheel-immersive .topbar, body.groups-immersive .topbar { z-index: 40; }
.wheel-hub { stroke-width: 6; }