:root{font-family:Inter,ui-rounded,SF Pro Rounded,Arial Rounded MT Bold,system-ui,sans-serif;color:#073d27;background:#0aa5d7;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}html,body,#app,#game{width:100%;height:100%;margin:0;overflow:hidden}body{position:fixed;inset:0;overscroll-behavior:none}#app{position:relative;background:linear-gradient(#12b8f2,#39c4e2 42%,#147a78)}.dance-pad{position:absolute;inset:0;z-index:3;display:block;width:100%;height:100%;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}#game canvas{display:block;width:100%;height:100%}.hud{position:absolute;top:calc(12px + var(--safe-top));left:12px;right:12px;z-index:5;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;pointer-events:none}.score-pill,.name-pill,.sound-button{min-height:46px;border:2px solid rgb(255 255 255 / .46);background:#04372bad;color:#fffbe8;box-shadow:0 12px 24px #002a362e;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.score-pill{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-width:92px;padding:7px 13px 7px 9px;border-radius:999px;font-size:clamp(24px,7vw,34px);font-weight:900;line-height:1;text-shadow:0 2px 0 rgb(0 0 0 / .22)}.coin{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(#ffec5e,#ffad1f);color:#fff8b5;-webkit-text-stroke:1.5px #c97806;box-shadow:inset 0 -3px #84510038;font-size:25px}.name-pill{justify-self:center;display:inline-flex;align-items:center;gap:9px;max-width:42vw;padding:6px 15px 6px 8px;border-radius:999px;background:#fff9cee6;color:#06442b;font-size:clamp(23px,7vw,34px);font-weight:950;letter-spacing:0;box-shadow:0 12px 24px #002a362e,inset 0 -3px #ae862d2e}.name-pill img{width:38px;height:38px;flex:0 0 auto}.sound-button{justify-self:end;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;padding:0;pointer-events:auto;font:inherit;font-size:26px;font-weight:950}.prompt{position:absolute;left:50%;bottom:calc(20px + var(--safe-bottom));z-index:6;transform:translate(-50%);width:min(92vw,510px);min-height:74px;display:grid;place-items:center;padding:12px 18px;border:3px solid rgb(255 255 255 / .54);border-radius:28px;background:linear-gradient(#c9fb31,#69ce12);color:#fff;text-align:center;text-transform:uppercase;font-size:clamp(24px,7vw,38px);line-height:.98;font-weight:1000;text-shadow:0 4px 0 #075529,0 0 1px #075529;box-shadow:0 16px #936018,0 26px 34px #002a1b52,inset 0 5px #ffffff7a;pointer-events:none}.prompt.pop{animation:prompt-pop .52s cubic-bezier(.2,1.35,.2,1)}.burst-text{position:absolute;left:50%;top:26%;z-index:6;transform:translate(-50%,-50%) scale(.6) rotate(-6deg);opacity:0;color:#fff9b7;font-size:clamp(48px,16vw,92px);line-height:.9;font-weight:1000;letter-spacing:0;text-align:center;text-shadow:0 6px 0 #087444,0 12px 22px rgb(0 46 46 / .24);-webkit-text-stroke:2px #075d3d;pointer-events:none}.burst-text.on{animation:burst-word 1.18s cubic-bezier(.16,1.28,.25,1) both}.flash{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;background:radial-gradient(circle at var(--tap-x, 50%) var(--tap-y, 50%),rgb(255 255 255 / .78),transparent 16%),radial-gradient(circle at var(--tap-x, 50%) var(--tap-y, 50%),rgb(208 255 47 / .5),transparent 34%)}.flash.on{animation:flash .56s ease-out}@keyframes prompt-pop{0%{transform:translate(-50%) translateY(0) scale(1)}45%{transform:translate(-50%) translateY(-8px) scale(1.1) rotate(-1deg)}to{transform:translate(-50%) translateY(0) scale(1)}}@keyframes burst-word{0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-10deg)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.08) rotate(5deg)}70%{opacity:1;transform:translate(-50%,-64%) scale(1) rotate(-2deg)}to{opacity:0;transform:translate(-50%,-82%) scale(.86) rotate(8deg)}}@keyframes flash{0%{opacity:.86}to{opacity:0}}@media(max-width:360px){.hud{left:8px;right:8px}.name-pill{max-width:39vw;padding-right:11px}.name-pill img{width:32px;height:32px}.sound-button{width:44px;height:44px}}