:root{--game-bg: #405aa0;--game-bg2: #374f8f;--board-bg: #242c54;--board-line: #1e264a;--board-out: #304479;--score: #ffffff;--crown: #ffc000;--panel: #5c7ee6;--panel-in: #3844a5;--btn: #d3e2f9;--cell: 40px;--gap: 3px;--radius: 24%}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;overflow:hidden;font-family:Segoe UI,system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif;user-select:none;-webkit-user-select:none;touch-action:none;background:var(--game-bg)}#app{position:fixed;top:0;right:0;bottom:0;left:0}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:linear-gradient(180deg,var(--game-bg) 0%,var(--game-bg2) 100%)}.blk{position:relative;border-radius:var(--radius);background:var(--b5)}.blk:after{content:"";position:absolute;top:7%;right:7%;bottom:16%;left:7%;border-radius:20%;background:linear-gradient(180deg,var(--b0) 0%,var(--b2) 26%,var(--b4) 62%,var(--b3) 100%)}.blk.pop{animation:pop .28s ease-out forwards}@keyframes pop{0%{transform:scale(1);opacity:1}35%{transform:scale(1.24);opacity:1}to{transform:scale(.15);opacity:0}}.blk.drop{animation:drop .16s cubic-bezier(.3,1.6,.5,1)}@keyframes drop{0%{transform:scale(1.18)}to{transform:scale(1)}}.topbar{width:100%;max-width:520px;display:flex;align-items:center;justify-content:space-between;padding:10px 16px 0;gap:8px}.icon-btn{width:40px;height:40px;border:none;border-radius:12px;flex:none;background:#ffffff29;color:var(--btn);font-size:20px;display:grid;place-items:center;cursor:pointer}.icon-btn:active{transform:scale(.92)}.score-wrap{text-align:center;flex:1}.best-line{display:flex;align-items:center;justify-content:center;gap:5px;color:var(--crown);font-size:15px;font-weight:800}.score-main{color:var(--score);font-size:44px;font-weight:900;line-height:1.05;text-shadow:0 3px 0 rgba(0,0,0,.22)}.score-main.bump{animation:bump .22s ease-out}@keyframes bump{50%{transform:scale(1.16)}}.board-wrap{position:relative}.board{position:relative;display:grid;gap:var(--gap);grid-template-columns:repeat(8,var(--cell));grid-template-rows:repeat(8,var(--cell));padding:calc(var(--gap) * 2);border-radius:16px;background:var(--board-bg);box-shadow:0 0 0 4px var(--board-out),0 8px 22px #00000047}.cellbox{position:relative}.slot{position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--radius);background:var(--board-line)}.slot.hint{background:#ffffff4d}.slot.hint-bad{background:#ff5a5a42}.cellbox>.blk{position:absolute;top:0;right:0;bottom:0;left:0}.flash{position:absolute;background:#fff;border-radius:8px;opacity:0;pointer-events:none;animation:flash .34s ease-out forwards}@keyframes flash{0%{opacity:0}25%{opacity:.85}to{opacity:0}}.play-area{flex:1;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:0;padding-bottom:3vh}.tray{width:100%;max-width:520px;flex:none;display:flex;align-items:center;justify-content:space-around;padding:4px 10px calc(10px + env(safe-area-inset-bottom))}.tray-slot{flex:1;min-height:64px;display:grid;place-items:center;touch-action:none;cursor:grab}.piece{display:grid}.piece.taken{opacity:0;pointer-events:none}.piece.dead{opacity:.3}.piece.enter{animation:enter .28s cubic-bezier(.2,1.4,.5,1)}@keyframes enter{0%{transform:translateY(26px) scale(.6);opacity:0}to{transform:none;opacity:1}}.piece .cellbox{padding:1px}#drag-layer{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:40}.drag-piece{position:absolute;display:grid;will-change:transform}.float-text{position:fixed;z-index:45;pointer-events:none;font-weight:900;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3);animation:floatup 1s ease-out forwards}@keyframes floatup{0%{transform:translate(-50%) scale(.6);opacity:0}20%{transform:translate(-50%,-10px) scale(1.1);opacity:1}to{transform:translate(-50%,-64px) scale(1);opacity:0}}.combo-banner{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);z-index:12;pointer-events:none;text-align:center;white-space:nowrap;font-size:32px;font-weight:900;color:#fff;text-shadow:0 0 18px rgba(255,255,255,.75),0 4px 0 rgba(0,0,0,.25);animation:banner .95s ease-out forwards}@keyframes banner{0%{transform:translate(-50%,-50%) scale(.4);opacity:0}25%{transform:translate(-50%,-50%) scale(1.15);opacity:1}72%{transform:translate(-50%,-50%) scale(1);opacity:1}to{transform:translate(-50%,-92%) scale(.9);opacity:0}}.home{justify-content:center;gap:20px}.logo{font-size:46px;font-weight:900;letter-spacing:1px;color:#fff;text-shadow:0 5px 0 rgba(0,0,0,.25);text-align:center;line-height:1.05}.logo small{display:block;font-size:16px;font-weight:700;opacity:.8;letter-spacing:4px}.home-best{display:flex;gap:8px;align-items:center;color:var(--crown);font-size:20px;font-weight:800}.big-btn{width:240px;padding:15px 0;border:none;border-radius:20px;font-size:22px;font-weight:900;color:#16305e;cursor:pointer;background:linear-gradient(180deg,#ffe27a,#ffc000);box-shadow:0 6px #b98200;transition:transform .06s,box-shadow .06s}.big-btn:active{transform:translateY(4px);box-shadow:0 2px #b98200}.big-btn.alt{background:linear-gradient(180deg,#9fc0ff,#5c7ee6);color:#fff;box-shadow:0 6px #2f3f7d}.big-btn.alt:active{box-shadow:0 2px #2f3f7d}.home-icons{display:flex;gap:16px;margin-top:4px}.mask{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;background:#060a1a9e;animation:fade .18s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.dialog{width:min(88vw,360px);padding:22px 20px 20px;border-radius:24px;background:var(--panel-in);border:4px solid var(--panel);color:#fff;text-align:center;animation:rise .22s cubic-bezier(.2,1.3,.5,1)}@keyframes rise{0%{transform:translateY(24px) scale(.92);opacity:0}}.dialog h2{margin:0 0 6px;font-size:26px;font-weight:900}.dialog .sub{opacity:.75;font-size:14px;margin-bottom:14px}.dialog .stat{font-size:46px;font-weight:900;color:var(--crown);line-height:1.1}.dialog .btns{display:flex;flex-direction:column;gap:10px;margin-top:18px}.dialog .btns .big-btn{width:100%}.msg{font-size:14px;opacity:.85;margin-top:10px;min-height:18px}.skin-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-height:52vh;overflow-y:auto;padding:4px}.skin-card{border-radius:14px;padding:8px 6px;cursor:pointer;border:3px solid transparent;background:#00000040}.skin-card.on{border-color:var(--crown)}.skin-swatch{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}.skin-swatch i{display:block;padding-bottom:100%;border-radius:4px}.skin-name{font-size:11px;opacity:.7;margin-top:5px}.row{display:flex;align-items:center;justify-content:space-between;padding:12px 4px;border-bottom:1px solid rgba(255,255,255,.12);font-size:16px;font-weight:700}.row:last-child{border-bottom:none}.switch{width:52px;height:30px;border-radius:15px;border:none;cursor:pointer;background:#fff3;position:relative;transition:background .15s}.switch.on{background:#4bd06a}.switch:after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .15s}.switch.on:after{transform:translate(22px)}.adv-head{color:#fff;font-weight:800;font-size:14px;opacity:.85}.progress{width:190px;height:8px;border-radius:4px;background:#0000004d;overflow:hidden;margin-top:5px}.progress>i{display:block;height:100%;background:var(--crown);transition:width .25s}
