:root{
  --bg:#7ccf5a; --panel:rgba(30,35,64,.8); --panel-solid:#1e2340; --text:#ffffff; --muted:#c3c8e6;
  --accent:#ffc93c; --red:#e8443a; --green:#4ade80; --card:#fff8e6; --card-text:#1e2340; --card-muted:#5b6185;
  --opt-bg:#ffffff; --opt-border:#e6d6ae;
  --display:"Lilita One","Arial Rounded MT Bold","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light dark; box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){ --card:#262b4d; --card-text:#ffffff; --card-muted:#b3b9dd; --panel:rgba(18,21,42,.84); --opt-bg:#30365e; --opt-border:#161a33; }
}
:root[data-theme="dark"]{ --card:#262b4d; --card-text:#ffffff; --card-muted:#b3b9dd; --panel:rgba(18,21,42,.84); --opt-bg:#30365e; --opt-border:#161a33; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg);font-family:var(--body);color:var(--text)}
canvas#game{position:fixed;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}
html,body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent}
.hidden{display:none!important}
.panel{position:fixed;background:var(--panel);border-radius:14px;padding:10px 14px}
.tl{top:calc(env(safe-area-inset-top,0px) + 14px);left:14px;min-width:150px}
.tr{top:calc(env(safe-area-inset-top,0px) + 14px);right:14px;min-width:210px}
.br{bottom:calc(env(safe-area-inset-bottom,0px) + 14px);right:14px;text-align:right;min-width:120px}
.bl{bottom:calc(env(safe-area-inset-bottom,0px) + 14px);left:14px;padding:6px}
.big{font-family:var(--display);font-size:40px;line-height:1.05}
.big small{font-size:22px;color:var(--muted)}
.lbl{font-size:13px;color:var(--muted);font-weight:600}
.sub{font-weight:800;margin-top:4px}
.pill{display:inline-block;margin-top:6px;font-size:12px;font-weight:800;padding:3px 9px;border-radius:999px;background:#1f6f43;color:#fff}
.pill.bad{background:var(--red)}
.row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;font-weight:800;font-variant-numeric:tabular-nums}
.row+.row{margin-top:3px}
.tr .row span:last-child{font-family:var(--display);font-weight:400;font-size:19px;letter-spacing:.5px}
.tr .row.rec span:last-child{color:var(--accent)}
#hud[data-mode="race"] [data-only]:not([data-only~="race"]), #hud[data-mode="tt"] [data-only]:not([data-only~="tt"]), #hud[data-mode="quali"] [data-only]:not([data-only~="quali"]){display:none}
.d-pos{color:#ff8a80}.d-neg{color:var(--green)}
#spd{font-family:var(--display);font-size:52px;line-height:1;font-variant-numeric:tabular-nums}
#lights{display:flex;gap:12px;background:#15182c;padding:12px 16px;border-radius:16px;border:3px solid #2c3157}
#lights span{width:38px;height:38px;border-radius:50%;background:#3a1416;box-shadow:inset 0 -4px 0 rgba(0,0,0,.35)}
#lights span.on{background:var(--red);box-shadow:0 0 22px 4px rgba(232,68,58,.75),inset 0 -4px 0 rgba(0,0,0,.25)}
#stack{position:fixed;top:calc(env(safe-area-inset-top,0px) + 64px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;z-index:3;width:min(560px,calc(100vw - 460px));min-width:280px}
#stack > *{max-width:100%}
@media (max-width:900px){ #stack{top:calc(env(safe-area-inset-top,0px) + 200px);width:92vw} }
#msg{text-align:center;font-family:var(--display);font-size:clamp(32px,5vw,60px);color:var(--accent);-webkit-text-stroke:3px #1e2340;paint-order:stroke fill;opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;pointer-events:none}
#msg:not(.show){display:none}
#msg.show{opacity:1;transform:scale(1)}
#warn{background:var(--red);color:#fff;font-weight:800;padding:8px 16px;border-radius:999px;font-size:17px}
#help{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);left:50%;transform:translateX(-50%);font-size:13px;color:var(--muted);background:var(--panel);padding:6px 12px;border-radius:999px;white-space:nowrap}
.overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(20,24,48,.45);padding:20px;overflow:auto}
.card{background:var(--card);color:var(--card-text);border-radius:22px;padding:28px 30px;width:100%;max-width:820px;box-shadow:0 10px 0 rgba(0,0,0,.18)}
.card h1{font-family:var(--display);font-weight:400;font-size:58px;line-height:.95;margin:0 0 6px;color:var(--red);-webkit-text-stroke:2px var(--panel-solid);paint-order:stroke fill}
.card h2{font-family:var(--display);font-weight:400;font-size:36px;margin:0 0 6px}
.card > p{margin:0 0 20px;color:var(--card-muted);line-height:1.45}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.opt{position:relative;text-align:left;font-family:var(--body);font-size:15px;line-height:1.35;background:var(--opt-bg);color:var(--card-text);border:3px solid var(--opt-border);border-radius:18px;padding:16px;box-shadow:0 6px 0 var(--opt-border);display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:transform .12s}
.opt:hover:not(:disabled){transform:translateY(-3px)}
.opt:active:not(:disabled){transform:translateY(3px);box-shadow:0 2px 0 var(--opt-border)}
.opt:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.opt b{font-family:var(--display);font-weight:400;font-size:24px;line-height:1.05}
.opt span{color:var(--card-muted)}
.opt:disabled{cursor:not-allowed;opacity:.6;filter:grayscale(.6)}
.opt .num{font-family:var(--display);font-size:15px;color:var(--red)}
.opt .badge{align-self:flex-start;background:var(--panel-solid);color:#fff;font-weight:800;font-size:12px;padding:3px 9px;border-radius:999px;margin-top:4px}
.opt canvas{width:100%;height:auto;border-radius:12px;display:block;margin-bottom:6px}
.opt .meta{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:14px;color:var(--card-text);margin-top:auto;padding-top:6px;font-variant-numeric:tabular-nums}
.opt .meta em{font-style:normal;color:var(--red)}
.bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px;flex-wrap:wrap}
.bottom .grp{display:flex;gap:10px;flex-wrap:wrap}
.keysline{font-size:13px;color:var(--card-muted);font-weight:600}
kbd{font-family:var(--body);font-weight:800;background:var(--panel-solid);color:#fff;border-radius:6px;padding:2px 6px;font-size:12px;white-space:nowrap}
.btn{font-family:var(--display);font-size:20px;background:transparent;color:var(--card-text);border:3px solid var(--opt-border);border-radius:14px;padding:8px 20px;cursor:pointer}
.btn.primary{background:var(--accent);color:#1e2340;border-color:#c98f00;box-shadow:0 4px 0 #c98f00}
.btn:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.podcard{max-width:780px;padding:18px}
#podCv{width:100%;height:auto;display:block;border-radius:16px}
#podResults{opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;pointer-events:none;padding:6px 8px 0}
#podResults.show{opacity:1;transform:none;pointer-events:auto}
table{width:100%;border-collapse:collapse;margin:14px 0 0;font-variant-numeric:tabular-nums}
td{padding:7px 4px;font-weight:600}
tr+tr td{border-top:1px solid rgba(127,127,160,.25)}
td.p{font-family:var(--display);font-size:22px;width:34px}
td.t{text-align:right;font-weight:800}
td .fl{display:inline-block;margin-left:6px;font-size:11px;font-weight:800;background:#9b51e0;color:#fff;border-radius:999px;padding:2px 7px;vertical-align:1px}
.sw{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:8px;vertical-align:-2px}
tr.me td{color:var(--red)}
.fp{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.toks{display:flex;gap:5px}
.toks i{width:14px;height:14px;border-radius:50%;background:var(--green);box-shadow:inset 0 -2px 0 rgba(0,0,0,.25)}
.toks i.off{background:#3a3f63}
.regen{height:4px;background:#3a3f63;border-radius:4px;margin-top:6px;overflow:hidden}
.regen b{display:block;height:100%;width:0;background:var(--green)}
.pill.ghost{background:#9b51e0}.pill.pen{background:var(--red)}
#toasts{display:flex;flex-direction:column;gap:6px;align-items:center;pointer-events:none;z-index:2}
.toast{background:var(--panel-solid);color:#fff;font-weight:800;padding:7px 14px;border-radius:999px;font-size:15px;border:2px solid var(--red);white-space:normal;text-align:center;animation:tin .2s ease-out}
.toast.info{border-color:#9b51e0}.toast.ok{border-color:var(--green)}
@keyframes tin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.rules{margin:0 0 6px;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.rules li{background:var(--opt-bg);border:3px solid var(--opt-border);border-radius:16px;padding:12px 14px;line-height:1.4;color:var(--card-muted)}
.rules li b{display:block;font-family:var(--display);font-weight:400;font-size:20px;color:var(--card-text);margin-bottom:2px}
th{font-size:12px;color:var(--card-muted);font-weight:800;text-align:left;padding:4px}
th.t{text-align:right}
.clean{color:#1f9d55;font-weight:800}
@media (max-width:720px){ .rules{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ .toast{animation:none} }
#startHint{background:var(--panel-solid);border:3px solid #38bdf8;border-radius:16px;padding:10px 18px;text-align:center;max-width:92vw;width:100%}
#startHint b{display:block;font-family:var(--display);font-weight:400;font-size:24px;color:#7dd3fc}
#startHint span{display:block;font-size:14px;color:var(--muted);font-weight:600;margin-top:2px}
#pitGame.preview{border-color:#6b7199}
#pitGame.preview .pg-bar{opacity:.55}
#pitGame.armed{animation:pgPulse .5s ease-in-out infinite alternate}
@keyframes pgPulse{from{box-shadow:0 0 0 0 rgba(255,201,60,.0)}to{box-shadow:0 0 0 8px rgba(255,201,60,.45)}}
@media (prefers-reduced-motion:reduce){ #pitGame.armed{animation:none} }
/* ---------- comandi touch ---------- */
#steerZone{position:fixed;left:0;top:calc(env(safe-area-inset-top,0px) + 52px);bottom:0;width:50vw;z-index:3;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#steerVis{position:absolute;width:150px;height:44px;margin:-22px 0 0 -75px;border-radius:999px;background:rgba(30,35,64,.35);border:3px solid rgba(255,255,255,.4);pointer-events:none}
#steerVis i{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.88);border:3px solid #0d1022;box-shadow:0 3px 0 rgba(0,0,0,.3)}
#steerVis span{position:absolute;left:50%;top:-26px;transform:translateX(-50%);white-space:nowrap;font-size:12px;font-weight:800;color:#fff;text-shadow:0 1px 2px #000;display:none}
#steerVis.idle{opacity:.5}
#steerVis.idle span{display:block}
#pitGame{z-index:5}
#touch{position:fixed;inset:0;pointer-events:none;z-index:4}
#touch button,#mIcons button{pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;padding:0;display:grid;place-items:center;color:#fff;font:inherit}
.tc-left{position:absolute;left:calc(env(safe-area-inset-left,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);display:flex;gap:10px}
.tc-right{position:absolute;right:calc(env(safe-area-inset-right,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 12px);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.tc-aux{display:flex;gap:10px}
.tc-pedals{display:flex;gap:10px;align-items:flex-end}
#touch .tc-steer{width:72px;height:72px;border-radius:50%;border:3px solid rgba(13,16,34,.8);background:rgba(30,35,64,.4)}
#touch .tc-steer svg{width:34px;height:34px;fill:#fff}
#touch .tc-ico{width:48px;height:48px;border-radius:50%;border:3px solid rgba(13,16,34,.8);background:rgba(30,35,64,.4)}
#touch .tc-ico svg{width:24px;height:24px;fill:#fff}
#touch .tc-ot{opacity:.3}
#touch .tc-ot.ready{opacity:1;background:rgba(56,189,248,.75)}
#touch .tc-ot.on{opacity:1;background:rgba(56,189,248,.95);box-shadow:0 0 0 6px rgba(56,189,248,.45)}
#touch .tc-pedal{background:none;border:0}
#touch .tc-pedal svg{display:block;filter:drop-shadow(0 3px 0 rgba(0,0,0,.35))}
#touch .gas svg{width:54px;height:94px}
#touch .brake svg{width:76px;height:56px}
#touch button.down{transform:scale(.92)}
#touch .tc-steer.down,#touch .tc-ico.down{background:rgba(255,255,255,.4)}
#touch .tc-pedal.down svg{filter:brightness(.8)}
#mhud{position:fixed;top:0;left:0;right:0;z-index:4;display:flex;align-items:center;justify-content:space-between;--fx:0px;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 6px) calc(env(safe-area-inset-right,0px) + 10px) 6px calc(env(safe-area-inset-left,0px) + 10px);background:linear-gradient(rgba(18,21,42,.75),rgba(18,21,42,0));pointer-events:none;font-variant-numeric:tabular-nums}
#mhud .m-l{display:flex;align-items:center;gap:10px;font-weight:800;font-size:13px}
#mhud #mPos{font-family:var(--display);font-size:22px;line-height:1}
#mhud #mLap.bad{color:#ff8a80}
#mhud .toks i{width:10px;height:10px}
#mhud .m-c{display:flex;flex-direction:column;align-items:center;line-height:1.15}
#mhud #mTime{font-family:var(--display);font-size:18px}
#mhud #mSub{font-size:11px;color:var(--muted);font-weight:800}
#mIcons{position:fixed;z-index:4;bottom:calc(env(safe-area-inset-bottom,0px) + 14px);left:calc(50vw + 14px);display:flex;gap:10px}
#mIcons button{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(30,35,64,.55)}
#mIcons svg{width:20px;height:20px;fill:#fff}
#rotateHint{background:#9b51e0;color:#fff;font-weight:800;padding:6px 12px;border-radius:12px;font-size:13px;text-align:center}
body.touch #hud .panel, body.touch #help{display:none!important}
body.touch #stack{top:calc(env(safe-area-inset-top,0px) + 54px);width:min(440px,calc(100vw - 24px));min-width:0;gap:6px}
body.touch #msg{font-size:clamp(26px,6vw,40px)}
body.touch .toast{font-size:13px;padding:5px 11px}
body.touch #startHint{padding:6px 12px}
body.touch #startHint b{font-size:16px}
body.touch #startHint span{font-size:11px}
body.touch #lights{padding:6px 10px;gap:7px}
body.touch #lights span{width:22px;height:22px}
body.touch #warn, body.touch #pitHint{font-size:13px;padding:5px 12px}
body.touch #pitGame{bottom:calc(env(safe-area-inset-bottom,0px) + 14px);width:calc(100vw - 2*(196px + env(safe-area-inset-left,0px)));min-width:220px;max-width:400px;padding:8px 10px}
body.touch #pitGame .pg-t{font-size:16px;margin-bottom:6px}
body.touch #pitGame .pg-h{display:none}
body.touch #pgRes{font-size:16px;min-height:20px;margin-top:4px}
#mhud .m-c{position:absolute;left:50%;transform:translateX(-50%);bottom:6px}
body.touch #startHint span{display:none}
body.touch #startHint b{font-size:14px}
body.framed #mhud{padding-top:calc(env(safe-area-inset-top,0px) + 30px)}
body.framed.touch #stack{top:calc(env(safe-area-inset-top,0px) + 82px)}
body.framed #steerZone{top:calc(env(safe-area-inset-top,0px) + 80px)}
body.touch #mhud,body.touch #touch .tc-right,body.touch #mIcons,body.touch #stack,body.touch #pitGame,body.touch #steerVis,body.touch .overlay .card{zoom:var(--ui,1)}
body.touch #pitGame{bottom:calc(env(safe-area-inset-bottom,0px) + 66px)}
@media (orientation:portrait){
  #mIcons{left:auto;right:calc(env(safe-area-inset-right,0px) + 12px);bottom:calc(env(safe-area-inset-bottom,0px) + 186px)}
  body.touch #pitGame{bottom:calc(env(safe-area-inset-bottom,0px) + 240px);width:88vw}
  #touch .tc-steer{width:64px;height:64px}
  #mhud .m-l{gap:6px} #mhud #mPos{font-size:18px} #mhud .toks{display:none}
}
body.touch .card{padding:18px}
body.touch .opt canvas{max-height:110px;object-fit:contain}
@media (max-height:500px){ .card h1{font-size:40px} .card h2{font-size:28px} .card > p{margin-bottom:12px} }

#pitHint{background:#1f6f43;color:#fff;font-weight:800;padding:8px 16px;border-radius:999px;font-size:17px;border:2px solid #fff}
#pitHint.urgent{background:var(--red)}
#pitGame{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 70px);transform:translateX(-50%);background:var(--panel-solid);border:3px solid var(--accent);border-radius:18px;padding:14px 18px;width:min(440px,92vw);text-align:center;cursor:pointer;user-select:none;-webkit-user-select:none}
#pitGame .pg-t{font-family:var(--display);font-size:24px;margin-bottom:10px}
.pg-bar{position:relative;height:30px;border-radius:10px;border:3px solid #0d1022;background:linear-gradient(90deg,#e8443a 0 32%,#ffc93c 32% 45%,#4ade80 45% 55%,#ffc93c 55% 68%,#e8443a 68% 100%)}
.pg-bar i{position:absolute;top:-8px;bottom:-8px;width:6px;margin-left:-3px;background:#fff;border:2px solid #0d1022;border-radius:4px;left:0}
#pitGame .pg-h{font-size:13px;color:var(--muted);margin-top:10px;font-weight:600}
#pgRes{font-family:var(--display);font-size:22px;margin-top:8px;min-height:26px}
.ot-ready{color:#7dd3fc}.ot-on{color:#38bdf8}
.pg-perfect{color:var(--green)}.pg-close{color:var(--accent)}.pg-far{color:#ff8a80}
td small{display:block;font-size:11px;color:var(--red);font-weight:800}
@media (max-width:720px){ .grid3{grid-template-columns:1fr} .card h1{font-size:44px} .tr{min-width:160px} .big{font-size:30px} #spd{font-size:40px} #help{display:none} .bl canvas{width:110px;height:110px} }
@media (prefers-reduced-motion:reduce){ #msg,.opt,#podResults{transition:none} }