/* TikForge — Flappy Rush.
   ===================================================================
   Foglio autonomo come pop-shot.css e the-pull.css: la pagina del gioco
   non carica css/styles.css del sito.

   Rifatto il 2026-08-27 per allinearlo al resto di TikForge. Prima
   arrivava dal progetto di partenza e si vedeva: palette oro, font
   Inter/Sora/Poppins, ingranaggio in basso a destra. Adesso:

   · I CONTATORI come nei giochi Roblox di TikForge — alto-centro,
     'Luckiest Guy', contorno nero spesso, colore a semaforo. Là sono
     l'elemento più riconoscibile del marchio, e un gioco browser che
     li fa diversi sembra di un altro.
   · IL MENU come negli altri giochi browser — ingranaggio in ALTO A
     SINISTRA, cassetto laterale, viola TikForge, Nunito Sans e Baloo 2.

   🚨 NIENTE TEMA CHIARO. Questa pagina non è un documento: è una
   Browser Source che sta dietro alla faccia dello streamer per ore. Un
   @media (prefers-color-scheme: light) qui vorrebbe dire una scena che
   cambia colore secondo le impostazioni del PC di chi trasmette.
   =================================================================== */

:root{
  color-scheme: dark;
  /* la palette viola di TikForge, la stessa di the-pull.css e game.css */
  --ink:    #F1E7FF;
  --muted:  #B6A0CF;
  --line:   rgba(214,190,245,0.10);
  --viola:  #A855F7;
  --viola-scuro: #7C1FD4;
  --rosso:  #F43F5E;
  --radius: 14px;
  /* i tre colori del semaforo dei contatori Roblox */
  --win-piu:  #46C85A;
  --win-zero: #FFD23C;
  --win-meno: #DC3228;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html, body{
  height:100%; overflow:hidden; background:#000;
  color:var(--ink);
  font-family:'Nunito Sans', system-ui, -apple-system, sans-serif;
  user-select:none; -webkit-user-select:none;
}
#gioco{ display:block; width:100vw; height:100vh; touch-action:none; }

/* ============================================================
   ▶ LA SCHERMATA INIZIALE — scena sfocata, due tasti pixelati
   ------------------------------------------------------------
   body.in-avvio lo mette il JS all'apertura e lo toglie GIOCA. La
   sfocatura sta sul canvas (non su un velo sopra): è la scena vera,
   con l'uccellino che galleggia, vista attraverso il vetro. HUD,
   ingranaggio e stato della diretta restano nascosti finché non si
   gioca: la schermata deve avere due cose sole da premere. */
body.in-avvio #gioco{ filter:blur(7px) saturate(.9); transform:scale(1.03); }
body.in-avvio #win, body.in-avvio #trag, body.in-avvio #muro, body.in-avvio #ing, body.in-avvio #stato{ display:none; }
#avvio{ display:none; }
body.in-avvio #avvio{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  position:fixed; inset:0; z-index:20;
  background:rgba(0,0,0,.18);
}
/* 🐦 IL TITOLO. E' un'immagine (game/img/flappy/titolo.png), non testo:
   lettere in pixel art disegnate a mano nello stile del logo di Flappy
   Bird da tools/flappy-rush-titolo.py (bianche, tratto spesso, angoli
   smussati, contorno nero e ombra a blocchi). Il font FlappyBirdy
   provato prima disegna solo il filo intorno alle lettere e riempito
   veniva male. Pixel art, quindi si ingrandisce a scatti senza sfumare. */
#avvioTit{
  position:absolute; top:max(6vh, 36px); left:0; right:0; margin:0;
  text-align:center; pointer-events:none; user-select:none; line-height:0;
}
#avvioTit img{
  width:clamp(300px, 62vmin, 760px); height:auto;
  image-rendering:pixelated; image-rendering:crisp-edges;
}

/* 🖱️ «TOCCA PER VOLARE»: dopo GIOCA, sotto l'uccellino, finché non si
   tocca. Pixelata, bianca col contorno nero, pulsa piano. */
#pronto{ display:none; }
body.in-pronto #pronto{
  display:block; position:fixed; z-index:12; left:0; right:0; top:62%;
  text-align:center; pointer-events:none; user-select:none;
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:clamp(14px, 2.6vmin, 26px); color:#fff; text-transform:uppercase;
  animation:pronto-pulsa 1s steps(2) infinite;
}
@keyframes pronto-pulsa{ 50%{ opacity:.6; } }

/* 🏁 IL CONTO ALLA ROVESCIA sotto la bandiera: numero enorme, pixel. */
#conto{ display:none; }
body.in-traguardo #conto{
  display:block; position:fixed; z-index:12; left:0; right:0; top:34%;
  text-align:center; pointer-events:none; user-select:none;
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:clamp(60px, 16vmin, 180px); color:#FFD75E;
  animation:pronto-pulsa 1s steps(2) infinite;
}

