/* Palette allineata a APP/little-fuzion-dashboard.html: viola + ciano su fondo
   quasi nero, bordi viola trasparenti invece che grigi. */
:root {
  --bg: #07070d;
  --surface: #0d0d18;
  --surface2: #12121f;
  --surface3: #181828;
  --border: rgba(124, 58, 237, .16);
  --border2: rgba(255, 255, 255, .06);
  --text: #EEEEFF;
  --muted: #A0A0C0;
  --muted2: #5a5a7a;

  --accent: #7C3AED;    /* viola Fuze */
  --accent2: #00D4FF;   /* ciano Fuze */
  --accent-l: #9D65FF;
  --grad: linear-gradient(135deg, #7C3AED 0%, #00D4FF 100%);
  --glow-p: 0 0 24px rgba(124, 58, 237, .35);
  --glow-c: 0 0 24px rgba(0, 212, 255, .30);

  /* Ruoli Fuze Duel */
  --p1: #00D4FF;    /* Blue-Eyes */
  --p2: #9D65FF;    /* Dark Magician */
  --gold: #F5C842;  /* solo vincitore / podio / cut */
  --danger: #FF5C72;
  --green: #00C97A;

  --radius: 16px;
  --radius-sm: 10px;
  --header-h: 64px;
  --gap: 16px;
  --page: 32px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

/* Sfondo animato: due strati di macchie viola/ciano che derivano lentamente,
   invece del nero piatto. Sono pseudo-elementi di body, quindi non serve
   markup in nessuna pagina.
   Si anima solo `transform`, che il browser compone sulla GPU: niente repaint
   e nessun costo misurabile su PageSpeed. */
body::before,
body::after {
  content: '';
  position: fixed;
  inset: -30%;
  z-index: -2;
  pointer-events: none;
  will-change: transform;
}
body::before {
  background:
    radial-gradient(36% 40% at 24% 30%, rgba(124, 58, 237, .30), transparent 63%),
    radial-gradient(32% 36% at 76% 26%, rgba(0, 212, 255, .20), transparent 62%);
  filter: blur(50px);
  animation: drift-a 38s ease-in-out infinite alternate;
}
body::after {
  background:
    radial-gradient(34% 34% at 62% 78%, rgba(157, 101, 255, .22), transparent 62%),
    radial-gradient(26% 30% at 18% 74%, rgba(0, 212, 255, .13), transparent 60%);
  filter: blur(60px);
  animation: drift-b 52s ease-in-out infinite alternate;
}

@keyframes drift-a {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1.00) rotate(0deg); }
  50%  { transform: translate3d(4%,  3%, 0) scale(1.14) rotate(5deg); }
  100% { transform: translate3d(-1%, 4%, 0) scale(1.06) rotate(-4deg); }
}
@keyframes drift-b {
  0%   { transform: translate3d(2%,  3%, 0) scale(1.08) rotate(2deg); }
  50%  { transform: translate3d(-4%, -2%, 0) scale(1.00) rotate(-5deg); }
  100% { transform: translate3d(3%, -4%, 0) scale(1.12) rotate(3deg); }
}

/* Sfondo atmosferico: artwork Yu-Gi-Oh sfocato dietro un overlay scuro.
   L'immagine la imposta ogni pagina con --hero-img.
   L'artwork è una carta in verticale: ancorata in alto al centro invece che
   stirata su tutto lo schermo, altrimenti su desktop diventa una macchia. */
/* z-index -3: sotto lo sfondo animato (-2), non sopra. I suoi veli dipingono
   var(--bg) pieno, e da -1 coprirebbero del tutto l'animazione. */
.bg-art {
  position: fixed; inset: 0; z-index: -3; overflow: hidden;
}
.bg-art::before {
  content: '';
  position: absolute; left: 50%; top: -10%;
  width: min(1100px, 130vw); aspect-ratio: 1 / 1;
  transform: translateX(-50%);
  background-image: var(--hero-img, none);
  background-size: cover; background-position: center 22%;
  filter: blur(22px) saturate(0.85);
  opacity: 0.5;
}
/* Sfuma l'artwork nel fondo pagina: resta leggibile in alto, sparisce sotto. */
.bg-art::after {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, transparent 0%, var(--bg) 80%),
    linear-gradient(to bottom, rgba(7,7,13,.35) 0%, var(--bg) 70%);
}

/* Hero della home: gli artwork si devono vedere, non solo intuire.
   Due immagini ritagliate (cards_cropped, senza cornice carta) affiancate,
   sfumate nel fondo con una mask verticale + overlay per la leggibilita' del testo. */
