:root {
  color-scheme: dark;
  --bg:#101413; --panel:#18201b; --line:#344137; --ink:#eef3e8; --muted:#a6b3a7;
  --lime:#c6f78b; --gold:#ffc87c; --purple:#cbb4fa;
  --mono:"Cascadia Code","SFMono-Regular",Consolas,monospace;
  --sans:"Yu Gothic UI","Hiragino Kaku Gothic ProN",sans-serif;
}
* { box-sizing:border-box }
body { margin:0; background:var(--bg); color:var(--ink); font:14px var(--sans) }
button,a,summary { -webkit-tap-highlight-color:transparent }
button { font:inherit; color:inherit; cursor:pointer; border:1px solid var(--line); background:var(--panel); min-height:40px }
button:disabled { cursor:default; color:var(--muted) }
a { color:inherit; text-decoration:none }
button:focus-visible,a:focus-visible,summary:focus-visible,canvas:focus-visible { outline:2px solid var(--gold); outline-offset:3px }
[hidden] { display:none!important }
.shell { max-width:1100px; margin:auto; padding:0 28px }
.masthead { display:flex; align-items:center; min-height:50px; border-bottom:1px solid var(--line); gap:16px }
.brand { font-size:11px; letter-spacing:.05em }
.brand span { color:var(--muted) }
.intro { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:18px 0 }
h1 { font:700 37px/1 var(--mono); letter-spacing:-.07em; margin:0 }
h1>span,.ending h2>span { color:var(--lime) }
.intro p { font:9px var(--mono); letter-spacing:.12em; color:var(--lime); margin:9px 0 0 }
.intro p span { color:var(--muted); letter-spacing:0; margin-left:14px }
.session { display:grid; grid-template-columns:1fr 1fr; gap:7px 20px; font:9px var(--mono); color:var(--muted) }
.session b { color:var(--ink); font-size:12px; margin-left:8px; font-weight:400; font-variant-numeric:tabular-nums }
.session>div { grid-column:1/-1; display:flex; gap:12px }
.session button { border:0; border-bottom:1px solid var(--line); background:none; font-size:10px; padding:0 2px; min-height:30px }
.game-layout { display:grid; grid-template-columns:minmax(0,1fr) 282px; gap:28px; align-items:start }
.tutorial { margin:0 0 20px; padding:18px 20px; border:1px solid #66834d; background:#1a251c; border-radius:4px }
.tutorial-heading { display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--lime); font-size:12px }
.tutorial-heading>div { display:flex; align-items:center; gap:16px }
.tutorial-heading a { text-decoration:underline; text-underline-offset:3px }
.tutorial-heading button { min-height:36px; padding:4px 10px; background:none; color:var(--muted); font-size:12px }
.tutorial-body { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:center }
.tutorial h2 { margin:12px 0 8px; font-size:19px; line-height:1.5 }
.tutorial p { font-size:13px; line-height:1.85; margin:6px 0; max-width:780px }
#tutorial-feedback { color:var(--lime); min-height:1.85em }
#tutorial-action { min-height:48px; padding:12px 18px; color:#14200d; background:var(--lime); border-color:var(--lime); font-weight:700; max-width:240px }
#tutorial-action.locate { color:var(--lime); background:none; font-weight:400 }
.tutorial-focus { outline:3px solid var(--lime)!important; outline-offset:5px; box-shadow:0 0 0 8px #c6f78b26!important; scroll-margin:24px; animation:tutorial-pulse 1.5s ease-in-out infinite }
:is(button, select, a, summary)[inert], [inert] :is(button, select, a, summary) { opacity:.45; cursor:default }
@keyframes tutorial-pulse { 0%,100%{outline-offset:4px;filter:drop-shadow(0 0 2px #c6f78b44)} 50%{outline-offset:9px;filter:drop-shadow(0 0 9px #c6f78baa)} }
.tutorial-callout { position:fixed; z-index:20; width:max-content; max-width:min(340px,calc(100vw - 24px)); padding:12px 16px; border:1px solid var(--lime); border-radius:6px; background:var(--panel); box-shadow:0 8px 28px #0007; pointer-events:none }
.tutorial-callout::before { content:""; position:absolute; top:-7px; left:calc(var(--arrow-left,50%) - 6px); width:12px; height:12px; background:var(--panel); border-top:1px solid var(--lime); border-left:1px solid var(--lime); transform:rotate(45deg) }
.tutorial-callout.above::before { top:auto; bottom:-7px; transform:rotate(225deg) }
.tutorial-callout span { display:block; color:var(--lime); font-size:11px; line-height:1.6 }
.tutorial-callout p { margin:6px 0 0; color:var(--ink); font-size:13px; line-height:1.8 }
.telemetry { grid-auto-flow:column }
.how-to h2 { font-size:18px; margin-top:24px }
.how-to h3 { font-size:15px; margin:24px 0 8px; color:var(--ink) }
.how-to li { font-size:13px; line-height:1.9; margin-bottom:8px; color:var(--muted); max-width:780px }
.how-to b { color:var(--ink) }
.field-section { min-width:0 }
.telemetry { display:grid; grid-template-columns:1fr 1fr; gap:12px; border-top:1px solid var(--line); padding:12px 0 }
.telemetry>div { min-width:0 }
.telemetry span { display:block; font:9px var(--mono); color:var(--muted); letter-spacing:.07em; margin-bottom:5px }
.telemetry strong { font:32px var(--mono); letter-spacing:-.04em; font-variant-numeric:tabular-nums }
.telemetry>div:first-child strong { color:var(--lime) }
.telemetry small,.telemetry em { font:10px var(--mono); margin-left:4px; color:var(--muted) }
.meter { height:2px; background:var(--line) }
.meter i { display:block; height:100%; background:var(--lime); width:0; transition:width .15s }
.objective { display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 8px; min-height:64px; padding:10px 0 }
.objective>span { font:9px var(--mono); letter-spacing:.09em; color:var(--gold) }
.objective b { grid-column:1; font-size:11px; font-weight:400 }
.objective button { grid-column:2; grid-row:1/3; font-size:10px; padding:0 10px; color:var(--gold); border-color:#735938 }
.field-wrap { position:relative; aspect-ratio:1; border:1px solid #4d634b; background:#090e0c; isolation:isolate }
canvas { position:absolute; inset:0; display:block; width:100%; height:100%; touch-action:none; cursor:crosshair }
.seed-label { position:absolute; top:calc(50% + 12px); left:50%; transform:translateX(-50%); text-align:center; font:10px/1.9 var(--mono); color:var(--lime); pointer-events:none; white-space:nowrap }
.seed-label span { color:var(--muted); font:10px var(--sans) }
.field-bottom { min-height:35px; display:flex; justify-content:space-between; align-items:start; gap:8px; padding:8px 0; font-size:11px; color:var(--muted) }
#phase { font:9px var(--mono); flex-shrink:0; padding-top:3px; color:var(--lime) }
.controls { display:flex; gap:8px; align-items:stretch }
.modes { display:flex; flex:1; gap:4px }
.modes button { flex:1; padding:7px 6px; text-align:left }
.modes button[aria-pressed=true] { color:var(--lime); border-color:var(--lime); background:#233120 }
.modes b { display:block; font:11px var(--mono) }
.modes small { display:block; font-size:9px; margin-top:5px; color:var(--muted) }
.overdrive { flex:1; position:relative; overflow:hidden; min-width:132px; text-align:left; padding:7px 10px; isolation:isolate }
.overdrive span { font:11px var(--mono) }
.overdrive small { display:block; font-size:9px; margin-top:5px }
.overdrive i { position:absolute; inset:0; z-index:-1; background:#564424; transform:scaleX(0); transform-origin:left }
.overdrive.ready { color:var(--gold); border-color:var(--gold); box-shadow:0 0 18px #ffca7320 }
.stop { font-size:10px; padding:0 8px }
.input-note { font-size:10px; color:var(--muted); margin:9px 0 }
.sidebar { padding-top:1px }
.panel-heading { display:flex; justify-content:space-between; align-items:center; height:28px; border-bottom:1px solid var(--line) }
.panel-heading h2 { font:12px var(--mono); letter-spacing:.12em; margin:0 }
.panel-heading>span { font-size:10px; color:var(--muted) }
.panel-note { font-size:10px; color:var(--muted); line-height:1.8; margin:9px 0 12px }
.shop { display:grid; gap:7px }
.upgrade { width:100%; padding:11px; text-align:left; position:relative; overflow:hidden; isolation:isolate }
.upgrade::before { content:""; position:absolute; inset:0; z-index:-1; background:#263b24; transform:scaleX(var(--progress,0)); transform-origin:left }
.upgrade:not(:disabled):hover { border-color:var(--lime) }
.upgrade.affordable { border-color:#a1c979 }
.upgrade-head { display:flex; align-items:center; justify-content:space-between; gap:6px }
.upgrade-head b { display:inline-flex; align-items:center; gap:6px; font:12px var(--mono) }
.upgrade-icon { display:inline-grid; place-items:center; flex:0 0 20px; width:20px; height:20px; border:1px solid #cbb4fa55; color:var(--purple); font:15px/1 monospace }
.upgrade-head>span { font:10px var(--mono) }
.upgrade p { font-size:10px; margin:5px 0 9px; color:var(--muted) }
.upgrade strong { font-weight:400; color:var(--lime) }

.route { border-left:2px solid var(--line); padding-left:10px; margin-top:16px }
.route>span { font:9px var(--mono); color:var(--muted) }
.route p { font:10px/1.7 var(--mono); color:var(--lime); margin:5px 0 }
.run-stats { display:flex; flex-wrap:wrap; gap:5px 12px; font:9px var(--mono); color:var(--muted); margin-top:14px }
.how-to { border-block:1px solid var(--line); margin-top:24px; padding:15px 0 }
.how-to summary { font:11px var(--mono); min-height:24px; cursor:pointer }
.how-to summary span { font:10px var(--sans); color:var(--muted); margin-left:12px }
.how-to p { font-size:12px; color:var(--muted); line-height:1.9; max-width:800px }
.save-status { font-size:10px; color:var(--muted); margin:16px 0 28px }
footer { display:flex; justify-content:space-between; padding:18px 0; border-top:1px solid var(--line); color:var(--muted); font-size:10px }
.pause-cover { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:#101413ee }
.pause-cover p { font:11px var(--mono); color:var(--lime); letter-spacing:.12em }
.pause-cover h2 { font-size:24px; font-weight:400; margin:10px 0 24px }
.pause-cover button,.ending button,.reset-dialog button { color:#15210d; background:var(--lime); border-color:var(--lime); padding:12px 20px; min-height:44px }
.growth-flash { position:absolute; top:16px; left:0; right:0; text-align:center; color:var(--gold); font:700 19px var(--mono); letter-spacing:.05em; pointer-events:none; opacity:0; text-shadow:0 2px 10px #000 }
.growth-flash.show { animation:reward 1.8s both }


@keyframes reward { 0%{opacity:0;transform:scale(.9)} 12%,65%{opacity:1;transform:scale(1)} 100%{opacity:0;transform:translateY(-8px)} }
body.overdriving .field-wrap { border-color:var(--gold); box-shadow:0 0 28px #ffd48728 }
body.final-phase .field-wrap { border-color:var(--lime); box-shadow:0 0 28px #c6f78b30 }
.ending-wash { position:fixed; inset:0; z-index:10; background:var(--lime); pointer-events:none; animation:engulf 1s steps(10) both }
@keyframes engulf { from{clip-path:inset(50%)} to{clip-path:inset(0)} }
dialog { color:var(--ink); background:var(--bg); border:1px solid var(--line); padding:30px; max-width:calc(100vw - 32px) }
dialog::backdrop { background:#080e0bea }
.tutorial-choice { width:560px; max-height:90dvh; overflow:auto; border-radius:6px }
.tutorial-choice h2 { font-size:22px; line-height:1.5; margin:12px 0 }
.tutorial-choice p,.tutorial-choice li { font-size:14px; line-height:1.8; color:var(--muted) }
.tutorial-choice ul { padding-left:1.3em; margin:20px 0 }
.tutorial-choice li+li { margin-top:12px }
.tutorial-choice b { color:var(--ink) }
.tutorial-choice-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px }
.tutorial-choice-actions button { flex:1 1 200px; min-height:48px; padding:12px }
#tutorial-start { color:#15210d; background:var(--lime); border-color:var(--lime) }
@media(max-width:650px) { .tutorial-choice { padding:22px 18px }.tutorial-choice h2 { font-size:19px } }
.ending { width:540px; text-align:center; max-height:90dvh; overflow:auto }
.eyebrow { font:10px var(--mono); letter-spacing:.12em; color:var(--lime) }
.complete-percent { font:42px var(--mono); color:var(--lime); margin:22px 0 10px }
.complete-percent span { font-size:22px }
.ending h2 { font:28px var(--mono); letter-spacing:-.05em; margin:0 }
.ending>p { font-size:12px; color:var(--muted) }
.ending dl { display:grid; grid-template-columns:1fr 1fr; border-block:1px solid var(--line); margin:22px 0; padding:16px; gap:20px }
.ending dt { font:10px var(--mono); color:var(--muted); margin-bottom:6px }
.ending dd { font:20px var(--mono); margin:0 }
.ending button { display:block; width:100%; margin-top:12px }
.ending .subtle,#cancel-reset { color:var(--muted); background:none; border-color:var(--line) }
.ending .result-route { font:10px/1.8 var(--mono) }
.ending .result-best { color:var(--lime); font-family:var(--mono) }
.reset-dialog { width:430px }
.reset-dialog h2 { font-size:20px }
.reset-dialog p { color:var(--muted); font-size:12px; line-height:1.8 }
.reset-dialog>div { display:flex; gap:12px; margin-top:24px }
@media(min-width:900px) and (max-height:850px) {
  .shell { max-width:min(1100px,calc(100svh + 60px)) }
  .masthead { min-height:40px }
  .intro { padding:8px 0 }
  h1 { font-size:32px }
  .session button { min-height:24px }
  .telemetry { padding:8px 0 }
  .objective { min-height:48px; padding:6px 0 }
  .field-wrap { max-width:calc(100svh - 300px) }
}
@media(max-width:800px) { .shell{padding:0 18px} .game-layout{grid-template-columns:minmax(0,1fr) 240px;gap:18px} .intro p span{display:none} .controls{flex-wrap:wrap} .stop{min-height:32px} }
@media(max-width:650px) {
  .tutorial{padding:14px;margin-bottom:16px}.tutorial-heading{align-items:start;flex-direction:column;gap:6px}.tutorial-heading>div{justify-content:space-between;width:100%;gap:8px}.tutorial-body{grid-template-columns:1fr;gap:6px}.tutorial h2{font-size:18px}.tutorial p{font-size:13px}#tutorial-action{width:100%;max-width:none}
  .shell{padding:0 14px} .masthead{min-height:55px;flex-wrap:wrap;padding:9px 0;gap:6px}.brand{font-size:10px}
  .masthead .site-nav{font-size:10px;gap:16px} .intro{gap:10px;padding:14px 0} h1{font-size:31px}.intro p{font-size:8px}
  .session{gap:5px 8px;font-size:8px}.session b{font-size:10px;margin-left:3px}.session>div{gap:6px}.session button{font-size:9px}
  .game-layout{display:block}.telemetry{gap:8px;padding:10px 0}.telemetry span{font-size:8px;letter-spacing:0}.telemetry strong{font-size:18px}.telemetry small{font-size:8px}
  .objective{min-height:58px}.objective b{font-size:10px}.objective>span{font-size:8px}.objective button{font-size:9px;max-width:100px}
  .controls{gap:6px}.modes button{min-height:50px}.overdrive{min-width:125px;flex:1}.stop{width:100%;min-height:32px}
  .input-note{font-size:9px}.field-bottom{font-size:10px}.sidebar{margin-top:22px}.shop{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .upgrade{padding:9px 7px}.upgrade-head{display:block}.upgrade-head b{font-size:10px}.upgrade-head>span{display:block;margin-top:4px}.upgrade p{font-size:9px;min-height:27px}.upgrade strong{display:block;margin-top:7px}
  .how-to{margin-top:20px}.ending{padding:24px 18px}.ending h2{font-size:25px}
}
@media(max-width:370px) { .intro{align-items:start}.session>div{display:grid;grid-template-columns:1fr 1fr}.telemetry strong{font-size:16px}.telemetry small{display:block;margin:4px 0 0} .controls{display:grid;grid-template-columns:1fr}.stop{width:auto} }
body.low-motion *,body.low-motion *::before,body.low-motion *::after { animation:none!important; transition:none!important }
body.low-motion .growth-flash.show { opacity:1 }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after{animation:none!important;transition:none!important} .growth-flash.show{opacity:1} }

/* Keep the playfield and the next useful action in focus. */
.tutorial { padding:12px 16px; margin-bottom:14px }
.tutorial h2 { font-size:17px; margin:8px 0 4px }
.tutorial p { line-height:1.6 }
#tutorial-feedback:empty { display:none }
.tutorial.compact { border-color:var(--line); background:none; padding:6px 12px }
.tutorial.compact .tutorial-body { display:none }
.telemetry>div:last-child { text-align:right }
.session { display:block }
.shop { margin-top:10px }
.upgrade { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:5px 12px; min-height:84px; padding:14px }
.upgrade-head { grid-column:1; flex-wrap:wrap }
.upgrade p { grid-column:1; margin:0; font-size:11px; min-height:0 }
.upgrade>strong { grid-column:2; grid-row:1/3; align-self:center; font:14px var(--mono); white-space:normal }

.run-details { margin-top:20px; border-top:1px solid var(--line) }
.run-details p { font:10px/1.7 var(--mono); color:var(--muted) }
.run-stats { font-size:11px; gap:12px 18px; margin-top:8px }
.run-stats b { font-weight:400 }
.how-to { margin-top:0 }
@media(max-width:650px) {
  .tutorial-heading { flex-direction:row; align-items:center; flex-wrap:wrap }
  .tutorial-heading>div { width:auto; gap:12px }
  .tutorial p { font-size:12px }
  .tutorial.compact .tutorial-heading>span { display:none }
  .tutorial.compact .tutorial-heading>div { width:100%; justify-content:space-between }
  .telemetry strong { font-size:28px }
  .upgrade { display:block; padding:12px }
  .upgrade-head { display:flex }
  .upgrade-head>span { margin:0 }
  .upgrade p { margin:6px 0 }
  .upgrade>strong { display:block; font-size:15px; margin-top:8px }
  .sidebar { margin-top:14px }
}

.footer-ad{display:flex;justify-content:center;align-items:flex-start;min-width:0;margin:0 0 28px;overflow:hidden;text-align:center}
.footer-ad-content{flex:none;width:max-content;transform-origin:top center}

.stage-bar { display:flex; align-items:center; gap:20px; margin-bottom:16px; padding:14px 0; border-block:1px solid var(--line) }
.stage-bar label { display:block; font-size:11px; color:var(--muted); margin-bottom:6px }
.stage-bar select { max-width:100%; min-height:42px; border:1px solid var(--line); border-radius:4px; padding:8px 28px 8px 10px; background:var(--bg); color:var(--ink); font:inherit; font-size:14px; cursor:pointer; color-scheme:dark }
.stage-bar select:focus-visible { outline:2px solid var(--lime); outline-offset:3px }
#stage-count { color:var(--lime); font:11px var(--mono) }
#stage-description { margin:6px 0; font-size:13px }
.stage-bar small { font-size:10px; color:var(--muted) }
#seed-label { transform:translateX(-50%); max-width:150px }
.route-preview { min-height:2.8em; line-height:1.6; color:var(--gold) }
@media(max-width:650px) {
  .modes { flex-basis:100% }
  .modes small { font-size:11px }
  .controls .stop { width:auto; padding:0 14px }
}
@media(max-width:650px) { .stage-bar { display:block; padding:10px 0; margin-bottom:12px }.stage-bar>div+div { margin-top:10px }.stage-bar select { width:100% } }

.upgrade-card { min-width:0; border:1px solid var(--line) }
.upgrade-card .upgrade { border:0; min-height:68px; padding:10px }
.upgrade-card .upgrade.affordable { box-shadow:inset 3px 0 var(--lime) }
.upgrade>strong { font-size:12px; max-width:90px }
.pickup-aim { width:100%; min-height:32px; border:0; border-top:1px solid var(--line); color:var(--purple); font-size:11px; background:transparent }
.pickup-aim:disabled { color:var(--muted) }
.run-details summary { cursor:pointer; font-size:11px; color:var(--muted); padding:10px 0; min-height:40px }