/* ⚔️ X VS Y sotto il conto: verde i piu', rosso i meno. */
#vs{ display:none; }
body.in-traguardo #vs{
  display:flex; justify-content:center; align-items:baseline; gap:.6em;
  position:fixed; z-index:12; left:0; right:0; top:calc(34% + clamp(70px, 18vmin, 200px));
  pointer-events:none; user-select:none;
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:clamp(22px, 5vmin, 56px); color:#fff;
}
#vs #vsP{ color:#3BE08A; }
#vs #vsN{ color:#FF3B57; }
#vs .vsT{ font-size:.55em; }

/* "by TikForge" sotto il titolo: pixel, piccolo, bianco col contorno */
#avvioBy{
  /* sotto il titolo, che e' in assoluto: stessa cima + l'altezza dell'immagine (204/864 della larghezza) */
  position:absolute; left:0; right:0; text-align:center;
  top:calc(max(6vh, 36px) + clamp(300px, 62vmin, 760px) * 0.236 + 6px);
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:clamp(10px, 1.8vmin, 18px); color:#fff; letter-spacing:.04em;
  text-shadow:2px 2px 0 #1a1a1a, -1px 0 0 #1a1a1a, 1px 0 0 #1a1a1a, 0 -1px 0 #1a1a1a, 0 1px 0 #1a1a1a;
  pointer-events:none; user-select:none;
}

/* Tasti bianchi, rettangolari, pixelati: font Press Start 2P, angoli
   vivi, bordo e ombra "a blocchi" (niente sfumature né raggi). */
#avvio button{
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:clamp(14px, 2.2vmin, 22px); line-height:1;
  color:#1a1a1a; background:#ffffff;
  border:4px solid #1a1a1a; border-radius:0;
  padding:18px 34px; min-width:min(360px, 78vw);
  text-transform:uppercase; letter-spacing:.04em;
  box-shadow: 0 6px 0 #1a1a1a, 0 6px 0 4px #ffffff;
  cursor:pointer; user-select:none;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
#avvio button:hover{ background:#f3f3f3; }
#avvio button:active{ transform:translateY(6px); box-shadow: 0 0 0 #1a1a1a, 0 0 0 4px #ffffff; }
#avvio button:focus-visible{ outline:4px solid #FFD23C; outline-offset:4px; }

/* ============================================================
   🏆 I CONTATORI — PIXELATI, come tutto il resto di Flappy Rush
   ------------------------------------------------------------
   Alto-centro; Press Start 2P (il carattere dei tasti e del menu),
   nessuno sfondo, contorno nero di due pixel fatto con quattro ombre
   dritte piu' l'ombra piena a blocco in basso a destra: e' la stessa
   grafica del titolo e degli annunci. Il numero della WIN tiene il
   colore a semaforo: rosso sotto zero, giallo a zero, verde sopra.
   (Gli altri giochi della famiglia usano 'Luckiest Guy' col contorno
   4.5 px; qui dal 2026-08-27 la scritta e' pixel, scelta dell'utente.)
   ============================================================ */
#win, #trag, #muro{
  position:fixed; left:50%; transform:translateX(-50%);
  z-index:6; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-weight:400; letter-spacing:.02em; line-height:1;
  white-space:nowrap; text-align:center;
}
#win{  top:14px; height:56px; }
#trag{ top:72px; height:30px; }
#muro{ top:104px; height:24px; }   /* 🧱 la vita del muro allo zero */

.fr-contorno{
  text-shadow:
    -2px 0 0 #1a1a1a, 2px 0 0 #1a1a1a, 0 -2px 0 #1a1a1a, 0 2px 0 #1a1a1a,
    -2px -2px 0 #1a1a1a, 2px -2px 0 #1a1a1a, -2px 2px 0 #1a1a1a, 2px 2px 0 #1a1a1a,
    4px 4px 0 #1a1a1a;
}
#trag .fr-contorno, #muro .fr-contorno{
  text-shadow:
    -2px 0 0 #1a1a1a, 2px 0 0 #1a1a1a, 0 -2px 0 #1a1a1a, 0 2px 0 #1a1a1a,
    -2px -2px 0 #1a1a1a, 2px -2px 0 #1a1a1a, -2px 2px 0 #1a1a1a, 2px 2px 0 #1a1a1a,
    3px 3px 0 #1a1a1a;
}

#win .wNum{ font-size:36px; color:var(--win-piu); }
#win .wNum.zero{ color:var(--win-zero); }
#win .wNum.neg{  color:var(--win-meno); }
#trag .tNum{ font-size:18px; color:#FFFFFF; }
#trag .tNum.neg{ color:var(--win-meno); }   /* metri sotto zero: rosso come le colonne */
#muro .mNum{ font-size:13px; color:#FFB347; }
#muro .mNum.basso{ color:var(--win-meno); }  /* sotto un quarto di vita */

/* il balzo quando il numero cambia: a scatti, sul NUMERO */
#win.su .wNum{  animation:wSu .36s steps(3); }
#win.giu .wNum{ animation:wGiu .36s steps(4); }
#win .wNum{ display:inline-block; transform-origin:center bottom; }
@keyframes wSu{ 0%{transform:scale(1)} 30%{transform:scale(1.15)} 100%{transform:scale(1)} }
@keyframes wGiu{ 0%{transform:translateX(0)} 25%{transform:translateX(-8px)}
                 55%{transform:translateX(8px)} 100%{transform:translateX(0)} }

