:root{--bg:#0f1226;--bg-2:#171b38;--surface:#ffffff0d;--surface-2:#ffffff1a;--border:#ffffff1f;--text:#eef0ff;--muted:#9aa0c8;--accent:#5b8cff;--accent-2:#ad4dd6;--gold:#ffd84d;--side-w:200px;--well-w:300px;--gap:16px}*{box-sizing:border-box}html,body{background:radial-gradient(120% 80% at 50% 0%, var(--bg-2), var(--bg));height:100%;color:var(--text);touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;margin:0;font-family:system-ui,-apple-system,PingFang SC,Microsoft YaHei,sans-serif;overflow:hidden}[hidden]{display:none!important}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}#game{grid-template-columns:var(--side-w) var(--well-w) var(--side-w);justify-content:center;gap:var(--gap);height:100vh;height:100dvh;padding:calc(var(--gap) + env(safe-area-inset-top)) calc(var(--gap) + env(safe-area-inset-right)) calc(var(--gap) + env(safe-area-inset-bottom)) calc(var(--gap) + env(safe-area-inset-left));grid-template-rows:minmax(0,1fr);grid-template-areas:"sidel well sider";display:grid}.side{min-height:0;padding-top:calc(var(--cell,30px) * 1);flex-direction:column;gap:12px;display:flex}#side-l{grid-area:sidel;align-items:flex-end}#side-r{grid-area:sider;align-items:flex-start}.panel{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px 10px}.panel h3{letter-spacing:.18em;color:var(--muted);margin:0 0 6px;font-size:12px;font-weight:600}.panel canvas{display:block}#stats{flex-direction:column;gap:10px;min-width:120px;display:flex}.stat{flex-direction:column;display:flex}.stat .label{color:var(--muted);letter-spacing:.08em;font-size:12px}.stat .value{font-variant-numeric:tabular-nums;font-size:22px;font-weight:700}#well{grid-area:well;justify-content:center;align-items:flex-start;min-width:0;min-height:0;display:flex}#well-inner{filter:drop-shadow(0 8px 28px #00000073);position:relative}#well-inner:after{content:"";bottom:-3px;left:-3px;right:-3px;top:calc(var(--cell,30px) - 3px);pointer-events:none;border:3px solid #ffffff29;border-radius:4px;position:absolute}#well-inner.levelup:after{animation:.7s ease-out levelup}#well-inner.shake{animation:.22s ease-out shake}#board{touch-action:none;display:block}#tools{gap:8px;display:flex}button.icon{border:1px solid var(--border);background:var(--surface);border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;font-size:16px;display:inline-flex}button.icon:hover{background:var(--surface-2)}button.icon.off{opacity:.45;text-decoration:line-through}.pad{grid-template-columns:repeat(3,1fr);gap:8px;width:100%;margin-top:auto;display:none}#pad-r{grid-template-columns:repeat(2,1fr)}body.show-pad .pad{display:grid}.pad button{border:1px solid var(--border);background:var(--surface);touch-action:none;border-radius:12px;height:52px;font-size:20px}.pad button.wide{letter-spacing:.1em;grid-column:1/-1;font-size:15px}.pad button.down{background:var(--surface-2);transform:scale(.96)}@media (orientation:portrait) and (max-width:820px){:root{--side-w:clamp(64px, 19vw, 104px);--gap:8px}#game{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) var(--side-w);grid-template-rows:auto auto minmax(0,1fr) auto auto;grid-template-areas:"stats stats stats""well well hold""well well next""well well tools""padl padr padr";justify-content:stretch}.side{display:contents}#hold-panel{grid-area:hold}#next-panel{grid-area:next;align-self:start}#stats{flex-direction:row;grid-area:stats;justify-content:space-between;padding:6px 12px}.stat .value{font-size:17px}.stat .label{font-size:11px}.panel{padding:6px 4px}.panel h3{text-align:center;letter-spacing:.1em;font-size:10px}.panel canvas{margin:0 auto}#well{align-items:center}#tools{flex-direction:column;grid-area:tools;align-items:center}#pad-l{grid-area:padl}#pad-r{grid-area:padr}.pad{margin-top:0}}#popups{pointer-events:none;flex-direction:column;justify-content:center;align-items:center;display:flex;position:absolute;inset:0;overflow:hidden}.popup{text-align:center;text-shadow:0 2px 12px #000000b3;font-weight:800;line-height:1.15;font-size:calc(var(--cell,30px) * .9);animation:1.1s ease-out forwards popup}.popup small{color:var(--muted);font-size:.55em;font-weight:600;display:block}.popup.tetris{color:#31c7ef}.popup.tspin{color:#d07bff}.popup.perfect{color:var(--gold);font-size:calc(var(--cell,30px) * 1.1)}.popup.combo{color:#ffb36b;font-size:calc(var(--cell,30px) * .7)}.popup.level{color:#7dff9a;font-size:calc(var(--cell,30px) * .75)}#countdown{font-size:calc(var(--cell,30px) * 3);text-shadow:0 4px 24px #000c;pointer-events:none;justify-content:center;align-items:center;font-weight:900;display:flex;position:absolute;inset:0}#countdown span{animation:.6s ease-out forwards count}#countdown span.busy{font-size:calc(var(--cell,30px) * .7);color:var(--muted);font-weight:600;animation:none}@keyframes popup{0%{opacity:0;transform:scale(.6)}15%{opacity:1;transform:scale(1.08)}30%{transform:scale(1)}80%{opacity:1}to{opacity:0;transform:translateY(-30%)}}@keyframes count{0%{opacity:0;transform:scale(1.6)}30%{opacity:1;transform:scale(1)}to{opacity:.2}}@keyframes levelup{0%{border-color:#7dff9a;box-shadow:0 0 24px #7dff9a}to{box-shadow:none;border-color:#ffffff29}}@keyframes shake{0%,to{transform:translate(0)}30%{transform:translateY(4px)}60%{transform:translateY(-2px)}}@media (prefers-reduced-motion:reduce){#well-inner.shake{animation:none}.popup{animation-name:fade;animation-duration:1.4s}@keyframes fade{0%,80%{opacity:1}to{opacity:0}}}.overlay{-webkit-backdrop-filter:blur(6px);z-index:10;background:#080a18b8;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}#settings,#help{z-index:20}.card{border:1px solid var(--border);text-align:center;background:#1a1e3d;border-radius:16px;flex-direction:column;gap:10px;width:min(360px,100%);max-height:100%;padding:24px 20px;display:flex;box-shadow:0 20px 60px #00000080}.card.wide{width:min(440px,100%)}.card.scroll{touch-action:pan-y;overscroll-behavior:contain;text-align:left;overflow-y:auto}.card h2{text-align:center;margin:0 0 6px}.card h4{color:var(--muted);letter-spacing:.08em;margin:10px 0 2px;font-size:13px}.logo{letter-spacing:.08em;margin:0;font-size:44px;font-weight:900}.logo span:first-child{color:#ef3040}.logo span:nth-child(2){color:#ef8a21}.logo span:nth-child(3){color:#f7d308}.logo span:nth-child(4){color:#42c642}.logo span:nth-child(5){color:#31c7ef}.logo span:nth-child(6){color:#ad4dd6}.sub{color:var(--muted);margin:-6px 0 8px}button.primary,button.ghost,button.mode{border-radius:12px;padding:12px 16px;font-weight:600}button.primary{background:linear-gradient(135deg, var(--accent), var(--accent-2));color:#fff;border:0}button.primary small{opacity:.85;font-weight:400;display:block}button.ghost{border:1px solid var(--border);background:0 0}button.ghost:hover,button.mode:hover{background:var(--surface-2)}.modes{flex-direction:column;gap:8px;display:flex}button.mode{border:1px solid var(--border);background:var(--surface);flex-direction:column;align-items:flex-start;gap:2px;display:flex}button.mode b{font-size:17px}button.mode small{color:var(--muted);font-weight:400}.level-pick{color:var(--muted);justify-content:center;align-items:center;gap:10px;font-size:14px;display:flex}.level-pick .lv{min-width:2ch;color:var(--text);text-align:center;font-size:20px;font-weight:700}.level-pick button.icon{width:32px;height:32px}.row{gap:8px;display:flex}.row>button{flex:1}.big{font-variant-numeric:tabular-nums;margin:0;font-size:40px;font-weight:800}.record{color:var(--gold);margin:0;font-weight:700}.rank{color:var(--gold);margin:0 0 8px;font-size:14px;font-weight:600}.rank a{color:inherit}.detail{text-align:left;grid-template-columns:auto 1fr;gap:4px 16px;margin:4px 0 8px;display:grid}.detail dt{color:var(--muted)}.detail dd{font-variant-numeric:tabular-nums;margin:0}.hint{color:var(--muted);margin:0;font-size:12px}.field{grid-template-columns:1fr 120px 52px;align-items:center;gap:8px;font-size:14px;display:grid}.field output{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted)}.field input[type=range]{touch-action:pan-x;width:100%}.check{align-items:center;gap:8px;font-size:14px;display:flex}.keys{grid-template-columns:auto 1fr;align-items:center;gap:6px 12px;font-size:14px;display:grid}.keys button{border:1px solid var(--border);background:var(--surface);text-align:left;border-radius:8px;padding:6px 10px}.keys button.waiting{border-color:var(--accent);color:var(--accent)}@media (orientation:landscape) and (max-height:520px){:root{--side-w:170px;--gap:8px}.side{gap:6px}#stats{gap:2px;padding:6px 10px}.stat .value{font-size:15px}.stat .label{font-size:10px}.pad{gap:6px}.pad button{height:40px}button.icon{width:34px;height:34px}}