@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,500;0,600;0,700;0,800;0,900;1,800&family=IBM+Plex+Mono:wght@500;600;700&display=swap');
:root{--ink:#06111a;--panel:#0a1b27;--panel2:#102a39;--line:#294552;--cream:#e9e5d8;--muted:#91a2a5;--orange:#ff6538;--cyan:#37d9d0;--yellow:#f5c44c}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#040b11;color:var(--cream);font-family:'Barlow Condensed',Arial,sans-serif}button{font:inherit;color:inherit}button:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}.hidden{display:none!important}
#app,#game{position:fixed;inset:0;width:100%;height:100%}#app{background:radial-gradient(circle at 70% 20%,#213b4e,#07131d 58%,#03080d);isolation:isolate}#game{display:block;z-index:0}.vignette{position:fixed;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle,transparent 45%,rgba(1,5,8,.58) 118%);box-shadow:inset 0 0 120px rgba(2,7,11,.35)}#damageFlash{position:fixed;inset:0;z-index:3;pointer-events:none;background:rgba(255,101,56,0);mix-blend-mode:screen}
.topbar{position:fixed;z-index:12;top:0;left:0;right:0;height:58px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(111,157,174,.24);background:linear-gradient(180deg,rgba(3,11,17,.9),rgba(3,11,17,.38),transparent);pointer-events:none}.brand{display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:.1em;font-size:19px}.brand small{font:600 9px 'IBM Plex Mono',monospace;color:#6e858d;border-left:1px solid #3a5059;padding-left:10px}.brand-mark{display:grid;place-items:center;width:32px;height:32px;color:white;background:var(--orange);font-style:italic;letter-spacing:-.08em;clip-path:polygon(13% 0,100% 0,87% 100%,0 100%)}.utility{pointer-events:auto;border:1px solid rgba(108,143,155,.3);background:rgba(7,20,29,.65);padding:8px 12px;font:600 9px 'IBM Plex Mono',monospace;letter-spacing:.12em;cursor:pointer}.utility:hover{border-color:var(--cyan);color:var(--cyan)}
.hud{position:fixed;z-index:5;left:22px;right:22px;top:74px;display:grid;grid-template-columns:auto auto 1fr auto auto;gap:28px;align-items:start;pointer-events:none}.hud-block>span,.stage-readout>span{display:block;color:#769098;font:600 9px 'IBM Plex Mono',monospace;letter-spacing:.16em}.hud-block>strong{display:block;margin-top:3px;font:700 24px 'IBM Plex Mono',monospace;text-shadow:0 3px 18px #000}.hud-block strong b{font:inherit}.hud-block strong i{font:600 10px 'IBM Plex Mono',monospace;color:#758a91}.hud-block.right{text-align:right}.hud-block.ammo strong{color:var(--orange)}.hud-block.ammo>i{display:block;color:var(--cyan);font:600 8px 'IBM Plex Mono',monospace;letter-spacing:.1em}.stage-readout{text-align:center;padding-top:1px}.stage-readout>span{color:var(--orange)}.stage-readout>strong{font-size:18px;letter-spacing:.13em}.timer-block strong{color:var(--yellow)}
.crosshair{position:fixed;z-index:6;left:50%;top:50%;width:34px;height:34px;transform:translate(-50%,-50%);pointer-events:none}.crosshair i,.crosshair b{position:absolute;display:block;background:#e9f6f3;box-shadow:0 0 4px #06111a}.crosshair i:nth-child(1),.crosshair i:nth-child(2){width:8px;height:2px;top:16px}.crosshair i:nth-child(1){left:1px}.crosshair i:nth-child(2){right:1px}.crosshair i:nth-child(3),.crosshair i:nth-child(4){width:2px;height:8px;left:16px}.crosshair i:nth-child(3){top:1px}.crosshair i:nth-child(4){bottom:1px}.crosshair b{width:2px;height:2px;left:16px;top:16px;background:var(--orange)}.crosshair.fire{animation:kick .12s ease-out}@keyframes kick{50%{transform:translate(-50%,-50%) scale(1.5)}}
.key-viz{position:fixed;z-index:5;left:22px;bottom:48px;text-align:center;pointer-events:none}.key-viz div{display:flex;justify-content:center;gap:4px;margin-top:4px}.key-viz kbd,.controls-grid kbd{display:grid;place-items:center;min-width:27px;height:25px;padding:0 6px;border:1px solid #425d68;border-bottom-width:2px;border-radius:2px;background:rgba(6,20,29,.7);color:#97a9aa;font:600 9px 'IBM Plex Mono',monospace}.key-viz kbd.active{color:#06111a;background:var(--cyan);border-color:#8ff7f1;box-shadow:0 0 12px rgba(55,217,208,.4)}.key-viz .wide{min-width:58px}.route-message{position:fixed;z-index:7;left:50%;top:25%;transform:translateX(-50%);text-align:center;color:var(--yellow);font-size:36px;font-weight:900;font-style:italic;letter-spacing:.08em;text-shadow:0 6px 28px #000;animation:route 1.8s ease-out both}@keyframes route{0%{opacity:0;transform:translate(-50%,18px) scale(.85)}20%,65%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-15px) scale(1.04)}}
.overlay{position:fixed;z-index:10}.start-screen{inset:0;padding:8vh 7vw 6vh;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,rgba(3,11,17,.96) 0%,rgba(3,11,17,.78) 48%,rgba(3,11,17,.12) 78%),linear-gradient(0deg,rgba(3,11,17,.72),transparent 45%)}.start-copy{max-width:760px}.eyebrow{display:flex;align-items:center;gap:9px;color:var(--cyan);font:600 10px 'IBM Plex Mono',monospace;letter-spacing:.19em}.eyebrow span{width:30px;height:2px;background:var(--cyan)}h1{margin:24px 0 21px;font-size:clamp(64px,8vw,118px);line-height:.78;letter-spacing:-.045em;font-weight:900;text-shadow:0 12px 55px #000}h1 em{color:var(--orange);font-style:italic}.start-copy>p{max-width:570px;margin:0 0 26px;color:#afbec0;font-size:20px;line-height:1.38}.primary{display:flex;align-items:center;justify-content:space-between;min-width:260px;gap:36px;padding:14px 15px 14px 21px;border:0;background:var(--orange);font-weight:900;font-size:17px;letter-spacing:.11em;cursor:pointer;clip-path:polygon(0 0,100% 0,95% 100%,0 100%);box-shadow:0 12px 36px rgba(255,101,56,.18)}.primary:hover{filter:brightness(1.13);transform:translateY(-1px)}.primary b{padding:6px 8px;border:1px solid rgba(255,255,255,.4);font:600 9px 'IBM Plex Mono',monospace;color:#ffe2da}.controls-grid{display:grid;grid-template-columns:repeat(3,max-content);gap:12px 26px;margin-top:27px}.controls-grid div{display:flex;align-items:center;gap:8px}.controls-grid span{font:600 9px 'IBM Plex Mono',monospace;color:#819497}.controls-grid kbd{min-width:52px}.best-line{margin-top:25px;font:600 9px 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#71878e}.best-line strong{margin-left:8px;color:var(--yellow);font-size:13px}.course-card{width:280px;margin-right:4vw;padding:25px;background:rgba(7,22,31,.72);border:1px solid rgba(80,122,136,.3);backdrop-filter:blur(10px);transform:skewY(-2deg)}.course-card>span,.course-card>small{display:block;font:600 9px 'IBM Plex Mono',monospace;letter-spacing:.16em;color:#789097}.course-card>strong{display:block;margin-top:22px;font-size:24px;letter-spacing:.11em}.course-card>small{margin-top:5px;color:var(--orange)}.route-line{position:relative;display:flex;justify-content:space-between;margin-top:22px;padding-top:20px}.route-line i{position:absolute;left:0;right:0;top:7px;height:2px;background:linear-gradient(90deg,var(--orange),var(--cyan))}.route-line b{display:grid;place-items:center;width:25px;height:25px;background:#102b38;border:1px solid #42606a;color:#b8c6c5;font:600 8px 'IBM Plex Mono',monospace}
.modal{left:50%;top:50%;width:min(520px,88vw);transform:translate(-50%,-50%);padding:42px;background:linear-gradient(145deg,rgba(8,25,35,.98),rgba(3,12,18,.98));border:1px solid #2d4a58;box-shadow:0 35px 100px rgba(0,0,0,.65)}.modal h2{margin:21px 0 13px;font-size:54px;line-height:.9}.modal p{color:#97a8a8;font-size:18px;line-height:1.45}.modal .primary{margin-top:25px}.modal>small{display:block;margin-top:19px;color:#647d85;font:500 8px 'IBM Plex Mono',monospace;letter-spacing:.08em}.result-row{display:grid;grid-template-columns:1fr 1fr;margin:26px 0;border-block:1px solid #294550}.result-row div{padding:17px 10px}.result-row div+div{border-left:1px solid #294550}.result-row span{display:block;color:#758d94;font:600 8px 'IBM Plex Mono',monospace;letter-spacing:.13em}.result-row strong{font:700 22px 'IBM Plex Mono',monospace;color:var(--yellow)}.error .eyebrow{color:var(--orange)}.error .eyebrow span{background:var(--orange)}.mobile-block{text-align:left}.footer-strip{position:fixed;z-index:5;left:0;right:0;bottom:0;height:28px;display:flex;align-items:center;justify-content:space-between;padding:0 22px;border-top:1px solid rgba(111,157,174,.18);background:rgba(3,10,15,.45);color:#536a73;font:500 7px 'IBM Plex Mono',monospace;letter-spacing:.13em;pointer-events:none}
@media(max-width:900px){.course-card{display:none}.start-screen{padding-inline:6vw}.controls-grid{grid-template-columns:repeat(2,max-content)}.hud{gap:14px}.stage-readout{display:none}}
@media(max-width:700px),(pointer:coarse){.topbar{padding:0 14px}.brand small,.footer-strip{display:none}.start-screen{display:none}.mobile-block{display:block!important}.hud,.crosshair,.key-viz{display:none!important}.modal h2{font-size:43px}}
@media(max-height:680px) and (pointer:fine){.start-screen{padding-top:70px}.start-copy{transform:scale(.88);transform-origin:left center}.controls-grid{margin-top:18px}.course-card{transform:scale(.86) skewY(-2deg)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition:none!important}.vignette{box-shadow:none}}