.hero {
  position: relative;
  min-height: 300px;
  display: flex; align-items: flex-end;
  padding: 28px 20px 24px;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.hero-art {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--art-b), var(--art-a);
  background-repeat: no-repeat, no-repeat;
  background-size: 46% auto, 44% auto;
  background-position: 100% 26%, 68% 20%;
  filter: saturate(0.92);
}
/* I bordi delle immagini si sfumano con due veli che dipingono il colore di
   fondo, non con mask-image: le maschere multiple e il loro compositing danno
   risultati diversi tra browser, e quando non si applicano lasciano tagli netti.
   Un gradiente verso var(--bg) invece funziona ovunque allo stesso modo. */
/* Velo scuro sopra l'artwork: sfuma il bordo sinistro delle immagini e tiene
   leggibile il titolo. Deve stare SOPRA .hero-art, da cui lo z-index:
   come pseudo-elemento ::before verrebbe dipinto sotto. */
.hero::before,
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
/* Velo orizzontale: nasconde il bordo sinistro e tiene leggibile il titolo.
   Deve essere quasi pieno fin dove inizia l'immagine (il Mago Nero parte al 38%
   della larghezza): un bordo verticale netto si vede comunque, se il velo li'
   non e' praticamente opaco. */
.hero::before {
  /* Trasparente fin dove non c'è immagine da coprire (parte al 38%), così lo
     sfondo animato prosegue anche dentro l'hero invece di lasciare una banda
     nera piatta sotto il titolo. */
  background: linear-gradient(100deg,
    transparent 0%, rgba(7,7,13,.45) 18%, rgba(7,7,13,.95) 34%,
    rgba(7,7,13,.28) 58%, rgba(7,7,13,.05) 78%, rgba(7,7,13,.35) 100%);
}
/* Velo verticale: fonde l'artwork nel fondo pagina. */
.hero::after {
  background: linear-gradient(to bottom,
    transparent 0%, transparent 38%, rgba(7,7,13,.55) 72%, var(--bg) 100%);
}
.hero-copy { position: relative; z-index: 2; max-width: 34ch; }
.hero-copy h1 {
  margin: 0 0 10px;
  font-size: clamp(28px, 5.2vw, 40px);
  font-weight: 700; letter-spacing: -.01em; line-height: 1.1;
  text-wrap: balance;
  text-shadow: 0 2px 18px rgba(7,7,13,.9);
}
/* "Yu-Gi-Oh" non deve spezzarsi sui trattini. */
.hero-copy h1 .accent { white-space: nowrap; }
.hero-copy h1 .accent {
  background: linear-gradient(120deg, var(--p1), var(--p2));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-copy p {
  margin: 0; color: var(--muted); max-width: 40ch;
  text-shadow: 0 1px 12px rgba(7,7,13,.9);
}
@media (max-width: 700px) {
  /* Su mobile non c'e' spazio per affiancare testo e artwork: le immagini
     vanno in alto a tutta larghezza e il testo sotto, sul fondo pieno. */
  .hero { min-height: 300px; padding: 20px 14px 18px; }
  .hero-art {
    background-size: 64% auto, 58% auto;
    background-position: 106% 10%, 26% 6%;
  }
  /* Su mobile il testo sta sotto le immagini: il velo diventa tutto verticale. */
  .hero::before {
    background: linear-gradient(180deg,
      rgba(7,7,13,.12) 0%, rgba(7,7,13,.5) 40%, rgba(7,7,13,.92) 68%, var(--bg) 92%);
  }
  .hero::after { background: none; }
  .hero-copy { max-width: none; }
}

header.app {
  position: sticky; top: 0; z-index: 10;
  height: var(--header-h);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: linear-gradient(135deg, rgba(124,58,237,.22) 0%, rgba(13,13,24,.92) 62%);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
header.app .logo {
  width: 36px; height: 36px; border-radius: var(--radius-sm);
  background: var(--grad);
  box-shadow: var(--glow-p);
  display: grid; place-items: center; font-weight: 700; font-size: 18px;
  flex: 0 0 auto;
}
header.app h1 {
  font-size: 17px; font-weight: 700; margin: 0; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
header.app .spacer { flex: 1; }

main { max-width: 960px; margin: 0 auto; padding: var(--page) 20px 80px; }
@media (max-width: 640px) { main { padding: 20px 14px 72px; } }

.card {
  background: linear-gradient(135deg, rgba(124,58,237,.10) 0%, rgba(0,212,255,.03) 100%),
              var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: var(--gap);
}
.card.holo { position: relative; overflow: hidden; }
.card.holo:hover::before {
  content: ''; position: absolute; inset: -40%;
  background: linear-gradient(115deg, transparent 40%,
    rgba(0,212,255,.10) 50%, transparent 60%);
  pointer-events: none;
}

h2 { font-size: 18px; margin: 0 0 12px; }
.muted { color: var(--muted); font-size: 13px; }

/* ─── Sistema pulsanti ───
   Tre livelli, uno solo per contesto è primario:
   .btn-primary  azione principale (gradiente pieno)
   .btn          azione secondaria (superficie)
   .btn-ghost    utility (solo bordo, non compete col resto)
   .btn-danger   distruttivo
   Modificatori: .btn-sm, .btn-icon */
button, .btn {
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface2); color: var(--text);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  transition: background .14s ease, border-color .14s ease,
              transform .12s ease, box-shadow .14s ease;
}
button:hover, .btn:hover {
  background: var(--surface3); border-color: rgba(124,58,237,.4);
  transform: translateY(-1px);
}
button:active, .btn:active { transform: translateY(0); }
button:focus-visible, .btn:focus-visible,
input:focus-visible, select:focus-visible {
  outline: 2px solid var(--accent2); outline-offset: 2px;
}
button:disabled { opacity: .4; cursor: not-allowed; transform: none; background: var(--surface2); }

.btn-primary {
  background: var(--grad); border-color: transparent;
  color: #fff; font-weight: 600;
  box-shadow: var(--glow-p);
}
.btn-primary:hover {
  background: var(--grad); border-color: transparent;
  filter: brightness(1.1); box-shadow: 0 0 30px rgba(124,58,237,.5);
}

.btn-ghost {
  background: transparent; border-color: var(--border); color: var(--muted);
}
.btn-ghost:hover { background: rgba(124,58,237,.10); color: var(--text); }

.btn-danger { border-color: rgba(255,92,114,.45); color: var(--danger); background: transparent; }
.btn-danger:hover { background: rgba(255,92,114,.12); border-color: var(--danger); }

.btn-sm { padding: 6px 11px; font-size: 13px; gap: 5px; }
.btn .ico, button .ico { width: 15px; height: 15px; flex: 0 0 auto; opacity: .9; }
.btn-primary .ico { opacity: 1; }

/* Gruppo di pulsanti: azioni a sinistra, utility separate da una linea. */
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.btn-sep {
  width: 1px; align-self: stretch; min-height: 22px;
  background: var(--border); margin: 0 2px;
}

input, select {
  font: inherit; width: 100%;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 10px 12px;
}
label { display: block; font-size: 13px; color: var(--muted); margin: 0 0 6px; }
.field { margin-bottom: 12px; }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; }
tr.is-cut td { background: rgba(234,179,8,.07); }
tr.is-cut td:first-child { border-left: 2px solid var(--gold); }
/* La propria riga in classifica: a un torneo la si cerca a colpo d'occhio. */
tr.is-me td { background: rgba(0,212,255,.10); font-weight: 600; }
tr.is-me td:first-child { border-left: 2px solid var(--accent2); }

.badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 600; border: 1px solid var(--border);
  white-space: nowrap;
}
.badge.live { color: var(--accent2); border-color: var(--accent2); }
.badge.done { color: var(--muted2); }
.badge.gold { color: var(--gold); border-color: var(--gold); }
.badge.demo { color: var(--accent-l); border-color: var(--accent-l); }

