@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Mono:wght@500&family=Inter:wght@700;900&display=swap');
:root{--lime:#c9ff46;--orange:#ff6b35;--ink:#07100c;--cream:#f4eedf}*{box-sizing:border-box}body{margin:0;min-height:100vh;color:var(--cream);font-family:Inter,sans-serif;background:radial-gradient(circle at 50% 10%,#294539,#0a130f 70%)}button,a{cursor:pointer}header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 max(18px,4vw);border-bottom:1px solid #ffffff18;background:#07100caa}header a,header button{color:#7f9389;font:500 8px DM Mono;text-decoration:none;letter-spacing:1px}header b{font-size:18px;font-style:italic}header i{color:var(--lime)}header button{border:1px solid #43564d;background:#0b1712;padding:7px;border-radius:4px}main{width:min(980px,94vw);margin:auto}.title{text-align:center;padding:26px 0 18px}.title small{color:var(--lime);font:500 8px DM Mono;letter-spacing:3px}.title h1{font:400 clamp(45px,7vw,74px)/1 Anton;margin:3px 0;text-shadow:4px 4px #000}.title em{color:var(--orange);font-style:normal}.title p{margin:0;color:#91a39a;font-size:11px}.cabinet{border:1px solid #405349;border-radius:10px;background:#0b1712;overflow:hidden;box-shadow:0 25px 70px #0009}.hud{height:48px;display:flex;align-items:center;justify-content:space-around;border-bottom:1px solid #405349;font:500 8px DM Mono;color:#71857b;letter-spacing:1px}.hud span{display:flex;gap:8px;align-items:center}.hud b{color:var(--lime);font-size:17px}.screen{position:relative;height:min(52vw,440px);min-height:340px;overflow:hidden;background:#12251d}.screen canvas{display:block;width:100%;height:100%;touch-action:none}.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#091510e8;backdrop-filter:blur(4px);transition:.25s}.panel.hidden{opacity:0;visibility:hidden}.panel img{width:105px;height:105px;object-fit:cover;border-radius:50%;background:var(--lime);border:4px solid #07100c;box-shadow:0 0 0 2px var(--lime)}.panel h2{font:400 30px Anton;margin:8px 0 0}.panel>p{max-width:390px;text-align:center;color:#9aada3;font-size:11px;margin:2px 20px 15px}.play{min-width:205px;border:0;border-radius:5px;padding:11px 25px 9px;background:var(--lime);color:#09110d;box-shadow:0 5px #6e8c26}.play b,.play small{display:block}.play small{font:500 7px DM Mono;margin-top:2px;opacity:.6}#scoreForm{width:min(330px,85%);margin-bottom:12px}#scoreForm input{width:60%;padding:10px;border:1px solid #53675d;border-radius:4px 0 0 4px;background:#07100c;color:white}#scoreForm button{width:40%;padding:11px 5px;border:0;border-radius:0 4px 4px 0;background:var(--orange);color:white;font-weight:900}#formError{display:block;min-height:12px;color:#ff8260;font:500 8px DM Mono;margin-top:4px}.mobile-control{display:none}.leaderboard{margin:14px 0;display:grid;grid-template-columns:180px 1fr;border:1px solid #34473e;border-radius:8px;background:#09130f;padding:10px 15px}.leaderboard>div{display:flex;flex-direction:column;justify-content:center}.leaderboard>div b{color:var(--lime);font:500 10px DM Mono}.leaderboard>div small{color:#60736a;font:500 8px DM Mono}.leaderboard ol{list-style:none;counter-reset:r;display:grid;grid-template-columns:repeat(2,1fr);gap:0 25px;margin:0;padding:0}.leaderboard li{counter-increment:r;display:grid;grid-template-columns:24px 1fr auto;padding:5px;border-bottom:1px solid #203128;color:#93a59c;font:500 9px DM Mono}.leaderboard li:before{content:counter(r,decimal-leading-zero);color:#52665c}.leaderboard li b{color:white}.leaderboard li span{color:var(--orange)}nav{display:flex;justify-content:center;gap:8px;padding:3px 0 25px}nav a{padding:7px 10px;color:#71847a;text-decoration:none;font:500 8px DM Mono;border-radius:4px}nav a:hover{background:#ffffff0b;color:white}nav a:first-child{color:var(--lime)}
@media(max-width:600px){header{height:45px;padding:0 10px}header b{font-size:13px}header a{font-size:7px}.title{padding:12px 0 10px}.title h1{font-size:40px}.title p{font-size:9px}main{width:100%}.cabinet{border-radius:0;border-inline:0}.screen{height:calc(100svh - 213px);min-height:350px}.mobile-control{display:block;position:absolute;left:14px;bottom:18px;z-index:5;pointer-events:none}.mobile-control button{pointer-events:auto;width:70px;height:70px;border-radius:50%;border:3px solid #07100c;background:#c9ff46d9;color:#07100c;font-size:25px;box-shadow:0 0 0 2px var(--lime),0 5px #0008}.mobile-control b{display:block;font:900 8px Inter}.cabinet{position:relative}.hud{padding:0 3px}.hud span{gap:3px;font-size:6px}.hud b{font-size:13px}.leaderboard{grid-template-columns:1fr;margin:8px 0;border-inline:0;border-radius:0}.leaderboard>div{flex-direction:row;justify-content:space-between;margin-bottom:6px}.leaderboard ol{grid-template-columns:1fr 1fr;gap:0 12px}nav{overflow-x:auto;justify-content:flex-start;padding:4px 8px 18px}nav a{flex:0 0 auto}}
@media(max-height:650px) and (max-width:600px){.title{display:none}.screen{height:calc(100svh - 93px)}.leaderboard{display:none}}
.hud #shield{color:#c68cff;text-shadow:0 0 8px #9c45ff}
.runner-tutorial{position:absolute;z-index:12;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#091510f5;backdrop-filter:blur(5px);padding:12px;transition:.25s}.runner-tutorial.closed{opacity:0;visibility:hidden;pointer-events:none}.runner-skip{position:absolute;top:10px;right:10px;border:1px solid #53675d;border-radius:4px;padding:7px 10px;background:#08110d;color:#8ea198;font:500 8px DM Mono}.runner-kicker{color:var(--lime);font:500 8px DM Mono;letter-spacing:3px;margin-bottom:4px}.runner-slides{position:relative;width:min(520px,92%);height:235px}.runner-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transform:translateX(18px);pointer-events:none;transition:.25s}.runner-slide.active{opacity:1;transform:none;pointer-events:auto}.runner-slide h2{font:400 29px Anton;margin:2px 0}.runner-slide>small{color:var(--orange);font:500 8px DM Mono;letter-spacing:2px}.runner-slide p{max-width:410px;margin:2px 10px;text-align:center;color:#9aada3;font-size:11px;line-height:1.45}.runner-character{width:116px;height:120px;object-fit:contain;filter:drop-shadow(0 6px 3px #0008)}.wizard-card{width:128px}.runner-nav{display:flex;align-items:center;gap:15px}.runner-nav>button{width:34px;height:32px;border:1px solid #405349;border-radius:4px;background:#0c1b15;color:white;font-size:20px}.runner-nav>div{display:flex;gap:7px}.runner-nav>div button{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#52665c}.runner-nav>div button.active{background:var(--lime);box-shadow:0 0 8px var(--lime)}.runner-done{margin-top:9px;min-width:190px;padding:10px;border:0;border-radius:5px;background:var(--lime);color:#07100c;font-weight:900;box-shadow:0 4px #6e8c26}.prop-row,.pickup-row{display:flex;align-items:center;justify-content:center;height:118px;gap:6px}.prop{display:block;width:105px;height:105px;background-image:url('assets/bench-props-sheet.webp');background-size:300% 200%;filter:drop-shadow(0 5px 2px #0008)}.prop.cap{background-position:0 0}.prop.iron{background-position:50% 0}.prop.board{background-position:50% 100%}.prop.chip{background-position:0 100%}.pickup-row b{color:var(--lime);font:400 34px Anton}.speed-card{position:relative;display:flex;align-items:center;gap:13px;height:115px;color:var(--lime);font:400 39px Anton}.speed-card i{color:var(--orange);font-style:normal}.speed-card span{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);color:#7d9187;font:500 8px DM Mono;letter-spacing:3px}
@media(max-width:600px){.runner-tutorial{justify-content:flex-start;padding-top:30px}.runner-slides{height:min(49svh,285px);min-height:225px}.runner-slide h2{font-size:27px}.runner-slide p{font-size:10px;max-width:330px}.runner-character{width:108px;height:112px}.prop{width:82px;height:82px}.prop-row,.pickup-row{height:108px}.runner-done{margin-top:7px}.runner-nav>button{width:42px;height:38px}.runner-skip{min-width:52px;min-height:36px}}
.how-to-play{margin-top:11px;padding:8px 16px;border:1px solid #53675d;border-radius:4px;background:#08110d;color:#aebdb6;font:500 8px DM Mono;letter-spacing:1.5px}.how-to-play:hover{color:var(--lime);border-color:var(--lime)}

@media(max-width:600px){body{min-height:100dvh;overflow-x:hidden}header{height:48px;padding:env(safe-area-inset-top) 10px 0}header b{font-size:12px}.title{padding:10px 8px 8px}.title h1{font-size:38px}.title p{font-size:8px}.screen{height:calc(100dvh - 181px);min-height:420px;max-height:650px}.panel{padding:10px;overflow-y:auto;overscroll-behavior:contain}.panel img{width:80px;height:80px}.panel h2{font-size:27px;margin-top:6px}.panel>p{font-size:10px;margin:2px 14px 10px}.play{min-height:44px}.how-to-play{min-height:38px}.mobile-control{left:12px;bottom:14px}.mobile-control button{width:62px;height:62px}.leaderboard{padding:8px 10px}.leaderboard li{font-size:8px;padding:4px 2px}.runner-tutorial{justify-content:center;padding:8px;overflow-y:auto;overscroll-behavior:contain}.runner-slides{height:min(52dvh,265px);min-height:205px}.runner-character{width:96px;height:100px}.runner-slide h2{font-size:25px}.runner-slide p{font-size:10px}.prop{width:70px;height:70px}.prop-row,.pickup-row{height:94px}.runner-done{min-height:42px}.runner-nav>button{width:42px;height:40px}}
@media(max-width:420px){.leaderboard ol{grid-template-columns:1fr}.leaderboard li:nth-child(n+6){display:none}nav{white-space:nowrap}}
@media(max-width:390px) and (max-height:720px){.title{display:none}.screen{height:calc(100dvh - 96px);min-height:0}.leaderboard{display:none}.panel img{width:68px;height:68px}.runner-slides{height:min(52dvh,225px);min-height:180px}.runner-character{width:78px;height:82px}.prop{width:60px;height:60px}.prop-row,.pickup-row{height:76px}}
