:root{--bg-0: #070b16;--bg-1: #0b1020;--panel: rgba(20, 27, 48, .66);--panel-border: rgba(120, 140, 200, .16);--text: #e6ecff;--text-dim: #8a96b8;--accent: #22d3ee;--accent-2: #a855f7;font-family:Segoe UI,system-ui,-apple-system,sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:radial-gradient(1200px 800px at 15% -10%,rgba(34,211,238,.12),transparent 60%),radial-gradient(1000px 700px at 110% 110%,rgba(168,85,247,.14),transparent 55%),linear-gradient(160deg,var(--bg-1),var(--bg-0));color:var(--text);display:grid;place-items:center;overflow:hidden;user-select:none;-webkit-user-select:none}.app{display:flex;gap:28px;align-items:stretch;padding:24px}.board-area{display:flex;flex-direction:column;gap:16px}.title{text-align:center}.title-tetris{font-size:34px;font-weight:800;letter-spacing:10px;padding-left:10px;background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 18px rgba(34,211,238,.35))}.board-wrap{position:relative;border-radius:14px;padding:10px;background:linear-gradient(180deg,#ffffff0a,#fff0);border:1px solid var(--panel-border);box-shadow:0 0 0 1px #0006,0 24px 60px #0000008c,0 0 60px #22d3ee14}.board{display:block;border-radius:8px;box-shadow:inset 0 0 30px #0009}.overlay{position:absolute;top:10px;right:10px;bottom:10px;left:10px;display:grid;place-items:center;border-radius:8px;background:#070b16bd;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.overlay-card{text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center;padding:24px}.overlay-card h2{font-size:30px;letter-spacing:2px}.overlay-card p{color:var(--text-dim)}.final-score{font-size:40px!important;font-weight:800;color:var(--accent)!important}.difficulty-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;width:100%;max-width:240px}.diff-btn{padding:9px 10px;font-size:13px;font-weight:600;letter-spacing:.4px;color:var(--text);background:#ffffff0d;border:1px solid var(--panel-border);border-radius:9px;cursor:pointer;transition:background .12s ease,border-color .12s ease,transform .1s ease}.diff-btn:hover{background:#ffffff1a}.diff-btn.active{color:#06121a;background:linear-gradient(90deg,var(--accent-2),var(--accent));border-color:transparent;box-shadow:0 6px 18px #a855f766}.panel-hint{display:block;margin-top:8px;text-align:center;font-size:11px;letter-spacing:1px;color:var(--text-dim)}.stat-value.mode{font-size:16px;color:var(--accent)}.overlay-card button{margin-top:6px;padding:12px 24px;font-size:15px;font-weight:700;letter-spacing:.5px;color:#06121a;background:linear-gradient(90deg,var(--accent),#67e8f9);border:none;border-radius:10px;cursor:pointer;box-shadow:0 8px 24px #22d3ee59;transition:transform .12s ease,box-shadow .12s ease}.overlay-card button:hover{transform:translateY(-2px);box-shadow:0 12px 30px #22d3ee80}.overlay-card button:active{transform:translateY(0)}.sidebar{display:flex;flex-direction:column;gap:16px;width:208px}.panel{background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;padding:16px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 12px 30px #00000059}.panel h3{font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--text-dim);margin-bottom:12px}.preview-box{display:grid;place-items:center;min-height:66px}.preview-box.small{min-height:0}.stats{display:flex;flex-direction:column;gap:12px}.stat{display:flex;justify-content:space-between;align-items:baseline}.stat-label{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim)}.stat-value{font-size:22px;font-weight:700;font-variant-numeric:tabular-nums}.next-list{display:flex;flex-direction:column;gap:8px;align-items:center}.controls ul{list-style:none;display:flex;flex-direction:column;gap:8px}.controls li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-dim)}.controls kbd{flex:0 0 auto;min-width:58px;text-align:center;font-family:inherit;font-size:12px;font-weight:600;color:var(--text);background:#ffffff0f;border:1px solid var(--panel-border);border-bottom-width:2px;border-radius:6px;padding:4px 6px}@media (max-height: 720px){.title-tetris{font-size:26px}.controls{display:none}}.menu{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px;text-align:center}.menu-logo{font-size:64px;letter-spacing:14px;padding-left:14px}.menu-sub{color:var(--text-dim);letter-spacing:2px;font-size:13px;margin-bottom:24px}.menu-buttons{display:flex;flex-direction:column;gap:14px;width:min(360px,90vw)}.menu-btn{display:flex;flex-direction:column;gap:4px;padding:18px 22px;text-align:left;color:var(--text);background:var(--panel);border:1px solid var(--panel-border);border-radius:14px;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease}.menu-btn:hover{transform:translateY(-2px);border-color:#22d3ee80;box-shadow:0 14px 34px #0006}.menu-btn.primary{border-color:#22d3ee59;box-shadow:0 10px 30px #22d3ee1f}.menu-btn-title{font-size:18px;font-weight:700}.menu-btn-sub{font-size:13px;color:var(--text-dim)}.back-btn{position:absolute;left:0;top:6px;font:inherit;font-size:13px;color:var(--text-dim);background:transparent;border:1px solid var(--panel-border);border-radius:8px;padding:5px 10px;cursor:pointer}.back-btn:hover{color:var(--text)}.title{position:relative}.battle-center{display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px}.lobby-form{display:flex;flex-direction:column;gap:12px;width:min(360px,92vw)}.lobby-hint{font-size:12px;color:var(--text-dim);line-height:1.5}.lobby-form label{display:flex;flex-direction:column;gap:5px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--text-dim)}.lobby-form input{font:inherit;font-size:15px;color:var(--text);background:#ffffff0d;border:1px solid var(--panel-border);border-radius:9px;padding:10px 12px;outline:none;transition:border-color .12s ease}.lobby-form input:focus{border-color:var(--accent)}.lobby-form button{margin-top:4px;padding:12px;font:inherit;font-weight:700;color:#06121a;background:linear-gradient(90deg,var(--accent),#67e8f9);border:none;border-radius:10px;cursor:pointer}.lobby-form button:disabled{opacity:.5;cursor:default}.ghost-btn{color:var(--text-dim)!important;background:transparent!important;border:1px solid var(--panel-border)!important}.ghost-btn:hover{color:var(--text)!important}.lobby-error{color:#f87171;font-size:13px}.battle{padding:16px}.battle-arena{display:flex;gap:28px;align-items:flex-start}.player-col{display:flex;flex-direction:column;gap:8px}.player-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;min-width:0}.player-name{font-size:15px;font-weight:700;letter-spacing:.5px}.player-name.you{color:var(--accent)}.player-score{font-variant-numeric:tabular-nums;font-size:18px;font-weight:700}.player-col.opponent{opacity:.95}.battle-stats{display:flex;justify-content:space-between;font-size:13px;color:var(--text-dim)}.incoming-badge{position:absolute;top:14px;right:14px;padding:4px 10px;font-size:13px;font-weight:700;color:#fff1f1;background:#f87171d9;border-radius:8px;box-shadow:0 4px 14px #f8717166}.win-text{color:#4ade80}.lose-text{color:#f87171}.dim{color:var(--text-dim)}@media (max-width: 640px){body{overflow:auto;place-items:start center}.app{flex-direction:column;align-items:center;gap:16px;padding:12px}.sidebar{flex-direction:row;flex-wrap:wrap;justify-content:center;width:100%;max-width:360px}.panel{flex:1 1 150px}.controls{display:none}.battle-arena{flex-direction:column;align-items:center;gap:16px}}