/* ==========================================================================
   AUTOPIA — gioco.css: il minigioco «Sorpassa a sinistra». Solo per gioco.html.
   Canvas 540×960 (rapporto 9:16), scalato in CSS; HUD sopra, velo con le schermate al centro, comandi sotto.
   Tema cloud-glass freddo: bianco nuvola, celeste, blu notte. Il rosso appare solo sulle vite (cuori).
   ========================================================================== */
.gioco{padding-bottom:40px}
/* La larghezza discende dall'altezza disponibile (rapporto 9:16 SEMPRE rispettato: mai canvas stirato). */
.gioco__scheda{--alt:min(818px,calc(100svh - 250px));display:grid;gap:12px;width:clamp(290px,calc(var(--alt) * .5625),460px);max-width:100%;margin-inline:auto}

.gioco__hud{display:flex;align-items:center;gap:6px 14px;flex-wrap:wrap;padding:10px 14px;border:1px solid rgba(255,255,255,.95);border-radius:16px;background:rgba(255,255,255,.72);backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:0 10px 30px -18px rgba(30,100,150,.5)}
.gioco__voce{display:flex;flex-direction:column;margin:0;font-weight:700;font-variant-numeric:tabular-nums;color:#12324a;line-height:1.1}
.gioco__etichetta{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#4b7288}
.gioco__cuori{color:#d62839;letter-spacing:.08em;font-size:1.05rem}
.gioco__pausa{margin-left:auto}

.gioco__scena{position:relative;aspect-ratio:540/960;width:100%;border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.95);background:#bbd3e4;box-shadow:0 24px 60px -28px rgba(20,90,140,.6),inset 0 0 0 1px rgba(255,255,255,.35)}
.gioco__canvas{display:block;width:100%;height:100%;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:pointer}

.gioco__velo{position:absolute;inset:0;display:grid;place-items:center;padding:16px;background:rgba(210,232,246,.42);backdrop-filter:blur(7px) saturate(1.2);-webkit-backdrop-filter:blur(7px) saturate(1.2)}
.gioco__velo[hidden]{display:none}
.gioco__pannello{display:grid;gap:10px;justify-items:center;text-align:center;max-width:340px;padding:20px 18px;border-radius:20px;border:1px solid rgba(255,255,255,.95);background:rgba(255,255,255,.88);box-shadow:0 18px 48px -22px rgba(20,90,140,.7)}
.gioco__pannello[hidden]{display:none}
.gioco__regole{list-style:none;padding:0;margin:0;display:grid;gap:8px;text-align:left;font-size:.92rem;color:#1d445c}
.gioco__regole li{padding-left:18px;position:relative}
.gioco__regole li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#6fd0ff,#1689c1)}
.gioco__esito{margin:0;font-weight:600;color:#12324a}
.gioco__consiglio{margin:0;font-size:.92rem;color:#1d445c}
.gioco__azioni{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}

.gioco__comandi{display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:10px}
.gioco__cmd{min-height:56px;font-size:1.3rem;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.gioco__cmd:active{transform:translateY(2px) scale(.98)}

/* sul telefono il gioco occupa tutta la larghezza e i comandi restano raggiungibili col pollice */
@media(max-width:560px){
  .gioco__scheda{--alt:min(818px,calc(100svh - 215px))}
  .gioco__pannello{padding:14px 12px;gap:8px}
  .gioco__regole{font-size:.86rem}
}
@media(prefers-reduced-motion:reduce){
  .gioco__cmd:active{transform:none}
  .gioco__velo{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(224,240,250,.9)}
}

/* sul telefono la mascotte fissa coprirebbe il pulsante «destra»: in questa pagina si nasconde (si gioca, non si chiede) */
@media(max-width:700px){
  body[data-page="gioco"] .autopia-mascot{display:none}
}