/* ---------- l'annuncio dell'evento appena arrivato ---------- */
#banda{
  position:fixed; left:50%; top:18%; transform:translateX(-50%) scale(.7);
  z-index:7; opacity:0; pointer-events:none;
  text-align:center; width:min(92vw, 900px);
}
#banda.vai{ animation:bandaVai 2.5s steps(10) forwards; }
@keyframes bandaVai{
  0%{   opacity:0; transform:translateX(-50%) scale(.7); }
  10%{  opacity:1; transform:translateX(-50%) scale(1.06); }
  18%{  transform:translateX(-50%) scale(1); }
  80%{  opacity:1; transform:translateX(-50%) scale(1); }
  100%{ opacity:0; transform:translateX(-50%) translateY(-24px) scale(1.02); }
}
/* 🟫 L'ANNUNCIO E LA FESTA SONO PIXELATI come tutto quello che si
   muove: Press Start 2P, ombra a blocchi, animazioni a scatti. */
#banda .bTit{
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:clamp(18px,3.4vw,42px); line-height:1.25;
  text-transform:uppercase;
  /* il colore dell'azione resta (verde = aiuto, rosso = dispetto) */
  -webkit-text-stroke:0; paint-order:stroke fill;
  text-shadow:4px 4px 0 #1a1a1a, -2px 0 0 #1a1a1a, 2px 0 0 #1a1a1a, 0 -2px 0 #1a1a1a, 0 2px 0 #1a1a1a;
}
#banda .bChi{
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:clamp(10px,1.4vw,16px); line-height:1.4; color:#fff;
  margin-top:10px; text-shadow:2px 2px 0 #1a1a1a, -1px 0 0 #1a1a1a, 1px 0 0 #1a1a1a, 0 -1px 0 #1a1a1a; word-break:break-word;
}
#banda .bVal{
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:clamp(14px,2.2vw,26px); margin-top:8px;
  font-variant-numeric:tabular-nums;
  text-shadow:3px 3px 0 #1a1a1a, -2px 0 0 #1a1a1a, 2px 0 0 #1a1a1a, 0 -2px 0 #1a1a1a, 0 2px 0 #1a1a1a;
}

/* ---------- la festa della WIN ---------- */
#festa{ position:fixed; inset:0; z-index:9; display:grid; place-items:center;
        pointer-events:none; opacity:0; }
#festa.vai{ animation:festaVai 3.4s steps(8) forwards; }
@keyframes festaVai{ 0%{opacity:0} 8%{opacity:1} 78%{opacity:1} 100%{opacity:0} }
#festa .fTxt{
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:clamp(40px,9vw,120px); text-transform:uppercase;
  color:#FFD75E;
  text-shadow:6px 6px 0 #1a1a1a, -3px 0 0 #1a1a1a, 3px 0 0 #1a1a1a, 0 -3px 0 #1a1a1a, 0 3px 0 #1a1a1a;
  animation:fPulsa 0.6s steps(2) infinite;
}
@keyframes fPulsa{ 0%,100%{transform:scale(1)} 50%{transform:scale(1.06)} }

/* ============================================================
   ⚙️ IL MENU — come gli altri giochi browser di TikForge
   ------------------------------------------------------------
   Ingranaggio tondo in ALTO A SINISTRA; il menu è una scheda al
   centro nello stile dei tasti della schermata iniziale (vedi #menu).

   🚨 IL CAMPO RESTA VISIBILE. Nessuno dei giochi TikForge oscura la
   partita quando apri le IMPOSTAZIONI — il velo scuro è riservato a
   pausa e fine partita. Qui si regola in diretta guardando il
   risultato dal vivo: un velo renderebbe inutile la regolazione.
   ============================================================ */
/* ⏸ IL TASTO PAUSA, in alto a sinistra: quadrato pixelato con le due
   barre, nello stile dei tasti della schermata iniziale. Riporta al
   menu iniziale (GIOCA / IMPOSTAZIONI); le impostazioni si aprono da
   lì. Nascosto finché si sta nella schermata iniziale. */
#ing{
  position:fixed; z-index:11;
  top:  max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  width:52px; height:52px; padding:0;
  display:grid; place-items:center;
  color:#1a1a1a; background:#f4f1ea;
  border:4px solid #1a1a1a; border-radius:0;
  box-shadow: 0 5px 0 #1a1a1a;
  cursor:pointer;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
#ing svg{ display:block; }
#ing:hover{ background:#e9e5db; }
#ing:active{ transform:translateY(5px); box-shadow:none; }
#ing:focus-visible{ outline:4px solid #FFD23C; outline-offset:2px; }

/* ⚡ IL TASTO FULMINE, accanto alla casa: stesso quadrato. Apre sotto,
   sul lato sinistro, la finestrella con le otto azioni da provare
   (le stesse del menu, per provarle senza aprire le impostazioni). */
