:root {
  color-scheme: dark;
  --bg:#0d1120; --panel:#151e30; --surface:#1b293b; --cyan:#62efdc;
  --lime:#d4fa8a; --muted:#a7b7cb; --line:#3e5068; --white:#edf3f6;
  --red:#ff7f9c; --gold:#ffce77; --purple:#bc9aff; --focus:#d4fa8a;
  --text-small:.8125rem; --text-label:.875rem; --text-body:1rem;
  --text-subhead:1.25rem; --text-heading:2rem; --text-display:4rem;
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px; --space-8:32px;
}
* { box-sizing:border-box }
html { -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale }
body { margin:0; background:var(--bg); color:var(--white); font:400 var(--text-body)/1.5 Arial,Helvetica,sans-serif }
a { color:var(--cyan); text-underline-offset:3px }
button,a { -webkit-tap-highlight-color:transparent }
button { font:inherit; font-size:var(--text-label); cursor:pointer; border:1px solid var(--line); color:var(--white); background:var(--surface); padding:10px 16px; border-radius:6px; min-height:44px }
button:disabled { cursor:default; color:var(--muted); background:var(--panel) }
button small { display:block; color:var(--muted); font-size:var(--text-small); font-weight:400; line-height:1.5; margin-top:4px }
:focus-visible { outline:2px solid var(--focus); outline-offset:3px }
.primary { background:var(--lime); color:#1a3029; border-color:var(--lime); font-weight:700; padding:14px 20px }
.primary span { margin-inline-start:20px }
.selected { border-color:var(--cyan); background:#173b3d; color:var(--cyan) }
.selected small { color:#c1d9db }
@media(hover:hover) {
  button:not(:disabled):hover { background:#294153; border-color:var(--cyan) }
  .primary:not(:disabled):hover { background:#e4ffba; border-color:#e4ffba }
  .ledger-entry[href]:hover { background:#203345 }
}
@media(prefers-reduced-motion:no-preference) {
  button { transition:background 150ms cubic-bezier(.2,0,0,1),transform 150ms cubic-bezier(.2,0,0,1) }
  button:not(:disabled):active { transform:scale(.96) }
  .wheel-spokes { animation:spin 30s linear infinite }
  .ghost-art { animation:bob 3s ease-in-out infinite }
  .toast { transition:opacity 150ms }
  .meter i,.boss-meter i { transition:width 100ms }
}
.shell { max-width:1460px; margin:auto; padding-inline:32px }
header { min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:12px }
.brand { display:flex; gap:12px; align-items:center; text-decoration:none; color:var(--white); font-size:var(--text-subhead); font-weight:700; line-height:1.25 }
.brand small { display:block; font-size:var(--text-small); color:var(--muted); font-weight:400; margin-top:4px }
.brand-mark { color:var(--cyan); font:700 var(--text-heading)/1 monospace }
nav { display:flex; gap:8px; align-items:center }
nav button { background:transparent; border-color:transparent }
#pauseBtn { width:44px; padding:8px }
.help-icon { display:none }
.network { padding:12px 16px; background:var(--panel); border-radius:8px; display:grid; grid-template-columns:auto 1fr; align-items:center; gap:8px 24px }
.signal-heading { display:flex; align-items:center; gap:8px; font-size:var(--text-label) }
.signal-heading strong { font-weight:400 }
.signal-heading button { width:44px; font-size:var(--text-subhead); padding:4px; background:transparent; border-color:transparent }
.badge { font-size:var(--text-small); font-weight:700; padding:4px 8px; border-radius:4px }
.badge.live { color:var(--cyan); background:#173b3d }
.badge.simulated { color:var(--gold); background:#3a3022 }
.network-stats { display:flex; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; font-size:var(--text-small); color:var(--muted); font-variant-numeric:tabular-nums }
.network-stats b { color:var(--white); font-weight:700; margin-inline-start:4px }
.network p { grid-column:1/-1; font-size:var(--text-small); color:var(--muted); margin:0 }
.hud { display:flex; gap:24px; align-items:center; justify-content:space-between; padding-block:20px }
.hud strong { display:block; font-size:var(--text-body); margin-top:4px; font-variant-numeric:tabular-nums }
.contract small,.stat>span,.eyebrow { font-size:var(--text-small); color:var(--muted) }
.contract small { display:block; margin-top:4px }
#healthText { color:var(--red) }
#moneyText { color:var(--gold) }
.energy { width:190px }
.energy b { float:inline-end; color:var(--cyan) }
.meter,.boss-meter { height:6px; background:var(--line); margin-top:8px; border-radius:3px }
.meter i,.boss-meter i { display:block; background:var(--cyan); height:100%; width:100%; border-radius:inherit }
.energy small { font-size:var(--text-small); color:var(--muted); display:block; margin-top:4px }
.viewport { position:relative; width:100%; max-width:1180px; margin-inline:auto; background:#111e28; border-radius:8px; aspect-ratio:1000/720; isolation:isolate }
canvas { width:100%; height:100%; object-fit:contain; display:block; touch-action:none; border-radius:inherit }
.overlay { position:absolute; inset:0; z-index:5 }
.hidden { display:none!important }
body[data-screen=title] .viewport { aspect-ratio:auto; max-width:none }
body[data-screen=title] canvas { position:absolute; visibility:hidden }
body[data-screen=title] .hud,body[data-screen=title] .arena-top,body[data-screen=title] .objective,body[data-screen=title] .bottom-bar,body[data-screen=title] .touch-controls { display:none }
.title-screen { position:relative; background:#111e30; display:flex; align-items:center; padding:48px 6% 96px; min-height:590px; border-radius:inherit }
.title-copy { width:62%; z-index:2 }
h1 { font-size:var(--text-display); letter-spacing:-.04em; line-height:1.06; margin:0 0 24px; text-wrap:balance }
h1 i { color:var(--gold); font-style:normal }
.lead { font-size:var(--text-body); line-height:1.6; color:#c1d0de; max-width:47ch; text-wrap:pretty }
.mode-select { display:flex; gap:12px; margin-top:24px; flex-wrap:wrap }
.mode-select button { text-align:start; flex:1; min-width:min-content; max-width:235px; padding:12px }
.title-actions { display:flex; gap:12px; margin:20px 0 12px }
.title-hint { color:var(--muted); font-size:var(--text-small); max-width:55ch }
.best { font-size:var(--text-small); color:var(--lime); margin:20px 0 0; font-variant-numeric:tabular-nums }
.title-bottom { position:absolute; inset:auto 6% 0; padding-block:20px; display:flex; gap:16px; justify-content:space-between; font-size:var(--text-small); color:var(--muted) }
.title-art { position:absolute; right:0; width:38%; height:90%; top:3%; pointer-events:none }
.wheel-orbit { position:absolute; width:240px; height:240px; left:10%; top:13%; border:13px double #ffce7799; border-radius:50% }
.wheel-spokes { position:absolute; inset:10px; border:2px dashed #ffce7766; border-radius:50%; background:repeating-conic-gradient(from 0deg,transparent 0deg 43deg,#ffce7733 44deg 45deg) }
@keyframes spin { to { transform:rotate(360deg) } }
@keyframes bob { 50% { transform:translateY(-10px) } }
.hamster { position:absolute; top:80px; left:55px }
.art-work { position:absolute; top:4%; left:14%; text-align:center; font-size:var(--text-small); color:var(--gold) }
.art-work b { color:var(--muted); font-weight:400 }
.route-art { position:absolute; top:52%; left:10%; width:70%; height:25%; border:2px dashed var(--cyan); border-radius:60px; transform:rotate(-15deg) }
.route-art i { position:absolute; border:1px solid var(--cyan); border-radius:50%; font-size:var(--text-small); font-style:normal; padding:12px; background:#183237; color:var(--cyan); left:-12px; top:-10px }
.route-art i:nth-child(2) { left:80%; top:10% }
.route-art i:nth-child(3) { left:40%; top:75% }
.mouse-art { position:absolute; top:68%; left:58%; font-size:var(--text-display) }
.mouse-art small { display:block; font-size:var(--text-small); color:var(--lime); text-align:center }
.ghost-art { position:absolute; top:57%; left:23%; font-size:var(--text-heading); opacity:.4 }
.art-label { position:absolute; bottom:2%; left:13%; font-size:var(--text-small); color:var(--cyan) }
.modal { position:fixed; inset:0; background:#090e20ed; display:flex; justify-content:center; align-items:center; padding:24px; overflow-y:auto; overscroll-behavior:contain; z-index:20 }
#guide,#codex { z-index:21 }
.panel { max-width:520px; width:100%; max-height:calc(100dvh - 48px); overflow-y:auto; overscroll-behavior:contain; padding:32px; border-radius:12px; background:var(--panel) }
.panel h2 { font-size:var(--text-heading); letter-spacing:-.025em; line-height:1.1; margin:0 0 20px; text-wrap:balance }
.panel p { line-height:1.6; color:#c1d0de; margin-block:12px }
.panel>button { margin:16px 8px 0 0 }
.wide { max-width:860px }
.guide-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px }
.guide-grid b { color:var(--lime); font-size:var(--text-body) }
.guide-grid p { margin-top:8px; font-size:var(--text-label) }
.guide-note,.fine { font-size:var(--text-small); line-height:1.6; color:var(--muted); margin-top:24px }
.bottom-bar { display:flex; justify-content:space-between; gap:12px; align-items:center; font-size:var(--text-small); color:var(--muted); padding-block:16px; flex-wrap:wrap }
kbd { font:400 var(--text-small)/1.5 monospace; background:var(--surface); border:1px solid var(--line); padding:2px 4px; border-radius:3px; color:var(--white) }
footer { padding-block:24px; display:flex; gap:24px; justify-content:space-between; color:var(--muted); font-size:var(--text-small) }
footer span:last-child { text-align:end }
footer b { display:block; font-weight:400 }
.objective { position:absolute; bottom:12px; left:12px; right:12px; font-size:var(--text-label); line-height:1.5; color:var(--white); background:#101e2b; padding:12px; display:flex; align-items:center; gap:8px; pointer-events:none; border-radius:6px }
.dot { display:inline-block; width:6px; height:6px; flex-shrink:0; border-radius:50%; background:var(--cyan) }
.arena-top { position:absolute; top:12px; left:16px; right:16px; font-size:var(--text-small); color:var(--cyan); display:flex; gap:16px; justify-content:space-between; pointer-events:none }
.arena-top span:last-child { color:var(--muted); text-align:end }
.toast { position:absolute; left:50%; top:52px; transform:translateX(-50%); width:max-content; max-width:90%; padding:12px 16px; font-size:var(--text-label); line-height:1.5; background:#19393b; color:var(--lime); border-radius:6px; opacity:0; pointer-events:none; text-align:center; z-index:4 }
.toast.show { opacity:1 }
.surge-banner { position:absolute; top:130px; left:50%; transform:translateX(-50%); background:#362846; color:#e4d3ff; padding:12px 24px; border-radius:6px; font-size:var(--text-label); font-weight:700; text-align:center; pointer-events:none; z-index:3; width:max-content; max-width:90% }
.boss-hud { position:absolute; bottom:100px; width:60%; left:20%; font-size:var(--text-small); background:#2c1d38; padding:12px; border-radius:6px; color:var(--red); pointer-events:none }
.boss-hud span { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px }
.boss-hud b { color:var(--muted); font-weight:400 }
.boss-meter i { background:var(--red) }
.shop-panel { max-width:1000px }
.upgrade-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px }
.upgrade { padding:16px; text-align:start }
.upgrade b { display:block; color:var(--cyan); font-size:var(--text-body) }
.upgrade small { color:var(--muted); margin-block:8px }
.upgrade span { font-size:var(--text-small); color:var(--gold) }
.upgrade em { display:block; margin-top:8px; font-size:var(--text-small); color:var(--purple); font-style:normal }
.upgrade:disabled b { color:var(--muted) }
.shop-footer { display:flex; justify-content:space-between; align-items:center; margin-top:24px; gap:16px; color:var(--gold); flex-wrap:wrap }
.end-score { font-size:var(--text-heading); font-variant-numeric:tabular-nums; color:var(--gold); margin:20px 0 }
.leaderboard { font-size:var(--text-label); line-height:1.8; color:var(--muted) }
.summary-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px }
.summary-grid div { padding-block:8px; font-size:var(--text-small); color:var(--muted) }
.summary-grid b { display:block; font-size:var(--text-subhead); color:var(--cyan); margin-bottom:4px; font-variant-numeric:tabular-nums }
.touch-controls { display:none }
.touch-actions button,#joystick { touch-action:none; user-select:none }
.ledger-panel { margin-top:20px; padding:20px 0 }
.ledger-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px }
.ledger-heading h2 { font-size:var(--text-subhead); margin:0; display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.ledger-heading small { font-size:var(--text-small); color:var(--gold); font-weight:400 }
.ledger-heading>span { font-size:var(--text-small); color:var(--muted) }
.ledger-feed { display:flex; gap:12px; overflow-x:auto; padding:3px 3px 12px; margin-inline:-3px; scrollbar-color:#657b92 #121b2c }
.ledger-feed p { font-size:var(--text-label); color:var(--muted) }
.ledger-entry { flex:0 0 260px; background:var(--panel); padding:16px; text-decoration:none; border-radius:6px }
.ledger-entry strong { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; color:var(--white); font-size:var(--text-label); font-weight:400 }
.ledger-entry strong b { color:var(--cyan); font-weight:400 }
.ledger-entry span { display:block; font-size:var(--text-label); color:var(--muted); margin-top:8px }
.ledger-entry small { display:block; color:var(--purple); font-size:var(--text-small); margin-top:12px }
.ledger-note { display:flex; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; font-size:var(--text-small); color:var(--muted); padding-top:8px }
.panel-heading { display:flex; justify-content:space-between; align-items:start; gap:16px }
.codex-tabs { display:flex; gap:8px; margin-bottom:24px; flex-wrap:wrap }
.codex-content { display:grid; grid-template-columns:1fr 1fr; gap:24px }
.codex-card { padding-block:8px }
.codex-card h3 { font-size:var(--text-subhead); line-height:1.4; color:var(--gold); margin:0 0 8px }
.codex-card p { font-size:var(--text-label); margin:0 }
.codex-card small { display:block; font-size:var(--text-small); color:var(--muted); margin-top:12px }
.codex-card.earned h3 { color:var(--cyan) }
.skip-link { position:fixed; top:-100px; left:16px; z-index:50; padding:12px 16px; background:var(--lime); color:var(--bg); border-radius:6px }
.skip-link:focus { top:12px }
.noscript { margin:24px }
@media(max-width:1180px) {
  .network { grid-template-columns:minmax(0,1fr); gap:8px }
  .network-stats { justify-content:flex-start; gap:8px 24px }
  .hud { gap:16px }
  .title-art { width:35% }
  .wheel-orbit { width:190px; height:190px; left:0; top:18% }
  .hamster { top:64px; left:40px }
  .art-work { left:0 }
  .title-art .mouse-art { left:45% }
}
@media(max-width:900px) {
  .shell { padding-inline:20px }
  .brand { font-size:var(--text-body) }
  .brand-mark { font-size:var(--text-subhead) }
  .title-art { display:none }
  .title-copy { width:100% }
  .title-screen { min-height:550px }
  .stat.score { display:none }
  .upgrade-grid { grid-template-columns:1fr 1fr }
}
@media(pointer:coarse),(max-width:700px) {
  .touch-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-block:12px }
  #joystick { width:94px; height:94px; border-radius:50%; border:1px solid #6f929d; background:#183445; position:relative; flex-shrink:0 }
  #stick { position:absolute; width:38px; height:38px; border-radius:50%; background:#74b3b6; left:27px; top:27px; border:3px solid #9bddd3; pointer-events:none }
  #joystick span { position:absolute; bottom:4px; width:100%; text-align:center; font-size:var(--text-small); color:#c4d9df; pointer-events:none }
  .touch-actions { display:grid; grid-template-columns:repeat(2,minmax(58px,1fr)); gap:8px }
  .touch-actions button { border-radius:50%; height:58px; min-width:58px; font-size:var(--text-small); padding-inline:8px }
  #touchRecord { color:var(--cyan); border-color:var(--cyan); background:#173b3d; min-width:72px }
  #touchPurge { color:var(--purple) }
  .bottom-bar>span:first-child { display:none }
}
@media(max-width:700px) {
  :root { --text-display:2.5rem }
  .shell { padding-inline:12px }
  header { min-height:76px; gap:8px; flex-wrap:wrap }
  .brand { gap:8px; font-size:var(--text-label) }
  .brand small { font-size:var(--text-small) }
  nav { gap:0; margin-inline-start:auto }
  nav button { padding-inline:8px; font-size:var(--text-small) }
  #codexCount,.help-label { display:none }
  .help-icon { display:inline }
  #helpBtn { width:44px; padding-inline:8px }
  .network { padding:8px 12px 12px }
  .signal-heading { gap:8px; font-size:var(--text-small); flex-wrap:wrap }
  .signal-heading button { margin-inline-start:auto }
  .network-stats { gap:4px 12px }
  .hud { padding-block:12px; gap:8px 16px; flex-wrap:wrap }
  .hud .contract { flex-basis:100%; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap }
  .contract .eyebrow { display:none }
  .contract small { flex-basis:100%; margin:0 }
  .hud strong { font-size:var(--text-label); margin-top:0 }
  .energy { flex:1; min-width:110px }
  .energy small { display:none }
  .viewport { aspect-ratio:640/800 }
  .title-screen { padding:24px 20px 80px; min-height:0 }
  h1 { margin-bottom:16px }
  .lead { font-size:var(--text-label) }
  .mode-select { gap:8px; margin-top:20px }
  .mode-select button { font-size:var(--text-small); padding:10px }
  .title-actions { margin-top:16px; gap:8px }
  .title-actions button { padding:12px 14px }
  .title-actions .primary { flex:1 }
  .primary span { margin-inline-start:4px }
  .title-hint { margin-block:12px }
  .best { margin-top:16px }
  .title-bottom { inset-inline:20px; padding-block:16px; gap:8px; flex-wrap:wrap }
  .arena-top { font-size:var(--text-small); top:8px; left:10px; right:10px; gap:12px; line-height:1.4 }
  .arena-top span:last-child { max-width:115px }
  .objective { font-size:var(--text-small); left:8px; right:8px; bottom:8px; padding:8px }
  .toast { font-size:var(--text-small); width:90%; top:62px; padding:10px }
  .surge-banner { font-size:var(--text-small); width:90%; top:164px; padding:8px }
  .boss-hud { width:90%; left:5%; bottom:100px; padding:8px }
  .bottom-bar { padding-block:8px }
  .modal { padding:12px }
  .panel { padding:24px 20px; max-height:calc(100dvh - 24px) }
  .panel h2 { font-size:var(--text-heading) }
  .guide-grid,.codex-content { grid-template-columns:1fr }
  .upgrade-grid { gap:8px }
  .upgrade { padding:12px }
  .upgrade b { font-size:var(--text-label) }
  .summary-grid { grid-template-columns:repeat(2,1fr) }
  .ledger-panel { margin-top:12px }
  .ledger-heading>span { display:none }
  .ledger-entry { flex-basis:260px }
  footer { flex-wrap:wrap; gap:8px }
  footer span:last-child { text-align:start }
}
@media(max-width:359px) {
  .shell { padding-inline:8px }
  .brand-mark { display:none }
  .title-screen { padding-inline:16px }
  .title-actions { flex-wrap:wrap }
  .title-actions .primary { flex-basis:100% }
  .title-bottom { inset-inline:16px }
  .upgrade-grid { grid-template-columns:1fr }
}
@media(forced-colors:active) {
  :focus-visible { outline-color:Highlight }
  .badge,.primary,.selected { border:1px solid ButtonText }
}