@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;700&display=swap');
:root{--accent:#6366f1;--glow:rgba(99,102,241,.4)}
*{box-sizing:border-box}
body{margin:0;min-height:100dvh;background:#05060a;color:#e5e7eb;font:13px 'Fira Code',monospace;background-image:radial-gradient(circle at 48% -15%,var(--glow),transparent 45%)}
button,input{font:inherit}
button{cursor:pointer}
.game-header{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px max(20px,calc((100vw - 1500px)/2));border-bottom:1px solid #1f2230;background:#080a11}
.back-link{color:#9298ab;text-decoration:none}.back-link:hover{color:var(--accent)}
.game-brand{font-size:16px;font-weight:700;letter-spacing:.16em;color:var(--accent);white-space:nowrap}.game-brand small{color:#787f95;font-size:10px}.status-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#39d98a;box-shadow:0 0 10px #39d98a}
.header-right{font-size:10px;color:#6b7280;letter-spacing:.14em}
.header-actions{display:flex;align-items:center;gap:14px}.sound-toggle{padding:8px 10px;border:1px solid #434a68;border-radius:7px;background:#111523;color:#b8c4f5;font-size:10px;font-weight:700;letter-spacing:.08em;white-space:nowrap}.sound-toggle:hover,.sound-toggle:focus-visible{border-color:var(--accent);color:white}.sound-toggle:disabled{opacity:.5;cursor:default}
#game-achievement-toast{position:fixed;right:18px;bottom:18px;z-index:110;max-width:min(310px,calc(100vw - 36px));padding:11px 15px;border:1px solid #ffd66b;border-radius:9px;background:#16121fe8;color:#fff2c2;box-shadow:0 0 25px #ffca5a44;font-size:11px;font-weight:700;line-height:1.5;opacity:0;transform:translateY(10px);transition:opacity .2s,transform .2s;pointer-events:none}#game-achievement-toast.show{opacity:1;transform:translateY(0)}
.screen-reader-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:20px;max-width:1540px;margin:auto;padding:20px}
.play-column{min-width:0}.game-hud{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}.game-hud>div{display:flex;flex-direction:column;gap:4px;min-width:0;padding:11px 15px;border:1px solid #222636;border-radius:11px;background:#0c0f19}.game-hud small{color:#737b94;font-size:9px;letter-spacing:.18em}.game-hud strong{font-size:17px;letter-spacing:.03em;white-space:nowrap}.game-hud #hud-health{color:#fb5f78}
#boss-mobile-panel{display:none;margin:0 0 10px;padding:9px 11px;border:1px solid #6670c7;border-radius:9px;background:#0b1020;color:#e8ecff}#boss-mobile-panel strong{font-size:12px}#boss-mobile-panel span{float:right;color:#ffbd80;font-size:11px}#boss-mobile-panel small{display:block;clear:both;margin-top:5px;color:#c5cbdf;font-size:10px;line-height:1.4}
.canvas-shell{position:relative;width:100%;aspect-ratio:16/9;border:1px solid #30364e;border-radius:16px;overflow:hidden;background:#080b16;box-shadow:0 20px 60px #0009,0 0 35px var(--glow)}canvas{display:block;width:100%;height:100%}
.game-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:15px;background:rgba(4,6,12,.72);backdrop-filter:blur(3px)}.game-overlay[hidden]{display:none}.overlay-card{width:min(100%,410px);max-height:100%;overflow:auto;padding:24px;border:1px solid var(--accent);border-radius:16px;background:#0a0d19eb;box-shadow:0 0 45px var(--glow);text-align:center}.eyebrow{margin:0;color:#7b83a0;font-size:10px;letter-spacing:.22em}.overlay-card h1{margin:8px 0;color:#fff;font-size:42px;letter-spacing:.08em;text-shadow:0 0 18px var(--accent)}#overlay-description{margin:0 auto 18px;max-width:350px;color:#a6adc1;line-height:1.6}.primary-button,.score-fields button{padding:11px 18px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:white;font-weight:700;letter-spacing:.08em}.primary-button:hover,.score-fields button:hover{filter:brightness(1.18)}#overlay-status{min-height:16px;margin:10px 0 0;color:#a6adc1;font-size:11px}
#score-form{margin-top:18px;padding-top:16px;border-top:1px solid #2b2f42;text-align:left}#score-form[hidden]{display:none}#score-form label{display:block;margin-bottom:8px;color:#a6adc1;font-size:10px}.score-fields{display:flex;gap:7px}.score-fields input{min-width:0;flex:1;padding:10px;border:1px solid #373d55;border-radius:8px;background:#090b14;color:white;outline:none}.score-fields input:focus{border-color:var(--accent)}.score-fields button{font-size:10px;white-space:nowrap}
#death-quip{margin:0 0 16px;padding:12px;border:1px solid #f46b9666;border-radius:8px;background:#31122599;color:#ffd2df;font-size:12px;line-height:1.5;text-align:left}#death-quip[hidden]{display:none}.game-overlay.is-game-over{background:rgba(18,4,13,.82)}.game-overlay.is-game-over .overlay-card{border-color:#ff6c9b;box-shadow:0 0 50px #ff4b8255;animation:death-card-in .55s cubic-bezier(.2,1.6,.3,1) both}.game-overlay.is-game-over .eyebrow{color:#ff93b0}.game-overlay.is-game-over h1{font-size:clamp(26px,4vw,39px);color:#fff0f5;text-shadow:0 0 18px #ff4d82}.game-overlay.is-game-over .primary-button{border-color:#ff6c9b;background:#b8305d}@keyframes death-card-in{from{opacity:0;transform:translateY(-55px) rotate(-4deg) scale(1.15)}to{opacity:1;transform:translateY(0) rotate(0) scale(1)}}
body.returning-home::after{content:'WRONG WAY →';position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:#050510;color:#fff;font-size:clamp(28px,7vw,72px);font-weight:700;letter-spacing:.15em;animation:wrong-way-in .5s ease-out both}@keyframes wrong-way-in{from{opacity:0;transform:translateX(-100%)}to{opacity:1;transform:translateX(0)}}
.game-footer{display:flex;justify-content:space-between;gap:10px;margin-top:10px;color:#77809a;font-size:10px;letter-spacing:.12em}
.game-side{display:grid;align-content:start;gap:14px}.side-panel{padding:18px;border:1px solid #262b3d;border-radius:13px;background:#0b0e18}.side-title{display:flex;justify-content:space-between;align-items:center;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.1em}.side-title button{border:0;background:none;color:#9da5bb;font-size:20px}.side-title button:hover{color:white}#leaderboard-list{display:grid;gap:7px;min-height:100px;margin:15px 0 0;padding:0;list-style:none}#leaderboard-list li:not(.empty-board){display:grid;grid-template-columns:25px 1fr auto;gap:7px;padding:9px 8px;border:1px solid #222638;border-radius:7px;color:#9da5bb}#leaderboard-list li:nth-child(1){border-color:#645621;color:#f9d970}#leaderboard-list strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e2e5f0}.empty-board{color:#7b839b;line-height:1.5}.side-note{margin:13px 0 0;color:#737b94;font-size:10px;line-height:1.6}.controls-panel p{margin:15px 0 0;color:#a7aec0;font-size:11px;line-height:1.7}kbd{display:inline-block;min-width:24px;padding:2px 5px;border:1px solid #3b4156;border-radius:5px;background:#171b29;text-align:center;color:#ddd}
.touch-controls{display:none;justify-content:space-between;gap:18px;margin-top:14px}.touch-controls>div{display:flex;gap:10px}.touch-controls button{min-width:58px;min-height:56px;border:1px solid #454b69;border-radius:12px;background:#111627;color:#d6daea;font-size:20px;touch-action:none;user-select:none}.touch-controls .jump-control{min-width:92px;border-color:var(--accent);color:var(--accent);font-size:12px;font-weight:700}.touch-controls button.pressed{background:var(--accent);color:white}
@media(max-width:1000px){.game-layout{grid-template-columns:1fr}.game-side{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.game-header{padding:13px 16px}.header-right{display:none}.game-brand{font-size:13px}.game-brand small{font-size:8px}.game-layout{padding:12px;gap:14px}.game-hud{gap:5px}.game-hud>div{padding:8px}.game-hud small{font-size:7px}.game-hud strong{font-size:12px}.canvas-shell{border-radius:9px}.canvas-shell canvas{position:absolute;left:0;top:-25%;width:135%;height:135%}.touch-controls{display:flex}.game-side{grid-template-columns:1fr}.overlay-card{padding:13px}.overlay-card h1{font-size:24px}.overlay-card #overlay-description{font-size:9px;margin-bottom:10px}.overlay-card .eyebrow{font-size:8px}.primary-button{padding:7px 10px;font-size:10px}.score-fields input,.score-fields button{padding:7px}.game-footer{font-size:8px}}
@media(max-width:650px){#boss-mobile-panel:not([hidden]){display:block}}
@media(max-width:380px){.touch-controls button{min-width:51px;min-height:51px}.touch-controls .jump-control{min-width:78px}.game-hud strong{font-size:11px}}
@media(max-width:380px){.game-header{gap:5px;padding:10px}.back-link{font-size:9px}.game-brand{font-size:11px}.game-brand small{display:none}.status-dot{width:6px;height:6px;margin-right:3px}.sound-toggle{padding:6px;font-size:8px}}
@media(max-width:650px){.game-overlay.is-game-over{position:fixed;inset:0;z-index:100;padding:18px}.game-overlay.is-game-over .overlay-card{width:min(100%,430px);max-height:90dvh;padding:20px}.game-overlay.is-game-over .overlay-card h1{font-size:clamp(25px,7vw,36px)}.game-overlay.is-game-over #overlay-description{font-size:11px}.game-overlay.is-game-over #death-quip{font-size:11px}.game-overlay.is-game-over .primary-button{font-size:11px;padding:11px 15px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
