@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,700;0,800;0,900;1,900&family=Inter:wght@600;700;800&display=swap');
:root{--orange:#ff5a1f;--yellow:#ffd43b;--ink:#f5f4ef;--panel:#11151a}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#080b0e;color:var(--ink);font-family:Inter,Arial,sans-serif;overflow:hidden}
body{display:grid;place-items:center}
.game-shell{position:relative;width:100vw;height:100vh;max-width:1600px;overflow:hidden;background:#10151a;box-shadow:0 0 90px #000}
.topbar{height:74px;display:grid;grid-template-columns:1fr repeat(3,150px) 52px;align-items:center;padding:0 24px;gap:7px;background:#0d1115;border-bottom:1px solid #343b42;position:relative;z-index:20}
.brand{display:flex;align-items:center;gap:10px;color:white;text-decoration:none;font:800 13px/10px 'Barlow Condensed';letter-spacing:1.5px}.brand i{display:grid;place-items:center;width:45px;height:43px;background:var(--orange);color:#111;font:900 italic 20px 'Barlow Condensed';transform:skew(-8deg)}.brand b{font-size:20px;color:var(--orange)}
.stat{height:44px;border-left:1px solid #333b42;padding-left:22px;display:grid;grid-template-columns:auto 1fr;align-items:end}.stat small{grid-column:1/-1;color:#7f8a93;font-size:9px;letter-spacing:1.5px}.stat strong{font:800 25px/1 'Barlow Condensed'}.stat em{font:700 normal 8px Inter;color:#717b83;margin:0 0 2px 4px}.stat.combo strong{color:var(--yellow)}
.pause{width:43px;height:43px;border:1px solid #3a444d;background:#1a2026;color:white;font-weight:900;cursor:pointer}
.stage{height:calc(100% - 74px);position:relative;overflow:hidden}.stage>canvas{display:block;width:100%;height:100%;touch-action:none}
.mission{position:absolute;top:22px;left:24px;width:230px;padding:13px 15px;background:#0b1015dc;border-left:4px solid var(--orange);box-shadow:0 8px 25px #0006}.mission>span{display:block;color:var(--orange);font-size:9px;font-weight:800;letter-spacing:1.7px}.mission>b{font:800 16px 'Barlow Condensed';letter-spacing:.5px}.mission>div{height:6px;margin-top:9px;background:#343a3f}.mission>div i{display:block;height:100%;width:0;background:var(--orange);transition:width .3s}.mission>small{display:block;text-align:right;color:#89939a;font-size:8px;margin-top:5px}.mission em{color:white;font-style:normal}
.minimap{position:absolute;right:22px;top:22px;width:154px;background:#0a0e12dd;border:2px solid #4a535b;box-shadow:0 8px 25px #0008}.minimap canvas{width:150px;height:150px;display:block}.minimap b{position:absolute;bottom:7px;left:9px;font:800 9px Inter;letter-spacing:1.5px}
.trick{position:absolute;left:50%;top:18%;transform:translateX(-50%) rotate(-2deg);display:grid;text-align:center;filter:drop-shadow(0 5px 3px #0008);animation:pop .25s ease-out}.trick small{font:800 10px Inter;letter-spacing:4px;color:var(--yellow)}.trick b{font:900 italic 55px/.85 'Barlow Condensed';color:white;text-shadow:3px 3px 0 var(--orange)}.trick em{font:900 normal 22px 'Barlow Condensed';color:var(--yellow)}
.toast{position:absolute;left:50%;bottom:110px;transform:translateX(-50%);background:#111e;border:1px solid var(--orange);padding:10px 18px;font:800 11px Inter;letter-spacing:1px}
.hidden{display:none!important}
.intro{position:absolute;z-index:15;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,#070b0fe8,#070b0f8a 55%,#070b0f45);backdrop-filter:blur(3px)}.intro-card{width:min(520px,90%);margin-left:-28%;padding:42px;border-left:5px solid var(--orange);background:linear-gradient(115deg,#111820f5,#10151be5);box-shadow:25px 30px 60px #0008}.eyebrow{color:var(--orange)!important;font-size:10px!important;font-weight:800!important;letter-spacing:3px}.intro h1{margin:8px 0 17px;font:900 italic clamp(68px,9vw,105px)/.7 'Barlow Condensed';letter-spacing:-3px}.intro h1 em{font-style:inherit;color:var(--orange)}.intro-card>p:not(.eyebrow){max-width:410px;color:#aab2b9;font-size:13px;line-height:1.6}.intro button{width:100%;margin:18px 0;padding:16px 19px;display:flex;justify-content:space-between;border:0;background:var(--orange);color:#111;font:900 17px 'Barlow Condensed';letter-spacing:2px;cursor:pointer;box-shadow:6px 6px 0 #792a0e}.intro button:hover{filter:brightness(1.12)}.keys{display:flex;gap:20px;color:#7f8991;font-size:8px}.keys span{display:flex;align-items:center;gap:4px}.keys kbd{min-width:22px;padding:5px;border:1px solid #515a61;background:#20262b;color:white;text-align:center;border-radius:2px}
.paused{position:absolute;z-index:14;inset:0;display:grid;place-content:center;text-align:center;background:#090d11aa;backdrop-filter:blur(4px)}.paused b{font:900 italic 74px 'Barlow Condensed'}.paused small{color:#aeb5bb}
.mobile-controls{display:none;position:absolute;z-index:10;inset:auto 16px 18px;justify-content:space-between;align-items:end;pointer-events:none}.mobile-controls button{pointer-events:auto;touch-action:none;border:1px solid #ffffff55;background:#111a;color:white;font-weight:900}.dpad{width:150px;height:110px;display:grid;grid-template:repeat(2,55px)/repeat(3,50px)}.dpad button{font-size:17px}.dpad .up{grid-area:1/2}.dpad .left{grid-area:2/1}.dpad .down{grid-area:2/2}.dpad .right{grid-area:2/3}.gas{width:76px;height:76px;border-radius:50%!important;color:var(--orange)!important}.gas small{display:block}
@keyframes pop{from{transform:translateX(-50%) scale(.5) rotate(-8deg);opacity:0}}
@media(max-width:760px),(pointer:coarse){.topbar{height:62px;padding:0 10px;grid-template-columns:1fr repeat(3,62px) 39px}.stage{height:calc(100% - 62px)}.brand span{display:none}.brand i{width:38px;height:37px}.stat{padding-left:8px;height:37px}.stat strong{font-size:18px}.stat em{display:none}.stat small{font-size:7px}.pause{width:36px;height:36px}.mission{top:12px;left:12px;width:190px}.minimap{right:10px;top:10px;transform:scale(.72);transform-origin:top right}.intro-card{margin:0;padding:28px}.intro h1{font-size:65px}.keys{gap:8px;flex-wrap:wrap}.mobile-controls{display:flex}.trick b{font-size:42px}}