/* Schermata duello */
.duel { display: flex; flex-direction: column; min-height: 100dvh; }
.duel .panes { flex: 1; display: flex; flex-direction: column; }
.lp-pane {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 14px;
  border: 1px solid var(--border); border-radius: var(--radius); margin: 8px;
}
.lp-pane.p1 { border-color: color-mix(in srgb, var(--p1) 45%, var(--border)); }
.lp-pane.p2 { border-color: color-mix(in srgb, var(--p2) 45%, var(--border)); }
.lp-value {
  font-size: clamp(44px, 14vw, 84px); font-weight: 700;
  font-variant-numeric: tabular-nums; line-height: 1;
}
.lp-pane.p1 .lp-value { color: var(--p1); }
.lp-pane.p2 .lp-value { color: var(--p2); }
.lp-name {
  font-size: 15px; color: var(--muted);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lp-buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.lp-buttons button { padding: 14px 0; font-weight: 600; font-variant-numeric: tabular-nums; }

.timer {
  text-align: center; font-size: clamp(28px, 9vw, 44px); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.timer.warn { color: var(--gold); }
.timer.over { color: var(--danger); }
.ep-count {
  font-size: 20px; font-weight: 700; color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* ─── Barra di controllo del torneo ─── */
.ctrl {
  display: flex; gap: var(--gap); align-items: stretch; flex-wrap: wrap;
  max-width: 960px; margin: 0 auto; padding: 20px;
}
.ctrl-info { flex: 1 1 320px; min-width: 0; }
.ctrl-info h2 { font-size: 22px; margin: 0 0 4px; }
.ctrl-info p { margin: 0 0 12px; }
.ctrl-utils { display: flex; flex-wrap: wrap; gap: 8px; }
.ctrl-utils button, .ctrl-utils .btn { padding: 8px 14px; font-size: 14px; }

.ctrl-clock {
  flex: 0 0 auto; min-width: 260px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(124,58,237,.14) 0%, rgba(0,212,255,.05) 100%),
              var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.clock {
  font-size: clamp(44px, 9vw, 68px); font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--accent2); text-shadow: var(--glow-c);
}
.clock.warn { color: var(--gold); text-shadow: 0 0 24px rgba(245,200,66,.35); }
.clock.over { color: var(--danger); text-shadow: 0 0 24px rgba(255,92,114,.45); }
.clock.idle { color: var(--muted2); text-shadow: none; }
.clock-label { font-size: 13px; text-align: center; }
.clock-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.clock-btns button { padding: 7px 12px; font-size: 13px; }
@media (max-width: 700px) {
  .ctrl { padding: 14px; }
  .ctrl-clock { width: 100%; min-width: 0; }
}

/* ─── Tabellone dei round ───
   Colonne affiancate, una per round. Nella fase a eliminazione le colonne si
   collegano con linee disegnate dai bordi degli pseudo-elementi. */
.board-wrap { overflow-x: auto; padding-bottom: 6px; }
.board { display: flex; gap: 0; align-items: stretch; min-width: min-content; }
.round-col { display: flex; flex-direction: column; min-width: 220px; }
.round-col + .round-col { margin-left: 34px; }
.round-head {
  font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--muted); font-weight: 600; padding: 0 0 10px; text-align: center;
}
.round-body {
  flex: 1; display: flex; flex-direction: column; justify-content: space-around; gap: 10px;
}

.m-card {
  position: relative;
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  /* Niente overflow:hidden: ritaglierebbe i connettori del bracket, che
     sporgono a destra della card. Gli angoli li arrotondano i lati. */
}
.m-card .m-side:first-of-type {
  border-top-left-radius: var(--radius-sm); border-top-right-radius: var(--radius-sm);
}
.m-card .m-side:last-of-type {
  border-bottom-left-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm);
}
.m-card.live { border-color: var(--accent2); box-shadow: var(--glow-c); }
/* Per l'organizzatore la card è cliccabile: si inserisce il risultato da qui. */
.m-card.editable { cursor: pointer; transition: border-color .14s ease, transform .12s ease; }
.m-card.editable:hover { border-color: var(--accent-l); transform: translateY(-1px); }
.m-card.editable:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.m-card.done { opacity: .92; }
.m-side {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
}
.m-side + .m-side { border-top: 1px solid var(--border); }
.m-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m-score {
  font-variant-numeric: tabular-nums; font-weight: 700; color: var(--muted);
  min-width: 14px; text-align: right;
}
.m-side.win .m-name { color: var(--text); font-weight: 600; }
.m-side.win .m-score { color: var(--green); }
.m-side.lose .m-name { color: var(--muted2); }
.m-card .m-tag {
  position: absolute; top: 0; left: 0;
  font-size: 10px; padding: 2px 6px; border-bottom-right-radius: 8px;
  background: var(--surface3); color: var(--muted);
}
/* Il badge del tavolo sta in alto a sinistra: senza questo spazio coprirebbe
   il nome del primo giocatore. */
