/* COLOR CLASH — la pagina attorno al canvas.
   RIFATTA il 10/10/2026 su quella di Ring Sumo (game/css/ring-sumo.css), che
   da questa era nata il giorno prima e poi era cambiata su indicazione
   dell'utente. Aggiornato Balloon Royale "come ring-sumo", gli ho proposto
   di aggiornare anche questo gioco allo stesso modo, e ha detto di si'
   ("prima di fare color clash, fai..."). Quindi, come la':
   - il TABELLONE a fascia, pulito: l'orologio in una targa, una meta' per
     squadra, il VS in mezzo, le WIN appese sotto, la riga (prima era a
     fumetto: una barra lucida coi contorni neri);
   - la LISTA REGALI ai lati del campo, una colonna per squadra, o nel
     carosello sotto (prima solo il carosello);
   - "Azzera WIN" in basso a sinistra;
   - il MENU e' un cassetto sul lato destro (prima una finestra al centro);
   - le MISURE a mano: lista regali, campo e tabellone.
   Restano di questo gioco: il VS dentro un giro di caselle, lo stemma a
   casella, il nome del sito che compare e scompare fra le WIN.
   - i colori in gioco sono DUE, quelli delle squadre: il resto e' nero,
     bianco e il viola di TikForge;
   - 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
   (color-clash.js, misura), cosi' tabellone e lista regali stanno sempre
   attaccati al campo. 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
     color-clash.js (coloriPagina) quando chi trasmette li cambia. */
  --left: #FFC93C;
  --left-chiaro: #FFE49E;
  --left-scuro: #735A1B;
  --right: #7C4DFF;
  --right-chiaro: #BEA6FF;
  --right-scuro: #382373;
  /* i toni delle targhette lucide: chiaro, scuro e bordo (il pieno e' il colore stesso) */
  --left-c1: #FFDB7E; --left-c3: #947523; --left-cs: #4D3C12;
  --right-c1: #A88AFF; --right-c3: #482D94; --right-cs: #25174D;
  --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; }
/* 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. L'utente, 09/10/2026, 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 color-clash.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 nel tabellone (.tb-marchio). */
/* 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
   color-clash-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 campo, 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: prima c'era una barra lucida a
   fumetto, coi contorni neri.
   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, quanto campo ha verso il centro e il VS in mezzo dentro un giro di
   caselle (e' il gioco); le WIN appese sotto, e fra loro il nome del sito;
   in fondo LA RIGA: e' il campo, quanta parte ne ha ogni squadra. */
.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 color-clash.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 color-clash.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 color-clash.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 CASELLA, quadra con gli angoli tondi, bianca
   attorno e con una casellina in mezzo (in Ring Sumo e' una pallina, tonda).
   Con una sfida di 1 Vs 1 Battle al suo posto c'e' il logo della squadra (i
   PNG di game/1vs1-battle/). */
.tb-stemma {
  position: absolute; z-index: 1; top: 50%; width: 70px; height: 70px; margin-top: -35px; box-sizing: border-box;
  border-radius: 18px; 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: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 6px; 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; }
/* Ogni squadra ha il suo segno (la classe la mette aggiornaTesta): il LOGO
   di una squadra pronta sta al posto dello stemma, piu' grande di lui; lo
   STEMMA CARICATO da chi trasmette sta dentro l'anello bianco, e lo riempie. */
.tb-stemma.logo { background: none; border-color: transparent; box-shadow: none; }
.tb-stemma.logo::after, .tb-stemma.sua::after { display: none; }
.tb-stemma.sua .tb-logo { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 13px; filter: none; }
/* QUANTO CAMPO HA la squadra, in percento: sono le caselle contate, 50% e'
   proprio meta' campo. Grande, ai lati del VS. */
.tb-pc {
  position: absolute; z-index: 1; top: 0; bottom: 0;
  display: flex; align-items: center; padding-top: 12px;
  font: 400 76px/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, un giro di dodici caselle
   bianche attorno alla scritta, che gira piano. E' il gioco, in piccolo (in
   Ring Sumo, al suo posto, c'e' il cerchio di corda con l'apertura; in
   Balloon Royale la palla chiodata). */
.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 14s linear infinite; }
.tb-casella { 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); }
@keyframes tb-su { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }

