/* ============================================================
   LA RACCOLTA — interfaccia di gioco
   ============================================================ */

:root{
  --nero:#0A0805;
  --nero-2:#120E08;
  --crema:#F6F0E2;
  --giallo:#FFD400;
  --giallo-chiaro:#FFE873;
  --giallo-scuro:#E8A200;
  --rosso:#FF6A4A;
  --tenue:rgba(246,240,226,.66);
  --fioco:rgba(246,240,226,.40);
  --velo:rgba(246,240,226,.09);
  --orlo:rgba(255,238,190,.13);

  --f-display:"Archivo Black","Archivo",system-ui,sans-serif;
  --f-testo:"Archivo",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px; --r-pill:999px;
  --ombra:0 18px 50px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;height:100dvh;overflow:hidden;overscroll-behavior:none;
  background:var(--nero);color:var(--crema);
  font-family:var(--f-testo);font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;touch-action:manipulation;
  display:flex;flex-direction:column;
}
h1,h2,p,ol,ul,figure{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
img,canvas,svg{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--giallo);outline-offset:3px;border-radius:6px}
::selection{background:var(--giallo);color:var(--nero)}

/* ---------- impianto ---------- */
.gio-app{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center}
.gio-scena{
  position:relative;flex:1 1 auto;min-height:0;width:100%;
  background:
    radial-gradient(110% 60% at 50% 108%, rgba(255,190,0,.10) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#151007 0%,#0A0805 55%,#070502 100%);
  overflow:hidden;
}
#tela{position:absolute;inset:0;width:100%;height:100%;touch-action:none}

/* ---------- barra di gioco ---------- */
.gio-hud{
  position:absolute;left:0;right:0;top:0;z-index:4;
  margin:calc(env(safe-area-inset-top,0px) + .55rem) .6rem 0;
  padding:.5rem .55rem .5rem .95rem;
  display:grid;grid-template-columns:1fr auto 1fr auto;align-items:center;gap:.55rem;
  border-radius:var(--r-pill);
  background:rgba(12,9,5,.62);
  border:1px solid var(--orlo);
  box-shadow:0 8px 26px rgba(0,0,0,.45);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  opacity:0;transform:translateY(-14px);pointer-events:none;
  transition:opacity .32s ease,transform .32s cubic-bezier(.2,.8,.25,1);
}
.gio-hud.is-attivo{opacity:1;transform:none}
.gio-hud.is-attivo .gio-pausa{pointer-events:auto}
.gio-hud__cella{display:flex;flex-direction:column;gap:.02rem;min-width:0}
.gio-hud__cella--centro{align-items:center}
.gio-hud__cella--destra{align-items:flex-end}
.gio-eti{
  font-family:var(--f-mono);font-size:.5rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fioco);
}
.gio-val{
  font-family:var(--f-display);font-weight:400;letter-spacing:-.025em;
  font-size:clamp(1.15rem,.85rem + 1.9vw,1.6rem);line-height:1.08;
  font-variant-numeric:tabular-nums;
}
.gio-val--punti{color:var(--giallo)}


.gio-vite{display:flex;gap:.2rem;padding-top:.12rem}
.gio-vita{
  display:block;line-height:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  transition:opacity .25s ease,filter .25s ease,transform .25s ease;
}
.gio-vita.is-persa{opacity:.2;filter:grayscale(1);transform:scale(.82)}

.gio-val--serie{color:var(--crema);transition:color .25s ease}
#hud-combo.is-caldo{color:#FFA23C}

.gio-pausa{pointer-events:auto}
.gio-hud__cella{display:flex;flex-direction:column;gap:.02rem;min-width:0}
.gio-hud__cella--centro{align-items:center}
.gio-hud__cella--destra{align-items:flex-end}
.gio-eti{
  font-family:var(--f-mono);font-size:.5rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--fioco);
}
.gio-val{
  font-family:var(--f-display);font-weight:400;letter-spacing:-.025em;
  font-size:clamp(1.15rem,.85rem + 1.9vw,1.6rem);line-height:1.08;
  font-variant-numeric:tabular-nums;
}
.gio-val--punti{color:var(--giallo)}


.gio-vite{display:flex;gap:.2rem;padding-top:.12rem}
.gio-vita{
  display:block;line-height:0;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.6));
  transition:opacity .25s ease,filter .25s ease,transform .25s ease;
}
.gio-vita.is-persa{opacity:.2;filter:grayscale(1);transform:scale(.82)}

