/* BALLOON ROYALE — la pagina attorno al canvas.
   RIFATTA il 10/10/2026 su quella di Ring Sumo (game/css/ring-sumo.css).
   L'utente: "ti ricordi che abbiamo aggiornato i menu, pulsanti, win,
   punteggio, cerchio, sfondo etc? Ecco, aggiorna anche questo gioco come
   ring-sumo". Quindi, come la':
   - il TABELLONE a fascia: l'orologio in una targa, una meta' per squadra,
     il VS in mezzo, le WIN appese sotto, la riga di chi sta vincendo (prima
     era una barra sola coi punti dentro);
   - la LISTA REGALI in tasselli: ai lati del cerchio, una colonna per
     squadra, o nel carosello sotto (prima due colonnine strette sopra il
     palco, o una riga sopra il cerchio);
   - i TASTI sullo schermo, ai bordi della finestra, con "Azzera WIN" in
     basso a sinistra (prima tutti in un angolo del palco);
   - il MENU e' un cassetto sul lato destro (prima una finestra al centro);
   - le MISURE a mano: lista regali, cerchio e tabellone.
   Restano di questo gioco: i colori di casa (rosso e blu), il VS dentro la
   palla chiodata, le squadre fatte a mano con la loro immagine, lo sfondo
   trasparente per OBS, quanto e' piena la lista regali e quando si vede.
   - i colori in gioco sono DUE, quelli delle squadre: il resto e' nero,
     bianco e il viola di TikForge. L'oro resta alla palla chiodata e a chi
     vince;
   - un carattere solo per tutto quello che si vede in diretta, Luckiest Guy.

   Tutto quello che sta DENTRO #palco e' in pixel del palco verticale
   1080x1920: #palco viene scalato con la stessa trasformazione del canvas
   (balloon-royale.js, misura), cosi' tabellone e lista regali stanno sempre
   attaccati al cerchio. I pannelli stanno sul lato destro della finestra; la
   pillola della diretta e i tasti stanno sullo schermo, ai suoi bordi (vedi
   "sullo schermo"). */
:root {
  --bg: #000000;
  --bg-panel: #100918;
  --bg-panel-2: #150C20;
  --viola: #A855F7;
  --viola2: #7C1FD4;
  --lilla: #D183F8;
  --ink: #F1E7FF;
  --muted: #B6A0CF;
  --line: rgba(214, 190, 245, 0.10);
  /* I colori delle due squadre, coi loro chiari e scuri: li riscrive
     balloon-royale.js (coloriPagina) quando si sceglie una sfida. */
  --left: #FF4A53;
  --left-chiaro: #FFA5A9;
  --left-scuro: #8C292E;
  --right: #4D6BFF;
  --right-chiaro: #A6B5FF;
  --right-scuro: #2A3B8C;
  /* i toni dei tasselli lucidi della lista regali: chiaro, scuro e bordo (il pieno e' il colore stesso) */
  --left-c1: #FF888D; --left-c3: #942B30; --left-cs: #4D1619;
  --right-c1: #8A9DFF; --right-c3: #2D3E94; --right-cs: #17204D;
  --gold: #FFD86B;
  --display: 'Luckiest Guy', system-ui, sans-serif;
  --corpo: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--corpo);
  -webkit-tap-highlight-color: transparent;
}
#gioco { position: fixed; inset: 0; display: block; }
/* Lo sfondo trasparente (per chi mette il gioco sopra la sua scena in OBS):
   il canvas non dipinge il fondo, e sotto non deve esserci il nero della
   pagina. Lo dice balloon-royale.js (data-sfondo). */
html[data-sfondo="trasparente"], html[data-sfondo="trasparente"] body { background: transparent; }
/* il titolo della pagina: c'e' per chi la legge senza vederla, a schermo no */
.solo-lettori { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------ il palco */
#palco {
  position: fixed;
  left: 0; top: 0;
  width: 1080px; height: 1920px;
  transform-origin: 0 0;
  pointer-events: none;
  z-index: 2;
}

/* ------------------------------------------------------------ sullo schermo
   La pillola della diretta, i tasti di chi trasmette e i diritti NON stanno
   nel palco: stanno sullo schermo, come in Ring Sumo e in Color Clash (qui
   fino al 10/10/2026 stavano tutti in un angolo del palco, in basso a
   destra). L'utente, 09/10/2026, per Color Clash, con le foto di
   1 Vs 1 Battle: "metti i tasti per bene in fondo allo schermo e non
   concentrare tutto in mezzo", e poi, coi quattro angoli cerchiati:
   "prendi proprio dalla foto le posizione, grandezze etc. e' 1vs1 battle
   puoi vedere com'e' fatto".
   - finestra LARGA (data-schermo="largo": a lato del palco ci sta il
     tasto, lo dice balloon-royale.js in misura): tutto come in 1 Vs 1 Battle
     (game/css/1vs1-battle.css), con le stesse misure: la pillola
     nell'angolo in alto a sinistra, i tasti tondi in colonna in alto a
     destra, i diritti in basso a destra. Il tasto della partita, che la'
     non c'e', in basso a destra sopra i diritti. --v e' l'unita' di
     quel gioco (un centesimo della finestra, fra 2.6 e 8 pixel);
   - finestra STRETTA come la diretta (verticale): ai lati non c'e' niente,
     e a meta' a sinistra c'e' il campo. Li' stanno sopra il palco, dov'e'
     vuoto: la pillola in alto a sinistra, i tasti nell'angolo in basso a
     destra, i diritti in basso a sinistra (--ox e --oy dicono dove
     comincia il palco, --u e' un suo pixel).
   Restano SEMPRE in vista. Prima sparivano col mouse fermo e tornavano a
   muoverlo; l'utente: "rimuovi assolutamente che se muove riappare tutto.
   non c'e' bisogno dato che e' nascosto nella live perche' solo la parte
   in centro si mostra". Non rimetterlo. Finche' il gioco non ha misurato
   la finestra non si vedono: sarebbero fuori misura. */
body:not([data-schermo]) .live-dot, body:not([data-schermo]) .plancia, body:not([data-schermo]) .copyright, body:not([data-schermo]) .azzera-win { visibility: hidden; }
body[data-schermo="largo"] { --icona: clamp(34px, calc(var(--v) * 9.4), 44px); --bordo: clamp(10px, calc(var(--v) * 3), 20px); }

/* La pillola della diretta: verde in diretta, grigia senza, ambra se non si
   e' entrati (data-live sul body). Con la finestra stretta sta sopra il
   palco, nel posto libero sopra il nome della squadra di sinistra: non deve
   arrivare all'orologio (che comincia a 380) ne' al nome (a 74). La scritta
   lunga va su due righe. */
