:root{--stone:#171a21;--stone-2:#1f242e;--stone-3:#2b3240;--edge:#3b4455;--moss:#6f9a6a;--chalk:#eef1f6;--chalk-dim:#97a2b5;--gold:#e8bf5a;--radius:14px;--font:"Avenir Next Rounded", ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, sans-serif}*{box-sizing:border-box}html,body{height:100%;overflow:hidden}body{background:radial-gradient(125% 95% at 50% 0%, #232936 0%, var(--stone) 64%);color:var(--chalk);font-family:var(--font);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;margin:0}#app{padding:max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:1.2cqh;display:flex;position:fixed;inset:0;container:stage/size}#sprites{display:none}.dw-sprites{width:0;height:0;position:absolute}#bar{flex:none;justify-content:space-between;align-items:center;gap:10px;width:100%;max-width:620px;display:flex}.brand{align-items:center;gap:8px;min-width:0;display:flex}.mark{width:20px;height:20px;box-shadow:inset 0 0 0 2px var(--edge), 0 0 10px #7896c847;background:radial-gradient(circle at 50% 32%,#55627a 0 42%,#2b3240 44% 100%);border-radius:50%;flex:none}.brand h1,.brand .wordmark{letter-spacing:-.01em;white-space:nowrap;margin:0;font-size:17px;font-weight:800}.modes{background:var(--stone-2);border-radius:999px;gap:4px;padding:3px;display:flex}.modes button{color:var(--chalk-dim);font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:5px 13px;font-size:13px;font-weight:700}.modes button[aria-selected=true]{background:var(--stone-3);color:var(--chalk)}.hud{flex:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;width:100%;max-width:620px;display:grid}.hud-label,.stat-label{letter-spacing:.09em;text-transform:uppercase;color:var(--chalk-dim);font-size:10px;font-weight:700;display:block}.score{font-variant-numeric:tabular-nums;font-size:clamp(22px,5.2cqh,30px);font-weight:800;line-height:1.1}.streak{letter-spacing:.06em;text-transform:uppercase;text-align:center;color:#0000;min-height:18px;font-size:12px;font-weight:800}.streak[data-level=hot]{color:var(--gold)}.streak[data-level=rush]{color:#fff;background:linear-gradient(90deg,#f97b2e,#f0568f);border-radius:999px;padding:3px 10px;animation:.7s ease-in-out infinite pulse}@keyframes pulse{50%{transform:scale(1.07)}}.hud-clock{text-align:right;justify-self:end}.timer{font-variant-numeric:tabular-nums;font-size:17px;font-weight:800}.timer.low{color:#f0568f}.timer-track{background:var(--stone-3);border-radius:999px;width:92px;height:5px;margin-top:4px;display:block;overflow:hidden}.timer-fill{transform-origin:100%;background:linear-gradient(90deg, var(--moss), var(--gold));width:100%;height:100%;display:block}body[data-mode=quiet] .hud-clock{visibility:hidden}main{flex-direction:column;flex:auto;justify-content:center;align-items:center;gap:1.4cqh;width:100%;min-height:0;display:flex}.well{aspect-ratio:1;background:radial-gradient(120% 120% at 50% 0%, #7896c829, transparent 60%), linear-gradient(180deg, var(--stone-3), var(--stone-2));border-radius:20px;width:clamp(180px,min(100%,100cqh - 190px),460px);padding:2.2%;box-shadow:inset 0 2px #ffffff17,inset 0 -14px 26px #00000073,0 12px 30px #0006}.board{touch-action:none;overscroll-behavior:none;user-select:none;cursor:pointer;background:radial-gradient(90% 70% at 50% 110%,#0000008c,#0000 70%),repeating-linear-gradient(90deg,#ffffff04 0 14.2857%,#0000 0 28.5714%),#10131a;border-radius:12px;width:100%;height:100%;position:relative;overflow:hidden}.board.no-anim,.board.no-anim .piece{transition:none!important}.board.shaking{animation:.24s ease-out shake}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(calc(var(--shake,1) * -.9px), calc(var(--shake,1) * .7px))}60%{transform:translate(calc(var(--shake,1) * .8px), calc(var(--shake,1) * -.6px))}}.board.rush{box-shadow:inset 0 0 0 2px #f97b2ea6,inset 0 0 34px #f97b2e4d}.piece{width:14.2857%;height:14.2857%;transform:translate(calc(var(--c,0) * 100% + var(--dx,0px)), calc(var(--r,0) * 100% + var(--dy,0px)));will-change:transform;transition:transform .175s cubic-bezier(.3,.86,.36,1);position:absolute;top:0;left:0}.piece.dragging{z-index:3;transition:none}.piece.falling{transition:transform var(--fall-ms,.175s) cubic-bezier(.25, .05, .7, .38);z-index:1}.piece.landed .art{animation:land var(--land-ms,.14s) cubic-bezier(.2, .7, .4, 1)}@keyframes land{0%{transform:scale(1.14,.84)translateY(6%)}55%{transform:scale(.97,1.04)translateY(-1%)}to{transform:none}}.piece.too-soon .art{animation:.2s ease-out too-soon}@keyframes too-soon{0%,to{transform:none}30%{transform:translate(-2.5%)scale(.96)}65%{transform:translate(2.5%)scale(.96)}}@media (prefers-reduced-motion:reduce){.piece.falling{transition-duration:90ms}.piece.landed .art,.piece.too-soon .art{animation:none}}.piece.shifting{z-index:2;transition:none}.piece .art{filter:drop-shadow(0 2px 3px #00000080);width:88%;height:88%;margin:6%;display:block}.art-vec{width:100%;height:100%;display:block}html[data-pieces=art] .art{background-image:var(--dw-pieces);background-repeat:no-repeat;background-size:300% 200%}html[data-pieces=art] .art-vec{display:none}.piece[data-kind="0"] .art,.legend-item[data-kind="0"] .art{background-position:0 0}.piece[data-kind="1"] .art,.legend-item[data-kind="1"] .art{background-position:50% 0}.piece[data-kind="2"] .art,.legend-item[data-kind="2"] .art{background-position:100% 0}.piece[data-kind="3"] .art,.legend-item[data-kind="3"] .art{background-position:0 100%}.piece[data-kind="4"] .art,.legend-item[data-kind="4"] .art{background-position:50% 100%}.piece[data-kind="5"] .art,.legend-item[data-kind="5"] .art{background-position:100% 100%}.piece.picked .art{animation:.5s ease-in-out infinite bob}.piece.pressed .art{transition:transform 90ms ease-out;transform:scale(.9)}@keyframes bob{50%{transform:scale(1.13)}}.piece.pop .art{animation:pop var(--pop-ms,.23s) cubic-bezier(.22, 1.2, .4, 1) forwards}@keyframes pop{0%{opacity:1;filter:none;transform:scale(1)rotate(0)}16%{opacity:1;filter:brightness(1.2);transform:scale(1.16)rotate(-3deg)}38%{opacity:1;filter:brightness(1.5);transform:scale(1.34)rotate(2deg)}62%{opacity:.92;filter:brightness(1.35);transform:scale(1.1)rotate(0)}to{opacity:0;filter:brightness(1.15);transform:scale(.12)rotate(9deg)}}.piece.pop[data-tier="1"] .art,.piece.pop[data-tier="2"] .art{animation-name:pop-big}.piece.pop[data-tier="3"] .art{animation-name:pop-huge}@keyframes pop-big{0%{opacity:1;filter:none;transform:scale(1)rotate(0)}30%{opacity:1;filter:brightness(1.7);transform:scale(1.55)rotate(-8deg)}58%{opacity:.95;filter:brightness(1.5);transform:scale(1.2)rotate(4deg)}to{opacity:0;filter:brightness(1.2);transform:scale(.1)rotate(14deg)}}@keyframes pop-huge{0%{opacity:1;filter:none;transform:scale(1)rotate(0)}26%{opacity:1;filter:brightness(2.1);transform:scale(1.85)rotate(12deg)}56%{opacity:.95;filter:brightness(1.7);transform:scale(1.35)rotate(-6deg)}to{opacity:0;filter:brightness(1.3);transform:scale(.08)rotate(-24deg)}}.piece.made .art{animation:.42s ease-out made}@keyframes made{0%{transform:scale(1)rotate(0)}40%{transform:scale(1.4)rotate(-12deg)}to{transform:scale(1)rotate(0)}}.burst{border:3px solid var(--gold);border-radius:50%;width:14.2857%;height:14.2857%;animation:.64s cubic-bezier(.16,.9,.3,1) forwards burst;position:absolute;transform:translate(-50%,-50%);box-shadow:0 0 18px #e8bf5a8c,inset 0 0 14px #e8bf5a59}.burst[data-tier="2"]{border-width:4px;border-color:#7ff0fb;box-shadow:0 0 22px #7ff0fb99,inset 0 0 16px #7ff0fb59}.burst[data-tier="3"]{border-width:5px;border-color:#f0568f;box-shadow:0 0 26px #f0568fa6,inset 0 0 18px #f0568f59}@keyframes burst{0%{opacity:.6;transform:translate(-50%,-50%)scale(.35)}14%{opacity:1}to{opacity:0;transform:translate(-50%,-50%)scale(3.4)}}.callout{white-space:nowrap;letter-spacing:.02em;color:var(--gold);text-shadow:0 1px 3px #000000e6;background:#090b10d1;border-radius:999px;padding:3px 10px;font-size:15px;font-weight:800;animation:1s cubic-bezier(.16,.9,.3,1) forwards callout;position:absolute;transform:translate(-50%,-50%)}.callout[data-tier="2"]{color:#7ff0fb;font-size:16px}.callout[data-tier="3"]{color:#f0568f;font-size:17px}@keyframes callout{0%{opacity:0;transform:translate(-50%,-50%)scale(.6)}22%{opacity:1;transform:translate(-50%,-110%)scale(1.12)}70%{opacity:1;transform:translate(-50%,-150%)scale(1)}to{opacity:0;transform:translate(-50%,-210%)scale(1)}}.piece.hinted .art,.piece.missed .art{animation:.62s ease-in-out infinite bob}.piece.hinted:after,.piece.missed:after{content:"";box-shadow:0 0 0 3px var(--gold), 0 0 16px #e8bf5aa6;border-radius:50%;position:absolute;inset:6%}.piece.missed:after{box-shadow:0 0 0 3px #f0568f,0 0 18px #f0568fb3}.piece[data-power="1"]:before,.piece[data-power="3"]:before{content:"";opacity:.92;background:linear-gradient(90deg,#0000,#fff 25% 75%,#0000);border-radius:3px;height:10%;position:absolute;top:45%;left:2%;right:2%}.piece[data-power="2"]:after,.piece[data-power="3"]:after{content:"";opacity:.92;background:linear-gradient(#0000,#fff 25% 75%,#0000);border-radius:3px;width:10%;position:absolute;top:2%;bottom:2%;left:45%}.piece[data-power="4"] .art{filter:drop-shadow(0 0 8px #fff)drop-shadow(0 2px 3px #00000080)}.piece[data-power="4"]:after{content:"";opacity:.42;background:conic-gradient(#e6a417,#17b3c4,#f0568f,#f97b2e,#9b6ff0,#3fbf72,#e6a417);border-radius:50%;animation:2.4s linear infinite spin;position:absolute;inset:4%}@keyframes spin{to{transform:rotate(360deg)}}.floats{pointer-events:none;position:absolute;inset:0}.float{color:var(--chalk);text-shadow:0 2px 6px #000000d9;white-space:nowrap;font-size:15px;font-weight:800;animation:.9s ease-out forwards rise;position:absolute;transform:translate(-50%,-50%)}.float[data-chain="3"]{color:#7ff0fb}.float[data-chain="4"]{color:var(--gold);font-size:17px}.float[data-chain="5"],.float[data-chain="6"]{color:#f0568f;font-size:19px}.float[data-tier="1"]{color:var(--gold);font-size:18px}.float[data-tier="2"]{color:#7ff0fb;font-size:20px}.float[data-tier="3"]{color:#f0568f;font-size:22px}@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%)scale(.8)}20%{opacity:1;transform:translate(-50%,-55%)scale(1.05)}to{opacity:0;transform:translate(-50%,-160%)scale(1)}}.legend{color:var(--chalk-dim);flex-wrap:wrap;justify-content:center;gap:3px 12px;margin:0;font-size:10.5px;font-weight:600;display:flex}.legend-item{align-items:center;gap:4px;display:inline-flex}.legend-item .art{filter:none;flex:none;width:15px;height:15px;margin:0}@container stage (height<=420px){.legend{display:none}}@container stage (height>=700px){.score{font-size:38px}.hud{background:#2b324080;border-radius:16px;padding:10px 14px}main{gap:2.4cqh}}.controls{flex:none;gap:8px;padding-bottom:2px;display:flex}.controls button{font:inherit;cursor:pointer;background:var(--stone-2);color:var(--chalk);border:1px solid var(--edge);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700}.controls button.primary{background:var(--gold);color:#2a2110;border-color:#0000}body[data-mode=today] #hint{display:none}.toast{background:var(--stone-3);color:var(--chalk);border:1px solid var(--edge);opacity:0;pointer-events:none;z-index:5;border-radius:999px;padding:8px 14px;font-size:13px;font-weight:700;transition:opacity .16s,transform .16s;position:fixed;bottom:78px;left:50%;transform:translate(-50%,8px)}.toast.on{opacity:1;transform:translate(-50%)}dialog#done{border:1px solid var(--edge);background:var(--stone-2);color:var(--chalk);border-radius:18px;width:calc(100% - 32px);max-width:360px;padding:0}dialog#done::backdrop{background:#080a0eb8}.done-inner{padding:20px 20px 16px}.done-eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin:0;font-size:10px;font-weight:800}.done-title{margin:4px 0 14px;font-size:20px}.done-stats{text-align:center;grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.stat{background:var(--stone-3);border-radius:12px;padding:10px 4px}.stat-value{font-variant-numeric:tabular-nums;font-size:19px;font-weight:800;display:block}.done-read-note{color:var(--chalk-dim);margin:10px 0 0;font-size:12px;line-height:1.5}.done-shape{white-space:pre-wrap;word-break:break-all;margin:12px 0 0;font-family:inherit;font-size:15px;line-height:1.35}.done-missed{background:#f0568f1f;border-left:3px solid #f0568f;border-radius:8px;margin:12px 0 0;padding:9px 11px;font-size:13px;line-height:1.5}.done-actions{flex-wrap:wrap;gap:8px;margin-top:16px;display:flex}.done-actions button{font:inherit;cursor:pointer;background:var(--stone-3);color:var(--chalk);border:1px solid var(--edge);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:700}.done-actions button.primary{background:var(--gold);color:#2a2110;border-color:#0000}.done-note{color:var(--chalk-dim);margin:12px 0 0;font-size:11.5px;line-height:1.5}#cross-promo{background:var(--stone-3);color:var(--chalk);border:1px solid var(--edge);border-radius:12px;margin-top:14px;padding:10px 12px;text-decoration:none;display:block}.promo-kicker{letter-spacing:.11em;text-transform:uppercase;color:var(--chalk-dim);font-size:9.5px;font-weight:800;display:block}.promo-body{margin-top:3px;font-size:12.5px;line-height:1.45;display:block}@media (prefers-reduced-motion:reduce){.piece,.piece .art,.float,.streak[data-level=rush]{transition:none!important;animation:none!important}.board.shaking{animation:none}.burst{opacity:0;animation:none}.callout{animation:none;transform:translate(-50%,-150%)}}.bar-btn{min-width:34px;min-height:34px;color:var(--chalk-dim);font:inherit;letter-spacing:.06em;cursor:pointer;background:0 0;border:1px solid #e9e7e02e;border-radius:999px;flex:none;padding:6px 10px;font-size:13px;font-weight:800}.bar-btn:hover{color:var(--chalk)}