/* La scelta della Battaglia (battle-setup.js): avversario, sala d'attesa
   online e fiore dei semi. Staccato da style.css il 2026-09-26, quando e'
   arrivata la battaglia online. */
.level-picker{ display:flex; gap:8px; }
.level-picker .pick{
  flex:1; padding:16px 6px; border-radius:15px; cursor:pointer; color:var(--ink);
  border:1px solid var(--line); background:rgba(255,255,255,.05);
  font-family:inherit; text-align:center; transition:border-color .2s, background .2s;
}
.level-picker .pick b{ display:block; font-size:13.5px; font-weight:800; }
.level-picker .pick.on{ border-color:var(--accent); background:rgba(0,240,255,.13); box-shadow:var(--glow); }
.level-picker .pick:active{ transform:scale(.96); }

/* La scelta lascia vedere l'arena di prova (stage.js). Premendo il centro il
   selettore avanza verso chi guarda e sparisce, come in Netflix, e la partita
   comincia sull'arena che c'era sotto (screens.launchMs). */
#screen-battle{ background:linear-gradient(180deg, rgba(3,4,10,.82), rgba(3,4,10,.5) 40%, rgba(3,4,10,.66)); }
#screen-battle.launch{ pointer-events:none; background:transparent; transition:background .45s ease; }
#screen-battle.launch > *{ animation:launchOut .52s cubic-bezier(.55,0,.8,.35) both; }
@keyframes launchOut{ to{ opacity:0; transform:scale(1.5); } }
#battle-setup{ display:flex; flex-direction:column; }
#battle-setup > *{ flex:none; }
/* Scelta del seme: un fiore di sette esagoni a punta in su (renderBattleSetup).
   --dx/--dy sono i passi dal centro, in larghezze e in righe di esagono. Ai lati
   restano 20px: l'esagono scelto cresce e ha l'alone, e largo quanto la colonna
   veniva tagliato dal contenitore che scorre (visto sul telefono). */
.seed-flower{
  --g:8px; --w:min(calc((100vw - 32px - 40px - 2 * var(--g)) / 3), 112px); --h:calc(var(--w) * 1.1547);
  --xu:calc(var(--w) + var(--g)); --yu:calc(var(--h) * .75 + var(--g) * .87);
  position:relative; flex:none; margin:auto;          /* centrato nello spazio che resta (#battle-setup) */
  width:calc(var(--w) * 3 + var(--g) * 2); height:calc(var(--h) + var(--yu) * 2);
}
.seed-flower .hex{
  position:absolute; left:50%; top:50%; width:var(--w); height:var(--h); padding:0; border:0;
  margin:calc(var(--h) / -2) 0 0 calc(var(--w) / -2); background:none; cursor:pointer;
  transform:translate(calc(var(--dx, 0) * var(--xu)), calc(var(--dy, 0) * var(--yu))) scale(var(--s, 1));
  transition:transform .2s cubic-bezier(.34,1.56,.64,1), filter .2s;
}
.seed-flower .hex::before, .seed-flower .hex-in{ clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%); }
.seed-flower .hex::before{ content:''; position:absolute; inset:0; background:var(--edge); opacity:.4; transition:opacity .2s; }
.seed-flower .hex-in{ position:absolute; inset:2px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--bg0),var(--bg1)); }
.seed-flower .hex .seed{ width:54%; height:auto; aspect-ratio:1; opacity:.72; transition:opacity .2s; }
.seed-flower .hex.on{ --s:1.07; filter:drop-shadow(0 0 10px var(--edge)); }
.seed-flower .hex.on::before{ opacity:1; }
.seed-flower .hex.on .seed{ opacity:1; }
.seed-flower .hex:active{ --s:.94; }
.seed-flower .hex.go::before{ opacity:1; }
.seed-flower .hex.go .hex-in{ inset:0; background:linear-gradient(135deg,var(--a1),var(--a2)); color:#05060f;
  font-size:calc(var(--w) * .36); }
.seed-flower .hex.go{ filter:drop-shadow(0 0 12px var(--a1)); animation:goPulse 1.8s ease-in-out infinite; }
@keyframes goPulse{ 50%{ filter:drop-shadow(0 0 20px var(--a1)) brightness(1.12); } }

