/* ============================================================
   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)}
#hud-tempo.is-poco{color:var(--rosso)}

.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-titolone{
  font-family:var(--f-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.4rem,13vw,3.6rem);line-height:.85;letter-spacing:-.04em;
  margin-bottom:.85rem;
}
.gio-titolone em{
  font-style:normal;
  background:linear-gradient(180deg,#FFE873 0%,#FFD400 45%,#E8A200 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(255,190,0,.28));
}
.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(5,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:32px;height:32px;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:.44rem;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:.35rem;margin-bottom:1.1rem}
.gio-stat{
  display:flex;flex-direction:column;align-items:flex-start;gap:.05rem;
  padding:.55rem .7rem;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,.07);
}
.gio-stat b{font-family:var(--f-display);font-size:1.15rem;line-height:1;color:var(--crema);font-variant-numeric:tabular-nums}
.gio-stat span{font-family:var(--f-mono);font-size:.5rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--fioco)}
.gio-stat--male b{color:var(--rosso)}
.gio-distinta .gio-stat:nth-child(5){grid-column:span 2}

/* 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}

/* ---------- intro a battute ---------- */
@keyframes gio-su{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes gio-titolo{
  0%{opacity:0;transform:translateY(22px) scale(1.14)}
  60%{opacity:1;transform:translateY(0) scale(.985)}
  100%{opacity:1;transform:none}
}
.gio-schermo--avvio.is-intro.is-dentro .gio-schermo__in>*{opacity:0;animation:gio-su .44s cubic-bezier(.2,.8,.25,1) both}
.gio-schermo--avvio.is-intro.is-dentro .gio-occhiello{animation-delay:.06s}
.gio-schermo--avvio.is-intro.is-dentro .gio-titolone{animation:gio-titolo .62s cubic-bezier(.18,.9,.24,1) both;animation-delay:.15s}
.gio-schermo--avvio.is-intro.is-dentro .gio-sommario{animation-delay:.40s}
.gio-schermo--avvio.is-intro.is-dentro .gio-legenda{animation-delay:.48s}
.gio-schermo--avvio.is-intro.is-dentro .gio-grosso{animation-delay:.66s}
.gio-schermo--avvio.is-intro.is-dentro .gio-suggerimento{animation-delay:.76s}
.gio-schermo--avvio.is-intro.is-dentro .gio-primato{animation-delay:.82s}
.gio-schermo--avvio.is-intro.is-dentro .gio-secondari{animation-delay:.90s}
.gio-schermo--avvio.is-intro.is-dentro .gio-voce{opacity:0;animation:gio-su .4s ease both}
.gio-schermo--avvio.is-intro.is-dentro .gio-voce:nth-child(1){animation-delay:.52s}
.gio-schermo--avvio.is-intro.is-dentro .gio-voce:nth-child(2){animation-delay:.58s}
.gio-schermo--avvio.is-intro.is-dentro .gio-voce:nth-child(3){animation-delay:.64s}
.gio-schermo--avvio.is-intro.is-dentro .gio-voce:nth-child(4){animation-delay:.70s}
.gio-schermo--avvio.is-intro.is-dentro .gio-voce:nth-child(5){animation-delay:.76s}
.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}

@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}
}