:root{--ink:#e8e5cd;--dark:#152e29;--accent:#e4b968;--muted:#9bb5aa}*{box-sizing:border-box}html,body{margin:0;background:#0b1917;color:var(--ink);font:15px/1.4 system-ui,sans-serif;min-height:100%;}body{display:flex;justify-content:center;align-items:center;min-height:100dvh}button,input,select{font:inherit}button,a,select,input{outline-offset:4px}button{cursor:pointer;min-height:44px;border:1px solid #78917c;background:#29463b;color:var(--ink);padding:9px 16px;font-weight:650;border-radius:2px}button:hover{background:#3f5e4a}button:disabled{opacity:.4;cursor:default}button.primary{background:var(--accent);color:#20372b;border-color:#f2d18f;font-weight:800}button[aria-pressed=true]{border:2px solid var(--accent);background:#3e5946}a{color:var(--accent)}#app{width:min(1280px,100%);box-shadow:0 10px 100px #0007}#topbar{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:3px solid #d1ad66;background:#172d27;font:12px monospace;letter-spacing:.1em}#topbar .brand{font-size:17px;letter-spacing:.04em}#topbar .brand b{color:var(--accent)}.route-title span{margin:0 10px;color:var(--accent)}#topbar a{font-size:11px}#stage{position:relative;width:100%;height:min(76dvh,760px);min-height:450px;overflow:hidden;background:#6c817d}canvas{display:block;width:100%;height:100%;image-rendering:pixelated;touch-action:none}#hud{position:absolute;top:18px;left:20px;right:20px;display:flex;align-items:start;gap:26px;padding:10px 18px;background:#162d26ea;border:1px solid #a0ab7a66;pointer-events:none;box-shadow:0 3px 0 #0f211c}#hud strong{font:600 24px/1.2 monospace;display:block;color:#f1d99d}#hud .hud-label{display:block;font:10px monospace;letter-spacing:.1em;color:#a8b9a0}#hud>div:first-child{flex:1}#hud .hud-actions{display:flex;gap:6px;pointer-events:auto}#hud button{padding:5px 10px;min-width:44px}#hearts{color:#eea58b!important;white-space:nowrap}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:22px;background:linear-gradient(90deg,#102820c9,#10282030,#102820b3);overflow:auto}.panel{background:#18362eee;border:1px solid #a5b184;box-shadow:0 12px 60px #10221dc4;padding:26px 32px;width:min(660px,100%);max-height:100%;overflow:auto}.eyebrow{font:11px monospace;color:var(--accent);letter-spacing:.16em;text-transform:uppercase}h1{font-size:clamp(32px,5vw,62px);line-height:.98;letter-spacing:-.05em;margin:12px 0 16px}h2{font-size:30px;margin:10px 0}p{color:#becbb4}.tagline{max-width:46ch;margin:0 0 20px}.runner-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.runner-grid button{text-align:left;padding:10px}.runner-grid small{display:block;font:11px/1.3 system-ui;color:#bac9b4;margin-top:5px}.runner-chip{display:inline-block;width:9px;height:9px;margin-right:6px}.form-line{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0}.form-line label{display:flex;align-items:center;gap:8px;font-size:12px}select,input{min-height:40px;background:#102b24;border:1px solid #78917c;color:var(--ink);padding:6px 10px;max-width:100%;min-width:0}#seed{width:100px}.buttons{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}.buttons button{flex:1}.rule-strip{border-top:1px solid #5f7e63;margin-top:16px;padding-top:12px;display:flex;justify-content:space-between;gap:10px;font:11px monospace;color:#cfdbc0}.muted{color:var(--muted);font-size:12px}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.summary div{padding:12px;background:#0f2a23}.summary strong{display:block;font:26px monospace;color:var(--accent)}.summary small{font:10px monospace}#telegraph{position:absolute;bottom:23%;left:0;right:0;text-align:center;pointer-events:none;color:#fff0a1;font:bold 16px monospace;text-shadow:2px 2px #18362e}#touch{position:absolute;bottom:28px;left:16px;right:16px;display:flex;justify-content:center;gap:10px;pointer-events:none}#touch button{background:#14382bc9;border:1px solid #abbd90aa;width:58px;min-height:52px;padding:2px;font:24px monospace;pointer-events:auto;touch-action:none}#touch small{font:8px monospace;display:block}#input-hint{position:absolute;bottom:8px;left:0;right:0;text-align:center;font:10px monospace;pointer-events:none;color:#e2dfc2;text-shadow:1px 1px #1a372e}footer{min-height:34px;display:flex;justify-content:space-between;gap:12px;padding:10px 24px;background:#122720;color:#98aa92;font:10px monospace}[hidden]{display:none!important}@media(max-width:640px){#topbar{height:44px;padding:0 12px}#topbar .brand{font-size:13px}.route-title{display:none}#stage{height:calc(100dvh - 76px);min-height:330px}footer{font-size:8px;padding:8px 12px;min-height:32px}footer span:last-child{display:none}#hud{top:10px;left:10px;right:10px;gap:12px;padding:8px}#hud strong{font-size:19px}#hud .hud-label{font-size:8px}#hud button{font-size:11px;padding:4px 8px}.panel{padding:20px}.overlay{padding:12px}h1{font-size:40px}.runner-grid small{font-size:10px}.runner-grid button{padding:8px;font-size:12px}.rule-strip{font-size:9px}.tagline{font-size:13px;margin-bottom:14px}}@media(max-height:550px){#topbar{height:36px}#stage{height:calc(100dvh - 36px);min-height:280px}footer{display:none}.panel{padding:14px 22px}.panel h1{font-size:32px;margin:8px 0}.tagline{margin-bottom:10px;font-size:12px}.runner-grid button{min-height:44px;padding:6px}.runner-grid small{font-size:9px}.form-line{margin:8px 0}.rule-strip{margin-top:10px}.buttons{margin-top:10px}#touch{justify-content:space-between;bottom:20px}#touch button{width:48px;min-height:44px}#hud{top:6px}#input-hint{bottom:3px}#telegraph{bottom:16%}}

/* Mobile-first layout: the same portrait playfield on phones and desktop. */
body{background:radial-gradient(ellipse at 50% 25%,#254238 0,#0b1917 65%);align-items:center}
#app{width:min(460px,100%);height:100dvh;max-height:1000px;display:flex;flex-direction:column;border-left:1px solid #53694f;border-right:1px solid #53694f}
#topbar{height:44px;min-height:44px;padding:0 14px;flex-shrink:0}
#topbar .brand{font-size:14px}.route-title{display:none}
#stage{flex:1;height:auto;min-height:0;width:100%}
footer{min-height:28px;max-height:28px;padding:7px 12px;font-size:9px;flex-shrink:0}footer span:last-child{display:none}
#hud{top:10px;left:10px;right:10px;gap:12px;padding:8px}
#hud strong{font-size:19px}#hud .hud-label{font-size:8px}
#hud button{font-size:11px;padding:4px 8px}
.panel{padding:20px}.overlay{padding:12px}
h1{font-size:42px}.runner-grid small{font-size:10px}
.runner-grid button{padding:8px;font-size:12px}
.rule-strip{font-size:9px}.tagline{font-size:13px;margin-bottom:14px}
#touch{bottom:28px;gap:10px}#touch button{width:62px;min-height:54px}
@media(min-width:641px){#app{height:min(940px,96dvh);border:1px solid #53694f;border-radius:8px;overflow:hidden}}
@media(max-height:550px){#app{max-width:460px;height:100dvh}#topbar{height:36px;min-height:36px}footer{display:none}#stage{height:auto;min-height:0}.panel{padding:12px 16px}h1{font-size:30px}#touch{bottom:20px;gap:8px;justify-content:center}#touch button{width:54px;min-height:44px}#input-hint{font-size:9px}}

@media(max-height:550px){.panel h1,.panel .tagline{display:none}.panel .eyebrow{margin-bottom:8px}.panel .form-line{gap:6px;margin:6px 0}.panel .form-line label{font-size:11px}.panel select,.panel input{min-height:32px}.panel .muted{margin-bottom:0}.panel .rule-strip{padding-top:7px;margin-top:7px}}

/* Orthographic Moscow palette, fixed portrait playfield. */
#world{image-rendering:pixelated}#hud{background:#282d27e8;border-color:#c9b18488;box-shadow:0 2px 0 #171d18}#hud strong{color:#f5cf70}#touch button{background:#253b32c9;border:2px solid #aaad8b;border-radius:12px;box-shadow:0 3px 0 #18251f}#topbar{background:#202b25}#telegraph{font-size:13px;background:linear-gradient(90deg,transparent,#1c2c24b0,transparent);padding:5px 0}

@font-face{font-family:RailwayDisplay;src:url('assets/fonts/RussoOne-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--rail-font:RailwayDisplay,'Arial Narrow',sans-serif}h1,h2,.brand,.eyebrow,button,select,input,#hud strong,#hud .hud-label,#telegraph,.rule-strip,footer,.summary strong{font-family:var(--rail-font);font-weight:400}h1{letter-spacing:-.025em}#hud .hud-label{letter-spacing:.04em}#hud strong{font-variant-numeric:tabular-nums}#touch button{font-family:var(--rail-font)}#touch small{font-family:var(--rail-font)}

/* Keep contextual and control hints anchored directly above the buttons. */
:root{--controls-bottom:28px;--controls-height:54px}
#touch{bottom:var(--controls-bottom);z-index:3}#touch button{min-height:var(--controls-height)}
#play-hints{position:absolute;left:8px;right:8px;bottom:calc(var(--controls-bottom) + var(--controls-height) + 8px);pointer-events:none;text-align:center;z-index:2}
#play-hints #telegraph{position:static;left:auto;right:auto;bottom:auto;margin:0;padding:4px 0;line-height:1.25}
#play-hints #telegraph:empty{display:none}
#overlay{z-index:5}#hud{z-index:3}
@media(max-height:550px){:root{--controls-bottom:20px;--controls-height:44px}#play-hints{bottom:calc(var(--controls-bottom) + var(--controls-height) + 6px)}}

#touch button{height:var(--controls-height);line-height:1}#touch small{line-height:1}

/* Generated enamel station plates. Text remains live HTML. */
:root{--sign-blue:url('assets/orthographic/signs-edges-v1/sprites/sign-blue.webp');--sign-green:url('assets/orthographic/signs-edges-v1/sprites/sign-green.webp');--sign-cream:url('assets/orthographic/signs-edges-v1/sprites/sign-cream.webp');--sign-display:url('assets/orthographic/signs-edges-v1/sprites/sign-display.webp')}
.panel{border:14px solid transparent;border-image:var(--sign-blue) 36 fill / 14px / 0 stretch;background:#08233a;padding:14px 18px;color:#f3edcf;box-shadow:0 8px 30px #06131dcc}
.panel p,.panel .muted{color:#d0d3c1}.panel .eyebrow{color:#eed7a0}.panel h1,.panel h2{color:#f4edce}.panel h1{letter-spacing:0}
button{border:8px solid transparent;border-image:var(--sign-green) 36 fill / 8px / 0 stretch;background:transparent;color:#f5e8be;border-radius:0;box-shadow:0 2px 0 #0b171c}
button.primary,button[aria-pressed=true]{border-image-source:var(--sign-cream);background:transparent;color:#123a36}
.runner-grid button[aria-pressed=true] small{color:#38574d}.runner-grid small{color:#cbd3c3}
select,input{background:#062139;border:2px solid #aebcaa;color:#f4e8c6}
#topbar{border:6px solid transparent;border-image:var(--sign-blue) 36 fill / 6px / 0 stretch;padding:0 8px;background:#062139;color:#f5e9c7}#topbar .brand b{color:#f2d28a}#topbar a{color:#ecd39a}
#hud{border:10px solid transparent;border-image:var(--sign-display) 36 fill / 10px / 0 stretch;padding:4px 6px;gap:8px;background:#101818;box-shadow:0 2px 0 #04121b}
#hud .hud-label{color:#e0d9b6}#hud strong{color:#f6cd6e}#hud>div:first-child{min-width:0}#hud .hud-actions button{border-width:6px;border-image-width:6px;padding:2px 4px;white-space:nowrap}
.summary div{border:8px solid transparent;border-image:var(--sign-display) 36 fill / 8px / 0 stretch;padding:6px;background:#101818}.summary strong{color:#f6cc6e}.summary small{color:#eee3c4}
#touch button{border:9px solid transparent;border-image:var(--sign-cream) 36 fill / 9px / 0 stretch;border-radius:0;background:transparent;color:#173d39;box-shadow:0 3px 0 #071a23}
#play-hints #telegraph:not(:empty){border:6px solid transparent;border-image:var(--sign-green) 36 fill / 6px / 0 stretch;background:transparent;color:#ffe4a0;padding:2px 4px;max-width:340px;margin:0 auto 3px;font-size:12px;text-shadow:1px 1px #0a2222}
#zone-splash{position:absolute;top:100px;left:18px;right:18px;height:124px;border:9px solid transparent;border-image:var(--sign-blue) 36 fill / 9px / 0 stretch;background:#08233a;z-index:4;pointer-events:none;overflow:hidden;box-shadow:0 5px 15px #07151c88;will-change:opacity}
#zone-splash img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;image-rendering:pixelated}
.splash-caption{position:absolute;inset:0;padding:12px;display:flex;flex-direction:column;justify-content:center;gap:5px;background:linear-gradient(90deg,#052235e8,#05223565);color:#f7ebc7;font-family:var(--rail-font);text-shadow:1px 2px #08222b}
.splash-caption small{font-size:9px;letter-spacing:.08em;color:#f1d491}.splash-caption strong{font-size:23px;font-weight:400}.splash-caption span{font-size:10px;max-width:95%}
@media(max-height:550px){.panel{border-width:8px;border-image-width:8px;padding:8px 10px}.runner-grid button{border-width:6px;border-image-width:6px;padding:4px}.buttons button{padding:4px 8px}#zone-splash{top:90px;height:70px;left:32px;right:32px;border-width:6px;border-image-width:6px}.splash-caption{padding:5px 9px;gap:2px}.splash-caption strong{font-size:18px}.splash-caption small{font-size:7px}.splash-caption span{display:none}#hud{top:4px;border-width:7px;border-image-width:7px;padding:2px 5px}#hud strong{font-size:17px}#touch button{border-width:7px;border-image-width:7px}}
/* Keep corner bolts inside the nine-slice corner instead of stretching them along an edge. */
button[aria-pressed=true]{border:8px solid transparent;border-image:var(--sign-cream) 48 fill / 8px / 0 stretch;color:#123a36;background:transparent}
.panel,button,#topbar,#hud,.summary div,#touch button,#play-hints #telegraph:not(:empty),#zone-splash{border-image-slice:48 fill}
@media(max-height:550px){button[aria-pressed=true]{border-width:6px;border-image-width:6px}}
@media (max-height:740px) and (min-height:551px){html[lang=ru] .panel h1{font-size:30px;line-height:1.1;margin:8px 0}html[lang=ru] .panel .tagline{font-size:12px;margin:8px 0}html[lang=ru] .runner-grid button{padding:5px;border-width:8px;border-image-width:8px;font-size:13px}html[lang=ru] .runner-grid small{font-size:10px}html[lang=ru] .form-line{margin:8px 0;gap:7px}html[lang=ru] .panel .muted{font-size:11px;margin:8px 0}html[lang=ru] .rule-strip{font-size:9px;margin-top:8px;padding-top:8px}}
/* CRT applies only to the game picture. The HTML sign faces, text and touch targets sit above it. */
#crt-display.crt-display{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:auto;z-index:0}
.crt-fallback{position:absolute;inset:0;pointer-events:none;z-index:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent calc(var(--crt-row,2px)*.7),#07120b16 var(--crt-row,2px));opacity:.65}
#world.crt-source-fallback{filter:blur(.18px) brightness(1.04) saturate(1.025)}
.rule-strip .crt-switch{border:0;border-image:none;background:transparent;color:var(--accent);font:inherit;line-height:1.2;min-width:44px;min-height:30px;padding:2px 5px;white-space:nowrap;text-decoration:underline;text-underline-offset:3px}
.display-options{margin-top:10px}.display-options button{width:100%;min-height:44px}

.pixel-display{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;z-index:0}
.pixel-options{display:flex;align-items:center;justify-content:center;gap:12px;margin:6px 0;font-size:14px}.pixel-options select{min-height:36px;padding:3px 12px;width:auto}.display-options .pixel-options{margin-top:10px}

/* Keep intrinsic select text from widening the panel or its scroll container. */
.overlay,.panel{min-width:0;max-width:100%;overflow-x:hidden}
.panel>*{min-width:0;max-width:100%}
.form-line label{min-width:0;max-width:100%;flex:1 1 140px}
.form-line label:has(#departure){flex-basis:100%;display:grid;grid-template-columns:auto minmax(0,1fr)}
.form-line select,.form-line input{min-width:0;width:100%;max-width:100%}
.runner-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.runner-grid button,.buttons button{min-width:0;overflow-wrap:anywhere}
.rule-strip{flex-wrap:wrap}.panel .eyebrow{overflow-wrap:anywhere}

/* Authored 16px raster arrow sprite; direction never depends on a font glyph. */
.arrow-icon{display:inline-block;width:16px;height:16px;flex-shrink:0;vertical-align:-2px;background:url('assets/atlases/arrow.png') center/contain no-repeat;image-rendering:pixelated}
.arrow-left{transform:rotate(-90deg)}.arrow-right{transform:rotate(90deg)}.arrow-down{transform:rotate(180deg)}.arrow-diagonal{transform:rotate(45deg)}
#touch .arrow-icon{display:block;margin:0 auto;width:24px;height:24px}.rule-strip .arrow-icon,#input-hint .arrow-icon{width:12px;height:12px}
#topbar .arrow-icon,.rule-strip .arrow-icon,#play-hints .arrow-icon{filter:brightness(0) saturate(100%) invert(87%) sepia(30%) saturate(400%)}

#touch,#touch button,#world{touch-action:none;user-select:none;-webkit-user-select:none}