#lampo{
  position:fixed; z-index:11;
  top:  max(12px, env(safe-area-inset-top));
  left: calc(max(12px, env(safe-area-inset-left)) + 52px + 10px);
  width:52px; height:52px; padding:0;
  display:grid; place-items:center;
  color:#1a1a1a; background:#f4f1ea;
  border:4px solid #1a1a1a; border-radius:0;
  box-shadow: 0 5px 0 #1a1a1a;
  cursor:pointer;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
#lampo svg{ display:block; }
#lampo:hover{ background:#e9e5db; }
#lampo:active{ transform:translateY(5px); box-shadow:none; }
#lampo[aria-expanded="true"]{ background:#1a1a1a; color:#f4f1ea; }
#lampo:focus-visible{ outline:4px solid #FFD23C; outline-offset:2px; }
body.in-avvio #lampo{ display:none; }

/* 🟩🟥 LE DUE SQUADRE, come nei giochi Roblox di TikForge: due colonne
   ai bordi dello schermo, verde a sinistra e rossa a destra, che
   riempiono l'altezza fra l'HUD e la terra. Ogni voce e' l'ICONA del
   regalo, grande, col numero dei tubi sotto (pixel, col contorno);
   niente nomi. Senza sfondo: e' un overlay da diretta. */
#squadre{ position:fixed; inset:0; z-index:5; pointer-events:none; }
body.in-avvio #squadre{ display:none; }
#squadre .sq{
  position:absolute; top:calc(max(12px, env(safe-area-inset-top)) + 100px); bottom:18%;
  width:clamp(64px, 12vmin, 110px);
  display:flex; flex-direction:column; justify-content:space-evenly; align-items:center;
  font-family:'Press Start 2P', 'Courier New', monospace;
}
/* 📱 le colonne stanno ai bordi della FASCIA VERTICALE 9:16 al centro
   dello schermo (l'inquadratura di TikTok), non ai bordi dello schermo:
   a 450 px dal centro per lato (fissi). Su uno schermo verticale la fascia e' tutto
   lo schermo e le colonne finiscono ai bordi. */
#squadre .verde{ left:max(10px, calc(50% - 450px)); }
#squadre .rossa{ right:max(10px, calc(50% - 450px)); }
#squadre h3{ display:none; }
#squadre .sq > div{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-evenly; align-items:center; }
#squadre .sqRiga{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  color:#fff;
}
#squadre .sqRiga img{
  width:clamp(34px, 6.6vmin, 64px); height:auto; flex:0 0 auto;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.55));
}
#squadre .sqNome{ display:none; }
#squadre .sqTag{
  font-size:clamp(6px, .9vmin, 8px); color:#FFD75E; white-space:nowrap; text-align:center;
  text-shadow:1px 1px 0 #1a1a1a, -1px 0 0 #1a1a1a, 1px 0 0 #1a1a1a, 0 -1px 0 #1a1a1a, 0 1px 0 #1a1a1a;
}
#squadre .sqTag{ display:none; }   /* follow/like non si mostrano sotto le icone (scelta dell'utente, 2026-08-28) */
#squadre .sqTubi{ font-size:clamp(9px, 1.6vmin, 14px); }
#squadre .verde .sqTubi{ color:#3BE08A; }
#squadre .rossa .sqTubi{ color:#FF3B57; }
#squadre .sqTubi.fr-contorno{
  text-shadow:2px 2px 0 #1a1a1a, -2px 0 0 #1a1a1a, 2px 0 0 #1a1a1a, 0 -2px 0 #1a1a1a, 0 2px 0 #1a1a1a,
    -2px -2px 0 #1a1a1a, 2px -2px 0 #1a1a1a, -2px 2px 0 #1a1a1a, 2px 2px 0 #1a1a1a;
}
/* la finestrella delle prove sta sopra la squadra verde */
#prove{ z-index:11; }

/* ⛶ SCHERMO INTERO: quadrato pixelato in basso a sinistra, come gli
   altri tasti; si vede anche nel menu iniziale (sopra al velo). */
#pieno{
  position:fixed; z-index:21;
  bottom:max(12px, env(safe-area-inset-bottom));
  left:  max(12px, env(safe-area-inset-left));
  width:52px; height:52px; padding:0;
  display:grid; place-items:center;
  color:#1a1a1a; background:#f4f1ea;
  border:4px solid #1a1a1a; border-radius:0;
  box-shadow: 0 5px 0 #1a1a1a;
  cursor:pointer;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
#pieno svg{ display:block; }
#pieno:hover{ background:#e9e5db; }
#pieno:active{ transform:translateY(5px); box-shadow:none; }
#pieno:focus-visible{ outline:4px solid #FFD23C; outline-offset:2px; }

#prove[hidden]{ display:none; }
#prove{
  position:fixed; z-index:11;
  top:  calc(max(12px, env(safe-area-inset-top)) + 52px + 14px);
  left: max(12px, env(safe-area-inset-left));
  width:min(220px, calc(100vw - 24px));
  max-height:calc(100vh - 100px); overflow-y:auto;
  padding:12px;
  background:#ece8dd; color:#1a1a1a;
  border:4px solid #1a1a1a; border-radius:0;
  box-shadow: 0 6px 0 #1a1a1a;
  display:grid; grid-template-columns:1fr; gap:8px;
}
#prove h3{
  margin:0 0 4px; font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:10px; font-weight:400; text-transform:uppercase; letter-spacing:.04em;
}
#prove .prova{
  width:100%; padding:10px 6px; border-radius:0; cursor:pointer;
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:9px; line-height:1.3; text-transform:uppercase;
  color:#1a1a1a; background:#f4f1ea; border:3px solid #1a1a1a;
  box-shadow:0 4px 0 #1a1a1a;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
