/* ===============================================================
   MINIGIOCHI — area di gioco, cornice comune (shell.js) e una
   sezione per minigioco, nell'ordine del catalogo.
   Per aggiungere un minigioco: una nuova sezione in fondo, con il
   prefisso della classe uguale per tutte le sue regole.
   =============================================================== */

/* ---------------------------------------------------------------
   Area di gioco: occupa tutto lo schermo e copre lo sfondo del tema
   --------------------------------------------------------------- */
.game-area {
  position: fixed;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px;
  text-align: center;
  font-size: 28px;
  font-weight: 800;
  transition: background 0.1s;
}
.game-area .hint { font-size: 16px; font-weight: 400; color: rgba(255,255,255,0.75); }
.game-area .big { font-size: 64px; }
/* Prima volta: spiegazione completa al posto della riga breve */
.game-area.intro { gap: 12px; }
.game-area.intro img.countdown-icon { width: 96px; height: 96px; margin: 0; }
.howto-intro {
  max-width: 360px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.35;
  color: rgba(255,255,255,0.92);
}
.howto-label { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--accent); margin-bottom: 4px; }

/* Cornice comune (createShell): titolo, timer, suggerimento, corpo */
.game-shell {
  justify-content: flex-start;
  padding: calc(12px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
  gap: 8px;
  font-weight: 600;
  font-size: 18px;
}
.game-header { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 20px; font-weight: 800; }
.game-timer { font-variant-numeric: tabular-nums; color: var(--accent); }
.game-hint { font-size: 16px; color: rgba(255,255,255,0.8); font-weight: 500; }
.game-body {
  flex: 1;
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  min-height: 0;
}
.game-done { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.game-done .big { font-size: 44px; }

/* Elementi condivisi da più minigiochi */
.keypad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.key { font-size: 22px; padding: 14px 0; background: var(--bg-2); color: var(--text); }
.key.ok { background: var(--ok); color: var(--ink); }
.key.ko { background: var(--danger); color: white; }

/* ---------------------------------------------------------------
   Memory (memory.js)
   --------------------------------------------------------------- */
.memory-grid { display: grid; gap: 8px; width: 100%; }
.memory-card { aspect-ratio: 3 / 4; position: relative; border-radius: 12px; perspective: 600px; }
.memory-back, .memory-face {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  backface-visibility: hidden;
  transition: transform 0.25s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.memory-back { background: linear-gradient(135deg, #3f3d8a, #2a2860); border: 2px solid rgba(255,255,255,0.12); }
.memory-face { background: #f6f3ff; transform: rotateY(180deg); }
.memory-card.open .memory-back, .memory-card.found .memory-back { transform: rotateY(180deg); }
.memory-card.open .memory-face, .memory-card.found .memory-face { transform: rotateY(0); }
.memory-card.found .memory-face { opacity: 0.55; }
/* Forme disegnate in CSS: il colore arriva da --shape-color */
.memory-face::before { content: ""; width: 58%; aspect-ratio: 1; background: var(--shape-color); }
.shape-circle::before   { border-radius: 50%; }
.shape-square::before   { border-radius: 8%; }
.shape-triangle::before { clip-path: polygon(50% 5%, 97% 95%, 3% 95%); }
.shape-star::before     { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.shape-diamond::before  { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.shape-hexagon::before  { clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%); }
.shape-cross::before    { clip-path: polygon(35% 0%, 65% 0%, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0% 65%, 0% 35%, 35% 35%); }
.shape-pentagon::before { clip-path: polygon(50% 0%, 100% 38%, 81% 100%, 19% 100%, 0% 38%); }
.shape-ring::before     { border-radius: 50%; background: transparent; border: 10px solid var(--shape-color); box-sizing: border-box; }
.shape-pill::before     { border-radius: 999px; width: 70%; aspect-ratio: 2 / 1; }

/* ---------------------------------------------------------------
   Sequenza (sequenza.js)
   --------------------------------------------------------------- */
.seq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 360px; margin: 0 auto; }
.seq-pad { aspect-ratio: 1; border-radius: 20px; background: var(--pad); opacity: 0.55; transition: opacity 0.08s, transform 0.08s, background 0.08s; }
.seq-pad.lit { opacity: 1; background: var(--pad-bright); transform: scale(0.96); }

/* ---------------------------------------------------------------
   Numeri (numeri.js)
   --------------------------------------------------------------- */
.num-grid { display: grid; gap: 8px; width: 100%; }
.num-cell {
  aspect-ratio: 1;
  border-radius: 14px;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; font-weight: 700;
  transition: opacity 0.15s, background 0.1s;
}
.num-cell.hit { opacity: 0.15; }
.num-cell.wrong { background: var(--danger); }

/* ---------------------------------------------------------------
   Bersagli (bersagli.js)
   --------------------------------------------------------------- */
.target-field { position: relative; width: 100%; height: 100%; min-height: 60vh; border-radius: 16px; background: rgba(0,0,0,0.2); overflow: hidden; }
.target { position: absolute; border-radius: 50%; box-shadow: inset 0 0 0 6px rgba(255,255,255,0.35), 0 4px 12px rgba(0,0,0,0.3); animation: pop 0.15s ease-out; }
.target.hit { transform: scale(1.3); opacity: 0; transition: transform 0.12s, opacity 0.12s; }
@keyframes pop { from { transform: scale(0.3); } to { transform: scale(1); } }

/* ---------------------------------------------------------------
   Calcoli (calcoli.js)
   --------------------------------------------------------------- */
.calc-question { font-size: 56px; font-weight: 700; text-align: center; margin-bottom: 24px; font-variant-numeric: tabular-nums; }
.calc-question.flash-wrong { color: var(--danger); }
.calc-answers { display: flex; flex-direction: column; gap: 12px; }
.calc-answer { font-size: 32px; padding: 20px; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.15); color: var(--text); }

/* ---------------------------------------------------------------
   Colori (colori.js)
   --------------------------------------------------------------- */
.stroop-word { font-size: 56px; font-weight: 700; text-align: center; letter-spacing: 2px; margin-bottom: 28px; text-shadow: 0 2px 0 rgba(0,0,0,0.3); }
.stroop-pads { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.stroop-pad { height: 96px; border-radius: 18px; padding: 0; }

/* ---------------------------------------------------------------
   Precisione (precisione.js)
   --------------------------------------------------------------- */
.prec-feedback { text-align: center; font-size: 30px; font-weight: 700; min-height: 40px; color: var(--accent); }
.prec-feedback.bad { color: var(--danger); }
.prec-feedback.great { color: var(--ok); }
.prec-bar { position: relative; height: 44px; border-radius: 22px; background: rgba(255,255,255,0.12); margin: 12px 0 24px; overflow: hidden; }
.prec-zone { position: absolute; top: 0; bottom: 0; background: linear-gradient(90deg, rgba(67,209,122,0.35), #43d17a, rgba(67,209,122,0.35)); }
.prec-marker { position: absolute; top: -4px; bottom: -4px; width: 8px; margin-left: -4px; background: white; border-radius: 4px; box-shadow: 0 0 8px rgba(255,255,255,0.8); }
.prec-tap { height: 160px; border-radius: 24px; background: var(--accent); color: var(--ink); display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; }
.prec-tap:active { transform: scale(0.98); }

/* ---------------------------------------------------------------
   Salta (salta.js) — canvas
   --------------------------------------------------------------- */
.run-canvas { display: block; margin: 0 auto; border-radius: 16px; touch-action: none; }

/* ---------------------------------------------------------------
   Intruso (intruso.js)
   --------------------------------------------------------------- */
.odd-grid { display: grid; gap: 6px; width: 100%; }
.odd-cell { aspect-ratio: 1; border-radius: 10px; transition: transform 0.1s; }
.odd-cell.wrong { transform: scale(0.85); }

/* ---------------------------------------------------------------
   Frecce (frecce.js)
   --------------------------------------------------------------- */
.swipe-pad {
  flex: 1;
  min-height: 60vh;
  border-radius: 24px;
  background: rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  touch-action: none;
  transition: background 0.1s;
}
.swipe-pad.ok { background: rgba(67,209,122,0.35); }
.swipe-pad.ko { background: rgba(255,77,109,0.35); }
.swipe-help { font-size: 14px; color: var(--muted); font-weight: 500; }
.arrow {
  width: 150px; height: 150px;
  background: #36cfc9;
  clip-path: polygon(50% 0%, 100% 50%, 70% 50%, 70% 100%, 30% 100%, 30% 50%, 0% 50%);
  transition: transform 0.08s;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
}
.arrow.red { background: #ff595e; }

/* ---------------------------------------------------------------
   Palloncini (palloncini.js)
   --------------------------------------------------------------- */
.balloon-feedback { text-align: center; font-size: 30px; font-weight: 700; min-height: 40px; color: var(--accent); }
.balloon-feedback.bad { color: var(--danger); }
.balloon-feedback.great { color: var(--ok); }
.balloon-stage { position: relative; height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.balloon-target {
  position: absolute; left: 8%; right: 8%;
  border-top: 3px dashed var(--accent);
  text-align: center; font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--accent);
  padding-top: 2px; pointer-events: none;
  transition: bottom 0.3s;
}
.balloon {
  border-radius: 50% 50% 50% 50% / 45% 45% 55% 55%;
  box-shadow: inset -12px -14px 0 rgba(0,0,0,0.12), inset 10px 12px 0 rgba(255,255,255,0.25);
  transition: transform 0.15s;
}
.balloon.pop { transform: scale(1.4); opacity: 0 !important; transition: transform 0.12s, opacity 0.12s; }
.balloon-knot { width: 14px; height: 10px; background: rgba(255,255,255,0.5); clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.balloon-string { width: 2px; height: 60px; background: rgba(255,255,255,0.45); }

/* ---------------------------------------------------------------
   Di più (dipiu.js)
   --------------------------------------------------------------- */
.dots-wrap { display: flex; gap: 12px; height: 62vh; }
.dots-panel { flex: 1; position: relative; border-radius: 18px; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.12); overflow: hidden; }
.dots-panel:active { background: rgba(255,255,255,0.16); }
.dot { position: absolute; border-radius: 50%; }

/* ---------------------------------------------------------------
   Tocchi (tocchi.js)
   --------------------------------------------------------------- */
.tap-pad {
  position: relative;
  flex: 1;
  min-height: 60vh;
  border-radius: 28px;
  background: radial-gradient(circle at 50% 40%, #3f3d8a, #26254a);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  touch-action: none;
}
.tap-counter { font-size: 120px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; pointer-events: none; }
.ripple {
  position: absolute;
  width: 20px; height: 20px;
  margin: -10px 0 0 -10px;
  border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.7);
  animation: ripple 0.5s ease-out forwards;
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(9); opacity: 0; } }

/* ---------------------------------------------------------------
   Ritmo (ritmo.js)
   --------------------------------------------------------------- */
.rhythm-feedback { text-align: center; font-size: 28px; font-weight: 700; min-height: 36px; color: var(--accent); }
.rhythm-feedback.great { color: var(--ok); }
.rhythm-feedback.bad { color: var(--danger); }
.rhythm-stage { position: relative; height: 260px; display: flex; align-items: center; justify-content: center; }
.rhythm-core { width: 110px; height: 110px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 30px rgba(255,183,3,0.5); }
.rhythm-core.beat { animation: beat 0.18s ease-out; }
@keyframes beat { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
.rhythm-ring { position: absolute; width: 110px; height: 110px; border-radius: 50%; border: 4px solid rgba(255,255,255,0.8); pointer-events: none; }
.rhythm-dots { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; }
.rhythm-dot { width: 14px; height: 14px; border-radius: 50%; background: rgba(255,255,255,0.15); }
.rhythm-dot.great { background: var(--ok); }
.rhythm-dot.ok { background: var(--accent); }
.rhythm-dot.bad { background: var(--danger); }

/* ---------------------------------------------------------------
   Torre (torre.js), Frenata (frenata.js), Cesto (cesto.js) — canvas
   (usano .run-canvas)
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Lampi (lampi.js) — usa anche .keypad
   --------------------------------------------------------------- */
.flash-stage { position: relative; height: 300px; border-radius: 20px; background: rgba(0,0,0,0.25); overflow: hidden; margin-bottom: 12px; }
.flash { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; box-shadow: 0 0 24px currentColor; animation: flashpop 0.15s ease-out; }
@keyframes flashpop { from { transform: scale(0.3); } to { transform: scale(1); } }

/* ---------------------------------------------------------------
   Metà (meta.js)
   --------------------------------------------------------------- */
.half-stage { position: relative; height: 62vh; border-radius: 20px; background: rgba(0,0,0,0.2); overflow: hidden; touch-action: none; }
.half-bar { position: absolute; height: 18px; border-radius: 9px; transform-origin: center; margin-top: -9px; }
.half-mark, .half-truth { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; pointer-events: none; }
.half-mark { border: 3px solid white; }
.half-truth { background: var(--ok); }

/* ---------------------------------------------------------------
   Cronometro cieco (cinquesecondi.js)
   --------------------------------------------------------------- */
.clock-target { text-align: center; font-size: 22px; font-weight: 800; color: var(--muted); margin-bottom: 8px; }
.clock-display { text-align: center; font-size: 84px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); transition: opacity 0.2s; margin-bottom: 8px; }
.clock-display.hidden { opacity: 0.06; }

/* ---------------------------------------------------------------
   Copia (copia.js)
   --------------------------------------------------------------- */
.copy-grid { display: grid; gap: 8px; width: 100%; max-width: 340px; margin: 0 auto 16px; }
.copy-cell { aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.12); transition: background 0.1s; }
.copy-cell.lit { background: var(--accent); border-color: var(--accent); }
.copy-cell.on { background: #36cfc9; border-color: #36cfc9; }
.copy-cell.ok { background: var(--ok); border-color: var(--ok); }
.copy-cell.missed { background: rgba(255,255,255,0.1); border-color: var(--accent); border-style: dashed; }
.copy-cell.wrong { background: var(--danger); border-color: var(--danger); }
.copy-confirm { max-width: 340px; margin: 0 auto; width: 100%; }

/* ---------------------------------------------------------------
   Anagrammi (anagrammi.js)
   --------------------------------------------------------------- */
.ana-answer { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; min-height: 56px; margin-bottom: 20px; }
.ana-slot {
  width: 40px; height: 52px; border-radius: 10px;
  background: rgba(255,255,255,0.08); border-bottom: 3px solid var(--accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700;
}
.ana-answer.ok .ana-slot { background: var(--ok); color: var(--ink); }
.ana-answer.ko .ana-slot { background: var(--danger); animation: shake 0.25s; }
.ana-tiles { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.ana-tile { width: 52px; height: 60px; padding: 0; font-size: 28px; background: #f6f3ff; color: var(--ink); border-radius: 12px; }
.ana-tile.used { opacity: 0.15; }

/* ---------------------------------------------------------------
   Dieci (dieci.js)
   --------------------------------------------------------------- */
.ten-grid { display: grid; gap: 8px; width: 100%; }
.ten-cell { aspect-ratio: 1; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 30px; font-weight: 700; color: var(--ink); transition: transform 0.12s, opacity 0.2s; }
.ten-cell.sel { transform: scale(0.9); outline: 4px solid white; }
.ten-cell.gone { opacity: 0; transform: scale(0.5); }
.ten-cell.wrong { animation: shake 0.25s; outline: 4px solid var(--danger); }

/* ---------------------------------------------------------------
   Melodia (melodia.js)
   --------------------------------------------------------------- */
.mel-keys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 380px; margin: 0 auto 16px; }
.mel-key {
  height: 200px; border-radius: 14px 14px 22px 22px;
  background: var(--pad); opacity: 0.6;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px;
  font-size: 18px; font-weight: 800; color: rgba(0,0,0,0.55);
  transition: opacity 0.08s, transform 0.08s, background 0.08s;
  box-shadow: inset 0 -6px 0 rgba(0,0,0,0.18);
}
.mel-key.lit { opacity: 1; background: var(--pad-bright); transform: translateY(3px); box-shadow: none; }
.mel-progress { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; min-height: 14px; }
.mel-dot { width: 12px; height: 12px; border-radius: 50%; background: rgba(255,255,255,0.18); }
.mel-dot.ok { background: var(--ok); }

/* ---------------------------------------------------------------
   Ordina (ordina.js)
   --------------------------------------------------------------- */
.ord-field { position: relative; width: 100%; height: 62vh; border-radius: 20px; background: rgba(0,0,0,0.2); overflow: hidden; }
.ord-circle {
  position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.3), 0 4px 12px rgba(0,0,0,0.3);
  transition: opacity 0.2s, transform 0.2s;
}
.ord-circle.gone { opacity: 0; transform: translate(-50%, -50%) scale(0.3); pointer-events: none; }
.ord-circle.shake { animation: shake 0.25s; }

/* ---------------------------------------------------------------
   Parola nascosta (parola.js)
   --------------------------------------------------------------- */
.word-target { text-align: center; font-size: 30px; font-weight: 800; letter-spacing: 4px; color: var(--accent); margin-bottom: 12px; }
.word-grid { display: grid; gap: 6px; width: 100%; max-width: 360px; margin: 0 auto; }
.word-cell {
  aspect-ratio: 1; border-radius: 10px;
  background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700;
  transition: background 0.1s;
}
.word-cell.on { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.word-cell.ok { background: var(--ok); border-color: var(--ok); color: var(--ink); }
.word-cell.wrong { background: var(--danger); border-color: var(--danger); animation: shake 0.25s; }

/* ---------------------------------------------------------------
   Tris veloce (tris.js)
   --------------------------------------------------------------- */
.tris-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 300px; margin: 0 auto 14px; }
.tris-cell {
  aspect-ratio: 1; border-radius: 14px;
  background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 48px; font-weight: 800;
}
.tris-cell.x { color: var(--accent); }
.tris-cell.o { color: #4cc9f0; }
.tris-cell.win { background: rgba(67,209,122,0.3); border-color: var(--ok); }
.tris-tally { text-align: center; color: var(--muted); font-size: 15px; font-weight: 600; }

/* ---------------------------------------------------------------
   Pesca (pesca.js) — canvas
   --------------------------------------------------------------- */
.pesca-feedback { text-align: center; font-size: 22px; font-weight: 700; min-height: 30px; color: var(--accent); margin-top: 8px; }
.pesca-feedback.bad { color: var(--danger); }
.pesca-feedback.great { color: var(--ok); }

/* ---------------------------------------------------------------
   Traiettoria (traiettoria.js) — canvas (usa .run-canvas)
   Labirinto (labirinto.js) — canvas (usa .run-canvas)
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Capitali (capitali.js)
   --------------------------------------------------------------- */
.quiz-flag { text-align: center; font-size: 72px; line-height: 1; margin-bottom: 6px; }
.quiz-question { text-align: center; font-size: 26px; font-weight: 700; margin-bottom: 18px; }
.quiz-question.flash-wrong { color: var(--danger); }
.quiz-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.quiz-answer { font-size: 20px; padding: 18px 8px; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.15); color: var(--text); border-radius: 14px; }

/* ---------------------------------------------------------------
   Talpe (talpe.js)
   --------------------------------------------------------------- */
.mole-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; max-width: 360px; margin: 0 auto; }
.mole-hole { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 60%, #1b1a2e 55%, #3a3960 56%); position: relative; overflow: hidden; }
.mole-thing { position: absolute; left: 18%; right: 18%; bottom: -70%; height: 70%; border-radius: 45% 45% 20% 20%; transition: bottom 0.12s; }
.mole-thing.up { bottom: 8%; }
.mole-thing.mole { background: #a9743a; box-shadow: inset 0 -10px 0 rgba(0,0,0,0.2); }
.mole-thing.mole::before { content: ""; position: absolute; top: 28%; left: 22%; width: 12%; aspect-ratio: 1; border-radius: 50%; background: #1b1a2e; box-shadow: 260% 0 0 #1b1a2e; }
.mole-thing.mole::after { content: ""; position: absolute; top: 50%; left: 40%; width: 20%; height: 12%; border-radius: 50%; background: #ff8fa3; }
.mole-thing.bomb { background: #2b2b3a; border-radius: 50%; box-shadow: inset -6px -8px 0 rgba(0,0,0,0.35); }
.mole-thing.bomb::before { content: ""; position: absolute; top: -14%; left: 46%; width: 8%; height: 22%; background: #ffb703; border-radius: 2px; }
.mole-thing.hit { bottom: -70%; transition: bottom 0.1s; }
.mole-thing.boom { background: #ff4d6d; transform: scale(1.4); opacity: 0; transition: transform 0.2s, opacity 0.2s; }

/* ---------------------------------------------------------------
   Lampadine (lampadine.js)
   --------------------------------------------------------------- */
.bulb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; width: 100%; max-width: 340px; margin: 0 auto; }
.bulb { aspect-ratio: 1; border-radius: 50% 50% 40% 40%; background: rgba(255,255,255,0.08); border: 3px solid rgba(255,255,255,0.12); transition: background 0.08s, box-shadow 0.08s; }
.bulb.on { background: var(--c); border-color: var(--c); box-shadow: 0 0 30px var(--c), 0 0 60px color-mix(in srgb, var(--c) 50%, transparent); }
.bulb.flash { background: #f6f3ff; }
.bulb.shake { animation: shake 0.25s; }

/* ---------------------------------------------------------------
   Sfuggente (sfuggente.js) — canvas · Bussolotti (bussolotti.js) — canvas
   Equilibrio (equilibrio.js) — canvas · Serpente (serpente.js) — canvas · Strada (strada.js) — canvas
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Suoni (suoni.js)
   --------------------------------------------------------------- */
.snd-grid { display: grid; gap: 10px; width: 100%; max-width: 360px; margin: 0 auto; }
.snd-tile { aspect-ratio: 1; border-radius: 14px; background: linear-gradient(135deg, #3f3d8a, #2a2860); border: 2px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; transition: transform 0.1s, background 0.15s; }
.snd-tile .snd-icon { font-size: 28px; opacity: 0.35; }
.snd-tile.open { transform: scale(0.94); background: #4cc9f0; }
.snd-tile.open .snd-icon { opacity: 1; color: #1b1a2e; }
.snd-tile.found { border-color: rgba(255,255,255,0.4); }
.snd-tile.found .snd-icon { opacity: 1; color: #1b1a2e; }

/* ---------------------------------------------------------------
   Cosa manca (cosamanca.js) — usa le forme .shape-* di Memory
   --------------------------------------------------------------- */
.cm-field { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px; min-height: 200px; padding: 12px; border-radius: 20px; background: rgba(0,0,0,0.2); margin-bottom: 16px; }
.cm-item { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; }
.cm-item::before { content: ""; width: 80%; aspect-ratio: 1; background: var(--shape-color); }
.cm-item.small { width: 48px; height: 48px; }
.cm-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cm-option { padding: 10px 0; background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.15); border-radius: 14px; display: flex; justify-content: center; }
.cm-option.ok { background: rgba(67,209,122,0.4); border-color: var(--ok); }
.cm-option.ko { background: rgba(255,77,109,0.4); border-color: var(--danger); }

/* ---------------------------------------------------------------
   Cifre (cifre.js)
   --------------------------------------------------------------- */
.cif-display { text-align: center; font-size: 44px; font-weight: 800; letter-spacing: 6px; font-variant-numeric: tabular-nums; color: var(--accent); min-height: 56px; transition: opacity 0.2s; }
.cif-display.hidden { color: rgba(255,255,255,0.25); }
.cif-typed { text-align: center; font-size: 30px; font-weight: 700; letter-spacing: 5px; min-height: 40px; font-variant-numeric: tabular-nums; margin-bottom: 10px; }
.cif-typed.ok { color: var(--ok); }
.cif-typed.ko { color: var(--danger); }
.cif-pad { grid-template-columns: repeat(3, 1fr); max-width: 300px; margin: 0 auto; }

/* ---------------------------------------------------------------
   Quanti (quanti.js) — usa le forme .shape-*
   --------------------------------------------------------------- */
.qn-question { text-align: center; font-size: 26px; font-weight: 800; margin-bottom: 8px; }
.qn-field { position: relative; height: 46vh; border-radius: 20px; background: rgba(0,0,0,0.2); overflow: hidden; margin-bottom: 12px; }
.qn-shape { position: absolute; display: flex; align-items: center; justify-content: center; }
.qn-shape::before { content: ""; width: 100%; aspect-ratio: 1; background: var(--shape-color); }
.qn-shape.mark::before { outline: 3px solid #fff; outline-offset: 2px; }

/* ---------------------------------------------------------------
   Gemelli (gemelli.js)
   --------------------------------------------------------------- */
.gem-pair { display: flex; gap: 14px; justify-content: center; margin-bottom: 16px; }
.gem-pair.shake { animation: shake 0.25s; }
.gem-grid { display: grid; gap: 4px; width: 46%; max-width: 170px; padding: 6px; border-radius: 12px; background: rgba(0,0,0,0.25); }
.gem-cell { aspect-ratio: 1; border-radius: 4px; }
.gem-buttons { display: flex; gap: 10px; }
.gem-btn { flex: 1; font-size: 22px; padding: 18px 0; }
.gem-btn.same { background: var(--ok); color: var(--ink); }
.gem-btn.diff { background: var(--danger); color: white; }

/* ---------------------------------------------------------------
   Bilancia (bilancia.js)
   --------------------------------------------------------------- */
.bil-beam { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; transition: transform 0.25s; transform-origin: center; }
.bil-beam.tilt-l { transform: rotate(-4deg); }
.bil-beam.tilt-r { transform: rotate(4deg); }
.bil-pan { flex: 1; font-size: 28px; padding: 26px 6px; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.15); color: var(--text); font-variant-numeric: tabular-nums; }
.bil-pivot { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 26px solid #a9743a; }
.bil-equal { width: 100%; font-size: 22px; padding: 16px; background: var(--accent); color: var(--ink); }

/* ---------------------------------------------------------------
   Prossimo (prossimo.js)
   --------------------------------------------------------------- */
.seq-line { display: flex; justify-content: center; align-items: center; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.seq-num { min-width: 52px; padding: 10px 8px; border-radius: 12px; background: rgba(255,255,255,0.1); text-align: center; font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; }
.seq-num.q { background: var(--accent); color: var(--ink); }

/* ---------------------------------------------------------------
   Orologio (orologio.js)
   --------------------------------------------------------------- */
.clock-face { display: block; margin: 0 auto 16px; }

/* ---------------------------------------------------------------
   Ortografia (ortografia.js) · Rime (rime.js) · Contrari (contrari.js)
   --------------------------------------------------------------- */
.ort-answers { display: flex; flex-direction: column; gap: 10px; }
.ort-answer { font-size: 24px; padding: 16px; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.15); color: var(--text); letter-spacing: 0.5px; }
.rime-label { text-align: center; color: var(--muted); font-size: 15px; margin-bottom: 4px; }

/* Manche speciale annunciata al conto alla rovescia */
.special-banner {
  max-width: 340px;
  padding: 10px 16px;
  border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
  border: 2px solid var(--accent);
  box-shadow: 0 0 24px var(--accent-glow);
  animation: special-in 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
.special-title { font-size: 24px; font-weight: 800; color: var(--accent); }
.special-desc { font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.9); line-height: 1.3; }
@keyframes special-in { from { opacity: 0; transform: scale(0.6) rotate(-3deg); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------
   Specchio (specchio.js)
   --------------------------------------------------------------- */
.mirror-wrap { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
.mirror-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; flex: 1; max-width: 160px; }
.mirror-cell { aspect-ratio: 1; border-radius: 10px; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.12); transition: background 0.1s, transform 0.1s; }
.mirror-cell.on { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 12px var(--accent-glow); }
.mirror-grid.right .mirror-cell { cursor: pointer; }
.mirror-grid.right .mirror-cell.on { background: #36cfc9; border-color: #36cfc9; box-shadow: 0 0 12px rgba(54,207,201,0.5); }
.mirror-axis { width: 4px; align-self: stretch; border-radius: 2px; background: repeating-linear-gradient(180deg, rgba(255,255,255,0.6) 0 10px, transparent 10px 18px); }

/* ---------------------------------------------------------------
   Maggiore (maggiore.js)
   --------------------------------------------------------------- */
.vs-row { display: flex; align-items: center; gap: 10px; width: 100%; }
.vs-card { flex: 1; font-size: 30px; font-weight: 800; padding: 28px 6px; border-radius: 18px; background: var(--bg-2); color: var(--text); border: 2px solid rgba(255,255,255,0.12); transition: background 0.1s; min-height: 120px; }
.vs-card.ok { background: var(--ok); color: var(--ink); }
.vs-card.ko { background: var(--danger); color: white; }
.vs-mid { color: var(--muted); font-size: 18px; font-weight: 600; }

/* ---------------------------------------------------------------
   Sillabe (sillabe.js)
   --------------------------------------------------------------- */
.syll-target { letter-spacing: 3px; min-height: 44px; }
.syll-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.syll-chip { font-size: 24px; font-weight: 800; padding: 14px 18px; border-radius: 14px; background: var(--bg-2); color: var(--text); border: 2px solid rgba(255,255,255,0.14); min-width: 76px; }
.syll-chip.used { opacity: 0.2; }

/* ---------------------------------------------------------------
   Manopola (manopola.js) e Al volo (alvolo.js): canvas (usano .run-canvas)
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Percorso (percorso.js)
   --------------------------------------------------------------- */
.path-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; width: 100%; max-width: 340px; margin: 0 auto; }
.path-cell { aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; color: var(--ink); transition: background 0.12s, transform 0.12s; }
.path-cell.start { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent-glow); }
.path-cell.lit { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px var(--accent-glow); transform: scale(1.05); }
.path-cell.ok { background: var(--ok); border-color: var(--ok); }
.path-cell.ko { background: var(--danger); border-color: var(--danger); color: white; }

/* ---------------------------------------------------------------
   Resto (resto.js) — usa .quiz-answers
   --------------------------------------------------------------- */
.resto-box { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; align-items: center; justify-items: center; margin-bottom: 8px; }
.resto-price { font-size: 34px; font-weight: 800; color: var(--accent); }
.resto-note { font-size: 30px; font-weight: 800; color: #43d17a; padding: 4px 14px; border-radius: 10px; background: rgba(67,209,122,0.15); border: 2px solid rgba(67,209,122,0.5); }

/* ---------------------------------------------------------------
   Lettere (lettere.js) — usa .keypad
   --------------------------------------------------------------- */
.letters-letter { font-size: 56px; font-weight: 800; text-align: center; color: var(--accent); line-height: 1; }
.letters-sentence { font-size: 22px; font-weight: 600; text-align: center; line-height: 1.35; padding: 10px 6px 16px; }
.letters-hit { color: var(--accent); text-decoration: underline; }

/* ---------------------------------------------------------------
   Cerchi (cerchi.js) e Rimbalzo (rimbalzo.js): canvas (usano .run-canvas)
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Abbinamenti (abbinamenti.js)
   --------------------------------------------------------------- */
.pair-stage { display: flex; flex-direction: column; gap: 14px; width: 100%; }
.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pair-card { aspect-ratio: 1; border-radius: 18px; background: var(--c); display: flex; align-items: center; justify-content: center; font-size: 64px; box-shadow: inset 0 -6px 0 rgba(0,0,0,0.15); }
.pair-question { font-size: 80px; text-align: center; line-height: 1.1; }
.pair-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair-answer { font-size: 20px; font-weight: 800; padding: 18px 8px; border-radius: 14px; background: var(--bg-2); color: var(--text); border: 3px solid var(--c); }
.pair-answer.ok { background: var(--c); color: var(--ink); }
.pair-answer.ko { opacity: 0.4; }

/* ---------------------------------------------------------------
   Plurali (plurali.js) — usa .quiz-answers
   --------------------------------------------------------------- */
.plur-target { letter-spacing: 1px; text-transform: none; }

/* Chi è fuori (modalità a eliminazione) al conto alla rovescia */
.out-banner { max-width: 340px; padding: 8px 14px; border-radius: 12px; font-size: 15px; font-weight: 600; color: #ffb4b4; background: rgba(255,77,109,0.18); border: 1px solid rgba(255,77,109,0.5); }

/* Barra del tempo sotto l'intestazione (runTimer la aggiorna); "hurry" negli ultimi secondi */
.game-progress { width: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.12); overflow: hidden; margin-top: -2px; opacity: 0; transition: opacity 0.3s; }
.game-progress.on { opacity: 1; }
.game-progress i { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(1); background: var(--accent); border-radius: 3px; transition: transform 0.1s linear, background 0.3s; }
.game-shell.hurry .game-progress i { background: var(--danger); }
.game-shell.hurry .game-timer { color: var(--danger); animation: hurry-pulse 0.5s ease-in-out infinite; }
@keyframes hurry-pulse { 50% { transform: scale(1.15); } }

/* Ingresso del minigioco e del conto alla rovescia */
.game-shell, .game-area:not(.countdown) { animation: game-in 0.3s ease-out; }
@keyframes game-in { from { opacity: 0; transform: scale(1.02); } to { opacity: 1; transform: none; } }
.game-area.countdown { animation: screen-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1); }
.game-area.countdown img.countdown-icon { box-shadow: 0 0 0 4px var(--cat, transparent), 0 10px 30px rgba(0,0,0,0.4); }
.game-area.countdown .big { color: var(--cat, var(--accent)); text-shadow: 0 0 24px var(--cat, var(--accent)); }
@media (prefers-reduced-motion: reduce) { .game-shell, .game-area, .game-shell.hurry .game-timer { animation: none !important; } }

/* Chi è pronto, nel conto alla rovescia */
.ready-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 360px; }
.ready-name { font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.55); border: 1px solid rgba(255,255,255,0.12); transition: background 0.2s, color 0.2s; }
.ready-name.on { background: color-mix(in srgb, var(--ok) 25%, transparent); color: #fff; border-color: var(--ok); }

/* Risultati in diretta nella schermata di attesa */
.live-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; width: min(320px, 90vw); }
.live-row { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; padding: 6px 12px; border-radius: 10px; background: rgba(255,255,255,0.08); animation: award-in 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
.live-row.me { border: 1px solid var(--accent); }
.live-score { margin-left: auto; color: var(--accent); font-variant-numeric: tabular-nums; }

.special-duel { font-size: 18px; font-weight: 800; color: #fff; margin: 2px 0; }

/* Colore della categoria durante il minigioco: cornice sottile e titolo */
.game-area.game-shell { box-shadow: inset 0 0 0 3px var(--cat, transparent); }
.game-shell .game-title { color: var(--cat, inherit); }

/* Spettatore (entrati a manche iniziata) */
.game-area.spectate .game-done { margin-top: 8px; }
.spectate-note { max-width: 340px; font-size: 15px; font-weight: 500; color: rgba(255,255,255,0.85); padding: 8px 14px; border-radius: 12px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); }

/* ---------------------------------------------------------------
   Corsa, Ricalco, Battito: canvas (usano .run-canvas)
   --------------------------------------------------------------- */

/* ---------------------------------------------------------------
   Differenze (differenze.js)
   --------------------------------------------------------------- */
.diff-wrap { display: flex; gap: 10px; align-items: flex-start; justify-content: center; width: 100%; }
.diff-grid { display: grid; gap: 4px; flex: 1; max-width: 190px; }
.diff-cell { aspect-ratio: 1; border-radius: 8px; background: rgba(255,255,255,0.08); border: 2px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; font-size: 22px; }
.diff-grid.right .diff-cell { cursor: pointer; border-color: rgba(54,207,201,0.35); }
.diff-cell.ok { background: var(--ok); border-color: var(--ok); }
.diff-cell.ko { background: var(--danger); border-color: var(--danger); }

/* ---------------------------------------------------------------
   Vero o falso (verofalso.js)
   --------------------------------------------------------------- */
.vf-sentence { font-size: 26px; font-weight: 800; text-align: center; line-height: 1.25; padding: 16px 8px 24px; min-height: 110px; display: flex; align-items: center; justify-content: center; }
.vf-row { display: flex; gap: 12px; }
.vf-btn { flex: 1; font-size: 26px; padding: 26px 8px; border-radius: 18px; color: white; border: 3px solid transparent; }
.vf-btn.yes { background: #2a9d5c; }
.vf-btn.no { background: #c1121f; }
.vf-btn.ok { border-color: #fff; }
.vf-btn.ko { opacity: 0.5; }

/* ---------------------------------------------------------------
   Stima (stima.js)
   --------------------------------------------------------------- */
.stima-canvas { margin-bottom: 8px; }
.stima-prompt { text-align: center; font-size: 17px; font-weight: 600; min-height: 46px; padding: 0 6px; }
.stima-slider { width: 100%; accent-color: var(--accent); margin: 8px 0; }
.stima-value { text-align: center; font-size: 22px; font-weight: 800; color: var(--accent); min-height: 30px; }
.stima-ok { margin-top: 8px; }
.stima-ok.tap { background: var(--ok); color: var(--ink); font-size: 26px; padding: 26px; }

/* Distintivo Esperto nell'intestazione del minigioco */
.expert-badge { font-size: 11px; font-weight: 800; letter-spacing: 1px; padding: 3px 8px; border-radius: 999px; color: var(--ink); background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); margin-left: auto; margin-right: 10px; }

/* Restyling v1.0: intestazione dei minigiochi più leggibile */
.game-header { padding: 6px 10px; border-radius: 12px; background: rgba(0,0,0,0.22); }
.game-timer { font-size: 22px; }
.game-hint { font-size: 16px; color: rgba(255,255,255,0.88); }

/* Pulsante "Pronto" alla prima volta */
.game-area .ready-btn { font-size: 20px; padding: 16px 22px; border-radius: 16px; background: var(--ok); color: var(--ink); box-shadow: 0 8px 22px rgba(61,220,132,0.35); animation: pop-in 0.3s; }
.game-area .ready-btn:disabled { opacity: 0.7; background: rgba(255,255,255,0.15); color: #fff; box-shadow: none; }

/* Prova subito a serie (5 di fila / senza fine): pulsante Fine e riassunto finora */
.game-header .series-end { font-size: 13px; font-weight: 800; padding: 6px 11px; border-radius: 999px; background: rgba(0,0,0,0.35); color: #fff; margin-left: auto; margin-right: 10px; box-shadow: none; }
.game-header .series-end:disabled { opacity: 0.6; }
.series-end-float { position: fixed; top: 10px; right: 10px; z-index: 5; }
.series-end-float .series-end { font-size: 13px; font-weight: 800; padding: 8px 12px; border-radius: 999px; background: rgba(0,0,0,0.5); color: #fff; }
.game-area .series-end.between { font-size: 15px; padding: 10px 18px; border-radius: 999px; background: rgba(255,255,255,0.14); color: #fff; margin-top: 8px; }
.game-area .series-sofar { font-size: 15px; color: #fff; background: rgba(0,0,0,0.25); padding: 6px 12px; border-radius: 999px; }