:root{--bg0: #0a0f1e;--bg1: #0d1528;--bg2: #141e36;--grid: #121a2e;--grid-a: #152038;--grid-b: #101828;--grid-line: #1c2740;--text: #ffffff;--muted: #9aa8c0;--accent: #ffd700;--accent-hot: #ffe566;--danger: #ff4d6d;--ok: #5eead4;--stroke: #2a3f66;--panel: rgba(10, 18, 36, .88);--dock-color: #5eead4;font-family:Nunito,Segoe UI Rounded,Arial Rounded MT Bold,Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;background:radial-gradient(ellipse 90% 70% at 50% 38%,rgba(30,48,90,.55) 0%,transparent 58%),radial-gradient(ellipse 120% 100% at 50% 50%,#121a32 0%,var(--bg0) 72%);color:var(--text);overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none}body:before{content:"";pointer-events:none;position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;background:radial-gradient(ellipse 75% 70% at 50% 45%,transparent 45%,rgba(4,8,18,.72) 100%)}#app{position:relative;z-index:1;max-width:520px;margin:0 auto;height:100%;min-height:100dvh;display:grid;grid-template-rows:auto 1fr;padding:env(safe-area-inset-top) 10px env(safe-area-inset-bottom)}.top-bar{display:grid;grid-template-columns:44px 1fr auto;grid-template-areas:"pause title combo" "score title combo";align-items:start;gap:2px 10px;padding:10px 2px 4px}.icon-btn{grid-area:pause;width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(180,210,255,.45);background:linear-gradient(160deg,#142038,#0a1426);color:var(--text);display:grid;place-items:center;box-shadow:0 4px 14px #00000059,inset 0 1px #ffffff14;cursor:pointer}.icon-btn:active{transform:scale(.96)}.pause-icon{width:11px;height:14px;border-left:3.5px solid #fff;border-right:3.5px solid #fff}.score-block{grid-area:score;padding-top:2px}.combo-block{grid-area:combo;text-align:right;min-width:72px}.hi-block{display:none}.label{font-size:10px;letter-spacing:.16em;color:var(--muted);font-weight:700}.value{font-size:24px;font-weight:800;line-height:1.05;letter-spacing:-.01em;text-shadow:0 2px 10px rgba(0,0,0,.35)}.value-sm{font-size:14px;font-weight:700;color:var(--muted)}.title{grid-area:title;margin:4px 0 0;text-align:center;font-size:22px;font-weight:900;letter-spacing:.22em;position:relative;text-indent:.22em;text-shadow:0 2px 16px rgba(0,0,0,.45)}.title-accents{position:absolute;inset:-10px -18px auto;height:18px;pointer-events:none}.crown{position:absolute;top:-15px;left:50%;transform:translate(14px);font-size:11px;filter:drop-shadow(0 0 4px rgba(255,215,0,.65));line-height:1}.tri{position:absolute;width:0;height:0;filter:drop-shadow(0 0 4px currentColor)}.tri-t{left:50%;top:-2px;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:7px solid #ff6b6b;color:#ff6b6b}.tri-b{left:50%;bottom:-18px;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #5eead4;color:#5eead4}.tri-l{left:-6px;top:55%;transform:translateY(-50%);border-top:5px solid transparent;border-bottom:5px solid transparent;border-right:7px solid #ffd700;color:gold}.tri-r{right:-6px;top:55%;transform:translateY(-50%);border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:7px solid #a78bfa;color:#a78bfa}.combo-label{font-size:10px;letter-spacing:.14em;font-weight:800;color:var(--accent)}.combo-value{font-size:26px;font-weight:900;color:var(--accent);line-height:1;text-shadow:0 0 14px rgba(255,215,0,.45)}.combo-dots{display:flex;justify-content:flex-end;gap:4px;margin-top:5px;min-height:7px}.combo-dots span{width:7px;height:7px;border-radius:50%;background:#2a3548;box-shadow:inset 0 1px 2px #0006}.combo-dots span.on{background:var(--accent);box-shadow:0 0 8px var(--accent),0 0 2px #fff8}.stage{display:flex;align-items:center;justify-content:center;padding:4px 0 12px;min-height:0;position:relative}.board-frame{--dock: 78px;width:min(96vw,460px);display:grid;grid-template-columns:var(--dock) 1fr var(--dock);grid-template-rows:var(--dock) 1fr var(--dock);grid-template-areas:". top ." "left board right" ". bottom .";align-items:center;justify-items:center;gap:2px}.board-wrap{grid-area:board;position:relative;width:100%;aspect-ratio:1;border-radius:22px;background:linear-gradient(165deg,#182440,#0c1426 55%,#0a101e);box-shadow:0 0 0 3px #1a2a48,0 0 0 5px #080c18e6,0 22px 55px #0000008c,inset 0 1px #ffffff0f,inset 0 0 50px #0006;overflow:hidden}#board{width:100%;height:100%;display:block;touch-action:none}.dock{display:flex;align-items:center;justify-content:center;gap:4px;width:100%;height:100%;min-height:0;opacity:.28;transition:opacity .18s ease;pointer-events:none}.dock.has-piece{opacity:1;pointer-events:auto}.dock.is-current .dock-slot{cursor:grab}.dock.is-current .dock-slot:active{cursor:grabbing}.dock-top{grid-area:top;flex-direction:column}.dock-bottom{grid-area:bottom;flex-direction:column}.dock-left{grid-area:left;flex-direction:row}.dock-right{grid-area:right;flex-direction:row-reverse}.dock-slot{display:grid;place-items:center;border-radius:16px;min-width:64px;min-height:64px;padding:2px}.dock.is-current .dock-slot{background:linear-gradient(160deg,#ffffff0f,#ffffff05);border:1.5px dashed color-mix(in srgb,var(--dock-color) 55%,#3a5578);box-shadow:inset 0 1px #ffffff0f,0 6px 16px #00000047}.dock.is-next .dock-slot{background:#0a1224c7;border:1px solid #243552;border-radius:16px;box-shadow:0 8px 20px #0000004d,inset 0 1px #ffffff0d;position:relative}.dock.is-next .dock-slot:before{content:"NEXT";position:absolute;top:-11px;left:50%;transform:translate(-50%);font-size:8px;letter-spacing:.16em;font-weight:800;color:#c8d4e8;background:#0a1224;padding:1px 6px;border-radius:6px;border:1px solid #243552}.piece-canvas{display:block;touch-action:none;border-radius:12px}.current-canvas{cursor:grab}.current-canvas:active{cursor:grabbing}.next-canvas{opacity:.95;pointer-events:none}.dock-arrow{display:flex;align-items:center;justify-content:center;gap:2px;color:var(--dock-color);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--dock-color) 70%,transparent))}.dock-top .dock-arrow,.dock-bottom .dock-arrow{flex-direction:column}.dock-left .dock-arrow,.dock-right .dock-arrow{flex-direction:row}.arrow-trail{display:block;background:radial-gradient(circle,currentColor 1.1px,transparent 1.3px) 0 0 / 6px 6px;opacity:.85}.dock-top .arrow-trail,.dock-bottom .arrow-trail{width:6px;height:14px}.dock-left .arrow-trail,.dock-right .arrow-trail{width:14px;height:6px}.arrow-head{width:0;height:0;display:block}.dock-top .arrow-head{border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid currentColor}.dock-bottom .arrow-head{border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid currentColor}.dock-left .arrow-head{border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid currentColor}.dock-right .arrow-head{border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid currentColor}.dock:not(.has-piece) .dock-arrow{opacity:.35}.dock:not(.has-piece) .dock-slot{min-width:28px;min-height:28px}.fx-layer{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;overflow:hidden}.score-pop{position:absolute;left:50%;top:42%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;animation:pop .9s cubic-bezier(.2,.8,.2,1) forwards;white-space:nowrap;z-index:5}.score-pop .clear-title{font-size:22px;font-weight:900;font-style:italic;color:#fff;letter-spacing:.04em;text-shadow:0 0 12px rgba(255,215,0,.85),0 2px 8px rgba(0,0,0,.6)}.score-pop .clear-pts{font-size:18px;font-weight:800;color:var(--accent);text-shadow:0 0 14px rgba(255,215,0,.9)}.score-pop.big .clear-title{font-size:26px}.score-pop.big .clear-pts{font-size:22px}@keyframes pop{0%{transform:translate(-50%,8px) scale(.55);opacity:0}18%{opacity:1;transform:translate(-50%,-6px) scale(1.12)}70%{opacity:1}to{transform:translate(-50%,-56px) scale(1);opacity:0}}.clear-flash{position:absolute;background:linear-gradient(90deg,transparent 0%,rgba(255,215,0,.25) 15%,rgba(255,230,120,.85) 50%,rgba(255,215,0,.25) 85%,transparent 100%);box-shadow:0 0 18px #ffd700a6,inset 0 0 12px #ffffc873;animation:flash .52s ease-out forwards;border-radius:4px}.clear-flash.col{background:linear-gradient(180deg,transparent 0%,rgba(255,215,0,.25) 15%,rgba(255,230,120,.85) 50%,rgba(255,215,0,.25) 85%,transparent 100%)}@keyframes flash{0%{opacity:0;filter:brightness(1.4)}25%{opacity:1}to{opacity:0}}.sparkle{position:absolute;width:6px;height:6px;border-radius:1.5px;background:#ffe566;box-shadow:0 0 8px gold,0 0 2px #fff;animation:spark .52s ease-out forwards;pointer-events:none}@keyframes spark{0%{transform:translate(0) scale(.4) rotate(0);opacity:1}to{transform:translate(var(--dx),var(--dy)) scale(.15) rotate(120deg);opacity:0}}.nudge{position:absolute;left:50%;bottom:12%;transform:translate(-50%);background:#0c1428e6;border:1px solid #3a5a88;color:var(--ok);padding:8px 16px;border-radius:999px;font-size:13px;font-weight:700;animation:nudgePulse 1.6s ease-in-out infinite;pointer-events:none;box-shadow:0 8px 24px #00000059;z-index:4}.nudge.hidden{display:none}@keyframes nudgePulse{0%,to{transform:translate(-50%) translateY(0);opacity:.78}50%{transform:translate(-50%) translateY(-6px);opacity:1}}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#040812c7;display:grid;place-items:center;z-index:60;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.overlay.hidden{display:none}.modal{width:min(88vw,320px);background:linear-gradient(180deg,#1a2744,#0d1528);border:1px solid #2a4060;border-radius:22px;padding:26px 22px;text-align:center;box-shadow:0 28px 70px #0000008c,inset 0 1px #ffffff0f}.modal h2{margin:0 0 8px;letter-spacing:.1em;font-weight:900}.modal p{color:var(--muted);margin:0 0 12px}.overlay-score{font-size:30px;font-weight:900;color:var(--text)!important}.modal button{display:block;width:100%;margin-top:10px;padding:13px;border-radius:14px;border:1px solid #35507a;background:#132038;color:var(--text);font-weight:800;font-size:15px;cursor:pointer}.modal button.primary{background:linear-gradient(180deg,#ffe066,#f0b429);color:#1a1200;border:none;box-shadow:0 6px 18px #f0b42959}#btn-resume.hidden{display:none}@media (max-width: 380px){.board-frame{--dock: 64px}.title{font-size:18px;letter-spacing:.16em}.value{font-size:20px}.combo-value{font-size:22px}}