:root{color:#f7fbf4;touch-action:none;-webkit-font-smoothing:antialiased;--app-h:100dvh;background:#07100f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}*{box-sizing:border-box}html,body,#app{background:#07100f;width:100%;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none;position:fixed;top:0;bottom:0;left:0;right:0}button{font:inherit;color:inherit}.game-shell{width:100%;height:var(--app-h);background:radial-gradient(circle at 50% 12%,#1e4a3d 0,#07100f 62%);min-height:100svh;max-height:100dvh;position:relative;overflow:hidden}canvas{touch-action:none;width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0}.top-hud{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top));z-index:5;pointer-events:none;max-width:calc(100% - max(20px,env(safe-area-inset-left) + env(safe-area-inset-right)));grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:8px;display:grid;position:absolute}.brand,.meters,.side-hud,.controls button,.card{-webkit-backdrop-filter:blur(18px)saturate(1.25);background:linear-gradient(135deg,#081212c7,#192d278a);border:1px solid #ffffff24;box-shadow:0 18px 50px #00000047}.brand{border-radius:18px;min-width:0;max-width:100%;padding:9px 11px;overflow:hidden}.brand b{letter-spacing:-.04em;white-space:nowrap;font-size:clamp(17px,5vw,20px);display:block}.brand span{color:#b7cbc2;white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:11px;line-height:1.2;display:block;overflow:hidden}.meters{border-radius:18px;grid-template-columns:repeat(4,minmax(36px,auto));align-items:center;gap:5px;max-width:100%;padding:7px;display:grid;overflow:hidden}.meters span{text-align:center;color:#b7cbc2;text-transform:uppercase;letter-spacing:.045em;flex-direction:column;min-width:0;font-size:9px;line-height:1.05;display:flex}.meters b,#dist{color:#fff;letter-spacing:-.02em;white-space:nowrap;font-size:13px}.side-hud{left:max(10px,env(safe-area-inset-left));z-index:5;pointer-events:none;border-radius:18px;width:min(104px,28vw);padding:9px 10px;position:absolute;top:96px}#combo{letter-spacing:-.06em;color:#ffd84f;text-shadow:0 0 22px #ffd84f59;font-size:clamp(22px,7vw,28px);font-weight:950}.side-hud small{color:#c7d8d1;font-size:10px;line-height:1.2;display:block}.controls{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:8;grid-template-columns:1fr 1.12fr 1fr;gap:8px;display:grid;position:absolute}.controls button{letter-spacing:-.03em;touch-action:none;border:0;border-radius:20px;height:clamp(52px,13svh,64px);font-size:clamp(12px,3.5vw,16px);font-weight:950}.signal{color:#10120a;background:linear-gradient(135deg,#ffb82bd1,#ff77309e)!important}.brake{color:#fff;background:linear-gradient(135deg,#ff3b4d,#a61126)!important;font-size:clamp(17px,4.8vw,20px)!important;box-shadow:0 16px 38px #ff3b4d52!important}.panel{z-index:20;padding:max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:radial-gradient(circle at 50% 20%,#54d8ff2b,#00000094 48%,#000000bd);place-items:center;display:grid;position:absolute;top:0;bottom:0;left:0;right:0}.panel[hidden]{display:none}.card{width:min(560px,100%);max-height:calc(var(--app-h) - max(24px,env(safe-area-inset-top)) - max(24px,env(safe-area-inset-bottom)));-webkit-overflow-scrolling:touch;color:#f8fff9;border-radius:28px;padding:clamp(16px,4.5vw,24px);overflow:auto}.eyebrow{color:#54d8ff;text-transform:uppercase;letter-spacing:.16em;margin:0 0 8px;font-size:10px;font-weight:950}.card h1,.card h2{color:#fff;letter-spacing:-.065em;margin:0;line-height:.95}.card h1{font-size:clamp(42px,13vw,88px)}.card h2{font-size:clamp(30px,8vw,58px)}.lead{color:#d8e7df;margin:14px 0;font-size:clamp(14px,3.8vw,16px);line-height:1.44}.fine{color:#9eb3aa;font-size:12px;line-height:1.35}.statgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0;display:grid}.statgrid span{color:#adc2b9;text-transform:uppercase;letter-spacing:.055em;background:#ffffff0d;border:1px solid #ffffff1f;border-radius:16px;min-width:0;padding:10px 8px;font-size:10px}.statgrid b{color:#fff;text-transform:none;letter-spacing:-.04em;text-overflow:ellipsis;margin-top:4px;font-size:18px;display:block;overflow:hidden}.primary,.card button{background:#ffffff1a;border:0;border-radius:17px;width:100%;margin-top:9px;padding:14px 15px;font-weight:900}.primary{color:#061211;box-shadow:0 16px 38px #54d8ff33;background:linear-gradient(135deg,#54d8ff,#55ee9e)!important}.how{gap:8px;margin:16px 0;display:grid}.how div,.stage-list button{text-align:left;background:#ffffff0f;border:1px solid #ffffff1f;border-radius:18px;width:100%;padding:12px 13px;display:block}.how b,.stage-list b{color:#fff;display:block}.how span,.stage-list span,.stage-list small{color:#b9ccc4;margin-top:3px;font-size:13px;line-height:1.3;display:block}.stage-list{gap:9px;margin:14px 0;display:grid}.rank{color:#081211;letter-spacing:-.1em;background:linear-gradient(135deg,#ffd84f,#ff5aa5);border-radius:30px;place-items:center;width:96px;height:96px;margin:16px auto;font-size:58px;font-weight:1000;display:grid;box-shadow:0 20px 60px #ffd84f33}.actions{grid-template-columns:1fr 1fr 1fr;gap:8px;display:grid}.actions button{padding:12px 8px}.toast{z-index:12;color:#fff;text-align:center;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#060e0ed1;border:1px solid #ffffff24;border-radius:999px;max-width:min(86vw,420px);padding:11px 15px;font-weight:850;position:absolute;top:19%;left:50%;transform:translate(-50%);box-shadow:0 15px 45px #00000059}@media (max-width:390px){.top-hud{grid-template-columns:1fr;gap:6px}.brand{max-width:100%;padding:8px 10px}.meters{grid-template-columns:repeat(4,1fr);width:100%;padding:6px}.side-hud{top:126px}.controls{gap:6px}.controls button{border-radius:17px}.card{border-radius:24px}.actions{grid-template-columns:1fr}.statgrid{gap:6px}.lead{margin:12px 0}}@media (max-height:680px){.brand span{display:none}.side-hud{top:78px}.card h1{font-size:clamp(38px,11vw,70px)}.card h2{font-size:clamp(28px,7.5vw,48px)}.how{gap:7px;margin:12px 0}.how div,.stage-list button{padding:10px 12px}.rank{width:82px;height:82px;margin:12px auto;font-size:50px}.controls button{height:50px}.toast{top:16%}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}