/* font Archivo servito dal sito */
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 900;font-stretch:62% 125%;font-display:swap;src:url(/assets/fonts/archivo-latin-wdth-var.4c98b9d490.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* src/styles.css */
/* Gran Premio del Pranzo: stili comuni (pagina, tabellone a palette, palco, comandi, programma locale).
   Linguaggio visivo: una sala d'attesa di stazione (fascia blu notte in testa col tabellone a palette),
   segnaletica milanese (etichette strette in maiuscolo, righe nette, numeri grandi) e grafica sportiva
   televisiva sul palco. Colori portanti: blu notte e cobalto. Verde solo per ciò che è vivo o tocca a te
   (gara in corso, spinta, "tu", via). Azzurro e viola per dettagli rari. Angoli quasi vivi, righe al posto delle ombre.
   Font: Archivo, con l'asse della larghezza (62-125%) per passare dalle etichette strette ai titoli larghi. */
:root{
  box-sizing:border-box;
  /* colori fissi: sala, tabellone e palco sono scuri in entrambi i temi */
  --navy:#0B1F3A;--navy-2:#032D42;--navy-3:#07162B;--navy-4:#12294A;
  --cobalt:#00338D;--azure:#0091DA;--violet:#483698;
  --live:#62D84E;--live-hover:#79E466;--live-ink:#0B1F3A;--live-edge:#2F8A22;
  --flap-ink:#F4F7FB;--flap-ink-2:#8CCBF0;
  --hud:rgba(7,22,43,.86);--hud-solid:#0B1F3A;--hud-soft:#A9B8CC;--hud-line:rgba(255,255,255,.12);
  --on-dark:#EAF0F7;--on-dark-soft:#A9B8CC;
  --focus-dark:#62D84E;
  --danger:#C8102E;
  /* superfici e testo: tema chiaro */
  --paper:#F2F4F7;--panel:#FFFFFF;--sunk:#E6EAF0;--ink:#0B1F3A;--ink-soft:#4A5B73;
  --line:#D3DAE4;--line-ui:#7B8BA3;--rule:#0B1F3A;--field:#FFFFFF;
  --accent:#00338D;--btn:#00338D;--btn-hover:#00277A;--btn-ink:#FFFFFF;
  --live-text:#1E7B1A;--focus:#00338D;--danger-ink:#B00E28;--win:#00338D;
  --sel:#0B1F3A;--sel-ink:#FFFFFF;
  --font:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --gut:clamp(16px,3vw,32px);--maxw:1240px;
  color-scheme:light;
}
/* tema scuro: non un'inversione, una sala di sera. Fondo più profondo della fascia, testi azzurrati */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--paper:#061527;--panel:#0B1F3A;--sunk:#081A31;--ink:#EAF0F7;--ink-soft:#9DB0C8;--line:#1C3556;--line-ui:#6E86A8;--rule:#C9D6E6;--field:#081A31;--accent:#8FB8FF;--btn:#2F5FC4;--btn-hover:#3A6FD8;--live-text:#62D84E;--focus:#62D84E;--danger-ink:#FF8A8F;--win:#62D84E;--sel:#EAF0F7;--sel-ink:#0B1F3A;color-scheme:dark;}
}
:root[data-theme="dark"]{--paper:#061527;--panel:#0B1F3A;--sunk:#081A31;--ink:#EAF0F7;--ink-soft:#9DB0C8;--line:#1C3556;--line-ui:#6E86A8;--rule:#C9D6E6;--field:#081A31;--accent:#8FB8FF;--btn:#2F5FC4;--btn-hover:#3A6FD8;--live-text:#62D84E;--focus:#62D84E;--danger-ink:#FF8A8F;--win:#62D84E;--sel:#EAF0F7;--sel-ink:#0B1F3A;color-scheme:dark;}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--paper);}
*,*::before,*::after{box-sizing:border-box;}
[hidden]{display:none !important;}
body{margin:0;padding-bottom:env(safe-area-inset-bottom,0px);background:var(--paper);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
button,input,select{font:inherit;color:inherit;}
button{-webkit-tap-highlight-color:transparent;}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;}
/* sulle superfici scure (sala, palco, tabellone, schede) il contorno è verde */
.hall :focus-visible,.stage :focus-visible,.caller :focus-visible,.arena.fs :focus-visible{outline-color:var(--focus-dark);}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut) 72px;}

