@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{--bg:#101313;--line:#303735;--lime:#cbfa72;--muted:#84908a}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#edf0e9;font-family:'Space Grotesk',sans-serif;font-size:13px}button,a{-webkit-tap-highlight-color:transparent}button{font:700 11px 'Space Grotesk',sans-serif;cursor:pointer;color:inherit;background:#202724;border:1px solid #465046;padding:13px 18px;letter-spacing:1px}button:hover{border-color:var(--lime);color:var(--lime)}button:focus-visible{outline:3px solid #f9a76a}header{height:89px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:14px;align-items:center;font:900 33px 'Barlow Condensed',sans-serif;text-decoration:none;color:var(--lime)}.brand>span{font:800 22px 'Barlow Condensed';letter-spacing:2px;color:#eef4e9}.brand small{display:block;font:8px 'Space Grotesk';color:var(--muted);letter-spacing:1.5px;margin-top:3px}.live{font-size:10px;letter-spacing:2px;color:#a7b4a9}i{display:inline-block}.live i,.gamebar i{width:6px;height:6px;background:var(--lime);margin-right:9px;box-shadow:0 0 10px #b8fa7270}main{max-width:1320px;padding:40px 52px 0;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px}.eyebrow{color:var(--lime);letter-spacing:2px;font-size:10px}h1{font:900 66px/.91 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:18px 0}em{color:var(--lime);font-style:normal}.intro p{color:#a0aaa4;font-size:13px}.record{width:240px;border-left:1px solid var(--line);padding-left:28px}.record>span,.record small{font-size:9px;letter-spacing:1px;color:var(--muted)}.record strong{display:block;font:700 27px 'Barlow Condensed';margin:10px 0}.xp{height:5px;background:#323d32;margin:12px 0}.xp i{height:100%;background:var(--lime)}.gamebox{border:1px solid #49553e}.gamebar,.status{display:flex;justify-content:space-between;padding:14px 20px;font-size:9px;letter-spacing:1.3px;background:#1d2520;color:#b9c5b6}.gamebar b{color:#63705f;margin:0 10px}.stage{position:relative;background:#0c1722;aspect-ratio:2/1;overflow:hidden}canvas{display:block;width:100%;height:100%;image-rendering:pixelated}#overlay{position:absolute;inset:0;background:linear-gradient(90deg,#07121deb,#09162188 56%,transparent);padding:6% 7%;display:flex;flex-direction:column;align-items:flex-start}.tag{font-size:9px;letter-spacing:3px;color:#b8ceac}h2{font:900 clamp(32px,6vw,84px)/.85 'Barlow Condensed',Impact,sans-serif;margin:16px 0 8px}#overlay p{color:#bdd0c8;font-size:12px}.modes{display:flex;gap:10px;margin:13px 0 20px}.modes button{min-width:155px;text-align:left;padding:14px 18px}.modes button span{display:block;font-size:8px;margin-top:7px;letter-spacing:1px}.primary{background:var(--lime);color:#17210e;border-color:var(--lime)}.primary:hover{background:#e1ffa7;color:#17210e}#overlay>small{font-size:8px;letter-spacing:1px;color:#91a798}#pause{position:absolute;right:15px;top:15px;padding:8px 12px;background:#14202bd9}.status{font-size:8px;background:#18201b;color:#899b8b}#status{color:var(--lime)}.bottom{display:grid;grid-template-columns:1.2fr 1fr;gap:36px;margin-top:30px}.section-title{display:flex;align-items:center;gap:10px;color:#788577;font-size:10px}.section-title h3{font:700 19px 'Barlow Condensed';color:#e0e7db;letter-spacing:.5px;margin:0}.section-title>span{margin-left:auto;font-size:8px;letter-spacing:.8px}.controlrows{margin-top:20px}.controlrows>div{display:flex;align-items:center;gap:18px;margin-bottom:13px;font-size:10px;color:#a9b3a9}.controlrows span{white-space:nowrap}.p1{color:var(--lime)}.p2{color:#fd9b6c}kbd{display:inline-block;background:#242c27;border:1px solid #455044;border-bottom-width:3px;min-width:22px;text-align:center;padding:4px 5px;font:9px 'Space Grotesk';color:#d1dacf;margin-right:4px}.controls p{font-size:10px;line-height:2;color:#7e8d80}.controls p span{margin:0 8px}#shop{display:flex;gap:8px;margin-top:20px}#shop button{flex:1;text-align:left;padding:13px 10px;font-size:9px;letter-spacing:0}#shop b{display:block;color:var(--lime);font-size:18px;margin:8px 0}#shop small{font-size:8px;color:#9aaa98}#shop button:disabled{opacity:.5;cursor:default}footer{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:24px 0;margin-top:25px;font-size:8px;letter-spacing:1px;color:#6f7f72}footer b{color:#a2b299}@media(max-width:760px){main{padding:25px 16px 0}header{padding:0 16px;height:70px}.live{display:none}h1{font-size:48px}.record{width:170px;padding-left:15px}.bottom{grid-template-columns:1fr}.stage{aspect-ratio:1.5}canvas{object-fit:cover}#overlay{padding:5%}h2{font-size:50px}.modes{margin:8px 0;gap:5px}.modes button{min-width:120px;padding:10px}.gamebar,.status{padding:10px;font-size:7px}.controlrows>div{gap:10px}footer span{display:none}#overlay>small{font-size:6px}}

.audio-controls{display:flex;align-items:center;gap:12px}.audio-controls label{font-size:9px;letter-spacing:1px;color:var(--lime)}.audio-controls output{display:inline-block;min-width:30px;color:#a7b4a9;margin-left:6px}.audio-controls input{width:110px;accent-color:var(--lime);cursor:pointer}.stage-actions{position:absolute;right:15px;top:15px;display:flex;gap:6px}.stage-actions #pause{position:static}.stage-actions button{background:#14202be6;padding:8px 12px}#resume[hidden]{display:none}#resume{border-color:var(--lime);color:var(--lime)}.modes{flex-wrap:wrap}@media(max-width:760px){.audio-controls{gap:6px}.audio-controls input{width:65px}.audio-controls label{font-size:8px}.audio-controls button{padding:10px 6px}.brand small{display:none}.stage-actions{right:8px;top:8px}.modes button{min-width:105px;padding:8px}#overlay:has(#resume:not([hidden])) h2{font-size:40px}}
html,body{width:100%;height:100%;overflow:hidden;background:#08121b}.stage{position:relative;width:100%;height:100dvh;aspect-ratio:auto;display:grid;place-items:center}main.stage{max-width:none;padding:0;margin:0}#game{width:100%;height:100%;object-fit:contain;outline:none}#overlay{padding:20px;align-items:center;justify-content:center;background:linear-gradient(110deg,#07121af5,#102432dc);z-index:2}.menu-shell{width:min(920px,100%);max-height:100%;display:flex;flex-direction:column;border:1px solid #46604f;background:#101d23ed;box-shadow:12px 12px 0 #04101960}.menu-shell header{height:auto;padding:18px 28px;flex-shrink:0}.brand{color:var(--lime)}#status{font-size:9px;color:#a8c295}nav{display:flex;gap:4px;padding:10px 28px;border-bottom:1px solid #344a40;flex-shrink:0}nav button{flex:1;background:transparent;border-color:transparent;padding:10px 5px}nav button.selected{color:var(--lime);border-color:var(--lime)}.menu-panel{padding:25px 35px;overflow:auto;min-height:0;flex:1}.menu-panel h3{font:700 30px 'Barlow Condensed',Impact,sans-serif;margin:10px 0 20px}.menu-panel h2{font-size:clamp(46px,10vh,86px);margin:20px 0}.menu-panel p{font-size:12px;line-height:1.9;color:#a7bcae}.menu-panel>small{font-size:8px;color:#8da594;letter-spacing:1px}.menu-shell footer{margin:0;padding:15px 28px;flex-shrink:0}.menu-panel .record{border:0;padding:0;width:auto}.menu-panel .record .xp{max-width:450px}.menu-panel .upgrades{margin-top:25px}.menu-panel .audio-controls{flex-direction:column;align-items:stretch;gap:25px;max-width:400px;padding:20px 0}.audio-controls input{width:100%}.audio-controls label{font-size:12px}.audio-controls output{float:right}.audio-controls button{align-self:flex-start}.stage-actions{z-index:1}.custom-layout{display:grid;grid-template-columns:190px 1fr;gap:30px;align-items:center}.custom-layout>div:first-child{text-align:center}#character-preview{width:160px;height:180px;image-rendering:pixelated;background:#193138;border:1px solid #405e4c}.custom-layout p{font-size:8px;letter-spacing:1px;color:var(--lime)}.custom-fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}.custom-fields label{display:flex;flex-direction:column;gap:7px;font-size:9px;color:#9db69d;letter-spacing:1px}select,input[type=number]{width:100%;background:#20332f;color:#e7efdf;border:1px solid #50654e;padding:10px;min-width:0;font:12px 'Space Grotesk',sans-serif}[hidden]{display:none!important}@media(max-height:650px){#overlay{padding:8px}.menu-shell header{padding:10px 24px}nav{padding:5px 24px}.menu-panel{padding:15px 28px}.menu-panel h2{margin:12px 0}.menu-shell footer{padding:10px 24px}.modes{margin:15px 0}}@media(max-width:620px){#overlay{padding:8px}.menu-shell header{padding:12px 16px}#status{display:none}nav{padding:6px}nav button{font-size:9px;letter-spacing:0}.menu-panel{padding:20px}.custom-layout{grid-template-columns:105px 1fr;gap:12px}#character-preview{width:105px;height:120px}.custom-fields{gap:10px}.custom-fields label{font-size:8px}select,input[type=number]{padding:8px 3px;font-size:11px}.modes button{min-width:130px;padding:14px}.menu-shell footer{font-size:7px}.controlrows>div{flex-wrap:wrap}.menu-panel .audio-controls input{width:100%}}


.map-picker{display:flex;flex-direction:column;gap:8px;max-width:460px;font-size:9px;letter-spacing:2px;color:var(--lime);margin-top:16px}.map-picker select{font-size:12px;letter-spacing:0;padding:10px;background:#20332f;color:#e7efdf;border:1px solid #50654e}@media(max-height:700px){.menu-panel h2{font-size:52px;margin:10px 0}.map-picker{margin-top:10px}.modes{margin:12px 0}}

.results-screen{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:20px;background:#07131ced;--result-color:#cafa73}.results-card{width:min(620px,100%);max-height:100%;overflow:auto;text-align:center;padding:28px 35px;border:2px solid var(--result-color);background:#122329;box-shadow:10px 10px 0 #0004;animation:results-enter .3s ease-out}.results-card .tag,.results-card h2,#result-icon{color:var(--result-color)}#result-icon{font-size:45px;margin:12px 0}.results-card h2{font-size:clamp(40px,8vw,76px);line-height:1;margin:0;outline:none}.results-card p{color:#a7bcae;font-size:12px;line-height:1.6}.result-score{display:flex;justify-content:center;align-items:center;gap:35px;margin:20px 0}.result-score>div{display:flex;flex-direction:column;gap:5px}.result-score span{font-size:10px;letter-spacing:2px;color:#a7bcae}.result-score strong{font:900 64px 'Barlow Condensed',Impact,sans-serif}.result-score .score-divider{font-size:30px;color:#627b6d}#result-rewards{padding:16px;background:#20372d;color:var(--lime);letter-spacing:2px;font-size:14px}.result-actions{display:flex;justify-content:center;gap:12px;margin-top:22px}#result-save{font-size:10px}@keyframes results-enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@media(max-height:650px){.results-card{padding:16px 28px}#result-icon{font-size:28px;margin:5px}.results-card h2{font-size:48px}.result-score{margin:10px 0}.result-score strong{font-size:48px}.result-actions{margin-top:12px}}@media(prefers-reduced-motion:reduce){.results-card{animation:none}}

.match-settings{display:flex;gap:14px;max-width:460px;margin-top:14px}.match-settings label{flex:1;display:flex;flex-direction:column;gap:6px;font-size:9px;letter-spacing:1px;color:var(--lime)}.menu-panel .rules-note{font-size:9px;line-height:1.5;margin:8px 0}.match-settings input{padding:8px}@media(max-height:760px){.menu-panel h2{font-size:46px;margin:8px 0}.menu-panel .modes{margin:10px 0}.map-picker,.match-settings{margin-top:8px}}