#prove .prova:hover{ background:#e2ded3; }
#prove .prova:active{ transform:translateY(4px); box-shadow:none; }
#prove .prova.pos{ background:#e3f3e6; }
#prove .prova.neg{ background:#f6e3e5; }

#menu{
  --ink:#1a1a1a; --muted:#3a3a3a; --line:#1a1a1a; --viola:#1a1a1a; --oro:#1a1a1a;
  position:fixed; z-index:30; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(700px, 94vw); max-height:min(88vh, 900px);
  padding:18px 22px calc(22px + env(safe-area-inset-bottom));   /* in alto c'è la striscia con la X */
  overflow-y:auto; overscroll-behavior:contain;
  color:#1a1a1a; background:#ece8dd;   /* avorio, non bianco pieno: non acceca */
  border:4px solid #1a1a1a; border-radius:0;
  box-shadow: 0 8px 0 #1a1a1a, 0 8px 0 4px #ece8dd;
  display:none;
}
#menu.aperto{ display:block; animation:menu-in .14s steps(3); }
@keyframes menu-in{ from{ transform:translate(-50%,-50%) scale(.96); opacity:0; } to{ transform:translate(-50%,-50%); opacity:1; } }

/* il quadrato con la X, in alto a destra, appiccicato al bordo */
#menu .mTop{ position:sticky; top:0; height:44px; margin-bottom:6px; z-index:1; }
#menu .mChiudi{
  position:absolute; top:0; right:-4px;
  width:44px; height:44px; padding:0; cursor:pointer;
  display:grid; place-items:center;
  font-family:'Press Start 2P', 'Courier New', monospace; font-size:18px; line-height:1;
  color:#1a1a1a; background:#f4f1ea;
  border:4px solid #1a1a1a; border-radius:0;
  box-shadow: 0 4px 0 #1a1a1a;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
#menu .mChiudi:hover{ background:#e2ded3; }
#menu .mChiudi:active{ transform:translateY(4px); box-shadow:none; }
#menu .mChiudi:focus-visible{ outline:4px solid #FFD23C; outline-offset:2px; }

/* 📁 LE SEZIONI: cartelle col titolo su striscia nera e corpo avorio.
   Le righe dentro hanno tutte la stessa forma: etichetta | controllo. */
#menu .sez{ border:3px solid #1a1a1a; background:#f4f1ea; margin:0 0 16px; }
#menu .sez > h2{
  margin:0; padding:10px 12px; background:#1a1a1a; color:#ffffff;
  font-family:'Press Start 2P', 'Courier New', monospace; font-size:10px; font-weight:400;
  letter-spacing:.06em; text-transform:uppercase;
}
#menu .sez.verde > h2{ color:#3BE08A; }
#menu .sez.rossa > h2{ color:#FF3B57; }
#menu .sez .corpo{ padding:2px 12px; }
#menu .sez .riga{ border-bottom:2px solid rgba(26,26,26,.12); padding:9px 0; }
#menu .sez .riga:last-child{ border-bottom:0; }
#menu .sez .nota{ padding:8px 0 10px; margin:0; }
/* i segmenti: due o tre tastini in riga, quello scelto e' nero */
#menu .segm{ display:flex; gap:6px; flex:0 0 auto; }
#menu .segm button{
  padding:10px 12px; cursor:pointer; min-width:74px;
  font-family:'Press Start 2P', 'Courier New', monospace; font-size:9px; line-height:1; text-transform:uppercase;
  color:#1a1a1a; background:#ece8dd; border:3px solid #1a1a1a; border-radius:0;
  box-shadow:0 3px 0 #1a1a1a;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
#menu .segm button:hover{ background:#e2ded3; }
#menu .segm button:active{ transform:translateY(3px); box-shadow:none; }
#menu .segm button.scelto{ background:#1a1a1a; color:#ffffff; }
/* le righe delle azioni: icona · nome · casella · Evento */
#menu .azIntesta{
  font-family:'Nunito Sans', system-ui, sans-serif; font-size:12px; line-height:1.5; color:#3a3a3a;
  padding:8px 0 6px; border-bottom:2px solid rgba(26,26,26,.12);
}
#menu .azR{
  display:grid; grid-template-columns:34px minmax(0,1fr) auto 108px; align-items:center; gap:10px;
  padding:8px 0; border-bottom:2px solid rgba(26,26,26,.12);
}
#menu .azR:last-child{ border-bottom:0; }
#menu .azR img{ width:30px; height:30px; image-rendering:pixelated; }
#menu .azR .azNome{ display:flex; flex-direction:column; min-width:0; font-family:'Nunito Sans', system-ui, sans-serif; }
#menu .azR .azNome span{ font-size:14px; font-weight:800; color:#1a1a1a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#menu .azR .azNome small{ font-size:11px; color:#3a3a3a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#menu .azR .azCas{ display:flex; align-items:center; gap:6px; }
#menu .azR .azUnita{ font-family:'Press Start 2P', 'Courier New', monospace; font-size:8px; color:#3a3a3a; text-transform:uppercase; }
#menu .azR input.num{
  width:96px; height:36px; padding:0 8px;
  font-family:'Press Start 2P', 'Courier New', monospace; font-size:10px;
  text-align:right; color:#1a1a1a; background:#ece8dd;
  border:3px solid #1a1a1a; border-radius:0; outline:none;
  -moz-appearance:textfield; appearance:textfield;
}
#menu .azR input.num::-webkit-outer-spin-button, #menu .azR input.num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#menu .azR input.num:focus{ box-shadow:0 0 0 3px #FFD23C; }
#menu .azR .evento{ flex:none; height:36px; padding:0 6px; font-size:8px; box-shadow:0 3px 0 #1a1a1a; }
#menu .azR .evento:active{ transform:translateY(3px); box-shadow:none; }
#menu .fondo{ margin-top:4px; }