.gio-molt{
  position:absolute;left:.95rem;top:calc(100% - .25rem);
  font-family:var(--f-mono);font-size:.58rem;font-weight:700;letter-spacing:.1em;
  padding:.22rem .5rem;border-radius:var(--r-pill);
  background:rgba(255,212,0,.14);color:var(--giallo);border:1px solid rgba(255,212,0,.3);
  opacity:0;transform:translateY(-4px);transition:opacity .2s ease,transform .2s ease,background .2s ease,color .2s ease;
}
.gio-molt.is-attivo{opacity:1;transform:none}
.gio-molt.is-caldo{background:rgba(255,110,60,.18);border-color:rgba(255,140,80,.5);color:#FFA070}

.gio-pausa{
  width:34px;height:34px;border-radius:var(--r-pill);
  display:grid;place-items:center;
  background:var(--velo);border:1px solid var(--orlo);
  transition:background .2s ease,transform .12s ease;pointer-events:none;
}
.gio-pausa svg{width:13px;height:13px;fill:var(--tenue)}
.gio-pausa:hover{background:rgba(255,212,0,.16)}
.gio-pausa:hover svg{fill:var(--giallo)}
.gio-pausa:active{transform:scale(.9)}

/* ---------- gettoni di stato ---------- */
.gio-stati{
  position:absolute;left:.7rem;bottom:calc(env(safe-area-inset-bottom,0px) + .7rem);
  z-index:4;display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;pointer-events:none;
}
.gio-stato{
  font-family:var(--f-mono);font-size:.55rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;padding:.36rem .65rem;border-radius:var(--r-pill);
  display:flex;align-items:center;gap:.45rem;
  background:rgba(12,9,5,.66);border:1px solid currentColor;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  animation:gio-gettone .32s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes gio-gettone{from{opacity:0;transform:translateX(-14px) scale(.88)}to{opacity:1;transform:none}}
.gio-stato b{font-variant-numeric:tabular-nums;min-width:2.4em;text-align:right;opacity:.75}
.gio-stato--turbo{color:#7BDCFF}
.gio-stato--psiche{color:#FF83DC}

/* ---------- schermate ---------- */
.gio-schermo{
  position:absolute;inset:0;z-index:6;
  display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 1rem) 1rem calc(env(safe-area-inset-bottom,0px) + 1rem);
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity .26s ease;
}
.gio-schermo.is-dentro{opacity:1}
.gio-schermo[hidden]{display:none}
.gio-schermo--avvio{
  background:
    radial-gradient(90% 50% at 50% 12%, rgba(255,190,0,.13) 0%, rgba(0,0,0,0) 62%),
    linear-gradient(180deg,rgba(8,6,3,.30) 0%,rgba(8,6,3,.88) 38%,rgba(8,6,3,.96) 100%);
}
.gio-schermo--pausa{background:rgba(8,6,3,.80)}
.gio-schermo--fine{
  background:
    radial-gradient(80% 44% at 50% 18%, rgba(255,190,0,.16) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg,rgba(8,6,3,.62) 0%,rgba(8,6,3,.95) 45%);
}
.gio-schermo__in{
  width:100%;max-width:352px;margin:auto;text-align:center;
  transform:translateY(18px) scale(.965);
  transition:transform .34s cubic-bezier(.2,.8,.25,1);
}
.gio-schermo.is-dentro .gio-schermo__in{transform:none}

.gio-occhiello{
  font-family:var(--f-mono);font-size:.55rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--giallo);opacity:.85;margin-bottom:.8rem;
}
.gio-marchio{
  position:relative;
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2rem,10.5vw,3rem);line-height:.9;letter-spacing:-.045em;
  display:flex;justify-content:center;align-items:baseline;
  margin:0 0 .5rem;white-space:nowrap;
}
.gio-marchio::after{
  content:'';position:absolute;left:50%;top:50%;width:120%;height:190%;
  transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(255,190,0,.20) 0%, rgba(255,190,0,0) 70%);
}
.gio-marchio__a{color:var(--crema)}
.gio-marchio__b{
  background:linear-gradient(180deg,#FFE873 0%,#FFD400 45%,#E8A200 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 20px rgba(255,190,0,.35));
}
.gio-modo{
  display:flex;align-items:center;justify-content:center;gap:.65rem;
  font-family:var(--f-mono);font-size:.54rem;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--fioco);margin:0 0 1rem;
}
.gio-modo span{height:1px;width:44px;flex:none}
.gio-modo span:first-child{background:linear-gradient(90deg,rgba(255,238,190,0),rgba(255,238,190,.35))}
.gio-modo span:last-child{background:linear-gradient(90deg,rgba(255,238,190,.35),rgba(255,238,190,0))}
.gio-titolo2{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:1rem;line-height:1.1;letter-spacing:-.015em;color:var(--giallo);
  margin:1.35rem 0 .65rem;
}
.gio-sommario{color:var(--tenue);font-size:.875rem;line-height:1.5;max-width:30ch;margin:0 auto 1.15rem}

