:root{--bg:#0b0620;--text:#f1ecff;--muted:#a69cc9;--glass:#ffffff12;--glass-border:#ffffff29;--ok:#3dff8a;--bad:#ff3c5a;--accent:#ff4fd8;--accent2:#4fc3ff;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}html,body{height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;overflow-x:hidden}.bg-glow{z-index:-1;filter:blur(20px);background:radial-gradient(circle at 20% 20%,#ff4fd847,#0000 40%),radial-gradient(circle at 80% 30%,#4fc3ff40,#0000 42%),radial-gradient(circle at 50% 90%,#7a6bff4d,#0000 45%);animation:18s ease-in-out infinite alternate drift;position:fixed;inset:-20%}@keyframes drift{to{transform:translate(3%,-2%)rotate(6deg)}}.glass{background:var(--glass);border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(14px)saturate(140%);box-shadow:0 10px 40px #00000059,inset 0 1px #ffffff14}.app{width:min(100%,640px);padding:max(10px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));flex-direction:column;align-items:center;gap:10px;min-height:100dvh;margin:0 auto;display:flex}.topbar{border-radius:18px;justify-content:space-between;align-items:center;gap:8px;width:100%;padding:8px 12px;display:flex}.title{letter-spacing:.02em;text-transform:uppercase;text-shadow:0 0 12px #ff4fd8b3;margin:0;font-size:1.05rem;font-weight:800;line-height:1.05}.title span{color:var(--accent2);text-shadow:0 0 12px #4fc3ffcc;display:block}.stats{gap:8px;display:flex}.stat{background:#00000040;border-radius:12px;flex-direction:column;align-items:center;min-width:64px;padding:4px 8px;display:flex}.stat-label{text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-size:.65rem}.stat-value{font-variant-numeric:tabular-nums;text-shadow:0 0 10px #ffffff73;font-size:1.25rem;font-weight:800}.actions{gap:6px;display:flex}.icon-btn{border:1px solid var(--glass-border);width:40px;height:40px;color:var(--text);cursor:pointer;background:#ffffff14;border-radius:12px;font-size:1.15rem;transition:transform .15s,background .15s,box-shadow .15s}.icon-btn:hover{background:#ffffff29;box-shadow:0 0 14px #4fc3ff80}.icon-btn:active{transform:scale(.92)}.icon-btn:focus-visible,.primary-btn:focus-visible{outline:2px solid var(--accent2);outline-offset:2px}.board-wrap{width:min(100%,540px,108dvh - 313.2px);min-width:260px;position:relative}.board{aspect-ratio:1.11;touch-action:none;width:100%;height:auto;display:block;overflow:visible}.cell-base{fill:#ffffff0b;stroke:#ffffff21;stroke-width:1.5px;transition:fill .15s,stroke .15s}.cell .cell-shine{opacity:0;pointer-events:none;transition:opacity .15s}.cell.filled .cell-base{fill:var(--c);stroke:#ffffff8c;filter:url(#glow)}.cell.filled .cell-shine{opacity:1}.cell.preview-ok .cell-base{fill:color-mix(in srgb, var(--p) 55%, transparent);stroke:var(--ok);stroke-width:3px;filter:url(#glow)}.cell.preview-bad .cell-base{fill:#ff3c5a59;stroke:var(--bad);stroke-width:3px}.cell.preview-bad.filled .cell-base{fill:var(--c)}.cell.preview-line .cell-base{stroke:#fff;stroke-width:3px;animation:.6s ease-in-out infinite alternate pulse}@keyframes pulse{to{stroke-opacity:.3}}.cell{transform-box:fill-box;transform-origin:50%}.cell.pop{animation:.28s cubic-bezier(.3,1.6,.5,1) pop}@keyframes pop{0%{transform:scale(.6)}to{transform:scale(1)}}.burst{fill:var(--c);stroke:#fff;stroke-width:2px;filter:url(#glow);pointer-events:none;animation:.6s ease-out forwards burst}@keyframes burst{0%{opacity:1;transform:scale(1)}30%{opacity:1;fill:#fff;transform:scale(1.15)}to{opacity:0;transform:scale(.2)rotate(60deg)}}.board-wrap.shake{animation:.35s shake}@keyframes shake{25%{transform:translate(-4px,2px)}50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,1px)}}.fx-text{pointer-events:none;position:absolute;inset:0}.float{white-space:nowrap;flex-direction:column;align-items:center;font-weight:900;animation:1.2s ease-out forwards rise;display:flex;position:absolute;transform:translate(-50%,-50%)}.float .pts{color:#fff;text-shadow:0 0 10px var(--accent2), 0 0 20px var(--accent2);font-size:1.4rem}.float.big .pts{text-shadow:0 0 12px var(--accent), 0 0 26px var(--accent);font-size:2rem}.float .combo{color:#ffd23f;text-shadow:0 0 10px #ff7a3f;letter-spacing:.05em;font-size:1rem}@keyframes rise{0%{opacity:0;transform:translate(-50%,-30%)scale(.6)}15%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}to{opacity:0;transform:translate(-50%,-160%)scale(1)}}.tray{touch-action:none;border-radius:20px;grid-template-columns:repeat(3,1fr);gap:8px;width:100%;padding:8px;display:grid}.slot{aspect-ratio:1;cursor:grab;touch-action:none;background:#0003;border-radius:14px;justify-content:center;justify-self:center;align-items:center;width:100%;max-height:130px;transition:opacity .2s,transform .2s;display:flex}.slot .piece{width:92%;height:92%;transition:transform .15s}.slot:hover .piece{transform:scale(1.06)}.slot.empty{cursor:default}.slot.dragging .piece{opacity:.15}.slot.no-fit .piece{opacity:.3;filter:grayscale(.8)}.slot.bounce .piece{animation:.35s cubic-bezier(.3,1.6,.5,1) back}.slot.deal .piece{animation:.4s cubic-bezier(.3,1.5,.5,1) both deal}.slot.deal[data-index="1"] .piece{animation-delay:60ms}.slot.deal[data-index="2"] .piece{animation-delay:.12s}@keyframes back{0%{transform:scale(.5)}to{transform:scale(1)}}@keyframes deal{0%{opacity:0;transform:translateY(20px)scale(.3)}to{opacity:1;transform:none}}.piece-cell{fill:var(--c);stroke:#fff9;stroke-width:1.5px}.piece{filter:drop-shadow(0 0 6px var(--c));overflow:visible}.piece .cell-shine{pointer-events:none}.piece.ghost{z-index:50;pointer-events:none;opacity:.9;filter:drop-shadow(0 0 10px var(--c)) drop-shadow(0 8px 12px #00000080);will-change:transform;position:fixed;top:0;left:0}.hint{color:var(--muted);text-align:center;margin:0;font-size:.78rem}.modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(4px);background:#0502148c;justify-content:center;align-items:center;padding:16px;animation:.3s fade;display:flex;position:fixed;inset:0}.modal-backdrop[hidden]{display:none}.modal{text-align:center;border-radius:24px;width:min(100%,340px);padding:24px 20px;animation:.4s cubic-bezier(.3,1.5,.5,1) modal-in}.modal h2{text-shadow:0 0 14px var(--accent);margin:0 0 4px;font-size:1.6rem}.modal-sub{color:var(--muted);margin:0 0 16px;font-size:.9rem}.modal-stats{justify-content:center;gap:16px;margin-bottom:12px;display:flex}.modal-stats div{background:#0000004d;border-radius:14px;flex-direction:column;padding:8px 16px;display:flex}.modal-stats strong{font-variant-numeric:tabular-nums;font-size:1.8rem}.new-record{color:#ffd23f;text-shadow:0 0 12px #ff7a3f;margin:0 0 12px;font-weight:800}.primary-btn{color:#12061f;background:linear-gradient(90deg, var(--accent), var(--accent2));cursor:pointer;border:0;border-radius:14px;width:100%;padding:12px 16px;font-size:1.05rem;font-weight:800;transition:transform .15s;box-shadow:0 0 20px #ff4fd880}.primary-btn:active{transform:scale(.96)}@keyframes fade{0%{opacity:0}}@keyframes modal-in{0%{opacity:0;transform:scale(.8)}}@media (width<=420px){.app{padding-left:8px;padding-right:8px}.topbar{padding:6px 8px}.title{font-size:.85rem}.stat{min-width:54px;padding:3px 6px}.stat-value{font-size:1.05rem}.icon-btn{width:36px;height:36px}}@media (width>=900px) and (height>=600px){.app{grid-template-columns:1fr 200px;grid-template-areas:"top top""board tray""hint hint";place-items:center;gap:16px;width:min(100%,980px);display:grid}.topbar{grid-area:top}.board-wrap{grid-area:board;width:min(100%,640px,108dvh - 162px)}.tray{grid-area:tray;grid-template-columns:1fr;width:180px}.slot{max-height:160px}.hint{grid-area:hint}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}