:root {
  --fondo: #120c09;
  --vetro: rgba(14, 11, 10, 0.86);
  --testo: #efe9e4;
  --tenue: #a9a19a;
  --accento: #ff6a1a;
  --accento-t: #1a0800;
  --bordo: rgba(255, 255, 255, 0.1);
  --rosso: #ff3b2a;
  --verde: #7ef06a;
  --blu: #4fb0ff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--fondo); color: var(--testo); overflow: hidden;
  font: 16px/1.45 "Barlow", system-ui, sans-serif; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; }
canvas#scena { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }
[hidden] { display: none !important; }

.demo-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 50; text-align: center; padding: 5px 12px;
  background: var(--accento); color: var(--accento-t); font: 800 14px/1.2 "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.ferita { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(200,20,10,.65) 100%); }

/* ------------------------------------------------ schermate */
.schermata { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: 44px 16px 16px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.25), rgba(0,0,0,.7)); }
.schermata.lato { place-items: center start; padding-left: max(16px, 5vw); background: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.15) 60%, rgba(0,0,0,0)); }
.schermata.basso { place-items: end center; padding-bottom: 18px; background: linear-gradient(0deg, rgba(0,0,0,.75), rgba(0,0,0,0) 55%); }
.finestra { width: min(460px, 100%); max-height: calc(100dvh - 70px); overflow: auto; background: var(--vetro);
  border: 1px solid var(--bordo); padding: 24px 26px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.finestra.larga { width: min(700px, 100%); }
.accento { display: block; width: 52px; height: 4px; background: var(--accento); margin-bottom: 10px; }
h1, h2 { font: italic 900 clamp(36px, 7vw, 58px)/0.92 "Barlow Condensed", sans-serif; text-transform: uppercase; margin: 0 0 12px; letter-spacing: .01em; }
h1 span { color: var(--accento); display: block; }
h2 { font-size: 34px; }
h2 small { font-size: 22px; color: var(--accento); }
h3 { font: 700 13px/1 "Barlow", sans-serif; color: var(--tenue); text-transform: uppercase; letter-spacing: .1em; margin: 18px 0 6px; }
.tenue { color: var(--tenue); }
.piccolo { font-size: 13px; color: var(--tenue); margin-top: 14px; }
.grado { color: var(--accento); font-weight: 700; min-height: 1em; margin: 6px 0; }
a { color: var(--accento); }
button, .bottone { display: block; width: 100%; min-height: 46px; margin: 6px 0; padding: 10px 14px; border: 1px solid var(--bordo);
  background: #221b18; color: var(--testo); font: 700 17px "Barlow", sans-serif; cursor: pointer; text-align: center; text-decoration: none;
  transition: background .15s, transform .1s; }
button:hover, .bottone:hover { background: #2e2521; }
button:active { transform: scale(.985); }
button.pri { background: var(--accento); color: var(--accento-t); border-color: transparent; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
button.pri:hover { background: #ff8440; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid var(--accento); outline-offset: 2px; }
label { display: block; margin: 10px 0 4px; color: var(--tenue); font-size: 14px; }
input, select { display: block; width: 100%; margin-top: 4px; min-height: 44px; padding: 8px 12px; background: #171210; color: var(--testo);
  border: 1px solid var(--bordo); font: 16px "Barlow", sans-serif; }
input[type=range] { padding: 0; accent-color: var(--accento); }
.spunta { display: flex; align-items: center; gap: 10px; }
.spunta input { width: 22px; min-height: 22px; margin: 0; accent-color: var(--accento); }
.comandi, .funzioni, .classifica { padding-left: 0; list-style: none; margin: 0; }
.comandi li { display: flex; gap: 12px; padding: 4px 0; align-items: baseline; }
.comandi kbd { flex: 0 0 150px; padding: 2px 8px; background: rgba(255,255,255,.08); font: 700 14px "Barlow", sans-serif; }
.funzioni li { padding: 3px 0; color: var(--tenue); }
.funzioni b { color: var(--testo); }
.classifica li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid var(--bordo); }
.classifica li b { color: var(--accento); }
.testo-lungo p { color: var(--tenue); font-size: 15px; }
.info { margin: 10px 0; word-break: break-all; }
.codice { font: 900 30px "Barlow Condensed", sans-serif; color: var(--accento); letter-spacing: .12em; }

/* scheda del pilota (garage) */
.scheda { width: min(720px, 100%); background: var(--vetro); border: 1px solid var(--bordo); padding: 16px 20px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.scheda-testa { display: grid; grid-template-columns: 54px 1fr 54px; gap: 12px; align-items: center; text-align: center; }
.scheda-testa h2 { margin: 2px 0; }
.scheda-testa p { margin: 0; }
.sopra { font: 700 12px "Barlow", sans-serif; text-transform: uppercase; letter-spacing: .14em; color: var(--accento); }
.freccia { min-height: 54px; font: 900 40px/1 "Barlow Condensed", sans-serif; margin: 0; padding: 0; }
.statistiche { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 12px 0 6px; }
.statistiche span { font-size: 13px; color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; }
.spec-testo { margin: 8px 0 4px; }
.spec-testo b { color: var(--accento); }
.storia { font-size: 14px; margin: 4px 0 8px; }
.libera { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; align-items: end; }
.libera label { margin: 0; }
.pulsanti { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; }
.pulsanti button { margin: 4px 0 0; }

/* ------------------------------------------------ HUD */
#hud { position: fixed; inset: 0; z-index: 10; pointer-events: none; font-family: "Barlow Condensed", sans-serif; }
.barra { height: 12px; background: rgba(255,255,255,.14); overflow: hidden; }
.barra i { display: block; height: 100%; width: 100%; background: var(--verde); transition: width .15s; }
.barra.salute { width: 250px; height: 16px; transform: skewX(-14deg); }
.barra.salute i.bassa { background: var(--rosso); animation: lampeggia .5s infinite alternate; }
.barra.sottile { height: 6px; }
.barra.turbo i { background: var(--blu); }
.barra.calore i { background: #f0b030; transition: none; }
.barra.calore i.rossa { background: var(--rosso); }
.barra.rossa i { background: #c64bff; }
@keyframes lampeggia { to { opacity: .45; } }
.h-sx { position: absolute; top: 40px; left: 16px; padding: 10px 14px; background: rgba(0,0,0,.45); }
.h-riga { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.h-nome { font: italic 900 24px "Barlow Condensed", sans-serif; letter-spacing: .03em; }
.h-vite { color: var(--rosso); font-size: 20px; letter-spacing: .1em; }
.h-mini { display: grid; grid-template-columns: 70px 1fr; align-items: center; gap: 8px; margin-top: 6px; font: 700 13px "Barlow", sans-serif; color: var(--tenue); text-transform: uppercase; }
.h-mini.spec .barra i { background: var(--accento); }
.h-mini.spec.pronta span { color: var(--accento); animation: lampeggia .4s infinite alternate; }
.h-centro { position: absolute; top: 40px; left: 50%; transform: translateX(-50%); padding: 4px 14px; background: rgba(0,0,0,.4); font: 800 16px "Barlow Condensed", sans-serif; text-transform: uppercase; letter-spacing: .12em; color: var(--tenue); }
.h-dx { position: absolute; top: 40px; right: 16px; display: flex; gap: 6px; }
.h-num { padding: 6px 12px; background: rgba(0,0,0,.45); text-align: center; min-width: 70px; }
.h-num b { display: block; font: italic 900 28px/1 "Barlow Condensed", sans-serif; }
.h-num span { font: 700 11px "Barlow", sans-serif; color: var(--tenue); text-transform: uppercase; letter-spacing: .08em; }
.h-boss { position: absolute; top: 84px; left: 50%; transform: translateX(-50%); width: min(460px, 70vw); text-align: center; font: italic 900 22px "Barlow Condensed", sans-serif; color: #d58bff; }
.h-boss .barra { height: 12px; }
.feed { position: absolute; top: 118px; right: 16px; list-style: none; margin: 0; padding: 0; text-align: right; font: 700 15px "Barlow", sans-serif; }
.feed li { background: rgba(0,0,0,.5); padding: 3px 10px; margin-bottom: 4px; display: inline-block; clear: both; float: right; }
.h-armi { position: absolute; right: 16px; bottom: 18px; width: 230px; padding: 10px 12px; background: rgba(0,0,0,.45); }
.h-mitra { font: 700 13px "Barlow", sans-serif; color: var(--tenue); text-transform: uppercase; margin-bottom: 8px; }
#hArmi { list-style: none; margin: 0; padding: 0; }
#hArmi li { display: flex; justify-content: space-between; padding: 3px 8px; font: 800 18px "Barlow Condensed", sans-serif; text-transform: uppercase; color: var(--tenue); }
#hArmi li.sel { background: var(--accento); color: var(--accento-t); }
#hArmi li.vuota { opacity: .4; }
#hArmi li b { font-size: 20px; }
.radar { position: absolute; left: 16px; bottom: 18px; width: 150px; height: 150px; border-radius: 50%; }
.allarme { position: absolute; top: 33%; left: 50%; transform: translateX(-50%); padding: 6px 16px; background: rgba(200,20,10,.85); font: italic 900 24px "Barlow Condensed", sans-serif; letter-spacing: .1em; animation: lampeggia .3s infinite alternate; }
.mirino { position: absolute; left: 0; top: 0; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 3px solid var(--rosso); border-radius: 50%; box-shadow: 0 0 10px rgba(255,60,40,.7); }
.mirino::after { content: ""; position: absolute; inset: 24px; background: var(--rosso); border-radius: 50%; }
.messaggio { position: absolute; top: 24%; left: 50%; transform: translateX(-50%); padding: 8px 20px; background: rgba(0,0,0,.55); font: italic 900 30px "Barlow Condensed", sans-serif; text-transform: uppercase; text-align: center; white-space: nowrap; }
.messaggio.grande { font-size: 72px; background: none; text-shadow: 0 4px 20px rgba(0,0,0,.8); color: var(--accento); }
.messaggio.verde { color: var(--verde); }
.messaggio.rosso { color: var(--rosso); }
.etichetta { position: absolute; left: 0; top: 0; text-align: center; font: 800 15px "Barlow Condensed", sans-serif; text-shadow: 0 1px 3px #000; white-space: nowrap; transform-origin: 50% 100%; }
.etichetta i { display: block; width: 70px; height: 5px; margin: 2px auto 0; background: rgba(0,0,0,.6); }
.etichetta b { display: block; height: 100%; background: var(--rosso); }
.etichetta.boss { color: #d58bff; font-size: 19px; }
.etichetta.boss i { width: 110px; }

/* ------------------------------------------------ telefono */
.touch { position: fixed; inset: 0; z-index: 12; pointer-events: none; }
.stick { position: absolute; left: 22px; bottom: 26px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.08); border: 2px solid rgba(255,255,255,.18); pointer-events: auto; touch-action: none; }
.stick i { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px; border-radius: 50%; background: rgba(255,255,255,.3); }
.tb { position: absolute; width: 74px; height: 74px; min-height: 0; margin: 0; padding: 0; border-radius: 50%; background: rgba(20,14,12,.55); border: 2px solid rgba(255,255,255,.22); font: 900 14px "Barlow Condensed", sans-serif; pointer-events: auto; touch-action: none; }
.tb.t1 { right: 22px; bottom: 30px; width: 88px; height: 88px; background: rgba(255,106,26,.5); }
.tb.t2 { right: 122px; bottom: 22px; }
.tb.t3 { right: 30px; bottom: 132px; }
.tb.t4 { right: 118px; bottom: 112px; }
.tb.t5 { right: 200px; bottom: 30px; width: 56px; height: 56px; }
.tb.t6 { left: 190px; bottom: 30px; width: 64px; height: 64px; }
/* telefono: niente sovrapposizioni con i pulsanti */
.tocco .radar { left: auto; right: 12px; top: 112px; bottom: auto; width: 96px; height: 96px; }
.tocco .h-armi { right: auto; left: 50%; transform: translateX(-50%); top: 36px; bottom: auto; width: 210px; padding: 4px 8px; }
.tocco #hArmi li:not(.sel) { display: none; }
.tocco .h-mitra { margin-bottom: 4px; font-size: 11px; }
.tocco .h-centro, .tocco .feed { display: none; }
.tocco .stick { bottom: 58px; }
@media (max-height: 520px) {
  .h-sx { top: 32px; padding: 6px 10px; } .h-dx { top: 32px; } .h-nome { font-size: 19px; }
  .barra.salute { width: 160px; height: 12px; } .h-mini { grid-template-columns: 58px 1fr; margin-top: 3px; font-size: 11px; }
  .h-num { min-width: 48px; padding: 3px 8px; } .h-num b { font-size: 20px; } .h-num span { font-size: 9px; }
  .messaggio { top: 30%; font-size: 22px; } .messaggio.grande { font-size: 50px; }
  .tb { width: 62px; height: 62px; } .tb.t1 { width: 76px; height: 76px; } .tb.t2 { right: 106px; } .tb.t3 { bottom: 112px; right: 24px; } .tb.t4 { right: 100px; bottom: 96px; } .tb.t5 { right: 176px; }
  .stick { width: 130px; height: 130px; } .tb.t6 { left: 168px; bottom: 40px; }
}

/* ------------------------------------------------ caricamento e credit */
.caricamento { position: fixed; inset: 0; z-index: 40; display: grid; place-content: center; justify-items: center; gap: 14px; background: var(--fondo); }
.giro { width: 46px; height: 46px; border: 4px solid rgba(255,255,255,.15); border-top-color: var(--accento); border-radius: 50%; animation: gira 0.8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.credit { position: fixed; right: 10px; bottom: 4px; z-index: 20; font-size: 11px; opacity: .7; }
.credit a { color: var(--testo); text-decoration: none; }
@media (max-width: 640px) {
  .statistiche { gap: 8px; } .libera { grid-template-columns: 1fr 1fr; } .libera label:first-child { grid-column: 1 / -1; }
  .barra.salute { width: 170px; } .h-num { min-width: 54px; padding: 4px 8px; } .h-num b { font-size: 22px; }
  .h-centro { display: none; } .storia { display: none; }
  .messaggio { font-size: 22px; } .messaggio.grande { font-size: 54px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* foto senza interfaccia (?pulito) */
.pulito .schermata, .pulito .demo-banner, .pulito #hud, .pulito .credit, .pulito .touch { display: none !important; }