/* Il titolo di sezione: pixelato, piccolo, nero. */
#menu h2{
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:11px; font-weight:400;
  letter-spacing:.04em; text-transform:uppercase;
  color:#1a1a1a;
  margin:22px 0 10px 0;
}
#menu h2:first-of-type{ margin-top:0; }

/* La riga: etichetta a sinistra, controllo a larghezza FISSA a destra. */
#menu .riga{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:7px 0; font-size:14px; color:#1a1a1a;
  font-family:'Nunito Sans', system-ui, sans-serif;
}
#menu .riga label{ flex:1 1 auto; font-weight:700; min-width:0; }
/* la casella del numero: pixelata, squadrata, scritta a destra */
#menu .riga input.num{
  flex:0 0 132px; width:132px; height:40px; padding:0 10px;
  font-family:'Press Start 2P', 'Courier New', monospace; font-size:11px;
  text-align:right; color:#1a1a1a; background:#f4f1ea;
  border:3px solid #1a1a1a; border-radius:0; outline:none;
  -moz-appearance:textfield; appearance:textfield;
}
#menu .riga input.num::-webkit-outer-spin-button,
#menu .riga input.num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#menu .riga input.num:focus{ box-shadow:0 0 0 3px #FFD23C; }
/* il volume: l'unica linea trascinabile, fatta a mano — binario
   squadrato avorio col bordo nero, cursore quadrato nero */
#menu .riga input.scorri{
  flex:0 0 170px; width:170px; height:24px; margin:0; padding:0;
  -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer;
}
#menu .riga input.scorri::-webkit-slider-runnable-track{ height:12px; background:#f4f1ea; border:3px solid #1a1a1a; border-radius:0; }
#menu .riga input.scorri::-moz-range-track{ height:6px; background:#f4f1ea; border:3px solid #1a1a1a; border-radius:0; }
#menu .riga input.scorri::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:24px; margin-top:-9px;
  background:#1a1a1a; border:3px solid #f4f1ea; box-shadow:0 0 0 3px #1a1a1a; border-radius:0;
}
#menu .riga input.scorri::-moz-range-thumb{
  width:10px; height:18px; background:#1a1a1a; border:3px solid #f4f1ea; box-shadow:0 0 0 3px #1a1a1a; border-radius:0;
}
#menu .riga input.scorri:focus-visible{ outline:3px solid #FFD23C; outline-offset:2px; }
#menu .riga .val{
  flex:0 0 56px; text-align:right;
  font-family:'Press Start 2P', 'Courier New', monospace; font-size:11px; color:#1a1a1a;
}
/* la barra per scorrere la scheda: squadrata, nero su avorio */
#menu{ scrollbar-width:auto; scrollbar-color:#1a1a1a #f4f1ea; }
#menu::-webkit-scrollbar{ width:20px; }
#menu::-webkit-scrollbar-track{ background:#f4f1ea; border-left:4px solid #1a1a1a; }
#menu::-webkit-scrollbar-thumb{ background:#1a1a1a; border:4px solid #f4f1ea; border-left-width:8px; border-radius:0; }
#menu::-webkit-scrollbar-button{ display:none; height:0; }

/* le schede delle otto azioni: riquadro stretto a sinistra, tasto
   Evento a lato */
#menu .azRiga{ display:flex; align-items:stretch; gap:10px; margin-bottom:10px; }
#menu .azRiga .az{ flex:1 1 auto; margin-bottom:0; min-width:0; }
#menu .evento{
  flex:0 0 132px; cursor:pointer; padding:0 8px;
  font-family:'Press Start 2P', 'Courier New', monospace; font-size:10px; line-height:1.3; text-transform:uppercase;
  color:#1a1a1a; background:#f4f1ea; border:3px solid #1a1a1a; border-radius:0;
  box-shadow:0 4px 0 #1a1a1a;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
#menu .evento:hover{ background:#e2ded3; }
#menu .evento:active{ transform:translateY(4px); box-shadow:none; }