.m-card .m-side:first-of-type .m-name { padding-left: 26px; }
.m-card.bye .m-side { color: var(--gold); }

/* Connettori: una linea esce da ogni card verso destra, e una spina verticale
   unisce le due card che confluiscono nella stessa del turno seguente. */
.round-col.cut .m-card::after {
  content: ''; position: absolute; top: 50%; right: -18px;
  width: 18px; height: 2px; background: rgba(124,58,237,.55);
}
.round-col.cut:last-child .m-card::after { display: none; }
.round-col.cut .m-card::before {
  content: ''; position: absolute; right: -18px;
  width: 2px; background: rgba(124,58,237,.55);
}
.round-col.cut .m-card:nth-child(odd)::before { top: 50%; height: calc(50% + 5px); }
.round-col.cut .m-card:nth-child(even)::before { bottom: 50%; height: calc(50% + 5px); }
.round-col.cut:last-child .m-card::before { display: none; }

/* ─── Schermo TV ───
   Pensata per essere letta da lontano: cronometro enorme, righe grandi,
   nessun elemento interattivo tranne lo sblocco dell'audio. */
body.tv { height: 100dvh; overflow: hidden; display: flex; flex-direction: column; }
.tv-top {
  display: flex; align-items: center; gap: 24px;
  padding: 18px 28px; border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, rgba(124,58,237,.20) 0%, rgba(13,13,24,.9) 62%);
}
.tv-title { flex: 1; min-width: 0; }
.tv-title h1 {
  margin: 0; font-size: clamp(22px, 3vw, 38px); font-weight: 700;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tv-title p { margin: 2px 0 0; font-size: clamp(13px, 1.4vw, 18px); }
.tv-clock { text-align: right; flex: 0 0 auto; }
.clock.tv-big { font-size: clamp(56px, 9vw, 132px); line-height: .95; }
.tv-clock .clock-label { font-size: clamp(12px, 1.2vw, 16px); text-align: right; }

.tv-main {
  /* Il `main` globale è largo al massimo 960px e centrato: su uno schermo da
     sala servirebbe a poco. Qui si prende tutta la larghezza. */
  max-width: none; margin: 0;
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: 1.7fr 1fr; gap: 28px; padding: 18px 28px;
}
.tv-main section { min-height: 0; display: flex; flex-direction: column; }
.tv-main h2 {
  font-size: clamp(13px, 1.3vw, 17px); text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted); margin: 0 0 10px;
}
.tv-tables > div, .tv-side > div { flex: 1; min-height: 0; overflow-y: auto; }

