*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg-dark:#0a0a1a;--bg-panel:#12122a;--bg-input:#1a1a3a;--border:#2a2a5a;--border-bright:#4a4aba;--text:#c0c0e0;--text-dim:#6a6a9a;--text-bright:#e0e0ff;--accent:#0cf;--accent-glow:#0cf4;--green:#0f8;--red:#f46;--yellow:#fc0;--purple:#a4f;--font:"Courier New", "Consolas", monospace}html,body{background:var(--bg-dark);height:100%;color:var(--text);font-family:var(--font);overflow:hidden}#app{width:100%;height:100%;position:relative}.screen{width:100%;height:100%;display:none;position:absolute;top:0;left:0}.screen.active{justify-content:center;align-items:center;display:flex}.btn{font-family:var(--font);border:1px solid var(--border-bright);background:var(--bg-panel);color:var(--text-bright);cursor:pointer;text-transform:uppercase;letter-spacing:1px;padding:10px 24px;font-size:14px;transition:all .15s}.btn:hover{background:var(--border-bright);color:#fff;box-shadow:0 0 15px var(--accent-glow)}.btn:active{transform:scale(.97)}.btn-primary{border-color:var(--accent);color:var(--accent);background:#035}.btn-primary:hover{color:#fff;box-shadow:0 0 20px var(--accent-glow);background:#058}.btn-secondary{border-color:var(--purple);color:var(--purple)}.btn-secondary:hover{color:#c8f;background:#2a1555}.btn-accent{border-color:var(--green);color:var(--green)}.btn-accent:hover{color:#8fc;background:#032}.btn-danger{border-color:var(--red);color:var(--red)}.btn-danger:hover{color:#f88;background:#311}.btn-small{padding:5px 12px;font-size:12px}.btn-tiny{padding:3px 8px;font-size:11px}input[type=text]{font-family:var(--font);background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);outline:none;padding:10px 14px;font-size:14px;transition:border-color .15s}input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 10px var(--accent-glow)}input[type=text]::placeholder{color:var(--text-dim)}.welcome-container{text-align:center;padding:40px}.game-title{color:var(--accent);text-shadow:0 0 20px var(--accent), 0 0 40px var(--accent-glow), 0 0 80px #0484;letter-spacing:12px;margin-bottom:8px;font-size:72px}.byline{color:var(--text-dim);letter-spacing:2px;margin-bottom:14px;font-size:13px}.byline a{color:var(--accent);border-bottom:1px solid #0000;text-decoration:none;transition:color .15s,border-color .15s,text-shadow .15s}.byline a:hover,.byline a:focus-visible{color:var(--text-bright);border-bottom-color:var(--accent);text-shadow:0 0 8px var(--accent-glow)}.subtitle{color:var(--text-dim);letter-spacing:4px;text-transform:uppercase;margin-bottom:48px;font-size:16px}.welcome-form{flex-direction:column;align-items:center;gap:16px;display:flex}.welcome-form input[type=text]{text-align:center;width:280px}.button-group{gap:12px;display:flex}.join-row{gap:8px;margin-top:8px;display:flex}.join-row input{text-align:center;text-transform:uppercase;width:160px}.das-settings{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;width:280px;padding:14px 20px}.settings-subhead{letter-spacing:2px;text-transform:uppercase;color:var(--text-dim);text-align:left;margin:10px 0 6px;font-size:11px}.das-setting-row{align-items:center;gap:10px;margin-bottom:8px;display:flex}.das-setting-row:last-child{margin-bottom:0}.das-setting-row label{color:var(--text-dim);text-align:right;flex-shrink:0;width:72px;font-size:12px}.das-setting-row input[type=range]{accent-color:var(--accent);flex:1;height:4px}.das-value{color:var(--accent);text-align:right;flex-shrink:0;width:42px;font-size:12px}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-8px)}40%{transform:translate(8px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.shake{animation:.4s ease-in-out shake;border-color:var(--red)!important}.lobby-container{gap:20px;width:1200px;max-width:96vw;height:min(880px,96vh);display:flex}.lobby-main{background:var(--bg-panel);border:1px solid var(--border);flex-direction:column;flex:1;padding:20px;display:flex}.lobby-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.lobby-header h2{color:var(--accent);text-transform:uppercase;letter-spacing:3px;font-size:20px}.room-info{align-items:center;gap:10px;display:flex}.room-code-display{color:var(--yellow);background:var(--bg-input);border:1px solid var(--border);letter-spacing:2px;cursor:pointer;padding:4px 12px;font-size:14px;transition:border-color .15s;position:relative}.room-code-display:hover{border-color:var(--yellow)}.copy-toast{background:var(--yellow);color:#000;white-space:nowrap;letter-spacing:0;pointer-events:none;z-index:9999;border-radius:3px;padding:5px 14px;font-size:12px;font-weight:700;animation:1.5s forwards copy-fade;transform:translate(-50%,-100%)}.copy-toast:after{content:"";border:5px solid #0000;border-top-color:var(--yellow);position:absolute;top:100%;left:50%;transform:translate(-50%)}@keyframes copy-fade{0%{opacity:1}70%{opacity:1}to{opacity:0}}.player-slots{flex-direction:column;flex:1;gap:6px;display:flex;overflow-y:auto}.player-slot{border:1px solid var(--border);background:var(--bg-dark);justify-content:space-between;align-items:center;min-height:40px;padding:8px 14px;display:flex}.player-slot.occupied{border-color:var(--border-bright)}.player-slot.empty{opacity:.4}.slot-name{color:var(--text-bright);font-size:14px}.slot-name.me{color:var(--accent)}.host-badge{color:var(--yellow);border:1px solid var(--yellow);vertical-align:middle;margin-left:8px;padding:1px 6px;font-size:10px}.slot-empty{color:var(--text-dim);font-size:12px}.lobby-actions{flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;display:flex}.waiting-text{color:var(--text-dim);font-size:13px;font-style:italic}.lobby-right{flex-direction:column;gap:10px;width:580px;display:flex;overflow-y:auto}.lobby-options{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:2px 20px;padding:12px 16px;display:grid}.options-title{color:var(--accent);text-transform:uppercase;letter-spacing:2px;border-bottom:1px solid var(--border);margin-bottom:14px;padding-bottom:8px;font-size:14px}.options-grid{display:contents}.lobby-options .options-title,.lobby-options .freq-section{grid-column:1/-1}.option-row{justify-content:space-between;align-items:center;gap:12px;padding:4px 0;display:flex}.option-label{color:var(--text);font-size:14px}.option-input{appearance:textfield;width:56px;font-size:15px;font-family:var(--font);background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);text-align:center;border-radius:4px;outline:none;padding:6px 4px}.option-input:focus{border-color:var(--accent);box-shadow:0 0 6px #0cf3}.option-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.option-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.stepper{align-items:center;gap:0;display:flex}.stepper-btn{background:var(--bg-input);border:1px solid var(--border);width:32px;height:34px;color:var(--text-bright);font-size:18px;font-family:var(--font);cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:center;align-items:center;transition:background .1s,border-color .1s;display:flex}.stepper-btn:hover{border-color:var(--accent);background:#2a2a5a}.stepper-btn:active{background:#3a3a6a}.stepper-btn.stepper-dec{border-right:none;border-radius:4px 0 0 4px}.stepper-btn.stepper-inc{border-left:none;border-radius:0 4px 4px 0}.stepper .option-input{border-radius:0;width:48px}.option-value{color:var(--text-bright);text-align:center;min-width:56px;font-size:14px}.freq-section{margin-bottom:6px}.freq-header{cursor:pointer;-webkit-user-select:none;user-select:none;justify-content:space-between;align-items:center;padding:6px 0;display:flex}.freq-header:hover .freq-title{color:var(--text)}.freq-title{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin:0;font-size:12px;transition:color .15s}.freq-toggle{color:var(--text-dim);font-size:10px;transition:transform .2s,color .15s}.freq-header:hover .freq-toggle{color:var(--text)}.freq-toggle.collapsed{transform:rotate(-90deg)}.freq-body{max-height:800px;transition:max-height .25s;overflow:hidden}.freq-body.collapsed{max-height:0}.freq-grid{grid-template-columns:repeat(auto-fill,minmax(70px,1fr));gap:6px;padding-top:8px;display:grid}.freq-item{background:#ffffff05;border:1px solid #0000;border-radius:6px;flex-direction:column;align-items:center;gap:4px;padding:6px 4px;transition:border-color .15s,background .15s;display:flex}.freq-item:hover{border-color:var(--border);background:#ffffff0a}.freq-label{border:1px solid var(--border);background:var(--bg-input);width:30px;height:30px;color:var(--text-bright);border-radius:4px;justify-content:center;align-items:center;font-size:15px;font-weight:700;display:flex}.freq-item-name{color:var(--text-dim);text-align:center;word-wrap:break-word;white-space:normal;max-width:64px;font-size:10px;line-height:1.2}.piece-label[data-piece=I]{color:#0ff;border-color:#0ff5}.piece-label[data-piece=O]{color:#ff0;border-color:#ff05}.piece-label[data-piece=T]{color:#a0f;border-color:#a0f5}.piece-label[data-piece=S]{color:#0f0;border-color:#0f05}.piece-label[data-piece=Z]{color:red;border-color:#f005}.piece-label[data-piece=J]{color:#04f;border-color:#04f5}.piece-label[data-piece=L]{color:#f80;border-color:#f805}.special-freq-label{font-size:14px}.freq-input{width:48px;font-size:14px;font-family:var(--font);background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);text-align:center;appearance:textfield;border-radius:4px;outline:none;padding:5px 4px}.freq-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.freq-input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.freq-input:focus{border-color:var(--accent);box-shadow:0 0 6px #0cf3}.freq-value{color:var(--text);text-align:center;min-width:32px;font-size:13px;font-weight:700}.lobby-chat{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;flex-direction:column;flex:1;min-height:120px;padding:12px;display:flex}.chat-messages{flex:1;margin-bottom:10px;font-size:13px;line-height:1.5;overflow-y:auto}.chat-msg{word-break:break-word;padding:2px 0}.chat-name{color:var(--accent);font-weight:700}.chat-input-row{gap:6px;display:flex}.chat-input-row input{flex:1;padding:6px 10px;font-size:13px}#screen-game.active{background:var(--bg-dark);justify-content:center;align-items:center;display:flex}.game-layout{justify-content:center;align-items:flex-start;gap:16px;width:100%;height:100%;max-height:100vh;padding:16px;display:flex}.game-sidebar-left{width:calc(140px * var(--ui-scale,1));flex-direction:column;gap:16px;display:flex}.game-center{flex-direction:column;flex:0 auto;justify-content:center;align-self:stretch;align-items:center;gap:8px;min-width:0;min-height:0;display:flex}.board-frame.hit{animation:.4s ease-out board-hit}@keyframes board-hit{0%{filter:brightness(1.6)saturate(1.4)}to{filter:none}}.hit-banner{font-family:var(--font);letter-spacing:1px;white-space:nowrap;pointer-events:none;opacity:0;background:#0a0a1ad9;border-radius:4px;padding:4px 10px;font-size:15px;font-weight:700;position:absolute;top:12%;left:50%;transform:translate(-50%)}.hit-banner.show{animation:1.1s ease-out forwards hit-banner-rise}@keyframes hit-banner-rise{0%{opacity:0;transform:translate(-50%,6px)}15%{opacity:1;transform:translate(-50%)}70%{opacity:1}to{opacity:0;transform:translate(-50%,-10px)}}@media (prefers-reduced-motion:reduce){.board-frame.hit{animation:none}.hit-banner.show{opacity:1;animation:none}}#game-canvas{border:2px solid var(--border-bright);box-shadow:0 0 30px #0482}.game-sidebar-right{flex-direction:column;flex:0 1 calc(480px * var(--ui-scale,1));gap:12px;min-width:200px;display:flex}.game-room-code{letter-spacing:2px;text-align:center;color:var(--accent);background:var(--bg-panel);border:1px solid var(--border);cursor:pointer;-webkit-user-select:all;user-select:all;border-radius:4px;padding:6px 8px;font-size:12px}.game-room-code:hover{border-color:var(--accent)}.info-panel{background:var(--bg-panel);border:1px solid var(--border);padding:12px}.info-item{justify-content:space-between;padding:4px 0;display:flex}.info-label{color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;font-size:12px}.info-value{color:var(--accent);font-size:16px;font-weight:700}.hold-panel,.next-panel{background:var(--bg-panel);border:1px solid var(--border);text-align:center;padding:10px}.hold-panel h3,.next-panel h3,.music-control h3{color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;font-size:11px}.hold-panel canvas,.next-panel canvas{margin:0 auto;display:block}.specials-panel{background:var(--bg-panel);border:1px solid var(--border);padding:10px}.specials-panel h3{color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;font-size:11px}.specials-list{flex-wrap:wrap;gap:4px;display:flex}.special-item{opacity:.6;border:1px solid #fff3;justify-content:center;align-items:center;width:24px;height:24px;font-size:13px;font-weight:700;transition:opacity .15s,border-color .15s,box-shadow .15s;display:flex}.special-next{opacity:1;z-index:1;border-color:#fff;position:relative;transform:scale(1.15);box-shadow:0 0 8px #ffffff80,0 0 4px}.special-name{text-align:center;letter-spacing:1px;margin-top:6px;font-size:12px;font-weight:700}.opponents-panel{grid-template-columns:repeat(auto-fill, minmax(calc(106px * var(--ui-scale,1)), 1fr));gap:calc(6px * var(--ui-scale,1));align-content:start;display:grid}.opponent-card{background:var(--bg-panel);border:1px solid var(--border);text-align:center;padding:4px}.opponent-header{align-items:center;gap:6px;margin-bottom:4px;display:flex}.opponent-slot-num{width:18px;height:18px;color:var(--bg-dark);background:var(--accent);border-radius:3px;flex-shrink:0;justify-content:center;align-items:center;font-size:11px;font-weight:700;display:inline-flex}.opponent-name{color:var(--text);text-transform:uppercase;letter-spacing:1px;text-overflow:ellipsis;white-space:nowrap;font-size:11px;overflow:hidden}.opponent-canvas{margin:0 auto;display:block}.controls-panel{background:var(--bg-panel);border:1px solid var(--border);flex-wrap:wrap;justify-content:center;gap:4px 12px;max-width:300px;padding:6px 10px;display:flex}.controls-row{color:var(--text-dim);white-space:nowrap;align-items:center;gap:4px;font-size:11px;display:flex}.controls-row kbd{font-size:10px;font-family:var(--font);color:var(--text-bright);background:var(--bg-input);border:1px solid var(--border-bright);text-align:center;border-radius:2px;min-width:18px;padding:1px 5px;display:inline-block}.game-chat-overlay{z-index:10;pointer-events:none;width:300px;position:fixed;bottom:16px;left:16px}.game-chat-overlay .chat-messages{pointer-events:none;max-height:150px;overflow-y:auto}.game-chat-overlay .chat-msg{pointer-events:none}.game-chat-overlay input{pointer-events:all;border:1px solid var(--border);width:100%;color:var(--text-bright);font-size:13px;font-family:var(--font);background:#0a0a1ad9;outline:none;padding:6px 10px}.game-chat-overlay input:focus{border-color:var(--accent)}.game-chat-msg{background:#0a0a1ab3;margin-bottom:2px;padding:3px 8px;transition:opacity .5s}.game-chat-msg.fading{opacity:0}.special-log-chat{color:var(--yellow);font-size:12px;font-style:italic}.game-special-log-overlay{z-index:10;pointer-events:none;width:320px;position:fixed;bottom:16px;left:16px}.special-log-messages{pointer-events:none;max-height:180px;overflow-y:auto}.special-log-msg{color:var(--text);background:#0a0a1ab3;align-items:center;gap:6px;margin-bottom:2px;padding:3px 8px;font-size:12px;transition:opacity .5s;display:flex}.special-log-msg .special-log-icon{font-size:13px;font-weight:700}.special-log-msg.fading{opacity:0}.gameover-container{text-align:center;background:var(--bg-panel);border:1px solid var(--border);min-width:400px;padding:40px}.gameover-title{color:var(--red);text-transform:uppercase;letter-spacing:4px;margin-bottom:24px;font-size:36px}.gameover-title.winner{color:var(--yellow);text-shadow:0 0 20px var(--yellow), 0 0 40px #fc04}.rankings{margin-bottom:24px}.ranking-row{border-bottom:1px solid var(--border);justify-content:center;align-items:center;gap:12px;padding:8px 16px;display:flex}.ranking-row.first{color:var(--yellow)}.ranking-row.me{border-color:var(--accent);background:#00ccff1a}.rank{text-align:right;width:40px;font-size:18px;font-weight:700}.rank-name{text-align:left;text-overflow:ellipsis;width:120px;overflow:hidden}.rank-score{color:var(--accent);text-align:right;width:60px}.rank-lines{color:var(--text-dim);text-align:right;width:80px;font-size:12px}.gameover-special-log{margin-bottom:20px}.special-log-header{color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;margin-bottom:8px;font-size:12px}.special-log-list{text-align:left;max-height:160px;padding:0 16px;overflow-y:auto}.special-log-row{color:var(--text);align-items:center;gap:8px;padding:2px 0;font-size:12px;display:flex}.special-log-row .special-log-icon{color:#000;border-radius:2px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;font-size:11px;font-weight:700;display:inline-flex}.gameover-actions{justify-content:center;gap:12px;display:flex}.game-connection-lost{z-index:900;pointer-events:none;background:#0a0a1ab8;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.connection-lost-card{text-align:center;background:var(--bg-panel);border:1px solid var(--red);border-radius:8px;max-width:340px;padding:20px 24px;box-shadow:0 0 30px #ff446640}.connection-lost-title{letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:10px;font-size:20px}.connection-lost-title:after{content:"";animation:1.2s step-end infinite reconnect-ellipsis}@keyframes reconnect-ellipsis{0%{content:"."}33%{content:".."}66%{content:"..."}}.connection-lost-body{color:var(--text-dim);font-size:13px;line-height:1.5}@media (prefers-reduced-motion:reduce){.connection-lost-title:after{content:"...";animation:none}}.connection-status{font-size:14px;font-family:var(--font);z-index:1000;pointer-events:none;border-radius:4px;padding:7px 14px;transition:opacity .3s;position:fixed;top:10px;right:10px}.status-disconnected{color:#fff;background:#ff4466e6}.status-connecting{color:#000;background:#ffcc00e6}.status-connected{color:#000;background:#00ff88e6}.error-toast{color:#fff;font-family:var(--font);z-index:2000;opacity:0;pointer-events:none;background:#ff4466f2;padding:12px 24px;font-size:14px;transition:opacity .3s;position:fixed;top:50px;left:50%;transform:translate(-50%)}.error-toast.visible{opacity:1}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--border)}::-webkit-scrollbar-thumb:hover{background:var(--border-bright)}.team-badge{vertical-align:middle;border-radius:2px;margin-left:8px;padding:1px 6px;font-size:10px}.team-badge-1{color:#f68;background:#ff668820;border:1px solid #f68}.team-badge-2{color:#6af;background:#66aaff20;border:1px solid #6af}.team-badge-3{color:#6f8;background:#66ff8820;border:1px solid #6f8}.team-badge-4{color:#fc6;background:#ffcc6620;border:1px solid #fc6}.team-badge-5{color:#c6f;background:#cc66ff20;border:1px solid #c6f}.team-badge-6{color:#6fc;background:#66ffcc20;border:1px solid #6fc}.team-badge-7{color:#f96;background:#ff996620;border:1px solid #f96}.team-badge-8{color:#f6c;background:#ff66cc20;border:1px solid #f6c}.player-slot.team-1{border-left:3px solid #f68}.player-slot.team-2{border-left:3px solid #6af}.player-slot.team-3{border-left:3px solid #6f8}.player-slot.team-4{border-left:3px solid #fc6}.player-slot.team-5{border-left:3px solid #c6f}.player-slot.team-6{border-left:3px solid #6fc}.player-slot.team-7{border-left:3px solid #f96}.player-slot.team-8{border-left:3px solid #f6c}.btn-team{border-color:var(--purple);color:var(--purple)}.btn-team:hover{color:#c8f;background:#213}.slot-actions{align-items:center;gap:6px;display:flex}.team-mode-row{margin-bottom:0}.option-select{font-family:var(--font);background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);cursor:pointer;border-radius:4px;outline:none;padding:6px 10px;font-size:14px;transition:border-color .15s}.option-select:focus{border-color:var(--accent);box-shadow:0 0 6px #0cf3}.opponent-card.team-1{border-left:3px solid #f68}.opponent-card.team-2{border-left:3px solid #6af}.opponent-card.team-3{border-left:3px solid #6f8}.opponent-card.team-4{border-left:3px solid #fc6}.opponent-card.team-5{border-left:3px solid #c6f}.opponent-card.team-6{border-left:3px solid #6fc}.opponent-card.team-7{border-left:3px solid #f96}.opponent-card.team-8{border-left:3px solid #f6c}.opponent-card.teammate{opacity:.7}.opponent-card.teammate .opponent-slot-num{color:#888;background:#444}.opponent-team-tag{border-radius:2px;margin-left:4px;padding:1px 4px;font-size:9px}.spectator-toggle-row{text-align:center;margin-top:8px}.btn-spectator-toggle{border-color:var(--text-dim);color:var(--text-dim)}.btn-spectator-toggle:hover{border-color:var(--accent);color:var(--accent)}.spectator-section{border:1px solid var(--border);background:#ffffff08;margin-top:8px;padding:6px 10px;font-size:12px}.spectator-label{color:var(--text-dim);margin-right:6px}.spectator-list{color:var(--text)}.btn-toggle-on{border-color:var(--green);color:var(--green)}.btn-toggle-on:hover{background:#032}.rank-stat{color:var(--text-dim);text-align:right;width:45px;font-size:11px}.rank-tetris{color:var(--yellow)}.btn-pause{width:100%;margin-top:12px}.spectator-entry{color:#aaa;align-items:center;gap:4px;margin-right:8px;font-size:13px;display:inline-flex}.spectator-entry .btn-tiny{padding:1px 4px;font-size:10px}.lobby-player-settings{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:2px 20px;padding:12px 16px;display:grid}.lobby-player-settings .options-title,.lobby-player-settings .settings-subhead{grid-column:1/-1}.lobby-main .lobby-player-settings{grid-template-columns:repeat(2,minmax(0,1fr))}.player-settings-title{color:var(--accent);text-transform:uppercase;letter-spacing:2px;border-bottom:1px solid var(--border);margin-bottom:14px;padding-bottom:8px;font-size:14px}.player-settings-row{justify-content:space-between;align-items:center;gap:12px;padding:4px 0;display:flex}.player-settings-row label{color:var(--text);font-size:14px}.player-settings-row select{flex:1;max-width:180px}.music-control{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:10px 6px}.music-control-head{justify-content:space-between;align-items:center;gap:6px;display:flex}.music-control-head h3{margin-bottom:0}.music-control .music-select{width:100%;margin-top:6px;font-size:12px}.music-select{flex:1;min-width:0}.music-row-controls{flex:1;align-items:center;gap:6px;min-width:0;display:flex}.music-select-inline{flex:1;min-width:0}.name-row-controls,.das-row-controls{flex:1;justify-content:flex-end;align-items:center;gap:6px;min-width:0;display:flex}.name-input{appearance:none;text-align:left;flex:1;width:auto;min-width:0;padding:6px 8px}.das-slider{min-width:0;accent-color:var(--accent);flex:1;height:4px}.btn-music-toggle{border:1px solid var(--purple);width:32px;height:32px;color:var(--purple);cursor:pointer;background:0 0;border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;padding:0;transition:background .15s,color .15s,border-color .15s;display:flex}.btn-music-toggle:hover{color:#c8f;background:#2a1555;border-color:#c8f}.btn-music-toggle.muted{border-color:var(--text-dim);color:var(--text-dim)}.btn-music-toggle.muted:hover{border-color:var(--purple);color:var(--purple);background:#2a1555}.board-frame{aspect-ratio:12/20;flex:auto;justify-content:center;align-items:center;min-height:0;display:flex;position:relative}#game-canvas{touch-action:none}.special-actions{gap:6px;margin-top:6px;display:flex}.special-actions .btn-tiny{flex:1}.opponent-card.targetable{cursor:pointer}.opponent-card.targetable:active{outline:2px solid var(--accent,#0cf)}.controls-touch{display:none}@media (hover:none) and (pointer:coarse){.controls-keyboard{display:none}.controls-touch{display:block}}@media (width<=820px){.lobby-container{flex-direction:column;gap:10px;width:100%;max-width:100%;height:100%;padding:10px;overflow-y:auto}.lobby-main,.lobby-right{flex:none;width:auto;overflow:visible}.player-slots{overflow:visible}.lobby-options,.lobby-player-settings{grid-template-columns:1fr}.lobby-chat{min-height:150px}.game-layout{flex-direction:column;gap:8px;height:100dvh;padding:8px;overflow:hidden}.game-center{flex-direction:column;flex:auto;order:1;min-height:0;display:flex}.game-sidebar-left,.game-sidebar-right{flex-direction:row;flex:none;order:2;align-items:flex-start;gap:8px;width:100%;overflow-x:auto}.info-panel{flex-direction:row;gap:10px}.hold-panel,.next-panel{flex:none}.hold-panel h3,.next-panel h3,.specials-panel h3{margin:0 0 2px;font-size:10px}#hold-canvas{width:52px;height:52px}#next-canvas{width:52px;height:156px}.specials-panel{flex:auto;min-width:120px}.opponents-panel{flex-direction:row;flex:auto;gap:6px;display:flex;overflow-x:auto}.opponent-card{flex:none}.opponent-canvas{width:60px;height:100px}.controls-panel,.music-control{display:none}.game-chat-overlay,.game-special-log-overlay{max-height:22vh}}@media (width<=920px) and (orientation:landscape){.game-layout{flex-direction:row}.game-sidebar-left,.game-sidebar-right{flex-direction:column;width:auto}.opponents-panel{flex-direction:column}}.winlist-header{letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim,#88a);margin:18px 0 6px;font-size:13px}.winlist-list{flex-direction:column;gap:2px;display:flex}.winlist-row{background:var(--bg-panel,#14142a);border:1px solid var(--border,#2a2a4a);grid-template-columns:2.2em 1fr auto auto;align-items:baseline;gap:10px;padding:3px 8px;display:grid}.winlist-row.me{border-color:var(--accent,#0cf)}.winlist-place{color:var(--text-dim,#88a)}.winlist-name{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.winlist-score{font-weight:700}.winlist-record{color:var(--text-dim,#88a);font-size:12px}