:root { --slag-ink:#e9f3f5; --slag-dim:#9eb2bd; --slag-cyan:#82e2ef; --slag-amber:#ffad6c; }
body { font-family:"Segoe UI",Arial,sans-serif; color:var(--slag-ink); background:#080e15; }
#c { position:fixed; inset:0; width:100%; height:100%; touch-action:none; }
button { touch-action:manipulation; }
button:focus-visible,a:focus-visible { outline:2px solid var(--slag-cyan); outline-offset:3px; }
[hidden] { display:none !important; }
.slag-vignette { position:fixed; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at 50% 44%,transparent 38%,#02070b77 100%); }
.slag-flash { position:fixed; inset:0; z-index:3; pointer-events:none; background:#ff6a36; opacity:0; transition:opacity .14s; }
.slag-title { position:fixed; top:22px; left:26px; z-index:4; padding-left:13px; border-left:2px solid var(--slag-cyan); pointer-events:none; text-shadow:0 2px 12px #000; }
.slag-eyebrow { display:block; color:#a6bbc6; font:600 10px Consolas,monospace; letter-spacing:1.7px; }
.slag-live { display:inline-block; width:6px; height:6px; margin:0 6px 1px 0; background:var(--slag-cyan); box-shadow:0 0 8px var(--slag-cyan); }
.slag-title h1 { margin:6px 0 4px; font-size:28px; font-weight:750; letter-spacing:4px; }
.slag-title h1 small { color:#8ba3b0; font-size:11px; letter-spacing:2px; font-weight:500; }
.slag-title p { color:#b8cbd2; font:11px Consolas,monospace; letter-spacing:.6px; }
.slag-status { position:fixed; top:20px; right:24px; z-index:4; width:246px; padding:12px 15px; border-top:2px solid var(--slag-cyan); background:#07151fd9; box-shadow:0 12px 30px #0007; font-family:Consolas,monospace; }
.slag-status-head,.slag-progress,.slag-best { display:flex; justify-content:space-between; gap:10px; align-items:center; color:#96adba; font-size:10px; letter-spacing:.8px; }
.slag-status-head strong { color:#f0fbfb; font-size:19px; letter-spacing:0; }
.slag-score { display:flex; justify-content:space-between; align-items:baseline; margin:9px 0 6px; }
.slag-score small { font-size:9px; color:#8ca8b5; letter-spacing:1px; }
.slag-score strong { color:#fff; font-size:26px; }
.slag-progress { font-size:9px; color:#b7d4df; }
.slag-track { height:5px; overflow:hidden; background:#5b819442; }
.slag-track i { display:block; width:0; height:100%; background:var(--slag-cyan); box-shadow:0 0 8px #82e2ef91; transition:width .12s linear; }
.slag-status>.slag-track { margin:8px 0; }
.slag-best { border-top:1px solid #799bab3a; padding-top:7px; font-size:8px; }
.slag-best b { color:#e7f5f6; font-weight:400; }
.slag-callout { position:fixed; z-index:5; left:50%; top:22%; transform:translateX(-50%); color:#fff0dc; text-shadow:0 2px 12px #000,0 0 18px #ff8a4499; font:700 16px Consolas,monospace; letter-spacing:2px; white-space:nowrap; text-align:center; opacity:0; transition:opacity .15s; pointer-events:none; }
.slag-callout.visible { opacity:1; }
.slag-drive { position:fixed; z-index:4; left:26px; bottom:52px; width:259px; padding:9px 13px 10px; display:grid; grid-template-columns:1fr auto; column-gap:12px; border-left:2px solid var(--slag-amber); background:#081924db; font-family:Consolas,monospace; pointer-events:none; }
.slag-speed { display:flex; align-items:baseline; gap:5px; }
.slag-speed strong { font-size:39px; line-height:1; color:#fff; }
.slag-speed small { font-size:9px; color:#a7c2c9; }
.slag-drive-right { display:flex; flex-direction:column; align-items:flex-end; justify-content:center; gap:5px; font-size:9px; color:#a9c4ce; white-space:nowrap; }
.slag-drive-right #chain { color:var(--slag-amber); }
.slag-slip { display:flex; grid-column:1/-1; align-items:center; gap:8px; margin-top:7px; color:#86aebc; font-size:9px; }
.slag-slip .slag-track { flex:1; }
.slag-slip .slag-track i { background:var(--slag-amber); box-shadow:0 0 8px #ffad6c88; }
.slag-slip b { width:30px; color:#d9edf1; font-weight:400; text-align:right; }
.slag-nav { position:fixed; z-index:7; right:23px; bottom:16px; display:flex; gap:16px; align-items:center; }
.slag-nav a,.slag-nav button { border:0; padding:3px; background:transparent; color:#abc3cc; font:10px Consolas,monospace; text-decoration:none; letter-spacing:.8px; }
.slag-nav a:hover,.slag-nav button:hover { color:#fff; }
.slag-touch { display:none; position:fixed; z-index:6; left:0; right:0; bottom:34px; height:150px; pointer-events:none; }
.slag-steer-pad { position:absolute; left:18px; bottom:12px; width:142px; height:102px; border:1px solid #8bd7e5b5; border-radius:55px; background:#10242eaa; box-shadow:inset 0 0 23px #8bd7e52a; pointer-events:auto; touch-action:none; }
.slag-steer-pad>span { position:absolute; top:8px; left:50%; transform:translateX(-50%); color:#a7dae1; font:9px Consolas,monospace; letter-spacing:1px; }
.slag-steer-pad>small { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); color:#6daabc; font:9px Consolas,monospace; }
.slag-steer-pad i { position:absolute; left:52px; top:36px; display:block; width:38px; height:30px; border:1px solid #c4f7ff; border-radius:45%; background:#7acbddad; box-shadow:0 0 14px #69dce887; pointer-events:none; }
.slag-touch button { position:absolute; pointer-events:auto; touch-action:none; font:700 11px Consolas,monospace; letter-spacing:1px; color:#fff3e8; }
.slag-touch button.active { filter:brightness(1.4); transform:scale(.96); }
.slag-touch-gas { right:18px; bottom:7px; width:91px; height:91px; border-radius:50%; border:1px solid #ffbf8b; background:#bc6834bd; box-shadow:0 0 17px #ff985155,inset 0 0 23px #ff985155; }
.slag-touch-brake { right:117px; bottom:12px; width:65px; height:65px; border-radius:50%; border:1px solid #8dcbd7; background:#265266bb; }
.slag-touch-handbrake { right:56px; bottom:105px; width:70px; height:47px; border-radius:10px; border:1px solid #f3ac79; background:#7e4429c9; }
.overlay { z-index:8; align-items:end; padding:0 18px 57px; background:linear-gradient(0deg,#030a13eb 0%,#030a139a 38%,#030a1322 78%); }
.overlay.hidden { display:none; }
.slag-card { width:min(540px,100%); max-width:none; padding:24px 29px 23px; background:#091722e8; border:1px solid #96b9c944; border-top:2px solid var(--slag-amber); text-align:center; box-shadow:0 16px 54px #0009; }
.slag-card h2 { color:#f0f6f5; font-size:25px; letter-spacing:3px; margin:7px 0 9px; line-height:1.15; }
.slag-card p { color:#adc4ce; font:13px/1.55 "Segoe UI",Arial,sans-serif; margin:0 auto 16px; max-width:460px; }
.slag-card button,.slag-help-card button { border:1px solid #ffc28e; background:#b96d3b; color:#fff3e8; padding:11px 26px; font:700 11px Consolas,monospace; letter-spacing:1px; }
.slag-card button:disabled { opacity:.55; cursor:wait; }
.slag-brief-foot { margin-top:14px; color:#87a9b5; font:9px Consolas,monospace; letter-spacing:.7px; line-height:1.7; }
.slag-help { position:fixed; inset:0; z-index:9; display:grid; place-items:center; padding:18px; background:#030a13d9; }
.slag-help-card { width:min(590px,100%); max-height:calc(100vh - 36px); overflow:auto; padding:24px 28px; background:#0b1b27f7; border:1px solid #79aec0; border-top:2px solid var(--slag-cyan); box-shadow:0 16px 60px #000a; }
.slag-help-card h2 { font-size:21px; letter-spacing:2px; margin:8px 0 17px; }
.slag-help-card p { color:#b9d0d8; font:12px/1.55 "Segoe UI",Arial,sans-serif; margin:10px 0; }
.slag-help-card kbd { color:#e4faff; font:11px Consolas,monospace; background:#548ba12e; border:1px solid #82e2ef5b; padding:2px 5px; }
.slag-help-card button { margin-top:12px; background:#20536a; border-color:var(--slag-cyan); }
@media (pointer:coarse) { .slag-touch { display:block; } }
body.touch-active .slag-touch { display:block; }
@media (max-width:700px) {
  .slag-title { top:13px; left:12px; max-width:45vw; padding-left:8px; }
  .slag-eyebrow { font-size:8px; letter-spacing:.6px; }
  .slag-title h1 { font-size:21px; letter-spacing:2px; }
  .slag-title h1 small { display:block; font-size:8px; margin-top:3px; letter-spacing:1px; }
  .slag-title p { display:none; }
  .slag-status { top:10px; right:9px; width:158px; padding:8px 10px; }
  .slag-status-head { font-size:8px; }
  .slag-status-head strong { font-size:14px; }
  .slag-score { margin:5px 0; }
  .slag-score small { font-size:8px; }
  .slag-score strong { font-size:20px; }
  .slag-progress { font-size:7px; }
  .slag-best { font-size:7px; }
  .slag-drive { left:10px; top:102px; bottom:auto; width:174px; padding:6px 8px; }
  .slag-speed strong { font-size:26px; }
  .slag-speed small,.slag-drive-right,.slag-slip { font-size:7px; }
  .slag-slip { gap:4px; }
  .slag-nav { left:0; right:0; bottom:5px; justify-content:center; gap:9px; }
  .slag-nav a,.slag-nav button { font-size:8px; }
  .slag-callout { top:27%; font-size:12px; max-width:94vw; white-space:normal; }
  .overlay { padding:0 11px 35px; }
  .slag-card { padding:18px 17px; }
  .slag-card h2 { font-size:20px; }
  .slag-card p { font-size:12px; }
  .slag-brief-foot { font-size:8px; }
}
@media (max-height:540px) and (pointer:coarse) { .slag-touch { transform:scale(.8); transform-origin:bottom; bottom:22px; } .slag-drive { top:84px; } }
@media (prefers-reduced-motion:reduce) { .slag-track i,.slag-callout,.slag-flash { transition:none; } }