.live-dot {
  position: fixed; z-index: 3; left: calc(var(--ox, 0px) + calc(22 * var(--u))); top: calc(var(--oy, 0px) + calc(12 * var(--u))); max-width: calc(350 * var(--u)); box-sizing: border-box;
  display: flex; align-items: center; gap: calc(10 * var(--u));
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(6 * var(--u)); border-radius: calc(22 * var(--u));
  background: rgba(10, 6, 20, 0.7); border: max(1px, calc(2 * var(--u))) solid rgba(255, 255, 255, 0.12);
  font: 400 calc(19 * var(--u))/1.08 var(--display); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
  margin: 0; pointer-events: none;
}
.live-dot::before { content: ""; width: calc(18 * var(--u)); height: calc(18 * var(--u)); border-radius: 50%; background: #6B6280; flex: none; }
[data-schermo="largo"] .live-dot {
  left: var(--bordo); top: clamp(8px, calc(var(--v) * 2.4), 16px); max-width: none;
  gap: 8px; padding: 6px 12px 5px; border-radius: 999px;
  background: rgba(10, 5, 18, 0.55); border: 1px solid rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  font: 400 13.5px/1.5 var(--display); letter-spacing: 0.08em; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
[data-schermo="largo"] .live-dot::before { width: 10px; height: 10px; }
.live-dot span { display: none; }
[data-live="on"] .live-dot::before { background: #22C55E; box-shadow: 0 0 10px #22C55E; }
[data-live="on"] .live-dot .s-on { display: inline; color: #86EFAC; }
[data-live="off"] .live-dot .s-off { display: inline; }
[data-live="login"] .live-dot::before { background: #FFB020; }
[data-live="login"] .live-dot .s-login { display: inline; color: #FFB020; }
/* la simulazione di una diretta (scheda Prova): si deve vedere che e' finta */
body[data-sim="1"] .live-dot span:not(.s-sim) { display: none; }
body[data-sim="1"] .live-dot .s-sim { display: inline; color: var(--lilla); }
body[data-sim="1"] .live-dot::before { background: var(--lilla); box-shadow: 0 0 10px var(--lilla); }

/* LA PLANCIA: i comandi di chi trasmette. I quattro tasti tondi
   (impostazioni, pausa, suono, schermo intero) e il tasto della partita.
   Con la finestra larga i tondi stanno in colonna nell'angolo in alto a
   destra dello schermo, come in 1 Vs 1 Battle, e il tasto nell'angolo in
   basso a destra, sopra i diritti. Con la finestra stretta stanno insieme
   nell'angolo in basso a destra del palco, i tondi in fila e il tasto
   sotto, largo quanto loro: li' il palco e' vuoto, gli ultimi doni stanno
   a sinistra. */
.hud-tools {
  position: fixed; z-index: 3; right: calc(var(--ox, 0px) + calc(24 * var(--u))); bottom: calc(var(--oy, 0px) + calc(122 * var(--u))); width: calc(332 * var(--u));
  display: flex; justify-content: space-between;
}
[data-schermo="largo"] .hud-tools { right: var(--bordo); top: var(--bordo); bottom: auto; width: auto; flex-direction: column; justify-content: flex-start; gap: clamp(6px, calc(var(--v) * 1.8), 10px); }
.icon-btn {
  width: calc(74 * var(--u)); height: calc(74 * var(--u)); border-radius: 50%;
  background: rgba(10, 6, 20, 0.75); border: max(1px, calc(2 * var(--u))) solid rgba(255, 255, 255, 0.14);
  color: var(--ink);
  display: grid; place-items: center;
  cursor: pointer; pointer-events: auto;
  transition: border-color .2s ease, transform .15s ease, color .2s ease;
}
.icon-btn:hover { border-color: var(--viola); color: #fff; transform: translateY(-2px); }
.icon-btn:active { transform: scale(.93); }
.icon-btn svg { width: 56%; height: 56%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
[data-schermo="largo"] .icon-btn {
  width: var(--icona); height: var(--icona);
  background: rgba(16, 9, 24, 0.66); border: 1px solid rgba(214, 190, 245, 0.08);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
[data-schermo="largo"] .icon-btn:hover { border-color: var(--viola); transform: translateY(-1px); }
[data-schermo="largo"] .icon-btn svg { width: 58%; height: 58%; }
.icon-btn svg .ico-fill { fill: currentColor; stroke: none; }
#muto .ico-off, #pausa .ico-off { display: none; }
#muto[aria-pressed="true"] { color: var(--muted); }
#muto[aria-pressed="true"] .ico-on, #pausa[aria-pressed="true"] .ico-on { display: none; }
#muto[aria-pressed="true"] .ico-off, #pausa[aria-pressed="true"] .ico-off { display: block; }
/* in pausa il tasto resta acceso: e' quello che la toglie */
#pausa[aria-pressed="true"] { border-color: var(--viola); background: var(--viola2); color: #fff; }

/* I diritti stanno sullo schermo: con la finestra larga nell'angolo in
   basso a destra, come in 1 Vs 1 Battle; con quella stretta in basso a
   sinistra, sopra il palco. La scritta del sito che stava ferma li' sopra,
   sotto il carosello, l'utente l'ha fatta togliere (09/10/2026): il nome di
   TikForge e' quello che compare e scompare in mezzo al cerchio (lo disegna
   balloon-royale.js: fattoMarchio, marchioVisto). */
/* LE WIN A ZERO, in basso a sinistra (l'utente, 10/10/2026: "in basso a
   sinistra, aggiungi la possibilita' di resettare le win"), come la
   scorciatoia di 1 Vs 1 Battle e come in Ring Sumo. Con la finestra stretta sta sopra i diritti
   e sotto gli ultimi doni; con quella larga nell'angolo dello schermo. Al
   primo tocco diventa rosso e chiede "Sicuro?" (.armato, lo mette
   balloon-royale-diretta.js): il secondo, entro tre secondi, azzera. */
.azzera-win {
  position: fixed; z-index: 3; left: calc(var(--ox, 0px) + calc(28 * var(--u))); bottom: calc(var(--oy, 0px) + calc(48 * var(--u))); margin: 0;
  display: inline-flex; align-items: center;
  padding: calc(8 * var(--u)) calc(16 * var(--u)) calc(7 * var(--u)); border-radius: calc(18 * var(--u));
  border: max(1px, calc(2 * var(--u))) solid rgba(255, 255, 255, 0.16); background: rgba(10, 6, 20, 0.72); color: var(--muted);
  font: 800 calc(17 * var(--u))/1 var(--corpo); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap;
  cursor: pointer; pointer-events: auto;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
[data-schermo="largo"] .azzera-win { left: var(--bordo); bottom: var(--bordo); padding: 8px 14px 7px; border-radius: 999px; border-width: 1px; font-size: clamp(10.5px, calc(var(--v) * 2.8), 12.5px); }
.azzera-win:hover { border-color: #E2453A; background: rgba(226, 69, 58, 0.22); color: var(--ink); }
.azzera-win .aw-sicuro { display: none; }
.azzera-win.armato, .azzera-win.armato:hover { border-color: #E2453A; background: #E2453A; color: #fff; animation: aw-armato .7s ease-out infinite; }
.azzera-win.armato .aw-chiedi { display: none; }
.azzera-win.armato .aw-sicuro { display: inline; }
@keyframes aw-armato { from { box-shadow: 0 0 0 0 rgba(226, 69, 58, 0.55); } to { box-shadow: 0 0 0 10px rgba(226, 69, 58, 0); } }
@media (prefers-reduced-motion: reduce) { .azzera-win.armato { animation: none; } }
.copyright {
  position: fixed; z-index: 3; left: calc(var(--ox, 0px) + calc(30 * var(--u))); bottom: calc(var(--oy, 0px) + calc(22 * var(--u))); margin: 0;
  font-size: calc(18 * var(--u)); font-weight: 700; color: var(--ink); opacity: .7;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  pointer-events: none; user-select: none;
}
[data-schermo="largo"] .copyright { left: auto; right: 10px; bottom: 6px; font-size: clamp(12px, calc(var(--v) * 3), 15px); line-height: 1.5; opacity: .85; }

/* ------------------------------------------------------------ il tabellone
   Sopra il cerchio, fatto come il tabellone di una gara, PULITO: pochi
   pezzi, colori pieni, fili sottili chiari, ombre scure e morbide sotto.
   Niente contorni neri spessi, niente righe, niente lucido. E' quello di
   Ring Sumo, portato qui il 10/10/2026 ("aggiorna anche questo gioco come
   ring-sumo"): prima c'era una barra sola, coi punti dentro.
   La storia, di la'. L'utente, 10/10/2026, mostrando la parte alta del gioco di
   altri: "ora creane una SIMILE MA NON UGUALE SENNO' CI DENUNCIANO... Come lo
   abbiamo noi e' piu' soft". La prima versione era a fumetto (bordi neri
   grossi, fasce lucide a righe); lo stesso giorno, rivedendo quel gioco:
   "loro lo hanno semplice vedi? vorrei una cosa simile. anche per quanto
   riguarda la parte superiore con timer, win etc". Da qui questa.
   Di quel gioco resta LO SCHEMA, che e' di ogni tabellone: l'orologio in
   alto, una meta' per squadra, il VS in mezzo, le vittorie sotto, una riga
   che dice chi sta vincendo. Forme e disegni sono nostri e NON vanno
   avvicinati ai loro: niente stemmi a sei lati con la lettera, niente
   corona sul VS, niente pillole per le vittorie, niente punto luminoso
   sulla riga, niente cornice accesa attorno all'orologio, niente righe
   oblique sulla fascia, niente aloni di luce.
   Dall'alto: L'OROLOGIO in una targa che pende, coi NOMI ai lati; LA
   FASCIA, una meta' per squadra tagliata di sbieco, con lo stemma a ogni
   capo, i punti verso il centro e il VS in mezzo dentro la palla chiodata
   che gira (e' il gioco); le WIN appese sotto; in fondo LA RIGA: quanta
   parte dei punti ha ogni squadra, col suo segno. */
.tabellone { position: absolute; left: 0; top: 0; width: 1080px; height: 380px; font-family: var(--display); --sbieco: -10deg; --vetro: #1B1132; --filo: rgba(255, 255, 255, 0.22); }
/* quanto e' grande lo sceglie chi trasmette (--tab, da balloon-royale.js: misure): cresce e cala dall'alto, al centro */
.tabellone { transform: scale(var(--tab, 1)); transform-origin: 50% 0; }
.tabellone .sx { --c: var(--left); --c-chiaro: var(--left-chiaro); --c-scuro: var(--left-scuro); --c3: var(--left-c3); }
.tabellone .dx { --c: var(--right); --c-chiaro: var(--right-chiaro); --c-scuro: var(--right-scuro); --c3: var(--right-c3); }

/* L'OROLOGIO: quanto manca, in una targa scura piu' larga in alto che in
   basso, con un filo chiaro attorno. Il filo e la targa sono due sagome una
   dentro l'altra (un ritaglio non ha bordo); l'ombra sta su chi le contiene,
   se no il ritaglio la taglierebbe. Le cifre hanno tutte la stessa larghezza
   (ognuna nel suo span: le mette balloon-royale.js), se no a ogni secondo il
   numero ballerebbe. */
.tb-ora { position: absolute; left: 50%; top: 10px; width: 296px; height: 104px; margin-left: -148px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.4)); }
.tb-ora::before { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.34); clip-path: polygon(0 0, 100% 0, calc(100% - 32px) 100%, 32px 100%); }
.tb-ora::after { content: ""; position: absolute; left: 5px; right: 5px; top: 3px; bottom: 3px; background: linear-gradient(180deg, #281A48, #160D2A); clip-path: polygon(0 0, 100% 0, calc(100% - 31px) 100%, 31px 100%); }
.tb-tempo {
  position: relative; z-index: 1; margin: 0; padding-top: 10px;
  text-align: center; white-space: nowrap;
  font: 400 78px/96px var(--display); color: #fff;
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.tb-tempo span { display: inline-block; width: 0.6em; text-align: center; }
.tb-tempo span.dp { width: 0.3em; }
/* Gli ultimi dieci secondi: rosso, e batte. */
.tabellone.ultimi .tb-tempo { color: #FF6B6B; animation: tb-batte 1s ease-out infinite; }
/* Tempo scaduto: 0:00 resta rosso, fermo, senza altre scritte, finche' chi
   trasmette non chiude la partita. */
.tabellone.oltre .tb-tempo { color: #FF6B6B; }
@keyframes tb-batte { 0% { transform: scale(1.16); } 100% { transform: scale(1); } }

/* I NOMI: ai lati dell'orologio, sopra la fascia, nel chiaro del colore
   della squadra. Niente targa: sul fondo scuro si leggono da soli. Quanto
   e' grande il nome lo decide balloon-royale.js (aggiornaTesta): il piu' grande
   che ci sta. */
.tb-nome {
  position: absolute; z-index: 0; top: 78px; width: 330px; height: 48px; margin: 0; padding: 0 4px; box-sizing: border-box;
  font: 400 36px/50px var(--display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--c-chiaro);
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.4);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tb-nome.sx { left: 46px; text-align: left; }
.tb-nome.dx { right: 46px; text-align: right; }

/* LA FASCIA: due meta' del colore delle squadre, piene, appena piu' scure
   in basso, storte dalla stessa parte: il taglio in mezzo e' di sbieco. Un
   filo di luce in alto, l'ombra sotto. Verso il centro ogni meta' si
   scurisce: i punti, bianchi, si leggono su qualunque colore. */
.tb-fascia { position: absolute; z-index: 2; left: 34px; right: 34px; top: 130px; height: 106px; }
.tb-meta { position: absolute; top: 0; bottom: 0; width: 50%; }
.tb-meta.sx { left: 0; }
.tb-meta.dx { right: 0; }
.tb-meta::before, .tb-meta::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; box-sizing: border-box; transform: skewX(var(--sbieco)); }
.tb-meta::before { background: linear-gradient(180deg, var(--c) 0%, var(--c) 42%, var(--c3) 150%); box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.3), 0 12px 20px rgba(0, 0, 0, 0.38); }
.tb-meta.sx::before, .tb-meta.sx::after { border-radius: 18px 0 0 18px; }
.tb-meta.dx::before, .tb-meta.dx::after { border-radius: 0 18px 18px 0; }
.tb-meta.sx::after { background: linear-gradient(90deg, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.34)); }
.tb-meta.dx::after { background: linear-gradient(270deg, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.34)); }
/* LO STEMMA, a ogni capo: una pallina, un anello bianco col punto in mezzo.
   Con una sfida di 1 Vs 1 Battle al suo posto c'e' il logo della squadra (i
   PNG di game/1vs1-battle/), libero e piu' grande del tondo (.logo). Una
   FOTO (l'MVP della squadra nella Sfida tra MVP, o l'immagine caricata da
   chi trasmette per la squadra sua) riempie il tondo, che tiene il bordo
   bianco (.foto). Quale dei tre lo dice balloon-royale.js (aggiornaTesta). */
.tb-stemma {
  position: absolute; z-index: 1; top: 50%; width: 70px; height: 70px; margin-top: -35px; box-sizing: border-box;
  border-radius: 50%; border: 5px solid #fff;
  background: rgba(0, 0, 0, 0.32);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
.tb-stemma::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: #fff; }
.tb-meta.sx .tb-stemma { left: 34px; }
.tb-meta.dx .tb-stemma { right: 34px; }
.tb-logo { position: absolute; left: -17px; top: -19px; width: 94px; height: 94px; object-fit: contain; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.5)); }
.tb-logo[hidden] { display: none; }
.tb-stemma.logo { background: none; border-color: transparent; box-shadow: none; }
.tb-stemma.logo::after, .tb-stemma.foto::after { display: none; }
.tb-stemma.foto { overflow: hidden; }
.tb-stemma.foto .tb-logo { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; filter: none; }
/* I PUNTI: le palline scoppiate, che sono punti per la loro squadra. Grandi,
   ai lati del VS; coi numeri lunghi balloon-royale.js li scrive piu' piccoli. */
.tb-pc {
  position: absolute; z-index: 1; top: 0; bottom: 0;
  display: flex; align-items: center; padding-top: 12px;
  font: 400 88px/1 var(--display); color: #fff;
  text-shadow: 0 5px 0 rgba(0, 0, 0, 0.3);
}
.tb-meta.sx .tb-pc { right: 88px; transform-origin: 100% 55%; }
.tb-meta.dx .tb-pc { left: 88px; transform-origin: 0 55%; }
/* IL VS, in mezzo: un tondo scuro e, dentro, la palla chiodata che gira
   attorno alla scritta: un anello con le sue dieci punte. E' il gioco, in
   piccolo (in Ring Sumo, al suo posto, c'e' il cerchio di corda con
   l'apertura). */
.tb-vs {
  position: absolute; z-index: 2; left: 50%; top: 50%; width: 126px; height: 126px; margin: -63px 0 0 -63px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 4px solid rgba(255, 255, 255, 0.3);
  background: var(--vetro);
  box-shadow: 0 10px 18px rgba(0, 0, 0, 0.45);
}
.tb-anello { position: absolute; left: 3px; top: 3px; width: calc(100% - 6px); height: calc(100% - 6px); animation: tb-gira 9s linear infinite; }
.tb-giro { fill: none; stroke: #FFFFFF; stroke-width: 5; }
.tb-punte { fill: #FFFFFF; }
.tb-vs b { position: relative; padding-top: 7px; font: 400 40px/1 var(--display); letter-spacing: 0.02em; color: #fff; }
@keyframes tb-gira { to { transform: rotate(360deg); } }

/* LE WIN: una linguetta scura per squadra, appesa sotto la fascia (comincia
   dietro di lei), col filo chiaro. E' a WIN che si vince. */
.tb-wins {
  position: absolute; z-index: 1; top: 228px; height: 62px; margin: 0; padding: 17px 26px 0; box-sizing: border-box;
  font: 400 32px/42px var(--display); letter-spacing: 0.04em; color: var(--c-chiaro); white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.tb-wins::before {
  content: ""; position: absolute; z-index: -1; left: 5px; right: 5px; top: 0; bottom: 0; box-sizing: border-box;
  transform: skewX(var(--sbieco));
  background: var(--vetro);
  border: 3px solid var(--filo); border-top: 0; border-radius: 0 0 14px 14px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.3);
}
.tb-wins.sx { left: 66px; transform-origin: 0 60%; }
.tb-wins.dx { right: 66px; transform-origin: 100% 60%; }
/* Il numero e' bianco, la scritta WIN del colore della squadra. L'oro che
   aveva quando la squadra ne aveva all'utente non e' piaciuto (09/10/2026):
   non rimetterlo. */
.tb-wins b { font-weight: 400; color: #fff; }
/* Le WIN SOTTO ZERO (il regalo che le toglie le toglie anche a chi non ne
   ha): rosse, il numero e la scritta. */
.tb-wins.meno, .tb-wins.meno b { color: #FF3B4E; }
/* Le WIN che salgono: il numero fa un salto. */
.tb-wins.su { animation: tb-su .4s cubic-bezier(.2, 1.6, .4, 1); }
/* i punti che salgono (palline scoppiate): il numero nella fascia fa lo stesso salto */
.tb-pc.su { animation: tb-su .4s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes tb-su { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* IL CONTO DA PAGARE: una targhetta appesa sotto la squadra a cui un regalo
   degli avversari ("-50") deve ancora togliere palline. Dice quante ne
   mancano ("−37" e una pallina del colore della squadra), col bordo del
   colore di chi l'ha mandato. Sta verso il centro, accanto al VS: le WIN,
   che stanno ai lati, possono allungarsi senza toccarla. La accende e la
   spegne balloon-royale.js (aggiornaTesta); a ogni pallina presa fa il salto
   dei numeri. Come le WIN: niente aloni. */
.tb-debito {
  position: absolute; z-index: 1; top: 228px; height: 60px; margin: 0; padding: 14px 22px 0; box-sizing: border-box;
  display: flex; align-items: flex-start; gap: 9px;
  font: 400 32px/42px var(--display); letter-spacing: 0.04em; color: #fff; white-space: nowrap;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.45);
}
.tb-debito[hidden] { display: none; }
.tb-debito::before {
  content: ""; position: absolute; z-index: -1; left: 5px; right: 5px; top: 0; bottom: 0; box-sizing: border-box;
  transform: skewX(var(--sbieco));
  background: var(--vetro);
  border: 3px solid var(--avv); border-top: 0; border-radius: 0 0 14px 14px;
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.3);
}
.tb-debito.sx { right: 626px; --avv: var(--right); transform-origin: 100% 60%; }
.tb-debito.dx { left: 626px; --avv: var(--left); transform-origin: 0 60%; }
.tb-debito b { font-weight: 400; }
.tb-debito i {
  flex: none; box-sizing: border-box; width: 30px; height: 30px; margin-top: 5px; border-radius: 50%; border: 3px solid var(--c-scuro);
  background: radial-gradient(circle at 50% 50%, #fff 0 30%, var(--c) 36% 100%);
}
.tb-debito.su { animation: tb-su .4s cubic-bezier(.2, 1.6, .4, 1); }

/* LA RIGA, in fondo: sottile, del colore della squadra di sinistra per la
   parte dei punti che ha, e del colore di quella di destra per il resto.
   Quanto e' larga la parte di sinistra lo decide balloon-royale.js
   (aggiornaTesta), qui si sposta piano. Il segno e' un rombo bianco. */
.tb-barra {
  position: absolute; left: 60px; right: 60px; top: 318px; height: 14px; box-sizing: border-box;
  background: var(--right);
  border-radius: 7px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.35);
}
.tb-quota {
  position: absolute; left: 0; top: 0; bottom: 0; width: 50%;
  background: var(--left); border-radius: 7px 0 0 7px;
  transition: width .5s cubic-bezier(.2, .9, .3, 1);
}
.tb-quota::after { content: ""; position: absolute; z-index: 1; right: -12px; top: 50%; width: 24px; height: 24px; margin-top: -12px; box-sizing: border-box; background: #fff; border-radius: 4px; transform: rotate(45deg); box-shadow: 0 3px 6px rgba(0, 0, 0, 0.45); }

@media (prefers-reduced-motion: reduce) {
  .tb-wins.su, .tb-pc.su, .tb-debito.su, .tabellone.ultimi .tb-tempo, .tb-anello { animation: none; }
}

/* ------------------------------------------------------------ il carosello delle azioni
   Le voci delle AZIONI, sotto il campo e largo quanto il campo: un nastro
   solo di tasselli quadrati, uno di una squadra e uno dell'altra. Ogni
   tassello ha sopra l'immagine del regalo (o il segno dell'evento) su fondo
   scuro, e sotto una fascia del colore della squadra con quello che fa. Se
   in riga non ci stanno tutti (.gira) il nastro scorre verso sinistra:
   balloon-royale-diretta.js mette in fila le copie che servono e dice in
   --giro quanto e' lunga una fila, cioe' di quanto ci si sposta prima di
   ricominciare, cosi' il giro non ha stacchi. Se ci stanno, restano fermi
   al centro. A chi guarda dicono con che cosa si aiuta una squadra; a chi
   trasmette servono da prova: toccati, fanno scattare la loro voce (chi
   guarda la diretta non puo' toccare niente). Le misure del tassello (116 +
   12 di spazio) le conosce anche balloon-royale-diretta.js: PASSO. */
/* LE MISURE A MANO della lista regali (balloon-royale.js: misure): --lista quanto
   e' grande (1 = di casa), --lista-via quanto sta lontana dal cerchio,
   --lista-spazio lo spazio fra un regalo e l'altro. La distanza si conta
   DAL CERCHIO: se chi trasmette lo rimpicciolisce (--cerchio, 1 = intero;
   530 e' il suo raggio con l'anello) la lista gli va dietro, ai lati come
   sotto. Il carosello ingrandito
   resta largo quanto il palco: si allarga dentro e si rimpicciolisce il
   riquadro, cosi' a schermo e' sempre largo 1000; su e giu' si sposta di
   poco, se no finirebbe sul cerchio o sui tasti. */
.giostra {
  position: absolute; left: calc(540px - 500px / var(--lista, 1)); top: calc(1540px - 530px * (1 - var(--cerchio, 1)) + clamp(-60px, var(--lista-via, 0px), 60px)); width: calc(1000px / var(--lista, 1)); height: 170px;
  overflow: hidden;
  transform: scale(var(--lista, 1)); transform-origin: 50% 0;
  transition: opacity .4s;
}
/* mentre scorre, ai due capi i tasselli entrano ed escono sfumando */
.giostra.gira {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}
.nastro {
  margin: 0; padding: 0; list-style: none;
  display: flex; gap: var(--lista-spazio, 14px); justify-content: center;
}
/* Il giro non si ferma con "riduci le animazioni": fermo, i tasselli fuori
   dalla riga non si vedrebbero mai. La durata la mette balloon-royale-diretta.js. */
.giostra.gira .nastro { width: max-content; justify-content: flex-start; animation: giro 20s linear infinite; will-change: transform; }
@keyframes giro { to { transform: translateX(var(--giro)); } }
[data-azioni="no"] .giostra { display: none; }
/* Di questo gioco: chi trasmette sceglie quanto e' PIENA la lista regali
   (--rg-opaco, da balloon-royale-diretta.js) e QUANDO si vede: sempre, a
   tratti, o solo quando una voce scatta (.regali-via sul body la nasconde:
   nascosta, non si tocca). Vale ai lati come nel carosello. */
.giostra, .colonna-azioni { opacity: var(--rg-opaco, 1); }
.colonna-azioni { transition: opacity .4s; }
body.regali-via .giostra, body.regali-via .colonna-azioni { opacity: 0; }
body.regali-via .trig { pointer-events: none; }
/* LE AZIONI AI LATI (l'utente, 10/10/2026: "aggiungi la possibilita' di
   scegliere se volere la barra dei gift ai lati come in 1vs1 battle o se
   tenerla sotto che gira"). Due colonne degli stessi tasselli, una per
   squadra: quella di sinistra a sinistra del cerchio, quella di destra a
   destra, ferme, centrate sul centro del cerchio (908). Stanno FUORI dal
   palco, nello spazio che c'e' ai suoi lati quando la finestra e' larga; con
   la finestra stretta, in verticale, ai lati non c'e' posto e resta il
   carosello sotto. Quante righe (--righe) e quanto rimpicciolire perche' ci
   stiano in altezza (--zoom) lo dice balloon-royale-diretta.js: con tante azioni
   le colonne diventano due o tre. La colonna di sinistra si riempie da
   destra: le prime azioni stanno vicino al cerchio. La classe e'
   .colonna-azioni e NON .colonna: quella e' gia' delle scelte in colonna del
   pannello (.scelte.colonna), e col nome uguale la scheda di un'azione
   finiva fuori posto (successo il 10/10/2026, per un commit). */
.colonna-azioni {
  position: absolute; top: 908px; margin: 0; padding: 0; list-style: none;
  display: none; grid-auto-flow: column; grid-template-rows: repeat(var(--righe, 6), auto); gap: var(--lista-spazio, 14px);
  transform: translateY(-50%) scale(var(--zoom, 1));
}
.colonna-azioni.sx { right: calc(100% + 64px + var(--lista-via, 0px) - 530px * (1 - var(--cerchio, 1))); transform-origin: 100% 50%; direction: rtl; }
.colonna-azioni.dx { left: calc(100% + 64px + var(--lista-via, 0px) - 530px * (1 - var(--cerchio, 1))); transform-origin: 0 50%; }
.colonna-azioni .trig { direction: ltr; }
[data-azioni="si"][data-dove="lati"][data-schermo="largo"] .colonna-azioni { display: grid; }
[data-dove="lati"][data-schermo="largo"] .giostra { display: none; }
/* Il tassello e' tutto del colore della squadra, lucido come le targhette di
   1 Vs 1 Battle: chiaro in alto, pieno in mezzo, scuro in basso (--c1, --c2,
   --c3), col bordo scuro della stessa tinta (--cs), non nero. Sopra
   l'immagine del regalo, grande, con la sua ombra; sotto la fascia con
   quello che fa, in bianco col contorno della tinta del bordo. */
.trig {
  flex: none; box-sizing: border-box; width: 150px; height: 170px;
  display: flex; flex-direction: column;
  border: 5px solid var(--cs); border-radius: 26px; overflow: hidden;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 46%, var(--c3) 100%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.42);
  text-align: center; cursor: pointer; pointer-events: auto;
}
.trig.sx { --c1: var(--left-c1); --c2: var(--left); --c3: var(--left-c3); --cs: var(--left-cs); --o1: var(--right-c1); --o2: var(--right); --o3: var(--right-c3); --os: var(--right-cs); }
.trig.dx { --c1: var(--right-c1); --c2: var(--right); --c3: var(--right-c3); --cs: var(--right-cs); --o1: var(--left-c1); --o2: var(--left); --o3: var(--left-c3); --os: var(--left-cs); }
/* Un'azione CONTRO gli avversari (via palline, -WIN: qui "meno" e "menoWin"). Il tassello e' tutto
   del colore di chi la fa, come gli altri; accanto al numero, a destra, c'e'
   una pallina del colore di chi le PERDE (--o1, --o2 sono i toni dell'altra
   squadra): "-15" e una pallina viola sono quindici palline in meno ai
   viola. L'utente, 10/10/2026, sul "-10" che sembrava togliere ai verdi:
   "non si puo' aggiungere tipo -15 e a destra e davanti la pallina del
   colore avversario? cosi' puoi fare lo sfondo di tutto un colore". (Per un
   momento la fascia col numero era stata del colore avversario: tolta.) */
.trig.contro .trig-badge { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 4px; font-size: 30px; }
.trig.contro .trig-badge span { padding-top: 7px; }
/* la pallina, fatta come quelle in campo: contorno nero, anello chiaro, dentro il colore */
.trig-palla { flex: none; box-sizing: border-box; width: 32px; height: 32px; border-radius: 50%; border: 3px solid #000; background: radial-gradient(circle at 50% 50%, var(--o2) 0 44%, var(--o1) 48% 100%); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4); }
.trig.contro .trig-badge.media { gap: 6px; font-size: 27px; }
.trig.contro .trig-badge.media span { padding-top: 6px; }
.trig.contro .trig-badge.media .trig-palla { width: 28px; height: 28px; }
.trig.contro .trig-badge.lunga { gap: 6px; font-size: 23px; }
.trig.contro .trig-badge.lunga span { padding-top: 5px; }
.trig.contro .trig-badge.lunga .trig-palla { width: 26px; height: 26px; }
.trig:active { filter: brightness(1.2); }
/* la voce e' scattata: l'immagine fa un salto e il tassello si accende */
.trig.is-on { animation: trig-luce .9s ease-out; }
.trig.is-on .trig-ico { animation: trig-on .9s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes trig-luce { 0% { filter: brightness(1); } 25% { filter: brightness(1.55); } 100% { filter: brightness(1); } }
@keyframes trig-on { 0% { transform: scale(1); } 30% { transform: scale(1.22); } 100% { transform: scale(1); } }
/* dietro l'immagine una macchia di luce: la stacca dal colore */
.trig-ico { flex: 1; min-height: 0; display: grid; place-items: center; background: radial-gradient(circle at 50% 46%, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 66%); }
.trig-ico img { width: 98px; height: 98px; object-fit: contain; filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.5)); }
/* una voce senza regalo si riconosce dal suo evento (follow, tap, condivisione, commento): bianco, col contorno della tinta */
.trig-ico svg { width: 78px; height: 78px; fill: #fff; stroke: var(--cs); stroke-width: 1.9; stroke-linejoin: round; paint-order: stroke fill; overflow: visible; filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.4)); }
.trig-badge {
  flex: none; box-sizing: border-box; height: 52px; padding: 8px 4px 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.34), rgba(0, 0, 0, 0.5));
  border-top: 4px solid var(--cs);
  font: 400 32px/1.15 var(--display); letter-spacing: 0.01em;
  color: #fff; -webkit-text-stroke: 6px var(--cs); paint-order: stroke fill;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* una scritta lunga (otto lettere o piu') sta nel tassello un po' piu' piccola */
.trig-badge.lunga { font-size: 27px; padding-top: 11px; -webkit-text-stroke-width: 5px; }
/* A fine partita la lista regali si fa da parte: c'e' la festa del vincitore. */
[data-fase="end"] .giostra, [data-fase="end"] .colonna-azioni { opacity: calc(var(--rg-opaco, 1) * 0.2); }
body[data-fase="end"].regali-via .giostra, body[data-fase="end"].regali-via .colonna-azioni { opacity: 0; }

/* ------------------------------------------------------------ il tasto
   INIZIA / STOP / AZZERA: fa partire il conto alla rovescia, chiude la
   partita e, a partita finita, rimette tutto a zero. Con la finestra larga
   sta nell'angolo in basso a destra dello schermo, sopra i diritti
   (l'utente, 09/10/2026: "in basso a destra metti il tasto fatto meglio
   pero' [...] farei piu' un rettangolo con angoli arrotondati piu' che
   ovali"; prima stava a meta' altezza sul bordo sinistro); con quella
   stretta sotto i tasti tondi, nell'angolo in basso a destra del palco.
   Non e' piu' una pillola da fumetto col contorno nero: e' un rettangolo
   con gli angoli tondi, della famiglia dei tasti sullo schermo. Pieno, del
   viola di TikForge, quando c'e' da partire, con un'onda che si allarga
   piano; di vetro scuro mentre si gioca (il quadrato dello Stop e' rosso)
   e sulla festa di chi ha vinto. */
.via {
  position: fixed; z-index: 3; right: calc(var(--ox, 0px) + calc(24 * var(--u))); bottom: calc(var(--oy, 0px) + calc(24 * var(--u)));
  width: calc(332 * var(--u)); height: calc(84 * var(--u)); margin: 0;
  display: flex; align-items: center; justify-content: center; gap: calc(16 * var(--u));
  padding: 0 calc(24 * var(--u)); border-radius: calc(20 * var(--u));
  background: linear-gradient(180deg, #BE7BFF 0%, var(--viola) 48%, var(--viola2) 100%);
  border: max(1px, calc(2 * var(--u))) solid rgba(255, 255, 255, 0.36);
  box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.4), inset 0 calc(-5 * var(--u)) 0 rgba(40, 8, 80, 0.32), 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(124, 31, 212, 0.5);
  font: 800 calc(30 * var(--u))/1 var(--corpo); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; color: #fff;
  text-shadow: 0 calc(2 * var(--u)) calc(3 * var(--u)) rgba(40, 8, 80, 0.55);
  cursor: pointer; pointer-events: auto;
  transition: background-color .2s, border-color .2s, transform .12s, filter .15s;
}
[data-schermo="largo"] .via { right: var(--bordo); bottom: calc(18px + clamp(12px, calc(var(--v) * 3), 15px) * 1.5); }
.via:hover { filter: brightness(1.1); transform: translateY(calc(-2 * var(--u))); }
.via:active { filter: brightness(.95); transform: translateY(calc(2 * var(--u))); }
.via svg { width: calc(30 * var(--u)); height: calc(30 * var(--u)); flex: none; fill: currentColor; }
.via .via-ferma, .via .via-azzera { display: none; }
[data-fase="play"] .via, [data-fase="end"] .via {
  background: rgba(16, 9, 24, 0.78); border-color: rgba(214, 190, 245, 0.24);
  box-shadow: 0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  color: var(--ink); text-shadow: none;
}
[data-fase="play"] .via svg { color: #FF6B6B; }
[data-fase="play"] .via:hover { border-color: #FF6B6B; }
[data-fase="end"] .via svg { color: var(--lilla); }
[data-fase="end"] .via:hover { border-color: var(--viola); }
[data-fase="play"] .via .via-parte, [data-fase="end"] .via .via-parte { display: none; }
[data-fase="play"] .via .via-ferma, [data-fase="end"] .via .via-azzera { display: inline; }
[data-fase="ready"] .via { animation: via-batte 1.8s ease-out infinite; }
@keyframes via-batte {
  0% { box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.4), inset 0 calc(-5 * var(--u)) 0 rgba(40, 8, 80, 0.32), 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(124, 31, 212, 0.5), 0 0 0 0 rgba(190, 123, 255, 0.6); }
  70%, 100% { box-shadow: inset 0 calc(2 * var(--u)) 0 rgba(255, 255, 255, 0.4), inset 0 calc(-5 * var(--u)) 0 rgba(40, 8, 80, 0.32), 0 calc(10 * var(--u)) calc(28 * var(--u)) rgba(124, 31, 212, 0.5), 0 0 0 calc(16 * var(--u)) rgba(190, 123, 255, 0); }
}
@media (prefers-reduced-motion: reduce) { [data-fase="ready"] .via { animation: none; } }


/* ------------------------------------------------------------ pannelli
   Le impostazioni e la scheda di un'azione: UN CASSETTO SUL LATO DESTRO,
   alto quanto la finestra (l'utente, 10/10/2026: "fai il menu piu'
   user-friendly possibile e fallo sul lato destro"). Entra scivolando da
   destra. IL GIOCO NON SI SPOSTA: il cerchio resta al centro ("non si deve
   spostare dal centro anche se apro il menu"). Quanto e' largo il cassetto
   (--largo-menu) e se finisce accanto al palco o sopra lo dice
   balloon-royale-diretta.js (data-menu sul body: 'fianco', 'sopra', 'chiuso').
   Accanto non c'e' velo: il palco resta in vista e si usa; il velo c'e'
   solo quando il cassetto copre il palco, e un tocco li' lo chiude. */
#velo {
  position: fixed; inset: 0; z-index: 9;
  background: rgba(5, 1, 10, 0.6);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
#velo.su { opacity: 1; pointer-events: auto; }
.pannello {
  position: fixed; z-index: 10; top: 0; right: 0; bottom: 0;
  width: var(--largo-menu, min(460px, 92vw)); box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: 16px 16px 14px; border-radius: 22px 0 0 22px;
  background: linear-gradient(180deg, #181028, #100919);
  border: 1px solid var(--line); border-right: 0;
  box-shadow: -18px 0 44px rgba(0, 0, 0, 0.45);
  /* chiuso sta fuori dalla finestra, a destra, e non si tocca */
  transform: translateX(105%); visibility: hidden;
  transition: transform .22s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .22s;
}
.pannello.su { transform: none; visibility: visible; transition: transform .22s cubic-bezier(.2, .8, .2, 1); }
/* dal menu alla scheda di un'azione e ritorno: sul posto, senza scivolare */
.pannello.fermo { transition: none; }
@media (prefers-reduced-motion: reduce) { .pannello, .pannello.su { transition: none; } }
/* la testata: il titolo a sinistra e, a destra, il tasto per chiudere; nella
   scheda di un'azione, a sinistra, la freccia per tornare al menu */
.testa { display: flex; align-items: center; gap: 10px; min-height: 42px; margin-bottom: 12px; }
.pannello h2 { flex: 1; min-width: 0; margin: 0; padding-top: 4px; font: 400 26px/1 var(--display); letter-spacing: 0.03em; text-align: left; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tasto.chiudi, .tasto.indietro { flex: none; width: 42px; height: 42px; padding: 0; display: grid; place-items: center; }
.tasto.chiudi svg, .tasto.indietro svg { width: 16px; height: 16px; display: block; }
/* il tasto delle impostazioni, col menu aperto, resta acceso: toccato di nuovo lo chiude */
#apriImp[aria-pressed="true"] { border-color: var(--viola); background: var(--viola2); color: #fff; }
.pannello h3 { margin: 18px 0 8px; font: 400 18px/1 var(--display); letter-spacing: 0.05em; color: var(--ink); }
.pannello h3.sx { color: var(--left-chiaro); }
.pannello h3.dx { color: var(--right-chiaro); }
.pannello .corpo { flex: 1; overflow-y: auto; padding-right: 4px; min-height: 120px; overscroll-behavior: contain; }
.nota { margin: 4px 0 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }
/* le schede: l'icona e, sotto, il nome di quello che ci si fa */
.schede { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-bottom: 12px; }
.tasto.scheda { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 9px 2px 8px; border-radius: 14px; font-size: 13px; }
.tasto.scheda svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.tasto.scheda span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
/* la riga in cima a una scheda: a cosa serve */
.guida { margin: 0 0 12px; font-size: 15px; line-height: 1.4; color: var(--ink); }
/* un gruppo di impostazioni: si apre e si chiude; da chiuso dice com'e' messo */
.gruppo { margin: 8px 0; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.035); overflow: hidden; }
.gruppo.aperto { border-color: rgba(168, 85, 247, 0.5); }
.gruppo-testa { width: 100%; display: flex; align-items: center; gap: 10px; padding: 14px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.gruppo-testa:hover { background: rgba(255, 255, 255, 0.04); }
.gruppo-testa b { flex: none; font: 400 18px/1 var(--display); letter-spacing: 0.05em; }
.gruppo-testa span { flex: 1; min-width: 0; text-align: right; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.freccia { flex: none; width: 9px; height: 9px; margin: -5px 4px 0 2px; border-right: 2.5px solid var(--muted); border-bottom: 2.5px solid var(--muted); transform: rotate(45deg); }
.gruppo.aperto .freccia { margin-top: 5px; transform: rotate(225deg); }
.gruppo-corpo { padding: 0 14px 12px; }
/* Le sfide e gli sfondi: due per riga, con loghi (o un pallino) e nomi.
   Quella scelta ha il bordo viola (senza alone). */
.sfide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0; }
.sfida {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding: 8px 10px; border-radius: 12px;
  border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3);
  color: var(--ink); font: 700 13px/1.15 var(--corpo); text-align: left; cursor: pointer;
}
.sfida:hover { border-color: var(--viola2); }
.sfida.scelto { border-color: var(--viola); background: rgba(168, 85, 247, 0.22); }
.sfida.larga { grid-column: 1 / -1; justify-content: center; }
.sfida img { width: 28px; height: 28px; object-fit: contain; flex: none; }
.sfida i { width: 16px; height: 16px; border-radius: 50%; flex: none; }
.sfida b { font: 400 12px/1 var(--display); color: var(--gold); flex: none; }
.sfida span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 420px) { .sfide { grid-template-columns: 1fr; } }
.gruppo-corpo > .riga:last-child { border-bottom: 0; }
.etichetta { margin: 12px 0 6px; font-size: 15px; }
/* una voce delle azioni, in una frase: il segno, quando scatta, cosa succede. Tutta la riga apre la sua scheda */
.azione.frase { padding: 0; gap: 0; align-items: stretch; overflow: hidden; }
.frase-testo { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 9px 8px 9px 16px; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.frase-testo:hover { background: rgba(255, 255, 255, 0.05); }
.frase-testo:disabled { cursor: default; }
.frase-scritte { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.frase-scritte .quando { font-size: 14px; font-weight: 800; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.frase-scritte .cosa { font: 400 16px/1.15 var(--display); letter-spacing: 0.03em; }
.azione.frase.chiusa .frase-scritte .cosa { font: 400 13px/1.3 var(--corpo); color: var(--muted); }
.azione.frase .azFa { align-items: center; padding-right: 8px; }
.segno { flex: none; display: grid; place-items: center; }
.segno svg { width: 78%; height: 78%; fill: var(--muted); }
/* la scheda di un'azione: le scelte di "succede" una sotto l'altra, e in fondo elimina, prova, fatto */
.scelte.colonna { flex-direction: column; flex-wrap: nowrap; }
.scelte.colonna .tasto.scelta { text-align: left; padding: 11px 16px; border-radius: 14px; }
.piede { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.piede .tasto { flex: none; padding: 13px 16px; }
.piede .tasto.fatto { flex: 1; margin-top: 0; }
.tasto {
  appearance: none; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 16px 9px; font: 800 15px/1.1 var(--corpo); color: var(--ink);
  background: rgba(255, 255, 255, 0.06); cursor: pointer;
  transition: transform .15s ease, border-color .2s ease, background-color .2s;
}
.tasto:hover { border-color: var(--viola); }
.tasto:active { transform: scale(.96); }
.tasto:disabled { opacity: 0.45; cursor: not-allowed; }
.tasto.scheda.scelto, .tasto.scelta.scelto { background: var(--viola); border-color: var(--viola); color: #fff; }
.tasto.blu { background: rgba(77, 107, 255, 0.25); }
.tasto.rosso { background: rgba(226, 69, 58, 0.3); }
/* i tasti di una squadra: del suo colore */
.tasto.sx { background: var(--left-scuro); border-color: var(--left); }
.tasto.dx { background: var(--right-scuro); border-color: var(--right); }
.tasto.lungo { display: block; width: 100%; margin-top: 12px; padding: 13px; font-size: 16px; }
.tasto.lungo:not(.rosso):not(.blu) { background: var(--viola); border-color: var(--viola); color: #fff; }
.tasto.mini { padding: 5px 12px; font-size: 17px; }
.tasto.aggiungi { width: 100%; margin: 6px 0 4px; background: transparent; border-style: dashed; }
.tasto.interr { min-width: 70px; background: rgba(79, 227, 138, 0.25); border-color: rgba(79, 227, 138, 0.55); }
.tasto.interr.spento { background: rgba(255, 255, 255, 0.05); border-color: var(--line); color: var(--muted); }
.riga { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.regola { display: flex; align-items: center; gap: 8px; }
.regola small { color: var(--muted); }
.numero { width: 84px; padding: 7px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.4); color: var(--ink); font: 400 17px var(--display); text-align: center; }
/* la scelta di un colore: un tassello tondo che apre la tavolozza del browser */
.tinta { appearance: none; -webkit-appearance: none; width: 54px; height: 36px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.4); cursor: pointer; }
.tinta::-webkit-color-swatch-wrapper { padding: 4px; }
.tinta::-webkit-color-swatch { border: 0; border-radius: 6px; }
.tinta::-moz-color-swatch { border: 0; border-radius: 6px; }
.riga .scelte { margin: 0; justify-content: flex-end; }
/* nel cassetto, piu' stretto della finestra di prima: una riga con tre o quattro scelte le manda a capo sotto la sua scritta */
.riga.larga { flex-wrap: wrap; }
.riga.larga .scelte { flex: 1 1 100%; justify-content: stretch; }
.riga .tasto.scelta { padding: 8px 12px; font-size: 13px; }
/* un nome scritto a mano, la miniatura di un'immagine caricata, un avviso */
.testo.largo { width: 250px; }
.mini-img { width: 54px; height: 36px; object-fit: cover; border-radius: 8px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.4); }
.mini-img.tonda { width: 36px; border-radius: 50%; }
.nota.avviso { color: #FFB020; }

/* LA FINESTRA PER CARICARE UN'IMMAGINE (balloon-royale-diretta.js, apriCarica):
   in mezzo allo schermo, sopra il pannello. Dice cosa serve, ha un riquadro
   grande su cui cliccare o trascinare (dentro c'e' il campo del file, vero
   e grande quanto lui), e sotto una riga che dice com'e' andata: grigia
   mentre aspetta, rossa se non va (col perche'), verde se e' caricata.
   Dello stesso vetro scuro del pannello; niente aloni. */
.carica-velo {
  position: fixed; inset: 0; z-index: 40; box-sizing: border-box; padding: 16px;
  display: grid; place-items: center; overflow-y: auto;
  background: rgba(5, 1, 10, 0.74);
}
.carica {
  width: min(480px, 100%); box-sizing: border-box; padding: 16px 18px 16px;
  border-radius: 22px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #181028, #100919);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
  color: var(--ink); font-family: var(--corpo); text-align: left;
}
.carica h2 { flex: 1; min-width: 0; margin: 0; padding-top: 4px; font: 400 26px/1 var(--display); letter-spacing: 0.03em; color: #fff; }
.carica h3 { margin: 0 0 6px; font: 400 17px/1 var(--display); letter-spacing: 0.05em; color: var(--ink); }
.carica-per { margin: -4px 0 14px; font-size: 15px; font-weight: 700; color: var(--muted); }
.carica-serve { margin: 0 0 14px; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.carica-zona {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 14px 18px; border: 2px dashed rgba(214, 190, 245, 0.38); border-radius: 16px;
  background: rgba(255, 255, 255, 0.04); text-align: center; cursor: pointer;
}
.carica-zona:hover, .carica-zona.sopra { border-color: var(--viola); background: rgba(168, 85, 247, 0.14); }
.carica-zona strong { padding: 12px 24px 11px; border-radius: 999px; background: var(--viola); color: #fff; font: 800 16px/1.1 var(--corpo); }
.carica-zona span { font-size: 13px; color: var(--muted); }
/* il campo del file copre tutto il riquadro, invisibile: chi clicca, clicca lui */
.carica-zona input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.carica-stato { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; border: 1px solid transparent; font-size: 14px; line-height: 1.4; background: rgba(255, 255, 255, 0.05); color: var(--muted); overflow-wrap: anywhere; }
.carica-stato.errore { background: rgba(226, 69, 58, 0.18); border-color: rgba(226, 69, 58, 0.65); color: #FFD9D4; font-weight: 700; }
.carica-stato.fatto { background: rgba(79, 227, 138, 0.14); border-color: rgba(79, 227, 138, 0.5); color: #CFF8DF; font-weight: 700; }
.carica-anteprima { display: block; margin: 12px auto 0; max-width: 200px; max-height: 120px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.4); }
.carica-anteprima[hidden] { display: none; }
.carica-anteprima.tonda { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; }
.carica .tasto.lungo[hidden] { display: none; }
.carica .nota { margin: 12px 0 0; font-size: 13px; }
.carica .piede { margin-top: 12px; }
.testo { width: 190px; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.4); color: var(--ink); font: 700 15px var(--corpo); }
/* un cursore per una misura: si trascina, e accanto il suo numero */
.cursore { display: flex; align-items: center; gap: 10px; }
.cursore input { width: 168px; height: 28px; margin: 0; accent-color: var(--viola); cursor: pointer; }
.cursore b { min-width: 50px; text-align: right; font: 400 16px/1 var(--display); letter-spacing: 0.03em; color: var(--ink); }
.tasto.mini-testo { display: block; margin: 10px 0 2px auto; padding: 7px 14px 6px; font-size: 13px; color: var(--muted); }
.tacche { display: flex; gap: 4px; }
.tacche i { width: 14px; height: 22px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); }
.tacche i.on { background: var(--viola); }
.scelte { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.tasto.scelta { flex: 1 1 auto; }
.azione { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; margin: 6px 0; border-radius: 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line); }
.azione.sx { box-shadow: inset 5px 0 0 var(--left); }
.azione.dx { box-shadow: inset 5px 0 0 var(--right); }
.azChi { display: flex; align-items: center; gap: 10px; min-width: 0; }
.azNome { display: flex; flex-direction: column; min-width: 0; }
.azNome span { font: 400 16px/1.1 var(--display); letter-spacing: 0.03em; }
.azNome small { color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.azFa { display: flex; gap: 6px; flex-shrink: 0; }
.azFa .tasto { padding: 7px 12px; font-size: 14px; }
/* i tastini di una voce: prova e togli */
.azFa .tasto.icona { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; }
.tasto.icona svg { width: 15px; height: 15px; display: block; }
/* una voce oltre il tetto del piano Free: spenta, si puo' solo togliere */
.azione.chiusa .azChi { opacity: 0.45; }
/* il regalo scelto per un evento: un tasto con la sua icona, che apre il catalogo */
.tasto.scegli { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 4px; }
.catalogo { margin-top: 10px; }
.voce.scelto { border-color: var(--viola); background: rgba(168, 85, 247, 0.22); }
img.regalo { object-fit: contain; flex-shrink: 0; }
.cerca { width: 100%; margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.4); color: var(--ink); font-size: 16px; }
.voci { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; align-content: start; }
.voce { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 12px; border: 1px solid transparent; background: rgba(255, 255, 255, 0.05); color: var(--ink); font-size: 13px; text-align: left; cursor: pointer; }
.voce:hover { border-color: var(--viola); }
.voce span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voce small { color: var(--muted); }
.voce.usato { opacity: 0.4; cursor: not-allowed; }

@media (max-width: 480px) {
  .pannello { padding: 14px 12px 12px; border-radius: 18px 0 0 18px; }
  .azione { flex-wrap: wrap; }
}

/* ================================================================
   IL MENU: FATTO E DISEGNATO COME QUELLO DI 1 VS 1 BATTLE
   ----------------------------------------------------------------
   L'utente, 11/10/2026: "copia il menu (SOLO ESTETICO E COM'E' FATTO) da
   1vs1-battle e adattalo agli altri 3 giochi tenendolo a destra [...] lo
   stile deve essere com'e' attualmente 1vs1-battle"; e, sui gruppi che
   prima si aprivano e chiudevano: "c'e' il titolo e sotto le cose e si
   scrolla giu'. non che si clicca e se apre".
   Da la' vengono: la testata col titolo e la X tonda, le schede in una
   fascia (segno e parola), i titoletti piccoli in maiuscolo, i riquadri
   col filo colorato in cima, le righe (scritta a sinistra, comando a
   destra), la casella con la spunta, i cursori col numero, le pastiglie
   delle scelte, i tasti a contorno e "Fatto" in fondo. Resta nostro: sta
   a DESTRA, come cassetto, e il gioco resta in vista.
   Questo blocco viene DOPO le regole di prima: dove dicono cose diverse,
   vale lui. E' lo stesso in Balloon Royale, Ring Sumo e Color Clash: una
   correzione qui va fatta in tutti e tre.
   ================================================================ */
.pannello {
  padding: 0;
  background: linear-gradient(180deg, rgba(21, 12, 32, 0.97), rgba(16, 9, 24, 0.97));
  box-shadow: -26px 0 70px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(168, 85, 247, 0.05);
  font-family: var(--corpo); line-height: 1.5;
}
/* il filo viola in cima, come sulle schede di la' */
.pannello::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.6), rgba(124, 31, 212, 0.6), transparent); pointer-events: none; }
/* la testata: il titolo, e la X tonda che gira quando ci si passa sopra */
.pannello .testa { min-height: 0; margin: 0; padding: 16px 18px 10px; gap: 10px; }
.pannello h2 { padding: 0; font: 800 20px/1.2 'Baloo 2', var(--corpo); letter-spacing: 0.01em; color: var(--ink); }
.pannello .tasto.chiudi, .pannello .tasto.indietro {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line);
  background: rgba(214, 190, 245, 0.06); color: var(--muted);
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.pannello .tasto.chiudi svg, .pannello .tasto.indietro svg { width: 13px; height: 13px; }
.pannello .tasto.chiudi:hover, .pannello .tasto.indietro:hover { color: var(--ink); border-color: rgba(214, 190, 245, 0.4); }
.pannello .tasto.chiudi:hover { transform: rotate(90deg); }
/* le schede: una fascia, e dentro segno e parola; quella aperta e' viola chiaro */
.pannello .schede { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; margin: 0 18px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.pannello .tasto.scheda {
  flex: 1 1 auto; flex-direction: row; justify-content: center; gap: 5px; padding: 9px 6px;
  border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--muted);
  font: 800 13.5px/1.2 'Baloo 2', var(--corpo);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pannello .tasto.scheda:hover { color: var(--ink); border-color: transparent; }
.pannello .tasto.scheda.scelto { background: rgba(168, 85, 247, 0.18); border-color: rgba(168, 85, 247, 0.42); color: var(--ink); }
.pannello .tasto.scheda:active { transform: none; }
.tab-ico { font-size: 14px; line-height: 1; }
/* il corpo: si scorre */
.pannello .corpo { padding: 14px 18px 16px; min-height: 0; }
.pannello .guida { margin: 0 2px 4px; font-size: 11.5px; line-height: 1.5; color: var(--muted); opacity: .85; }
/* UN BLOCCO: il titoletto e, sotto, il suo riquadro. Quello di una squadra ha il suo colore. */
.blocco { margin: 0; }
.titolo-blocco, .pannello h3 { margin: 14px 0 6px 2px; font: 800 10.5px/1.3 var(--corpo); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pannello .corpo > .blocco:first-child > .titolo-blocco { margin-top: 2px; }
.blocco.sx > .titolo-blocco, .pannello h3.sx { color: var(--left); }
.blocco.dx > .titolo-blocco, .pannello h3.dx { color: var(--right); }
.carta { padding: 4px 11px 11px; border-radius: 13px; border: 1px solid var(--line); border-top: 3px solid var(--viola); background: rgba(214, 190, 245, 0.045); min-width: 0; }
.blocco.sx > .carta { border-top-color: var(--left); }
.blocco.dx > .carta { border-top-color: var(--right); }
.carta > :first-child { margin-top: 6px; }
.carta > .riga:first-child { margin-top: 0; }
/* LE RIGHE: la scritta a sinistra, il comando a destra, un filo fra l'una e l'altra */
.pannello .riga { gap: 10px; padding: 8px 2px; border-bottom: 0; border-top: 1px solid rgba(168, 85, 247, 0.12); font-size: 12.5px; }
.pannello .carta > .riga:first-child, .pannello .corpo > .riga:first-child { border-top: 0; }
.pannello .riga > span:first-child { font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.pannello .riga.larga { flex-wrap: wrap; }
.pannello .etichetta { margin: 8px 2px 6px; padding-top: 8px; border-top: 1px solid rgba(168, 85, 247, 0.12); font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.pannello .nota { margin: 6px 2px 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); opacity: .85; }
.pannello .nota.avviso { opacity: 1; }
/* la casella con la spunta (era un tasto ON / OFF) */
.spunta { flex: none; width: 19px; height: 19px; margin: 0; accent-color: var(--viola); cursor: pointer; }
/* un numero: meno, la casella, piu' */
.pannello .regola { gap: 4px; flex: none; }
.pannello .regola small { margin: 0 2px; font-size: 11.5px; color: var(--muted); }
.pannello .tasto.mini {
  width: 26px; height: 26px; flex: none; padding: 0; border-radius: 7px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--ink);
  font: 700 15px/1 var(--corpo); display: grid; place-items: center;
}
.pannello .tasto.mini:hover { background: rgba(168, 85, 247, 0.18); border-color: rgba(168, 85, 247, 0.45); }
.pannello .tasto.mini:active { transform: scale(.9); }
.pannello .numero {
  width: 56px; padding: 4px 2px; border-radius: 7px; border: 1px solid var(--line);
  background: rgba(214, 190, 245, 0.06); color: var(--ink); font: 600 13px/1.4 var(--corpo); text-align: center; outline: none;
  -moz-appearance: textfield; appearance: textfield;
}
.pannello .numero::-webkit-outer-spin-button, .pannello .numero::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pannello .numero:focus, .pannello .testo:focus, .pannello .cerca:focus { border-color: rgba(168, 85, 247, 0.6); }
/* un cursore, col suo numero in cifre da macchina */
.pannello .cursore { display: inline-flex; gap: 8px; }
.pannello .cursore input { width: 140px; height: 20px; }
.pannello .cursore b { min-width: 42px; font: 600 12px/1 'JetBrains Mono', ui-monospace, monospace; letter-spacing: 0; }
.pannello .tacche i { width: 11px; height: 18px; border-radius: 3px; }
/* le caselle di testo, il colore */
.pannello .testo, .pannello .cerca {
  padding: 7px 9px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(214, 190, 245, 0.06); color: var(--ink); font: 400 13px/1.3 var(--corpo); outline: none;
}
.pannello .testo { width: 150px; }
.pannello .testo.largo { width: 190px; }
.pannello .cerca { width: 100%; margin-bottom: 8px; }
.pannello .tinta { width: 40px; height: 28px; border-radius: 8px; background: rgba(214, 190, 245, 0.06); }
.pannello .tinta::-webkit-color-swatch-wrapper { padding: 3px; }
/* LE SCELTE: pastiglie; quella presa ha il bordo viola */
.pannello .scelte { gap: 6px; margin: 0; }
.pannello .riga .scelte { justify-content: flex-end; }
.pannello .carta > .scelte, .pannello .corpo > .scelte { margin: 6px 0 2px; }
.pannello .tasto.scelta {
  flex: 0 1 auto; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04); color: var(--muted); font: 700 12px/1.25 var(--corpo);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pannello .tasto.scelta:hover { border-color: rgba(214, 190, 245, 0.35); color: var(--ink); }
.pannello .tasto.scelta.scelto { border-color: var(--viola); background: rgba(168, 85, 247, 0.18); color: var(--ink); }
.pannello .scelte.colonna .tasto.scelta { padding: 9px 12px; border-radius: 10px; text-align: left; }
/* I TASTI. Quelli larghi sono a contorno, in maiuscolo piccolo; il rosso, toccato una volta, si arma ("Sicuro?") */
.pannello .tasto.lungo:not(.fatto), .pannello .tasto.lungo:not(.rosso):not(.blu):not(.fatto) {
  display: block; width: 100%; margin-top: 10px; padding: 8px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font: 700 11.5px/1.4 var(--corpo); letter-spacing: 0.1em; text-transform: uppercase;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.pannello .tasto.lungo:not(.fatto):hover { border-color: var(--viola2); color: var(--ink); background: rgba(124, 31, 212, 0.18); }
.pannello .tasto.lungo.rosso:hover { border-color: #E2453A; background: rgba(226, 69, 58, 0.18); }
.pannello .tasto[data-sicuro], .pannello .tasto[data-sicuro]:hover { border-color: #E2453A; background: #E2453A; color: #fff; }
/* quelli piccoli (Carica, Togli, Nuova squadra, i tasti di prova): a contorno */
.pannello .tasto.blu:not(.mini):not(.lungo), .pannello .tasto.rosso:not(.lungo):not(.icona), .pannello .tasto.sx, .pannello .tasto.dx, .pannello .tasto.mini-testo {
  padding: 7px 11px; border-radius: 9px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  color: var(--ink); font: 700 12px/1.3 var(--corpo);
}
.pannello .tasto.blu:not(.mini):not(.lungo):hover, .pannello .tasto.mini-testo:hover { border-color: rgba(168, 85, 247, 0.6); background: rgba(168, 85, 247, 0.1); }
.pannello .tasto.rosso:not(.lungo):not(.icona) { color: var(--muted); }
.pannello .tasto.rosso:not(.lungo):not(.icona):hover { border-color: #E2453A; background: rgba(226, 69, 58, 0.18); color: var(--ink); }
.pannello .tasto.sx { border-color: var(--left); box-shadow: inset 3px 0 0 var(--left); }
.pannello .tasto.dx { border-color: var(--right); box-shadow: inset 3px 0 0 var(--right); }
.pannello .tasto.mini-testo { margin: 8px 0 0 auto; color: var(--muted); }
/* "aggiungi": a tratteggio, come la' */
.pannello .tasto.aggiungi { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--line); background: none; color: var(--muted); font: 700 13px/1.3 'Baloo 2', var(--corpo); }
.pannello .tasto.aggiungi:hover { color: var(--ink); border-color: rgba(168, 85, 247, 0.6); background: rgba(168, 85, 247, 0.1); }
.pannello .tasto.aggiungi:disabled:hover { color: var(--muted); border-color: var(--line); background: none; }
/* "FATTO", in fondo e sempre in vista: il tasto pieno, viola */
.piede-menu, .pannello > .piede {
  flex: none; display: flex; justify-content: center; align-items: center; gap: 8px; margin: 0;
  padding: 10px 18px 16px; border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(16, 9, 24, 0.6), rgba(16, 9, 24, 0.95));
}
.pannello .tasto.fatto, .pannello .tasto.lungo.fatto, .pannello .tasto.lungo.fatto:not(.rosso):not(.blu) {
  display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 46%; margin: 0;
  padding: 12px 26px; border-radius: 999px; border: 1px solid transparent;
  background: var(--viola); color: #F1E7FF; font: 700 15px/1.2 var(--corpo); letter-spacing: 0; text-transform: none;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.32);
  transition: transform .15s ease, box-shadow .2s ease;
}
.pannello .tasto.fatto:hover, .pannello .tasto.lungo.fatto:hover { transform: translateY(-2px); background: var(--viola); border-color: transparent; color: #F1E7FF; box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35), 0 0 34px rgba(168, 85, 247, 0.55); }
.pannello .tasto.fatto:active { transform: scale(.97); }
.pannello > .piede .tasto.fatto { flex: 1 1 auto; min-width: 0; }
/* LE SFIDE e gli sfondi: riquadri chiari, e quello scelto ha il bordo viola */
.pannello .sfide { gap: 8px; margin: 6px 0 2px; }
.pannello .sfida { padding: 9px 10px; border-radius: 12px; border: 1px solid var(--line); background: rgba(214, 190, 245, 0.045); font: 700 12.5px/1.2 var(--corpo); transition: border-color .18s ease, background-color .18s ease; }
.pannello .sfida:hover { border-color: rgba(214, 190, 245, 0.35); background: rgba(214, 190, 245, 0.09); }
.pannello .sfida.scelto { border-color: var(--viola); background: rgba(168, 85, 247, 0.18); box-shadow: 0 0 0 1px var(--viola) inset; }
.pannello .sfida b { font: 800 11px/1 'Baloo 2', var(--corpo); color: var(--muted); }
/* LE AZIONI: una per riga, col filo del colore della squadra a sinistra */
.pannello .azione { padding: 7px 9px; margin: 8px 0 0; border-radius: 13px; border: 1px solid var(--line); background: rgba(214, 190, 245, 0.045); box-shadow: none; }
.pannello .carta > .azione:first-child { margin-top: 6px; }
.pannello .azione.sx { border-left: 3px solid var(--left); box-shadow: none; }
.pannello .azione.dx { border-left: 3px solid var(--right); box-shadow: none; }
.pannello .azione.frase { padding: 0; }
.pannello .frase-testo { gap: 10px; padding: 7px 6px 7px 9px; }
.pannello .frase-scritte .quando { font-size: 11.5px; font-weight: 600; color: var(--muted); }
.pannello .frase-scritte .cosa { font: 800 13.5px/1.2 var(--corpo); letter-spacing: 0; }
.pannello .azNome span { font: 800 13.5px/1.2 var(--corpo); letter-spacing: 0; }
.pannello .azNome small { font-size: 11.5px; }
.pannello .azFa .tasto.icona { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--muted); }
.pannello .azFa .tasto.icona:hover { color: var(--ink); border-color: rgba(168, 85, 247, 0.6); background: rgba(168, 85, 247, 0.1); }
.pannello .azFa .tasto.rosso.icona:hover { color: #FF6B6B; border-color: rgba(255, 107, 107, 0.4); background: rgba(255, 107, 107, 0.08); }
/* il catalogo dei regali, nella scheda di un'azione */
.pannello .voce { padding: 6px 8px; border-radius: 10px; border: 1px solid var(--line); background: rgba(16, 9, 24, 0.5); font-size: 12.5px; }
.pannello .voce:hover { border-color: rgba(168, 85, 247, 0.6); background: rgba(168, 85, 247, 0.12); }
.pannello .voce.scelto { border-color: var(--viola); background: rgba(168, 85, 247, 0.18); }
.pannello .tasto.scegli, .pannello .tasto.lungo.scegli:not(.fatto) { display: flex; width: 100%; margin-top: 4px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(16, 9, 24, 0.5); color: var(--ink); font: 800 13.5px/1.2 var(--corpo); letter-spacing: 0; text-transform: none; }
.pannello .tasto.scegli:hover, .pannello .tasto.lungo.scegli:not(.fatto):hover { border-color: rgba(168, 85, 247, 0.6); background: rgba(168, 85, 247, 0.12); }
/* le schede stanno su una riga sola (sullo schermo stretto vanno a capo, come la') */
.pannello .schede { flex-wrap: nowrap; }
.pannello .tasto.scheda { flex: 1 1 0; min-width: 0; gap: 4px; padding: 9px 2px; font-size: 13px; }
.pannello .tasto.scheda .tab-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 430px) { .pannello .schede { flex-wrap: wrap; } .pannello .tasto.scheda { flex: 1 1 30%; } }
/* LE SFIDE PRONTE, come la': una riga per sfida, su ogni lato il nome sopra e l'immagine sotto, il VS in mezzo */
.pannello .sfida.scelta-ora { border-color: var(--viola); background: rgba(168, 85, 247, 0.18); box-shadow: 0 0 0 1px var(--viola) inset; }
.pannello .sfida.larga { justify-content: center; text-align: center; }
.pannello .sfida.coppia { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; padding: 9px 8px; border-radius: 12px; }
.pannello .sfida.coppia .lato { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.pannello .sfida.coppia .lato b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 12.5px/1.1 'Baloo 2', var(--corpo); color: var(--ink); }
.pannello .sfida.coppia .lato img { width: 72px; height: 44px; object-fit: contain; }
.pannello .sfida.coppia .vs { width: 34px; height: 34px; border-radius: 0; background: url(/game/1vs1-battle/vs-badge.png) center / contain no-repeat; }
/* LA PAGINA DELLE SQUADRE. Nata in Balloon Royale; dall'11/10/2026 anche in
   Ring Sumo e Color Clash ("metti anche la possibilita' di scegliere le
   squadre su color clash e ring sumo"), e per questo sta qui, nel blocco
   che e' uguale nei tre.
   Nel riquadro di un lato c'e' il tasto con la squadra che c'e' adesso: il
   suo stemma sul suo colore, il nome, e la freccia. Toccato, a destra si
   apre la pagina con TUTTE le squadre, una tessera l'una: lo stemma sul
   colore della squadra, sotto il nome. L'utente, 11/10/2026, davanti alla
   tendina di sole scritte: "e' brutto cosi' questa lista [...] si vedono
   tutte le squadre singole con immagine e colore di sfondo cosi' puo'
   cliccare per sceglierla". La tessera della squadra che c'e' ha il bordo
   bianco e la spunta; quella che sta dall'altra parte e' spenta. */
.apri-squadre {
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 240px; padding: 4px 10px 4px 4px;
  border-radius: 10px; border: 1px solid var(--line); background: rgba(16, 9, 24, 0.5); color: var(--ink);
  font: 800 13.5px/1.2 var(--corpo); text-align: left; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
}
.apri-squadre:hover { border-color: rgba(168, 85, 247, 0.6); background: rgba(168, 85, 247, 0.12); }
.apri-squadre > span:not(.sq-mini) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.apri-squadre > i { flex: none; font-style: normal; font-size: 17px; line-height: 1; color: var(--muted); }
.sq-mini { flex: none; width: 40px; height: 34px; border-radius: 8px; display: grid; place-items: center; overflow: hidden; }
.sq-mini img { width: 30px; height: 26px; object-fit: contain; }
.sq-mini img.tonda { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.sq-mini .sq-lettera { width: 24px; height: 24px; font-size: 13px; border-width: 1px; }
.squadre-griglia { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 4px; }
.squadra {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  min-width: 0; height: 106px; padding: 10px 6px 8px; border-radius: 13px; border: 2px solid rgba(255, 255, 255, 0.14);
  color: #fff; font: inherit; cursor: pointer; overflow: hidden;
  transition: transform .12s ease, border-color .18s ease;
}
.squadra:hover { border-color: rgba(255, 255, 255, 0.75); transform: translateY(-2px); }
.squadra:active { transform: scale(.97); }
.squadra img { width: 68px; height: 50px; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)); }
.squadra img.tonda { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, 0.75); }
.sq-lettera { width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; background: rgba(0, 0, 0, 0.28); border: 2px solid rgba(255, 255, 255, 0.6); color: #fff; font: 800 22px/1 'Baloo 2', var(--corpo); }
.sq-nome { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 800 12.5px/1.15 'Baloo 2', var(--corpo); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); }
.squadra.scelta { border-color: #fff; box-shadow: 0 0 0 2px var(--viola); }
.squadra.scelta::after { content: '\2713'; position: absolute; top: 5px; right: 8px; font: 800 14px/1 var(--corpo); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.75); }
.squadra:disabled { opacity: 0.28; cursor: default; }
.squadra:disabled:hover { border-color: rgba(255, 255, 255, 0.14); transform: none; }
.squadra.nuova { background: none; border: 2px dashed var(--line); color: var(--muted); }
.squadra.nuova .sq-lettera { background: none; border-color: var(--line); color: var(--muted); }
.squadra.nuova .sq-nome { text-shadow: none; }
.squadra.nuova:hover { border-color: rgba(168, 85, 247, 0.6); color: var(--ink); background: rgba(168, 85, 247, 0.1); }
@media (max-width: 420px) { .squadre-griglia { grid-template-columns: repeat(2, 1fr); } }
/* (fine della pagina delle squadre) */