/* LA RIGA, in fondo: sottile, del colore della squadra di sinistra per la
   parte del campo che ha, e del colore di quella di destra per il resto.
   Quanto e' larga la parte di sinistra lo decide color-clash.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, .tabellone.ultimi .tb-tempo, .tb-anello { animation: none; }
}
/* IL NOME DEL SITO, in mezzo fra le WIN delle due squadre, sotto il VS: la
   scritta di TikForge (TIK bianco, FORGE lilla). L'utente, 09/10/2026:
   "nello spazio rosso metti il nome di tikforge che con un fade in e out
   esce e riappare ogni tanto". Non sta li' fissa: compare piano, resta
   qualche secondo, scompare, e dopo un po' ritorna. Un giro dura 24 secondi:
   uno e mezzo per comparire, sei in vista, uno e mezzo per sparire, quindici
   via. Il giro comincia dal comparire: aperta la pagina si vede subito. Col
   tabellone nuovo e' pulita come il resto: niente contorno nero, un'ombra
   scura sotto. */
.tb-marchio {
  position: absolute; z-index: 1; left: 300px; right: 300px; top: 256px; margin: 0;
  text-align: center; white-space: nowrap; pointer-events: none;
  font: 400 32px/44px var(--display); letter-spacing: 0.06em; color: #fff;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  opacity: 0; animation: tb-marchio 24s ease-in-out infinite;
}
.tb-marchio b { font-weight: 400; color: var(--lilla); }
@keyframes tb-marchio { 0% { opacity: 0; } 6% { opacity: 1; } 31% { opacity: 1; } 37% { opacity: 0; } 100% { opacity: 0; } }
/* con "riduci le animazioni" resta ferma, in vista */
@media (prefers-reduced-motion: reduce) { .tb-marchio { animation: none; opacity: 1; } }

/* ------------------------------------------------------------ il carosello delle azioni
   Le voci delle AZIONI (la LISTA REGALI), 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:
   color-clash-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 color-clash-diretta.js: PASSO. */
/* LE MISURE A MANO della lista regali (color-clash.js: misure): --lista quanto
   e' grande (1 = di casa), --lista-via quanto sta lontana dal campo,
   --lista-spazio lo spazio fra un regalo e l'altro. La distanza si conta
   DAL CAMPO: se chi trasmette lo rimpicciolisce (--campo, 1 = intero; e'
   largo 1000 e alto 1125, col centro a 954) 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 campo o sui tasti. */
.giostra {
  position: absolute; left: calc(540px - 500px / var(--lista, 1)); top: calc(1540px - 562px * (1 - var(--campo, 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 color-clash-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; }
/* 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 campo, quella di destra a
   destra, ferme, centrate sul centro del campo (954). 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 color-clash-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 campo. 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: 954px; 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% + 44px + var(--lista-via, 0px) - 500px * (1 - var(--campo, 1))); transform-origin: 100% 50%; direction: rtl; }
.colonna-azioni.dx { left: calc(100% + 44px + var(--lista-via, 0px) - 500px * (1 - var(--campo, 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). 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 le azioni si fanno da parte: c'e' la festa del vincitore. */
[data-fase="end"] .giostra { opacity: 0.2; }
[data-fase="end"] .colonna-azioni { opacity: 0.35; transition: opacity .4s; }

/* ------------------------------------------------------------ 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 campo 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
   color-clash-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 pronte (scheda Squadre): una griglia di tasti, ognuno coi due
   loghi e "Tizio vs Caio" in mezzo. Quella scelta ha il bordo viola. */
.sfide { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sfida { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 6px 8px; border-radius: 12px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--ink); font: 700 13px/1.2 var(--corpo); text-align: center; cursor: pointer; }
.sfida:hover { border-color: rgba(168, 85, 247, 0.6); background: rgba(168, 85, 247, 0.1); }
.sfida.scelta-ora { border-color: var(--viola); background: rgba(168, 85, 247, 0.22); }
.sfida-logo { flex: none; width: 30px; height: 30px; object-fit: contain; }
.sfida-nomi { flex: 1; min-width: 0; }
@media (max-width: 520px) { .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; }
.riga .tasto.scelta { padding: 8px 12px; font-size: 13px; }
/* un nome o una parola scritti a mano */
.testo.largo { width: 250px; }
.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; }
}

/* LO STEMMA DI UNA SQUADRA PROPRIA: la sua miniatura nel menu, e un avviso. */
.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 (color-clash-diretta.js, apriCarica;
   la stessa di Balloon Royale):
   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; }

/* ================================================================
   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) */