/* legenda */
.gio-legenda{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-bottom:1.2rem}
.gio-voce{
  display:flex;flex-direction:column;align-items:center;gap:.3rem;
  padding:.55rem .2rem .45rem;border-radius:var(--r-s);
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid rgba(255,238,190,.08);
}
.gio-voce canvas{width:34px;height:34px;filter:drop-shadow(0 4px 7px rgba(0,0,0,.55))}
.gio-voce b{
  font-family:var(--f-mono);font-size:.56rem;font-weight:700;color:var(--giallo);
  padding:.1rem .35rem;border-radius:var(--r-pill);background:rgba(255,212,0,.12);
}
.gio-voce span{
  font-family:var(--f-mono);font-size:.48rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fioco);line-height:1.25;text-align:center;
}
.gio-voce--male b{color:var(--rosso);background:rgba(255,106,74,.14)}

/* bottoni */
.gio-grosso{
  position:relative;display:block;width:100%;
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,#FFE873 0%,#FFCB0A 52%,#EFA400 100%);
  color:#2A1B02;
  font-family:var(--f-display);text-transform:uppercase;font-size:1.02rem;letter-spacing:.01em;
  padding:1.05rem 1.2rem;overflow:hidden;
  box-shadow:0 10px 28px rgba(255,180,0,.26), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -2px 0 rgba(140,90,0,.3);
  transition:transform .14s cubic-bezier(.2,.8,.25,1),box-shadow .22s ease,filter .22s ease;
}
.gio-grosso:hover{filter:brightness(1.05);box-shadow:0 14px 34px rgba(255,180,0,.34), inset 0 1px 0 rgba(255,255,255,.7)}
.gio-grosso:active{transform:translateY(2px) scale(.985);box-shadow:0 5px 14px rgba(255,180,0,.22)}
.gio-piccolo{
  display:inline-flex;align-items:center;justify-content:center;min-height:38px;
  padding:.55rem .95rem;border-radius:var(--r-pill);
  background:var(--velo);border:1px solid var(--orlo);color:var(--tenue);
  font-family:var(--f-mono);font-size:.62rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  transition:transform .12s ease,background .2s ease,color .2s ease,border-color .2s ease;
}
.gio-piccolo:hover{background:rgba(255,212,0,.13);border-color:rgba(255,212,0,.4);color:var(--giallo)}
.gio-piccolo:active{transform:scale(.95)}
.gio-secondari{display:flex;flex-wrap:wrap;gap:.4rem;justify-content:center;margin-top:.85rem}
.gio-suggerimento{
  font-family:var(--f-mono);font-size:.58rem;letter-spacing:.11em;text-transform:uppercase;
  color:var(--fioco);margin-top:.75rem;
}
.gio-primato{
  display:flex;justify-content:space-between;align-items:center;gap:1rem;
  margin-top:.95rem;padding:.6rem .95rem;border-radius:var(--r-pill);
  background:var(--velo);border:1px solid rgba(255,238,190,.08);
  font-family:var(--f-mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fioco);
}
.gio-primato strong{font-family:var(--f-display);font-size:1.1rem;color:var(--giallo);letter-spacing:0;font-variant-numeric:tabular-nums}

/* interruttori */
.gio-impostazioni{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.gio-interruttore{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem .95rem;border-radius:var(--r-m);
  background:var(--velo);border:1px solid rgba(255,238,190,.08);
}
.gio-interruttore__n{font-size:.85rem;color:var(--crema)}
.gio-interruttore__l{
  width:44px;height:26px;border-radius:var(--r-pill);flex:none;position:relative;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,238,190,.12);
  transition:background .22s ease,border-color .22s ease;
}
.gio-interruttore__l::after{
  content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:rgba(246,240,226,.55);transition:transform .24s cubic-bezier(.3,.9,.3,1),background .22s ease;
}
.gio-interruttore[aria-checked="true"] .gio-interruttore__l{background:rgba(255,212,0,.32);border-color:rgba(255,212,0,.5)}
.gio-interruttore[aria-checked="true"] .gio-interruttore__l::after{transform:translateX(18px);background:var(--giallo)}

