@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800;900&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--amber:#ffbc55;--muted:#9aa7ad}*{box-sizing:border-box}body{margin:0;background:#0a1117;color:#e9efeb;font-family:'Space Grotesk',Arial,sans-serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--amber);outline-offset:5px}#game{height:100svh;min-height:480px;position:relative;isolation:isolate}#scene{display:block;width:100%;height:100%}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#080e1599,transparent 24%,transparent 78%,#060c16cc);box-shadow:inset 0 0 140px #03081077}header{position:absolute;left:38px;right:38px;top:26px;display:flex;justify-content:space-between;align-items:center}.wordmark{font-family:'Barlow Condensed',Impact,sans-serif;font-size:28px;font-weight:900;letter-spacing:-1px;color:#ecf1eb;text-decoration:none;line-height:.9}.wordmark span{color:var(--amber)}.wordmark small{display:block;font:9px 'Space Grotesk',sans-serif;letter-spacing:3px;margin-top:8px}.top-actions{display:flex;gap:10px}.top-actions button{background:#0c151bb3;border:1px solid #ffffff25;padding:10px 14px;font-size:12px;letter-spacing:1px}#pause{font-size:17px;padding:7px 15px}#hud{position:absolute;top:28px;left:50%;transform:translateX(-50%);display:flex;gap:48px;opacity:0;transition:opacity .4s}#hud label{font-size:10px;letter-spacing:2px;color:var(--muted);display:block;margin-bottom:6px}#hud strong{font-size:23px;font-weight:600;font-variant-numeric:tabular-nums}.amber{color:var(--amber)}.stage-label{position:absolute;bottom:86px;left:38px;display:flex;gap:16px;align-items:center}.stage-label>span{color:var(--amber);font-size:14px;border-right:1px solid #ffffff35;padding-right:16px}.stage-label b{font-size:14px;letter-spacing:2px}.stage-label small{display:block;color:#b4c0c6;font-size:12px;margin-top:5px}#overlay{position:absolute;inset:100px 0 80px;display:flex;align-items:center;padding-left:8%;background:linear-gradient(90deg,#071018ed 0%,#071018c7 27%,#07101810 60%)}.intro{max-width:450px}.eyebrow{font-size:11px;letter-spacing:2px;color:#c8d4d7}.eyebrow i{display:inline-block;height:6px;width:6px;background:var(--amber);margin-right:8px;box-shadow:0 0 12px #ffae45}h1{font-family:'Barlow Condensed',Impact,'Arial Narrow',sans-serif;font-size:clamp(80px,9.7vw,146px);font-weight:900;line-height:.78;letter-spacing:-3px;margin:28px 0 22px}h1 span{color:var(--amber)}h1 em{font-family:'Space Grotesk',Arial,sans-serif;font-size:13px;letter-spacing:6px;font-style:normal;display:block;margin-top:22px;line-height:1.5;color:#e7edee}#message{font-size:15px;color:#abbcc5;line-height:1.7;margin-bottom:26px}.primary{display:flex;align-items:center;justify-content:space-between;gap:50px;padding:17px 24px;background:var(--amber);color:#12191e;border:0;font-size:14px;font-weight:700;letter-spacing:1px;box-shadow:0 5px 35px #ffad4920;transition:background .2s,transform .2s}.primary:hover{background:#ffd48a;transform:translateY(-2px)}.primary span{font-size:22px;line-height:1}.start-note{font-size:9px;letter-spacing:1.4px;color:#778891;margin-top:16px}.level-menu{position:absolute;right:35px;bottom:10px;background:#08131c9c;padding:18px 24px;border-left:2px solid #ffbc5577;font-size:11px;letter-spacing:1px}.level-menu>span{font-size:9px;color:#9aa7ad}.level-menu div{margin-top:12px}.level-menu b{color:var(--amber);margin-right:14px}footer{position:absolute;bottom:24px;left:38px;right:38px;border-top:1px solid #ffffff20;padding-top:16px;display:flex;gap:26px;align-items:center;font-size:10px;letter-spacing:1px;color:#a5b4bc}footer b{margin-left:auto;font-size:9px;color:#677b87;letter-spacing:2px}kbd{border:1px solid #b8c4cc40;padding:3px 5px;margin-right:4px;font-size:10px;color:#dee9ec}#toast{position:absolute;left:50%;top:20%;transform:translateX(-50%);pointer-events:none;color:#ffe1a6;letter-spacing:2px;font-weight:700;text-shadow:0 2px 10px #000;opacity:0;transition:opacity .2s}#touch{display:none}body.playing #hud{opacity:1}body.playing #overlay{display:none}body.modal #overlay{background:#06101cba;backdrop-filter:blur(5px)}body.modal h1{font-size:80px;line-height:.9}body.modal .level-menu{display:none}
@media(max-width:800px){header{left:20px;right:20px;top:18px}#hud{top:75px;gap:26px;width:calc(100% - 40px);justify-content:space-between}#hud strong{font-size:19px}#hud label{font-size:9px;letter-spacing:1px}#hud .record{display:none}#overlay{inset:75px 0 130px;padding-left:8%;background:linear-gradient(90deg,#071018eb,#07101865 75%)}h1{font-size:105px}.level-menu{display:none}.stage-label{bottom:145px;left:20px}.stage-label small{font-size:11px}footer{display:none}#touch{position:absolute;bottom:max(15px,env(safe-area-inset-bottom));left:20px;right:20px;display:flex;justify-content:space-between;align-items:center;touch-action:none;user-select:none}.dpad{display:flex;align-items:center;gap:6px}.dpad div{display:flex;flex-direction:column;gap:5px}#touch button{width:51px;height:45px;border:1px solid #cad8e044;background:#112331b8;border-radius:6px;font-size:18px;touch-action:none}#touch .jump{width:78px;height:78px;border-radius:50%;border-color:#ffc272a0;color:#ffd190;font-size:12px;font-weight:700;background:#3a2d1fba}#touch button:active,#touch button.held{background:#b27737aa}body:not(.playing) #touch{opacity:.35;pointer-events:none}.start-note{font-size:8px}.eyebrow{font-size:9px}#message{font-size:14px}}@media(max-height:650px) and (min-width:801px){h1{font-size:86px}#overlay{inset:70px 0}.eyebrow{font-size:10px}#message{margin:12px 0}.stage-label{bottom:70px}}@media(max-height:650px) and (max-width:800px){h1{font-size:65px;margin:14px 0}h1 em{font-size:10px;margin-top:13px}#message{margin:10px 0;font-size:12px}.primary{padding:12px 20px}.start-note{display:none}.stage-label{bottom:110px}.wordmark{font-size:22px}}

/* Floating mobile joystick, including landscape touch devices. */
@media (max-width:800px), (any-pointer:coarse){
#game{touch-action:none;user-select:none;-webkit-user-select:none;min-height:0}
footer{display:none}
#touch{display:block;position:absolute;inset:0;pointer-events:none;touch-action:none;user-select:none;z-index:4}
#touch .jump{position:absolute;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));width:78px;height:78px;border-radius:50%;border:1px solid #ffc272a0;color:#ffd190;font-size:12px;font-weight:700;background:#3a2d1fba;touch-action:none;pointer-events:auto}
#touch .jump.held{background:#b27737aa}
body:not(.playing) #touch{display:none}
.joystick-hint{position:absolute;left:24px;bottom:max(48px,env(safe-area-inset-bottom));font-size:10px;letter-spacing:1px;color:#b4c0c6;pointer-events:none}
#joystick{display:none;position:fixed;width:112px;height:112px;margin:-56px 0 0 -56px;border:1px solid #ffc27280;border-radius:50%;background:#11233180;box-shadow:inset 0 0 24px #ffbc5512;pointer-events:none}
#joystick.active{display:block}
#touch:has(#joystick.active) .joystick-hint{opacity:0}
#joystick-stick{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:#ffbc5570;border:2px solid #ffd190;box-shadow:0 3px 14px #0005;will-change:transform}
}

[hidden]{display:none!important}
.arcade-brand{display:flex;align-items:center;gap:8px;width:max-content;margin-bottom:18px;padding:4px 11px 4px 5px;background:#070711b8;border:1px solid #6eff8b42;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.arcade-brand img{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 0 7px #3cff6b88)}.arcade-brand span{font-size:10px;font-weight:900;letter-spacing:.2em;color:#72ff8a;white-space:nowrap}
#overlay{overflow-y:auto;align-items:safe center;padding-top:20px;padding-bottom:20px}.intro{flex-shrink:0}
.scoreboard-link{display:block;margin-top:18px;padding:8px 0;border:0;background:none;color:var(--amber);font-size:14px;text-decoration:underline;text-underline-offset:5px}
#score-form{margin-top:20px}#score-form label{display:block;margin-bottom:8px;font-size:14px;letter-spacing:1px}.score-entry{display:flex;gap:8px}.score-entry input{width:180px;min-width:0;flex:1;padding:12px;background:#0a1720;color:#fff;border:1px solid #ffffff55;border-radius:4px;font:16px 'Space Grotesk',sans-serif;user-select:text;-webkit-user-select:text}.score-entry button,#refresh-scores{padding:12px;border:1px solid #ffbc5577;background:#34281c;color:var(--amber);font-size:14px}.score-entry input:focus{outline:2px solid var(--amber)}#score-form small{display:block;color:#aebec5;margin-top:8px;font-size:12px}#save-status{font-size:14px;line-height:1.5;color:#c5edcd;max-width:370px}#save-status:empty{display:none}button:disabled{opacity:.5;cursor:wait}
#scoreboard{width:min(600px,calc(100% - 28px));max-height:85svh;background:#0c1720;color:#eef3ee;border:1px solid #ffbc5555;padding:24px;overflow:auto;touch-action:pan-y}#scoreboard::backdrop{background:#020810dc;backdrop-filter:blur(6px)}.board-heading{display:flex;justify-content:space-between;gap:12px;align-items:start}.board-heading small{font-size:12px;letter-spacing:1px;color:var(--amber)}.board-heading h2{font:700 38px 'Barlow Condensed',sans-serif;margin:8px 0 18px}#close-scores{background:none;border:1px solid #ffffff44;font-size:20px;width:44px;height:44px;flex-shrink:0}#board-status{font-size:14px;color:#abbcc5}.score-table-wrap{max-height:48svh;overflow:auto}#scoreboard table{width:100%;border-collapse:collapse;font-size:14px}#scoreboard th{text-align:left;color:#abbcc5;font-weight:500}#scoreboard td,#scoreboard th{padding:12px 6px;border-bottom:1px solid #ffffff20}#scoreboard td:nth-child(3),#scoreboard th:nth-child(3){text-align:right;font-variant-numeric:tabular-nums}#scoreboard td:nth-child(2){overflow-wrap:anywhere}#scoreboard td:first-child{color:var(--amber)}#refresh-scores{margin-top:20px}body.modal .arcade-brand{display:none}
@media(max-height:760px){.arcade-brand{margin-bottom:12px}.arcade-brand img{width:32px;height:32px}#overlay h1{font-size:72px;margin:16px 0}.start-note{display:none}#overlay{inset:75px 0 125px}body.modal #overlay{inset:72px 0 16px}body.modal #overlay h1{font-size:56px}}
@media(max-width:800px){#overlay{padding-right:8%}.intro{max-width:100%;width:370px}#scoreboard{padding:18px}#scoreboard td,#scoreboard th{padding:12px 4px}body.modal #overlay{inset:72px 0 16px}}

body:has(#scoreboard[open]) #game{touch-action:pan-y}