/* ---------- Sala: testata e tabellone ---------- */
.hall{background:var(--navy);color:var(--on-dark);padding-top:env(safe-area-inset-top,0px);border-bottom:1px solid rgba(255,255,255,.06);}
.hall-in{max-width:var(--maxw);margin:0 auto;padding:clamp(18px,3vw,36px) var(--gut) clamp(18px,3vw,32px);}
.masthead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px;margin-bottom:clamp(16px,2.4vw,26px);}
.masthead h1{margin:0;font-weight:900;font-stretch:122%;font-size:clamp(34px,6.4vw,80px);line-height:.86;letter-spacing:-.03em;color:#fff;}
.masthead .meta{max-width:36ch;margin:0;padding-top:10px;border-top:2px solid rgba(255,255,255,.22);color:var(--on-dark-soft);font-size:14.5px;line-height:1.45;}
.masthead .meta strong{display:block;margin-bottom:3px;color:#fff;font-weight:700;font-stretch:87.5%;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;}
.masthead .meta strong:first-letter{text-transform:uppercase;}
.masthead .meta a{color:#fff;font-weight:700;text-underline-offset:3px;text-decoration-color:var(--live);text-decoration-thickness:2px;}

/* tabellone a palette: pannello appeso nella sala, palette blu con le lettere bianche; la seconda riga in azzurro */
.board{position:relative;background:var(--navy-3);border-radius:3px;padding:clamp(10px,1.6vw,18px) clamp(10px,1.6vw,18px) clamp(12px,1.8vw,20px);color:var(--flap-ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07),0 1px 0 rgba(255,255,255,.05);}
.board-head{display:flex;align-items:center;gap:14px;margin:0 1px 12px;font-stretch:87.5%;font-size:clamp(12px,1.25vw,14px);letter-spacing:.09em;text-transform:uppercase;line-height:1.2;}
.board-title{color:#fff;font-weight:800;white-space:nowrap;}
.board-status{position:relative;color:var(--on-dark-soft);font-weight:600;flex:1 1 0;width:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.board-clock{padding:3px 7px 2px;border-radius:2px;background:#fff;color:var(--navy);font-weight:800;font-stretch:100%;letter-spacing:.02em;font-variant-numeric:tabular-nums;}
.board-clock:empty{display:none;}
/* con una gara in arrivo o in corso lo stato ha la spia verde */
body.lv-coming .board-status,body.lv-race .board-status{padding-left:16px;color:#fff;}
body.lv-coming .board-status::before,body.lv-race .board-status::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-5px;border-radius:50%;background:var(--live);box-shadow:0 0 0 3px rgba(98,216,78,.22);}
body.lv-race .board-status::before{animation:spia 1.6s ease-in-out infinite;}
@keyframes spia{50%{box-shadow:0 0 0 6px rgba(98,216,78,0)}}
.flaps{display:grid;gap:clamp(2px,.36vw,5px);}
.flaps + .flaps{margin-top:clamp(5px,.7vw,9px);}
.flap{position:relative;aspect-ratio:5/7;container-type:inline-size;perspective:320px;border-radius:2px;background:#132846;box-shadow:0 1px 0 rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.25);}
.flaps.small .flap{aspect-ratio:5/6.2;}
.flap .h{position:absolute;left:0;right:0;height:50%;overflow:hidden;}
.flap .top{top:0;border-radius:2px 2px 0 0;transform-origin:50% 100%;background:linear-gradient(#1B3459,#162D50);}
.flap .bot{bottom:0;border-radius:0 0 2px 2px;transform-origin:50% 0;background:linear-gradient(#12284A,#183156);}
.flap .h span{position:absolute;left:0;right:0;height:200%;display:flex;align-items:center;justify-content:center;font-size:clamp(10px,3vw,40px);font-size:100cqw;font-weight:700;font-stretch:75%;line-height:1;color:var(--flap-ink);}
.flaps.small .flap .h span{color:var(--flap-ink-2);font-size:90cqw;font-weight:650;}
.flap .top span{top:0;}
.flap .bot span{bottom:0;}
.flap .leaf{visibility:hidden;z-index:2;backface-visibility:hidden;}
/* fessura tra le due palette e i perni ai lati */
.flap::after{content:"";position:absolute;left:0;right:0;top:calc(50% - .5px);height:1px;background:rgba(3,10,22,.9);z-index:3;}
.flaps.big .flap::before{content:"";position:absolute;left:-1px;right:-1px;top:calc(50% - 2px);height:4px;z-index:4;background:linear-gradient(90deg,#030A16 2px,transparent 2px calc(100% - 2px),#030A16 0);pointer-events:none;}
@media (max-width:640px){.flaps.big .flap::before{display:none;}}

/* ---------- Palco ---------- */
.stage{position:relative;margin-top:clamp(16px,2.2vw,24px);border-radius:3px 3px 0 0;overflow:hidden;background:linear-gradient(#8fb3d9,#cfe0ee 55%,#3f7d3a 56%);aspect-ratio:16/9;min-height:280px;isolation:isolate;}
@media (max-width:640px){.stage{aspect-ratio:4/5;}}
#gl{position:absolute;inset:0;width:100%;height:100%;display:block;transition:filter .25s ease;}
.stage.photo #gl{filter:grayscale(1) contrast(1.25) brightness(1.05);}
.labels{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:2;}
.hlabel{position:absolute;left:0;top:0;display:flex;align-items:center;gap:5px;padding:2px 8px 2px 2px;border-radius:3px;background:rgba(7,22,43,.8);color:#fff;font-size:12px;font-weight:650;font-stretch:87.5%;line-height:1.2;white-space:nowrap;will-change:transform;transition:opacity .2s,background .2s;}
.hlabel.lead{background:#fff;color:var(--navy);}
.hlabel.lead .lw{opacity:.66;}
.hlabel.boost{box-shadow:0 0 0 2px #ffb020;}
.hlabel.slow{box-shadow:0 0 0 2px #e0503a;}
.hlabel .lw{font-weight:500;opacity:.72;}
.hlabel .lw:empty{display:none;}
.hlabel img{width:22px;height:22px;margin:-4px -4px -4px 0;object-fit:contain;}
.cloth{flex:none;display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 4px;border-radius:2px;background:var(--c-bg);color:var(--c-fg);font-weight:800;font-stretch:100%;font-size:13px;line-height:1;box-shadow:inset 0 0 0 1px rgba(0,0,0,.22);font-variant-numeric:tabular-nums;}
.hlabel .cloth{min-width:20px;height:18px;font-size:11px;}
/* ---------- Palco: elementi comuni sopra la scena ----------
   Come una grafica televisiva: pannelli blu notte quasi opachi, angoli vivi, cifre tabellari.
   Desktop: comandi in alto a sinistra, distanza in alto a destra, classifica sotto i comandi,
   didascalia della telecamera in alto al centro.
   Schermi stretti: la didascalia passa sotto la classifica (.hudcol), così non si sovrappongono;
   sul telefono tutto si fa più compatto per lasciare libera la scena. */
.hud{position:absolute;z-index:3;background:var(--hud);color:#fff;border-radius:3px;}
.hudcol{display:contents;}
.standings{left:10px;top:58px;margin:0;padding:6px 10px 6px 0;list-style:none;font-size:13px;width:min(42%,300px);border-left:3px solid var(--live);}
.standings li{display:grid;grid-template-columns:2.1em auto minmax(0,1fr) auto;gap:7px;align-items:center;padding:2px 0;}
.standings .p{font-weight:800;font-stretch:87.5%;font-variant-numeric:tabular-nums;color:#fff;text-align:right;}
.standings li:first-child .p{color:var(--live);}
.standings .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:650;}
.standings .w{color:var(--hud-soft);font-weight:500;}
.standings img{width:20px;height:20px;object-fit:contain;}
.stage.racing .standings li:nth-child(n+6){display:none;}
.stage.done .standings,.stage.done .dist{display:none;}
.dist{right:10px;top:10px;padding:6px 11px 6px 12px;font-weight:750;font-stretch:87.5%;font-variant-numeric:tabular-nums;font-size:14px;letter-spacing:.02em;text-align:right;line-height:1.25;}
.dist small{display:block;font-weight:650;font-size:12px;color:var(--hud-soft);}
.stage.racing .dist{box-shadow:inset 0 -3px 0 var(--live);}
.countdown{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none;color:#fff;font-weight:900;font-stretch:125%;font-size:clamp(64px,14vw,170px);line-height:1;text-shadow:0 4px 0 rgba(3,10,22,.35),0 0 40px rgba(3,10,22,.45);-webkit-text-stroke:2px rgba(7,22,43,.55);opacity:0;}
.countdown.pop{animation:cd .7s ease-out forwards;}
@keyframes cd{0%{opacity:0;transform:scale(1.5)}18%{opacity:1;transform:scale(1)}78%{opacity:1}100%{opacity:0;transform:scale(.92)}}
.flash{position:absolute;inset:0;z-index:6;background:#fff;opacity:0;pointer-events:none;}
.flash.on{animation:fl .45s ease-out;}
@keyframes fl{0%{opacity:.9}100%{opacity:0}}
/* scheda del vincitore: una grafica da diretta in alto sopra la scena (tribuna e cielo), la scena del vincitore resta libera.
   Fascia cobalto con l'etichetta, nome grande, riga di chi prenota, pulsante per l'esportazione */
.wcard{position:absolute;z-index:4;left:50%;top:clamp(10px,2.4vw,20px);transform:translateX(-50%);min-width:min(86%,440px);max-width:92%;padding:0 0 16px;text-align:left;background:rgba(7,22,43,.95);color:#fff;border-radius:3px;overflow:hidden;box-shadow:0 18px 40px rgba(3,10,22,.4);border-bottom:4px solid var(--live);}
.wcard.show{animation:wc .45s cubic-bezier(.2,1.2,.4,1) both;}
@keyframes wc{from{opacity:0;transform:translate(-50%,-16px)}to{opacity:1;transform:translate(-50%,0)}}
.wcard .k{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:7px 18px 6px;background:var(--cobalt);color:#fff;font-weight:800;font-stretch:87.5%;font-size:13px;letter-spacing:.12em;text-transform:uppercase;}
.wcard .k::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.35);}
.wcard strong{display:block;padding:0 20px;font-weight:900;font-stretch:118%;font-size:clamp(26px,4.4vw,48px);line-height:1;letter-spacing:-.015em;margin:0 0 10px;overflow-wrap:anywhere;}
.wcard .who{display:inline-flex;align-items:center;gap:9px;padding:0 20px;font-weight:650;font-size:17px;color:var(--on-dark);}
.nogl{position:absolute;inset:0;z-index:1;display:grid;place-items:center;padding:24px;text-align:center;color:#fff;background:var(--navy-2);font-weight:600;}

/* telecronaca: la striscia sotto il palco, come il sottopancia di una diretta */
.caller{display:flex;gap:14px;align-items:flex-start;padding:12px 16px 14px;background:var(--navy);color:var(--on-dark);border-radius:0 0 3px 3px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);}
.caller .mic{flex:none;display:block;margin-top:2px;}
.caller .mic-l{display:block;padding:3px 7px 2px;border:1px solid rgba(255,255,255,.35);border-radius:2px;color:var(--on-dark-soft);font-weight:700;font-stretch:87.5%;font-size:11px;letter-spacing:.12em;text-transform:uppercase;line-height:1.3;}
body.lv-race .caller .mic-l,.stage.racing + .caller .mic-l{border-color:var(--live);color:var(--live);}
.caller-body{min-width:0;flex:1;}
#call{margin:0;font-weight:600;font-size:clamp(15px,1.7vw,18px);line-height:1.4;min-height:1.4em;color:#fff;}
#call.in{animation:callin .3s ease-out;}
@keyframes callin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.order{list-style:none;margin:10px 0 0;padding:10px 0 0;display:flex;flex-wrap:wrap;gap:6px 18px;border-top:1px solid rgba(255,255,255,.12);}
.order li{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--on-dark-soft);}
.order li:first-child{color:#fff;font-weight:700;}
.order .pos{font-weight:800;font-stretch:87.5%;font-variant-numeric:tabular-nums;}
.order li:first-child .pos{color:var(--live);}
.order .cloth{min-width:20px;height:18px;font-size:11px;}

/* ---------- Comandi sotto il palco ---------- */
.controls{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px;margin-top:18px;}
/* via: verde come il semaforo */
.go{display:inline-flex;align-items:center;gap:14px;min-height:56px;border:0;border-radius:3px;padding:0 22px 0 24px;background:var(--live);color:var(--live-ink);font-weight:850;font-stretch:112%;font-size:clamp(18px,2.1vw,21px);letter-spacing:-.005em;cursor:pointer;box-shadow:inset 0 -4px 0 var(--live-edge);transition:background .15s;}
.go:hover{background:var(--live-hover);}
.go:active{transform:translateY(1px);box-shadow:inset 0 -2px 0 var(--live-edge);}
.go:disabled{background:var(--sunk);color:var(--ink-soft);box-shadow:inset 0 0 0 1px var(--line);cursor:default;transform:none;}
.go kbd{font:inherit;font-size:11px;font-weight:750;font-stretch:87.5%;letter-spacing:.08em;text-transform:uppercase;padding:3px 6px 2px;border-radius:2px;box-shadow:inset 0 0 0 1.5px currentColor;opacity:.75;}
@media (hover:none){.go kbd{display:none;}}
.pulegend{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;flex:1;min-width:0;}
.pulegend li{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.3;color:var(--ink-soft);}
.pulegend b{color:var(--ink);font-weight:700;}
.pulegend img{width:36px;height:36px;object-fit:contain;}
.seg{display:inline-flex;border:1px solid var(--line-ui);border-radius:3px;padding:2px;background:var(--panel);}
.seg input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.seg label{display:inline-flex;align-items:baseline;min-height:40px;align-items:center;padding:0 13px;border-radius:2px;cursor:pointer;font-weight:700;font-size:14.5px;color:var(--ink-soft);white-space:nowrap;}
.seg label small{font-weight:600;font-stretch:87.5%;opacity:.85;margin-left:6px;font-size:12px;letter-spacing:.02em;}
.seg input:checked + label{background:var(--sel);color:var(--sel-ink);}
.seg input:focus-visible + label{outline:3px solid var(--focus);outline-offset:1px;}
.seg input:disabled + label{cursor:default;opacity:.6;}
.ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;border:1px solid var(--line-ui);background:transparent;border-radius:3px;padding:0 14px;cursor:pointer;font-size:14.5px;font-weight:650;color:var(--ink);}
.ghost:hover{border-color:var(--ink);background:var(--panel);}
.ghost svg{width:18px;height:18px;flex:none;}
.ghost:disabled{opacity:.5;cursor:default;}
/* pulsanti secondari e livello della grafica, a destra dei comandi */
.tools2{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-left:auto;}
.gfx{display:inline-flex;align-items:center;gap:10px;}
.gfx-l{font-weight:700;font-stretch:87.5%;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);}
.segb button{min-height:38px;padding:0 12px;border:0;border-radius:2px;background:transparent;cursor:pointer;font-weight:650;font-size:14px;color:var(--ink-soft);}
.segb button:hover{color:var(--ink);}
.segb button[aria-pressed="true"]{background:var(--sel);color:var(--sel-ink);}
.gfx-note{flex:1 1 100%;margin:-6px 0 0;text-align:right;font-size:13px;color:var(--ink-soft);}
.gfx-note:empty{display:none;}
@media (max-width:640px){
  .controls{gap:12px;}
  .pulegend{flex:1 1 100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}
  .pulegend li{flex-direction:column;align-items:flex-start;gap:2px;font-size:12.5px;}
  .pulegend li span{display:block;}
  .pulegend b{display:block;font-size:13.5px;}
  .pulegend img{width:30px;height:30px;}
  .tools2{margin-left:0;width:100%;display:grid;grid-template-columns:1fr 1fr;}
  .tools2 .ghost{min-height:44px;}
  .gfx{grid-column:1 / -1;justify-content:space-between;}
  .gfx .seg{flex:1;max-width:280px;}
  .gfx .segb button{flex:1;min-height:40px;}
  .gfx-note{text-align:left;margin-top:-4px;}
}
.fairbox{margin-top:16px;max-width:78ch;}
.fairbox summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer;font-size:14.5px;font-weight:700;color:var(--ink);list-style:none;}
.fairbox summary::-webkit-details-marker{display:none;}
.fairbox summary::before{content:"";width:8px;height:8px;margin:0 2px 3px 1px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);transition:transform .15s;}
.fairbox[open] summary::before{transform:rotate(45deg);margin-bottom:6px;}
.fair{margin:0 0 0 20px;padding-left:14px;border-left:2px solid var(--line);font-size:14px;color:var(--ink-soft);}

/* ---------- Programma locale e albo d'oro ---------- */
.panels{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:36px 48px;margin-top:40px;}
@media (max-width:820px){.panels{grid-template-columns:1fr;}}
.card{border-top:3px solid var(--rule);padding-top:14px;}
.card h2{margin:0 0 4px;font-size:clamp(22px,2.4vw,28px);font-weight:850;font-stretch:112%;letter-spacing:-.01em;line-height:1.1;}
.card h3{margin:22px 0 8px;font-size:12.5px;font-weight:750;font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.hint{margin:0 0 10px;color:var(--ink-soft);font-size:14.5px;max-width:62ch;}
fieldset.editor{border:0;margin:0;padding:0;min-width:0;}
.colhead{display:grid;grid-template-columns:30px minmax(0,1.25fr) minmax(0,1fr) 84px 34px;gap:10px;font-size:11.5px;font-weight:700;font-stretch:87.5%;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-soft);padding:6px 0 6px;border-bottom:2px solid var(--rule);}
.entries{list-style:none;margin:0;padding:0;}
.entry{display:grid;grid-template-columns:30px minmax(0,1.25fr) minmax(0,1fr) 84px 34px;align-items:center;gap:6px 10px;padding:7px 0;border-bottom:1px solid var(--line);}
.entry .cloth{min-width:28px;height:24px;font-size:14px;}
.fld{width:100%;min-width:0;border:0;border-bottom:2px solid transparent;background:transparent;padding:6px 2px;font-size:16px;border-radius:0;}
.fld.rest{font-weight:700;}
.fld.who{color:var(--ink-soft);font-weight:550;}
.fld:hover{border-bottom-color:var(--line-ui);}
.fld:focus{outline:none;border-bottom-color:var(--focus);color:var(--ink);}
.entry.off .fld,.entry.off .cloth{opacity:.42;}
@media (max-width:560px){
  .colhead{display:none;}
  .entry{grid-template-columns:30px minmax(0,1fr) auto 34px;}
  .entry .rest{grid-column:2;grid-row:1;}
  .entry .who{grid-column:2;grid-row:2;padding-top:0;}
  .entry .switch{grid-column:3;grid-row:1 / span 2;}
  .entry .remove{grid-column:4;grid-row:1 / span 2;}
  .entry .cloth{grid-row:1 / span 2;}
}
.switch{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-size:13px;color:var(--ink-soft);position:relative;}
.switch input{position:absolute;opacity:0;width:1px;height:1px;}
.switch .knob{position:relative;width:38px;height:22px;border-radius:2px;background:var(--sunk);box-shadow:inset 0 0 0 1px var(--line-ui);transition:background .15s;flex:none;}
.switch .knob::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:1px;background:var(--line-ui);transition:transform .15s,background .15s;}
.switch input:checked + .knob{background:var(--live);box-shadow:none;}
.switch input:checked + .knob::after{transform:translateX(16px);background:var(--live-ink);}
.switch input:focus-visible + .knob{outline:3px solid var(--focus);outline-offset:2px;}
@media (max-width:560px){.switch .lab{display:none;}}
.remove{width:34px;height:34px;border:0;border-radius:2px;background:transparent;cursor:pointer;color:var(--ink-soft);font-size:15px;padding:0;}
.remove:hover{background:rgba(200,16,46,.1);color:var(--danger-ink);}
.add{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) auto;gap:8px;margin-top:14px;}
@media (max-width:560px){.add{grid-template-columns:1fr 1fr;}.add button{grid-column:1 / -1;}}
.add input{min-width:0;min-height:44px;border:1px solid var(--line-ui);border-radius:3px;background:var(--field);padding:9px 12px;font-size:16px;}
.add input:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:transparent;}
.add button{min-height:44px;border:0;border-radius:3px;background:var(--btn);color:var(--btn-ink);padding:0 18px;font-weight:750;cursor:pointer;}
.add button:hover{background:var(--btn-hover);}
.rowlinks{display:flex;gap:18px;flex-wrap:wrap;margin-top:14px;}
.linkbtn{border:0;background:none;padding:0;color:var(--ink-soft);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:13px;}
.linkbtn.armed{color:var(--danger-ink);font-weight:700;}
.empty{color:var(--ink-soft);font-size:14.5px;margin:6px 0 0;}
.tally{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px;}
.tally li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px;}
.t-name{font-weight:650;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar{height:6px;margin-top:4px;border-radius:0;background:var(--accent);}
.bar.b2{background:var(--live);}
.t-n{font-weight:850;font-stretch:87.5%;font-variant-numeric:tabular-nums;font-size:20px;}
.recent{list-style:none;margin:0;padding:0;font-size:14.5px;}
.recent li{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);}
.recent .r-who{color:var(--ink-soft);}
.recent time{color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap;}
#confetti{position:fixed;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:100;}

/* comandi sul palco (telecamera, schermo intero) */
.tools{left:10px;top:10px;display:flex;align-items:center;gap:6px;padding:4px;}
.tbtn{display:inline-grid;place-items:center;min-width:34px;height:32px;padding:0 10px;border:0;border-radius:2px;background:rgba(255,255,255,.12);color:#fff;font-weight:700;font-size:14px;cursor:pointer;}
.tbtn:hover{background:rgba(255,255,255,.24);}
.tbtn svg{width:18px;height:18px;display:block;}
.tbtn:disabled{opacity:.45;cursor:default;}
.camsel select{height:32px;max-width:min(38vw,250px);border:0;border-radius:2px;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-weight:600;font-size:13px;padding:0 8px;cursor:pointer;}
.camsel select option{color:#0B1F3A;background:#fff;}
.fsgo{display:none;background:var(--live);color:var(--live-ink);}
.fsgo:hover{background:var(--live-hover);}
/* didascalia della telecamera ("Sorpasso di...", "Telecamera su..."): striscia blu notte con il bordo azzurro */
.camtag{position:absolute;z-index:3;left:50%;top:12px;transform:translateX(-50%);max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis;padding:6px 14px 6px 13px;border-radius:2px;background:rgba(7,22,43,.9);box-shadow:inset 3px 0 0 var(--azure);color:#fff;font-weight:700;font-size:14px;line-height:1.3;white-space:nowrap;pointer-events:none;}
.camtag.show{animation:tagin .35s ease-out both;}
@keyframes tagin{from{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes tagin2{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.stage.done .camtag,.stage.done .tools .camsel{display:none;}

/* schermi stretti: classifica e didascalia in colonna, a sinistra sotto i comandi */
@media (max-width:960px){
  .hudcol{display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:absolute;z-index:3;left:10px;top:58px;max-width:min(62%,320px);pointer-events:none;}
  .hudcol > .standings{position:static;width:auto;min-width:min(100%,220px);max-width:100%;}
  .hudcol > .camtag{position:static;transform:none;max-width:100%;white-space:normal;}
  .camtag.show{animation-name:tagin2;}
}
/* telefono: comandi da 40 px, classifica corta (primi tre più la propria) senza i nomi di chi propone */
@media (max-width:640px){
  .tools{left:8px;top:8px;padding:0;gap:6px;background:none;}
  .tbtn{min-width:40px;height:40px;background:var(--hud);}
  .tbtn:hover{background:rgba(18,41,74,.95);}
  .camsel select{height:40px;max-width:min(40vw,180px);padding:0 10px;background-color:var(--hud);font-size:14px;}
  .dist{right:8px;top:8px;min-height:40px;padding:4px 10px;font-size:13px;line-height:1.2;}
  .dist small{font-size:11.5px;}
  .hudcol{left:8px;top:56px;gap:5px;max-width:calc(58% - 8px);}
  .hudcol > .standings{min-width:0;padding:4px 8px 4px 0;font-size:12px;}
  .standings li{grid-template-columns:1.9em auto minmax(0,1fr) auto;gap:5px;padding:1px 0;}
  .standings .w{display:none;}
  .standings .cloth{min-width:20px;height:18px;padding:0 3px;font-size:11px;}
  .standings img{width:16px;height:16px;}
  .stage:not(.racing) .standings{display:none;}
  .stage.racing .standings li:nth-child(n+4){display:none;}
  /* prima del via (classifica senza posizioni) la scena resta libera */
  .standings:has(> li:first-child > .p:empty){display:none;}
  .hudcol > .camtag{padding:5px 10px 5px 11px;font-size:12.5px;}
  /* spinte rimaste: sul telefono solo nella propria riga (le proprie si vedono anche sul pulsante) */
  .standings li:not(.mine) .cheers{display:none;}
  /* la scheda del vincitore occupa la parte alta (tribuna e cielo), a tutta larghezza: i cavalli restano visibili */
  .stage.done .tools{display:none;}
  .wcard{left:8px;right:8px;top:8px;transform:none;min-width:0;max-width:none;padding-bottom:12px;}
  .wcard.show{animation-name:wc2;}
  .wcard .k{margin-bottom:8px;padding:6px 14px 5px;font-size:12px;}
  .wcard strong{font-size:clamp(24px,7.4vw,32px);padding:0 14px;margin-bottom:8px;}
  .wcard .who{font-size:15px;padding:0 14px;}
  .wcard .wbtn{min-height:44px;margin:12px 14px 0;}
}
@keyframes wc2{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
body.fs-lock{overflow:hidden;}
.arena.fs{position:fixed;inset:0;z-index:1000;margin:0;display:flex;flex-direction:column;background:var(--navy-3);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);}
.arena.fs .stage{flex:1;aspect-ratio:auto;min-height:0;margin:0;border-radius:0;}
.arena.fs .caller{position:absolute;left:50%;bottom:clamp(10px,2vw,22px);transform:translateX(-50%);width:min(900px,calc(100% - 24px));z-index:6;background:rgba(7,22,43,.9);border-radius:3px;}
.arena.fs .fsgo{display:inline-grid;}
.arena.fs .camtag{top:14px;}
@media (max-width:640px){.arena.fs .stage.done .tools{display:flex;}.arena.fs .wcard{top:56px;}}
.wcard .wbtn{display:inline-flex;align-items:center;min-height:40px;margin:14px 20px 0;border:0;border-radius:2px;padding:0 16px;background:#fff;color:var(--navy);font:inherit;font-weight:750;font-size:15px;cursor:pointer;}
.wcard .wbtn:hover{background:var(--live);}

/* finestra dell'esportazione */
.modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:rgba(3,10,22,.78);}
.mbox{width:min(920px,100%);max-height:100%;overflow:auto;background:var(--panel);color:var(--ink);border-radius:3px;padding:0 0 14px;box-shadow:0 24px 60px rgba(0,0,0,.45);border-top:4px solid var(--cobalt);}
.mbox h2{margin:0;padding:14px 18px 12px;font-size:clamp(18px,2vw,22px);font-weight:850;font-stretch:112%;}
.mbox img{display:block;width:100%;height:auto;background:var(--navy);}
.mrow{display:flex;flex-wrap:wrap;gap:8px;margin:14px 18px 0;}
.mrow button{min-height:44px;border:0;border-radius:3px;padding:0 18px;font:inherit;font-weight:750;font-size:15px;cursor:pointer;background:var(--btn);color:var(--btn-ink);}
.mrow button:hover{background:var(--btn-hover);}
.mrow .sec{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-ui);}
.mrow .sec:hover{background:transparent;box-shadow:inset 0 0 0 1.5px var(--ink);}
.mnote{margin:10px 18px 0;font-size:13.5px;color:var(--ink-soft);min-height:1.2em;}

/* schede dei giochi (versione locale): una barra di tre linee, come le linee della metropolitana */
.gametabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:clamp(16px,2.2vw,24px);border:1px solid var(--line-ui);border-radius:3px;background:var(--panel);overflow:hidden;}
.gtab{display:flex;align-items:center;gap:12px;min-height:60px;text-align:left;padding:10px 14px;border:0;border-left:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);cursor:pointer;font:inherit;}
.gtab:first-child{border-left:0;}
.gtab .gi{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:2px;background:var(--sunk);color:var(--ink);}
.gtab .gi svg{width:24px;height:24px;display:block;}
.gi-hole{fill:var(--sunk);}
.gtab b{display:block;font-weight:800;font-stretch:106%;font-size:15px;line-height:1.2;}
.gtab small{display:block;color:var(--ink-soft);font-size:12.5px;line-height:1.3;}
.gtab:hover{background:var(--sunk);}
.gtab.on{background:var(--sel);color:var(--sel-ink);box-shadow:inset 0 -4px 0 var(--live);}
.gtab.on .gi{background:var(--live);color:var(--live-ink);}
.gtab.on .gi-hole{fill:var(--live);}
.gtab.on small{color:inherit;opacity:.78;}
.gtab:disabled{opacity:.5;cursor:default;}
@media (max-width:640px){.gametabs{grid-template-columns:1fr;}.gtab{border-left:0;border-top:1px solid var(--line);min-height:52px;padding:8px 12px;}.gtab:first-child{border-top:0;}.gtab .gi{width:34px;height:34px;}.gtab .gi svg{width:22px;height:22px;}}
.hlabel.out .t{text-decoration:line-through;}

/* telefono: margini di 16 px, testata compatta */
@media (max-width:640px){
  .hall-in{padding:18px 16px 16px;}
  .wrap{padding:0 16px 56px;}
  .masthead{gap:10px;margin-bottom:14px;}
  .masthead .meta{padding-top:8px;font-size:14px;}
  .board{padding:10px 10px 11px;}
  .board-head{gap:10px;margin-bottom:9px;font-size:11.5px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important;}
  /* il numero del conto alla rovescia compare fermo e sparisce da solo (anche se il "Via!" arriva in ritardo) */
  .countdown.pop{animation:cdrm .9s linear forwards !important;}
  /* entrate senza animazione: commento, didascalie e scheda del vincitore compaiono subito */
  #call.in,.camtag.show,.wcard.show{animation:none !important;}
  body.lv-race .board-status::before{animation:none !important;}
}
@keyframes cdrm{0%,75%{opacity:1}100%{opacity:0}}

/* avviso "connessione lenta" della sessione, sul palco in alto al centro */
.stallnote{left:50%;top:10px;transform:translateX(-50%);padding:5px 12px;font-size:13px;line-height:1.3;pointer-events:none;z-index:4;max-width:calc(100% - 24px);text-align:center;}

/* Temi a contrasto elevato di Windows (forced-colors): colori di sfondo e ombre spariscono, quindi i pulsanti
   senza bordo restavano solo testo. Qui hanno un bordo vero; lo stato scelto e quello disattivato si vedono dal contorno. */
@media (forced-colors: active){
  button,.ad-btn,.ad-chip,.cheer,.go,.wbtn{border:1px solid ButtonText !important;}
  button[aria-pressed="true"],.ad-chip[aria-pressed="true"]{outline:3px solid Highlight;outline-offset:1px;}
  button:disabled{border-color:GrayText !important;color:GrayText;}
  input,select,textarea{border:1px solid CanvasText !important;}
}

/* src/live.css */
/* Versione dal vivo (07-live.js, 08-stats.js): la pagina aggiunge body.live quando il server risponde,
   e body.lv-<stato> per lo stato della giornata (rest, open, closed, coming, race, finish, done).
   Colori e caratteri sono quelli di styles.css: blu notte e cobalto, verde per ciò che è vivo o tuo. */

/* mentre si chiede al server se c'è la versione dal vivo, i comandi locali non si mostrano */
body.probing .gametabs,body.probing .controls,body.probing .fairbox,body.probing .panels{visibility:hidden;}

/* comandi della versione locale: il gioco lo sceglie l'admin, le proposte stanno sul server */
body.live .gametabs,body.live .panels,body.live #go,body.live .controls > .seg,body.live .arena .fsgo{display:none !important;}
body.live .controls{margin-top:16px;}

/* ---------- Palco: conto alla rovescia e avvisi ----------
   Il conto alla rovescia sta in alto, tra i comandi e la distanza (sui portatili la parte bassa del palco
   spesso è sotto il bordo dello schermo); il campo schierato al centro resta visibile.
   Sugli schermi stretti diventa una fascia sotto i comandi e la classifica senza posizioni non si mostra. */
.lvcount{position:absolute;z-index:5;left:50%;top:10px;transform:translateX(-50%);display:grid;grid-template-columns:auto auto;grid-template-areas:"k t" "g t";align-items:center;column-gap:26px;padding:12px 22px 12px 22px;border-radius:3px;overflow:hidden;background:rgba(7,22,43,.94);color:#fff;box-shadow:0 14px 34px rgba(3,10,22,.35),inset 4px 0 0 var(--live);pointer-events:none;}
.lvcount .lc-k{grid-area:k;align-self:end;font-weight:800;font-stretch:87.5%;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--live);}
.lvcount b{grid-area:t;font-weight:850;font-stretch:87.5%;font-size:clamp(46px,6.2vw,80px);line-height:.9;font-variant-numeric:tabular-nums;letter-spacing:-.01em;}
.lvcount small{grid-area:g;align-self:start;max-width:24ch;font-weight:600;font-size:14px;line-height:1.3;color:var(--on-dark-soft);}
.lvmsg{position:absolute;z-index:5;left:50%;bottom:14px;transform:translateX(-50%);width:min(92%,560px);padding:12px 16px;border-radius:3px;background:rgba(7,22,43,.94);box-shadow:inset 4px 0 0 var(--live);color:#fff;font-weight:600;font-size:15px;text-align:left;}
@media (max-width:960px){
  .lvcount{left:10px;right:10px;top:58px;transform:none;justify-content:space-between;padding:10px 16px 10px 18px;}
  .lvcount b{font-size:clamp(46px,8vw,62px);}
  .lvcount small{max-width:none;text-wrap:balance;}
  body.lv-coming .standings{display:none;}
}
@media (max-width:640px){
  .lvcount{left:8px;right:8px;top:56px;}
  .lvcount b{font-size:50px;}
  .lvcount small{font-size:13px;}
}

/* ---------- Comandi di gara (chi ha una proposta in gara) ----------
   Continuano la striscia scura del palco: regia a sinistra, spinta verde a destra */
.caller:has(+ .racebar:not([hidden])){border-radius:0;}
.racebar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:12px 14px 14px;background:var(--navy-3);color:#fff;border-radius:0 0 3px 3px;border-top:1px solid rgba(255,255,255,.08);}
.rb-view{display:inline-flex;border:1px solid rgba(255,255,255,.22);border-radius:3px;padding:2px;}
.rb-view button{min-height:44px;min-width:44px;padding:0 16px;border:0;border-radius:2px;background:transparent;color:var(--on-dark-soft);font:inherit;font-weight:700;font-size:15px;cursor:pointer;}
.rb-view button:hover{color:#fff;}
.rb-view button[aria-pressed="true"]{background:#fff;color:var(--navy);}
.rb-view button:focus-visible{outline-color:var(--focus-dark);}
.rb-cheer{display:flex;align-items:center;gap:6px 16px;}
.cheer{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;justify-content:space-between;gap:18px;min-height:60px;min-width:240px;padding:0 20px 3px 24px;border:0;border-radius:3px;background:var(--live);color:var(--live-ink);font:inherit;font-weight:850;font-stretch:112%;font-size:21px;letter-spacing:-.005em;cursor:pointer;box-shadow:inset 0 -4px 0 var(--live-edge);touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.cheer:hover{background:var(--live-hover);}
.cheer:active{transform:translateY(1px);box-shadow:inset 0 -2px 0 var(--live-edge);}
.cheer:disabled{background:#1B3254;color:#A9B8CC;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);cursor:default;transform:none;}
.cheer:focus-visible{outline:3px solid #fff;outline-offset:3px;}
/* caricamento: la spinta inviata riempie il pulsante da sinistra finché arriva in pista */
.ch-fill{position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(11,31,58,.16),rgba(11,31,58,.16)) top / 100% 100% no-repeat,linear-gradient(var(--navy),var(--navy)) bottom / 100% 6px no-repeat;transform-origin:0 50%;transform:scaleX(var(--fill,0));}
.ch-k{margin-left:auto;margin-right:-4px;font:inherit;font-weight:700;font-size:12px;font-stretch:100%;letter-spacing:.02em;padding:2px 6px;border-radius:2px;background:rgba(11,31,58,.16);}
.cheer:disabled .ch-k{background:rgba(255,255,255,.1);}
@media (hover:none) and (pointer:coarse){ .ch-k{display:none;} }
.ch-dots{display:inline-flex;gap:6px;}
.ch-dots i{display:block;width:14px;height:14px;border-radius:50%;border:2px solid currentColor;}
.ch-dots i.on{background:currentColor;}
.ch-dots i.pend{background:linear-gradient(90deg,currentColor 50%,transparent 50%);}
.cheer.hit{animation:chhit .6s ease-out;}
@keyframes chhit{0%{box-shadow:inset 0 -4px 0 var(--live-edge),0 0 0 0 rgba(98,216,78,.9)}100%{box-shadow:inset 0 -4px 0 var(--live-edge),0 0 0 18px rgba(98,216,78,0)}}
.rb-note{order:-1;margin:0;font-size:14px;color:var(--on-dark-soft);text-align:right;max-width:32ch;}
.rb-note:empty{display:none;}
/* Guida: corsia e oggetto nei kart, "allunga" nei cavalli (tenuto premuto). Tasti accanto ai pulsanti sui PC. */
.rb-drive{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;}
.rb-drive[hidden]{display:none;}
.dv-kart,.dv-horse{display:flex;align-items:center;gap:8px;}
.dv-kart[hidden],.dv-horse[hidden]{display:none;}
.dv{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;min-width:52px;padding:0 14px;border:1px solid rgba(255,255,255,.34);border-radius:3px;background:transparent;color:#fff;font:inherit;font-weight:800;font-size:16px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.dv:hover{background:rgba(255,255,255,.08);}
.dv:active,.dv.hit{background:#fff;color:var(--navy);}
.dv:disabled{opacity:.45;cursor:default;background:transparent;color:#fff;}
.dv:focus-visible{outline:3px solid var(--focus-dark);outline-offset:2px;}
.dv svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;}
.dv kbd{font:inherit;font-weight:700;font-size:12px;letter-spacing:.02em;padding:2px 6px;border-radius:2px;background:rgba(255,255,255,.14);color:var(--on-dark-soft);}
.dv-arrow{padding:0 10px;}
.dv-arrow kbd{position:absolute;right:3px;bottom:3px;padding:0 3px;font-size:10px;background:none;}
.dv-item{min-width:210px;justify-content:space-between;}
.dv-item:not(:disabled){background:#fff;color:var(--navy);border-color:#fff;}
.dv-item:not(:disabled) kbd{background:var(--navy);color:#fff;}
.dv-item:not(:disabled):hover{background:#E6EEF8;}
/* corsie: la tua in pieno, quella chiesta e non ancora in pista a metà */
.dv-lanes{display:inline-flex;align-items:flex-end;gap:4px;padding:0 4px;height:30px;}
.dv-lanes i{display:block;width:9px;height:18px;border-radius:2px;border:2px solid rgba(255,255,255,.4);}
.dv-lanes i.on{height:28px;background:#fff;border-color:#fff;}
.dv-lanes i.pend{height:28px;border-color:#fff;border-style:dashed;}
.dv-push{min-width:230px;justify-content:space-between;background:#fff;color:var(--navy);border-color:#fff;touch-action:none;}
.dv-push kbd{background:var(--navy);color:#fff;}
.dv-push:hover{background:#E6EEF8;}
.dv-push[aria-pressed="true"]{background:var(--live);border-color:var(--live);color:var(--live-ink);box-shadow:inset 0 -4px 0 var(--live-edge);}
.dv-push.tired{background:transparent;color:#FFD27A;border-color:#FFD27A;border-style:dashed;}
.dv-push.tired kbd{background:rgba(255,255,255,.14);color:var(--on-dark-soft);}
.dv-breath{display:inline-flex;flex-direction:column;gap:5px;min-width:120px;}
.dv-bk{font-weight:800;font-stretch:87.5%;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-soft);}
.dv-bar{position:relative;display:block;height:12px;border-radius:2px;background:rgba(255,255,255,.14);overflow:hidden;}
.dv-bar i{position:absolute;inset:0;background:#fff;transform-origin:0 50%;transform:scaleX(var(--b,1));}
/* tacca a un quarto: sotto, dopo lo sfinimento, non si può ancora allungare (SIM.horse.PUSH.unlock) */
.dv-bar::after{content:"";position:absolute;left:25%;top:-2px;bottom:-2px;width:2px;background:var(--navy-3);}
.dv-breath.low .dv-bar i{background:#FFD27A;}
.dv-who{margin:0;flex-basis:100%;font-size:13px;line-height:1.35;color:var(--on-dark-soft);}
.dv-who b{color:#fff;font-weight:800;}
/* sui PC larghi: regia a sinistra, guida al centro, spinta a destra con il suo messaggio sotto */
@media (min-width:1000px){
  .racebar{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;column-gap:24px;}
  .rb-drive{justify-content:center;}
  .rb-drive .dv-who{text-align:center;}
  .rb-cheer{flex-direction:column;align-items:flex-end;}
  .rb-note{order:0;min-height:1.35em;}
  .rb-note:empty{display:block;}
}
/* sui dispositivi touch i tasti non servono */
@media (hover:none) and (pointer:coarse){ .dv kbd{display:none;} .dv-item,.dv-push{justify-content:center;} }
@media (max-width:640px){
  .racebar{flex-direction:column;align-items:stretch;gap:10px;padding:10px 10px 12px;}
  .rb-view{display:flex;}
  .rb-view button{flex:1;padding:0 6px;}
  .rb-cheer{flex-direction:column;align-items:stretch;gap:6px;}
  .cheer{width:100%;min-height:64px;}
  .rb-note{order:0;text-align:center;max-width:none;min-height:1.35em;}
  .rb-note:empty{display:block;}
  .rb-drive{flex-direction:column;align-items:stretch;gap:8px;}
  .dv-kart{display:grid;grid-template-columns:64px minmax(0,1fr) 64px;grid-template-areas:"n n n" "l u r";gap:4px 8px;}
  .dv-kart[hidden]{display:none;}
  #dvLeft{grid-area:l;} #dvRight{grid-area:r;} .dv-lanes{grid-area:n;justify-self:center;height:24px;} .dv-item{grid-area:u;}
  .dv-lanes i{height:12px;} .dv-lanes i.on,.dv-lanes i.pend{height:22px;}
  .dv{min-height:60px;}
  .dv-arrow{min-height:60px;}
  .dv-item,.dv-push{min-width:0;width:100%;}
  .dv-horse{flex-direction:column;align-items:stretch;}
  .dv-push{min-height:72px;font-size:19px;}
  .dv-who{text-align:center;}
}
/* schermo intero: i comandi restano sotto il palco, il commento sale sopra di loro */
.arena.fs .racebar{margin:0;border-radius:0;}
body.lv-inrace .arena.fs .caller{bottom:calc(var(--rbh,90px) + 10px);}

/* link discreto per chi organizza, in fondo alla pagina: solo dal vivo (senza server la pagina admin non c'è) */
.site-foot{display:none;margin:56px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-soft);}
body.live .site-foot{display:block;}
.site-foot a{color:var(--ink);font-weight:700;text-underline-offset:3px;}

/* ---------- Pannelli ----------
   Una colonna sola: la giornata di oggi, poi lo storico. Dentro la giornata, sui PC, due colonne:
   a sinistra titolo, orario e modulo, a destra l'elenco delle proposte o il risultato */
.lvpanels{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(40px,5vw,64px);margin-top:clamp(28px,3.4vw,44px);align-items:start;}
/* sul telefono, con il palco in scena, la presentazione in testata lascia il posto alla gara */
@media (max-width:640px){
  body.lv-coming .masthead .meta,body.lv-race .masthead .meta,body.lv-finish .masthead .meta{display:none;}
  body.lv-coming .masthead h1,body.lv-race .masthead h1,body.lv-finish .masthead h1{font-size:24px;line-height:1;letter-spacing:-.02em;}
  body.lv-coming .masthead h1 br,body.lv-race .masthead h1 br,body.lv-finish .masthead h1 br{display:none;}
  body.lv-coming .hall-in,body.lv-race .hall-in,body.lv-finish .hall-in{padding-top:12px;padding-bottom:12px;}
  body.lv-coming .masthead,body.lv-race .masthead,body.lv-finish .masthead{margin-bottom:10px;}
}
.lv-main{display:flex;flex-direction:column;}
.lv-col,.lv-side{display:contents;}
.lv-main #lvPhone{order:1;}
@media (min-width:960px){
  .lv-main{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(40px,5vw,80px);align-items:start;}
  .lv-col,.lv-side{display:block;min-width:0;}
  .lv-side > :first-child{margin-top:0;}
  .lv-main:not(:has(.lv-side > :not([hidden]))){grid-template-columns:minmax(0,1fr);}
  .lv-main:not(:has(.lv-side > :not([hidden]))) .lv-side{display:none;}
}
.lv-kicker{margin:0 0 6px;color:var(--accent);font-weight:750;font-stretch:87.5%;font-size:13px;letter-spacing:.11em;text-transform:uppercase;}
.lv-kicker:first-letter{text-transform:uppercase;}
.lv-main h2{font-size:clamp(30px,4.2vw,52px);line-height:1;letter-spacing:-.02em;margin:0 0 12px;font-weight:900;font-stretch:115%;overflow-wrap:anywhere;}
.lv-sub{margin:0;color:var(--ink-soft);font-size:16.5px;line-height:1.5;max-width:52ch;}
.lv-sub:empty,.lv-net:empty{display:none;}
.lv-net{margin:14px 0 0;padding:10px 14px;border-radius:2px;background:rgba(200,16,46,.08);box-shadow:inset 4px 0 0 var(--danger);color:var(--ink);font-size:14.5px;font-weight:600;}
/* tempo che manca alla chiusura: un pezzo di tabellone con le cifre verdi */
.lv-clock{display:inline-flex;align-items:stretch;margin:22px 0 4px;border-radius:3px;overflow:hidden;background:var(--navy);color:#fff;align-self:flex-start;}
.lv-clock span{display:flex;align-items:center;padding:0 14px 0 16px;border-right:1px solid rgba(255,255,255,.14);font-weight:750;font-stretch:87.5%;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-soft);}
.lv-clock b{padding:10px 16px 8px;color:var(--live);font-weight:800;font-stretch:87.5%;font-size:clamp(40px,4.8vw,58px);line-height:1;font-variant-numeric:tabular-nums;letter-spacing:.01em;}

.lv-form{margin-top:24px;padding-top:18px;border-top:1px solid var(--line);}
.lv-fields{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:14px 14px;}
@media (max-width:560px),(min-width:960px) and (max-width:1180px){.lv-fields{grid-template-columns:1fr;}}
.lv-fields label{display:flex;flex-direction:column;gap:6px;min-width:0;}
.lv-fields label span{font-weight:750;font-stretch:87.5%;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.lv-fields input{min-width:0;min-height:52px;border:1px solid var(--line-ui);border-radius:3px;background:var(--field);padding:10px 14px;font-size:18px;font-weight:600;}
.lv-fields input:hover{border-color:var(--ink);}
.lv-fields input:focus{outline:3px solid var(--focus);outline-offset:1px;border-color:transparent;}
.lv-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px;}
.lv-btn{min-height:52px;border:0;border-radius:3px;padding:0 26px;background:var(--btn);color:var(--btn-ink);font:inherit;font-weight:800;font-stretch:108%;font-size:17px;cursor:pointer;}
.lv-btn:hover{background:var(--btn-hover);}
.lv-btn:active{transform:translateY(1px);}
.lv-btn:disabled{background:var(--sunk);color:var(--ink-soft);cursor:default;transform:none;}
.lv-btn.sec{min-height:48px;background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-ui);font-weight:700;font-stretch:100%;font-size:15px;padding:0 18px;}
.lv-btn.sec:hover{box-shadow:inset 0 0 0 1.5px var(--ink);}
.lv-btn.danger.armed{color:var(--danger-ink);box-shadow:inset 0 0 0 2px var(--danger-ink);}
.lv-err{margin:10px 0 0;color:var(--danger-ink);font-weight:700;font-size:14.5px;}
.lv-err:empty{display:none;}

/* la tua proposta: riga verde a sinistra ("tu") e l'etichetta, non solo il colore */
.lv-mine{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-top:24px;padding:14px 16px 16px 18px;border-radius:3px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line),inset 6px 0 0 var(--live);}
.lv-mine p{margin:0;min-width:0;}
.lv-mine .k{display:flex;align-items:center;gap:8px;margin-bottom:4px;font-weight:750;font-stretch:87.5%;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--live-text);}
.lv-mine strong{display:block;font-size:clamp(22px,2.4vw,28px);font-weight:850;font-stretch:108%;line-height:1.1;letter-spacing:-.01em;overflow-wrap:anywhere;}
.lv-mine #lvMineWho{font-size:14.5px;color:var(--ink-soft);}
.lv-mine .lv-actions{margin-top:0;}

/* elenco delle proposte: una tabella da tabellone, righe nette, numeri di gara a sinistra */
.lv-listbox h3{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:28px 0 0;padding:0 0 8px;border-bottom:3px solid var(--rule);font-size:13px;font-weight:800;font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);}
.lv-list{list-style:none;margin:0;padding:0;counter-reset:none;}
.lv-list li{display:flex;align-items:center;gap:14px;min-height:60px;padding:9px 4px 9px 0;border-bottom:1px solid var(--line);}
.lv-list .cloth{min-width:34px;height:30px;font-size:15px;}
.lv-e{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.25;}
.lv-e b{font-weight:750;font-size:17px;overflow-wrap:anywhere;}
.lv-e span{font-size:14px;color:var(--ink-soft);}
.lv-list li.mine{position:relative;padding-left:12px;margin-left:-12px;box-shadow:inset 5px 0 0 var(--live);background:linear-gradient(90deg,rgba(98,216,78,.14),rgba(98,216,78,0) 70%);}
.lv-tag{flex:none;padding:4px 9px 3px;border-radius:2px;background:var(--live);color:var(--live-ink);font-size:11.5px;font-weight:800;font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;}

.lv-phone{display:flex;align-items:flex-start;gap:16px 22px;margin-top:28px;padding:16px;border-radius:3px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);}
.lv-phone .qr{flex:none;width:140px;padding:6px;border-radius:2px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);}
.lv-phone .qr svg{display:block;width:100%;height:auto;}
.lv-phone h3{margin:0 0 6px;font-size:17px;font-weight:800;font-stretch:100%;letter-spacing:0;text-transform:none;color:var(--ink);}
.lv-phone p{margin:0 0 12px;font-size:14.5px;color:var(--ink-soft);max-width:46ch;}
.lv-phone .lv-btn{min-height:44px;}
.lv-link{display:block;width:100%;min-height:44px;margin-top:8px;border:1px solid var(--line-ui);border-radius:3px;background:var(--field);padding:8px 10px;font-size:13px;}
.lv-note{margin:8px 0 0 !important;font-size:13px !important;}
.lv-note:empty{display:none;}
/* sul telefono il codice non serve (si è già sul telefono): resta il link da copiare. Solo la larghezza:
   pointer:coarse cambia valore nei browser emulati e sui portatili con lo schermo tattile */
.lv-phone .only-touch{display:none;}
@media (max-width:600px){.lv-phone .qr,.lv-phone .only-desk{display:none;}.lv-phone .only-touch{display:block;}}
@media (max-width:420px){.lv-phone{flex-direction:column;}}

/* risultato: ultimo vincitore a riposo, ordine d'arrivo ufficiale di oggi */
.lv-result{margin-top:28px;}
.lv-resnote{margin:0 0 16px;padding:11px 14px;border-radius:2px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line),inset 4px 0 0 var(--accent);font-weight:600;font-size:15px;}
.lv-result .lv-k{margin:0 0 8px;padding-bottom:8px;border-bottom:3px solid var(--rule);font-size:13px;font-weight:800;font-stretch:87.5%;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);}
.lv-result .lv-k:first-letter{text-transform:uppercase;}
.lv-result .lv-win{margin:14px 0 0;font-weight:900;font-stretch:118%;font-size:clamp(32px,4.6vw,56px);line-height:.98;letter-spacing:-.02em;overflow-wrap:anywhere;}
.lv-result .lv-who{margin:10px 0 0;font-weight:600;font-size:16px;color:var(--ink-soft);}
.lv-result .lv-who:empty{display:none;}
.lv-result .lv-btn{margin-top:18px;}
.lv-order{list-style:none;margin:0;padding:0;}
.lv-order li{display:grid;grid-template-columns:2.6em auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:58px;padding:8px 0;border-bottom:1px solid var(--line);}
.lv-order .pos{font-weight:850;font-stretch:87.5%;font-size:22px;font-variant-numeric:tabular-nums;line-height:1;}
.lv-order .cloth{min-width:32px;height:28px;font-size:14px;}
.lv-order li:first-child{min-height:72px;}
.lv-order li:first-child .pos{font-size:34px;color:var(--win);}
.lv-order li:first-child .lv-e b{font-weight:900;font-stretch:108%;font-size:21px;}
.lv-order .gap{font-size:15px;font-weight:650;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ---------- Storico e statistiche ---------- */
.lv-hist > h2{margin:0 0 18px;}
/* riepilogo: tre numeri grandi, come il sommario di una diretta */
.st-sum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0 0 30px;border-top:3px solid var(--rule);border-bottom:1px solid var(--line);}
.st-sum > div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:4px;padding:14px 16px 16px 0;}
.st-sum > div + div{padding-left:18px;border-left:1px solid var(--line);}
.st-sum dd{margin:0;font-weight:850;font-stretch:87.5%;font-size:clamp(40px,5.4vw,68px);line-height:.9;letter-spacing:-.01em;font-variant-numeric:tabular-nums;}
.st-sum dt{font-weight:700;font-stretch:87.5%;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);}
.st-sum > div:first-child dd{color:var(--accent);}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 28px;}
.stats:empty{display:none;}
.stats li{padding:14px 0 16px;border-top:1px solid var(--line);}
.stats .st-t{display:block;font-size:12.5px;font-weight:800;font-stretch:87.5%;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);}
.stats p{margin:5px 0 0;font-size:16px;line-height:1.45;}
.lv-recent li{display:grid;grid-template-columns:5.2em minmax(0,1fr) auto;align-items:baseline;gap:2px 16px;padding:10px 0;}
.lv-recent .r-day{font-weight:750;font-stretch:87.5%;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);white-space:nowrap;}
.lv-recent .r-main{min-width:0;}
.lv-recent .r-main b{display:block;font-weight:750;font-size:15.5px;}
.lv-recent .r-who{font-size:13.5px;}
.lv-recent .r-meta{text-align:right;font-size:13px;color:var(--ink-soft);white-space:nowrap;font-variant-numeric:tabular-nums;}
#lvRecentBox h3{display:flex;margin-top:0;padding-bottom:8px;border-bottom:3px solid var(--rule);color:var(--ink);font-size:13px;font-weight:800;}
@media (min-width:901px){
  .lv-hist{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);column-gap:clamp(40px,5vw,80px);align-items:start;}
  .lv-hist > h2,.lv-hist > .lv-kicker,#lvHistNote,#lvSum{grid-column:1 / -1;}
  #lvStats{grid-column:1;}
  #lvRecentBox{grid-column:2;}
}
@media (max-width:900px){
  .stats{grid-template-columns:1fr;}
  #lvRecentBox{margin-top:28px;}
}
@media (max-width:560px){
  .st-sum dd{font-size:40px;}
  .st-sum dt{font-size:11px;letter-spacing:.07em;}
  .st-sum > div{padding-right:8px;}
  .st-sum > div + div{padding-left:10px;}
  .stats p{font-size:15.5px;}
  .lv-recent li{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"m d" "m t";}
  .lv-recent .r-day{grid-area:d;text-align:right;}
  .lv-recent .r-main{grid-area:m;}
  .lv-recent .r-meta{grid-area:t;font-size:12.5px;}
}

@media (prefers-reduced-motion: reduce){
  .cheer.hit{animation:none;}
}

/* src/horse.css */
/* Corsa dei cavalli: etichette e classifica durante la gara (le basi di .hlabel e .standings sono in styles.css) */

/* proposta dell'utente: bordo bianco e la scritta "tu", non solo un colore */
.hlabel.mine{border:2px solid #fff;padding-right:9px;font-size:13px;z-index:1;}
.hlabel.mine::before{content:'tu';order:-1;margin:0 1px 0 3px;padding:1px 5px;border-radius:999px;background:#fff;color:#111;font-size:10px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;}

/* spinta del tifo: contorno dorato finché dura, anello che si allarga quando arriva */
.hlabel.cheering{outline:2px solid #FFD34D;outline-offset:2px;}
.hlabel.hpulse::after{content:'';position:absolute;inset:-3px;border-radius:999px;border:2px solid #FFD34D;pointer-events:none;animation:hcheer .9s ease-out forwards;}
@keyframes hcheer{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.35,2.1)}}

/* spinta inviata e non ancora in pista: cerchio che si riempie */
.hlabel .pend{flex:none;width:14px;height:14px;margin-left:2px;border-radius:50%;background:conic-gradient(#FFD34D calc(var(--p,0) * 360deg),rgba(255,255,255,.3) 0);-webkit-mask:radial-gradient(circle,transparent 3.5px,#000 4px);mask:radial-gradient(circle,transparent 3.5px,#000 4px);}

/* classifica: spinte rimaste (pallino pieno = da usare, vuoto = usata) */
.standings .i{display:inline-flex;align-items:center;gap:5px;}
.standings .cheers{display:inline-flex;gap:3px;}
.standings .cheers i{display:block;width:8px;height:8px;border-radius:50%;border:1.5px solid #FFD34D;}
.standings .cheers i.on{background:#FFD34D;}
.standings li.mine .n{font-weight:800;text-decoration:underline 2px #FFD34D;text-underline-offset:3px;}
/* la propria riga resta visibile anche quando la classifica mostra solo i primi */
.stage.racing .standings li.mine{display:grid;}

/* Barra del fiato della propria proposta: sopra l'etichetta (con il testo) e nella propria riga della classifica.
   Stato scritto a parole (Fiato, Allunga, Sfinito, Allungo in arrivo), non solo nel colore; la tacca al 12% ricorda
   di lasciare prima che il fiato finisca (il comando arriva in pista circa 0,7 s dopo). */
.gauge{display:block;}
.gauge .gb{position:relative;display:block;height:8px;border-radius:4px;background:rgba(255,255,255,.2);overflow:hidden;}
.gauge .gf{position:absolute;left:0;top:0;bottom:0;width:100%;background:#8fd3ff;}
.gauge .gm{position:absolute;top:0;bottom:0;left:12%;width:2px;background:rgba(255,255,255,.9);}
.gauge.g-push .gf{background:repeating-linear-gradient(-45deg,#FFD34D 0 5px,#E0A800 5px 10px);background-size:14.14px 14.14px;animation:gstripe .5s linear infinite;}
.gauge.g-tired .gf{background:#e0503a;}
.gauge.g-early .gf{background:#8a9bb3;}
.gauge.g-wait .gb{box-shadow:0 0 0 2px #FFD34D;animation:gwait .7s ease-in-out infinite alternate;}
@keyframes gstripe{to{background-position:14.14px 0}}
@keyframes gwait{from{box-shadow:0 0 0 1px #FFD34D}to{box-shadow:0 0 0 3px #FFD34D}}
.hlabel .gauge{position:absolute;left:0;bottom:calc(100% + 5px);min-width:150px;padding:4px 8px 6px;border-radius:4px;background:rgba(7,22,43,.92);box-shadow:0 0 0 1px rgba(255,255,255,.22);color:#fff;font-size:12px;font-weight:750;font-stretch:87.5%;line-height:1.2;}
.hlabel .gauge .gt{display:block;margin-bottom:4px;white-space:nowrap;}
.hlabel .gauge.g-tired .gt{color:#ffb3a6;}
.hlabel .gauge.g-push .gt{color:#FFD34D;}
.gauge[hidden]{display:none;}
/* telefono: sopra l'etichetta c'è la colonna della classifica; la barra va sotto, sopra la testa del fantino */
@media (max-width:640px){
  .hlabel .gauge{bottom:auto;top:calc(100% + 4px);min-width:128px;padding:3px 7px 5px;font-size:11.5px;}
}
.standings .gauge{width:40px;flex:none;}
.standings .gauge .gb{height:7px;}

/* classifica: sigla PC per i cavalli guidati dal computer (chi è guidato da una persona non ha la sigla) */
.standings .pc{flex:none;padding:0 4px;border-radius:3px;border:1px solid rgba(255,255,255,.5);color:#dfe7f1;font-size:10px;font-weight:800;letter-spacing:.04em;line-height:14px;font-stretch:100%;}

@media (prefers-reduced-motion: reduce){
  .hlabel.hpulse::after{animation:none;opacity:0;}
  .gauge.g-push .gf,.gauge.g-wait .gb{animation:none;}
}

/* src/kart.css */
/* Kart: HUD in stile televisivo (posizione, giri e tempo, oggetto con roulette, minimappa, classifica compatta,
   cartello dell'ultimo giro, retrovisore) ed etichette dei kart. Caricato dopo styles.css.
   Le regole sugli elementi comuni del palco (#dist, #standings, etichette) valgono solo nel gioco dei kart:
   la classe .kgame sul palco la mette e la toglie 11-kart.js. Colori del sito: nero e giallo del tabellone. */
.khud{--ky:#F2C230;--kb:rgba(10,11,10,.86);position:absolute;inset:0;z-index:3;pointer-events:none;}

/* giri e tempo: una targa gialla e nera in alto a destra */
.stage.kgame .dist{display:flex;align-items:stretch;padding:0;border-radius:6px;overflow:hidden;background:#0b0c0b;box-shadow:0 2px 10px rgba(0,0,0,.3);line-height:1;-webkit-backdrop-filter:none;backdrop-filter:none;}
.stage.kgame #distM{display:flex;align-items:baseline;gap:1px;padding:7px 10px 6px;background:#F2C230;color:#111;font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;}
.stage.kgame #distM b{margin-left:4px;font-size:21px;font-weight:900;font-stretch:112%;letter-spacing:0;}
.stage.kgame #distM span:last-child{font-size:14px;font-weight:800;letter-spacing:0;}
.stage.kgame #distT{display:flex;align-items:center;min-width:4.4em;justify-content:flex-end;padding:6px 11px;color:#fff;font-size:17px;font-weight:750;font-variant-numeric:tabular-nums;}

/* classifica compatta: posizione su fondo giallo, numero del kart, nome */
.stage.kgame .standings{top:54px;left:10px;width:auto;max-width:min(38%,250px);padding:0;border-radius:6px;overflow:hidden;background:rgba(10,11,10,.84);font-size:13px;-webkit-backdrop-filter:none;backdrop-filter:none;}
.stage.kgame .standings li{grid-template-columns:26px auto minmax(0,1fr) auto;gap:7px;padding:3px 10px 3px 0;border-top:1px solid rgba(255,255,255,.08);}
.stage.kgame.racing .standings li:nth-child(n){display:grid;}
.stage.kgame .standings li:first-child{border-top:0;}
.stage.kgame .standings .p{display:grid;place-items:center;align-self:stretch;margin:-3px 0;background:#F2C230;color:#111;font-weight:900;font-size:13px;}
.stage.kgame .standings .cloth{min-width:22px;height:18px;font-size:11.5px;border-radius:3px;}
.stage.kgame .standings .i{display:flex;align-items:center;}
.stage.kgame .standings .i:empty{display:none;}
.stage.kgame .standings li:has(> .p:empty){grid-template-columns:0 auto minmax(0,1fr);padding-left:3px;}
.stage.kgame .standings .p:empty{background:none;}
.stage.kgame .standings li.kgap{border-top:2px dashed rgba(255,255,255,.28);}
.stage.kgame .standings li.ksub{background:rgba(242,194,48,.18);}
.stage.kgame .standings li.kme .n{color:#9db8ff;}
.stage.kgame .standings li.kme .p{background:#5b8cff;color:#fff;}
/* sigla PC: kart guidato dal computer (in classifica e sulle etichette); chi non ce l'ha lo guida una persona */
.stage.kgame .standings .kpc,.stage.kgame .hlabel .kpc{flex:none;padding:0 4px;border-radius:3px;background:#2b2f36;color:#eef1f5;font-size:10px;font-weight:800;font-stretch:100%;letter-spacing:.04em;line-height:15px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4);}
.stage.kgame .standings .kpc{display:inline-block;margin-right:5px;line-height:14px;vertical-align:1px;}
.stage.kgame .hlabel .kpc[hidden]{display:none;}

/* riquadro dell'oggetto: roulette verticale mentre gira, poi l'oggetto con il nome sotto */
.khud .kitemw{--ks:clamp(62px,8vw,90px);position:absolute;right:10px;top:52px;display:flex;flex-direction:column;align-items:center;gap:5px;}
.khud .kitem{position:relative;width:var(--ks);height:var(--ks);border-radius:10px;background:var(--kb);box-shadow:inset 0 0 0 3px var(--ky),0 4px 14px rgba(0,0,0,.35);overflow:hidden;}
.khud .kitem::after{content:"";position:absolute;inset:3px;border-radius:7px;background:linear-gradient(rgba(10,11,10,.85),transparent 22%,transparent 78%,rgba(10,11,10,.85));pointer-events:none;}
.khud .kitem .kheld{position:absolute;inset:14%;width:72%;height:72%;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.55));opacity:0;}
.khud .kitem.hold .kheld{opacity:1;}
.khud .kreel{position:absolute;left:0;right:0;top:0;display:none;flex-direction:column;}
.khud .kitem.roll .kreel{display:flex;}
.khud .kreel img{flex:none;width:100%;height:var(--ks);padding:16%;object-fit:contain;filter:blur(.6px);}
.khud .kitem .kic{position:absolute;left:5px;top:5px;z-index:1;min-width:18px;height:16px;padding:0 3px;font-size:10.5px;border-radius:3px;}
.khud .kitem.got .kheld{animation:kgot .45s cubic-bezier(.2,1.6,.4,1);}
@keyframes kgot{0%{transform:translateY(-35%) scale(.8)}100%{transform:none}}
.khud .kitem.used{animation:kflash .5s ease-out;}
@keyframes kflash{0%{box-shadow:inset 0 0 0 3px #fff,0 0 0 4px rgba(255,255,255,.7)}100%{box-shadow:inset 0 0 0 3px var(--ky),0 4px 14px rgba(0,0,0,.35)}}
.khud .kiname{padding:2px 8px;border-radius:3px;background:var(--ky);color:#111;font-weight:800;font-size:12px;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;}
.khud .kiname:empty{display:none;}
/* invito a usare l'oggetto: solo per il kart dell'utente, sotto il nome dell'oggetto */
.khud .kihint{padding:2px 7px;border-radius:3px;background:var(--kb);color:#fff;font-weight:750;font-size:11.5px;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--ky);}
.khud .kihint[hidden]{display:none;}
.khud .kuse{position:absolute;right:calc(20px + clamp(62px,8vw,90px));top:58px;padding:5px 10px;border-radius:4px;background:var(--kb);border-left:4px solid var(--ky);color:#fff;font-weight:800;font-size:clamp(13px,1.5vw,16px);white-space:nowrap;opacity:0;}
.khud .kuse.on{animation:kuse 1.6s ease-out forwards;}
@keyframes kuse{0%{opacity:0;transform:translateX(12px)}12%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0}}

/* posizione grande in basso a destra, con il nome del kart seguito */
.khud .kpos{position:absolute;right:10px;bottom:10px;display:flex;flex-direction:column;align-items:flex-end;gap:4px;}
.khud .kpn{display:flex;align-items:flex-start;padding:5px 12px 7px 12px;border-radius:8px;background:var(--kb);color:var(--ky);line-height:.8;box-shadow:0 4px 14px rgba(0,0,0,.3);}
.khud .kpn b{font-weight:900;font-stretch:125%;font-size:clamp(44px,6.6vw,80px);letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
.khud .kpn sup{margin:.1em 0 0 1px;font-weight:900;font-size:clamp(18px,2.4vw,30px);}
.khud .kpn small{align-self:flex-end;margin-left:5px;color:#fff;font-weight:700;font-size:clamp(14px,1.7vw,20px);}
.khud .kpw{display:flex;align-items:center;gap:6px;max-width:min(44vw,320px);padding:3px 10px 3px 3px;border-radius:5px;background:var(--kb);color:#fff;font-weight:700;font-size:13px;white-space:nowrap;}
.khud .kpw .cloth{min-width:22px;height:18px;font-size:11.5px;}
.khud .kpk{color:var(--ky);font-weight:800;font-size:11px;letter-spacing:.05em;text-transform:uppercase;}
.khud .kpk:empty{display:none;}
.khud .kpk:not(:empty){margin-left:6px;}
.khud .kpl{overflow:hidden;text-overflow:ellipsis;}

/* minimappa con i luoghi simbolo e i kart numerati */
.khud .kmap{position:absolute;left:10px;bottom:10px;width:clamp(116px,16vw,196px);height:auto;aspect-ratio:1;border-radius:10px;background:rgba(10,11,10,.62);}

/* cartello dell'ultimo giro: scacchi ai lati, nero e giallo */
.khud .kban{position:absolute;left:50%;top:32%;display:flex;align-items:stretch;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.4);opacity:0;transform:translate(-50%,-50%);}
.khud .kban::before,.khud .kban::after{content:"";width:22px;background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 0 0/11px 11px;}
.khud .kban span{padding:10px 24px 12px;background:#0b0c0b;color:var(--ky);font-weight:900;font-stretch:118%;font-size:clamp(26px,4.8vw,54px);line-height:1;letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;}
.khud .kban.on{animation:kban 2.6s cubic-bezier(.2,.8,.2,1) forwards;}
@keyframes kban{0%{opacity:0;transform:translate(-38%,-50%)}10%{opacity:1;transform:translate(-50%,-50%)}82%{opacity:1;transform:translate(-50%,-50%)}100%{opacity:0;transform:translate(-62%,-50%)}}

/* retrovisore: scocca scura con i bordi arrotondati che coprono gli angoli dell'immagine, riflesso sul vetro */
.khud .kmirror{position:absolute;border:7px solid #1d1f23;border-radius:18px;box-shadow:0 0 0 2px #3b3f46,0 8px 18px rgba(0,0,0,.45),inset 0 0 10px rgba(0,0,0,.6);}
.khud .kmirror::before{content:"";position:absolute;left:50%;bottom:calc(100% + 7px);width:30px;height:12px;transform:translateX(-50%);border-radius:6px 6px 0 0;background:linear-gradient(#34373d,#1d1f23);}
.khud .kmirror i{position:absolute;inset:0;border-radius:11px;background:linear-gradient(112deg,rgba(255,255,255,.2),rgba(255,255,255,0) 30%,rgba(255,255,255,0) 72%,rgba(255,255,255,.08));}
.khud .kmirror.hot{animation:kmir 1.6s ease-out;}
@keyframes kmir{0%,60%{border-color:var(--ky);box-shadow:0 0 0 2px #3b3f46,0 0 0 6px rgba(242,194,48,.45),inset 0 0 10px rgba(0,0,0,.6)}100%{border-color:#1d1f23}}

/* vista dal kart: righe di velocità col turbo, bagliore verde ai bordi con la spinta del tifo */
.khud .kspeed{position:absolute;inset:-10%;opacity:0;background:repeating-conic-gradient(from 0deg at 50% 52%,rgba(255,255,255,0) 0deg 3.2deg,rgba(255,246,226,.55) 3.4deg 3.8deg,rgba(255,255,255,0) 4deg 7deg);-webkit-mask-image:radial-gradient(ellipse at 50% 52%,transparent 34%,#000 80%);mask-image:radial-gradient(ellipse at 50% 52%,transparent 34%,#000 80%);animation:kspd .14s steps(2) infinite;}
@keyframes kspd{from{transform:scale(1) rotate(0)}to{transform:scale(1.04) rotate(1.6deg)}}
.khud .kcheer{position:absolute;inset:0;opacity:0;box-shadow:inset 0 0 70px 22px rgba(92,242,160,.6);}

/* etichette dei kart: kart dell'utente, spinta del tifo, caricamento della spinta, icone di stato */
.stage.kgame .hlabel.mine{box-shadow:0 0 0 2px #fff,0 0 0 4px #1f4fb5;}
.stage.kgame .hlabel.mine::before{content:"Tu";order:-1;margin:0 1px 0 4px;padding:0 5px;border-radius:999px;background:#1f4fb5;color:#fff;font-size:10.5px;font-weight:800;line-height:16px;}
.stage.kgame .hlabel.ktifo{box-shadow:0 0 0 2px #5cf2a0,0 0 14px 2px rgba(92,242,160,.8);}
.stage.kgame .hlabel .ev:empty{display:none;}
.stage.kgame .hlabel .ev svg{display:block;width:13px;height:13px;}
.hlabel .kpend{flex:none;width:15px;height:15px;border-radius:50%;background:conic-gradient(#5cf2a0 calc(var(--p,0) * 360deg),rgba(255,255,255,.28) 0);box-shadow:inset 0 0 0 2px rgba(14,20,16,.6);}
.hlabel .kpend[hidden]{display:none;}
.hlabel img[hidden]{display:none;}

.arena.fs .khud .kmap,.arena.fs .khud .kpos{bottom:96px;}
.stage.done .khud{display:none;}
@media (max-width:640px){
  .stage.kgame .dist{top:8px;right:8px;}
  .stage.kgame #distM{padding:6px 7px 5px;font-size:10.5px;}
  .stage.kgame #distM b{font-size:17px;}
  .stage.kgame #distT{min-width:0;padding:5px 8px;font-size:14px;}
  .stage.kgame .standings{top:50px;left:8px;max-width:100%;min-width:132px;font-size:12px;}
  .stage.kgame .standings li{grid-template-columns:22px auto minmax(0,1fr) auto;gap:5px;padding:2px 8px 2px 0;}
  .stage.kgame .standings .p{margin:-2px 0;font-size:12px;}
  .stage.kgame .standings .w{display:none;}
  .khud .kitemw{--ks:54px;right:8px;top:46px;}
  .khud .kiname{font-size:10.5px;}
  .khud .kuse{right:72px;top:50px;font-size:12px;}
  .khud .kpos{right:8px;bottom:8px;}
  .khud .kpn{padding:4px 9px 5px;}
  .khud .kpn b{font-size:38px;}
  .khud .kpn sup{font-size:16px;}
  .khud .kpn small{font-size:13px;}
  .khud .kpw{max-width:52vw;font-size:12px;}
  .khud .kmap{left:8px;bottom:8px;width:100px;}
  .khud .kmirror{border-width:5px;border-radius:14px;}
}
@media (prefers-reduced-motion: reduce){
  .khud .kspeed{animation:none;}
  .khud .kban.on{animation:kbanr 2.6s linear forwards;}
  @keyframes kbanr{0%,90%{opacity:1}100%{opacity:0}}
}