/* fine partita */
.gio-punteggione{
  font-family:var(--f-display);font-size:clamp(3.2rem,18vw,5rem);line-height:.9;
  color:var(--giallo);letter-spacing:-.05em;margin:.05rem 0 .5rem;
  font-variant-numeric:tabular-nums;
  text-shadow:0 8px 40px rgba(255,190,0,.35);
}
.gio-grado{
  display:inline-block;font-family:var(--f-display);text-transform:uppercase;
  font-size:.82rem;line-height:1;letter-spacing:.01em;color:var(--crema);
  padding:.55rem .95rem;border-radius:var(--r-pill);
  background:var(--velo);border:1px solid var(--orlo);margin-bottom:.7rem;
}
.gio-giudizio{color:var(--tenue);font-size:.82rem;line-height:1.55;margin-bottom:1.1rem;max-width:32ch;margin-inline:auto}
.gio-distinta{display:grid;grid-template-columns:repeat(2,1fr);gap:.4rem;margin-bottom:1.15rem}
.gio-stat{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:36px 1fr;gap:.6rem;align-items:center;
  padding:.55rem .6rem;border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(255,238,190,.08);
}
.gio-stat::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(78% 120% at 0% 50%, rgba(var(--tinta),.20) 0%, rgba(0,0,0,0) 72%);
}
.gio-stat__i{
  position:relative;width:36px;height:36px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(var(--tinta),.16);
  box-shadow:inset 0 0 0 1px rgba(var(--tinta),.24);
}
.gio-stat__i canvas{width:24px;height:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.gio-stat__t{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.04rem;min-width:0}
.gio-stat b{
  font-family:var(--f-display);font-size:1.22rem;line-height:1;letter-spacing:-.02em;
  color:var(--acceso);font-variant-numeric:tabular-nums;
}
.gio-stat span{
  font-family:var(--f-mono);font-size:.46rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--fioco);line-height:1.2;
}
.gio-stat--largo{
  grid-column:span 2;
  background:linear-gradient(100deg,rgba(var(--tinta),.14),rgba(255,255,255,.02) 62%);
}

