:root{--bg: #0b1712;--ink: #eafff4;--muted: rgba(234, 255, 244, .6);--accent: #8fe3c2;--gold: #ffd769;--panel: rgba(12, 26, 20, .86);color-scheme:dark}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{width:100%;height:100%;overflow:hidden;background:var(--bg);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;touch-action:none}#app{position:relative}#game{position:absolute;inset:0;display:block}#ui{position:absolute;inset:0;pointer-events:none;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}.hud-top{position:absolute;top:max(12px,env(safe-area-inset-top));left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;padding:0 14px}.stage{display:flex;flex-direction:column;gap:6px}.stage-name{font-weight:900;font-size:20px;letter-spacing:.3px;text-shadow:0 2px 8px rgba(0,0,0,.5)}.dots{display:flex;gap:5px}.dot{width:8px;height:8px;border-radius:50%;background:#ffffff2e;transition:background .25s,transform .25s}.dot.on{background:var(--accent);transform:scale(1.15);box-shadow:0 0 8px var(--accent)}.mute{pointer-events:auto;border:none;background:#ffffff1a;color:var(--ink);width:40px;height:40px;border-radius:12px;font-size:18px;cursor:pointer;backdrop-filter:blur(6px)}.meter{position:absolute;left:14px;right:14px;bottom:max(18px,env(safe-area-inset-bottom));height:16px;border-radius:999px;background:#ffffff1a;overflow:hidden;box-shadow:inset 0 1px 3px #0006}.meter-fill{height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,#57b892,var(--accent));transition:width .14s ease-out}.meter.frenzied .meter-fill{background:linear-gradient(90deg,#e0a52b,var(--gold));box-shadow:0 0 16px var(--gold)}.frenzy{position:absolute;top:-26px;left:50%;transform:translate(-50%);font-weight:900;font-size:13px;color:var(--gold);letter-spacing:1px;opacity:0;text-shadow:0 0 10px rgba(255,215,105,.8);transition:opacity .2s}.frenzy.on{opacity:1;animation:pulse .6s infinite alternate}@keyframes pulse{to{transform:translate(-50%) scale(1.12)}}.compass{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;transition:opacity .3s}.compass-arrow{position:absolute;left:-14px;top:-128px;font-size:22px;filter:drop-shadow(0 0 8px rgba(255,215,105,.7))}.evolve-flash,.golden-flash{position:absolute;inset:0;pointer-events:none}.evolve-flash{background:radial-gradient(circle at center,rgba(143,227,194,.5),transparent 60%);animation:flash .5s ease-out forwards}.golden-flash{background:radial-gradient(circle at center,rgba(255,215,105,.55),transparent 62%);animation:flash .5s ease-out forwards}@keyframes flash{0%{opacity:0}25%{opacity:1}to{opacity:0}}.banner{position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;animation:banner 1.4s ease-out forwards}.banner-title{font-size:40px;font-weight:900;text-shadow:0 3px 16px rgba(0,0,0,.6)}.banner-sub{font-size:15px;color:var(--muted);margin-top:4px}@keyframes banner{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}20%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,-60%) scale(1)}}.overlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#060e0a8c;backdrop-filter:blur(8px);pointer-events:auto}.overlay.show{display:flex;animation:fade .3s ease-out}@keyframes fade{0%{opacity:0}}.panel{width:min(88vw,380px);background:var(--panel);border:1px solid rgba(143,227,194,.25);border-radius:24px;padding:28px 24px 24px;text-align:center;box-shadow:0 20px 60px #00000080}.logo{font-size:54px;line-height:1}.logo.glow{filter:drop-shadow(0 0 22px var(--gold));animation:pulse 1s infinite alternate}.panel h1{font-size:34px;font-weight:900;margin:8px 0 2px;letter-spacing:.5px}.tag{color:var(--muted);font-size:15px;margin-bottom:16px}.how{list-style:none;text-align:left;display:flex;flex-direction:column;gap:9px;margin:0 auto 20px;max-width:300px;font-size:14.5px;color:#eafff4d9}.how b{color:var(--ink)}.stats{display:flex;gap:12px;justify-content:center;margin:6px 0 18px}.stats div{flex:1;background:#ffffff0f;border-radius:14px;padding:12px 8px;font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:3px}.stats span{font-size:22px;font-weight:900;color:var(--gold)}.btn{pointer-events:auto;display:block;width:100%;margin-top:10px;padding:15px;border:none;border-radius:16px;font-size:17px;font-weight:800;cursor:pointer;background:linear-gradient(180deg,var(--accent),#57b892);color:#06231a;box-shadow:0 8px 20px #57b89259;transition:transform .1s}.btn:active{transform:scale(.97)}.btn.share{background:linear-gradient(180deg,var(--gold),#e0a52b);color:#2a1c00;box-shadow:0 8px 20px #e0a52b59}.win .panel{border-color:#ffd76959}