.tv-row {
  display: flex; align-items: center; gap: 16px;
  padding: clamp(8px, 1.1vh, 16px) 14px;
  border-bottom: 1px solid var(--border);
  font-size: clamp(15px, 1.7vw, 26px);
}
.tv-row.done { opacity: .55; }
.tv-players { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; }
.tv-p { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-p:last-of-type { text-align: right; }
.tv-p.win { color: var(--accent2); font-weight: 700; }
.tv-vs {
  flex: 0 0 auto; color: var(--muted2); font-variant-numeric: tabular-nums;
  font-size: .85em;
}
.tv-side table { font-size: clamp(13px, 1.4vw, 20px); }
.tv-side td { padding: clamp(5px, .9vh, 12px) 8px; }

.tv-sound { position: fixed; right: 16px; bottom: 16px; z-index: 50; }

@media (max-width: 900px) {
  body.tv { overflow: auto; height: auto; }
  .tv-main { grid-template-columns: 1fr; }
  .tv-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .tv-clock { text-align: left; }
  .tv-clock .clock-label { text-align: left; }
}

/* Albo d'oro: due mini classifiche affiancate.
   Le altezze minime servono a non far saltare il layout quando i dati
   arrivano: senza, il CLS della home sale sopra soglia. */
#list { min-height: 210px; }
.hof { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.hof .card > div { min-height: 96px; }
.hof h3 { margin: 0 0 10px; font-size: 15px; color: var(--muted); font-weight: 600; }
.hof td { padding: 7px 6px; }
@media (max-width: 640px) { .hof { grid-template-columns: 1fr; } }

/* Podio di fine torneo */
.podium { display: flex; gap: 10px; justify-content: center; align-items: flex-end; margin: 8px 0 4px; }
.podium .step {
  flex: 1 1 0; max-width: 150px; text-align: center;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface2); padding: 10px 8px;
}
.podium .step .who {
  font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.podium .step .pts { font-size: 12px; color: var(--muted); }
.podium .p1 { border-color: var(--gold); padding-top: 20px; box-shadow: 0 0 24px rgba(245,200,66,.18); }
.podium .p1 .who { color: var(--gold); }
.podium .p2 { padding-top: 14px; }

/* Registro azioni */
.log-list { max-height: 320px; overflow-y: auto; }
.log-row {
  display: flex; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.log-when { color: var(--muted2); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.log-what { flex: 1; min-width: 0; }
.log-who { color: var(--accent-l); font-weight: 600; }

/* Overlay del QR */
.qr-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(7,7,13,.86); backdrop-filter: blur(6px);
  display: grid; place-items: center; padding: 20px;
}
.qr-card { max-width: 340px; text-align: center; margin: 0; }
.qr-code { margin: 14px 0; display: grid; place-items: center; }
.qr-code canvas { border-radius: 8px; max-width: 100%; height: auto; }

.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 10px 18px; z-index: 100;
  max-width: 90vw; text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}