/* fogli */
.gio-schermo--foglio{align-items:flex-start;background:rgba(8,6,3,.90)}
.gio-foglio{
  width:100%;max-width:480px;margin:auto;text-align:left;
  background:rgba(20,16,10,.90);
  border:1px solid var(--orlo);border-radius:var(--r-l);
  padding:1.1rem 1.1rem 1.4rem;box-shadow:var(--ombra);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transform:translateY(18px) scale(.97);
  transition:transform .34s cubic-bezier(.2,.8,.25,1);
}
.gio-schermo.is-dentro .gio-foglio{transform:none}
.gio-foglio__testa{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.gio-foglio__testa .gio-occhiello{margin:0}
.gio-chiudi{
  width:32px;height:32px;flex:none;border-radius:var(--r-pill);
  background:var(--velo);border:1px solid var(--orlo);color:var(--tenue);
  display:grid;place-items:center;font-size:.8rem;
  transition:background .2s ease,color .2s ease,transform .12s ease;
}
.gio-chiudi:hover{background:rgba(255,212,0,.14);color:var(--giallo)}
.gio-chiudi:active{transform:scale(.9)}
.gio-articoli{display:flex;flex-direction:column;gap:.4rem}
.gio-articoli li{
  font-size:.8rem;line-height:1.6;color:var(--tenue);
  background:var(--velo);border-radius:var(--r-s);padding:.65rem .8rem;
}
.gio-articoli>li>b:first-child{
  color:var(--giallo);font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;margin-right:.2rem;
}
.gio-articoli li b{color:var(--crema)}
.gio-lista{display:flex;flex-direction:column;gap:.3rem}
.gio-lista li{font-size:.8rem;line-height:1.55;color:var(--tenue)}
.gio-lista b{color:var(--giallo)}
.gio-tab{display:flex;flex-direction:column;gap:2px;border-radius:var(--r-m);overflow:hidden}
.gio-tab__r{
  display:grid;grid-template-columns:34px 1fr auto;gap:.7rem;align-items:center;
  background:var(--velo);padding:.55rem .8rem;
}
.gio-tab__r canvas{width:28px;height:28px;filter:drop-shadow(0 2px 5px rgba(0,0,0,.55))}
.gio-tab__n{font-size:.78rem;color:var(--crema);line-height:1.3}
.gio-tab__n small{display:block;font-family:var(--f-mono);font-size:.55rem;color:var(--fioco);letter-spacing:.03em;margin-top:.12rem}
.gio-tab__v{font-family:var(--f-mono);font-size:.7rem;font-weight:700;color:var(--giallo);white-space:nowrap}
.gio-tab__v--male{color:var(--rosso)}
.gio-nota{font-family:var(--f-mono);font-size:.55rem;line-height:1.65;color:var(--fioco);margin-top:.9rem}
#btn-azzera{margin-top:.9rem}

.gio-annuncio{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* avvisi */
.gio-avvisi{
  position:fixed;left:50%;bottom:1.4rem;transform:translateX(-50%);z-index:20;
  display:flex;flex-direction:column;gap:.4rem;align-items:center;pointer-events:none;
  width:min(90vw,340px);
}
.gio-avviso{
  width:100%;text-align:center;padding:.7rem .9rem;border-radius:var(--r-pill);
  background:rgba(20,16,10,.94);border:1px solid rgba(255,212,0,.3);color:var(--crema);
  font-family:var(--f-mono);font-size:.66rem;letter-spacing:.04em;
  box-shadow:var(--ombra);transition:opacity .3s ease;
  animation:gio-avviso-in .28s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes gio-avviso-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- schermi larghi ---------- */
@media (min-width:820px){
  .gio-app{padding:1.2rem 0}
  .gio-scena{
    width:min(430px,100%);border-radius:var(--r-xl);
    box-shadow:0 40px 90px rgba(0,0,0,.75), 0 0 0 1px rgba(255,238,190,.09);
  }
}
.is-app .gio-app{padding:0}
.is-app .gio-scena{width:100%;border-radius:0;box-shadow:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
  .gio-schermo__in,.gio-foglio{transform:none}
  .gio-schermo--avvio.is-intro.is-dentro .gio-schermo__in>*,
  .gio-schermo--avvio.is-intro.is-dentro .gio-voce,
  .gio-schermo--fine.is-dentro .gio-stat{opacity:1 !important}
}

/* ---------- iscrizione alla classifica ---------- */
.gio-iscrizione{margin:0 0 1rem;text-align:left}
.gio-iscrizione[hidden]{display:none}
.gio-eti-campo{
  display:block;font-family:var(--f-mono);font-size:.52rem;font-weight:700;letter-spacing:.2em;
  text-transform:uppercase;color:var(--giallo);margin-bottom:.45rem;
}
.gio-campo{display:grid;grid-template-columns:1fr auto;gap:.35rem}
.gio-campo input{
  width:100%;min-width:0;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,238,190,.14);
  border-radius:var(--r-pill);padding:.7rem 1rem;color:var(--crema);
  font-family:var(--f-testo);font-size:16px;letter-spacing:.02em;
}
.gio-campo input::placeholder{color:rgba(246,240,226,.3)}
.gio-campo input:focus{outline:none;border-color:rgba(255,212,0,.55);background:rgba(255,212,0,.07)}
.gio-invia{
  border-radius:var(--r-pill);padding:.7rem 1.1rem;
  background:linear-gradient(180deg,#FFE873,#FFC800);color:#2A1B02;
  font-family:var(--f-mono);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  transition:transform .12s ease,filter .2s ease;
}
.gio-invia:hover{filter:brightness(1.06)}
.gio-invia:active{transform:scale(.95)}
.gio-invia[disabled]{opacity:.5;filter:grayscale(.4)}
.gio-esito-invio{
  font-family:var(--f-mono);font-size:.58rem;line-height:1.5;color:var(--fioco);
  margin-top:.5rem;min-height:1em;
}
.gio-esito-invio.is-buono{color:var(--giallo)}
.gio-esito-invio.is-male{color:var(--rosso)}

/* ---------- classifica globale ---------- */
.gio-riga-cl{
  display:grid;grid-template-columns:30px 1fr auto;gap:.7rem;align-items:center;
  background:var(--velo);padding:.5rem .8rem;
}
.gio-riga-cl__n{
  font-family:var(--f-mono);font-size:.66rem;font-weight:700;color:var(--fioco);text-align:center;
  font-variant-numeric:tabular-nums;
}
.gio-riga-cl__nome{
  font-size:.82rem;color:var(--crema);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.gio-riga-cl__nome small{
  display:block;font-family:var(--f-mono);font-size:.52rem;color:var(--fioco);
  letter-spacing:.05em;margin-top:.1rem;
}
.gio-riga-cl__p{
  font-family:var(--f-display);font-size:.95rem;color:var(--giallo);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;
}
.gio-riga-cl--io{background:rgba(255,212,0,.13);box-shadow:inset 0 0 0 1px rgba(255,212,0,.3)}
.gio-riga-cl--io .gio-riga-cl__n{color:var(--giallo)}
.gio-riga-cl--podio .gio-riga-cl__n{color:var(--giallo);font-size:.78rem}

/* ============================================================
   PERCORSO D'INGRESSO — impaginazione a piena altezza
   ============================================================ */
.gio-schermo--avvio{align-items:stretch;justify-content:center}
.gio-percorso{
  display:flex;flex-direction:column;
  width:100%;max-width:360px;height:100%;margin:0 auto;text-align:center;
  transform:translateY(16px) scale(.97);
  transition:transform .34s cubic-bezier(.2,.8,.25,1);
}
.gio-schermo.is-dentro .gio-percorso{transform:none}

.gio-testa-percorso{
  flex:none;display:flex;align-items:center;gap:.7rem;min-height:36px;margin-bottom:.9rem;
}
.gio-indietro{
  width:36px;height:36px;flex:none;border-radius:var(--r-pill);
  background:var(--velo);border:1px solid var(--orlo);color:var(--tenue);
  display:grid;place-items:center;
  transition:background .2s ease,color .2s ease,transform .12s ease;
}
.gio-indietro[hidden]{display:none}
.gio-indietro svg{width:15px;height:15px}
.gio-indietro:hover{background:rgba(255,212,0,.14);color:var(--giallo)}
.gio-indietro:active{transform:scale(.9)}

.gio-passi{display:flex;gap:.35rem;flex:1;margin:0;padding:0;list-style:none}
.gio-passi[hidden]{display:none}
.gio-passi li{
  flex:1;display:flex;flex-direction:column;gap:.32rem;align-items:flex-start;min-width:0;
}
.gio-passi li[hidden]{display:none}
.gio-passi li span{
  display:block;width:100%;height:3px;border-radius:var(--r-pill);
  background:rgba(255,238,190,.12);transition:background .35s ease,box-shadow .35s ease;
}
.gio-passi li em{
  font-style:normal;font-family:var(--f-mono);font-size:.42rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:rgba(246,240,226,.26);
  transition:color .3s ease;white-space:nowrap;
}
.gio-passi li.is-fatto em{color:rgba(246,240,226,.48)}
.gio-passi li.is-fatto span{background:rgba(255,212,0,.42)}
.gio-passi li.is-corrente em{color:var(--giallo)}
.gio-passi li.is-corrente span{background:var(--giallo);box-shadow:0 0 12px rgba(255,212,0,.45)}

.gio-tappe{position:relative;flex:1 1 auto;min-height:0}
.gio-tappa{
  position:absolute;inset:0;display:flex;flex-direction:column;
  opacity:0;transform:translateX(0);pointer-events:none;
  transition:opacity .3s ease,transform .34s cubic-bezier(.2,.8,.25,1);
}
.gio-tappa[hidden]{display:none}
.gio-tappa.is-corrente{opacity:1;transform:none;pointer-events:auto}
.gio-tappa.da-destra{transform:translateX(44px)}
.gio-tappa.da-sinistra{transform:translateX(-44px)}
.gio-tappa.verso-sinistra{opacity:0;transform:translateX(-44px)}
.gio-tappa.verso-destra{opacity:0;transform:translateX(44px)}

.gio-tappa__corpo{
  flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;justify-content:center;gap:.1rem;
  padding-block:.4rem;
}
.gio-tappa__corpo--centro{justify-content:center}
.gio-tappa__piede{flex:none;padding-top:.9rem;display:flex;flex-direction:column;gap:.55rem}

.gio-titolo-tappa{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.55rem,7.4vw,2.05rem);line-height:.96;letter-spacing:-.03em;
  color:var(--crema);margin:0 0 .55rem;
}
.gio-titolo-tappa--grande{
  font-size:clamp(2rem,9.5vw,2.7rem);margin-bottom:.9rem;
  background:linear-gradient(180deg,#FFE873 0%,#FFD400 50%,#E8A200 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 18px rgba(255,190,0,.3));
  overflow-wrap:anywhere;
}

/* 0 · insegna */
.gio-entra{
  display:block;width:100%;padding:1rem 0 .4rem;
  background:none;border:0;color:var(--giallo);
  font-family:var(--f-mono);font-size:.66rem;font-weight:700;letter-spacing:.24em;
  text-transform:uppercase;
}
.gio-entra__t{display:block;animation:gio-respiro 2.4s ease-in-out infinite}
.gio-entra__p{
  display:block;width:44px;height:2px;margin:.7rem auto 0;border-radius:2px;
  background:var(--giallo);opacity:.5;animation:gio-respiro 2.4s ease-in-out infinite;
}
@keyframes gio-respiro{0%,100%{opacity:.42}50%{opacity:1}}
.gio-entra:active{transform:scale(.97)}

/* 1 · nome */
#campo-socio{
  width:100%;text-align:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,238,190,.16);
  border-radius:var(--r-m);padding:.95rem 1rem;color:var(--crema);
  font-family:var(--f-display);font-size:1.1rem;letter-spacing:.02em;text-transform:uppercase;
  transition:border-color .2s ease,background .2s ease;
}
#campo-socio::placeholder{
  font-family:var(--f-testo);font-size:.92rem;text-transform:none;letter-spacing:0;
  color:rgba(246,240,226,.28);
}
#campo-socio:focus{outline:none;border-color:rgba(255,212,0,.6);background:rgba(255,212,0,.07)}

.gio-tessera{
  position:relative;margin-top:.75rem;border-radius:var(--r-m);overflow:hidden;text-align:left;
  background:linear-gradient(135deg,rgba(255,212,0,.13),rgba(255,255,255,.02) 62%);
  border:1px solid rgba(255,238,190,.12);
  opacity:.4;transition:opacity .35s ease,border-color .35s ease,transform .35s cubic-bezier(.2,.8,.25,1);
  transform:scale(.985);
}
.gio-tessera.is-piena{opacity:1;border-color:rgba(255,212,0,.34);transform:none}
.gio-tessera__banda{height:5px;background:linear-gradient(90deg,#FFD400,#E8A200 60%,rgba(255,212,0,.25))}
.gio-tessera__dentro{padding:.7rem .85rem .75rem}
.gio-tessera__testa{
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  font-family:var(--f-mono);font-size:.44rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--fioco);
}
.gio-tessera__testa b{color:var(--giallo);letter-spacing:.1em}
.gio-tessera__nome{
  font-family:var(--f-display);font-size:1.2rem;line-height:1.05;letter-spacing:-.02em;
  color:var(--crema);margin:.4rem 0 .28rem;text-transform:uppercase;overflow-wrap:anywhere;
}
.gio-tessera__pie{
  font-family:var(--f-mono);font-size:.44rem;letter-spacing:.14em;text-transform:uppercase;color:var(--fioco);
}

/* 2 · regole */
.gio-diapositive{position:relative;flex:1 1 auto;min-height:0}
.gio-diapo{
  position:absolute;inset:0;opacity:0;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;
  transition:opacity .28s ease,transform .32s cubic-bezier(.2,.8,.25,1);
}
.gio-diapo[hidden]{display:none}
.gio-diapo.is-corrente{opacity:1;transform:none;pointer-events:auto}
.gio-diapo.da-destra{transform:translateX(38px)}
.gio-diapo.da-sinistra{transform:translateX(-38px)}
.gio-diapo.verso-sinistra{opacity:0;transform:translateX(-38px)}
.gio-diapo.verso-destra{opacity:0;transform:translateX(38px)}
.gio-diapo__icone{display:flex;justify-content:center;gap:.35rem;margin-bottom:1rem;flex-wrap:wrap}
.gio-icona-grande{
  display:flex;flex-direction:column;align-items:center;gap:.28rem;
  padding:.6rem .35rem .5rem;border-radius:var(--r-m);
  flex:1 1 0;min-width:0;max-width:88px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.015));
  border:1px solid rgba(255,238,190,.08);
}
.gio-icona-grande canvas{width:42px;height:42px;filter:drop-shadow(0 5px 10px rgba(0,0,0,.55))}
.gio-icona-grande b{
  font-family:var(--f-mono);font-size:.56rem;font-weight:700;color:var(--giallo);
  padding:.1rem .38rem;border-radius:var(--r-pill);background:rgba(255,212,0,.13);
}
.gio-icona-grande span{
  font-family:var(--f-mono);font-size:.4rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--fioco);text-align:center;line-height:1.25;
}
.gio-icona-grande--male b{color:var(--rosso);background:rgba(255,106,74,.14)}
.gio-pallini{display:flex;justify-content:center;gap:.35rem;margin:1rem 0 0;padding:0;list-style:none;flex:none}
.gio-pallini li{
  width:6px;height:6px;border-radius:50%;background:rgba(255,238,190,.2);
  transition:background .3s ease,width .3s ease;
}
.gio-pallini li.is-corrente{background:var(--giallo);width:18px;border-radius:var(--r-pill)}

