:root {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #f8fbff;
  background: #03101d;
  font-synthesis: none;
  --navy:#07172c;
  --navy2:#0b233e;
  --blue:#1675e7;
  --orange:#f7a712;
  --green:#3d9a2c;
  --muted:#9eb0c2;
  /* Tavolozza della qualità: la definizione UNICA che colora la barra della risposta, la
     traiettoria rigiocata e il cartellino dell'esito. Se questi tre non citano la stessa
     variabile, BUONA torna a uscire verde con la barra gialla. LENTA è arancione e non
     rossa: il rosso resta a chi sbaglia o finisce il tempo. */
  --q-perfect:#3ddc84;
  --q-good:#ffd451;
  --q-slow:#ff7a33;
  --q-error:#f03a35;
}
* { box-sizing:border-box; }
html, body { margin:0; min-height:100%; background:radial-gradient(circle at 50% -10%,#173d68 0,#07172c 38%,#020a12 100%); }
body { min-height:100svh; overscroll-behavior:none; }
button, input { font:inherit; }
button { cursor:pointer; -webkit-tap-highlight-color:transparent; }
button:focus-visible { outline:3px solid #fff; outline-offset:3px; }
#app { min-height:100svh; }
.game-shell { position:relative; width:min(100%,520px); min-height:100svh; margin:0 auto; overflow:hidden; background:linear-gradient(180deg,#07172c,#04101d); box-shadow:0 0 60px #0008; }
.screen { padding:28px 20px max(28px,env(safe-area-inset-bottom)); }
.eyebrow { color:#f6b817; letter-spacing:.16em; font-size:.74rem; font-weight:900; margin:0 0 8px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-size:clamp(3.2rem,14vw,5rem); line-height:.84; margin:18vh 0 20px; text-transform:uppercase; letter-spacing:-.06em; }
h1 span { color:#31a1ff; }
h2 { font-size:2rem; line-height:1; margin-bottom:24px; }
.lead { color:#c8d6e4; font-size:1.08rem; line-height:1.5; max-width:360px; }
.hero-ball { position:absolute; right:-42px; top:38px; font-size:9rem; filter:drop-shadow(0 20px 24px #0007); transform:rotate(-14deg); opacity:.92; }
.stack-actions { display:grid; gap:12px; margin-top:38px; }
.primary-btn { border:0; min-height:58px; border-radius:16px; padding:15px 18px; background:linear-gradient(180deg,#2787f3,#1264cc); color:#fff; font-weight:900; letter-spacing:.04em; box-shadow:0 8px 22px #001d41aa,inset 0 1px #ffffff55; }
.primary-btn.alt { background:linear-gradient(180deg,#162f4c,#0c2036); border:1px solid #345579; }
.text-btn { min-height:48px; border:0; background:transparent; color:#a9bdd0; margin-top:20px; }
.small-note { color:#738ba3; margin-top:22px; font-size:.82rem; }
.league-grid { display:grid; gap:12px; margin-bottom:18px; }
.league-card { min-height:104px; border-radius:18px; border:1px solid #294767; background:linear-gradient(180deg,#102a48,#08192b); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; padding:14px 10px; }
.league-flag { font-size:2.1rem; line-height:1; }
.league-card strong { font-size:1.02rem; }
.league-card > span:last-child { color:#7f97af; font-size:.7rem; }
.team-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.team-card { min-height:112px; border-radius:16px; border:1px solid #294767; background:linear-gradient(180deg,#102a48,#08192b); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px 4px; }
.team-card strong { font-size:.82rem; line-height:1.05; text-align:center; }
.team-card > span:last-child { color:#7f97af; font-size:.68rem; }
.crest,.mini-crest { --p:#1475e7; background:#f4f6f8; border:2px solid var(--p); border-radius:50%; object-fit:contain; padding:3px; box-shadow:0 4px 8px #0006; }
.crest { width:52px;height:52px; }
.mini-crest { width:34px;height:34px; flex:none; }
.screen-header { display:flex; align-items:center; gap:15px; margin-bottom:22px; }
/* Ricomincia: sta nell'intestazione, lontano dal GIOCA, e non cancella nulla da solo. */
.icon-btn { margin-left:auto; flex:none; width:44px; height:44px; border-radius:14px; border:1px solid #345579; background:#122b47; color:#cfe0f2; font-size:1.35rem; line-height:1; display:grid; place-items:center; }
.screen-header h2 { margin:0; }
.next-match { border:1px solid #2d5278; border-radius:22px; padding:20px; background:linear-gradient(135deg,#0e2948,#071727); display:grid; gap:14px; text-align:center; }
.next-match > div { display:flex; align-items:center; justify-content:center; gap:22px; }
.next-match > small { color:#f7b717; font-weight:900; }
.standings { margin-top:18px; background:#081a2d; border:1px solid #233f5e; border-radius:20px; overflow:hidden; }
.standings-title { display:flex; justify-content:space-between; align-items:end; padding:16px; border-bottom:1px solid #213953; }
.standings-title h3 { margin:0; }
.standings-title span { font-size:.7rem; color:#7790a8; }
.standing-row { display:grid; grid-template-columns:24px 26px 1fr 24px 34px 28px; gap:7px; align-items:center; min-height:48px; padding:5px 12px; border-bottom:1px solid #152b42; font-size:.82rem; }
.standing-row.me { background:#12385e; }
.standing-row .crest { width:24px;height:24px; padding:2px; border-width:1px; }
.standing-row strong { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.pos { color:#7f98b1; }
.summary-screen { text-align:center; display:flex; flex-direction:column; justify-content:center; }
.summary-screen h2 { font-size:4.6rem; margin:8px 0; }
.stat-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:28px 0; }
.stat-cards div { padding:16px 7px; background:#0b223b; border:1px solid #284a6c; border-radius:16px; }
.stat-cards b { display:block; font-size:1.35rem; }
.stat-cards span { display:block;color:#8fa7be;font-size:.72rem;margin-top:5px; }
.review,.coverage { text-align:left; border-radius:18px; padding:18px; background:#0a1d32; margin-bottom:20px; }
.review ul { list-style:none;padding:0;margin:0; }
.review li { display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #1d3650; }
.review li span { color:#9bb0c5;font-size:.8rem; }
.coverage > div { display:flex; flex-wrap:wrap; gap:8px; }
.table-chip { display:inline-flex; gap:7px; padding:8px 10px;border-radius:12px;background:#122e4d; }
.table-chip b { color:#f7b717; }

/* MATCH */
.match-shell { min-height:100svh; padding-bottom:max(14px,env(safe-area-inset-bottom)); display:flex;flex-direction:column; }
/* Fase di gioco: un solo posto in cui vivono i colori di attacco/difesa. */
.match-shell.phase-attack  { --phase:#2f9bff; --phase-edge:#3d8fdd; --phase-soft:#0c2b4b; --phase-deep:#061c33; --phase-ink:#d8ecff; --phase-ring:#2f9bff88; }
.match-shell.phase-defense { --phase:#ff5f4f; --phase-edge:#c9503f; --phase-soft:#3b1613; --phase-deep:#260c0a; --phase-ink:#ffd7d1; --phase-ring:#ff5f4f88; }
.match-body { position:relative;flex:1;display:flex;flex-direction:column;min-height:0; }
.possession-band { flex:none;display:flex;align-items:center;gap:12px;min-height:58px;padding:9px 16px;background:linear-gradient(180deg,var(--phase-soft),var(--phase-deep));border-bottom:4px solid var(--phase); }
.band-icon { flex:none;font-size:1.7rem;line-height:1;filter:drop-shadow(0 2px 3px #0007); }
.band-text { display:grid;gap:2px;min-width:0; }
.band-text strong { color:var(--phase);font-size:1.05rem;font-weight:900;letter-spacing:.03em;text-transform:uppercase; }
.band-text small { color:var(--phase-ink);font-size:.7rem;font-weight:800;letter-spacing:.06em; }
.siege { margin-left:auto;display:grid;justify-items:center;gap:2px;padding:4px 9px;border-radius:12px;background:#3b0f1266;border:2px solid #f0413b88; }
.siege b { color:#ff6b5f;font-size:.95rem;letter-spacing:.16em;line-height:1; }
.siege small { color:#ffb3ad;font-size:.55rem;font-weight:900;letter-spacing:.05em;white-space:nowrap; }
/* `column-gap`: la squadra col pallone ha un bordo, e senza corridoio quel bordo
   finirebbe appiccicato alle cifre del punteggio. */
.score-header { height:90px;flex:none; display:grid;grid-template-columns:1fr auto 1fr;column-gap:16px;align-items:center;padding:12px 14px;background:#061425;border-bottom:1px solid #1b3551; }
.team-side { display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:900;text-transform:uppercase;padding:6px 8px;border-radius:12px;border:2px solid transparent;color:#8ea3b8; }
.team-side.has-ball { color:#fff;border-color:var(--phase);background:var(--phase-soft); }
.team-side.has-ball .mini-crest { box-shadow:0 0 0 3px var(--phase-ring),0 4px 8px #0006; }
.ball-badge { font-size:1rem;line-height:1;filter:drop-shadow(0 0 5px var(--phase)); }
.team-side.opponent { justify-content:flex-end;text-align:right; }
.score { display:flex;gap:10px;align-items:center;font-size:2.45rem;line-height:1; }
.score b:first-child { color:#2490ff; }.score b:last-child { color:#f03a35; }.score span { color:#dfe7ef;font-size:1.5rem; }
.match-meta { height:42px;flex:none; display:flex;justify-content:space-between;align-items:center;padding:0 18px;background:#0a1c30;color:#d4e0ea;font-size:.85rem;font-weight:900; }
.match-meta span:last-child { color:#f6b817; }
.pitch { position:relative; flex:1 1 auto; min-height:240px; max-height:560px; margin:0 7px; border:4px solid var(--phase-edge); border-radius:22px 22px 14px 14px; background:repeating-linear-gradient(90deg,#3a952d 0 12.5%,#419d31 12.5% 25%); overflow:hidden; transition:filter .2s,opacity .2s; }
.pitch::before { content:"";position:absolute;inset:3% 3%;border:2px solid #d9f1d2;pointer-events:none; }
.pitch.dimmed { filter:brightness(.29) saturate(.65); }
.half-line { position:absolute;left:3%;right:3%;top:50%;border-top:2px solid #d9f1d2; }
.center-circle { position:absolute;width:27%;aspect-ratio:1;border:2px solid #d9f1d2;border-radius:50%;left:36.5%;top:36.5%; }
.penalty { position:absolute;left:22%;right:22%;height:15%;border:2px solid #d9f1d2; }
.top-box { top:3%;border-top:0; }.bottom-box { bottom:3%;border-bottom:0; }
.goal { position:absolute;left:42%;width:16%;height:4%;border:2px solid #e8f5e5;z-index:2; }
.top-goal { top:0;border-top:0; }.bottom-goal { bottom:0;border-bottom:0; }
.zone-label { position:absolute;left:4.2%; color:#d7ecd1aa; font-size:.65rem;font-weight:800;display:grid;line-height:1.05;z-index:4; }
.zone-label b { font-size:1.5rem; }.zone-label.current { left:0;color:#fff;background:#08192bd9;border-left:4px solid var(--phase);padding:4px 9px 4px 6px;border-radius:0 11px 11px 0; }.z5{top:8%}.z4{top:27%}.z3{top:47%}.z2{top:67%}.z1{top:86%}
/* Riflettore: il buco resta prato normale, lo shadow a spread enorme vela tutto il resto. */
.zone-spot { position:absolute;left:0;right:0;height:20%;z-index:6;pointer-events:none;box-shadow:0 0 0 999px #04121f8c; }
.token { position:absolute; width:26px;height:26px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid;box-shadow:0 3px 6px #0006;z-index:5; display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:900;color:#fff;text-shadow:0 1px 2px #000a; }
/* I colori sociali arrivano da `kitVars` sul campo; i fallback sono i colori storici,
   così una .pitch senza variabili resta identica a prima. */
.token.blue { background:var(--home-fill,#195bbd);border-color:var(--home-edge,#2f8cff);color:var(--home-ink,#fff);text-shadow:0 1px 2px var(--home-ink-shadow,#000a); }.token.red { background:var(--away-fill,#111827);border-color:var(--away-edge,#e63b35);color:var(--away-ink,#fff);text-shadow:0 1px 2px var(--away-ink-shadow,#000a); }
/* I portieri restano neutri, come nel calcio vero: giallo di qua, verde scuro di là.
   Hanno specificità maggiore, quindi vincono da soli sui colori sociali — ma il `color`
   va ridichiarato, o erediterebbero un inchiostro scelto per la maglia della squadra. */
.token.keeper.blue { background:#f4c430;color:#07172c;border-color:#ffe471;text-shadow:none; }.token.keeper.red { background:#17381f;color:#fff;border-color:#4b9c56;text-shadow:0 1px 2px #000a; }
/* L'anello distingue il portiere anche a squadra spenta, quando il numero sbiadisce. */
.token.keeper { outline:2px solid #ffffffaa;outline-offset:-5px; }
.token.off { opacity:.4;filter:grayscale(.8) brightness(.75);transform:translate(-50%,-50%) scale(.8); }
.token.on { box-shadow:0 0 0 2px #ffffff40,0 5px 8px #0007; }
.token.active { width:34px;height:34px;font-size:.92rem;z-index:6;border-width:3px;box-shadow:0 0 0 6px var(--phase-ring),0 0 18px 4px var(--phase-ring),0 5px 10px #0009;animation:carrier-pulse 1.6s ease-in-out infinite; }
@keyframes carrier-pulse { 0%,100%{box-shadow:0 0 0 5px var(--phase-ring),0 0 12px 2px var(--phase-ring),0 5px 10px #0009} 50%{box-shadow:0 0 0 9px var(--phase-ring),0 0 24px 7px var(--phase-ring),0 5px 10px #0009} }
.player-ball,.opponent-ball { filter:drop-shadow(0 0 7px var(--phase)) drop-shadow(0 3px 2px #0008); }
.goal.target,.goal.danger { border-color:var(--phase);border-width:3px;background:var(--phase-ring);animation:goal-glow 1.7s ease-in-out infinite; }
@keyframes goal-glow { 0%,100%{box-shadow:0 0 8px 1px var(--phase-ring)} 50%{box-shadow:0 0 22px 7px var(--phase-ring)} }
.attack-rail { position:absolute;right:0;top:0;bottom:0;width:28px;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;background:linear-gradient(90deg,#0000,#00000073);color:var(--phase);font-size:1.5rem;line-height:.75;text-shadow:0 2px 4px #000c; }
.attack-rail span { animation:rail-pulse 1.5s ease-in-out infinite; }
.attack-rail span:nth-child(2) { animation-delay:.18s; }
.attack-rail span:nth-child(3) { animation-delay:.36s; }
/* In attacco il flusso sale: i chevron si accendono dal basso verso l'alto. */
.phase-attack .attack-rail span:nth-child(1) { animation-delay:.36s; }
.phase-attack .attack-rail span:nth-child(3) { animation-delay:0s; }
@keyframes rail-pulse { 0%,100%{opacity:.3} 50%{opacity:1} }
.ball { position:absolute;transform:translate(-50%,-50%);font-size:1.2rem;z-index:7;filter:drop-shadow(0 3px 2px #0008);--ball-gap:26px; }
/* Lo scarto è in px, non in %: resta proporzionato al disco del portatore su qualsiasi altezza del campo. */
.ball.ahead-up { margin-top:calc(-1 * var(--ball-gap)); }
.ball.ahead-down { margin-top:var(--ball-gap); }

/* ── L'azione disegnata sul campo ──────────────────────────────────────────────
   Il tratteggio in marcia è l'annuncio; dopo la risposta lo stesso tratto prende il
   colore dell'esito e la palla lo percorre. `preserveAspectRatio:none` deforma la
   traiettoria insieme al campo: va bene, ma lo spessore resta costante grazie a
   vector-effect, e il bersaglio è un div posizionato, non un marker SVG. */
.action-cue { position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none; }
.action-cue path { fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:7 6;filter:drop-shadow(0 1px 2px #0009);animation:cue-march 1s linear infinite;opacity:.92; }
.cue-shot path,.cue-tackle path { stroke-width:4; }
.action-cue.shape-cone path { stroke-dasharray:5 5;opacity:.8; }
@keyframes cue-march { to { stroke-dashoffset:-26; } }
.cue-target { position:absolute;z-index:7;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:1px;pointer-events:none;animation:cue-target-pulse 1.2s ease-in-out infinite; }
.cue-icon { font-size:1.25rem;line-height:1;filter:drop-shadow(0 2px 3px #000a); }
.cue-label { padding:1px 6px;border-radius:999px;background:#08192bcc;color:#fff;font-size:.5rem;font-weight:900;letter-spacing:.08em;white-space:nowrap; }
@keyframes cue-target-pulse { 0%,100%{transform:translate(-50%,-50%) scale(.92);opacity:.75} 50%{transform:translate(-50%,-50%) scale(1.08);opacity:1} }
/* Rigiocata: il tratto smette di marciare, si colora dell'esito e la palla parte. */
.action-cue.cue-play path { animation:none;stroke-dasharray:none;stroke-width:5;opacity:1;stroke:var(--tone-line,#fff); }
.action-cue.tone-perfect { --tone-line:var(--q-perfect); }
.action-cue.tone-good { --tone-line:var(--q-good); }
.action-cue.tone-slow { --tone-line:var(--q-slow); }
.action-cue.tone-error { --tone-line:var(--q-error); }
.cue-ball { position:absolute;z-index:8;transform:translate(-50%,-50%);font-size:1.35rem;line-height:1;pointer-events:none;left:var(--cue-x1);top:var(--cue-y1);filter:drop-shadow(0 0 8px #fff8) drop-shadow(0 3px 3px #0008);animation:cue-travel .52s cubic-bezier(.3,.05,.4,1) forwards; }
/* left/top animati fra due custom property: si risolvono per-elemento, quindi bastano i keyframes. */
@keyframes cue-travel { from { left:var(--cue-x1);top:var(--cue-y1);transform:translate(-50%,-50%) scale(.9); } to { left:var(--cue-x2);top:var(--cue-y2);transform:translate(-50%,-50%) scale(1.15); } }
/* Strato invisibile per saltare la rigiocata con un tap. */
.play-skip { position:absolute;inset:0;z-index:25;cursor:pointer; }
.action-panel { position:relative;flex:none;margin:-4px 10px 0;padding:14px 8px 5px;background:linear-gradient(180deg,var(--phase-soft),#06182b 70%);border:2px solid var(--phase-edge);border-top:0;border-radius:0 0 20px 20px; }
.chance-chip { margin:0 auto 8px;width:max-content;padding:5px 16px;border-radius:999px;font-size:.78rem;font-weight:900;letter-spacing:.08em;color:#0c2036;background:#8fd0ff;box-shadow:0 3px 0 #0004; }
.chance-chip.chance-big { background:linear-gradient(180deg,#ffd451,#f6a213);animation:chance-pulse 1s ease-in-out infinite alternate; }
@keyframes chance-pulse { from { transform:scale(1); } to { transform:scale(1.06); } }
.situation-label { text-align:center;color:var(--phase-ink);font-size:.75rem;font-weight:900;margin:0 0 9px;letter-spacing:.05em; }
.action-card { width:100%;min-height:160px;border-radius:18px;border:2px solid;background:#f4f6f8;color:#0c2036;padding:12px 9px 0;display:grid;grid-template-rows:auto auto auto 1fr;place-items:center;overflow:hidden; }
.action-card.playing,.action-card.idle { opacity:.85; }
.action-card.offense { border-color:#2a83e9; }.action-card.defense { border-color:#f39a12; }
.action-card strong { font-size:1.25rem;letter-spacing:.02em; }
.action-desc { margin-top:4px;max-width:30ch;text-align:center;color:#3a5670;font-size:.82rem;font-weight:700;line-height:1.2; }
.action-icon { font-size:1.9rem;color:#2276d2; }.defense .action-icon { color:#ed8d08; }
.reward { align-self:end;width:calc(100% + 18px);margin:10px -9px 0;padding:10px;background:#166dd2;color:#fff;font-size:.85rem;font-weight:900; }.defense .reward{background:#ec8e06}
/* Preparazione: la striscia diventa il conto alla rovescia. La barra la svuota il ticker
   scrivendo la width, non un'animazione CSS: un ridisegno a metà conto non deve farla ripartire. */
.reward.prep { display:flex;align-items:center;justify-content:center;gap:11px;padding:7px 10px 6px;position:relative; }
/* Nessuna barra qui: l'unica barra del gioco è il tempo per rispondere. Il conto alla
   rovescia è tutto nel numero, quindi il numero è grande e batte a ogni scatto. */
.reward.prep b { font-size:2.2rem;line-height:1;font-variant-numeric:tabular-nums;display:inline-block; }
/* Il battito riparte da solo alternando due animazioni identiche: a nome uguale il
   browser non la farebbe ricominciare, e il ticker cambia solo `data-step`. */
.reward.prep b[data-step="5"],.reward.prep b[data-step="3"],.reward.prep b[data-step="1"] { animation:prep-tick .42s ease-out; }
.reward.prep b[data-step="4"],.reward.prep b[data-step="2"] { animation:prep-tick-alt .42s ease-out; }
@keyframes prep-tick { from { transform:scale(1.55);opacity:.3 } to { transform:scale(1);opacity:1 } }
@keyframes prep-tick-alt { from { transform:scale(1.55);opacity:.3 } to { transform:scale(1);opacity:1 } }
.reward.prep small { font-size:.72rem;letter-spacing:.09em; }
.speed-hint { margin:8px 0 0;text-align:center;color:var(--phase-ink);font-size:.65rem;font-weight:900;letter-spacing:.06em; }
.challenge-overlay { position:absolute;z-index:20;inset:0;background:#02091433;display:flex;align-items:flex-end; }
.challenge-card { width:calc(100% - 16px);margin:0 8px 8px;padding:16px 14px 18px;border-radius:22px;background:linear-gradient(180deg,#08203a,#041324);border:2px solid var(--phase-edge);box-shadow:0 -12px 40px #0009; }
.challenge-title { width:max-content;max-width:90%;margin:-34px auto 10px;padding:9px 24px;border-radius:12px;background:var(--phase);border:2px solid #ffffff66;color:#fff;font-weight:900;text-transform:uppercase;box-shadow:0 5px 12px #0005; }
.equation { font-size:clamp(3.2rem,15vw,5rem);line-height:1;text-align:center;font-weight:800;letter-spacing:-.04em;margin:14px 0; }
.timer-row { display:grid;grid-template-columns:1fr 58px;gap:9px;align-items:center;margin:12px 8px; }
/* Le tre fasce: i confini arrivano da `renderChallenge` come --zone-*, che li calcola da
   GAME_CONFIG.qualityRatio. La barra si svuota da destra, quindi il bordo mobile parte nel
   verde a destra e cammina verso il rosso a sinistra, attraversando i due confini. */
.timer { position:relative;height:14px;border-radius:999px;overflow:hidden;
  background:linear-gradient(90deg,#ff7a332e 0 var(--zone-good,40%),#ffd4512e var(--zone-good,40%) var(--zone-perfect,70%),#3ddc842e var(--zone-perfect,70%) 100%),#132a44;
  /* Ripetuta con color-mix per restare agganciata alla tavolozza: dove non è supportata
     il browser scarta questa riga e tiene la precedente, e si perde solo la velatura. */
  background:linear-gradient(90deg,color-mix(in srgb,var(--q-slow) 18%,transparent) 0 var(--zone-good,40%),color-mix(in srgb,var(--q-good) 18%,transparent) var(--zone-good,40%) var(--zone-perfect,70%),color-mix(in srgb,var(--q-perfect) 18%,transparent) var(--zone-perfect,70%) 100%),#132a44; }
/* I due confini restano visibili anche sotto la parte piena: si vede arrivare il cambio di zona. */
.timer::after { content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,transparent calc(var(--zone-good,40%) - 1px),#ffffff99 var(--zone-good,40%),transparent calc(var(--zone-good,40%) + 1px),transparent calc(var(--zone-perfect,70%) - 1px),#ffffff99 var(--zone-perfect,70%),transparent calc(var(--zone-perfect,70%) + 1px)); }
.timer-fill { height:100%;width:100%;border-radius:inherit;transition:background .2s; }
.timer-fill[data-zone="perfect"] { background:var(--q-perfect); }
.timer-fill[data-zone="good"] { background:var(--q-good); }
.timer-fill[data-zone="slow"] { background:var(--q-slow); }
.timer-text { font-size:.88rem;font-weight:900;text-align:right; }
.timer-text[data-zone="perfect"] { color:var(--q-perfect); }
.timer-text[data-zone="good"] { color:var(--q-good); }
.timer-text[data-zone="slow"] { color:var(--q-slow); }
.challenge-hint { color:#aebfd0;text-align:center;margin:12px 0; }
.answer-choice { min-height:100px;border:1px solid #43627e;border-radius:18px;background:linear-gradient(180deg,#1a354f,#10253a);color:#fff;font-size:2.8rem;font-weight:900;box-shadow:inset 0 1px #ffffff15; }
.quick-choices { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px; }.quick-choices .answer-choice{min-height:132px;font-size:3.5rem;background:#f5f5f3;color:#0b2035;}
.answer-display { height:66px;border:2px solid #1974dc;border-radius:12px;margin:12px 4px;background:#04101e;display:grid;place-items:center;font-size:2.2rem;font-weight:900; }
.cursor { opacity:.65; }
.keypad { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px; }
.keypad button { min-height:62px;border:1px solid #40556a;border-radius:12px;background:linear-gradient(180deg,#263c52,#172c40);color:#fff;font-size:1.7rem;font-weight:800; }
.keypad button:nth-child(10) { grid-column:1/3; }
.keypad .submit-key { grid-column:4;grid-row:1/4;background:linear-gradient(180deg,#2787f3,#1264cc);font-size:2.2rem;display:flex;flex-direction:column;align-items:center;justify-content:center; }
.submit-key span { font-size:.65rem;margin-top:6px; }
.challenge-card.quick .equation { font-size:4rem; }

/* AVVISO DI CONFERMA: stessa grammatica dell'esito azione, perché è l'altro momento
   in cui il gioco si ferma e chiede di guardare prima di andare avanti. */
.confirm-overlay { position:absolute;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;padding:18px;background:#020914dd;animation:outcome-fade .16s ease-out; }
.confirm-card { width:min(100%,340px);display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 22px;border-radius:24px;border:3px solid #f0803a;background:linear-gradient(180deg,#0a2440,#04162a);box-shadow:0 0 42px #f0803a55,0 14px 36px #000a;text-align:center;animation:outcome-pop .32s cubic-bezier(.2,1.55,.35,1); }
.confirm-icon { font-size:2.2rem;line-height:1; }
.confirm-card h3 { margin:4px 0 0;font-size:1.15rem; }
.confirm-card p { margin:0;color:#a9bdd0;font-size:.85rem; }
.confirm-actions { display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;margin-top:14px; }
.confirm-actions .primary-btn { min-height:52px;padding:12px 10px;font-size:.85rem; }
.primary-btn.danger { background:linear-gradient(180deg,#e2603a,#b93c1f); }

/* ESITO AZIONE: overlay a tutto campo con zoom, un tono per tipo di esito. */
.outcome-overlay { position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;padding:14px;background:#020914bb;animation:outcome-fade .16s ease-out;cursor:pointer; }
.outcome-card { --tone:#7f93a8;--tone-ink:#eaf3ff;display:flex;flex-direction:column;align-items:center;gap:8px;max-width:100%;padding:20px 28px;border-radius:24px;border:3px solid var(--tone);background:linear-gradient(180deg,#0a2440,#04162a);box-shadow:0 0 42px var(--tone),0 14px 36px #000a;animation:outcome-pop .42s cubic-bezier(.2,1.55,.35,1); }
.outcome-icon { font-size:clamp(32px,12vw,58px);line-height:1;filter:drop-shadow(0 3px 8px #0009); }
.outcome-text { font-size:clamp(20px,7vw,38px);font-weight:900;line-height:1.1;text-align:center;text-transform:uppercase;color:var(--tone-ink);text-shadow:0 2px 10px #000a; }
.outcome-detail { margin-top:10px;padding:6px 14px;border-radius:999px;background:#0009;color:#ffd9d5;font-size:.85rem;font-weight:900;letter-spacing:.03em; }
.tone-goal .outcome-card { --tone:var(--green);--tone-ink:#dcffd0; }
.tone-goal-against .outcome-card { --tone:var(--q-error);--tone-ink:#ffd7d1; }
.tone-perfect .outcome-card { --tone:var(--q-perfect);--tone-ink:#d6ffe8; }
.tone-good .outcome-card { --tone:var(--q-good);--tone-ink:#fff4cf; }
.tone-slow .outcome-card { --tone:var(--q-slow);--tone-ink:#ffe2cf; }
.tone-error .outcome-card { --tone:var(--q-error);--tone-ink:#ffd7d1; }
/* Esiti che non parlano di velocità: restano fuori dalla tavolozza della qualità. */
.tone-success .outcome-card { --tone:var(--blue);--tone-ink:#d8ecff; }
.tone-alert .outcome-card { --tone:var(--orange);--tone-ink:#ffe9bd; }
@keyframes outcome-fade { from{opacity:0} to{opacity:1} }
@keyframes outcome-pop { 0%{transform:scale(.35);opacity:0} 60%{transform:scale(1.12);opacity:1} 100%{transform:scale(1);opacity:1} }

@media (max-width:360px) {
  .score-header { height:82px;padding:9px 8px;column-gap:10px; }.possession-band{min-height:50px;padding:7px 12px;gap:9px}.siege{padding:3px 7px}.siege b{font-size:.8rem}.siege small{font-size:.5rem}.chance-chip{font-size:.68rem;padding:4px 12px}.band-icon{font-size:1.4rem}.band-text strong{font-size:.92rem}.band-text small{font-size:.64rem}.team-side{font-size:.66rem;padding:4px 5px;gap:5px}.ball-badge{font-size:.85rem}.mini-crest{width:28px;height:28px}.score{font-size:2rem}.pitch{min-height:220px}.token{width:21px;height:21px;font-size:.6rem}.token.active{width:28px;height:28px;font-size:.78rem}.ball{font-size:1rem;--ball-gap:22px}.action-card{min-height:134px}.reward.prep b{font-size:1.8rem}.reward.prep small{font-size:.64rem}.action-card strong{font-size:1.1rem}.action-desc{font-size:.72rem;max-width:34ch}.cue-icon{font-size:1.05rem}.cue-ball{font-size:1.15rem}.challenge-card{padding-left:10px;padding-right:10px}.keypad button{min-height:56px}.answer-choice{min-height:86px}
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
  /* Senza animazione la palla resterebbe ferma alla partenza: la si mostra già arrivata. */
  .cue-ball{left:var(--cue-x2);top:var(--cue-y2)} }