:root{--bg:#0d0618;--panel:#1a0c30e0;--panel-solid:#1a0c30;--pink:#ff9ecd;--pink-hot:#ff6eb4;--purple:#c9a0ff;--gold:#ffe29a;--text:#fff8ff;--muted:#c9b8e8;--danger:#ff4d6d;--ok:#7dffb3;--shadow:0 12px 40px #00000073;--radius:20px;--font-display:"Outfit", system-ui, sans-serif;--font-body:"Nunito", system-ui, sans-serif;color-scheme:dark}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);width:100%;height:100%;font-family:var(--font-body);color:var(--text);-webkit-font-smoothing:antialiased;touch-action:none;user-select:none;overflow:hidden}#app{width:100%;height:100%;position:relative}#game-canvas{touch-action:none;width:100%;height:100%;display:block}#ui-root{pointer-events:none;z-index:10;position:absolute;inset:0}#ui-root .interactive{pointer-events:auto}.hud{padding:max(12px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));pointer-events:none;flex-direction:column;justify-content:space-between;display:flex;position:absolute;inset:0}.hud-top{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.hud-card{background:var(--panel);-webkit-backdrop-filter:blur(12px);box-shadow:var(--shadow);border:1px solid #c9a0ff40;border-radius:16px;min-width:100px;padding:10px 16px}.hud-card .label{letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-size:.7rem;font-weight:700}.hud-card .value{font-family:var(--font-display);color:var(--gold);text-shadow:0 0 20px #ffe29a59;font-size:1.65rem;font-weight:800;line-height:1.15}.hud-card .sub{color:var(--pink);min-height:1.1em;font-size:.8rem;font-weight:700}.next-preview{align-items:center;gap:10px;display:flex}.next-swatch{border:2px solid #ffffff59;border-radius:50%;width:42px;height:42px;position:relative;overflow:hidden;box-shadow:0 0 16px #ff9ecd66}.next-swatch:after{content:"";background:#ffffff8c;border-radius:50%;width:28%;height:22%;position:absolute;top:18%;left:22%}.hud-actions{pointer-events:auto;gap:8px;display:flex}.icon-btn{background:var(--panel);width:46px;height:46px;color:var(--text);cursor:pointer;backdrop-filter:blur(10px);border:1px solid #c9a0ff4d;border-radius:14px;place-items:center;font-size:1.15rem;transition:transform .12s,background .12s;display:grid}.icon-btn:hover{background:#502878d9;transform:scale(1.06)}.icon-btn:active{transform:scale(.96)}.combo-banner{font-family:var(--font-display);color:var(--pink-hot);text-shadow:0 0 24px #ff6eb4b3;opacity:0;pointer-events:none;white-space:nowrap;font-size:clamp(1.2rem,4vw,1.8rem);font-weight:800;transition:opacity .15s;position:absolute;top:22%;left:50%;transform:translate(-50%)}.combo-banner.show{opacity:1;animation:.45s combo-pop}@keyframes combo-pop{0%{transform:translate(-50%)scale(.6)}60%{transform:translate(-50%)scale(1.12)}to{transform:translate(-50%)scale(1)}}.danger-timer{font-family:var(--font-display);color:var(--danger);text-shadow:0 0 16px #ff4d6dcc;opacity:0;pointer-events:none;font-size:1.4rem;font-weight:800;position:absolute;top:12%;left:50%;transform:translate(-50%)}.danger-timer.show{opacity:1;animation:.5s infinite alternate pulse-danger}@keyframes pulse-danger{0%{transform:translate(-50%)scale(1)}to{transform:translate(-50%)scale(1.08)}}.drop-hint{bottom:max(18px, env(safe-area-inset-bottom));color:var(--muted);background:var(--panel);opacity:.85;pointer-events:none;white-space:nowrap;border:1px solid #c9a0ff33;border-radius:999px;padding:8px 16px;font-size:.85rem;position:absolute;left:50%;transform:translate(-50%)}.overlay{pointer-events:auto;opacity:0;visibility:hidden;z-index:30;background:radial-gradient(#281046b8,#080410eb);justify-content:center;align-items:center;padding:20px;transition:opacity .3s,visibility .3s;display:none;position:absolute;inset:0;overflow-y:auto}.overlay.visible{opacity:1;visibility:visible;display:flex}.panel{border-radius:var(--radius);width:min(420px,100%);box-shadow:var(--shadow), 0 0 60px #9b6dff2e;text-align:center;background:linear-gradient(160deg,#2a1448f2,#140a28fa);border:1px solid #ff9ecd47;padding:28px 26px 24px}.panel h1{font-family:var(--font-display);background:linear-gradient(120deg,#ffe29a,#ff9ecd,#c9a0ff);color:#0000;letter-spacing:-.02em;background-clip:text;margin-bottom:4px;font-size:clamp(2rem,8vw,2.75rem);font-weight:800}.panel .tagline{color:var(--muted);margin-bottom:22px;font-size:1rem;font-weight:600}.panel h2{font-family:var(--font-display);color:var(--gold);margin-bottom:10px;font-size:1.6rem;font-weight:700}.panel p{color:var(--muted);margin-bottom:14px;font-size:.95rem;line-height:1.5}.btn-row{flex-direction:column;gap:10px;margin-top:8px;display:flex}.btn{appearance:none;font-family:var(--font-body);cursor:pointer;border:none;border-radius:14px;padding:14px 20px;font-size:1.05rem;font-weight:800;transition:transform .12s,box-shadow .12s,filter .12s}.btn:hover{filter:brightness(1.08);transform:translateY(-2px)}.btn:active{transform:translateY(0)scale(.98)}.btn-primary{color:#1a0b2e;background:linear-gradient(135deg,#ff9ecd,#c77dff);box-shadow:0 6px 24px #ff6eb459}.btn-secondary{color:var(--text);background:#c9a0ff26;border:1px solid #c9a0ff59}.btn-ghost{color:var(--muted);background:0 0;border:1px solid #0000}.menu-hero{background:radial-gradient(circle at 35% 30%,#fff6c8,#ff9ecd 45%,#7b5cff);border-radius:50%;width:96px;height:96px;margin:0 auto 16px;animation:3s ease-in-out infinite floaty;position:relative;box-shadow:0 0 40px #ff9ecd8c}.menu-hero:before,.menu-hero:after{content:"";background:#2a1840;border-radius:50%;width:12px;height:14px;position:absolute;top:38%}.menu-hero:before{left:28%}.menu-hero:after{right:28%}@keyframes floaty{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}.tutorial-step{text-align:left;background:#ffffff0a;border:1px solid #c9a0ff1f;border-radius:12px;margin-bottom:10px;padding:12px 14px}.tutorial-step strong{color:var(--pink);margin-bottom:4px;font-size:.95rem;display:block}.tutorial-step span{color:var(--muted);font-size:.88rem;line-height:1.4}.settings-row{text-align:left;border-bottom:1px solid #c9a0ff1f;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;display:flex}.settings-row label{color:var(--text);font-size:.95rem;font-weight:700}.settings-row select,.settings-row input[type=range]{accent-color:var(--pink)}.settings-row select{color:var(--text);font-family:var(--font-body);background:#0000004d;border:1px solid #c9a0ff4d;border-radius:8px;padding:6px 10px;font-weight:700}.toggle{cursor:pointer;background:#ffffff1f;border:1px solid #c9a0ff4d;border-radius:999px;width:48px;height:28px;transition:background .15s;position:relative}.toggle.on{background:linear-gradient(135deg,#ff9ecd,#c77dff)}.toggle:after{content:"";background:#fff;border-radius:50%;width:20px;height:20px;transition:transform .15s;position:absolute;top:3px;left:3px}.toggle.on:after{transform:translate(20px)}.score-list{text-align:left;max-height:220px;margin:12px 0 18px;list-style:none;overflow-y:auto}.score-list li{border-bottom:1px solid #c9a0ff1a;justify-content:space-between;padding:8px 4px;font-size:.92rem;font-weight:700;display:flex}.score-list .rank{color:var(--purple);width:28px}.score-list .pts{color:var(--gold)}.go-stats{grid-template-columns:1fr 1fr;gap:10px;margin:16px 0;display:grid}.go-stat{background:#ffffff0d;border-radius:12px;padding:12px 8px}.go-stat .n{font-family:var(--font-display);color:var(--gold);font-size:1.4rem;font-weight:800}.go-stat .l{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:.75rem;font-weight:700}.best-badge{color:#1a0b2e;background:linear-gradient(135deg,#ffe29a,#ff9ecd);border-radius:999px;margin-bottom:10px;padding:4px 12px;font-size:.8rem;font-weight:800;display:inline-block}.float-score{font-family:var(--font-display);color:var(--gold);text-shadow:0 2px 8px #00000080;pointer-events:none;z-index:20;font-size:1.25rem;font-weight:800;animation:.9s forwards float-up;position:absolute;top:40%;left:50%}.float-score.combo{color:var(--pink-hot);font-size:1.45rem}@keyframes float-up{0%{opacity:1;transform:translate(-50%)scale(.8)}to{opacity:0;transform:translate(-50%,-60px)scale(1.1)}}.evo-row{flex-wrap:wrap;justify-content:center;gap:6px;margin:12px 0 18px;display:flex}.evo-dot{border:2px solid #ffffff40;border-radius:50%;width:28px;height:28px;box-shadow:0 0 8px #0000004d}body.paused #game-canvas{filter:brightness(.55)saturate(.85)}@media (width<=520px){.hud-card .value{font-size:1.35rem}.hud-card{min-width:80px;padding:8px 12px}.drop-hint{padding:6px 12px;font-size:.75rem}.panel{padding:22px 18px 18px}}@media (height<=500px) and (orientation:landscape){.menu-hero{width:56px;height:56px;margin-bottom:8px}.panel h1{font-size:1.6rem}.panel{padding:14px 18px}}