:root{--bg:#0d0f1a;--bg-2:#151a2e;--panel:#ffffff0d;--panel-border:#ffffff17;--text:#e8eaf6;--muted:#8d93b5;--accent:#a78bfa;--accent-2:#22d3ee;--radius:18px;--gap:6%;--board-size:min(92vw, 60vh, 480px);--dur-pop:.26s;--dur-fall:.32s;--dur-snap:.18s;--c0-a:#ff8a9a;--c0-b:#e11d48;--c0-glow:#f43f5e8c;--c1-a:#ffe08a;--c1-b:#f59e0b;--c1-glow:#f59e0b80;--c2-a:#86efac;--c2-b:#059669;--c2-glow:#10b98180;--c3-a:#7dd3fc;--c3-b:#2563eb;--c3-glow:#3b82f68c;--c4-a:#d8b4fe;--c4-b:#7c3aed;--c4-glow:#8b5cf68c}*{box-sizing:border-box}html,body{background:radial-gradient(1200px 600px at 20% -10%, #7c3aed38, transparent 60%), radial-gradient(900px 500px at 110% 110%, #22d3ee24, transparent 60%), var(--bg);min-height:100%;color:var(--text);-webkit-tap-highlight-color:transparent;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}body{min-height:100dvh}.app{width:var(--board-size);padding:max(12px, env(safe-area-inset-top)) 0 24px;gap:14px;margin:0 auto;display:grid}.title{text-align:center;letter-spacing:.02em;margin:4px 0 0;font-size:clamp(1.6rem,6vw,2.2rem);font-weight:800}.title span{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text}.hud{grid-template-columns:repeat(4,1fr);gap:8px;display:grid}.stat{background:var(--panel);border:1px solid var(--panel-border);text-align:center;border-radius:12px;gap:2px;padding:8px 6px;display:grid}.label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.62rem}.value{font-variant-numeric:tabular-nums;font-size:clamp(1rem,4.6vw,1.35rem);font-weight:700}.value.bump{animation:.3s ease-out bump}.mult{color:var(--muted);transition:color .2s}.mult.active{color:var(--accent-2);text-shadow:0 0 12px #22d3eeb3}.moves-low{color:#fb7185}@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.3)}to{transform:scale(1)}}.board-wrap{position:relative}.board{aspect-ratio:1;border-radius:var(--radius);background:linear-gradient(160deg, var(--bg-2), #0b0e1c);border:1px solid var(--panel-border);touch-action:none;-webkit-user-select:none;user-select:none;width:100%;padding:8px;position:relative;box-shadow:0 20px 50px #00000080,inset 0 1px #ffffff0d}.slots{pointer-events:none;grid-template-rows:repeat(6,1fr);grid-template-columns:repeat(6,1fr);display:grid;position:absolute;inset:8px}.slots>div{background:#ffffff06;border-radius:10px;margin:3px}.grid{cursor:grab;border-radius:12px;position:absolute;inset:8px;overflow:hidden}.grid.dragging{cursor:grabbing}.tile{--x:0;--y:0;width:16.6667%;height:16.6667%;padding:var(--gap);transform:translate(calc(var(--x) * 100%), calc(var(--y) * 100%));will-change:transform;position:absolute;top:0;left:0}.tile.anim-snap{transition:transform var(--dur-snap) ease-out}.tile.anim-fall{transition:transform var(--dur-fall) cubic-bezier(.3, .1, .4, 1.25)}.tile.hidden{visibility:hidden}.gem{background:radial-gradient(circle at 32% 28%, #ffffffd9 0 8%, #fff0 30%), linear-gradient(145deg, var(--a), var(--b));width:100%;height:100%;box-shadow:0 0 14px var(--glow), inset 0 -4px 8px #00000040, inset 0 2px 3px #ffffff59;transition:transform var(--dur-pop) ease-in, opacity var(--dur-pop) ease-in, filter var(--dur-pop);border-radius:28%}.c0 .gem{--a:var(--c0-a);--b:var(--c0-b);--glow:var(--c0-glow);border-radius:50%}.c1 .gem{--a:var(--c1-a);--b:var(--c1-b);--glow:var(--c1-glow);border-radius:22%}.c2 .gem{--a:var(--c2-a);--b:var(--c2-b);--glow:var(--c2-glow);border-radius:50% 10%}.c3 .gem{--a:var(--c3-a);--b:var(--c3-b);--glow:var(--c3-glow);border-radius:10% 50%}.c4 .gem{--a:var(--c4-a);--b:var(--c4-b);--glow:var(--c4-glow);border-radius:50% 50% 18% 18%}.tile.pop .gem{opacity:0;filter:brightness(2.2);transform:scale(.1)rotate(45deg)}.tile.hint .gem{animation:.9s ease-in-out infinite alternate hint-glow}@keyframes hint-glow{0%{filter:brightness()}to{filter:brightness(1.45);box-shadow:0 0 22px #fff}}.hint-line{pointer-events:none;border:2px solid #ffffffd9;border-radius:12px;animation:.9s ease-in-out infinite alternate pulse;position:absolute;box-shadow:0 0 18px #22d3eecc,inset 0 0 18px #22d3ee66}@keyframes pulse{0%{opacity:.55}to{opacity:1}}.board.shake{animation:.26s ease-in-out shake}@keyframes shake{25%{transform:translate(-4px)}75%{transform:translate(4px)}}.board.shuffle .tile{animation:.42s ease-out shuffle-in}@keyframes shuffle-in{0%{opacity:0;transform:translate(calc(var(--x) * 100%), calc(var(--y) * 100%)) scale(.3) rotate(-90deg)}}.float-points{color:#fff;text-shadow:0 0 10px #a78bfae6,0 2px 4px #0009;pointer-events:none;z-index:5;font-size:clamp(1rem,5vw,1.4rem);font-weight:800;animation:.8s ease-out forwards float-up;position:absolute;transform:translate(-50%,-50%)}@keyframes float-up{0%{opacity:1;transform:translate(-50%,-50%)scale(.8)}to{opacity:0;transform:translate(-50%,-160%)scale(1.15)}}.toast{border:1px solid var(--panel-border);letter-spacing:.04em;opacity:0;pointer-events:none;z-index:6;background:#0d0f1ae0;border-radius:999px;padding:12px 22px;font-weight:700;transition:opacity .2s,transform .2s;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)scale(.9)}.toast.show{opacity:1;transform:translate(-50%,-50%)scale(1)}.controls{grid-template-columns:1fr 1fr;gap:10px;display:grid}.btn{appearance:none;font:inherit;color:#fff;cursor:pointer;background:linear-gradient(135deg,#8b5cf6,#06b6d4);border:0;border-radius:12px;padding:12px 16px;font-weight:700;transition:transform .12s,filter .12s,opacity .12s;box-shadow:0 8px 22px #7c3aed59}.btn small{opacity:.8;font-weight:500}.btn:hover:not(:disabled){filter:brightness(1.1)}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn:focus-visible{outline-offset:2px;outline:2px solid #fff}.btn.ghost{background:var(--panel);border:1px solid var(--panel-border);box-shadow:none}.help{text-align:center;color:var(--muted);margin:0;font-size:.85rem;line-height:1.4}.overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10;background:#05060cb8;place-items:center;animation:.25s ease-out fade-in;display:grid;position:fixed;inset:0}.overlay[hidden]{display:none}.dialog{text-align:center;border:1px solid var(--panel-border);background:linear-gradient(160deg,#1b2140,#121629);border-radius:22px;gap:8px;width:min(88vw,340px);padding:28px 24px;display:grid;box-shadow:0 30px 80px #0009}.dialog h2{margin:0 0 6px}.final-label{color:var(--muted);margin:0}.final-score{background:linear-gradient(90deg, var(--accent), var(--accent-2));color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:3rem;font-weight:800}.new-record{color:#fde047;text-shadow:0 0 14px #fde04799;margin:0 0 8px;font-weight:800;animation:.6s ease-out 2 bump}@keyframes fade-in{0%{opacity:0}}@media (height>=760px){.app{gap:18px;padding-top:32px}}@media (prefers-reduced-motion:reduce){:root{--dur-pop:0s;--dur-fall:0s;--dur-snap:0s}*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}