/* 🎛️ la finestrella Evento: sopra la scheda, stesso stile */
#evento{
  position:fixed; z-index:40; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(440px, 92vw); padding:20px 22px 22px;
  color:#1a1a1a; background:#ece8dd;
  border:4px solid #1a1a1a; border-radius:0;
  box-shadow: 0 8px 0 #1a1a1a, 0 8px 0 4px #ece8dd;
  animation:menu-in .14s steps(3);
}
#evento h3{
  margin:6px 56px 10px 0; font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:11px; font-weight:400; text-transform:uppercase; letter-spacing:.04em; line-height:1.5;
}
#evento .mChiudi{
  position:absolute; top:-4px; right:-4px;
  width:44px; height:44px; padding:0; cursor:pointer;
  display:grid; place-items:center;
  font-family:'Press Start 2P', 'Courier New', monospace; font-size:18px; line-height:1;
  color:#1a1a1a; background:#f4f1ea;
  border:4px solid #1a1a1a; border-radius:0;
  box-shadow: 0 4px 0 #1a1a1a;
}
#evento .mChiudi:active{ transform:translateY(4px); box-shadow:none; }
#evento .nota{ font-family:'Nunito Sans', system-ui, sans-serif; font-size:12.5px; line-height:1.55; color:#3a3a3a; margin-bottom:12px; }
#evento .prove{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }
#evento .prove[hidden]{ display:none; }   /* per le vittorie: solo il regalo */
#evento .prova{
  width:100%; padding:14px 6px; border-radius:0; cursor:pointer;
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:10px; line-height:1.3; text-transform:uppercase;
  color:#1a1a1a; background:#f4f1ea; border:3px solid #1a1a1a;
  box-shadow:0 4px 0 #1a1a1a;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
#evento .prova:hover{ background:#e2ded3; }
#evento .prova:active{ transform:translateY(4px); box-shadow:none; }
#evento .prova.scelto{ background:#1a1a1a; color:#ffffff; }
/* le sezioni sotto (Regalo / Like): la finestrella si allunga da sola */
#evento h4{
  margin:18px 0 8px; font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:10px; font-weight:400; text-transform:uppercase; letter-spacing:.04em;
}
#evento .evScegli{
  display:flex; align-items:center; gap:10px; width:100%; padding:10px 12px; cursor:pointer;
  font-family:'Press Start 2P', 'Courier New', monospace; font-size:10px; line-height:1.3; text-align:left;
  color:#1a1a1a; background:#f4f1ea; border:3px solid #1a1a1a; border-radius:0;
  box-shadow:0 4px 0 #1a1a1a;
}
#evento .evScegli img{ image-rendering:pixelated; flex:0 0 28px; }
#evento .evScegli:active{ transform:translateY(4px); box-shadow:none; }
#evento .evLista[hidden]{ display:none; }
#evento .evLista{ margin-top:10px; border:3px solid #1a1a1a; background:#f4f1ea; }
#evento .evCerca{
  width:100%; height:38px; padding:0 10px; box-sizing:border-box;
  font-family:'Press Start 2P', 'Courier New', monospace; font-size:10px;
  color:#1a1a1a; background:#ece8dd; border:0; border-bottom:3px solid #1a1a1a; border-radius:0; outline:none;
}
#evento .evVoci{ max-height:240px; overflow-y:auto; scrollbar-width:auto; scrollbar-color:#1a1a1a #f4f1ea; }
#evento .evVoci::-webkit-scrollbar{ width:16px; }
#evento .evVoci::-webkit-scrollbar-track{ background:#f4f1ea; border-left:3px solid #1a1a1a; }
#evento .evVoci::-webkit-scrollbar-thumb{ background:#1a1a1a; border:3px solid #f4f1ea; border-left-width:6px; }
#evento .evVoce{
  display:flex; align-items:center; gap:10px; width:100%; padding:8px 10px; cursor:pointer; text-align:left;
  font-family:'Nunito Sans', system-ui, sans-serif; font-size:13px; font-weight:700;
  color:#1a1a1a; background:transparent; border:0; border-bottom:2px solid rgba(26,26,26,.15);
}
#evento .evVoce img{ image-rendering:pixelated; flex:0 0 24px; }
#evento .evVoce span{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#evento .evVoce small{ font-family:'Press Start 2P', 'Courier New', monospace; font-size:8px; color:#3a3a3a; }
#evento .evVoce:hover{ background:#e2ded3; }
#evento .evVoce.scelto{ background:#1a1a1a; color:#fff; }
#evento .evVoce.usato{ opacity:.45; cursor:not-allowed; }   /* regalo gia' su un'altra voce: bloccato, con scritto chi lo usa */
#evento .evVoce.scelto small{ color:#ddd; }
#evento .riga{
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:4px 0;
  font-family:'Nunito Sans', system-ui, sans-serif; font-size:14px; font-weight:700; color:#1a1a1a;
}
#evento .riga input.num{
  flex:0 0 132px; width:132px; height:40px; padding:0 10px;
  font-family:'Press Start 2P', 'Courier New', monospace; font-size:11px;
  text-align:right; color:#1a1a1a; background:#f4f1ea;
  border:3px solid #1a1a1a; border-radius:0; outline:none;
  -moz-appearance:textfield; appearance:textfield;
}
#evento .riga input.num::-webkit-outer-spin-button,
#evento .riga input.num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
#evento{ max-height:88vh; overflow-y:auto; }

