:root{--bg:#0b1030;--fg:#f4f6ff;--muted:#b9c0e6;--acc:#35d0ff;--hot:#ffb04d;--card:rgba(14,16,44,.9)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;overflow:hidden;overscroll-behavior:none}
canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none;display:block}
[hidden]{display:none!important}
.panel{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(92vw,420px);max-height:88dvh;overflow:auto;padding:20px 20px 16px;border-radius:18px;background:var(--card);box-shadow:0 10px 40px rgba(0,0,0,.5);text-align:center;backdrop-filter:blur(6px)}
.panel.scroll{text-align:left}
h1{margin:0 0 6px;font-size:clamp(30px,9vw,44px);line-height:1;letter-spacing:.02em;text-transform:uppercase;font-weight:900}
h2{margin:0 0 4px;font-size:22px}h3{margin:14px 0 4px;font-size:15px;color:var(--hot)}
.lede{margin:6px 0 10px;color:var(--muted)}
.daily{margin:4px 0;font-size:14px;color:var(--muted)}.daily b{color:var(--fg)}
.stats,.note{margin:6px 0;font-size:14px;color:var(--muted)}
.privacy{margin:10px 0 0;font-size:12px;color:var(--muted)}
button,.big{font:inherit;color:var(--fg);cursor:pointer}
.big{display:block;width:100%;margin:10px 0 0;padding:14px;border:0;border-radius:14px;background:var(--acc);color:#04121a;font-weight:800;font-size:18px;text-decoration:none;text-align:center}
.big.alt{background:#fff}.big.ghost{background:transparent;color:var(--fg);border:2px solid rgba(255,255,255,.35)}
.big:active{transform:scale(.98)}
.link{background:none;border:0;color:var(--muted);text-decoration:underline;padding:8px;font-size:14px}
a.link{color:var(--muted)}
.row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:4px}
.row .big{flex:1 1 140px}
.seg{display:flex;gap:6px;margin:10px 0 0}
.seg button{flex:1;padding:10px;border-radius:12px;border:2px solid rgba(255,255,255,.3);background:transparent}
.seg button.on{background:rgba(53,208,255,.2);border-color:var(--acc)}
.seg small{color:var(--hot);font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.meters{margin:0;font-size:56px;line-height:1.1}.meters b{font-weight:900}
.strip{margin:6px 0;font-size:28px;letter-spacing:2px;word-break:break-all}
.sharetext{margin:8px 0;padding:10px;border-radius:10px;background:rgba(255,255,255,.07);font:13px/1.4 ui-monospace,monospace;white-space:pre-wrap;text-align:left;color:var(--muted)}
input[type=range]{width:100%;accent-color:var(--acc)}
:focus-visible{outline:3px solid var(--hot);outline-offset:2px}
#hud{position:fixed;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:calc(10px + env(safe-area-inset-top)) 14px 0;pointer-events:none}
.gauge{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:12px;background:rgba(6,8,28,.7)}
.gl{font-weight:800;font-size:12px;letter-spacing:.1em;color:var(--muted)}
.bar{width:clamp(90px,30vw,150px);height:14px;border-radius:7px;background:rgba(255,255,255,.15);overflow:hidden}
.bar i{display:block;height:100%;width:100%;background:#3ddc84;transform-origin:left}
#fuelnum{min-width:3.4em;text-align:right;font-variant-numeric:tabular-nums}
.dist{padding:4px 12px;border-radius:12px;background:rgba(6,8,28,.7);font-size:26px;font-variant-numeric:tabular-nums}
#hint{position:fixed;left:0;right:0;top:34%;text-align:center;font-size:clamp(20px,6vw,30px);font-weight:800;text-shadow:0 2px 12px #000;pointer-events:none;padding:0 20px}
#foot{position:fixed;left:0;right:0;bottom:calc(6px + env(safe-area-inset-bottom));text-align:center;font-size:11px;color:var(--muted);opacity:.85;pointer-events:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}.big:active{transform:none}}