*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a0f;--surface: #12121c;--border: #2a2a3c;--accent: #7c4dff;--accent2: #00e5ff;--text: #e0e0f0;--muted: #6060a0;--I: #00e5ff;--O: #ffd740;--T: #ea80fc;--S: #69f0ae;--Z: #ff5252;--J: #448aff;--L: #ff9100}html,body{height:100%}body{background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;overscroll-behavior:none;touch-action:manipulation}#bg{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}#app{display:flex;flex-direction:column;align-items:center;gap:16px;position:relative;z-index:1}header h1{font-size:2.2rem;font-weight:900;letter-spacing:.25em;background:linear-gradient(135deg,var(--accent),var(--accent2),var(--accent));background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-shadow:none;animation:title-shift 8s ease-in-out infinite}main{display:flex;gap:20px;align-items:flex-start}.panel{display:flex;flex-direction:column;gap:16px;width:140px}.stat-block{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px}.stat-label{font-size:.65rem;font-weight:700;letter-spacing:.15em;color:var(--muted);margin-bottom:6px}.stat-value{font-size:1.6rem;font-weight:800;color:var(--accent2);font-variant-numeric:tabular-nums;word-break:break-all}.board-wrap{position:relative;border:2px solid var(--border);border-radius:4px;background:#05050d;box-shadow:0 0 30px #7c4dff26,inset 0 0 40px #00000080;animation:board-glow 5s ease-in-out infinite}#board{display:block}#hold,#next{display:block;background:#05050d;border:1px solid var(--border);border-radius:4px;margin-top:6px}.controls-block{padding:12px}.controls{display:flex;flex-direction:column;gap:6px;font-size:.78rem;color:var(--text)}kbd{display:inline-block;padding:2px 5px;background:var(--border);border-radius:4px;font-size:.72rem;font-family:monospace;color:var(--accent2);border:1px solid #3a3a50}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#05050fe0;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border-radius:4px;z-index:10;transition:opacity .2s}.overlay.hidden{opacity:0;pointer-events:none}.overlay-box{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;padding:24px}#overlay-title{font-size:2rem;font-weight:900;letter-spacing:.3em;background:linear-gradient(135deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}#overlay-sub{font-size:.9rem;color:var(--muted)}#overlay-sub kbd{background:#1e1e30}#btn-start{margin-top:8px;padding:10px 28px;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none;border-radius:6px;color:#fff;font-size:.95rem;font-weight:700;letter-spacing:.1em;cursor:pointer;transition:opacity .15s,transform .1s}#btn-start:hover{opacity:.9;transform:scale(1.03)}#btn-start:active{transform:scale(.97)}header{display:flex;align-items:center;gap:16px}.header-controls{display:flex;align-items:center;gap:10px}.audio-controls{display:flex;align-items:center;gap:6px}.icon-btn{background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:1.1rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,color .2s;padding:0;line-height:1}.icon-btn:hover{border-color:var(--accent);color:var(--accent)}.icon-btn.muted{color:var(--muted);border-color:var(--muted)}.volume-slider{-webkit-appearance:none;width:80px;height:4px;background:var(--border);border-radius:2px;outline:none;cursor:pointer}.volume-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;transition:background .15s}.volume-slider::-webkit-slider-thumb:hover{background:var(--accent2)}.volume-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;border:none;transition:background .15s}.volume-slider::-moz-range-thumb:hover{background:var(--accent2)}@media (max-width: 479px){.volume-slider{width:56px}.header-controls{gap:6px}}.theme-toggle{background:var(--surface);border:1px solid var(--border);border-radius:6px;color:var(--text);font-size:1.15rem;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,color .2s;padding:0;line-height:1}.theme-toggle:hover{border-color:var(--accent);color:var(--accent)}html[data-theme=light]{--bg: #f5f5fb;--surface: #ffffff;--border: #d4d4e8;--accent: #5b2de8;--accent2: #0090aa;--text: #0d0d1a;--muted: #6262a0}html[data-theme=light] .board-wrap{background:#d8d8ec;box-shadow:0 0 24px #5b2de81f;animation-name:board-glow-light}html[data-theme=light] .overlay{background:#f0f0fced}html[data-theme=light] kbd{border-color:var(--border)}html[data-theme=light] #overlay-sub kbd{background:#e4e4f4}@keyframes board-glow{0%,to{box-shadow:0 0 30px #7c4dff26,inset 0 0 40px #00000080}50%{box-shadow:0 0 52px #7c4dff4d,0 0 22px #00e5ff14,inset 0 0 40px #00000080}}@keyframes board-glow-light{0%,to{box-shadow:0 0 24px #5b2de81f}50%{box-shadow:0 0 40px #5b2de83d,0 0 14px #0090aa14}}@keyframes title-shift{0%,to{background-position:0% center}50%{background-position:100% center}}.clear-popup{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:5;animation:clear-popup-rise 1.1s cubic-bezier(.2,.8,.2,1) forwards;text-shadow:0 2px 14px rgba(0,0,0,.55)}.popup-label{font-size:2.1rem;font-weight:900;letter-spacing:.14em;background:linear-gradient(135deg,var(--accent2),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.popup-score{margin-top:4px;font-size:1.05rem;font-weight:800;color:var(--accent2);letter-spacing:.05em}.clear-popup-4 .popup-label{font-size:2.6rem;background:linear-gradient(135deg,#ffd740,#ff5252,#ea80fc);-webkit-background-clip:text;background-clip:text;filter:drop-shadow(0 0 14px rgba(255,215,64,.45))}@keyframes clear-popup-rise{0%{opacity:0;transform:translateY(18px) scale(.7)}18%{opacity:1;transform:translateY(0) scale(1.12)}35%{transform:translateY(-2px) scale(1)}to{opacity:0;transform:translateY(-44px) scale(1)}}#board.shake{animation:board-shake .46s cubic-bezier(.36,.07,.19,.97) both}@keyframes board-shake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,0,0)}30%,50%,70%{transform:translate3d(-5px,0,0)}40%,60%{transform:translate3d(5px,0,0)}}@media (max-width: 720px){.popup-label{font-size:1.4rem}.clear-popup-4 .popup-label{font-size:1.7rem}.popup-score{font-size:.85rem}}.touch-pad{display:none;width:100%;max-width:420px;margin-top:8px;grid-template-columns:repeat(4,1fr);grid-auto-rows:56px;gap:6px;grid-template-areas:"hold left rotate right" "pause down drop drop"}.t-btn{background:var(--surface);border:1px solid var(--border);border-radius:10px;color:var(--text);font-size:1.4rem;font-weight:700;letter-spacing:.05em;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;line-height:1;-webkit-tap-highlight-color:transparent;transition:background .05s,transform .05s,border-color .15s}.t-btn:active{background:var(--accent);border-color:var(--accent);color:#fff;transform:scale(.96)}#t-hold{grid-area:hold;font-size:.8rem;letter-spacing:.15em}#t-left{grid-area:left}#t-rotate{grid-area:rotate}#t-right{grid-area:right}#t-down{grid-area:down}#t-drop{grid-area:drop;font-size:.95rem;letter-spacing:.15em}#t-pause{grid-area:pause;font-size:.9rem}@media (max-width: 720px){body{align-items:flex-start;padding:4px env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}#app{width:100%;gap:4px;padding-top:env(safe-area-inset-top)}header{width:100%;justify-content:space-between;gap:6px;padding:0 4px}header h1{font-size:1.1rem;letter-spacing:.15em}.icon-btn,.theme-toggle{width:32px;height:32px;font-size:1rem}.volume-slider{width:60px}.header-controls{gap:6px}main{flex-direction:column;align-items:center;gap:4px;width:100%}.panel{flex-direction:row;width:100%;max-width:420px;gap:4px;justify-content:center;padding:0 4px}.panel-left{order:1}.board-wrap{order:2}.panel-right{order:3}.stat-block{padding:3px 4px;flex:1 1 0;min-width:0;text-align:center;border-radius:6px}.stat-label{font-size:.5rem;margin-bottom:1px;letter-spacing:.1em}.stat-value{font-size:.85rem}.panel .stat-block:has(canvas){flex:0 0 56px}#hold,#next{width:36px;height:36px;margin:0 auto}.panel-left .stat-block:nth-child(5){display:none}.controls-block{display:none}.board-wrap{width:min(calc(100vw - 16px),calc((100dvh - 290px)/2),320px)}#board{width:100%;height:auto;aspect-ratio:1 / 2;display:block}.touch-pad{display:grid}}@media (max-width: 380px){header h1{font-size:.95rem;letter-spacing:.12em}.icon-btn,.theme-toggle{width:28px;height:28px;font-size:.9rem}.volume-slider{width:48px}.touch-pad{grid-auto-rows:48px}.t-btn{font-size:1.2rem}#t-hold,#t-drop{font-size:.65rem}}@media (max-width: 920px) and (orientation: landscape) and (max-height: 500px){body{padding:4px}#app{gap:4px}header h1{font-size:1.2rem}main{gap:8px}.panel{width:90px;gap:6px}.stat-block{padding:6px}.stat-label{font-size:.55rem}.stat-value{font-size:.95rem}#hold,#next{width:60px;height:60px}.controls-block{display:none}.board-wrap{height:calc(100vh - 70px);width:calc((100vh - 70px)/2)}#board{width:100%;height:100%;display:block}.touch-pad{display:none}}