/* le schede delle otto azioni: riquadri col bordo nero da 3 */
#menu .az{
  border:3px solid #1a1a1a; border-radius:0;
  padding:11px 13px; margin-bottom:10px;
  background:#f4f1ea;
}
#menu .az.pos{ background:#e3f3e6; }
#menu .az.neg{ background:#f6e3e5; }
#menu .az .azT{
  display:flex; align-items:center; gap:8px; margin-bottom:5px;
  font-family:'Nunito Sans', system-ui, sans-serif; font-size:15px; font-weight:800;
}
#menu .az .azT .liv{
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:8px; letter-spacing:.05em;
  padding:4px 7px; border-radius:0;
  background:#1a1a1a; color:#ffffff;
}

/* i tasti a griglia: prove, cieli, stili delle colonne — piccoli tasti
   bianchi squadrati; quello scelto è invertito, nero con scritta bianca */
#menu .prove{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
#menu .prova{
  width:100%; padding:12px 8px; border-radius:0; cursor:pointer;
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:10px; line-height:1.3; letter-spacing:.02em; text-transform:uppercase;
  color:#1a1a1a; background:#f4f1ea; border:3px solid #1a1a1a;
  box-shadow:0 4px 0 #1a1a1a;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
#menu .prova:hover{ background:#e2ded3; }
#menu .prova:active{ transform:translateY(4px); box-shadow:none; }
#menu .prova.pos{ background:#e3f3e6; }
#menu .prova.neg{ background:#f6e3e5; }
#menu .prova.scelto{ background:#1a1a1a; color:#ffffff; }

#menu .dentro{ margin-top:22px; }   /* il primo h2 li' dentro ha margin-top 0 (first-of-type): l'aria la da' il contenitore */
#menu .nota{ font-family:'Nunito Sans', system-ui, sans-serif; font-size:12.5px; line-height:1.55; color:#3a3a3a; margin-top:8px; }

#menu .fondo{ display:flex; gap:10px; margin-top:20px; }
#menu .fondo button{
  flex:1; padding:13px 8px; border-radius:0; cursor:pointer;
  font-family:'Press Start 2P', 'Courier New', monospace; font-size:10px; text-transform:uppercase;
  color:#1a1a1a; background:#f4f1ea; border:3px solid #1a1a1a;
  box-shadow:0 4px 0 #1a1a1a;
  transition: transform .06s steps(2), box-shadow .06s steps(2);
}
#menu .fondo button:hover{ background:#e2ded3; }
#menu .fondo button:active{ transform:translateY(4px); box-shadow:none; }
/* "Azzera il contatore" e' il tasto distruttivo: solo bordo e scritta rossi */
#menu .fondo button:first-child{ border-color:#c8102e; color:#c8102e; box-shadow:0 4px 0 #c8102e; }
#menu .fondo button:first-child:hover{ background:#f6e3e5; }

/* ---------- lo stato del collegamento alla diretta ---------- */
/* 📡 LO STATO DELLA DIRETTA: in alto a destra, pixelato come i tasti.
   Rombo luminoso: verde "In diretta", rosso "Non in diretta", grigio
   mentre si collega / se serve accedere / a diretta finita. */
#stato{
  position:fixed; z-index:10;
  top:  max(12px, env(safe-area-inset-top));
  right:max(12px, env(safe-area-inset-right));
  display:flex; align-items:center; gap:12px;
  height:52px; padding:0 16px;
  font-family:'Press Start 2P', 'Courier New', monospace;
  font-size:11px; line-height:1; text-transform:uppercase; letter-spacing:.02em;
  color:#1a1a1a; background:#f4f1ea;
  border:4px solid #1a1a1a; border-radius:0;
  box-shadow: 0 5px 0 #1a1a1a;
}
#stato .rombo{
  width:12px; height:12px; flex:0 0 12px;
  transform:rotate(45deg);
  background:#8a8a8a; border:2px solid #1a1a1a;
  box-shadow:0 0 0 2px rgba(138,138,138,.35);
}
#stato.on  .rombo{ background:#3BE08A; box-shadow:0 0 0 3px rgba(59,224,138,.45), 0 0 10px 2px rgba(59,224,138,.8); animation:rombo-pulsa 1.2s steps(2) infinite; }
#stato.off .rombo{ background:#FF3B57; box-shadow:0 0 0 3px rgba(255,59,87,.45),  0 0 10px 2px rgba(255,59,87,.8);  animation:rombo-pulsa 1.2s steps(2) infinite; }
@keyframes rombo-pulsa{ 50%{ box-shadow:0 0 0 2px rgba(0,0,0,0); } }

.noscript{ padding:24px; text-align:center; }

@media (prefers-reduced-motion: reduce){
  #win.su .wNum, #win.giu .wNum, #banda.vai, #festa.vai, #festa .fTxt, #menu.aperto{ animation:none; }
  #festa.vai{ opacity:1; }
}