@import url('./fonts.css');
:root{font-family:Manrope,Arial,sans-serif;color:#fff;--acid:#dafa78;--ink:#202a27}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;background:#aab8b5}body{touch-action:none;user-select:none}button{font:inherit;cursor:pointer;color:inherit;border:0;touch-action:none}button:focus-visible{outline:3px solid var(--acid);outline-offset:5px}button:disabled{opacity:.6;cursor:wait}[hidden]{display:none!important}#game{position:absolute;inset:0;width:100%;height:100%;display:block}.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(#0d181b44,transparent 22%,transparent 66%,#07101170)}header{position:absolute;top:max(20px,env(safe-area-inset-top));left:22px;right:20px;display:flex;align-items:center;justify-content:space-between;z-index:3}.wordmark{font-family:'Barlow Condensed',Impact,sans-serif;font-size:24px;font-weight:800;letter-spacing:3px;line-height:1}.wordmark span{display:block;font-family:Manrope,Arial;font-size:9px;letter-spacing:1.8px;font-weight:700;margin-top:7px}.headbuttons{display:flex;gap:8px}.headbuttons button{width:43px;height:43px;background:#18211e80;border:1px solid #ffffff30;border-radius:50%;font-size:22px;backdrop-filter:blur(6px)}.title{position:absolute;top:17%;left:7%;pointer-events:none;text-shadow:0 3px 24px #14261f80}.eyebrow{font-size:11px;letter-spacing:2.4px;font-weight:800;display:flex;align-items:center;gap:9px}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--acid);box-shadow:0 0 12px #dcfc8e}h1{font:900 clamp(52px,12vw,88px)/.91 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:18px 0 16px}h1 em{font-style:normal;color:var(--acid)}.title p{font-size:14px;font-weight:600;line-height:1.7;margin:0}.startcard{position:absolute;bottom:max(25px,env(safe-area-inset-bottom));left:7%;right:7%;max-width:460px}.instructions{display:flex;gap:24px;margin:0 0 21px}.instructions span{font-size:12px;line-height:1.8;color:#fff9}.instructions b{display:block;font-size:11px;letter-spacing:1px;color:white}.primary{width:100%;padding:19px 20px;background:var(--acid);color:#1c2821;font-size:16px;letter-spacing:1.5px;font-weight:900;border-radius:5px;box-shadow:0 10px 30px #15251950}.primary:active{transform:scale(.98)}.fine{text-align:center;font-size:11px;color:#fffc;margin:14px 0 0}.stats{position:absolute;left:22px;top:96px;text-shadow:0 2px 9px #0007}.stats small{font-size:10px;font-weight:800;letter-spacing:1.4px}.stats b{display:block;font-family:'Barlow Condensed',Impact,sans-serif;font-size:53px;line-height:1.1;font-weight:700}.stats b span{font:600 21px Manrope;opacity:.65;margin-left:3px}.stats p{font-size:11px;margin:8px 0;color:#fffd}.meter{width:104px;height:3px;background:#ffffff45;margin-top:4px;border-radius:3px;overflow:hidden}.meter i{display:block;width:0;height:100%;background:var(--acid);transition:width .2s}.district{position:absolute;top:103px;right:20px;font-size:10px;font-weight:800;letter-spacing:1px;border-bottom:1px solid #ffffff50;padding-bottom:7px;text-shadow:0 2px 10px #0008;max-width:165px;text-align:right}#toast{position:absolute;left:12px;right:12px;top:29%;text-align:center;font:800 27px/.95 'Barlow Condensed',Impact,sans-serif;color:var(--acid);text-shadow:0 2px 10px #111b;letter-spacing:.8px;opacity:0;transform:translateY(10px);transition:opacity .15s,transform .2s;pointer-events:none}#toast.show{opacity:1;transform:translateY(0)}#combo{position:absolute;right:22px;top:139px;font-family:'Barlow Condensed',Impact;font-size:28px;color:var(--acid);text-shadow:0 2px 10px #000a}#controls{position:absolute;inset:0;pointer-events:none}#joystick{position:absolute;left:28px;bottom:max(45px,calc(env(safe-area-inset-bottom) + 28px));width:120px;height:120px;pointer-events:auto;border-radius:50%;border:1px solid #fff5;background:#11211d20;backdrop-filter:blur(3px)}.stickring{position:absolute;inset:19px;border:1px solid #ffffff22;border-radius:50%}#knob{position:absolute;width:48px;height:48px;border:1px solid #fff9;background:#ffffff26;backdrop-filter:blur(6px);border-radius:50%;left:35px;top:35px;box-shadow:0 3px 12px #0002}#joystick>span{position:absolute;bottom:-23px;width:100%;text-align:center;font-size:9px;font-weight:800;letter-spacing:2px;color:#fffa}.actions{position:absolute;right:22px;bottom:max(45px,calc(env(safe-area-inset-bottom) + 28px));display:flex;align-items:flex-end;gap:12px;pointer-events:auto}.actions button{position:relative;width:78px;height:78px;border:1px solid #fff4;background:#172d2588;backdrop-filter:blur(8px);border-radius:50%;overflow:hidden;box-shadow:0 3px 12px #0002;display:flex;align-items:center;justify-content:center;flex-direction:column}.actions #stomp{width:94px;height:94px;background:#dafa78d9;color:#203326;border-color:#e3ff9f}.actions span{font-family:Arial;font-size:36px;line-height:1}.actions b{font-size:9px;font-weight:800;letter-spacing:.7px;margin-top:3px}.actions i{position:absolute;bottom:0;left:0;right:0;pointer-events:none;background:#0e201dc0;height:0%;transition:height .08s}.actions button:active{transform:scale(.94)}.camerahint{position:absolute;bottom:14px;right:22px;font-size:9px;color:#fff8}.modal{position:absolute;inset:0;background:#132720c9;backdrop-filter:blur(15px);z-index:10;display:grid;place-items:center;padding:30px}.modal>div{width:100%;max-width:370px}.modal small{font-size:10px;letter-spacing:1.8px;color:#e6f4dcb0}.modal h2{font:800 65px/.92 'Barlow Condensed',Impact,sans-serif;letter-spacing:-1px;margin:25px 0 28px}.modal h2 span{color:var(--acid)}.modal p{font-size:14px;line-height:1.7;color:#fff9}.secondary{width:100%;padding:17px;background:transparent;border:1px solid #ffffff45;border-radius:5px;font-weight:700;font-size:13px;letter-spacing:1px;margin-top:12px}#hitflash{position:absolute;inset:0;pointer-events:none;border:0 solid #bdebf5;opacity:0;box-shadow:inset 0 0 110px #bdebf540;transition:opacity .1s}body.playing .wordmark{font-size:20px}body.playing .wordmark span{font-size:8px}body.playing .shade{background:linear-gradient(#0d181b40,transparent 22%,transparent 76%,#07101155)}@media(min-width:700px){.title{top:22%;left:7%}h1{font-size:100px}.title p{font-size:16px}.startcard{bottom:6%}.instructions{gap:44px}.instructions span{font-size:14px}header{left:35px;right:35px}.stats{left:35px}.district{right:35px}#joystick{left:55px;bottom:55px}.actions{right:55px;bottom:55px}.camerahint{bottom:25px;right:55px}}@media(max-height:620px){.title{top:17%}h1{font-size:57px;margin:12px 0}.title p{font-size:12px}.startcard{bottom:15px}.instructions{margin-bottom:10px}.primary{padding:15px}.fine{margin-top:8px}#joystick{width:100px;height:100px;bottom:34px;left:20px}#knob{left:25px;top:25px}.actions{bottom:30px}.stats{top:83px}.stats b{font-size:40px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}