/* Avversario: Vs Bot, Casuale, Privata. Online, sotto, la sala d'attesa. */
.mode-slot{ margin-top:8px; }
.lobby{ display:flex; flex-direction:column; align-items:center; gap:8px; min-height:58px;
  padding:12px; border-radius:15px; border:1px solid var(--line); background:rgba(255,255,255,.04); text-align:center; }
.lobby .status{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:12.5px; font-weight:700; }
.lobby .spin{ flex:none; width:13px; height:13px; border-radius:50%; border:2px solid var(--line);
  border-top-color:var(--accent); animation:lobbySpin .8s linear infinite; }
@keyframes lobbySpin{ to{ transform:rotate(360deg); } }
.lobby .err{ font-size:12px; font-weight:700; color:#ff8fa3; }
.lobby .label{ font-size:10.5px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-dim); }
.lobby .code{ font-family:var(--font-num); font-size:36px; font-weight:800; letter-spacing:10px; margin-right:-10px;
  line-height:1; color:var(--accent); text-shadow:var(--glow); user-select:text; }
.lobby .row{ display:flex; gap:8px; width:100%; }
.lobby .row > *{ flex:1; min-width:0; }
.lobby .mini{ padding:11px 8px; border-radius:12px; border:1px solid var(--line); background:rgba(255,255,255,.07);
  color:var(--ink); font:inherit; font-size:13.5px; font-weight:800; cursor:pointer; }
.lobby .mini:active{ transform:scale(.96); }
.lobby .mini.link{ padding:2px 8px; border:0; background:none; font-size:12px; font-weight:600; color:var(--ink-dim); }
.lobby input{ padding:10px 12px; border-radius:12px; border:1px solid var(--accent); background:rgba(0,0,0,.35);
  color:var(--ink); font:inherit; font-size:14px; outline:none; }
.lobby input.code-in{ flex:1.4; font-family:var(--font-num); font-size:20px; font-weight:800; letter-spacing:6px;
  text-align:center; text-transform:uppercase; }
.lobby input.server-in{ flex:2.4; font-family:var(--font-num); font-size:12px; }
.lobby .server{ border:0; background:none; padding:2px; font:inherit; font-size:10.5px; color:var(--ink-dim); opacity:.75; cursor:pointer; }
/* Privata via Bluetooth (battle-setup.js, btToggle): il simbolo accanto a Crea e
   Partecipa, acceso col colore del tema; sotto, al posto del server, la riga che lo dice. */
