/* Scocca comune dei giochi: intestazione, barra strumenti, menu, schermo intero.
   Ogni gioco aggiunge solo il proprio tabellone. Palette e caratteri sono quelli
   del sito, cosi' un gioco nuovo nasce gia' coerente. */

:root{
  --bg:#07080f; --panel:rgba(255,255,255,0.025); --panel2:rgba(255,255,255,0.045);
  --line:rgba(230,232,242,0.09); --line2:rgba(230,232,242,0.16);
  --ink:#e6e8f2; --dim:#8f95ad; --faint:#6e7390;
  --lav:#9aa3ff; --lav2:#8b95ff; --lav-soft:#c7d2fe; --cyan:#6ee0ff;
  --gold:#d6a65e; --err:#ff8ba7; --ok:#7dd3a8;
  --cs:28px;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --sans:"Space Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);-webkit-font-smoothing:antialiased;overscroll-behavior:none}
body{display:flex;flex-direction:column;min-height:100dvh}
button:focus-visible{outline:2px solid rgba(139,149,255,.8);outline-offset:2px}

/* --- intestazione --- */
header{display:flex;align-items:center;gap:12px;padding:11px clamp(12px,3vw,22px);
  border-bottom:1px solid rgba(230,232,242,.07);background:rgba(7,8,15,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);position:sticky;top:0;z-index:5}
.brand{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);font-weight:500}
.brand b{color:var(--lav2);font-weight:500}
.stats{margin-left:auto;display:flex;gap:16px;align-items:center;font-family:var(--mono);font-size:13px}
.stat{color:var(--dim)}
.stat span{color:var(--ink)}
.hearts{letter-spacing:3px}

/* --- area di gioco --- */
main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:clamp(8px,2vh,20px) 8px;overflow:auto}

/* --- barra strumenti --- */
.toolbar{display:flex;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;
  padding:12px 10px max(16px,calc(10px + env(safe-area-inset-bottom)));position:sticky;bottom:0;
  background:linear-gradient(to top,var(--bg) 62%,rgba(7,8,15,0));z-index:5}
button{font:inherit;font-family:var(--sans);font-size:14px;color:var(--ink);
  background:rgba(255,255,255,.03);border:1px solid var(--line2);
  border-radius:12px;padding:10px 16px;cursor:pointer;
  transition:border-color .25s ease,color .25s ease,background .25s ease,box-shadow .3s ease}
button:hover{border-color:rgba(139,149,255,.5);color:var(--lav-soft)}
button.on{background:linear-gradient(92deg,#6366f1,#4f46e5);color:#fff;border-color:transparent;
  font-weight:500;box-shadow:0 6px 22px rgba(99,102,241,.35)}
button.on:hover{color:#fff}
button:disabled{opacity:.35;cursor:not-allowed}
button:disabled:hover{border-color:var(--line2);color:var(--ink)}
.tool{width:54px;height:44px;display:grid;place-items:center;font-size:17px;padding:0}

/* a schermo intero il browser non riserva piu' spazio per le sue barre, ma
   quella gestuale del telefono resta li': tienile lontane dai pulsanti */
body.fs .toolbar{padding-bottom:max(26px,calc(18px + env(safe-area-inset-bottom)))}
body.fs main{padding-bottom:4px}
#btnExitFs[hidden]{display:none}

/* --- menu e messaggi --- */
.overlay{position:fixed;inset:0;background:rgba(7,8,15,.88);backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;z-index:10}
.card{background:#0e1222;border:1px solid var(--line);border-radius:18px;padding:24px;
  width:min(440px,100%);max-height:88dvh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.5)}
.card h1{margin:0 0 6px;font-size:23px;font-weight:700;letter-spacing:-.02em}
.card p{margin:0 0 18px;color:var(--dim);font-size:14px;line-height:1.6}
.group{margin-bottom:16px}
.label{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--lav);margin-bottom:9px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.row button{flex:1;min-width:70px;text-align:center}
/* dentro un'opzione lo spazio e' poco: pulsanti di pari larghezza, mai a capo,
   altrimenti una parola lunga come "nessuno" spinge gli altri su due righe */
.opt .row{flex-wrap:nowrap;flex:0 1 auto}
.opt .row button{flex:1 1 0;min-width:46px;padding:10px 10px;font-size:14px;white-space:nowrap}
/* sotto una certa larghezza nemmeno cosi' ci stanno: i pulsanti scendono sotto
   l'etichetta e si prendono tutta la riga. Le opzioni con interruttore restano
   affiancate, li' lo spazio basta. */
@media (max-width:520px){
  .opt:has(.row){flex-direction:column;align-items:stretch;gap:10px}
  .opt:has(.row) .row{flex:1 1 auto}
  .opt:has(.row) .row button{padding:11px 8px;font-size:14px}
}
.opt{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:14px}
.opt small{display:block;color:var(--faint);font-size:12px;margin-top:3px;line-height:1.4}
.switch{width:48px;height:28px;border-radius:14px;background:rgba(255,255,255,.05);
  border:1px solid var(--line2);position:relative;flex:0 0 auto;padding:0}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;
  background:var(--dim);transition:.18s}
.switch.on{background:linear-gradient(92deg,#6366f1,#4f46e5);border-color:transparent;box-shadow:none}
.switch.on::after{left:23px;background:#fff}
.go{width:100%;margin-top:6px;padding:14px;background:linear-gradient(92deg,#6366f1,#4f46e5);
  color:#fff;border-color:transparent;font-weight:500;box-shadow:0 8px 28px rgba(99,102,241,.3)}
.go:hover{color:#fff;box-shadow:0 10px 36px rgba(99,102,241,.5)}
.hidden{display:none}
.saveline{font-family:var(--mono);font-size:12px;color:var(--faint);text-align:center;margin-top:8px}
.msg{text-align:center}
.msg .big{font-size:28px;font-weight:700;letter-spacing:-.02em;margin:0 0 8px;color:var(--ink)}

@keyframes shake{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}