/* =====================================================================
   GiochiSAT – stile comune a tutte le pagine
   Ogni pagina carica questo file per primo; i giochi aggiungono poi il
   proprio stile. Le classi comuni iniziano con "gs-" per non entrare in
   conflitto con quelle dei giochi.
   ===================================================================== */

/* ---------- Font (ospitati sul sito, nessuna richiesta a server esterni) */
@font-face{font-family:"Poppins";src:url("../fonts/poppins-regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-medium.woff") format("woff");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Poppins";src:url("../fonts/poppins-bold.woff") format("woff");font-weight:700 900;font-style:normal;font-display:swap}

/* ---------- Colori e misure ---------------------------------------- */
:root{
  --gs-cielo-1:#090B2A;          /* alto */
  --gs-cielo-2:#16134A;
  --gs-cielo-3:#2A1C62;          /* basso */
  --gs-superficie:#1D2462;       /* schede */
  --gs-superficie-2:#28317A;     /* elementi dentro le schede */
  --gs-vetro:rgb(31 40 104 / .9);
  --gs-bordo:rgb(168 178 255 / .24);
  --gs-testo:#F5F3FF;
  --gs-testo-2:#BDB8EC;
  --gs-scuro:#14123F;            /* testo sopra i colori chiari */

  --gs-giallo:#FFC93C;
  --gs-arancio:#FF8A3D;
  --gs-rosa:#FF5C8A;
  --gs-verde:#2ED3A0;
  --gs-blu:#4F7DFF;
  --gs-azzurro:#5CC8FF;
  --gs-viola:#9B7BFF;

  --gs-colore:var(--gs-giallo);  /* colore del gioco: ogni pagina lo imposta */

  --gs-stella-1:#FFF6D8;         /* colori delle stelle (cielo di sfondo, Prato stellato…) */
  --gs-stella-2:#FFE59A;
  --gs-stella-3:#BFE3FF;

  --gs-testo-font:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --gs-titoli-font:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;

  --gs-r-scheda:24px;
  --gs-r-controllo:16px;
  --gs-ombra:0 8px 0 rgb(6 4 30 / .35);
  --gs-margine:max(16px, env(safe-area-inset-left));
}

/* ---------- Base ---------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;min-height:100%;background:var(--gs-cielo-2) linear-gradient(180deg,var(--gs-cielo-1),var(--gs-cielo-2) 55%,var(--gs-cielo-3)) no-repeat}
body.gs{
  margin:0;min-height:100vh;min-height:100dvh;color:var(--gs-testo);background:transparent;
  font:400 16px/1.55 var(--gs-testo-font);-webkit-font-smoothing:antialiased;
}
:where(body.gs h1,body.gs h2,body.gs h3,body.gs h4){font-family:var(--gs-titoli-font);line-height:1.15}
:where(body.gs a){color:var(--gs-azzurro)}
:where(body.gs button,body.gs input,body.gs select,body.gs textarea){font-family:inherit}
body.gs :focus-visible{outline:3px solid var(--gs-giallo);outline-offset:3px}
.gs-nascosto{display:none!important}
.gs-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Cielo stellato (disegnato da giochisat.js) -------------- */
.gs-cielo{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
  background:linear-gradient(180deg,var(--gs-cielo-1) 0%,var(--gs-cielo-2) 55%,var(--gs-cielo-3) 100%)}
.gs-cielo svg.gs-puntini{position:absolute;inset:0;width:100%;height:100%}
.gs-stella{position:absolute;width:var(--d,14px);height:var(--d,14px);color:var(--c,#FFF6D8);
  animation:gs-brilla var(--t,3.2s) ease-in-out var(--ritardo,0s) infinite}
.gs-stella svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes gs-brilla{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}
.gs-cometa{position:absolute;top:var(--y,20%);left:var(--x,80%);width:180px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#FFF6D8,rgb(255 246 216 / 0));transform-origin:left center;
  opacity:0;animation:gs-cometa var(--durata,1.6s) ease-out forwards}
.gs-cometa::before{content:"";position:absolute;left:-3px;top:-3px;width:8px;height:8px;border-radius:50%;background:#FFF6D8;box-shadow:0 0 10px 3px rgb(255 246 216 / .7)}
@keyframes gs-cometa{0%{opacity:0;translate:0 0}12%{opacity:1}100%{opacity:0;translate:calc(var(--dx,-420px)) calc(var(--dy,200px))}}

/* ---------- Barra in alto (tutte le pagine tranne la home) ---------- */
.gs-barra{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
  padding:12px var(--gs-margine);padding-top:max(12px, env(safe-area-inset-top));
  background:linear-gradient(180deg,rgb(9 11 42 / .92),rgb(9 11 42 / .7));backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--gs-bordo)}
.gs-home{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 16px 8px 12px;border-radius:999px;
  background:var(--gs-superficie-2);color:var(--gs-testo)!important;text-decoration:none;font-weight:600;font-size:15px;white-space:nowrap}
.gs-home svg{width:20px;height:20px;flex:none}
.gs-home:hover{background:color-mix(in oklab,var(--gs-superficie-2) 80%,white)}
.gs-titolo{display:flex;align-items:center;gap:10px;min-width:0;flex:1}
.gs-titolo i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--gs-colore);box-shadow:0 0 0 4px color-mix(in oklab,var(--gs-colore) 30%,transparent)}
.gs-titolo h1{margin:0;font-size:clamp(17px,2.4vw,22px);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gs-nome,.gs-pulsante-barra{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:999px;border:1.5px solid var(--gs-bordo);
  background:transparent;color:var(--gs-testo);font-size:14px;font-weight:500;cursor:pointer;max-width:200px}
.gs-nome span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-nome svg{width:18px;height:18px;flex:none}
.gs-logo{height:40px;width:auto;border-radius:10px;background:#fff;padding:3px}
@media (max-width:640px){
  .gs-home span,.gs-logo,.gs-pulsante-barra{display:none}
  .gs-home{padding:8px 12px}
  .gs-nome{max-width:120px;padding:6px 10px}
  .gs-nome.gs-vuoto span{display:none}
}

/* ---------- Barra della Sfida (sotto la barra, solo durante una Sfida) */
.gs-hud{position:sticky;top:var(--gs-alto-barra,68px);z-index:39;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:8px var(--gs-margine);background:rgb(255 201 60 / .14);border-bottom:1px solid rgb(255 201 60 / .35);font-size:14px}
.gs-hud b{font-weight:700}
.gs-hud .gs-hud-tempo{font:700 18px/1 var(--gs-titoli-font);font-variant-numeric:tabular-nums;color:var(--gs-giallo)}
.gs-hud .gs-hud-tempo.gs-poco{color:var(--gs-rosa)}
.gs-hud .gs-spazio{flex:1}
.gs-hud button{min-height:36px;padding:6px 14px;border-radius:999px;border:1.5px solid rgb(255 201 60 / .5);background:transparent;color:var(--gs-testo);font-weight:600;font-size:13px;cursor:pointer}

/* ---------- Componenti ---------------------------------------------- */
.gs-pagina{width:min(100%,760px);margin:0 auto;padding:20px var(--gs-margine) 48px}
.gs-scheda{background:var(--gs-vetro);border:1px solid var(--gs-bordo);border-radius:var(--gs-r-scheda);padding:20px 22px;box-shadow:var(--gs-ombra)}
.gs-btn{--c:var(--gs-giallo);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:12px 26px;border:0;border-radius:999px;
  background:var(--c);color:var(--gs-scuro);font:700 17px/1.1 var(--gs-titoli-font);text-decoration:none;cursor:pointer;
  box-shadow:0 5px 0 color-mix(in oklab,var(--c) 55%,#14123F);transition:transform .1s,box-shadow .1s}
.gs-btn:hover{transform:translateY(-1px)}
.gs-btn:active{transform:translateY(3px);box-shadow:0 2px 0 color-mix(in oklab,var(--c) 55%,#14123F)}
.gs-btn[disabled]{opacity:.5;cursor:not-allowed;transform:none}
.gs-btn.gs-secondario{background:transparent;color:var(--gs-testo);box-shadow:inset 0 0 0 2px var(--gs-bordo)}
.gs-campo{display:grid;gap:6px}
.gs-campo label{font-weight:600;font-size:15px}
.gs-campo input{width:100%;min-width:0;min-height:52px;padding:12px 16px;border-radius:var(--gs-r-controllo);border:2px solid var(--gs-bordo);background:rgb(9 11 42 / .55);
  color:var(--gs-testo);font-size:17px}
.gs-campo input::placeholder{color:var(--gs-testo-2);opacity:.75}
.gs-campo input:focus{border-color:var(--gs-giallo);outline:none}
.gs-aiuto{font-size:13.5px;color:var(--gs-testo-2)}
.gs-errore{font-size:14px;color:var(--gs-rosa);min-height:1.2em}

/* finestra di dialogo comune */
dialog.gs-dialogo{width:min(92vw,460px);border:1px solid var(--gs-bordo);border-radius:var(--gs-r-scheda);padding:26px 24px;
  background:var(--gs-superficie);color:var(--gs-testo);box-shadow:0 30px 80px rgb(0 0 0 / .55)}
dialog.gs-dialogo::backdrop{background:rgb(6 6 26 / .7);backdrop-filter:blur(3px)}
.gs-dialogo h2{margin:0 0 8px;font-size:24px}
.gs-dialogo p{margin:0 0 14px;color:var(--gs-testo-2)}
.gs-dialogo .gs-azioni{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end;margin-top:18px}
.gs-dialogo .gs-azioni .gs-btn{min-height:46px;padding:10px 20px;font-size:16px}

/* elenco dei giochi */
.gs-elenco{display:grid;gap:12px;list-style:none;margin:0;padding:0}
.gs-gioco{--c:var(--gs-giallo);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;padding:14px 16px;
  border-radius:var(--gs-r-scheda);background:var(--gs-vetro);border:1px solid var(--gs-bordo);color:var(--gs-testo)!important;text-decoration:none;
  box-shadow:var(--gs-ombra);transition:transform .12s,border-color .12s}
.gs-gioco:hover{transform:translateY(-2px);border-color:var(--c)}
.gs-gioco .gs-pallino{width:46px;height:46px;border-radius:50%;background:var(--c);display:grid;place-items:center;color:var(--gs-scuro)}
.gs-gioco .gs-pallino svg{width:26px;height:26px}
.gs-gioco h3{margin:0;font-size:18px}
.gs-gioco p{margin:2px 0 0;font-size:14px;color:var(--gs-testo-2)}
.gs-gioco .gs-freccia{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--gs-superficie-2)}
.gs-gioco .gs-freccia svg{width:18px;height:18px}

/* ---------- Movimento ridotto --------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .gs-stella{animation:none}
  .gs-cometa{display:none}
  .gs-btn,.gs-gioco,.gs-livello-scelta{transition:none}
}

/* ---------- Campi dei giochi: base scura (i giochi possono ridefinirli) */
:where(body.gs) :where(input:not([type=checkbox],[type=radio],[type=range],[type=color]),select,textarea){
  background:rgb(9 11 42 / .55);color:var(--gs-testo);border-color:var(--gs-bordo)}
:where(body.gs) :where(input,textarea)::placeholder{color:var(--gs-testo-2);opacity:.8}
:where(body.gs) option{background:var(--gs-superficie);color:var(--gs-testo)}

/* ---------- Difficoltà ------------------------------------------------
   Si sceglie prima di entrare nel gioco (finestra .gs-dialogo-livello);
   durante la partita resta solo l'etichetta .gs-livello, da leggere. */
:root{--gs-livello-facile:var(--gs-verde);--gs-livello-media:var(--gs-giallo);--gs-livello-difficile:var(--gs-rosa)}
.gs-livello{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0;padding:8px var(--gs-margine);
  background:rgb(9 11 42 / .55);border-bottom:1px solid var(--gs-bordo);font-size:14px}
.gs-livello-nome{color:var(--gs-testo-2)}
.gs-livello b{padding:2px 12px;border-radius:999px;background:var(--c,var(--gs-colore));color:var(--gs-scuro);font-weight:700}
.gs-livello-descr{color:var(--gs-testo-2)}
.gs-livelli{display:grid;gap:10px;margin:4px 0 0}
.gs-livello-scelta[data-livello="facile"]{--c:var(--gs-livello-facile)}
.gs-livello-scelta[data-livello="media"]{--c:var(--gs-livello-media)}
.gs-livello-scelta[data-livello="difficile"]{--c:var(--gs-livello-difficile)}
.gs-livello-scelta{display:grid;gap:2px;width:100%;padding:12px 16px 12px 18px;border-radius:var(--gs-r-controllo);cursor:pointer;text-align:left;
  border:2px solid var(--gs-bordo);border-left:6px solid var(--c);background:var(--gs-superficie-2);color:var(--gs-testo);font:inherit;
  transition:transform .1s,border-color .1s}
.gs-livello-scelta:hover{transform:translateY(-1px);border-color:var(--c)}
.gs-livello-scelta[aria-current="true"]{border-color:var(--c)}
.gs-livello-scelta[aria-current="true"] b::after{content:"ultima scelta";margin-left:8px;font-size:12px;font-weight:600;color:var(--gs-testo-2)}
.gs-livello-scelta b{font:700 18px var(--gs-titoli-font)}
.gs-livello-scelta span{font-size:14px;color:var(--gs-testo-2)}
@media (max-width:640px){.gs-livello-descr{flex-basis:100%}}

/* ---------- Sfida: i pulsanti che servono solo in Esercitazione spariscono */
.gs-in-sfida [data-gs-esercitazione]{display:none!important}

/* ---------- Conto alla rovescia (domande a tempo) ------------------ */
.gs-tempo{display:flex;align-items:center;gap:10px;margin:10px 0 4px;font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.gs-tempo b{flex:1;height:8px;border-radius:4px;background:rgb(255 255 255 / .14);overflow:hidden}
.gs-tempo i{display:block;height:100%;background:var(--gs-colore);transform-origin:left center;transition:transform .1s linear}
.gs-tempo span{min-width:36px;text-align:right}
.gs-tempo.gs-poco i{background:var(--gs-rosa)}
.gs-tempo.gs-poco span{color:var(--gs-rosa)}