.lobby .row > .mini.bt{ flex:none; width:46px; display:grid; place-items:center; padding:0; color:var(--ink-dim); }
.lobby .mini.bt svg{ width:21px; height:21px; }
.lobby .mini.bt.on{ border-color:var(--accent); background:rgba(0,240,255,.13); box-shadow:var(--glow); color:var(--accent); }
.lobby .via{ display:flex; align-items:center; gap:4px; font-size:10.5px; color:var(--ink-dim); }
.lobby .via svg{ width:13px; height:13px; color:var(--accent); }
.lobby .foe-line{ display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; color:var(--ink-dim); }
.lobby .foe-line b{ color:var(--ink); }
.lobby .foe-line .seed{ flex:none; width:28px; height:28px; }
.lobby .foe-line .dot, .seed-flower .hex.foe::after{ flex:none; width:10px; height:10px; border-radius:50%;
  background:#ff4d6d; box-shadow:0 0 8px #ff4d6d; animation:foeBlink 1.1s ease-in-out infinite; }
.lobby .foe-line.ready .dot, .seed-flower .hex.foe-ready::after{ animation:none; }
@keyframes foeBlink{ 50%{ opacity:.25; } }
/* Il seme che guarda l'avversario: un pallino sul suo esagono, niente scritte. */
.seed-flower .hex.foe::after{ content:''; position:absolute; top:13%; right:17%; }
/* Premuto il centro online, il seme e' deciso: si aspetta l'avversario. */
.seed-flower.locked .hex:not(.go):not(.on){ opacity:.4; }
.seed-flower .hex.go.wait{ animation:goWait 1s ease-in-out infinite; }
@keyframes goWait{ 50%{ filter:drop-shadow(0 0 3px var(--a1)) brightness(.7); } }
/* Online la pausa non ferma la partita: niente "Ricomincia". */
#screen-pause.online [data-act="restart"]{ display:none; }
/* Torneo (tournament.js): il nome, chi e' entrato, il via di chi l'ha creato,
   il tabellone a colonne e il campione. Sulle barre della vita, i nomi. */
.mode-picker .pick{ padding-left:2px; padding-right:2px; }
.mode-picker .pick b{ font-size:13px; }
.lobby input.name-in{ text-align:center; font-weight:700; }
.lobby .players{ display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.lobby .players .who{ padding:5px 10px; border-radius:99px; border:1px solid var(--line); background:rgba(255,255,255,.06);
  font-size:12.5px; font-weight:700; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lobby .players .who.me{ border-color:var(--accent); color:var(--accent); }
.lobby .players .who.host::before{ content:'★ '; color:var(--accent-2); }
.lobby .players .who.wait{ opacity:.4; }          /* rivincita: non ha ancora deciso */
.lobby .mini.start{ width:100%; border-color:var(--accent); background:linear-gradient(90deg, var(--accent), var(--accent-2));
  color:#08101a; }
.lobby .mini.start.off{ opacity:.45; }
.lobby .bracket{ display:flex; gap:6px; width:100%; text-align:left; }
.lobby .bracket .stage{ flex:1; min-width:0; display:flex; flex-direction:column; gap:5px; }
.lobby .bracket .stage > b{ font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-dim); text-align:center; }
.lobby .bracket .list{ flex:1; display:flex; flex-direction:column; justify-content:space-around; gap:6px; }
.lobby .bracket .m{ display:flex; flex-direction:column; gap:2px; padding:5px 7px; border-radius:9px;
  border:1px solid var(--line); background:rgba(0,0,0,.28); }
.lobby .bracket .m.now{ border-color:var(--accent); box-shadow:var(--glow); }
.lobby .bracket .m.bye{ flex-direction:row; align-items:center; justify-content:space-between; gap:4px; opacity:.75; }
.lobby .bracket .m i{ font-style:normal; font-size:9.5px; color:var(--ink-dim); }
.lobby .bracket .p{ font-size:11.5px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lobby .bracket .p.w{ color:var(--accent); }
.lobby .bracket .p.out{ color:var(--ink-dim); text-decoration:line-through; opacity:.6; }
.lobby .bracket .p.gone{ opacity:.45; }
.lobby .bracket .p.me::after{ content:' •'; color:var(--accent-2); }
.lobby .bracket .p.tbd{ color:var(--ink-dim); opacity:.5; }
.lobby .champ{ font-size:16px; font-weight:800; color:var(--accent); text-shadow:var(--glow); }
.lobby .champ b{ color:var(--ink); }
#battle-hud .life .who{ flex:none; max-width:84px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:11px; font-weight:800; text-shadow:0 2px 6px rgba(0,0,0,.85); }
#battle-hud .life .who:empty{ display:none; }
#battle-hud .life.foe .who{ color:#ff8fa3; }
#battle-hud .life.you .who{ color:var(--accent); }
.lobby .bracket .p.away{ opacity:.45; font-style:italic; }
.lobby .mini.back{ width:100%; border-color:var(--accent); color:var(--accent); }
/* Torneo, sopra a tutto (tournament.js, paintHold): manca uno dei due che
   giocano e si vota se aspettarlo, o sto rientrando io. */
.hold{ position:absolute; inset:0; z-index:30; display:none; align-items:center; justify-content:center;
  padding:16px; background:rgba(3,4,10,.62); }
.hold.on{ display:flex; }
.hold .lobby{ width:100%; max-width:300px; background:rgba(10,14,26,.94); box-shadow:0 10px 40px rgba(0,0,0,.6); }
.hold .left{ font-family:var(--font-num); font-size:30px; font-weight:800; line-height:1; color:var(--accent); text-shadow:var(--glow); }
.hold .ask{ font-size:13px; font-weight:700; }
.hold .mini.on{ border-color:var(--accent); background:rgba(0,240,255,.13); box-shadow:var(--glow); color:var(--accent); }
.hold .tally{ font-size:11px; color:var(--ink-dim); }