/* 3 · installazione */
.gio-istruzioni{margin-top:.9rem}
.gio-istruzioni__lista{display:flex;flex-direction:column;gap:.45rem;margin:0;padding:0;list-style:none}
.gio-passo-i{
  display:grid;grid-template-columns:22px 34px 1fr;gap:.65rem;align-items:center;
  padding:.6rem .75rem;border-radius:var(--r-m);text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  border:1px solid rgba(255,238,190,.08);
}
.gio-passo-i__n{
  font-family:var(--f-mono);font-size:.6rem;font-weight:700;color:var(--giallo);
  text-align:center;
}
.gio-passo-i__ic{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,212,0,.12);color:var(--giallo);
}
.gio-passo-i__ic svg{width:18px;height:18px}
.gio-passo-i__t{font-size:.8rem;line-height:1.4;color:var(--tenue)}
.gio-passo-i__t b{color:var(--crema);font-weight:600}
.gio-piccolo--largo{width:100%}

/* 4 · pronti */
.gio-grosso--via{margin-top:0}

/* ---------- intro dell'insegna ---------- */
@keyframes gio-su{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes gio-daSx{from{opacity:0;transform:translateX(-42px)}to{opacity:1;transform:none}}
@keyframes gio-daDx{from{opacity:0;transform:translateX(42px)}to{opacity:1;transform:none}}
@keyframes gio-bagliore{0%{opacity:0}40%{opacity:1}100%{opacity:.6}}

.gio-schermo--avvio.is-intro.is-dentro #tappa-0>*{opacity:0;animation:gio-su .46s cubic-bezier(.2,.8,.25,1) both}
.gio-schermo--avvio.is-intro.is-dentro .gio-marchio{opacity:1;animation:none}
.gio-schermo--avvio.is-intro.is-dentro .gio-marchio__a{
  display:inline-block;opacity:0;animation:gio-daSx .58s cubic-bezier(.16,.9,.24,1) both;animation-delay:.12s;
}
.gio-schermo--avvio.is-intro.is-dentro .gio-marchio__b{
  display:inline-block;opacity:0;animation:gio-daDx .58s cubic-bezier(.16,.9,.24,1) both;animation-delay:.24s;
}
.gio-schermo--avvio.is-intro.is-dentro .gio-marchio::after{opacity:0;animation:gio-bagliore .9s ease both;animation-delay:.56s}
.gio-schermo--avvio.is-intro.is-dentro .gio-modo{animation-delay:.64s}
.gio-schermo--avvio.is-intro.is-dentro .gio-sommario{animation-delay:.78s}
.gio-schermo--avvio.is-intro.is-dentro .gio-entra{animation-delay:.94s}

.gio-schermo--fine.is-dentro .gio-stat{opacity:0;animation:gio-su .3s ease both}
.gio-schermo--fine.is-dentro .gio-stat:nth-child(1){animation-delay:.26s}
.gio-schermo--fine.is-dentro .gio-stat:nth-child(2){animation-delay:.31s}
.gio-schermo--fine.is-dentro .gio-stat:nth-child(3){animation-delay:.36s}
.gio-schermo--fine.is-dentro .gio-stat:nth-child(4){animation-delay:.41s}
.gio-schermo--fine.is-dentro .gio-stat:nth-child(5){animation-delay:.46s}
.gio-schermo--fine.is-dentro .gio-stat:nth-child(6){animation-delay:.51s}
.gio-schermo--fine.is-dentro .gio-stat:nth-child(7){animation-delay:.56s}
.gio-schermo--fine.is-dentro .gio-stat:nth-child(8){animation-delay:.61s}
.gio-schermo--fine.is-dentro .gio-stat:nth-child(9){animation-delay:.66s}
.gio-stato--erba{color:#8FE87A}