/* Error Runner uses the website's established graphite/gold palette. */
.runner-page { padding:clamp(2rem,5vw,4rem) 0 4rem; }
.runner-page button { font:inherit; cursor:pointer; touch-action:manipulation; }
.runner-page button:focus-visible,.runner-page canvas:focus-visible,.runner-page a:focus-visible { outline:2px solid var(--color-brand-light); outline-offset:3px; }
.runner-intro { text-align:center; margin:0 auto 1.5rem; max-width:48rem; }
.runner-intro .eyebrow { color:var(--color-brand-light); font:700 .75rem var(--font-technical); letter-spacing:.12em; }
.runner-intro h1 { margin:.5rem 0; font-size:clamp(2rem,6vw,4rem); line-height:1.1; }
.runner-intro p { margin:.25rem 0; color:var(--color-text-soft); }
.runner-intro .runner-subtitle { margin-top:1rem; }
.runner-intro strong,.runner-intro .terminal-mark { color:var(--color-brand-light); }
.runner-page .arcade { width:min(100%,56.25rem); margin:0 auto; padding:0; }
.runner-page .terminal-top { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.85rem 1rem; border:1px solid var(--color-border); border-radius:var(--radius-medium) var(--radius-medium) 0 0; background:var(--color-surface-raised); color:var(--color-brand-light); font:700 .7rem var(--font-technical); }
.runner-page .dots { display:inline-flex; gap:.3rem; margin-right:.6rem; vertical-align:middle; }
.runner-page .dots i { display:block; width:.4rem; height:.4rem; border-radius:50%; background:var(--color-brand-muted); }
.runner-page .dots i:nth-child(2){background:#9d915d}.runner-page .dots i:nth-child(3){background:#6b9a7f}
.runner-page .version { color:var(--color-text-muted); font-size:.75rem; letter-spacing:.05em; }
.runner-page .panel { padding:1rem; border:1px solid var(--color-border); border-top:0; border-radius:0 0 var(--radius-medium) var(--radius-medium); background:var(--color-surface); }
.runner-page .hud { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:0 .2rem .75rem; }
.runner-page .hud-label { display:block; color:var(--color-text-muted); font:700 .75rem var(--font-technical); margin-bottom:.2rem; }
.runner-page .scoreline { color:var(--color-brand-light); font:700 1.8rem/1.1 var(--font-technical); font-variant-numeric:tabular-nums; }
.runner-page .scoreline small { color:var(--color-text-muted); font: .85rem var(--font-technical); }
.runner-page .hud-right { color:var(--color-text-soft); text-align:right; font: .8rem/1.65 var(--font-technical); }
.runner-page .hud-right b { color:var(--color-text); }
.runner-page .meter { height:.25rem; margin:0 .2rem .8rem; background:var(--color-border); border-radius:.2rem; overflow:hidden; }
.runner-page .meter span { display:block; height:100%; width:0; background:var(--color-brand-light); transition:width .2s; }
.runner-page .stage { position:relative; width:100%; height:19.5rem; overflow:hidden; border:1px solid #3a4346; border-radius:var(--radius-small); background:#101418; touch-action:manipulation; }
.runner-page .stage canvas { display:block; width:100%; height:100%; touch-action:manipulation; }
.runner-page .overlay { position:absolute; inset:0; z-index:2; display:grid; place-items:center; padding:1rem; background:#101418e8; }
.runner-page .overlay-inner { text-align:center; width:min(100%,24rem); }
.runner-page .overlay-cli { color:var(--color-brand-light); font:700 .75rem var(--font-technical); margin:0 0 .7rem; }
.runner-page .overlay h2 { margin:0 0 .7rem; font-size:clamp(1.3rem,3vw,2rem); }
.runner-page .overlay-description { margin:0 auto 1rem; color:var(--color-text-soft); font-size:.83rem; }
.runner-page .win-line { color:#a1dcb3; font:700 .75rem var(--font-technical); }
.runner-page .primary { min-height:3rem; min-width:11rem; padding:.7rem 1.5rem; border:1px solid var(--color-brand-light); border-radius:var(--radius-small); background:var(--color-brand); color:#181511; font:700 .9rem var(--font-technical); }
.runner-page .overlay-foot { color:var(--color-text-muted); font:.7rem var(--font-technical); }
.runner-page .controls { display:grid; grid-template-columns:1fr minmax(7rem,1.45fr) 1fr; gap:.55rem; max-width:38rem; margin:.8rem auto 0; }
.runner-page .control { min-width:0; min-height:3.2rem; padding:.6rem .3rem; border:1px solid var(--color-border); border-radius:var(--radius-small); background:var(--color-surface-raised); color:var(--color-text-soft); font:700 .8rem var(--font-technical); white-space:nowrap; }
.runner-page .control:disabled { opacity:.45; cursor:not-allowed; }
.runner-page .jump-control { border-color:var(--color-brand-light); background:var(--color-brand); color:#181511; font-size:.95rem; }
.runner-page .under-game { margin:.8rem 0 .3rem; color:var(--color-text-muted); text-align:center; font:.8rem/1.6 var(--font-technical); }
.runner-page .red { color:#f0a39a; }.runner-page .cyan { color:#9cdedc; }
.runner-page .live { display:flex; align-items:center; justify-content:center; gap:.6rem; padding:.2rem 0 .5rem; color:var(--color-text-muted); font:.7rem var(--font-technical); }
.runner-page .led { width:.45rem; height:.45rem; border-radius:50%; background:#a1dcb3; }
.runner-page .no-script { margin-top:.75rem; padding:.7rem; border:1px solid var(--color-brand-muted); border-radius:var(--radius-small); color:var(--color-text-soft); text-align:center; font:.75rem var(--font-technical); }
.runner-footer { display:flex; justify-content:center; gap:1rem; flex-wrap:wrap; padding-top:1.5rem; color:var(--color-text-muted); font: .75rem var(--font-technical); }
.runner-language { display:inline-flex; gap:.75rem; white-space:nowrap; }
.runner-footer a { color:var(--color-brand-light); text-decoration:underline; }
@media(max-width:640px){.runner-page .stage{height:16.5rem}.runner-page .panel{padding:.7rem}.runner-page .control{font-size:.7rem}.runner-page .jump-control{font-size:.85rem}.runner-page .version{font-size:.7rem}}
@media(max-width:350px){.runner-page .stage{height:15rem}.runner-page .control{font-size:.6rem}.runner-page .jump-control{font-size:.75rem}}
@media(prefers-reduced-motion:reduce){.runner-page .meter span{transition:none}}