:root{--bg-0: #0a0b10;--bg-1: #13151e;--bg-2: #1b1e2a;--border: rgba(255, 255, 255, .08);--text: #f2f3f7;--text-muted: #8b8fa3;--accent: #7bf1a8;--accent-2: #4cc9f0;--gold: #ffd166;--danger: #ff5d73;--radius: 18px;--safe-top: env(safe-area-inset-top, 0px);--safe-bottom: env(safe-area-inset-bottom, 0px)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;height:100dvh;overscroll-behavior:none;-webkit-text-size-adjust:100%;text-size-adjust:100%}body,.screen{background:linear-gradient(180deg,#06070c99,#06070cb8 55%,#06070ce0),url(/bg/red-square.jpg) center 30% / cover no-repeat,var(--bg-0)}#screen-home{background:url(/bg/kaskad-scene.jpg) top center / cover no-repeat,var(--bg-0)}body{color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#app{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column}@media (min-width: 700px){#app{left:50%;right:auto;width:min(94vw,560px);transform:translate(-50%);box-shadow:0 0 0 1px var(--border),0 30px 90px #0000008c}}#game-root{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;padding:calc(10px + var(--safe-top)) 12px calc(12px + var(--safe-bottom));gap:10px}#hud{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;background:linear-gradient(180deg,var(--bg-1),var(--bg-2));border:1px solid var(--border);border-radius:var(--radius)}.hud-stat{display:flex;flex-direction:column;gap:2px;min-width:0}.hud-stat .label{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}.hud-stat .value{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}.hud-stat.score .value{color:var(--accent)}.hud-stat.combo .value{color:var(--gold)}#hud-pause{background:var(--bg-2);border:1px solid var(--border);color:var(--text);border-radius:10px;width:36px;height:36px;font-size:16px;flex:none}#board-wrap{position:relative;flex:1;min-height:0;border-radius:var(--radius);background:linear-gradient(180deg,#ffffff05,#00000026);border:1px solid var(--border);overflow:hidden}#board-canvas{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}.next-piece{position:absolute;top:10px;right:10px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 9px 8px;background:#0a0b1099;border:1px solid var(--border);border-radius:12px;pointer-events:none;z-index:5}.next-piece-label{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}.next-piece-level-label{margin-top:4px}.next-piece-level{font-size:18px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums}.popup-layer{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;pointer-events:none}.combo-text{font-size:clamp(28px,9vw,56px);font-weight:800;color:var(--gold);text-shadow:0 0 24px rgba(255,209,102,.7);opacity:0;transform:scale(.6)}.combo-text.pop{animation:combo-pop .9s cubic-bezier(.2,.8,.2,1) forwards}.combo-text.line-clear{color:#fff;text-shadow:0 0 20px rgba(255,255,255,.95),0 0 50px rgba(120,200,255,.65)}.combo-text.line-clear.pop{animation:line-clear-pop 1.1s cubic-bezier(.2,.8,.2,1) forwards}@keyframes line-clear-pop{0%{opacity:0;transform:scale(.4) translateY(10px)}15%{opacity:1;transform:scale(1.25) translateY(0)}35%{transform:scale(1.05)}80%{opacity:1}to{opacity:0;transform:scale(1.1) translateY(-18px)}}@keyframes combo-pop{0%{opacity:0;transform:scale(.5) translateY(10px)}15%{opacity:1;transform:scale(1.15) translateY(0)}30%{transform:scale(1)}75%{opacity:1}to{opacity:0;transform:scale(1.05) translateY(-14px)}}.record-banner{position:absolute;top:14%;left:50%;transform:translate(-50%) translateY(-10px);padding:10px 20px;border-radius:999px;background:linear-gradient(90deg,var(--gold),#ff9e6d);color:#201400;font-weight:800;letter-spacing:.02em;opacity:0;pointer-events:none;box-shadow:0 8px 30px #ffd16673}.record-banner.show{animation:record-pop 1.8s ease forwards}@keyframes record-pop{0%{opacity:0;transform:translate(-50%) translateY(-10px) scale(.8)}15%{opacity:1;transform:translate(-50%) translateY(0) scale(1.05)}25%{transform:translate(-50%) translateY(0) scale(1)}85%{opacity:1}to{opacity:0;transform:translate(-50%) translateY(-6px) scale(1)}}.gameover-flash{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:radial-gradient(80% 80% at 50% 50%,#140408d9,#040204f7);opacity:0;pointer-events:none;perspective:900px}.gameover-flash.show{animation:gameover-flash-bg 1.6s ease forwards}@keyframes gameover-flash-bg{0%{opacity:0}8%{opacity:1}78%{opacity:1}to{opacity:0}}.gameover-flash-text{display:flex;flex-direction:column;align-items:center;gap:0;transform-style:preserve-3d}.gameover-flash-text span{font-size:clamp(48px,16vw,96px);font-weight:900;letter-spacing:.04em;line-height:1.02;color:var(--danger);text-shadow:0 1px 0 #b3283f,0 2px 0 #a02338,0 3px 0 #8d1e31,0 4px 0 #7a192a,0 5px 0 #671423,0 6px 0 #540f1c,0 18px 30px rgba(0,0,0,.7),0 0 60px rgba(255,93,115,.5);transform:rotateX(60deg) translateY(-30px) scale(.7);opacity:0}.gameover-flash.show .gameover-flash-text span{animation:gameover-slam 1.6s cubic-bezier(.2,.7,.15,1) forwards}.gameover-flash.show .gameover-flash-text span:last-child{animation-delay:.14s}@keyframes gameover-slam{0%{opacity:0;transform:rotateX(60deg) translateY(-30px) scale(.7)}35%{opacity:1;transform:rotateX(-8deg) translateY(4px) scale(1.08)}50%{transform:rotateX(4deg) translateY(0) scale(.99)}62%{transform:rotateX(0) scale(1.02)}75%{transform:rotateX(0) scale(1)}92%{opacity:1}to{opacity:0;transform:rotateX(0) scale(1.03)}}.screen{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:calc(24px + var(--safe-top)) 22px calc(24px + var(--safe-bottom));text-align:center;z-index:10}.screen.hidden{display:none}.hidden{display:none!important}.logo{font-size:clamp(30px,9vw,46px);font-weight:800;letter-spacing:-.02em;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;margin:0}.home-tagline-3d{position:absolute;top:25%;left:0;right:0;padding:0 28px;z-index:1}.home-tagline-3d .tagline,.home-tagline-3d .element-cycle{margin:0;color:#fff;font-weight:800;-webkit-text-stroke:3px rgba(4,10,22,.92);paint-order:stroke fill;text-shadow:0 3px 0 rgba(4,10,22,.85),0 6px 10px rgba(0,0,0,.6)}.home-tagline-3d .element-cycle{margin-top:6px;font-size:13px}.home-tagline-3d .element-cycle span{color:#fff;opacity:.85}#screen-home .btn-ghost{background:#06070c9e;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.tagline{color:var(--text-muted);margin:-10px 0 6px;font-size:14px}.element-cycle{display:flex;gap:8px;align-items:center;justify-content:center;margin:-4px 0 18px;font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--text-muted)}.element-cycle span{color:var(--accent-2);opacity:.7}.menu{display:flex;flex-direction:column;gap:12px;width:min(320px,86vw)}button{font-family:inherit}.btn{border:1px solid var(--border);background:var(--bg-1);color:var(--text);padding:15px 18px;border-radius:14px;font-size:16px;font-weight:600;cursor:pointer;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.98)}.btn-primary{background:linear-gradient(135deg,var(--accent),#4fe08f);color:#06210f;border:none;font-size:18px;font-weight:800;padding:18px;box-shadow:0 10px 30px #7bf1a840}.btn-ghost{background:transparent}.stat-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.pill{background:var(--bg-1);border:1px solid var(--border);border-radius:999px;padding:6px 14px;font-size:13px;color:var(--text-muted)}.pause-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:40;display:flex;align-items:center;justify-content:center;background:#04060cc7;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.pause-card{display:flex;flex-direction:column;align-items:stretch;gap:12px;width:min(280px,80vw);padding:26px 22px;background:var(--bg-1);border:1px solid var(--accent-2);border-radius:16px;text-align:center}.pause-title{margin:0 0 8px;font-size:28px;font-weight:900;letter-spacing:.08em;color:var(--text)}.nickname-prompt{display:flex;flex-direction:column;gap:8px;width:min(320px,86vw);padding:12px 14px;background:var(--bg-1);border:1px solid var(--accent-2);border-radius:14px}.nickname-prompt-label{margin:0;font-size:13px;color:var(--text-muted)}.nickname-prompt-row{display:flex;gap:8px}.nickname-prompt-row input{flex:1;min-width:0;font-family:inherit;font-size:15px;font-weight:600;color:var(--text);background:var(--bg-2);border:1px solid var(--border);border-radius:10px;padding:10px 12px;outline:none}.nickname-prompt-row input::placeholder{color:var(--text-muted)}.nickname-prompt-row .btn{padding:10px 18px;font-size:15px}.pill b{color:var(--text)}.gameover-title{font-size:14px;letter-spacing:.25em;color:var(--danger);font-weight:700;margin:0}.gameover-score{font-size:clamp(44px,16vw,72px);font-weight:800;margin:0;font-variant-numeric:tabular-nums;color:var(--text)}.gameover-record{color:var(--gold);font-weight:700;font-size:15px;min-height:20px}.tutorial-card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius);padding:22px;width:min(340px,88vw)}.tutorial-step{font-size:15px;color:var(--text-muted);margin-bottom:14px;min-height:20px}.tutorial-board{width:100%;aspect-ratio:6 / 8;border-radius:12px;overflow:hidden;position:relative;background:#00000040;margin-bottom:14px}.tutorial-board canvas{position:absolute;top:0;right:0;bottom:0;left:0;touch-action:none}.dots{display:flex;gap:6px;justify-content:center;margin-bottom:4px}.dot{width:6px;height:6px;border-radius:50%;background:var(--border)}.dot.active{background:var(--accent)}.settings-row{display:flex;align-items:center;justify-content:space-between;width:min(320px,86vw);padding:14px 16px;background:var(--bg-1);border:1px solid var(--border);border-radius:14px}.nickname-input{font-family:inherit;font-size:15px;font-weight:600;text-align:right;color:var(--text);background:transparent;border:none;outline:none;width:140px}.nickname-input::placeholder{color:var(--text-muted)}.leaderboard-list{display:flex;flex-direction:column;gap:6px;width:min(340px,88vw);max-height:40vh;overflow-y:auto}.leaderboard-row{display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--bg-1);border:1px solid var(--border);border-radius:12px;font-size:14px}.leaderboard-row .rank{width:22px;flex:none;font-weight:800;color:var(--text-muted);font-variant-numeric:tabular-nums}.leaderboard-row:nth-child(1) .rank{color:var(--gold)}.leaderboard-row .nickname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}.leaderboard-row .score{flex:none;font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent)}.switch{width:44px;height:26px;border-radius:999px;background:var(--bg-2);border:1px solid var(--border);position:relative;cursor:pointer;flex:none}.switch:after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text-muted);transition:transform .15s ease,background .15s ease}.switch.on{border-color:var(--accent)}.switch.on:after{transform:translate(18px);background:var(--accent)}.link{color:var(--accent-2);font-size:13px;text-decoration:none;cursor:pointer}@media (max-height: 600px){.screen{gap:10px}}