:root{color-scheme:dark;--ink:#152b3b;--cream:#fff1ce;--orange:#f29c64}*{box-sizing:border-box}body{margin:0;height:100dvh;overflow:hidden;background:#152b3b;color:var(--cream);font:15px/1.5 system-ui,sans-serif;user-select:none;-webkit-user-select:none}button{font:700 13px system-ui;background:#284452;color:var(--cream);border:1px solid #74919b;border-radius:6px;padding:10px 13px;cursor:pointer;touch-action:none}button:hover{background:#3c5b66}button:active,.held{background:#b85b38!important;transform:translateY(2px)}:focus-visible{outline:3px solid #ffd08a;outline-offset:3px}header{height:76px;max-width:1600px;margin:auto;padding:10px 28px 10px 90px;display:flex;align-items:center;justify-content:space-between;gap:12px}.brand{font:26px Georgia,serif;letter-spacing:3px}.brand b{color:var(--orange)}.brand small{display:block;font:9px system-ui;letter-spacing:3px;color:#aec4ca}nav{display:flex;gap:7px}#help-button{background:#ffffff12;border-radius:50%;width:38px;padding:4px;font-size:20px}main{height:calc(100dvh - 112px);display:flex;justify-content:center;align-items:center}.arena{width:min(calc(100vw - 32px),calc((100dvh - 194px)*1.777778));border:1px solid #69818b;box-shadow:0 24px 80px #031a2580;border-radius:8px;overflow:hidden}.hud{height:52px;display:flex;justify-content:space-around;align-items:center;background:#203b48}.hud div{display:flex;flex-direction:column;text-align:center}.hud small{font-size:9px;color:#bdd1d4;letter-spacing:2px}.hud b{font-size:21px;font-variant-numeric:tabular-nums;line-height:1.3}canvas{display:block;width:100%;aspect-ratio:16/9;touch-action:none;outline-offset:-4px}.status{height:27px;display:flex;justify-content:space-between;padding:4px 16px;font-size:12px;color:#f8d6af;background:#203b48;white-space:nowrap}#route-name{color:#bdd1d4}footer{height:30px;padding:8px;text-align:center;font-size:10px;letter-spacing:1px;color:#9ab7c0}.touch-controls{display:none}.modal{position:fixed;inset:0;z-index:100;background:#081d2be6;display:none;align-items:center;justify-content:center;padding:18px}.modal.is-visible{display:flex}.modal[hidden]{display:none!important}.paper{color:#183440;background:#fff0cf;border:5px solid #daac7c;border-radius:8px;padding:28px 34px;max-width:760px;max-height:calc(100dvh - 36px);overflow:auto;box-shadow:0 30px 90px #0007}h1{font:44px/1.05 Georgia,serif;margin:12px 0 20px}h1 em{color:#b24b2f}.eyebrow{font-size:10px;font-weight:800;color:#a14b31;letter-spacing:2px}.guide{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;font-size:13px}.guide b{font-size:11px;letter-spacing:1px;color:#a14b31}.fine{font-size:12px;color:#53606a}.paper button{background:#244653;color:#fff0cf}.paper .primary{background:#aa4a30;border-color:#aa4a30;font-size:15px;padding:13px 22px}.result-paper{width:540px;text-align:center}.result-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}body:has(.modal.is-visible) .touch-controls{visibility:hidden!important;pointer-events:none!important}
@media(max-width:900px),(pointer:coarse){body.touch-device header{height:55px;padding:7px 66px 7px 14px}.brand{font-size:17px;letter-spacing:1px}.brand small{font-size:8px;letter-spacing:1px}body.touch-device nav button{font-size:11px;padding:7px 9px}body.touch-device #reset,body.touch-device #help-button{display:none}body.touch-device main{height:calc(100dvh - 55px)}body.touch-device .arena{width:min(calc(100vw - 278px),calc((100dvh - 113px)*1.777778));border-radius:4px}body.touch-device .hud{height:35px}body.touch-device .hud small{font-size:8px;letter-spacing:1px}body.touch-device .hud b{font-size:16px}body.touch-device .status{height:20px;font-size:10px;padding:2px 6px}body.touch-device #route-name{display:none}body.touch-device footer{display:none}body.touch-device #touch-controls.touch-controls{position:fixed!important;inset:55px 0 0!important;display:flex!important;justify-content:space-between;align-items:center;padding:12px max(12px,env(safe-area-inset-right)) 12px max(12px,env(safe-area-inset-left));pointer-events:none}#touch-controls button{pointer-events:auto;width:110px;height:100px;border-radius:24px;border:2px solid #e8b688;background:#aa4a30;box-shadow:0 5px 0 #4b2f29;touch-action:none;-webkit-touch-callout:none}#touch-controls small{display:block;font-size:9px;margin-top:7px}#touch-controls #fire{background:#355d6b;border-color:#8ebac4}.actions{display:flex;flex-direction:column;gap:12px}.paper{padding:18px 22px}.paper h1{font-size:33px}.paper p{margin:10px 0}.guide{gap:16px;font-size:12px}}
@media(orientation:portrait) and (max-width:900px){.brand small{display:none}.brand{font-size:16px}body.touch-device main{height:calc(100dvh - 245px)}body.touch-device .arena{width:calc(100vw - 16px)}body.touch-device #touch-controls.touch-controls{inset:auto 0 25px!important;height:160px;padding:0 25px}.guide{grid-template-columns:1fr;gap:0}}
@media(prefers-reduced-motion:reduce){button:active,.held{transform:none}}