:root {
  --bg: #0a1210;
  --bg-2: #0f1a16;
  --card: #13211c;
  --card-2: #1a2c25;
  --line: #233a30;
  --text: #f2ede2;
  --muted: #8fa398;
  --gold: #e9b649;
  --gold-2: #c9962e;
  --red: #e0524f;
  --green: #45c486;
  --blue: #5b9be6;
  --felt: #17704a;
  --felt-dark: #0c3f29;
  --rail: #3a2416;
  --radius: 16px;
  --tabbar-h: 62px;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --font: ui-rounded, 'SF Pro Rounded', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  background: radial-gradient(120% 70% at 50% -10%, #173428 0%, var(--bg) 62%) fixed, var(--bg);
  color: var(--text);
  font: 16px/1.45 var(--font);
  -webkit-tap-highlight-color: transparent;
  padding-bottom: calc(var(--tabbar-h) + var(--safe-b));
}

a { color: inherit; }
h1 { font-size: 28px; line-height: 1.1; margin: 0; letter-spacing: -0.02em; }
h2 { font-size: 17px; margin: 0 0 12px; letter-spacing: -0.01em; }
p { margin: 0 0 8px; }
code { background: var(--bg-2); padding: 1px 6px; border-radius: 6px; font-size: 0.9em; }
blockquote { margin: 10px auto; font-family: var(--serif); font-style: italic; font-size: 18px; color: #f6e6c2; max-width: 30ch; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.center { text-align: center; }
.grow { flex: 1; min-width: 0; }
.hint { color: var(--muted); font-size: 13px; margin-top: 8px; }

#view {
  max-width: 720px;
  margin: 0 auto;
  padding: calc(18px + var(--safe-t)) 16px 28px;
}
#view.wide { max-width: 1600px; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.sub { color: var(--muted); margin: 2px 0 0; font-size: 14px; }
/* Nome della lega sotto il titolo: deve vedersi bene. */
.sub.league-sub { color: var(--gold); font-size: 18px; font-weight: 700; margin-top: 4px; }
/* Titolo e menu sulla prima riga, il nome della lega tutto sotto. */
.page-head.wrap { flex-wrap: wrap; row-gap: 0; }
.page-head.wrap > .sub { flex-basis: 100%; }
.back { display: inline-block; color: var(--muted); text-decoration: none; margin-bottom: 10px; font-weight: 600; }

/* --- Contenitori --- */

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; }
.card.flush { padding: 4px 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.card-head h2 { margin: 0; }
.count { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 99px; background: var(--gold); color: #241a06; font-size: 14px; margin-left: 6px; }
details summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 4px 0; }
details[open] summary { margin-bottom: 10px; }

.row { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.row.end { justify-content: flex-end; }
.row.center { justify-content: center; }
.row.wrap { flex-wrap: wrap; }
/* Due pulsanti affiancati anche sul telefono stretto. */
.row.pair > .btn { flex: 1 1 auto; min-width: 0; padding-inline: 8px; gap: 6px; font-size: clamp(13px, 3.6vw, 15px); text-align: center; line-height: 1.15; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; }

/* --- Bottoni e campi --- */

.btn {
  appearance: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--card-2); color: var(--text);
  font: inherit; font-weight: 650; text-decoration: none; cursor: pointer;
  transition: transform 0.08s, background 0.15s;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.4; pointer-events: none; }
.btn.primary { background: linear-gradient(180deg, #f3c65e, var(--gold-2)); color: #261b05; border-color: transparent; box-shadow: 0 6px 18px -8px rgba(233, 182, 73, 0.6); }
.btn.danger { background: var(--red); color: #fff; border-color: transparent; }
.btn.ghost { background: transparent; }
.btn.small { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn.big { width: 100%; min-height: 58px; font-size: 18px; border-radius: 16px; margin: 4px 0 12px; }
.btn.block { width: 100%; justify-content: flex-start; }
.btn.block-center { display: flex; margin: 8px auto 0; }
.danger-text { color: var(--red); }
.danger-zone { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.link { background: none; border: 0; color: var(--gold); font: inherit; font-weight: 600; cursor: pointer; padding: 4px; }

.field { display: grid; gap: 6px; margin-bottom: 12px; }
.field > span { font-size: 13px; color: var(--muted); font-weight: 600; }
input, select, textarea {
  width: 100%; min-height: 44px; padding: 10px 12px;
  font: inherit; color: var(--text);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px;
}
textarea { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5; resize: vertical; }
select.compact { width: auto; min-height: 38px; padding: 6px 10px; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle i { position: relative; flex: none; width: 50px; height: 30px; border-radius: 99px; background: var(--line); transition: background 0.2s; }
.toggle i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.2s; }
.toggle input:checked + i { background: var(--green); }
.toggle input:checked + i::after { transform: translateX(20px); }
.toggle input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px; }

/* --- Avatar e selezione giocatori --- */

.avatar {
  --size: 44px;
  flex: none;
  display: inline-grid; place-items: center;
  width: var(--size); height: var(--size);
  border-radius: 50%; overflow: hidden;
  background: var(--c, #2c4a3e);
  font-size: calc(var(--size) * 0.52); line-height: 1;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

.pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.pick {
  display: grid; justify-items: center; gap: 6px; padding: 12px 4px 10px;
  background: var(--bg-2); border: 2px solid transparent; border-radius: 14px;
  color: var(--text); font: inherit; font-size: 13px; font-weight: 600; text-decoration: none; cursor: pointer;
}
.pick span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick.on { border-color: var(--gold); background: #262212; }
.pick.on .avatar { box-shadow: 0 0 0 3px var(--gold); }
.pick:not(.on) .avatar { filter: saturate(0.6); }
.pick.add { color: var(--muted); }
.pick.add .avatar { background: transparent; border: 2px dashed var(--line); box-shadow: none; font-size: 22px; }

.pool { display: flex; justify-content: space-between; align-items: baseline; }
.pool b { font-size: 26px; color: var(--gold); }
.payouts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-weight: 600; font-variant-numeric: tabular-nums; }
.levels-editor { margin: 4px 0 8px; }

/* --- Liste --- */

.list-row { display: flex; align-items: center; gap: 14px; padding: 12px 16px; text-decoration: none; border-bottom: 1px solid var(--line); }
.list-row:last-child { border-bottom: 0; }
.list-row small { display: block; color: var(--muted); font-size: 13px; }
.nick { color: var(--gold); font-style: italic; font-weight: 500; }
.nick.big { font-size: 18px; margin: 4px 0 0; }
.chev { color: var(--muted); font-size: 24px; }

.rank-list { list-style: none; margin: 0 0 12px; }
.rank-list li a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-decoration: none; border-bottom: 1px solid var(--line); }
.rank-list li:last-child a { border-bottom: 0; }
.rank-list small { display: block; color: var(--muted); font-size: 12px; }
.rank { width: 28px; text-align: center; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.value { font-weight: 800; font-size: 18px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rank-list .value small { display: inline; font-size: 12px; color: var(--muted); margin-left: 2px; }
.pos { color: var(--green); }
.neg { color: var(--red); }
.value.pos, .stat.pos b { color: var(--green); }
.value.neg, .stat.neg b { color: var(--red); }

.empty { text-align: center; padding: 28px 12px; }
.empty-emoji { font-size: 52px; margin-bottom: 8px; }
.empty p { color: var(--muted); max-width: 36ch; margin: 0 auto 8px; }

/* --- Statistiche --- */

.stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
@media (min-width: 560px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 12px 8px; text-align: center; }
.stat b { display: block; font-size: 22px; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat b small { font-size: 14px; color: var(--muted); }
.stat span { font-size: 12px; color: var(--muted); }

.hero { text-align: center; padding: 26px 16px 18px; margin-bottom: 12px; border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--c) 38%, transparent), transparent 85%); }
.hero h1 { margin-top: 12px; font-size: 32px; }
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.badge { background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(233, 182, 73, 0.4); color: #f6e6c2; padding: 4px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; }

.facts { display: grid; gap: 14px; }
.fact { display: flex; gap: 12px; align-items: flex-start; }
.fact-emoji { font-size: 24px; width: 32px; text-align: center; }
.fact small { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.inline-player { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; vertical-align: middle; }

.form { display: flex; flex-wrap: wrap; gap: 8px; }
.form-chip { min-width: 48px; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); text-align: center; font-weight: 800; text-decoration: none; }
.form-chip small { color: var(--muted); font-weight: 500; }
.form-chip.gold { background: #3a2f10; border-color: var(--gold); color: var(--gold); }
.form-chip.good { border-color: #2f6b4d; }
.form-chip.bad { border-color: #6b2f2f; }

/* --- Classifica --- */

.segmented { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; margin-bottom: 14px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 14px; }
.segmented button { min-height: 40px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.segmented button.on { background: var(--card-2); color: var(--gold); }
.field > .segmented { margin-bottom: 0; }
.voice-opts { padding: 4px 0 6px; }

.podium { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; margin: 18px 0 14px; }
.step { position: relative; display: grid; justify-items: center; gap: 4px; text-decoration: none; text-align: center; }
.step b { font-size: 15px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.step > span:not(.avatar):not(.crown-sm) { font-size: 13px; color: var(--muted); }
.step .block { width: 100%; margin-top: 6px; border-radius: 12px 12px 4px 4px; display: grid; place-items: center; font-size: 28px; font-weight: 900; color: rgba(0, 0, 0, 0.45); }
.p1 .block { height: 96px; background: linear-gradient(180deg, #f3c65e, #b98420); }
.p2 .block { height: 70px; background: linear-gradient(180deg, #d9dde3, #9aa1aa); }
.p3 .block { height: 52px; background: linear-gradient(180deg, #e0a673, #a8673a); }
.crown-sm { position: absolute; top: -22px; font-size: 26px; }

.awards { display: grid; gap: 10px; }
.award { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; column-gap: 14px; padding: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); text-decoration: none; }
.award-head { margin: 0 0 2px; line-height: 1.35; }
.award .award-head small { display: inline; margin-right: 4px; }
.award-rule { color: var(--muted); font-size: 13px; }
.award.none .award-emoji { opacity: 0.45; filter: grayscale(1); }
.award.none b { color: var(--muted); font-weight: 600; }
.award-emoji { font-size: 34px; width: 44px; text-align: center; }
.award small { display: block; color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; }
.award b { display: block; font-size: 18px; }
.award .muted { font-size: 13px; }

/* --- Torneo live --- */

/* Timer sopra e tavolo sotto, alti uguali, sempre insieme in una schermata: si dividono a metà
   l'altezza libera tra il bordo in alto e la barra in basso. La larghezza si ferma a poco più del doppio
   dell'altezza, così il tavolo non diventa una sogliola. Testi e pulsanti seguono la misura del riquadro.
   Sugli schermi larghi tutto il resto sta in una colonna a destra; su quelli stretti va sotto, e
   allora si lascia posto in schermata almeno per i pulsanti del tavolo (--reserve). */
.live {
  --tools-h: 36px;
  --reserve: calc(var(--tools-h) + 12px);
  --stage-h: max(380px, 100svh - var(--tabbar-h) - var(--safe-b) - var(--safe-t) - 34px - var(--reserve));
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px;
  width: min(100%, (var(--stage-h) - 12px) * 1.1);
  margin: 0 auto;
}
.live > * { margin: 0; }
.live > .btn.big { grid-column: 1 / -1; }
.stage { display: grid; grid-template-rows: 1fr 1fr; gap: 12px; height: var(--stage-h); }
.stage > * { container-type: size; min-height: 0; }
.live-side { display: grid; gap: 12px; align-content: start; }
.live-side > * { margin: 0; }
.live-tools { min-height: var(--tools-h); gap: 8px; flex-wrap: wrap; }
.live-tools .btn { white-space: nowrap; }
/* Telefono in orizzontale: uno sopra l'altro non ci starebbero, quindi affiancati. */
@media (orientation: landscape) and (max-height: 560px) {
  .live { --stage-h: max(200px, 100svh - var(--tabbar-h) - var(--safe-b) - var(--safe-t) - 34px - var(--reserve)); width: 100%; }
  .stage { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
  .live {
    --reserve: 0px;
    --side-w: clamp(280px, min(26vw, var(--stage-h) * 0.4), 460px);
    width: 100%;
    grid-template-columns: minmax(0, calc((var(--stage-h) - 12px) * 1.1)) var(--side-w);
    justify-content: center; align-items: start;
  }
  /* La colonna cresce con lo schermo e il suo contenuto con lei; il cimitero prende lo spazio che avanza. */
  .live-side { container-type: inline-size; display: flex; flex-direction: column; height: var(--stage-h); overflow-y: auto; overscroll-behavior: contain; }
  .live-tools .btn { flex: 1 1 auto; min-height: clamp(36px, 13cqi, 58px); font-size: clamp(14px, 4.6cqi, 20px); border-radius: clamp(10px, 3.5cqi, 16px); }
  .live-side .stat { padding: clamp(10px, 3.5cqi, 16px) 6px; }
  .live-side .stats-row .stat b { font-size: clamp(20px, 8cqi, 36px); }
  .live-side .stat b small { font-size: 0.6em; }
  .live-side .stat span { font-size: clamp(12px, 3.6cqi, 16px); }
  .live-side .payouts { font-size: clamp(15px, 5cqi, 22px); }
  .live-side > .card { flex: 1 1 auto; min-height: 140px; overflow-y: auto; font-size: clamp(15px, 4.4cqi, 19px); }
  .live-side .card h2 { font-size: clamp(17px, 5.4cqi, 24px); }
  .live-side .btn.block-center { min-height: clamp(40px, 12cqi, 52px); font-size: clamp(14px, 4.4cqi, 18px); }
}
@media (min-width: 900px) and (orientation: landscape) and (max-height: 560px) {
  .live { grid-template-columns: minmax(0, 1fr) var(--side-w); }
}

.clock {
  display: flex; flex-direction: column; justify-content: center;
  text-align: center;
  padding: 12px 16px;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #13271f, #0b1713);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.clock-top { display: flex; justify-content: center; gap: 10px; font-size: clamp(12px, min(5.5cqh, 2.6cqi), 22px); line-height: 1.2; color: var(--muted); font-weight: 700; }
.lvl { color: var(--gold); white-space: nowrap; }
.clock-time {
  margin-top: 1cqh;
  font-size: min(32cqh, 30cqi);
  font-weight: 800; line-height: 1; letter-spacing: -0.045em;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s;
}
.clock.paused .clock-time { opacity: 0.5; }
.clock.warn .clock-time { color: var(--gold); }
.clock.crit .clock-time { color: var(--red); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.03); } }
.progress { flex: none; height: clamp(4px, 1.6cqh, 8px); margin: 2.5cqh 0 3cqh; background: rgba(255, 255, 255, 0.06); border-radius: 99px; overflow: hidden; }
.progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-2), var(--gold)); border-radius: inherit; transition: width 0.25s linear; }
.clock.is-break .progress i { background: var(--blue); }
.blinds { font-size: min(12cqh, 11cqi); font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.blinds small { margin-left: 0.4em; font-size: 0.4em; color: var(--muted); font-weight: 650; letter-spacing: 0; }
.clock.is-break .blinds { color: var(--blue); }
.next { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 12px; margin-top: 1cqh; color: var(--muted); font-size: clamp(12px, min(5cqh, 2.4cqi), 22px); line-height: 1.25; font-variant-numeric: tabular-nums; }
.controls { display: flex; justify-content: center; align-items: center; gap: clamp(8px, 3cqh, 18px); margin-top: 3.5cqh; }
.round { display: inline-grid; place-items: center; width: clamp(38px, 15cqh, 68px); height: clamp(38px, 15cqh, 68px); border-radius: 50%; border: 1px solid var(--line); background: var(--card-2); color: var(--text); font: inherit; cursor: pointer; }
.round svg { width: 50%; height: 50%; }
.round:active { transform: scale(0.94); }
.round.play { width: clamp(50px, 20cqh, 92px); height: clamp(50px, 20cqh, 92px); background: linear-gradient(180deg, #f3c65e, var(--gold-2)); color: #261b05; border: 0; box-shadow: 0 8px 22px -8px rgba(233, 182, 73, 0.7); }
.round.small { font-size: clamp(12px, 5.5cqh, 19px); font-weight: 800; }

.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.stats-row .stat b { font-size: 20px; }
.live .payouts { justify-content: center; color: var(--muted); }

/* Tavolo: i posti stanno su un'ellisse che lascia sempre spazio per avatar e nome, qualsiasi forma
   abbia il riquadro (--cos/--sin arrivano da live.js). Panno e bottone del dealer seguono la stessa ellisse. */
.table {
  --seat: clamp(34px, min(13cqi, 14cqh), 84px);
  --rx: calc(50% - var(--seat) * 0.85 - 6px);
  --ry: calc(50% - var(--seat) * 0.5 - 18px);
  position: relative;
  border-radius: 26px; border: 1px solid var(--line);
  background: linear-gradient(180deg, #13271f, #0b1713);
}
.felt {
  position: absolute;
  inset-block: calc(50% - var(--ry) + var(--seat) * 0.45);
  inset-inline: calc(50% - var(--rx) + var(--seat) * 0.6);
  display: grid; place-content: center; text-align: center;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 38%, #208a5c 0%, var(--felt) 45%, var(--felt-dark) 100%);
  box-shadow:
    0 0 0 10px var(--rail),
    0 0 0 12px #5b3a22,
    0 22px 50px rgba(0, 0, 0, 0.6),
    inset 0 0 50px rgba(0, 0, 0, 0.45);
}
.felt-brand {
  display: flex; align-items: center; justify-content: center; gap: 0.3em;
  font-size: clamp(16px, min(5cqi, 10cqh), 50px); font-weight: 900; letter-spacing: 0.06em; line-height: 1;
  color: rgba(255, 238, 196, 0.9); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.felt-brand img { height: 1.15em; width: auto; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45)); }
.felt-logo { font-family: var(--serif); font-style: italic; font-size: clamp(12px, min(3cqi, 6cqh), 30px); color: rgba(255, 238, 196, 0.8); padding: 0 12px; margin-top: 0.35em; text-wrap: balance; }
.seat {
  position: absolute; transform: translate(-50%, -50%);
  left: calc(50% + var(--cos) * var(--rx));
  top: calc(50% + var(--sin) * var(--ry));
  display: grid; justify-items: center; gap: 3px; width: calc(var(--seat) * 1.7);
  background: none; border: 0; padding: 0; color: var(--text); font: inherit; cursor: pointer;
  transition: opacity 0.3s, filter 0.3s;
}
.seat:active { transform: translate(-50%, -50%) scale(0.95); }
.seat .avatar { width: var(--seat); height: var(--seat); font-size: calc(var(--seat) * 0.52); }
.seat-name { max-width: 100%; padding: 1px 8px; border-radius: 99px; background: rgba(0, 0, 0, 0.6); font-size: clamp(11px, min(1.7cqi, 3.6cqh), 17px); line-height: 1.35; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat.out { opacity: 0.38; filter: grayscale(1); }
.seat-pos { position: absolute; top: -4px; right: 6px; padding: 1px 6px; border-radius: 99px; background: var(--red); color: #fff; font-size: clamp(10px, calc(var(--seat) * 0.2), 15px); font-weight: 800; }
.seat-tags { position: absolute; top: -4px; left: 4px; display: flex; gap: 3px; }
.chip-tag { font-style: normal; font-size: clamp(9px, calc(var(--seat) * 0.18), 14px); font-weight: 900; padding: 1px 6px; border-radius: 99px; }
.chip-tag.sb { background: var(--blue); color: #fff; }
.chip-tag.bb { background: var(--gold); color: #261b05; }
.chip-tag.rb { background: #8a5cf6; color: #fff; }
.dealer-btn {
  position: absolute; transform: translate(-50%, -50%);
  left: calc(50% + var(--cos) * (var(--rx) - var(--seat) * 1.3));
  top: calc(50% + var(--sin) * (var(--ry) - var(--seat) * 1.3));
  display: grid; place-items: center; width: clamp(24px, calc(var(--seat) * 0.55), 46px); height: clamp(24px, calc(var(--seat) * 0.55), 46px);
  border-radius: 50%; background: #fbf8f0; color: #1a1a1a;
  font-size: clamp(12px, calc(var(--seat) * 0.26), 20px); font-weight: 900;
  box-shadow: 0 2px 0 #b9b2a3, 0 5px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.elim-log { list-style: none; margin: 0; padding: 0; }
.elim-log li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.elim-log li:last-child { border-bottom: 0; }
.elim-log .pos { width: 32px; color: var(--red); font-weight: 800; }

.announce { margin: 12px 0; padding: 12px 14px; border-radius: 14px; background: #2a2412; border: 1px solid rgba(233, 182, 73, 0.4); color: #f6e6c2; font-weight: 600; text-align: center; }

/* --- Modali e toast --- */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(0, 0, 0, 0.62);
  animation: fade 0.18s ease;
}
.modal-backdrop.closing { animation: fade 0.16s ease reverse forwards; }
/* Una finestra sopra l'altra (es. accesso admin sopra i risultati): quella sotto non deve trasparire. */
.modal-backdrop ~ .modal-backdrop { background: rgba(0, 0, 0, 0.88); backdrop-filter: blur(3px); }
.modal {
  width: 100%; max-width: 560px; max-height: 92dvh; overflow: auto;
  padding: 22px 16px calc(20px + var(--safe-b));
  background: var(--card); border: 1px solid var(--line); border-bottom: 0;
  border-radius: 24px 24px 0 0;
  animation: up 0.24s cubic-bezier(0.2, 0.9, 0.3, 1.1);
}
.modal.center { text-align: center; }
.modal-text { font-size: 17px; margin-bottom: 8px; }
@media (min-width: 640px) {
  .modal-backdrop { align-items: center; }
  .modal { border-radius: 24px; border-bottom: 1px solid var(--line); padding-bottom: 22px; }
}
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }

.sheet-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.sheet-head small { display: block; color: var(--muted); margin-top: 2px; }
.sheet-actions { display: grid; gap: 8px; }

.elim-avatar { position: relative; display: inline-block; margin-bottom: 8px; }
.elim-avatar .avatar { filter: grayscale(1); }
.skull { position: absolute; right: -8px; bottom: -6px; font-size: 38px; animation: drop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both; }
.elim p { font-size: 16px; }

.winner .crown { font-size: 52px; animation: bounce 1.2s ease-in-out infinite; }
.winner > .avatar { box-shadow: 0 0 0 4px var(--gold), 0 0 40px rgba(233, 182, 73, 0.5); }
.winner h2 { font-size: 28px; margin: 12px 0 4px; }
@keyframes bounce { 50% { transform: translateY(-8px) rotate(-6deg); } }
.results { list-style: none; padding: 0; margin: 14px 0 0; text-align: left; }
.results li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.results .pos { width: 32px; text-align: center; color: var(--text); font-weight: 800; }
.results .grow small { display: block; font-size: 12px; color: var(--muted); }
.results .net { color: var(--green); font-variant-numeric: tabular-nums; white-space: nowrap; }
.results .net.down { color: var(--red); }
.results .net.even { color: var(--muted); }

.draw-list { list-style: none; padding: 0; margin: 0 0 12px; }
.draw-list li { display: flex; align-items: center; gap: 12px; padding: 8px 6px; border-radius: 12px; animation: up 0.3s both; animation-delay: var(--d); }
.draw-list li.win { background: #2a2412; }
.pcard {
  display: inline-grid; place-items: center; width: 42px; height: 58px;
  border-radius: 7px; background: #fbf8f0; color: #1a1a1a;
  font-weight: 800; font-size: 17px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
  animation: flip 0.45s both; animation-delay: calc(var(--d) + 150ms);
}
.pcard.red { color: #c62828; }
@keyframes flip { from { transform: rotateY(90deg); } }
.tag { padding: 3px 8px; border-radius: 99px; font-size: 12px; }
.tag.gold { background: var(--gold); color: #261b05; }

.edit-preview { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.edit-preview .row { margin: 0; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.emoji-opt { height: 42px; border-radius: 10px; border: 2px solid transparent; background: var(--bg-2); font-size: 22px; cursor: pointer; }
.emoji-opt.on { border-color: var(--gold); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.swatch { width: 34px; height: 34px; border-radius: 50%; border: 3px solid transparent; background: var(--c); cursor: pointer; }
.swatch.on { border-color: #fff; }

#toast-root { position: fixed; top: calc(12px + var(--safe-t)); left: 0; right: 0; z-index: 60; display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px; }
.toast { max-width: 520px; padding: 12px 16px; border-radius: 14px; background: #1c3128; border: 1px solid #2d4b3e; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); font-weight: 600; animation: drop 0.3s ease both; }
.toast.out { opacity: 0; transform: translateY(-10px); transition: 0.3s; }
@keyframes drop { from { transform: translateY(-14px); opacity: 0; } }

.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; pointer-events: none; }

/* --- Barra in basso --- */

.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: calc(var(--tabbar-h) + var(--safe-b)); padding-bottom: var(--safe-b);
  background: rgba(10, 18, 16, 0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.tabbar a { position: relative; display: grid; place-content: center; justify-items: center; gap: 1px; color: var(--muted); text-decoration: none; font-size: 11px; font-weight: 650; }
.tabbar a span { font-size: 22px; filter: grayscale(1) opacity(0.65); transition: filter 0.2s; }
.tabbar a.on { color: var(--gold); }
.tabbar a.on span { filter: none; }
body.has-live .tabbar a[data-tab='torneo']::after {
  content: 'LIVE'; position: absolute; top: 6px; left: calc(50% + 8px);
  padding: 0 4px; border-radius: 4px; background: var(--red); color: #fff;
  font-size: 9px; font-weight: 900; letter-spacing: 0.04em;
  animation: pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Lega condivisa */
.join { text-align: center; padding: 32px 8px; max-width: 460px; margin: 0 auto; }
.join-logo { width: 96px; height: 96px; margin-bottom: 12px; }
.join h1 { margin: 4px 0 12px; }
.join .row { margin-top: 20px; }
.join-warn { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; font-size: 14px; margin-top: 16px; }
.empty .hint { margin-top: 12px; }
.soon { text-align: center; }
.soon h2 { margin: 4px 0 8px; }
.soon .btn { margin-top: 16px; }
.form-error { color: var(--red); font-size: 14px; margin: 0 0 12px; }