:root{--bg1:#0b0620;--bg2:#1b0b3a;--bg3:#04202e;--text:#e9e6ff;--muted:#9a93c7;--accent:#ff4fd8;--accent2:#34e7ff;--c0:#ff3d7f;--c1:#ffb13b;--c2:#3dff9e;--c3:#3dc8ff;--c4:#b05cff;--move:.22s;--fall:.32s;--size:min(92vw, 520px, calc(100vh - 260px))}*{box-sizing:border-box}html,body{min-height:100%;color:var(--text);background:radial-gradient(circle at 20% 10%, #3a1170 0%, transparent 45%), radial-gradient(circle at 85% 90%, #06506a 0%, transparent 45%), linear-gradient(160deg, var(--bg1), var(--bg2) 55%, var(--bg3));background-attachment:fixed;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{justify-content:center;display:flex}.app{flex-direction:column;align-items:center;gap:14px;width:100%;max-width:560px;padding:16px 12px 24px;display:flex}.top{width:var(--size);flex-direction:column;gap:10px;min-width:280px;display:flex}.logo{text-align:center;letter-spacing:2px;text-transform:uppercase;color:var(--accent2);text-shadow:0 0 8px var(--accent2), 0 0 24px #34e7ff80;margin:0;font-size:clamp(28px,7vw,40px)}.logo span{color:var(--accent);text-shadow:0 0 8px var(--accent), 0 0 24px #ff4fd880}.hud{grid-template-columns:repeat(3,1fr);gap:8px;display:grid}.stat{text-align:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#ffffff0f;border:1px solid #ffffff1f;border-radius:12px;padding:6px 8px}.stat .label{text-transform:uppercase;letter-spacing:1px;color:var(--muted);font-size:11px;display:block}.stat .value{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700;display:block}.stat .value.bump{animation:.3s bump}@keyframes bump{50%{color:var(--accent2);transform:scale(1.25)}}.board-wrap{width:var(--size);aspect-ratio:1;min-width:280px;position:relative}.board{touch-action:manipulation;-webkit-user-select:none;user-select:none;background:#080418b3;border:1px solid #ffffff1f;border-radius:16px;position:absolute;inset:0;overflow:hidden;box-shadow:0 0 30px #7b3cff59,inset 0 0 40px #0009}.board.shake{animation:.3s board-shake}.pieces,.cells,.fx{position:absolute;inset:0}.pieces,.fx{pointer-events:none}.piece{width:12.5%;height:12.5%;padding:calc(var(--size) * .008);transition:transform var(--move) cubic-bezier(.4, 0, .2, 1);will-change:transform;position:absolute;top:0;left:0}.piece.falling{transition:transform var(--fall) cubic-bezier(.5, 0, .75, 1.2)}.piece.instant{transition:none}.gem{background:radial-gradient(circle at 32% 28%, #ffffffd9 0 8%, transparent 30%), linear-gradient(145deg, color-mix(in srgb, var(--col) 80%, white) 0%, var(--col) 45%, color-mix(in srgb, var(--col) 55%, black) 100%);width:100%;height:100%;box-shadow:0 0 10px var(--col), 0 0 2px var(--col), inset 0 -3px 6px #00000059;border-radius:28%}.c0{--col:var(--c0)}.c1{--col:var(--c1)}.c2{--col:var(--c2)}.c3{--col:var(--c3)}.c4{--col:var(--c4)}.c1 .gem{border-radius:50%}.c2 .gem{border-radius:12%;transform:rotate(45deg)scale(.82)}.c4 .gem{border-radius:50% 12%}.piece.wobble .gem{animation:.3s wobble}.piece.pop .gem{animation:.34s ease-in forwards pop}@keyframes wobble{20%{translate:-12%}40%{translate:12%}60%{translate:-8%}80%{translate:6%}}@keyframes pop{0%{filter:brightness();scale:1}35%{filter:brightness(2.2);box-shadow:0 0 30px var(--col), 0 0 60px var(--col);scale:1.3}to{opacity:0;filter:brightness(3);scale:0}}@keyframes board-shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.cells{grid-template-rows:repeat(8,1fr);grid-template-columns:repeat(8,1fr);display:grid}.cell{cursor:pointer;border-radius:22%;position:relative}.cell.edge{cursor:not-allowed}.cell.edge.hover{background:#ff3c3c1f;box-shadow:inset 0 0 0 2px #ff505080}.cell.cross{background:#ffffff1a;box-shadow:inset 0 0 0 2px #34e7ffbf,0 0 12px #34e7ff73}.cell.center{box-shadow:inset 0 0 0 2px #ff4fd8e6,0 0 14px #ff4fd880}.cell.center:after{content:attr(data-dir);font-size:calc(var(--size) / 16);color:#fff;text-shadow:0 0 6px var(--accent), 0 0 2px #000;pointer-events:none;place-items:center;font-weight:700;display:grid;position:absolute;inset:0}.cell.spin-cw:after{animation:spin-cw var(--move) ease}.cell.spin-ccw:after{animation:spin-ccw var(--move) ease}@keyframes spin-cw{to{transform:rotate(360deg)}}@keyframes spin-ccw{to{transform:rotate(-360deg)}}.float{font-weight:800;font-size:calc(var(--size) / 14);color:#fff;text-shadow:0 0 8px var(--accent2), 0 0 18px var(--accent);white-space:nowrap;animation:.9s ease-out forwards float-up;position:absolute;transform:translate(-50%,-50%)}.float small{color:var(--c1);margin-left:4px;font-size:.55em}@keyframes float-up{0%{opacity:0;translate:0 10px;scale:.6}20%{opacity:1;scale:1.1}to{opacity:0;translate:0 -60px;scale:1}}.overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:5;background:#060212b8;border-radius:16px;place-items:center;animation:.3s fade;display:grid;position:absolute;inset:0}.overlay.hidden,.hidden{display:none}@keyframes fade{0%{opacity:0}}.card{text-align:center;padding:24px 28px}.card h2{color:var(--accent);text-shadow:0 0 12px var(--accent);margin:0 0 6px;font-size:32px}.over-reason{color:var(--muted);margin:0 0 12px}.over-score{margin:0;font-size:22px}.over-score span{color:var(--accent2);text-shadow:0 0 12px var(--accent2);font-size:44px;font-weight:800}.over-best{color:var(--muted)}.new-record{color:var(--c1);text-shadow:0 0 10px var(--c1);font-weight:700;animation:.6s infinite alternate bump}.controls{gap:10px;display:flex}.btn{font:inherit;color:var(--text);cursor:pointer;background:#ffffff12;border:1px solid #fff3;border-radius:999px;padding:10px 18px;font-weight:600;transition:background .15s,box-shadow .15s,transform .1s}.btn:hover{background:#ffffff24;box-shadow:0 0 12px #34e7ff66}.btn:active{transform:scale(.96)}.btn.primary{background:linear-gradient(135deg, var(--accent), #7b3cff);border-color:#0000;box-shadow:0 0 18px #ff4fd88c}.msg{min-height:1.3em;color:var(--c1);text-align:center;margin:0;font-weight:600}.help{max-width:var(--size);color:var(--muted);text-align:center;margin:0;font-size:13px;line-height:1.45}@media (prefers-reduced-motion:reduce){:root{--move:1ms;--fall:1ms}}