/* TikForge 1 Vs 1 Battle — stili della pagina di gioco.
   Stessa impostazione di game.css (Stack): foglio autonomo, palette e font
   del sito, misure in --u (calcolata da JS sull'area di gioco) così la HUD
   scala con lo schermo e non con la finestra. La scena — foto, torri,
   pezzi, particelle — è nel canvas; qui c'è tutto quello che è testo o
   comando: intestazione, colonne dei trigger, schermate, pannelli. */

:root{
  color-scheme: dark;
  --bg: #000000;
  --bg-panel: #100918;
  --bg-panel-2: #150C20;
  --blue: #A855F7;
  --red: #7C1FD4;
  --ink: #F1E7FF;
  --muted: #B6A0CF;
  --line: rgba(214,190,245,0.08);
  --left: #FF4A53;
  --right: #4D6BFF;
  --green: #4FE38A;
  --neg: #FF6B6B;
  --gold: #FFD86B;
  --u: 4px;
  --hud-scale: 1;
  --rail-scale: 1;
}

*{ box-sizing: border-box; margin: 0; padding: 0; }
html, body{ height: 100%; }
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Nunito Sans', system-ui, sans-serif;
  line-height: 1.5;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
.mono{ font-family: 'JetBrains Mono', ui-monospace, monospace; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.noscript{ position: fixed; inset: auto 0 0 0; padding: 18px; text-align: center; color: var(--muted); font-size: 15px; background: var(--bg-panel); }

/* ---------------------------------------------------------------- struttura */

.game-root{ position: fixed; inset: 0; overflow: hidden; }
#board{ position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }
.stage{ position: absolute; left: 0; top: 0; pointer-events: none; overflow: hidden; --icon: clamp(34px, calc(var(--u) * 9.4), 44px); }

/* -------------------------------------------------------------------- HUD
   L'intestazione del riferimento: nome, blocchi e WINS di ciascuno sulle
   due metà, il VS in mezzo con la regola sotto. Tutto in DOM, così i
   caratteri restano nitidi e le misure sono clamp fluidi come in Stack.
   z-index 4: sopra le schermate, che il numero si legga anche dal menu. */
.hud{
  position: absolute; left: 0; right: 0; top: 0;
  padding: calc(clamp(10px, calc(var(--u) * 3), 20px) + env(safe-area-inset-top, 0px)) 0 0;
  display: flex; justify-content: center;
  pointer-events: none;
  z-index: 4;
  transform-origin: top center;
  transform: scale(var(--hud-scale));
}
/* Nome e Wins stanno sulla VERTICALE DELLA TORRE (--tower-dx, in pixel
   dal centro dello schermo, lo scrive relayout in 1vs1-battle.js), non al
   centro della metà: le torri sono più vicine al centro dello schermo. */
.hud-side{
  position: absolute; top: calc(clamp(14px, calc(var(--u) * 4), 26px) + clamp(10px, calc(var(--u) * 3), 20px) + env(safe-area-inset-top, 0px));
  display: flex; flex-direction: column; align-items: center; gap: clamp(4px, calc(var(--u) * 1.4), 10px);
  transform: translateX(-50%);
}
.hud-side-left{ left: calc(50% - var(--tower-dx, 25vw)); }
.hud-side-right{ left: calc(50% + var(--tower-dx, 25vw)); }
.hud-name{
  font-family: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif;
  font-weight: 400; line-height: 1;
  font-size: clamp(22px, calc(var(--u) * 8.4), 54px);
  letter-spacing: 0.03em;
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 0 8px;
  /* contorno NERO spesso, niente ombra: l'ombra che c'era (spostata di 4px
     più un alone) si leggeva come un fondo dietro al nome */
  -webkit-text-stroke: clamp(2.5px, calc(var(--u) * 1.2), 7px) #000;
  paint-order: stroke fill;
  text-shadow: none;
}
.hud-side-left .hud-name{ color: var(--left); }
.hud-side-right .hud-name{ color: var(--right); }
/* Il numero dei blocchi non sta più qui: è dipinto nella scena, sopra la
   cima di ogni torre (drawCounts in 1vs1-battle.js), e sale con lei. */
/* "Wins: x/y" come il WinHud dei giochi Roblox (WinHud.client.lua):
   Luckiest Guy, niente sfondo né bordi, contorno nero spesso (4.5 lì),
   bianco a zero e verde sopra. */
.hud-wins{
  font-family: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif; font-weight: 400;
  font-size: clamp(18px, calc(var(--u) * 5.6), 32px); line-height: 1.1;
  letter-spacing: 0.03em; white-space: nowrap;
  color: #46C85A;
  -webkit-text-stroke: clamp(2px, calc(var(--u) * 0.9), 4.5px) #000; paint-order: stroke fill;
}
.hud-wins.is-zero{ color: #FFFFFF; }   /* a zero bianco, non giallo (su richiesta) */
.hud-wins.is-neg{ color: #FF6B6B; }    /* sotto zero rosso: il negativo si vede */
.hud-wins b, .hud-wins span{ font-weight: 400; }
/* Il VS: l'immagine di fuoco (game/1vs1-battle/vs-badge.png), più in basso
   dei nomi, fra le due torri. */
.hud-mid{ display: flex; flex-direction: column; align-items: center; padding-top: clamp(70px, calc(var(--u) * 30), 200px); }
.hud-vs{
  width: clamp(72px, calc(var(--u) * 26), 170px); height: auto;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
}

/* ------------------------------------------------------------- comandi
   Tondi, in alto a destra, come in Stack. Con le schermate aperte restano
   raggiungibili (z-index 5). */
.hud-tools{
  position: absolute; z-index: 5;
  top: calc(clamp(10px, calc(var(--u) * 3), 20px) + env(safe-area-inset-top, 0px));
  right: calc(clamp(10px, calc(var(--u) * 3), 20px) + env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: clamp(6px, calc(var(--u) * 1.8), 10px);
}
.icon-btn{
  width: var(--icon); height: var(--icon);
  border-radius: 50%;
  background: rgba(16,9,24,0.66); border: 1px solid var(--line);
  color: var(--ink);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: grid; place-items: center;
  cursor: pointer; pointer-events: auto;
  transition: border-color .2s ease, background-color .2s ease, transform .15s ease, color .2s ease;
}
.icon-btn:hover{ border-color: var(--blue); color: #fff; transform: translateY(-1px); }
.icon-btn:active{ transform: scale(.93); }
.icon-btn[aria-expanded="true"]{ border-color: var(--blue); background: rgba(168,85,247,0.22); }
.icon-btn svg{ width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn svg .ico-fill{ fill: currentColor; stroke: none; }
#btnMute .ico-off{ display: none; }
#btnMute[aria-pressed="true"]{ color: var(--muted); }
#btnMute[aria-pressed="true"] .ico-on{ display: none; }
#btnMute[aria-pressed="true"] .ico-off{ display: block; }

/* Pallino della diretta, in alto a sinistra: verde in diretta, grigio senza,
   ambra se non si è loggati (data-live sul .game-root). */
.live-dot{
  position: absolute; z-index: 5;
  top: calc(clamp(8px, calc(var(--u) * 2.4), 16px) + env(safe-area-inset-top, 0px));
  left: calc(clamp(10px, calc(var(--u) * 3), 20px) + env(safe-area-inset-left, 0px));
  display: flex; align-items: center; gap: 8px;
  /* una pillola vera, col font del gioco e un filo più grande (01/09) */
  padding: 6px 12px 5px; border-radius: 999px;
  background: rgba(10,5,18,0.55); border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  font-family: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif; font-weight: 400; font-size: 13.5px;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  text-shadow: 0 2px 4px rgba(0,0,0,0.5);
  pointer-events: none;
}
.live-dot::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: #6B6280; flex: none; }
.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; }

/* ------------------------------------------------------------ colonne
   I trigger, nello stile della legenda regali dei giochi Roblox
   (GiftLegendHud.client.lua): immagine del regalo nuda, sotto la targhetta
   "+N" in Luckiest Guy bianco col contorno spesso (4.5 lì), gradiente
   lucido a tre toni e bordo scuro. Palette della SQUADRA — rossa a sinistra,
   blu a destra — non verde/rosso. Stanno fra il bordo e la torre (al 27% e
   al 73% della larghezza), non incollate al bordo. Cliccabili. */
.rail{
  position: absolute; z-index: 3;
  /* la colonna sta centrata fra l'11% e l'89% dell'altezza: STESSO respiro
     sopra e sotto, qualunque sia il numero di righe — togli o aggiungi un
     trigger e il blocco resta in mezzo (il flex centra, lo zoom di
     buildRails lo fa stare dentro) */
  top: 11%; bottom: 11%;
  width: clamp(64px, calc(var(--u) * 20), 100px);
  display: flex; flex-direction: column; justify-content: center;
  gap: clamp(4px, calc(var(--u) * 1.6), 10px);
  list-style: none;
  pointer-events: none;
  transform: translateX(-50%) scale(var(--rail-scale));
  /* origine al centro: anche scalata, la colonna resta centrata in verticale */
  transform-origin: center center;
  /* i tre toni del gradiente e il bordo, per squadra (vedi sotto) */
  --c1: #EB5A64; --c2: #D2373C; --c3: #780F14; --cs: #5A0A0F;
}
/* --rail-shift (Schermo → Distanza dal centro, 02/09): le due colonne si
   allontanano o avvicinano al centro A SPECCHIO, 0 = com'erano (27% / 73%) */
.rail-left{ left: calc(27% - var(--rail-shift, 0%)); }
.rail-right{ left: calc(73% + var(--rail-shift, 0%)); --c1: #6A82FF; --c2: #2E4BE0; --c3: #10207A; --cs: #0A155A; }
.no-rails .rail{ display: none; }
/* il segno "↔" sulla targhetta di un trigger condiviso (in tutte e due le colonne) */
.trig.is-both{ position: relative; }
.trig-both{ position: absolute; right: -6px; top: -4px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 800; font-size: 13px; line-height: 1; color: #FFFFFF; background: var(--blue); border: 2px solid rgba(5,1,10,0.7); box-shadow: 0 2px 6px rgba(0,0,0,0.45); pointer-events: none; }
.trig{
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(3px, calc(var(--u) * 1), 6px);
  text-align: center; cursor: pointer; pointer-events: auto;
  transition: transform .12s ease;
}
.trig:hover{ transform: scale(1.06); }
.trig:active{ transform: scale(.94); }
/* la riga si accende quando il suo evento è appena scattato */
.trig.is-on .trig-ico{ animation: trig-on .9s cubic-bezier(.2,1.6,.4,1); }
@keyframes trig-on{ 0%{ transform: scale(1); } 30%{ transform: scale(1.35); } 100%{ transform: scale(1); } }
.trig-ico{ width: clamp(36px, calc(var(--u) * 10.5), 52px); height: clamp(36px, calc(var(--u) * 10.5), 52px); display: grid; place-items: center; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.55)); }
.trig-ico img, .trig-ico svg{ width: 100%; height: 100%; object-fit: contain; }
/* follow e like: un'emoji al posto dell'icona disegnata */
.trig-emoji{ font-size: clamp(26px, calc(var(--u) * 8), 38px); line-height: 1; }
/* la parola in chat / "x10" dei like: sopra l'icona, stesso carattere della targhetta */
.trig-word{
  font-family: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif; font-weight: 400; line-height: 1.1;
  font-size: clamp(9px, calc(var(--u) * 2.6), 12px); letter-spacing: 0.04em;
  color: #fff; -webkit-text-stroke: 2.5px var(--cs); paint-order: stroke fill;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* la targhetta dell'importo: chip lucido con bordo, testo bianco col
   contorno spesso nella tinta del bordo */
.trig-badge{
  min-width: 68%; padding: 1px 9px 0;
  border-radius: 7px;
  background: linear-gradient(180deg, var(--c1) 0%, var(--c2) 50%, var(--c3) 100%);
  border: 3px solid var(--cs);
  box-shadow: 0 4px 10px rgba(0,0,0,0.45);
  font-family: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif; font-weight: 400; line-height: 1.15;
  font-size: clamp(13px, calc(var(--u) * 3.6), 18px); letter-spacing: 0.02em;
  color: #fff; -webkit-text-stroke: 3px var(--cs); paint-order: stroke fill;
  white-space: nowrap;
}

/* Watermark in alto al centro, sopra il VS: viola del brand, col contorno
   scuro come il resto dei testi di scena. */
.watermark{
  position: absolute; z-index: 5; left: 50%; top: calc(8px + env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(15px, calc(var(--u) * 4.2), 21px); letter-spacing: 0.1em;
  /* bianca con una sfumatura viola verso il basso; niente contorno (a
     questa taglia mangiava il riempimento), l'alone viola lo fa il
     drop-shadow, che segue i pixel del gradiente */
  background: linear-gradient(180deg, #FFFFFF 45%, #D6BEF5 78%, #B98AF0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(168,85,247,0.75)) drop-shadow(0 2px 4px rgba(0,0,0,0.45));
  pointer-events: none;
}

/* Copyright nell'angolo in basso a destra, come negli altri giochi web
   (pop-shot.css): una scritta, non deve mai rubare un click. */
.copyright{
  position: absolute; z-index: 4;
  right: max(10px, env(safe-area-inset-right, 0px));
  bottom: max(6px, env(safe-area-inset-bottom, 0px));
  font-size: clamp(12px, calc(var(--u) * 3), 15px); font-weight: 700; color: var(--ink);
  opacity: .85;
  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
  pointer-events: none;
  user-select: none;
}

/* ------------------------------------------------------------------ WIN */

/* La WIN di una torre (02/09): non più una scritta oro in mezzo allo
   schermo ("non si capisce"), ma SUL LATO della torre che ha vinto, alla
   stessa --tower-dx di nome e Wins: due onde nel colore della squadra che
   si allargano dal centro della metà, "WIN!" che piomba giù e rimbalza,
   il nome della squadra nel suo colore sotto, poi tutto sale e svanisce
   (1.7 s, lo stesso tempo del timer che la nasconde in settle). */
.win-burst{
  position: absolute; top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 6; pointer-events: none; white-space: nowrap; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: clamp(2px, calc(var(--u) * 1), 8px);
  max-width: 48vw;
}
.win-burst.is-left{ left: calc(50% - var(--tower-dx, 25vw)); }
.win-burst.is-right{ left: calc(50% + var(--tower-dx, 25vw)); }
.win-burst[hidden]{ display: none; }
.wb-main{
  font-family: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif; font-weight: 400; letter-spacing: 0.04em; line-height: 1;
  font-size: clamp(48px, calc(var(--u) * 20), 150px);
  /* come il contatore dei blocchi sulla torre (drawCounts): bianco che
     sfuma nel chiaro della squadra, bordo sottile, alone del suo colore */
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 45%, var(--wb-spark, #FFF6D8) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: clamp(1.5px, calc(var(--u) * 0.7), 3.5px) #000; paint-order: stroke fill;
  filter: drop-shadow(0 3px 0 rgba(8,3,16,0.55)) drop-shadow(0 0 22px var(--wb-glow, rgba(255,216,107,0.6)));
}
.wb-name{
  font-family: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif; font-weight: 400; letter-spacing: 0.05em; line-height: 1;
  font-size: clamp(20px, calc(var(--u) * 8), 56px);
  color: #FFFFFF; -webkit-text-stroke: clamp(1.5px, calc(var(--u) * 0.6), 3px) #000; paint-order: stroke fill;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  filter: drop-shadow(0 2px 0 rgba(8,3,16,0.55)) drop-shadow(0 6px 20px rgba(0,0,0,0.45));
}
.win-burst.is-left .wb-name{ color: var(--left); }
.win-burst.is-right .wb-name{ color: var(--right); }
.win-burst::before, .win-burst::after{
  content: ''; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: clamp(120px, calc(var(--u) * 40), 300px); height: clamp(120px, calc(var(--u) * 40), 300px);
  border-radius: 50%; border: clamp(4px, calc(var(--u) * 1.6), 10px) solid #FFD86B; opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  box-shadow: 0 0 30px rgba(255,216,107,0.35), inset 0 0 30px rgba(255,216,107,0.25);
}
.win-burst.is-left::before, .win-burst.is-left::after{ border-color: var(--left); }
.win-burst.is-right::before, .win-burst.is-right::after{ border-color: var(--right); }
.win-burst.is-on{ animation: wb-hold 1.7s linear both; }
.win-burst.is-on .wb-main{ animation: wb-slam 1s ease-in-out both; }
.win-burst.is-on .wb-name{ animation: wb-rise .3s ease-out .1s both; }
.win-burst.is-on::before{ animation: wb-ring 1s ease-out both; }
.win-burst.is-on::after{ animation: wb-ring 1s ease-out .2s both; }
/* lo zoom: appare, si gonfia, RESTA gonfia un attimo e torna a posto.
   Niente rimbalzi né gelatina — solo "WIN!", il nome sotto resta fermo */
@keyframes wb-slam{
  0%{ opacity: 0; transform: scale(.8); }
  15%{ opacity: 1; transform: scale(1.22); }
  60%{ transform: scale(1.22); }
  100%{ opacity: 1; transform: scale(1); }
}
@keyframes wb-rise{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes wb-ring{ from{ opacity: .95; transform: translate(-50%, -50%) scale(.2); } to{ opacity: 0; transform: translate(-50%, -50%) scale(3.4); } }
@keyframes wb-hold{ 0%, 72%{ opacity: 1; transform: translate(-50%, -50%); } 100%{ opacity: 0; transform: translate(-50%, calc(-50% - 70px)); } }

/* ---------------------------------------------------------------- schermate */

.screen{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(14px, calc(var(--u) * 4), 32px);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .3s cubic-bezier(.22,.9,.3,1), visibility .3s;
  z-index: 7;
}
.screen.is-visible{ opacity: 1; visibility: visible; pointer-events: auto; }
.screen::before{
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(120% 78% at 50% 26%, rgba(124,31,212,0.22), transparent 62%), rgba(5,1,10,0.72);
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
}
.panel{
  position: relative; width: 100%;
  max-width: clamp(258px, calc(var(--u) * 76), 400px);
  text-align: center;
  background: linear-gradient(180deg, rgba(21,12,32,0.94), rgba(16,9,24,0.94));
  border: 1px solid var(--line);
  border-radius: clamp(16px, calc(var(--u) * 4.6), 26px);
  padding: clamp(20px, calc(var(--u) * 6), 36px) clamp(16px, calc(var(--u) * 5), 32px);
  box-shadow: 0 26px 70px rgba(0,0,0,0.62), inset 0 0 0 1px rgba(168,85,247,0.05);
  transform: translateY(calc(var(--u) * 3.2)) scale(.965); opacity: 0;
  transition: transform .42s cubic-bezier(.16,1,.3,1), opacity .3s ease;
}
.is-visible .panel{ transform: none; opacity: 1; transition-delay: .06s; }
.panel::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); }
.panel--wide{ max-width: min(560px, 96vw); max-height: calc(100vh - 28px); overflow-y: auto; overscroll-behavior: contain; text-align: left; padding-top: clamp(14px, calc(var(--u) * 4), 22px); }

.brand{ display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: clamp(13px, calc(var(--u) * 3.6), 16px); text-decoration: none; pointer-events: auto; }
.brand:hover{ color: var(--ink); }
.brand img{ width: clamp(20px, calc(var(--u) * 6), 28px); height: auto; }
.title{
  font-family: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif;
  font-weight: 400; letter-spacing: 0.03em; line-height: 1.08;
  font-size: clamp(36px, calc(var(--u) * 10.5), 72px);
  margin: clamp(8px, calc(var(--u) * 2.6), 16px) 0 0;
  background: linear-gradient(178deg, #FFFFFF 6%, var(--blue) 58%, var(--red) 104%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.title small{ display: block; font-size: 0.42em; letter-spacing: 0.12em; margin-top: 4px; }
.tagline{ margin: clamp(8px, calc(var(--u) * 2.6), 15px) auto 0; max-width: 34ch; color: var(--muted); font-size: clamp(12.5px, calc(var(--u) * 3.4), 15px); line-height: 1.45; }
.hint{ margin-top: clamp(12px, calc(var(--u) * 3.4), 20px); font-size: clamp(10.5px, calc(var(--u) * 2.8), 12.5px); color: rgba(182,160,207,0.72); }
kbd{ font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 0.92em; border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; background: rgba(255,255,255,0.04); }
.panel-actions{ margin-top: clamp(16px, calc(var(--u) * 5), 28px); display: flex; flex-wrap: wrap; gap: clamp(8px, calc(var(--u) * 2.4), 12px); justify-content: center; }

/* Fine partita: obiettivo WIN raggiunto, il vincitore a schermo intero.
   Niente pannello: tutto lo schermo si tinge della squadra (--win, --win-glow
   e --win-spark li scrive checkGoal), con i raggi che girano dietro al
   trofeo e una pioggia di coriandoli continua (gli span li genera
   buildOverConfetti, uno per pezzo). L'ingresso è a scatti: flash, raggi,
   scritta, trofeo che rimbalza, nome, riga e tasto. Le animazioni partono
   quando la schermata prende .is-visible, così ripartono a ogni vittoria. */
.screen--over{ --win: #FFD86B; --win-spark: #FFF6D8; --win-glow: rgba(255,216,107,0.5); overflow: hidden; }
.screen--over::before{
  background: radial-gradient(120% 82% at 50% 32%, var(--win-glow), transparent 62%), rgba(5,1,10,0.8);
}
.over-flash{
  position: absolute; inset: 0; background: #FFFFFF; opacity: 0; pointer-events: none; z-index: 3;
}
.screen--over.is-visible .over-flash{ animation: over-flash .75s ease-out both; }
@keyframes over-flash{ from{ opacity: .95; } to{ opacity: 0; } }
.over-rays{
  position: absolute; left: 50%; top: 44%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax;
  pointer-events: none; z-index: 0; opacity: 0;
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0,0,0,0.75) 22%, transparent 58%);
  mask: radial-gradient(circle, #000 0%, rgba(0,0,0,0.75) 22%, transparent 58%);
}
.over-rays::before{
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--win-glow) 0deg 7deg, transparent 7deg 20deg);
  animation: over-rays-spin 70s linear infinite;
}
.screen--over.is-visible .over-rays{ animation: over-rays-in 1.1s cubic-bezier(.16,1,.3,1) both; }
@keyframes over-rays-in{ from{ opacity: 0; transform: scale(.15) rotate(-35deg); } to{ opacity: .72; transform: none; } }
@keyframes over-rays-spin{ to{ transform: rotate(1turn); } }
.over-confetti{ position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.over-confetti span{
  position: absolute; top: 0; left: var(--x);
  width: var(--w); height: var(--h); background: var(--c); border-radius: var(--r);
  box-shadow: 0 0 6px rgba(255,255,255,0.25);
  transform: translate3d(0, -10vh, 0);
  animation: over-confetti var(--d) linear var(--delay) infinite;
  will-change: transform;
}
@keyframes over-confetti{
  0%{ transform: translate3d(0, -10vh, 0) rotate3d(1, .6, .3, 0turn); opacity: 1; }
  88%{ opacity: 1; }
  100%{ transform: translate3d(var(--sx), 110vh, 0) rotate3d(1, .6, .3, var(--spin)); opacity: 0; }
}
.over-stage{ position: relative; z-index: 2; text-align: center; width: 100%; max-width: min(760px, 96vw); }
.over-kicker{
  margin: 0; opacity: 0;
  font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.38em; text-indent: 0.38em;
  font-size: clamp(13px, calc(var(--u) * 4.2), 22px);
  background: linear-gradient(176deg, #FFF6D8 4%, #FFD86B 46%, #FF9E5E 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(8,3,16,0.6)) drop-shadow(0 6px 22px rgba(255,180,90,0.45));
}
.over-trophy{
  margin: clamp(4px, calc(var(--u) * 1.5), 10px) 0 0; opacity: 0; line-height: 1;
  font-size: clamp(88px, calc(var(--u) * 34), 190px);
  filter: drop-shadow(0 10px 0 rgba(8,3,16,0.45)) drop-shadow(0 0 34px rgba(255,216,107,0.7)) drop-shadow(0 24px 70px var(--win-glow));
}
.over-name{
  font-family: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif;
  font-weight: 400; letter-spacing: 0.03em; line-height: 1.05; opacity: 0;
  font-size: clamp(54px, calc(var(--u) * 22), 132px);
  margin: clamp(2px, calc(var(--u) * 1), 8px) 0 0;
  /* come il contatore dei blocchi sulla torre: bianco che sfuma nel chiaro
     della squadra, bordo sottile (02/09) */
  background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 45%, var(--win-spark) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: clamp(1.5px, calc(var(--u) * 0.8), 4px) #000; paint-order: stroke fill;
  filter: drop-shadow(0 6px 0 rgba(8,3,16,0.7)) drop-shadow(0 0 26px var(--win-glow)) drop-shadow(0 18px 60px var(--win-glow));
  overflow-wrap: anywhere;
}
.over-sub{
  margin: clamp(10px, calc(var(--u) * 3), 18px) auto 0; max-width: 34ch; opacity: 0;
  color: rgba(241,231,255,0.86); font-size: clamp(14px, calc(var(--u) * 4.2), 20px); line-height: 1.45;
  text-shadow: 0 2px 0 rgba(8,3,16,0.7), 0 6px 22px rgba(0,0,0,0.55);
}
.over-sub b{ color: #FFFFFF; font-weight: 800; }
.screen--over .panel-actions{ opacity: 0; }
.screen--over .btn-primary{
  background: var(--win); color: #FFFFFF; text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 26px var(--win-glow);
}
.screen--over .btn-primary:hover{ box-shadow: 0 14px 34px rgba(0,0,0,0.5), 0 0 44px var(--win-glow); }
.screen--over.is-visible .over-kicker{ animation: over-drop .7s cubic-bezier(.16,1,.3,1) .35s both; }
.screen--over.is-visible .over-trophy{ animation: over-trophy-in 1s cubic-bezier(.16,1.45,.3,1) .45s both, over-float 3.2s ease-in-out 1.45s infinite; }
.screen--over.is-visible .over-name{ animation: over-name-in .8s cubic-bezier(.16,1.35,.3,1) .8s both, over-glow 2.4s ease-in-out 1.6s infinite; }
.screen--over.is-visible .over-sub{ animation: over-rise .7s cubic-bezier(.16,1,.3,1) 1.15s both; }
.screen--over.is-visible .panel-actions{ animation: over-rise .7s cubic-bezier(.16,1,.3,1) 1.4s both; }
.screen--over.is-visible .btn-primary{ animation: over-pulse 1.8s ease-in-out 2.1s infinite; }
@keyframes over-drop{ from{ opacity: 0; transform: translateY(-26px); letter-spacing: 0.9em; } to{ opacity: 1; transform: none; letter-spacing: 0.38em; } }
@keyframes over-trophy-in{ from{ opacity: 0; transform: scale(0) rotate(-24deg); } 60%{ opacity: 1; } to{ opacity: 1; transform: scale(1) rotate(0); } }
@keyframes over-float{ 0%, 100%{ transform: translateY(0) rotate(-3deg); } 50%{ transform: translateY(-12px) rotate(3deg); } }
@keyframes over-name-in{ from{ opacity: 0; transform: scale(.25) rotate(-5deg); } 60%{ opacity: 1; } to{ opacity: 1; transform: scale(1) rotate(0); } }
@keyframes over-glow{
  0%, 100%{ filter: drop-shadow(0 6px 0 rgba(8,3,16,0.7)) drop-shadow(0 0 26px var(--win-glow)) drop-shadow(0 18px 60px var(--win-glow)); }
  50%{ filter: drop-shadow(0 6px 0 rgba(8,3,16,0.7)) drop-shadow(0 0 44px var(--win-glow)) drop-shadow(0 18px 90px var(--win-glow)); }
}
@keyframes over-rise{ from{ opacity: 0; transform: translateY(22px); } to{ opacity: 1; transform: none; } }
@keyframes over-pulse{ 0%, 100%{ transform: scale(1); } 50%{ transform: scale(1.06); } }

.btn{
  font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 700;
  font-size: clamp(13.5px, calc(var(--u) * 3.6), 16px);
  padding: clamp(11px, calc(var(--u) * 3.1), 15px) clamp(20px, calc(var(--u) * 6.4), 32px);
  border-radius: 999px; border: 1px solid transparent; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  pointer-events: auto;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}
.btn-primary{ background: var(--blue); color: #F1E7FF; box-shadow: 0 0 20px rgba(168,85,247,0.32); }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 34px rgba(168,85,247,0.55); }
.btn-primary:active{ transform: translateY(0) scale(.97); }
.btn-outline{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover{ transform: translateY(-2px); border-color: var(--red); box-shadow: 0 0 22px rgba(124,31,212,0.3); }
.btn-play{ font-size: clamp(15px, calc(var(--u) * 4.4), 19px); padding: clamp(13px, calc(var(--u) * 3.8), 18px) clamp(34px, calc(var(--u) * 10), 56px); }

/* ---------------------------------------------------------- impostazioni
   Una schermata a schede: Sfide / Sfidanti / Colori / Cielo / Trigger /
   Schermo. Le modifiche si applicano subito e si salvano: "Fatto" chiude
   e basta. Sei schede: su uno schermo stretto vanno a capo. */
.tabs{ display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(255,255,255,0.04); border: 1px solid var(--line); margin-bottom: clamp(12px, calc(var(--u) * 3.4), 18px); }
.tab{
  flex: 1 1 auto; padding: 9px 6px; border-radius: 9px; border: 1px solid transparent;
  background: transparent; color: var(--muted);
  font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 13.5px;
  cursor: pointer; pointer-events: auto;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tab:hover{ color: var(--ink); }
.tab.is-on{ background: rgba(168,85,247,0.18); border-color: rgba(168,85,247,0.42); color: var(--ink); }
[data-pane][hidden]{ display: none; }

/* Sfide pronte: una riga a tutta larghezza per sfida, nome sopra e
   immagine sotto su ogni lato, il VS in mezzo. Le immagini stanno in
   una scatola fissa (le larghe come Coca-Cola si adattano dentro), così
   le righe sono tutte alte uguali. La scelta attiva resta accesa. */
.tpl-list{ display: flex; flex-direction: column; gap: 8px; margin: 0 0 6px; }
.tpl-row{
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  width: 100%; padding: 10px 14px; border-radius: 14px;
  border: 1px solid var(--line); background: rgba(214,190,245,0.05); color: var(--ink);
  cursor: pointer; pointer-events: auto; text-align: center;
  transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease;
}
.tpl-row:hover{ border-color: rgba(214,190,245,0.35); background: rgba(214,190,245,0.09); }
.tpl-row.is-on{ border-color: var(--blue); background: rgba(168,85,247,0.18); box-shadow: 0 0 0 1px var(--blue) inset, 0 0 18px rgba(168,85,247,0.25); }
.tpl-side{ display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.tpl-side b{ font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: 14px; line-height: 1.1; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tpl-side img{ width: 120px; height: 56px; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.5)); }
.tpl-vs{ width: 44px; height: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)); }
/* il pannello di prova: colonne riempite dal JS coi trigger veri; sotto,
   gli eventi (follow/like) su tutta la larghezza */
.test-events{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.test-events .test-btn{ flex: 1 1 45%; }
.test-events:empty{ display: none; }

/* la riga "Sfida tra MVP": un "?" dorato al posto delle immagini (gli
   sfidanti ancora non ci sono) e la spiegazione su tutta la larghezza */
.tpl-q{ width: 120px; height: 56px; display: flex; align-items: center; justify-content: center; font-family: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif; font-size: 40px; color: #FFC94D; text-shadow: 0 3px 8px rgba(0,0,0,0.5); }
.tpl-mvp-note{ grid-column: 1 / -1; font-style: normal; font-size: 11.5px; line-height: 1.35; color: var(--muted); margin-top: 2px; }

/* Chip (coppie di colori, cieli): due-tre per riga; la scelta attiva resta accesa. */
.tpl-grid{ display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; }
.tpl-chip{
  font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 12.5px;
  padding: 7px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(214,190,245,0.05); color: var(--ink);
  cursor: pointer; pointer-events: auto;
  transition: border-color .12s ease, background-color .12s ease;
}
.tpl-chip:hover{ border-color: rgba(214,190,245,0.35); }
.tpl-chip.is-on{ border-color: var(--blue); background: rgba(168,85,247,0.18); }

/* I colori di ogni lato: un campione per colore della tavolozza (li
   costruisce 1vs1-battle.js), quello scelto ha l'anello. */
.swatches{ display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: 190px; }
.swatch{
  width: 24px; height: 24px; border-radius: 50%; padding: 0;
  background: var(--sw, #fff);
  border: 2px solid rgba(255,255,255,0.25);
  box-shadow: 0 2px 6px rgba(0,0,0,0.45);
  cursor: pointer; pointer-events: auto;
  transition: transform .12s ease, border-color .12s ease;
}
.swatch:hover{ transform: scale(1.12); }
.swatch.is-on{ border-color: #fff; box-shadow: 0 0 0 2px var(--sw, #fff), 0 2px 6px rgba(0,0,0,0.45); }
/* le coppie pronte: due pallini coi colori e i nomi */
.pair-chip{ display: inline-flex; align-items: center; gap: 5px; text-transform: capitalize; }
.pair-chip i{ width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); flex: none; }
.pair-chip i + i{ margin-left: -3px; margin-right: 3px; }
/* le targhette dei malus (−100, −5 W): sfondo come le altre (il gradiente
   della squadra), ma il TESTO è rosso — ripensata il 01/09, prima era
   tutto lo sfondo a diventare rosso */
.trig-badge.is-neg{ color: #FF5252; }
/* i cieli: un'anteprima tonda del tema (il gradiente lo mette il JS) e il nome */
.bg-chip{ display: inline-flex; align-items: center; gap: 7px; }
.bg-chip i{ width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.35); flex: none; }

.set-title{ margin: 14px 0 6px 2px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.set-title:first-child{ margin-top: 0; }
.set-title.is-left{ color: var(--left); }
.set-title.is-right{ color: var(--right); }
.set-row{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 2px; }
.set-row + .set-row{ border-top: 1px solid rgba(168,85,247,0.12); }
.set-label{ font-size: 12.5px; font-weight: 600; color: var(--muted); line-height: 1.25; }
.set-ctl{ display: flex; align-items: center; gap: 4px; flex: none; }
.set-btn{
  width: 26px; height: 26px; flex: none; border-radius: 7px;
  border: 1px solid var(--line); background: rgba(255,255,255,0.04); color: var(--ink);
  font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 15px; font-weight: 700; line-height: 1;
  display: grid; place-items: center; cursor: pointer; pointer-events: auto;
  transition: background-color .18s ease, border-color .18s ease, transform .12s ease;
}
.set-btn:hover{ background: rgba(168,85,247,0.18); border-color: rgba(168,85,247,0.45); }
.set-btn:active{ transform: scale(.9); }
.set-val{ min-width: 40px; text-align: center; font-size: 13px; font-weight: 600; color: var(--ink); }
/* setGoal è un <input number>, non più un <b>: si clicca e si digita,
   niente più solo frecce. Le frecce native del browser sparano perché
   ci sono già i pulsanti −/+ a fianco. */
input.set-val{
  width: 52px; padding: 4px 2px; font-family: inherit;
  background: rgba(214,190,245,0.06); border: 1px solid var(--line); border-radius: 7px; outline: none;
  -moz-appearance: textfield;
}
input.set-val:focus{ border-color: rgba(168,85,247,0.6); }
input.set-val::-webkit-outer-spin-button, input.set-val::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
.set-reset{
  width: 100%; margin-top: 10px; padding: 7px 10px; border-radius: 9px;
  border: 1px solid var(--line); background: transparent; color: var(--muted);
  font-family: 'Nunito Sans', system-ui, sans-serif; font-size: 11.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; pointer-events: auto;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.set-reset:hover{ border-color: var(--red); color: var(--ink); background: rgba(124,31,212,0.18); }
.set-reset.is-danger:hover{ border-color: #E2453A; background: rgba(226,69,58,0.18); }
.set-reset.is-armed, .set-reset.is-armed:hover{ border-color: #E2453A; background: #E2453A; color: #FFFFFF; animation: quick-armed .7s ease-out infinite; }
#btnResetSetup{ margin-top: 14px; }
.set-note{ font-size: 11.5px; line-height: 1.5; color: var(--muted); opacity: .85; margin: 6px 2px 0; }

.set-row input[type="text"], .set-row input[type="number"]{
  padding: 7px 9px; font: inherit; font-size: 13px; color: var(--ink);
  background: rgba(214,190,245,0.06); border: 1px solid var(--line); border-radius: 9px; outline: none;
  pointer-events: auto;
}
.set-row input[type="text"]{ width: 150px; }
.set-row input[type="text"]:focus{ border-color: rgba(168,85,247,0.6); }
select option{ background: var(--bg-panel-2); color: var(--ink); }
.photo-ctl{ display: flex; align-items: center; gap: 6px; }
.photo-ctl input[type="file"]{ width: 128px; font-size: 11px; color: var(--muted); pointer-events: auto; }
.photo-ctl input[type="file"]::file-selector-button{
  font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 12px;
  padding: 6px 10px; margin-right: 8px; border-radius: 8px;
  border: 1px solid var(--line); background: rgba(214,190,245,0.06); color: var(--ink); cursor: pointer;
}
.photo-clear{ width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; pointer-events: auto; }
.photo-clear:hover{ color: var(--ink); border-color: rgba(214,190,245,0.35); }

/* Editor dei trigger a SCHEDE (02/09): tre sezioni (sinistra, destra,
   tutte e due), una scheda per regola. In alto COSA arriva (regalo col
   catalogo a tendina, parola, "ogni N like", follow), il selettore "per
   chi" e la ×; in basso le chip di COSA FA e l'importo con l'unità. */
.tsec{ margin-top: 14px; }
.tsec:first-of-type{ margin-top: 8px; }
.set-title.is-both{ color: var(--blue); }
.tlist{ display: flex; flex-direction: column; gap: 8px; }
.tempty{ margin: 0; padding: 12px; text-align: center; font-size: 12px; color: var(--muted); opacity: .75; border: 1px dashed var(--line); border-radius: 12px; }
.tcard{
  position: relative; padding: 9px 10px 10px;
  border-radius: 13px; border: 1px solid var(--line); border-left: 3px solid var(--muted);
  background: rgba(214,190,245,0.045);
}
.tcard.is-left{ border-left-color: var(--left); }
.tcard.is-right{ border-left-color: var(--right); }
.tcard.is-both{ border-left-color: var(--blue); }
.tcard.is-new{ animation: tcard-in .5s cubic-bezier(.16,1,.3,1); }
@keyframes tcard-in{ from{ opacity: 0; transform: translateY(-6px); } }
.tcard-head{ display: flex; align-items: center; gap: 8px; }
.tcard-what{ display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; }
.tcard-pick{
  display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%;
  padding: 3px 10px 3px 4px; border-radius: 10px;
  border: 1px solid var(--line); background: rgba(16,9,24,0.5); color: var(--ink);
  font: inherit; cursor: pointer; pointer-events: auto; text-align: left;
  transition: border-color .18s ease, background-color .18s ease;
}
.tcard-pick:hover, .tcard.is-picking .tcard-pick{ border-color: rgba(168,85,247,0.6); background: rgba(168,85,247,0.12); }
.tcard-pick img{ width: 40px; height: 40px; object-fit: contain; flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.tcard-gname{ font-weight: 800; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tcard-gd{ font-size: 11.5px; color: var(--muted); white-space: nowrap; }
.tcard-chev{ color: var(--muted); font-size: 12px; margin-left: 2px; }
.tcard-ico{ width: 40px; height: 40px; display: grid; place-items: center; flex: none; font-size: 26px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4)); }
.tcard-ico svg{ width: 30px; height: 30px; }
.tcard-kind{ font-weight: 800; font-size: 13.5px; }
.tcard-sub{ font-size: 11.5px; color: var(--muted); }
.tcard-word{ flex: 1 1 auto; min-width: 0; width: 100%; }
.tcard-word.is-dup{ border-color: var(--neg) !important; box-shadow: 0 0 0 2px rgba(255,107,107,0.2); }
.tcard-every{ display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.tcard-every input{ width: 74px; }
.tcard input[type="text"], .tcard input[type="search"], .tcard input[type="number"]{
  padding: 7px 9px; font: inherit; font-size: 13px; color: var(--ink);
  background: rgba(214,190,245,0.06); border: 1px solid var(--line); border-radius: 9px; outline: none; pointer-events: auto;
}
.tcard input:focus{ border-color: rgba(168,85,247,0.6); }
.tcard-who{ display: inline-flex; flex: none; padding: 2px; gap: 2px; border-radius: 999px; background: rgba(16,9,24,0.55); border: 1px solid var(--line); }
.tcard-who-btn{
  padding: 5px 9px; border-radius: 999px; border: 0; background: transparent; color: var(--muted);
  font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 800; font-size: 11px; letter-spacing: 0.04em;
  max-width: 96px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; pointer-events: auto; transition: background-color .18s ease, color .18s ease;
}
.tcard-who-btn:hover{ color: var(--ink); }
.tcard-who-btn.is-on{ color: #FFFFFF; cursor: default; }
.tcard-who-btn.is-on.is-left{ background: var(--left); }
.tcard-who-btn.is-on.is-right{ background: var(--right); }
.tcard-who-btn.is-on.is-both{ background: var(--blue); }
.tcard-del{ flex: none; width: 28px; height: 28px; padding: 0; font: inherit; font-size: 17px; line-height: 1; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 8px; cursor: pointer; pointer-events: auto; }
.tcard-del:hover{ color: var(--neg); border-color: rgba(255,107,107,0.4); background: rgba(255,107,107,0.08); }
.tcard-fx{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; flex-wrap: wrap; }
.tcard-chips{ display: flex; flex-wrap: wrap; gap: 4px; }
.chip{
  padding: 6px 9px; border-radius: 999px; border: 1px solid var(--line); background: rgba(214,190,245,0.05); color: var(--muted);
  font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 800; font-size: 11.5px; white-space: nowrap;
  cursor: pointer; pointer-events: auto; transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.chip:hover{ color: var(--ink); border-color: rgba(214,190,245,0.35); }
.chip.is-on{ color: #FFFFFF; cursor: default; }
.chip.is-on.is-grow{ background: #1F9D55; border-color: #1F9D55; }
.chip.is-on.is-steal{ background: #D9741C; border-color: #D9741C; }
.chip.is-on.is-wreck, .chip.is-on.is-unwin{ background: #D23A3A; border-color: #D23A3A; }
.chip.is-on.is-win{ background: #C9962A; border-color: #C9962A; }
.tcard-qty{ display: inline-flex; align-items: center; gap: 6px; flex: none; margin-left: auto; font-size: 12px; font-weight: 700; color: var(--muted); }
.tcard-amt{ width: 78px; text-align: right; font-weight: 800 !important; }
.tadd{ display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tadd-btn{
  flex: 1 1 auto; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--line); background: none; color: var(--muted);
  font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700; font-size: 13px; cursor: pointer; pointer-events: auto;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.tadd-btn:hover{ color: var(--ink); border-color: rgba(168,85,247,0.6); background: rgba(168,85,247,0.1); }
.tadd-btn:disabled{ opacity: .4; cursor: default; }
.tadd-btn:disabled:hover{ color: var(--muted); border-color: var(--line); background: none; }
/* il catalogo dei regali, aperto sotto la scheda */
.gpick{ margin-top: 9px; padding: 8px; border-radius: 11px; background: rgba(16,9,24,0.6); border: 1px solid rgba(168,85,247,0.35); }
.gpick-search{ width: 100%; margin-bottom: 8px; }
.gpick-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 5px; max-height: 236px; overflow-y: auto; overscroll-behavior: contain; padding-right: 2px; }
.gpick-item{
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px 5px; min-width: 0;
  border-radius: 9px; border: 1px solid transparent; background: rgba(214,190,245,0.05); color: var(--ink);
  font: inherit; cursor: pointer; pointer-events: auto; transition: background-color .15s ease, border-color .15s ease;
}
.gpick-item:hover{ background: rgba(168,85,247,0.16); border-color: rgba(168,85,247,0.4); }
.gpick-item.is-on{ border-color: var(--blue); background: rgba(168,85,247,0.22); }
.gpick-item:disabled{ opacity: .28; cursor: not-allowed; }
.gpick-item:disabled:hover{ background: rgba(214,190,245,0.05); border-color: transparent; }
.gpick-item img{ width: 44px; height: 44px; object-fit: contain; }
.gpick-name{ font-size: 10.5px; font-weight: 700; line-height: 1.15; text-align: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gpick-d{ font-size: 10px; color: var(--muted); }
.gpick-more{ margin: 6px 2px 0; font-size: 11px; color: var(--muted); }
.gpick-empty{ grid-column: 1 / -1; margin: 10px 0; text-align: center; font-size: 12px; color: var(--muted); }

.set-row input[type="range"]{ width: 140px; accent-color: var(--blue); pointer-events: auto; }
.set-row input[type="checkbox"]{ width: 19px; height: 19px; accent-color: var(--blue); pointer-events: auto; }

/* ------------------------------------------------------------ pannello prova
   Appeso sotto i comandi, come il pannello win di Stack. */
.test-panel{
  position: absolute; z-index: 5;
  top: calc(clamp(10px, calc(var(--u) * 3), 20px) + env(safe-area-inset-top, 0px));
  right: calc(clamp(10px, calc(var(--u) * 3), 20px) + env(safe-area-inset-right, 0px) + var(--icon) + 10px);
  width: clamp(200px, calc(var(--u) * 56), 260px);
  padding: 10px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(21,12,32,0.94), rgba(16,9,24,0.94));
  border: 1px solid var(--line);
  box-shadow: 0 18px 46px rgba(0,0,0,0.58);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: auto;
  animation: sky-in .2s cubic-bezier(.2,1,.3,1);
}
.test-panel[hidden]{ display: none; }
@keyframes sky-in{ from{ opacity: 0; transform: translateY(-7px) scale(.97); } to{ opacity: 1; transform: none; } }
.test-cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.test-col{ display: flex; flex-direction: column; gap: 4px; }
.test-col p{ font-size: 10px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; margin-bottom: 2px; }
.test-col.is-left p{ color: var(--left); }
.test-col.is-right p{ color: var(--right); }
.test-btn{
  font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; font-weight: 600;
  padding: 7px 6px; border-radius: 8px; border: 1px solid var(--line);
  background: rgba(214,190,245,0.05); color: var(--ink); cursor: pointer; pointer-events: auto;
}
.test-btn:hover{ border-color: rgba(214,190,245,0.35); }
.test-col.is-left .test-btn{ border-bottom: 2px solid var(--left); }
.test-col.is-right .test-btn{ border-bottom: 2px solid var(--right); }
.test-panel .set-reset{ margin-top: 8px; }

/* ------------------------------------------------------ menu e impostazioni
   Il menu (02/09, "dieci volte meglio"): sotto la frase, CHI GIOCA adesso
   — i due nomi nei colori delle squadre e le WINS — così si sa cosa parte
   con "Inizia". Il pannello: testa fissa con titolo e ×, schede con
   l'icona, corpo che scorre da solo, "Fatto" sempre in vista in fondo. */
.menu-vs{
  display: flex; align-items: center; justify-content: center; gap: clamp(8px, calc(var(--u) * 2.6), 14px);
  margin: clamp(12px, calc(var(--u) * 3.6), 20px) auto 0; padding: 10px 12px;
  border-radius: 14px; background: rgba(5,1,10,0.4); border: 1px solid var(--line);
}
.menu-side{ display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; flex: 1 1 0; }
.menu-side b{
  font-family: 'Luckiest Guy', 'Baloo 2', system-ui, sans-serif; font-weight: 400; letter-spacing: 0.03em;
  font-size: clamp(17px, calc(var(--u) * 5.4), 24px); line-height: 1.1; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  -webkit-text-stroke: 2px #000; paint-order: stroke fill;
}
.menu-side.is-left b{ color: var(--left); }
.menu-side.is-right b{ color: var(--right); }
.menu-side small{ font-size: 10.5px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.menu-vsimg{ width: clamp(34px, calc(var(--u) * 11), 48px); height: auto; flex: none; filter: drop-shadow(0 3px 6px rgba(0,0,0,0.5)); }

.panel--setup{ display: flex; flex-direction: column; padding: 0; overflow: hidden; max-height: calc(100vh - 28px); }
.panel--setup .tabs{ margin: 0 clamp(12px, calc(var(--u) * 3.6), 20px) 0; }
.setup-head{ display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: clamp(12px, calc(var(--u) * 3.4), 18px) clamp(14px, calc(var(--u) * 4), 20px) 10px; }
.setup-title{ margin: 0; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800; font-size: clamp(17px, calc(var(--u) * 5), 21px); letter-spacing: 0.01em; }
.setup-close{ width: 34px; height: 34px; padding: 0; border-radius: 50%; border: 1px solid var(--line); background: rgba(214,190,245,0.06); color: var(--muted); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; pointer-events: auto; transition: color .18s ease, border-color .18s ease, transform .18s ease; }
.setup-close:hover{ color: var(--ink); border-color: rgba(214,190,245,0.4); transform: rotate(90deg); }
.tab{ display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.tab-ico{ font-size: 14px; line-height: 1; }
.setup-body{ flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(12px, calc(var(--u) * 3.4), 18px) clamp(14px, calc(var(--u) * 4), 20px) 16px; }
.setup-foot{ flex: none; display: flex; justify-content: center; padding: 10px clamp(14px, calc(var(--u) * 4), 20px) clamp(12px, calc(var(--u) * 3.4), 18px); border-top: 1px solid var(--line); background: linear-gradient(180deg, rgba(16,9,24,0.6), rgba(16,9,24,0.95)); }
.setup-foot .btn{ min-width: 46%; }

/* Sfide pronte: due per riga, la Sfida tra MVP a tutta larghezza in oro */
.tpl-list{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tpl-row[data-tpl-mvp]{ grid-column: 1 / -1; border-color: rgba(255,201,77,0.35); background: linear-gradient(180deg, rgba(255,201,77,0.10), rgba(255,201,77,0.03)); }
.tpl-row[data-tpl-mvp]:hover{ border-color: rgba(255,201,77,0.6); }
.tpl-row[data-tpl-mvp].is-on{ border-color: #FFC94D; box-shadow: 0 0 0 1px #FFC94D inset, 0 0 18px rgba(255,201,77,0.28); background: rgba(255,201,77,0.14); }
.tpl-row[data-tpl] .tpl-side img{ width: 72px; height: 44px; }
.tpl-row[data-tpl] .tpl-vs{ width: 34px; }
.tpl-row[data-tpl] .tpl-side b{ font-size: 12.5px; }

/* Sfidanti: due schede affiancate con l'anteprima (foto, logo o emoji) */
.pgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pcard, .ccard, .scard{ padding: 10px 11px 11px; border-radius: 13px; border: 1px solid var(--line); border-top: 3px solid var(--muted); background: rgba(214,190,245,0.045); min-width: 0; }
.scard{ border-top-color: var(--blue); padding-top: 4px; }
.pcard.is-left, .ccard.is-left{ border-top-color: var(--left); }
.pcard.is-right, .ccard.is-right{ border-top-color: var(--right); }
.pcard-title{ margin: 0 0 8px; font-size: 10.5px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pcard.is-left .pcard-title, .ccard.is-left .pcard-title{ color: var(--left); }
.pcard.is-right .pcard-title, .ccard.is-right .pcard-title{ color: var(--right); }
.pcard-top{ display: flex; align-items: flex-start; gap: 9px; }
.pcard-avatar{
  flex: none; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
  background: rgba(5,1,10,0.5); border: 2px solid var(--line); font-size: 28px; line-height: 1; color: var(--muted);
}
.pcard.is-left .pcard-avatar{ border-color: var(--left); }
.pcard.is-right .pcard-avatar{ border-color: var(--right); }
.pcard-avatar img{ width: 100%; height: 100%; object-fit: cover; }
.pcard-fields{ display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1 1 auto; }
.pcard-field{ display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pcard-field span{ font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pcard-field input{ width: 100%; padding: 7px 9px; font: inherit; font-size: 13px; color: var(--ink); background: rgba(214,190,245,0.06); border: 1px solid var(--line); border-radius: 9px; outline: none; pointer-events: auto; }
.pcard-field input:focus{ border-color: rgba(168,85,247,0.6); }
.pcard-photo{ display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.pcard-upload{
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px;
  border-radius: 9px; border: 1px dashed var(--line); color: var(--muted); font-size: 12px; font-weight: 800; cursor: pointer; pointer-events: auto;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.pcard-upload:hover{ color: var(--ink); border-color: rgba(168,85,247,0.6); background: rgba(168,85,247,0.1); }
.pcard-wins{ display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(168,85,247,0.12); font-size: 11px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.scard .set-row{ padding: 8px 2px; }
.scard .set-note{ margin-top: 8px; }
.scard .set-reset{ margin-top: 8px; }

/* Colori: le coppie in griglia con i due campioni grandi, poi le due tavolozze affiancate */
.pairs-grid{ display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 6px; }
.pairs-grid .pair-chip{ justify-content: center; padding: 8px 6px; white-space: nowrap; font-size: 11.5px; }
.pairs-grid .pair-chip i{ width: 16px; height: 16px; }
.cgrid{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ccard .swatches{ justify-content: flex-start; max-width: none; gap: 7px; }
.ccard .swatch{ width: 30px; height: 30px; }

/* Cielo: quattro card con l'anteprima grande */
[data-bg-chips]{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
[data-bg-chips] .bg-chip{ flex-direction: column; align-items: stretch; gap: 8px; padding: 8px; }
[data-bg-chips] .bg-chip i{ width: 100%; height: 44px; border-radius: 9px; }
[data-bg-chips] .bg-chip{ text-align: center; font-weight: 800; border-radius: 12px; }

/* Schermo: il cursore con il valore accanto */
.set-range{ display: inline-flex; align-items: center; gap: 8px; }
.set-out{ min-width: 42px; text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; font-weight: 600; color: var(--ink); }

@media (max-width: 520px){
  .pgrid, .cgrid, .tpl-list, [data-bg-chips]{ grid-template-columns: 1fr; }
  .tab-txt{ display: none; }
  .tab-ico{ font-size: 17px; }
}

/* ------------------------------------------------------- scorciatoie
   In basso a sinistra, solo in live: WINS e torri a zero senza aprire le
   impostazioni, e "Azzera MVP" quando la Sfida tra MVP è accesa (classe
   mvp-on sulla radice, la scrive syncHud). Armato = primo tocco dato, si
   aspetta il secondo: rosso pieno e un'onda che pulsa. */
.hud-quick{
  position: absolute; z-index: 5;
  left: calc(clamp(10px, calc(var(--u) * 3), 20px) + env(safe-area-inset-left, 0px));
  bottom: calc(clamp(10px, calc(var(--u) * 3), 20px) + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
}
[data-state]:not([data-state="live"]) .hud-quick{ display: none; }
.hud-quick .quick-mvp{ display: none; }
.mvp-on .hud-quick .quick-mvp{ display: inline-flex; }
.quick-btn{
  display: inline-flex; align-items: center;
  padding: 7px 13px 6px; border-radius: 999px;
  border: 1px solid var(--line); background: rgba(16,9,24,0.66); color: var(--muted);
  font-family: 'Nunito Sans', system-ui, sans-serif; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
  font-size: clamp(10.5px, calc(var(--u) * 2.8), 12.5px); line-height: 1;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer; pointer-events: auto;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}
.quick-btn:hover{ border-color: var(--blue); color: var(--ink); transform: translateY(-1px); }
.quick-btn:active{ transform: scale(.96); }
.quick-btn.is-danger:hover{ border-color: #E2453A; background: rgba(226,69,58,0.2); }
.quick-btn.is-armed, .quick-btn.is-armed:hover{
  border-color: #E2453A; background: #E2453A; color: #FFFFFF;
  animation: quick-armed .7s ease-out infinite;
}
@keyframes quick-armed{ from{ box-shadow: 0 0 0 0 rgba(226,69,58,0.55); } to{ box-shadow: 0 0 0 9px rgba(226,69,58,0); } }

/* ------------------------------------------------------- movimento ridotto */
@media (prefers-reduced-motion: reduce){
  .btn:hover, .icon-btn:hover, .trig:hover{ transform: none; }
  .panel{ transform: none; transition: opacity .2s ease; }
  .win-burst.is-on, .win-burst.is-on .wb-main, .win-burst.is-on .wb-name{ animation: none; }
  .win-burst.is-on::before, .win-burst.is-on::after{ display: none; }
  .tcard.is-new{ animation: none; }
  .quick-btn.is-armed{ animation: none; }
  /* la vittoria resta, ma ferma: niente raggi, coriandoli e rimbalzi */
  .screen--over.is-visible .over-flash, .screen--over.is-visible .over-rays, .over-rays::before, .over-confetti span,
  .screen--over.is-visible .over-kicker, .screen--over.is-visible .over-trophy, .screen--over.is-visible .over-name,
  .screen--over.is-visible .over-sub, .screen--over.is-visible .panel-actions, .screen--over.is-visible .btn-primary{ animation: none; }
  .screen--over .over-kicker, .screen--over .over-trophy, .screen--over .over-name,
  .screen--over .over-sub, .screen--over .panel-actions{ opacity: 1; }
  .screen--over .over-rays{ opacity: .72; }
  .test-panel{ animation: none; }
}

/* ------------------------------------------------------------- telefono */
@media (max-width: 760px), (max-height: 460px){
  .game-root{ touch-action: manipulation; }
  .stage{ --icon: 44px; }
  .btn{ min-height: 46px; }
  /* la torre destra sta vicina ai pulsanti: "Wins: x/300" più piccolo */
  .hud-wins{ font-size: 22px; }
  .tab{ min-height: 40px; min-width: 28%; }
  .set-row input[type="text"]{ width: 130px; }
  .panel--wide{ padding-left: 14px; padding-right: 14px; }
  /* sullo schermo stretto fra il bordo e la torre non c'è posto: le
     colonne tornano ai bordi */
  .rail{ transform: scale(var(--rail-scale)); top: 25%; }
  .rail-left{ left: calc(4px + env(safe-area-inset-left, 0px)); transform-origin: center left; }
  .rail-right{ left: auto; right: calc(4px + env(safe-area-inset-right, 0px)); transform-origin: center right; }
}
@media (max-height: 460px){
  .screen{ padding: 8px; }
  .panel{ padding: 14px 18px; }
  .title{ font-size: 30px; }
}