/* Speedorama — interfaccia TV. Si legge dal divano: misure in vh. */
:root {
  --ink: #14213D;
  --ink-deep: #0A1330;
  --butter: #FFC93C;
  --paper: #F7FAFF;
  --muted: #AAB6D3;
  --sign: #1F47E0;
  --sign-dark: #0F2AA3;
  --sign-dash: #9FC0FF;
  --felt: #0E4A2A;
  --felt-dark: #0B3B22;
  --plum: #2B1C52;
  --display: "Bungee", "Arial Black", Impact, sans-serif;
  --ui: "Fredoka", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
/* Il gioco ha un solo aspetto: gli stessi valori valgono in tema chiaro e scuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #14213D; --paper: #F7FAFF; --butter: #FFC93C; --plum: #2B1C52; }
}
:root[data-theme="dark"] { --ink: #14213D; --paper: #F7FAFF; --butter: #FFC93C; --plum: #2B1C52; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--ink); color: var(--paper); font-family: var(--ui); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; }

#view { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.bg, .menu, .garage, .showroom, .intro { display: none; }
body[data-phase="menu"] .menu { display: block; }
body[data-phase="garage"] .garage { display: grid; }
body[data-phase="intro"] .intro { display: block; }
body[data-phase="showroom"] .showroom { display: grid; }
body[data-phase="garage"] .bg, body[data-phase="showroom"] .bg, body[data-phase="intro"] .bg { display: block; }

/* Sfondo a motivo ripetuto (viola) per garage e presentazione */
.bg {
  position: fixed; inset: 0; z-index: 0;
  background-color: var(--plum);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23382567'%3E%3Cpath d='M18 58h36l9-11h24l11 11h12v13H18z'/%3E%3Ccircle cx='34' cy='73' r='8'/%3E%3Ccircle cx='90' cy='73' r='8'/%3E%3C/g%3E%3Ccircle cx='132' cy='134' r='16' fill='none' stroke='%23382567' stroke-width='8'/%3E%3Cpath d='M40 140l14-24 14 24z' fill='%23332260'/%3E%3C/svg%3E");
  background-size: 18vh 18vh;
}

/* Titoli in lettere a blocchi estruse */
.block-title {
  margin: 0; display: grid; font-family: var(--display); font-weight: 400;
  font-size: 10vh; line-height: .92; color: #FFF4E8;
  transform: rotate(-6deg) skewX(-6deg); transform-origin: left bottom;
  text-shadow:
    .012em .012em 0 #E6D8FB, .024em .024em 0 #DCCBF7, .036em .036em 0 #D1BDF2, .048em .048em 0 #C5AFEB,
    .06em .06em 0 #B9A1E4, .072em .072em 0 #AD93DC, .084em .084em 0 #9F84D3, .1em .1em .02em rgba(10,19,48,.55);
}
.block-title span:last-child { margin-left: .6em; }

/* Striscia di icone del circuito */
.g-meta { display: grid; justify-items: end; gap: 1.2vh; }
.icons { display: flex; gap: .7vh; padding: .8vh; border-radius: 1.4vh; background: var(--sign-dark); border: .4vh solid var(--sign); box-shadow: inset 0 0 0 .3vh #6f93ff; }
.ico { width: 7.5vh; height: 7.5vh; display: grid; place-items: center; background: #0D3B44; color: #6CC9C4; border-radius: .9vh; }
.ico svg { width: 68%; height: 68%; }
.ico.mode { background: #1A1440; color: var(--butter); }
.icons.small { background: none; border: 0; box-shadow: none; padding: 0; gap: .5vh; justify-content: center; }
.icons.small .ico { width: 4.6vh; height: 4.6vh; }
.mode-line { margin: 0; font-family: var(--display); font-size: 2.6vh; line-height: 1.3; text-align: right; color: var(--paper); text-shadow: .08em .08em 0 var(--ink-deep); }

/* Cartello blu (come quelli del plastico) */
.sign {
  background: var(--sign); border-radius: 2vh; padding: 1.6vh 1.6vw;
  box-shadow: 0 0 0 .6vh var(--sign-dark), 0 1vh 0 .6vh rgba(10,19,48,.5);
  outline: .35vh dashed var(--sign-dash); outline-offset: -1.2vh;
}

/* ---------- Menu ---------- */
.menu { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.logo { position: absolute; top: 3vh; right: 2.5vw; width: min(38vw, 64vh); height: auto; filter: drop-shadow(0 .8vh 1.2vh rgba(0,0,0,.35)); transform: rotate(-2deg); }
.join-sign { position: absolute; left: 3vw; bottom: 5vh; display: flex; align-items: center; gap: 1.4vw; max-width: 44vw; color: #fff; font-size: 2.2vh; }
.join-sign p { margin: 0 0 .6vh; }
/* nel menu il cartello del telefono è una targa di smalto grigio chiaro con bordo bianco e rivetti d'acciaio, come i cartelli del plastico */
.menu .join-sign.sign {
  border-radius: 1vh; outline: 0; padding: 2vh 2vw;
  background:
    radial-gradient(circle at 1.4vh 1.4vh, #f4f5f6 0 .3vh, #8d9298 .45vh, transparent .7vh),
    radial-gradient(circle at calc(100% - 1.4vh) 1.4vh, #f4f5f6 0 .3vh, #8d9298 .45vh, transparent .7vh),
    radial-gradient(circle at 1.4vh calc(100% - 1.4vh), #f4f5f6 0 .3vh, #8d9298 .45vh, transparent .7vh),
    radial-gradient(circle at calc(100% - 1.4vh) calc(100% - 1.4vh), #f4f5f6 0 .3vh, #8d9298 .45vh, transparent .7vh),
    linear-gradient(170deg, #e6e8ea, #cfd2d5);
  box-shadow: 0 0 0 .6vh #f6f5f1, 0 0 0 .8vh #9aa0a6, 0 1.6vh 2.4vh rgba(0,0,0,.35);
  color: #2E3238; text-shadow: none;
}
.menu .join-sign.sign .url { color: #C8352E; }
.menu .join-sign.sign .qr { box-shadow: 0 0 0 .3vh #9aa0a6; }
.join-lead { font-family: var(--display); font-size: 2.8vh; line-height: 1.15; }
.join-lead.warn { color: var(--butter); }
.url { color: var(--butter); font-weight: 600; }
.qr { width: 16vh; height: 16vh; background: #fff; border-radius: 1.2vh; padding: .7vh; flex: none; }
.pill-hint { margin: 0; justify-self: center; padding: 1vh 2vw; border-radius: 999px; background: rgba(10,19,48,.78); color: var(--paper); font-size: 2.2vh; font-weight: 600; }
.pill-hint.warn { color: var(--butter); }
.menu-hint { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-10%); }
/* gioco locale / giocatore singolo: due targhette in alto a sinistra, quella scelta accesa (↑ ↓, Tab o un tocco) */
.play-switch { position: absolute; top: 4vh; left: 3vw; display: flex; gap: .8vw; pointer-events: auto; }
.play-switch button { font-family: var(--display); font-size: 2.3vh; padding: 1.1vh 1.6vw; border-radius: 1.2vh; border: 0; cursor: pointer; background: rgba(10,19,48,.72); color: var(--muted); box-shadow: 0 .5vh 0 rgba(0,0,0,.35); touch-action: manipulation; }
.play-switch button.on { background: var(--butter); color: var(--ink); box-shadow: 0 .5vh 0 #B5871A; }
.menu-players { position: absolute; top: 12vh; left: 3vw; display: flex; align-items: center; gap: .6vw; padding: .8vh 1.2vw; border-radius: 1.4vh; background: rgba(10,19,48,.72); }
.menu-players:empty { display: none; }
.mp-lbl { font-weight: 600; font-size: 2.2vh; margin-right: .6vw; }
.mini .helmet { width: 4.8vh; height: 4vh; display: block; }

.overlay { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(10,19,48,.55); pointer-events: auto; }
.panel { width: min(88vw, 150vh); border-radius: 2vh; overflow: hidden; background: var(--felt); border: .8vh solid var(--sign); box-shadow: inset 0 0 0 .4vh #7DA2FF, 0 1.2vh 0 var(--sign-dark); }
.panel.narrow { width: min(70vw, 80vh); }
.panel .card-head { font-size: 3.4vh; padding: 1.4vh; }
.cc-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6vw; padding: 3vh 2vw 1vh; }
.cc { border-radius: 1.6vh; padding: 1.2vh; background: rgba(0,0,0,.18); border: .5vh solid transparent; text-align: center; }
.cc canvas { width: 100%; height: auto; display: block; }
.cc.on { border-color: var(--butter); background: rgba(255,201,60,.14); }
.cc-name { margin: 1vh 0; font-family: var(--display); font-size: 2.4vh; }
.panel-hint { margin: 0; padding: 1.6vh 2vw 2.4vh; text-align: center; color: var(--muted); font-size: 2.1vh; }
.opt-list { list-style: none; margin: 0; padding: 2vh 2.4vw 0; }
.opt-list li { display: flex; justify-content: space-between; align-items: center; padding: 1.3vh 1.2vw; border-radius: 1.2vh; font-size: 2.8vh; border: .4vh solid transparent; }
.opt-list li b { font-family: var(--display); font-weight: 400; font-size: 2.6vh; }
.opt-list li.on { border-color: var(--butter); background: rgba(255,201,60,.14); }

/* ---------- Salone auto ---------- */
.showroom { position: fixed; inset: 0; z-index: 2; padding: 4vh 4vw 3vh; grid-template-rows: auto minmax(0, 1fr) auto; gap: 3vh; }
.showroom .block-title { font-size: 8.6vh; margin-top: 1vh; }
.sr-cards { display: grid; gap: 3vh 2vw; min-height: 0; grid-auto-rows: 36vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 2.6vh 1.4vw 3vh; margin: -2.6vh -1.4vw 0; scroll-padding: 3vh 0; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; }
.sr-cards::-webkit-scrollbar { width: .8vh; }
.sr-cards::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 1vh; }
.card.sr { position: relative; transition: transform .15s ease-out, box-shadow .15s ease-out; }
.card.sr .card-head { font-size: 2.6vh; }
.card.sr .card-foot { flex-direction: column; align-items: flex-start; gap: .2vh; padding: .6vh 1vw .8vh; min-width: 0; }
.card.sr .card-foot .car { flex: none; font-family: inherit; font-size: 1.5vh; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.card.sr .card-foot .st { min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100%; font-family: var(--display); font-size: 2.3vh; color: #fff; }
.card.sr.on { z-index: 1; border-width: 1vh; box-shadow: inset 0 0 0 .35vh rgba(255,255,255,.55), 0 1.2vh 0 rgba(0,0,0,.4), 0 0 3vh var(--pc); transform: translateY(-1.8vh) scale(1.07); }

/* ---------- Garage ---------- */
.garage { position: fixed; inset: 0; z-index: 2; padding: 4vh 4vw 3vh; grid-template-rows: auto minmax(0, 1fr) auto; gap: 3vh; }
.g-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 2vw; }
.garage .block-title { font-size: 8.6vh; margin-top: 1vh; }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2.4vh 1.6vw; min-height: 0; }
.card {
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0;
  border-radius: 1.8vh; overflow: hidden;
  border: .7vh solid var(--pc, var(--sign)); box-shadow: inset 0 0 0 .35vh rgba(255,255,255,.35), 0 .9vh 0 rgba(0,0,0,.35);
  background: transparent;
}
.card-head { background: var(--felt-dark); color: #fff; font-family: var(--display); font-size: 2.9vh; text-align: center; padding: .9vh .6vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-stage { min-height: 0; }
.card-foot { min-width: 0; background: var(--felt-dark); display: flex; justify-content: space-between; align-items: baseline; gap: .6vw; padding: .8vh 1vw; }
.card-foot .car { font-family: var(--display); font-size: 2.2vh; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-foot .st { font-size: 1.9vh; color: var(--muted); white-space: nowrap; }
.card > * { min-width: 0; }
.card.ready .st { color: var(--butter); font-weight: 600; }
.card.off { opacity: .45; }
.card.empty { background: rgba(14,74,42,.5); grid-template-rows: auto minmax(0, 1fr); }
.card.empty .card-head { color: rgba(255,255,255,.55); }
.card-join { display: grid; place-items: center; align-content: center; gap: 1.2vh; text-align: center; padding: 1vh; font-size: 2vh; }
.card-join p { margin: 0; }
.card-join .qr { width: 15vh; height: 15vh; }
.kjoin { font-size: 2.2vh; max-width: 18ch; }

/* ---------- Presentazione del circuito ---------- */
.intro { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.intro .block-title { position: absolute; top: 5vh; left: 4vw; font-size: 12vh; }
.i-meta { position: absolute; top: 5vh; right: 4vw; }
.i-players { position: absolute; left: 4vw; bottom: 5vh; display: flex; gap: .6vw; }
.i-load {
  position: absolute; left: 0; right: 0; bottom: 4vh; margin: 0; text-align: center;
  font-family: var(--display); font-size: 6vh; color: #fff; transform: skewX(-12deg);
  text-shadow: .06em .06em 0 var(--ink-deep);
}

/* ---------- In gara ---------- */
.hud { position: fixed; inset: 0; z-index: 3; pointer-events: none; }
.ladder { position: absolute; top: 4vh; left: 2vw; display: grid; gap: .6vh; justify-items: start; }
.ladder:empty { display: none; }
.ladder-flag { width: 5.5vh; height: 5.5vh; color: #fff; padding: .6vh; border-radius: 1vh; background: var(--ink-deep); }
.ladder-flag svg { width: 100%; height: 100%; }
.rung { display: flex; align-items: center; gap: .5vw; padding: .3vh .8vw .3vh .3vw; border-radius: 999px; background: rgba(10,19,48,.55); }
.rung .helmet { width: 5.2vh; height: 4.3vh; display: block; }
.rung .rn { font-weight: 600; font-size: 1.9vh; }
.rung.done { opacity: .6; }
.lapbox { position: absolute; top: 3vh; right: 2.4vw; display: grid; justify-items: end; }
.laps { display: flex; align-items: baseline; gap: .6vw; }
.laps-lbl, .laps-n, .laps-of, .clock { font-family: var(--display); color: var(--butter); -webkit-text-stroke: .5vh var(--ink-deep); paint-order: stroke fill; }
.laps-lbl { font-size: 3.4vh; }
.laps-n { font-size: 11vh; line-height: .9; }
.laps-of { font-size: 4vh; }
.clock { font-size: 5vh; }
.bars { position: absolute; left: 1.6vw; right: 1.6vw; bottom: 2vh; display: flex; justify-content: space-between; align-items: flex-end; }
.bars-col { display: grid; gap: .6vh; justify-items: start; }
.bars-col.right { justify-items: end; }
.bar { display: flex; align-items: center; gap: .5vw; padding: .4vh .8vw .4vh .4vw; border-radius: 1vh; background: rgba(10,19,48,.75); }
.bars-col.right .bar { flex-direction: row-reverse; padding: .4vh .4vw .4vh .8vw; }
.bar .helmet { width: 4.4vh; height: 3.6vh; display: block; }
.bar .bn { font-weight: 600; font-size: 1.8vh; }
.segs { display: flex; gap: .25vw; }
.segs i { width: 2.2vh; height: 2.6vh; border-radius: .4vh; background: rgba(255,255,255,.12); border: .25vh solid rgba(255,255,255,.2); }
.segs i.on { background: var(--pc); border-color: rgba(255,255,255,.85); box-shadow: inset 0 -.5vh 0 rgba(0,0,0,.2); }
.bar.out { opacity: .35; }
.school { position: absolute; left: 1.6vw; bottom: 2vh; display: grid; gap: .8vh; justify-items: start; }
.school:empty { display: none; }
.sc-head { font-weight: 600; font-size: 2.2vh; padding: .5vh 1vw; border-radius: 1vh; background: rgba(10,19,48,.75); }
.sc-head b { font-family: var(--display); font-weight: 400; color: var(--butter); }
.sc-row { display: grid; grid-template-columns: auto auto; gap: .4vh 1vw; align-items: center; padding: .6vh 1vw .6vh .5vw; border-radius: 1vh; background: rgba(10,19,48,.75); border-left: .6vh solid var(--pc); }
.sc-row .helmet { width: 4.4vh; height: 3.6vh; display: block; grid-row: span 2; }
.sc-top { display: flex; align-items: center; gap: 1.2vw; font-size: 2vh; }
.sc-top .nm { font-weight: 600; }
.sc-top .t { font-family: var(--display); color: var(--butter); }
.sc-bot { display: flex; align-items: center; gap: 1vw; font-size: 1.7vh; opacity: .95; }
.meter { position: relative; width: 16vw; height: 1.8vh; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; }
.meter::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: .25vh solid rgba(255,255,255,.6); }
.meter i { position: absolute; top: 0; bottom: 0; background: var(--pc); }
.gas { width: 1.8vh; height: 1.8vh; border-radius: 50%; border: .25vh solid #fff; }
.gas.on { background: #7CFF6B; }

.count {
  position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: none;
  font-family: var(--display); font-size: 26vh; color: var(--butter); text-shadow: .05em .05em 0 var(--ink-deep);
}
.count.pop { animation: pop .95s ease-out both; }
@keyframes pop { 0% { transform: scale(1.7); opacity: 0; } 18% { transform: scale(1); opacity: 1; } 78% { opacity: 1; } 100% { transform: scale(.92); opacity: 0; } }
.shout { position: fixed; left: 0; right: 0; top: 52vh; z-index: 4; display: grid; justify-items: center; pointer-events: none; }
.shout-big {
  font-family: var(--ui); font-weight: 600; font-size: 13vh; line-height: 1; color: #FF6F91;
  -webkit-text-stroke: .9vh #fff; paint-order: stroke fill; transform: skewX(-10deg) rotate(-3deg);
  text-shadow: 0 .9vh 0 rgba(10,19,48,.45);
}
.shout-name { font-family: var(--display); font-size: 5vh; color: var(--pc); -webkit-text-stroke: .6vh var(--ink-deep); paint-order: stroke fill; margin-top: .6vh; }
.shout.pop { animation: shout .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes shout { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.over { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; background: rgba(10,19,48,.5); }
.over-card { width: min(60vw, 90vh); border-radius: 2vh; overflow: hidden; background: var(--felt); border: .8vh solid var(--sign); box-shadow: inset 0 0 0 .4vh #7DA2FF, 0 1.2vh 0 var(--sign-dark); }
.over-card .card-head { font-size: 3.4vh; padding: 1.4vh; }
.over-body { padding: 2.6vh 3vw 3vh; }
.over-title { margin: 0 0 2.4vh; font-family: var(--display); font-weight: 400; font-size: 5.2vh; line-height: 1.1; display: inline-block; border-bottom: .8vh solid var(--pc); }
.over-list { list-style: none; margin: 0 0 2.4vh; padding: 0; }
.over-list li { display: grid; grid-template-columns: 5vh 1fr auto; gap: 1vw; align-items: center; font-size: 3vh; padding: .8vh 0; border-bottom: .2vh dashed rgba(255,255,255,.2); }
.over-list .helmet { width: 4.6vh; height: 3.8vh; display: block; }
.over-list .vl { font-family: var(--display); }
.over .hint { margin: 0; color: var(--muted); font-size: 2.1vh; }
.pause { z-index: 5; }
.pause .over-card { width: min(44vw, 70vh); }
.pause .opt-list { padding: 2.4vh 2.4vw 1vh; }
.pause .opt-list li { justify-content: center; font-family: var(--display); font-size: 3.6vh; letter-spacing: .06em; }
.pause .hint { text-align: center; padding: 0 2vw 2.4vh; }

.audio-hint { position: fixed; z-index: 5; bottom: 10vh; left: 50%; transform: translateX(-50%); margin: 0; padding: .8vh 1.6vw; border-radius: 999px; background: var(--butter); color: var(--ink); font-weight: 600; font-size: 2vh; pointer-events: none; }
.debug { position: fixed; z-index: 6; bottom: 1.5vh; left: 1.5vw; padding: 1vh 1vw; border-radius: 1vh; background: rgba(0,0,0,.62); color: #fff; font-size: 1.7vh; line-height: 1.45; pointer-events: none; }

@media (prefers-reduced-motion: reduce) { .count.pop, .shout.pop { animation: none; } }

/* ---------- Festa finale: nastro scorrevole stile TV ---------- */
.ticker { position: fixed; top: 4vh; left: 0; right: 0; z-index: 5; display: flex; align-items: stretch; height: 9vh; pointer-events: none;
  background: linear-gradient(180deg, rgba(14,18,34,.92), rgba(24,30,56,.92)); border-top: .6vh solid var(--pc, #FFC93C); border-bottom: .6vh solid var(--pc, #FFC93C);
  box-shadow: 0 1vh 3vh rgba(0,0,0,.4); animation: tickerIn .5s ease-out; }
.ticker .live { flex: none; display: grid; place-items: center; padding: 0 2.4vw; background: #D7263D; color: #fff; font-family: var(--display); font-size: 3.4vh; letter-spacing: .08em; }
.ticker .tape { flex: 1; overflow: hidden; position: relative; }
.ticker .roll { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; white-space: nowrap; animation: tickerRoll 54s linear infinite; }
.ticker .roll span { font-family: var(--display); font-size: 5vh; color: #FFE08A; padding: 0 3vw; text-shadow: .06em .06em 0 rgba(0,0,0,.5); }
.ticker .roll span.sub { color: #fff; font-size: 3.2vh; }
.ticker .roll span.dot { color: var(--pc, #FFC93C); padding: 0 1vw; }
@keyframes tickerRoll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes tickerIn { from { transform: translateY(-160%); } to { transform: translateY(0); } }

/* classifica: giro migliore accanto al nome e record storico in fondo */
.over-list .nm { display: flex; align-items: baseline; gap: 1vw; }
.over-list .bl { font-size: 2.1vh; color: var(--muted); font-family: inherit; }
.over-list .bl.top { color: #FFD98A; font-weight: 600; }
.over-rec { margin: 0 0 1.6vh; padding: 1vh 1.2vw; border-radius: 1vh; background: rgba(0,0,0,.22); font-size: 2.1vh; color: var(--paper); }
.over-rec b { font-family: var(--display); font-weight: 400; color: #FFD98A; }

/* ---------- Accensione (boot.js) ---------- */
.boot { position: fixed; inset: 0; z-index: 50; background: #000; overflow: hidden; transition: opacity .6s ease; cursor: none; }
.boot.out { opacity: 0; pointer-events: none; }
.boot > div { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; }
.boot[data-stage="load"] .b-load, .boot[data-stage="power"] .b-power, .boot[data-stage="company"] .b-company, .boot[data-stage="license"] .b-license, .boot[data-stage="title"] .b-title { display: flex; }
/* spia */
.b-power { gap: 2vh; color: #6c6c74; font-family: var(--display); font-size: 2.2vh; letter-spacing: .3em; }
.b-power .led { width: 1.4vh; height: 1.4vh; border-radius: 50%; background: #ff2a2a; box-shadow: 0 0 1.6vh #ff2a2a; animation: led 1.6s ease-in-out infinite; }
@keyframes led { 50% { opacity: .25; box-shadow: none; } }
/* casa madre: fondo bianco, gemma a quattro spicchi che cresce e luccica */
.b-company { background: #fff; gap: 1.2vh; animation: bootFadeIn .6s ease-out; }
.gem { width: 26vh; height: 26vh; position: relative; transform: rotate(45deg) scale(.25); animation: gemIn 2.8s cubic-bezier(.2,.8,.2,1) forwards; margin-bottom: 5vh; }
.gem i { position: absolute; width: 50%; height: 50%; }
.gem i:nth-child(1) { left: 0; top: 0; background: linear-gradient(135deg, #FFC53D, #F7931E); }
.gem i:nth-child(2) { right: 0; top: 0; background: linear-gradient(135deg, #8BD86A, #3FA34D); }
.gem i:nth-child(3) { left: 0; bottom: 0; background: linear-gradient(135deg, #7E8CF0, #3B4CC4); }
.gem i:nth-child(4) { right: 0; bottom: 0; background: linear-gradient(135deg, #B377F2, #5B2FB8); }
.gem::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%); background-size: 300% 300%; animation: shine 2.8s ease-in-out forwards; mix-blend-mode: screen; }
@keyframes gemIn { 60% { transform: rotate(45deg) scale(1.04); } 100% { transform: rotate(45deg) scale(1); } }
@keyframes shine { from { background-position: 100% 100%; } to { background-position: 0 0; } }
.b-company p { margin: 0; color: #1a1a1a; font-family: "Times New Roman", Georgia, serif; letter-spacing: .38em; opacity: 0; animation: bootFadeIn 1s ease-out 1.2s forwards; }
.b-company .co1 { font-size: 6.2vh; font-weight: 700; }
.b-company .co2 { font-size: 2.9vh; letter-spacing: .5em; }
/* licenza: nero, emblema con la S in piedi e la B sdraiata */
.b-license { background: #000; gap: .9vh; color: #fff; }
.emblem { width: 34vh; height: 24vh; margin-bottom: 3vh; animation: bootFadeIn .25s ease-out; overflow: visible; }
.b-license p { margin: 0; opacity: 0; animation: bootFadeIn .9s ease-out forwards; }
.b-license .l1 { font: italic 700 5vh "Arial Black", Arial, sans-serif; letter-spacing: -.02em; animation-delay: .2s; }
.b-license .l2 { font-size: 2vh; color: #bbb; margin-top: 2vh; animation-delay: .9s; }
.b-license .l3 { font-size: 2.3vh; letter-spacing: .06em; animation-delay: 1.1s; }
.b-license .l4 { font-size: 1.6vh; color: #777; margin-top: 4vh; max-width: 60vw; text-align: center; animation-delay: 2s; }
/* titolo */
.b-title { background: radial-gradient(ellipse at 50% 40%, #2b2270 0%, #16123A 60%, #0c0a24 100%); gap: 6vh; animation: bootFadeIn 1.2s ease-out; }
.b-title::before { content: ""; position: absolute; inset: -50%; background: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 4vh, transparent 4vh 8vh); animation: drift 30s linear infinite; }
@keyframes drift { to { transform: translate(8vh, 8vh); } }
.t-logo { position: relative; width: min(78vw, 140vh); height: auto; filter: drop-shadow(0 2vh 3vh rgba(0,0,0,.5)); animation: logoIn 1.1s cubic-bezier(.2,1.4,.4,1) both, float 4s ease-in-out 1.1s infinite; }
@keyframes logoIn { from { transform: scale(.6) translateY(4vh); opacity: 0; } }
@keyframes float { 50% { transform: translateY(-1.2vh); } }
.b-title p { position: absolute; bottom: 10vh; margin: 0; font-family: var(--display); font-size: 5vh; letter-spacing: .12em; color: #FFD34D; text-shadow: .08em .08em 0 #3a1d00, 0 0 2vh rgba(255,200,60,.4); }
.t-start { animation: blink 1.05s steps(1) infinite; }
/* caricamento: logo, barra, percentuale e megabyte */
.b-load { background: radial-gradient(ellipse at 50% 40%, #2b2270 0%, #16123A 60%, #0c0a24 100%); gap: 4vh; cursor: default; }
.b-load .t-logo { width: min(70vw, 110vh); max-height: 36vh; object-fit: contain; }
.l-bar { width: min(60vw, 90vh); height: 2.4vh; border-radius: 2vh; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 .3vh rgba(255,255,255,.18); overflow: hidden; }
.l-bar i { display: block; height: 100%; width: 0; border-radius: 2vh; background: linear-gradient(90deg, #FFB020, #FFD34D); box-shadow: 0 0 2vh rgba(255,200,60,.5); transition: width .25s linear; }
.l-pct { margin: 0; font-family: var(--display); font-size: 3.6vh; letter-spacing: .12em; color: #FFD34D; text-shadow: .08em .08em 0 #3a1d00; }
.boot:not(.counted) .l-pct { animation: blink 1.6s ease-in-out infinite; }
.l-ver { position: absolute; right: 2vw; bottom: 2vh; margin: 0; font-size: 1.6vh; color: rgba(154,160,200,.6); font-variant-numeric: tabular-nums; }
.opts .build { margin: 0; padding: 0 2.4vw 1.4vh; text-align: right; font-size: 1.6vh; color: var(--muted); opacity: .7; }
.l-mb { margin: -2vh 0 0; font-size: 2.2vh; color: #9aa0c8; font-variant-numeric: tabular-nums; }
.t-load { color: #9aa0c8 !important; font-size: 3vh !important; animation: blink 1.6s ease-in-out infinite; display: none; }
.boot.loading .t-start { display: none; }
.boot.loading .t-load { display: block; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes bootFadeIn { from { opacity: 0; } to { opacity: 1; } }

/* foto dei profili */
.ava-c { width: 4.4vh; height: 4.4vh; margin-top: -.6vh; margin-bottom: -.6vh; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-right: .8vw; border: .25vh solid var(--pc, #fff); }
.ava-s { width: 3.6vh; height: 3.6vh; border-radius: 50%; object-fit: cover; margin-right: .6vw; border: .25vh solid var(--pc, #fff); }
.helmet.face { object-fit: cover; border-radius: 50%; border: .3vh solid var(--pc, #fff); box-sizing: border-box; aspect-ratio: 1; height: auto; background: var(--pc); }

/* ---------- Giocatore singolo sul telefono ---------- */
/* in gara: cerchio di sterzo analogico a sinistra (conta la distanza orizzontale del dito dal centro), gas a destra */
.tpad { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.tp-zone { position: absolute; bottom: calc(4vh + env(safe-area-inset-bottom, 0px)); width: min(48vh, 30vw); height: min(48vh, 30vw); border-radius: 50%; border: .6vh solid rgba(255,255,255,.55); background: rgba(10,19,48,.2); pointer-events: auto; touch-action: none; user-select: none; -webkit-user-select: none; }
.tp-steer { left: calc(3vw + env(safe-area-inset-left, 0px)); }
.tp-steer::before { content: ""; position: absolute; left: 50%; top: 20%; bottom: 20%; border-left: .4vh dashed rgba(255,255,255,.45); }
.tp-knob { position: absolute; left: 33%; top: 33%; width: 34%; height: 34%; border-radius: 50%; background: rgba(255,255,255,.72); transform: translateX(calc(var(--s, 0) * 147%)); }
.tp-gas { right: calc(3vw + env(safe-area-inset-right, 0px)); display: grid; place-items: center; font-family: var(--display); font-size: 4.2vh; color: rgba(255,255,255,.85); }
.tp-gas.on { background: rgba(255,201,60,.55); color: var(--ink); }
.tp-top { position: absolute; top: calc(1.5vh + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); display: flex; gap: 1vw; pointer-events: auto; }
.tp-btn { font-weight: 600; font-size: 2.3vh; padding: 1vh 1.8vw; border-radius: 999px; border: .3vh solid rgba(255,255,255,.7); background: rgba(10,19,48,.6); color: #fff; touch-action: manipulation; }
.tp-btn:disabled { opacity: .45; }
/* fuori gara: una croce a sinistra, OK e indietro a destra (fanno quello che fanno frecce, Invio ed Esc) */
body.touchui[data-play="solo"] .menu .join-sign { display: none; }
/* online, sul telefono: il cartello con codice e link sale sotto le schede, lontano dalla croce */
body.touchui[data-play="online"] .menu .join-sign { bottom: auto; top: 20vh; max-width: 60vw; }
.menu .join-sign .share { pointer-events: auto; margin-top: .8vh; font-family: var(--display); font-size: 2.2vh; padding: .9vh 1.6vw; border-radius: 1vh; border: 0; background: #C8352E; color: #fff; cursor: pointer; touch-action: manipulation; }
.rotate-hint { display: none; position: fixed; inset: 0; z-index: 50; place-items: center; background: var(--ink); color: var(--paper); font-family: var(--display); font-size: 6vw; text-align: center; padding: 8vw; }
@media (orientation: portrait) { body.touchui .rotate-hint { display: grid; } }
.rung.me { box-shadow: 0 0 0 .35vh var(--butter); }
.bar.me { box-shadow: 0 0 0 .35vh var(--butter); }

/* ---------- Pulsanti fuori gara (mouse e dita; sul telefono non c'è più la croce) ---------- */
.overlay button, .gfx-chip, .g-bar button, .cc-arrow, .card.own .card-foot, .back-btn, .over .acts button, .pause li, .cc, .card.sr { cursor: pointer; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.panel .card-head { position: relative; }
.x { position: absolute; right: 1.2vh; top: 50%; transform: translateY(-50%); width: 5.2vh; height: 5.2vh; border-radius: 50%; border: 0; background: rgba(255,255,255,.14); color: #fff; font-size: 2.6vh; line-height: 1; }
.x:hover { background: rgba(255,255,255,.26); }
/* opzioni: schede e righe con − valore + */
.opts { width: min(76vw, 92vh); }
.opt-tabs { display: flex; gap: 1vw; padding: 1.8vh 2.4vw 0; }
.opt-tabs button { flex: 1; font-family: var(--display); font-size: 2.3vh; padding: 1.1vh .6vw; border: .4vh solid transparent; border-radius: 1.2vh; background: rgba(0,0,0,.2); color: var(--muted); }
.opt-tabs button.on { background: var(--butter); color: var(--ink); }
.opt-tabs button.sel { border-color: #fff; }
.opts .opt-list { padding-top: 1.2vh; }
.opts .opt-list li { padding: .8vh 1.2vw; min-height: 7.4vh; }
.opt-ctl { display: flex; align-items: center; gap: 1vw; }
.opt-ctl b { font-family: var(--display); font-weight: 400; font-size: 2.5vh; min-width: 7vh; text-align: center; }
.opt-ctl button { min-width: 5.6vh; height: 5.6vh; border-radius: 1.2vh; border: 0; background: rgba(0,0,0,.28); color: #fff; font-size: 3vh; line-height: 1; }
.opt-ctl button:hover { background: rgba(255,255,255,.18); }
.opt-ctl button:active { background: var(--butter); color: var(--ink); }
.opt-ctl .tog { min-width: 12vh; font-family: var(--display); font-size: 2.3vh; background: rgba(0,0,0,.35); color: var(--muted); }
.opt-ctl .tog.is-on { background: var(--butter); color: var(--ink); }
.vol { display: block; width: 16vh; height: 1.4vh; border-radius: 1vh; background: rgba(0,0,0,.35); overflow: hidden; }
.vol > i { display: block; height: 100%; background: var(--butter); }
/* la grafica: il pulsante nel menu e la scelta */
.gfx-chip { position: absolute; top: 19.5vh; left: 3vw; display: flex; align-items: baseline; gap: .8vw; padding: .9vh 1.2vw; border-radius: 1.4vh; border: 0; background: rgba(10,19,48,.72); color: var(--muted); font-size: 2vh; pointer-events: auto; box-shadow: 0 .5vh 0 rgba(0,0,0,.35); }
.gfx-chip b { font-family: var(--display); font-weight: 400; color: #fff; font-size: 2.1vh; }
.gfx-chip:hover b { color: var(--butter); }
.menu-players:empty ~ .gfx-chip { top: 12vh; }
.gfxp { width: min(70vw, 96vh); }
.gfx-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2vw; padding: 3vh 2.4vw 1vh; }
.gfx-row button { display: flex; flex-direction: column; align-items: center; gap: .4vh; padding: 2.4vh 1vw; border-radius: 1.4vh; border: .5vh solid transparent; background: rgba(0,0,0,.22); color: #fff; font-family: var(--display); font-size: 2.6vh; }
.gfx-row button small { font-family: var(--ui); font-size: 1.8vh; color: var(--muted); }
.gfx-row button.cur { background: rgba(255,201,60,.18); }
.gfx-row button.on { border-color: var(--butter); }
.cc.on, .cc:hover { border-color: var(--butter); }
/* garage: barra in basso e frecce sulla propria auto */
.g-foot { display: grid; justify-items: center; gap: 1.4vh; }
.g-foot .pill-hint:empty { display: none; }
.g-bar { display: flex; align-items: center; justify-content: center; gap: 2vw; }
.g-bar:empty { display: none; }
.g-bar button { border: 0; border-radius: 1.4vh; background: rgba(10,19,48,.78); color: #fff; box-shadow: 0 .5vh 0 rgba(0,0,0,.35); }
.g-bar button:active { transform: translateY(.3vh); box-shadow: 0 .2vh 0 rgba(0,0,0,.35); }
.gb-back { width: 7.4vh; height: 7.4vh; font-size: 3.4vh; }
.gb-bots { display: flex; align-items: center; gap: .8vw; padding: .6vh; border-radius: 1.6vh; background: rgba(10,19,48,.6); font-size: 2.3vh; }
.gb-bots span { padding: 0 .6vw; } .gb-bots b { font-family: var(--display); font-weight: 400; }
.gb-bots button { width: 6.2vh; height: 6.2vh; font-size: 3.2vh; box-shadow: none; background: rgba(255,255,255,.12); }
.gb-go { min-width: 22vh; height: 7.4vh; font-family: var(--display); font-size: 3.4vh; background: var(--butter) !important; color: var(--ink) !important; box-shadow: 0 .6vh 0 #B5871A !important; }
.gb-wait { font-size: 2.3vh; color: var(--muted); padding: 0 1vw; }
.card-stage { position: relative; }
.cc-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 6.4vh; height: 9vh; border: 0; border-radius: 1.2vh; background: rgba(10,19,48,.55); color: #fff; font-size: 4.4vh; line-height: 1; }
.cc-arrow.l { left: .8vh; } .cc-arrow.r { right: .8vh; }
.cc-arrow:hover, .cc-arrow:active { background: var(--butter); color: var(--ink); }
.card.own .card-foot { border: 0; width: 100%; text-align: left; color: inherit; }
.card.own .card-foot .st { display: flex; align-items: center; gap: .6vw; color: #fff; }
.card.own .card-foot .dot { width: 2vh; height: 2vh; border-radius: 50%; background: var(--pc); box-shadow: 0 0 0 .3vh rgba(255,255,255,.7); }
/* salone: indietro */
.showroom .g-head { justify-content: flex-start; align-items: center; }
.showroom .g-head .mode-line { margin-left: auto; }
.back-btn { flex: none; width: 7.4vh; height: 7.4vh; border: 0; border-radius: 1.4vh; background: rgba(10,19,48,.78); color: #fff; font-size: 3.4vh; box-shadow: 0 .5vh 0 rgba(0,0,0,.35); }
.back-btn:hover { color: var(--butter); }
/* classifica: rivincita e menu */
.over .acts { display: flex; justify-content: flex-end; gap: 1.2vw; margin: 0 0 1.6vh; }
.over .acts button { font-family: var(--display); font-size: 2.6vh; padding: 1.4vh 2.4vw; border-radius: 1.4vh; border: 0; background: rgba(0,0,0,.28); color: #fff; }
.over .acts button.primary { background: var(--butter); color: var(--ink); box-shadow: 0 .5vh 0 #B5871A; }
.toast { position: fixed; top: 3vh; left: 50%; transform: translateX(-50%); z-index: 8; margin: 0; padding: 1.2vh 2.4vw; border-radius: 999px; background: var(--butter); color: var(--ink); font-family: var(--display); font-size: 2.4vh; box-shadow: 0 .6vh 0 #B5871A; pointer-events: none; }
.pause li:hover { background: rgba(255,255,255,.08); }
/* sul telefono gli aiuti da tastiera spariscono (i pulsanti parlano da soli) */
body.touchui .panel-hint { display: none; }
body.touchui #srHint { display: none; }