*,: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:#8585b8;--text-bright:#e0e0ff;--accent:#0cf;--accent-glow:#0cf4;--green:#0f8;--red:#f46;--yellow:#fc0;--purple:#b366ff;--font:"Courier New", "Consolas", monospace;--t-xs:11px;--t-sm:12px;--t-md:13px;--t-ui:14px;--t-lg:16px;--t-xl:20px;--t-2xl:36px;--track-label:.15em;--track-data:.08em;--track-verdict:.11em;--ctl-h-lg:40px;--ctl-h:34px;--ctl-h-sm:24px;--ctl-pad-x-lg:24px;--ctl-pad-x:12px;--ctl-pad-x-sm:8px;--r-chip:2px;--r-field:4px;--r-round:50%;--scrim:#0a0a1abf;--glow-card:0 0 40px #0485;--focus-ring:0 0 10px var(--accent-glow);--sidebar-left-w:140px;--sidebar-right-w:480px;--layout-chrome:64px}@media (hover:none) and (pointer:coarse){:root{--ctl-h-lg:48px;--ctl-h:44px;--ctl-h-sm:44px}}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}#screen-welcome.active{align-items:safe center;overflow-y:auto}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}.btn{min-height:var(--ctl-h-lg);padding:0 var(--ctl-pad-x-lg);font-family:var(--font);font-size:var(--t-ui);border:1px solid var(--border-bright);background:var(--bg-panel);color:var(--text-bright);cursor:pointer;text-transform:uppercase;letter-spacing:var(--track-data);justify-content:center;align-items:center;transition:all .15s;display:inline-flex}.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{min-height:var(--ctl-h);padding:0 var(--ctl-pad-x);font-size:var(--t-sm)}.btn-tiny{min-height:var(--ctl-h-sm);min-width:var(--ctl-h-sm);padding:0 var(--ctl-pad-x-sm);font-size:var(--t-xs)}input[type=text]{min-height:var(--ctl-h);padding:0 var(--ctl-pad-x);font-family:var(--font);font-size:var(--t-ui);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-field);color:var(--text-bright);outline:none;transition:border-color .15s}.welcome-form input[type=text]{min-height:var(--ctl-h-lg)}input[type=text]:focus{border-color:var(--accent);box-shadow:var(--focus-ring)}input[type=text]::placeholder{color:var(--text-dim)}.welcome-container,.lobby-container,.gameover-container{zoom:var(--screen-scale,1)}.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:.167em;margin-bottom:8px;font-size:clamp(28px,min(14vw,13vh),72px)}.byline{color:var(--text-dim);font-size:var(--t-md);letter-spacing:var(--track-label);margin-bottom:14px}.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);font-size:var(--t-lg);letter-spacing:.25em;text-transform:uppercase;margin-bottom:48px}.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:0;width:280px;padding:12px 16px}.settings-subhead{font-size:var(--t-sm);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-dim);text-align:left;margin:10px 0 6px}.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{font-size:var(--t-ui);color:var(--text-dim);text-align:right;flex-shrink:0;width:80px}.das-setting-row input[type=range]{appearance:none;height:var(--ctl-h);accent-color:var(--accent);cursor:pointer;background:0 0;flex:1}.das-setting-row input[type=range]::-webkit-slider-runnable-track{border-radius:var(--r-chip);background:var(--border-bright);height:4px}.das-setting-row input[type=range]::-moz-range-track{border-radius:var(--r-chip);background:var(--border-bright);height:4px}.das-setting-row input[type=range]::-webkit-slider-thumb{appearance:none;border-radius:var(--r-round);background:var(--accent);border:none;width:16px;height:16px;margin-top:-6px}.das-setting-row input[type=range]::-moz-range-thumb{border-radius:var(--r-round);background:var(--accent);border:none;width:16px;height:16px}.das-setting-row input[type=range]:focus-visible{box-shadow:var(--focus-ring);outline:none}.das-value{font-size:var(--t-ui);color:var(--accent);text-align:right;flex-shrink:0;width:50px}@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.lobby-solo{width:760px}.lobby-container{width:1200px;max-width:calc(96vw / var(--screen-scale,1));height:min(880px, calc(96vh / var(--screen-scale,1)));gap:20px;display:flex}.lobby-main{background:var(--bg-panel);border:1px solid var(--border);flex-direction:column;flex:1;padding:20px;display:flex}.lobby-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:20px;display:flex}.room-info{flex-wrap:wrap}.lobby-header h2{color:var(--accent);font-size:var(--t-xl);text-transform:uppercase;letter-spacing:var(--track-label)}.room-info{align-items:center;gap:10px;display:flex}.room-code-display{font-family:var(--font);font-size:var(--t-ui);color:var(--yellow);background:var(--bg-input);min-height:var(--ctl-h);border:1px solid var(--border);letter-spacing:var(--track-label);cursor:pointer;padding:4px 12px;transition:border-color .15s;position:relative}.room-code-display:after{content:"COPY LINK";font-size:var(--t-xs);letter-spacing:var(--track-data);color:var(--bg-dark);background:var(--yellow);border-radius:var(--r-chip);vertical-align:middle;margin-left:10px;padding:2px 6px}.room-code-display:hover,.room-code-display:focus-visible{border-color:var(--yellow)}.copy-toast{background:var(--yellow);color:#000;font-size:var(--t-sm);white-space:nowrap;letter-spacing:0;border-radius:var(--r-chip);pointer-events:none;z-index:9999;padding:6px 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:var(--t-ui)}.slot-name.me{color:var(--accent)}.host-badge{font-size:var(--t-xs);color:var(--yellow);border:1px solid var(--yellow);vertical-align:middle;margin-left:8px;padding:1px 6px}.slot-empty{color:var(--text-dim);font-size:var(--t-sm)}.lobby-actions{flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px;display:flex}.waiting-text{color:var(--text-dim);font-size:var(--t-md);font-style:italic}.lobby-right{flex-direction:column;gap:8px;width:580px;display:flex;overflow-y:auto}.lobby-options{background:var(--bg-panel);border:1px solid var(--border);border-radius:0;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:2px 20px;padding:12px 16px;display:grid}.options-title{font-size:var(--t-md);color:var(--accent);text-transform:uppercase;letter-spacing:var(--track-label);border-bottom:1px solid var(--border);margin-bottom:14px;padding-bottom:8px}.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{font-size:var(--t-ui);color:var(--text)}.option-input{appearance:textfield;width:56px;min-height:var(--ctl-h);font-size:var(--t-ui);font-family:var(--font);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-field);color:var(--text-bright);text-align:center;outline:none;padding:0 4px}.option-input:focus{border-color:var(--accent);box-shadow:var(--focus-ring)}.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:stretch;gap:0;display:flex}.stepper-btn{width:var(--ctl-h);min-height:var(--ctl-h);background:var(--bg-input);border:1px solid var(--border);color:var(--text-bright);font-size:var(--t-xl);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-radius:var(--r-field) 0 0 var(--r-field);border-right:none}.stepper-btn.stepper-inc{border-radius:0 var(--r-field) var(--r-field) 0;border-left:none}.stepper .option-input{border-radius:0;width:48px}.option-value{font-size:var(--t-ui);color:var(--text-bright);text-align:center;min-width:56px}.freq-section{margin-bottom:6px}.freq-header{cursor:pointer;-webkit-user-select:none;user-select:none;width:100%;font-family:var(--font);color:inherit;text-align:left;background:0 0;border:none;justify-content:space-between;align-items:center;padding:6px 0;display:flex}.freq-header:hover .freq-title{color:var(--text)}.freq-title{font-size:var(--t-sm);color:var(--text-dim);text-transform:uppercase;letter-spacing:var(--track-label);margin:0;transition:color .15s}.freq-toggle{font-size:var(--t-sm);color:var(--text-dim);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:0;flex-direction:column;justify-content:space-between;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{width:var(--ctl-h);height:var(--ctl-h);font-size:var(--t-ui);border:1px solid var(--border);border-radius:var(--r-chip);background:var(--bg-input);color:var(--text-bright);justify-content:center;align-items:center;font-weight:700;display:flex}.freq-item-name{font-size:var(--t-xs);color:var(--text-dim);text-align:center;word-wrap:break-word;white-space:normal;max-width:64px;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}.freq-input{width:48px;min-height:var(--ctl-h);font-size:var(--t-ui);font-family:var(--font);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-field);color:var(--text-bright);text-align:center;appearance:textfield;outline:none;padding:0 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{font-size:var(--t-ui);color:var(--text);text-align:center;min-width:32px;font-weight:700}.lobby-chat{background:var(--bg-panel);border:1px solid var(--border);border-radius:0;flex-direction:column;flex:1;min-height:120px;padding:12px;display:flex}.chat-messages{font-size:var(--t-md);flex:1;margin-bottom:10px;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{min-height:var(--ctl-h);padding:0 var(--ctl-pad-x);font-size:var(--t-md);flex:1}#screen-game.active{background:var(--bg-dark);justify-content:center;align-items:center;display:flex}#screen-game{--t-xs:calc(11px * var(--ui-scale,1));--t-sm:calc(12px * var(--ui-scale,1));--t-md:calc(13px * var(--ui-scale,1));--t-lg:calc(16px * var(--ui-scale,1));--ctl-pad-x:calc(12px * var(--ui-scale,1));--ctl-pad-x-sm:calc(8px * var(--ui-scale,1))}#screen-game .btn-small,#screen-game .btn-tiny,#screen-game .option-select{min-height:calc(var(--ctl-h-sm) * min(var(--ui-scale,1), 1.6))}.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(var(--sidebar-left-w) * var(--ui-scale,1));min-height:0;padding-bottom:calc(28px * var(--ui-scale,1) + 20px);flex-direction:column;align-self:stretch;gap:clamp(8px,.9vh,16px);display:flex}.game-sidebar-left>*{flex:none}.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}}.gesture-hint{font-family:var(--font);border:1px solid var(--border-bright);border-radius:var(--r-chip);pointer-events:none;z-index:2;background:#0a0a1aeb;flex-direction:column;justify-content:center;gap:12px;padding:14px;display:flex;position:absolute;inset:10% 6%}.gesture-hint-title{font-size:var(--t-lg);color:var(--text-bright);text-align:center;letter-spacing:var(--track-label);text-transform:uppercase}.gesture-hint-rows{justify-content:center;gap:8px;display:grid}.gesture-hint-rows .controls-row{font-size:var(--t-md);color:var(--text)}.hit-banner{padding:calc(4px * var(--ui-scale,1)) calc(10px * var(--ui-scale,1));font-family:var(--font);font-size:var(--t-lg);letter-spacing:var(--track-data);white-space:nowrap;border-radius:var(--r-chip);pointer-events:none;opacity:0;background:#0a0a1ad9;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(var(--sidebar-right-w) * var(--ui-scale,1));gap:12px;min-width:0;display:flex}.game-room-code{font-family:var(--font);min-height:var(--ctl-h-sm);font-size:var(--t-sm);letter-spacing:var(--track-data);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:0;padding:6px 8px}.game-room-code:hover{border-color:var(--accent)}.info-panel{background:var(--bg-panel);border:1px solid var(--border);padding:10px}.info-item{justify-content:space-between;gap:calc(10px * var(--ui-scale,1));padding:4px 0;display:flex}.info-label{color:var(--text-dim);font-size:var(--t-sm);text-transform:uppercase;letter-spacing:var(--track-label)}.info-value{color:var(--accent);font-size:var(--t-lg);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{font-size:var(--t-sm);color:var(--text-dim);text-transform:uppercase;letter-spacing:var(--track-label);margin-bottom:8px}.hold-panel canvas,.next-panel canvas{margin:0 auto;display:block}.specials-panel{background:var(--bg-panel);border:1px solid var(--border);min-height:calc(88px * var(--ui-scale,1) + 38px);flex-direction:column;flex:0 auto;padding:10px;display:flex}.specials-panel>:not(.specials-list){flex:none}.specials-panel h3{font-size:var(--t-sm);color:var(--text-dim);text-transform:uppercase;letter-spacing:var(--track-label);margin-bottom:8px}.specials-list{gap:calc(4px * var(--ui-scale,1));min-height:calc(24px * var(--ui-scale,1));scrollbar-width:thin;flex-wrap:wrap;flex:auto;align-content:flex-start;display:flex;overflow-y:auto}.special-item{width:calc(24px * var(--ui-scale,1));height:calc(24px * var(--ui-scale,1));font-size:var(--t-md);opacity:.6;border:1px solid #fff3;justify-content:center;align-items:center;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{font-size:var(--t-sm);text-align:center;letter-spacing:var(--track-data);margin-top:6px;font-weight:700}.opponents-panel{grid-template-columns:repeat(var(--rival-columns,4), minmax(0, 1fr));gap:calc(6px * var(--ui-scale,1));align-content:start;display:grid}.opponent-card{background:var(--bg-panel);border:1px solid var(--border);padding:calc(4px * var(--ui-scale,1));text-align:center}.opponent-header{align-items:center;gap:calc(6px * var(--ui-scale,1));margin-bottom:calc(4px * var(--ui-scale,1));display:flex}.opponent-slot-num{width:calc(18px * var(--ui-scale,1));height:calc(18px * var(--ui-scale,1));font-size:var(--t-xs);color:var(--bg-dark);background:var(--accent);border-radius:var(--r-chip);flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:inline-flex}.opponent-name{font-size:var(--t-xs);color:var(--text);text-transform:uppercase;letter-spacing:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.opponent-canvas{margin:0 auto;display:block}.controls-panel{gap:calc(5px * var(--ui-scale,1)) calc(12px * var(--ui-scale,1));padding:calc(6px * var(--ui-scale,1)) calc(10px * var(--ui-scale,1));background:var(--bg-panel);border:1px solid var(--border);max-width:calc(320px * var(--ui-scale,1));flex-wrap:wrap;justify-content:center;display:flex}.controls-row{align-items:center;gap:calc(5px * var(--ui-scale,1));font-size:var(--t-sm);color:var(--text-dim);white-space:nowrap;display:flex}.controls-row kbd{padding:calc(2px * var(--ui-scale,1)) calc(6px * var(--ui-scale,1));font-size:var(--t-xs);font-family:var(--font);color:var(--text-bright);background:var(--bg-input);border:1px solid var(--border-bright);border-radius:var(--r-chip);min-width:calc(22px * var(--ui-scale,1));text-align:center;display:inline-block}.game-chat-overlay{width:calc(300px * var(--ui-scale,1));z-index:10;pointer-events:none;position:fixed;bottom:16px;left:16px}.game-chat-overlay .chat-messages:empty,.special-log-messages:empty{display:none}.game-chat-overlay .chat-messages{max-height:calc(150px * var(--ui-scale,1));pointer-events:none;flex:0 auto;min-height:0;overflow-y:auto}.game-chat-overlay{flex-direction:column;display:flex}.game-chat-overlay input{flex:none}.game-chat-overlay .chat-msg{pointer-events:none}.game-chat-overlay input{pointer-events:all;width:100%;padding:calc(6px * var(--ui-scale,1)) calc(10px * var(--ui-scale,1));font-size:var(--t-md);border:1px solid var(--border);color:var(--text-bright);font-family:var(--font);background:#0a0a1ad9;outline:none}.game-chat-overlay input:focus{border-color:var(--accent)}.game-chat-msg{padding:calc(3px * var(--ui-scale,1)) calc(8px * var(--ui-scale,1));font-size:var(--t-md);background:#0a0a1ab3;margin-bottom:2px;transition:opacity .5s}.game-chat-msg.fading{opacity:0}.game-chat-overlay:focus-within .game-chat-msg.fading{opacity:1}.special-log-chat{color:var(--yellow);font-style:italic;font-size:var(--t-sm)}.game-special-log-overlay{width:calc(320px * var(--ui-scale,1));z-index:10;pointer-events:none;position:fixed;bottom:16px;left:16px}.special-log-messages{max-height:calc(180px * var(--ui-scale,1));pointer-events:none;overflow-y:auto}.special-log-msg{padding:calc(3px * var(--ui-scale,1)) calc(8px * var(--ui-scale,1));font-size:var(--t-sm);color:var(--text);align-items:center;gap:calc(6px * var(--ui-scale,1));background:#0a0a1ab3;margin-bottom:2px;transition:opacity .5s;display:flex}.special-log-msg .special-log-icon{font-weight:700;font-size:var(--t-md)}.special-log-msg.fading{opacity:0}.gameover-container{text-align:center;background:var(--bg-panel);border:1px solid var(--border);box-shadow:var(--glow-card);min-width:min(400px,100%);max-width:calc(100vw / var(--screen-scale,1));max-height:calc(98vh / var(--screen-scale,1));padding:clamp(20px,6vw,40px) clamp(16px,5vw,40px);overflow-y:auto}.gameover-title{font-size:var(--t-2xl);color:var(--red);text-transform:uppercase;letter-spacing:var(--track-verdict);margin-bottom:24px}.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{font-size:var(--t-lg);text-align:right;width:40px;font-weight:700}.rank-name{font-size:var(--t-ui);text-align:left;text-overflow:ellipsis;width:140px;overflow:hidden}.rank-score{font-size:var(--t-ui);color:var(--accent);text-align:right;width:60px;font-weight:700}.rank-lines{color:var(--text-dim);font-size:var(--t-sm);text-align:right;width:80px}.gameover-special-log{max-height:calc(30vh / var(--screen-scale,1));margin-bottom:20px;overflow-y:auto}.special-log-header{font-size:var(--t-md);color:var(--text-dim);text-transform:uppercase;letter-spacing:var(--track-label);margin-top:18px;margin-bottom:8px}.special-log-list{text-align:left;max-height:160px;padding:0 16px;overflow-y:auto}.special-log-row{font-size:var(--t-sm);color:var(--text);align-items:center;gap:8px;padding:2px 0;display:flex}.special-log-row .special-log-icon{width:18px;height:18px;font-size:var(--t-xs);color:#000;border-radius:var(--r-chip);flex-shrink:0;justify-content:center;align-items:center;font-weight:700;display:inline-flex}.gameover-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.game-connection-lost{background:var(--scrim);z-index:900;pointer-events:none;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.connection-lost-card{zoom:var(--ui-scale,1);text-align:center;background:var(--bg-panel);border:1px solid var(--red);max-width:340px;box-shadow:var(--glow-card);padding:20px 24px}.connection-lost-title{font-size:var(--t-xl);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--red);margin-bottom:10px}.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{font-size:var(--t-md);color:var(--text-dim);line-height:1.5}@media (prefers-reduced-motion:reduce){.connection-lost-title:after{content:"...";animation:none}}.connection-status,.error-toast,.copy-toast{zoom:var(--screen-scale,1)}.connection-status{font-size:var(--t-ui);font-family:var(--font);border-radius:var(--r-chip);z-index:1000;pointer-events:none;padding:8px 16px;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);font-size:var(--t-ui);z-index:2000;opacity:0;pointer-events:none;background:#d42a4a;padding:12px 24px;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{font-size:var(--t-xs);vertical-align:middle;border-radius:var(--r-chip);margin-left:8px;padding:1px 6px}.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{min-height:var(--ctl-h);font-family:var(--font);font-size:var(--t-ui);padding:0 var(--ctl-pad-x-sm);background:var(--bg-input);border:1px solid var(--border);border-radius:var(--r-field);color:var(--text-bright);cursor:pointer;outline:none;transition:border-color .15s}.option-select:focus{border-color:var(--accent);box-shadow:var(--focus-ring)}.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{font-size:var(--t-xs);border-radius:var(--r-chip);margin-left:4px;padding:1px 4px}.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);font-size:var(--t-sm);background:#ffffff08;margin-top:8px;padding:6px 10px}.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);font-size:var(--t-sm);text-align:right;width:54px}.rank-tetris{color:var(--yellow)}.btn-pause{width:100%;font-size:var(--t-sm);margin-top:12px}.spectator-entry{color:#aaa;font-size:var(--t-sm);align-items:center;gap:4px;margin-right:8px;display:inline-flex}.spectator-entry .btn-tiny{padding:0 var(--ctl-pad-x-sm)}.lobby-player-settings{background:var(--bg-panel);border:1px solid var(--border);border-radius:0;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{font-size:var(--t-md);color:var(--accent);text-transform:uppercase;letter-spacing:var(--track-label);border-bottom:1px solid var(--border);margin-bottom:14px;padding-bottom:8px}.player-settings-row{justify-content:space-between;align-items:center;gap:12px;padding:4px 0;display:flex}.player-settings-row label{font-size:var(--t-ui);color:var(--text)}.player-settings-row select{flex:1;max-width:180px}.music-control{background:var(--bg-panel);border:1px solid var(--border);border-radius:0;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%;font-size:var(--t-sm);margin-top:6px}#screen-game .btn-music-toggle{width:calc(var(--ctl-h-sm) * min(var(--ui-scale,1), 1.6));height:calc(var(--ctl-h-sm) * min(var(--ui-scale,1), 1.6))}#screen-game .btn-music-toggle svg{width:calc(18px * var(--ui-scale,1));height:calc(18px * var(--ui-scale,1))}.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}.das-slider{min-width:0;accent-color:var(--accent);flex:1;height:4px}.btn-music-toggle{width:var(--ctl-h);height:var(--ctl-h);border:1px solid var(--purple);color:var(--purple);cursor:pointer;background:0 0;border-radius:0;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;--board-max-w:calc(100vw - var(--layout-chrome) - (var(--sidebar-left-w) + var(--sidebar-right-w)) * var(--ui-scale,1));min-height:0;max-width:var(--board-max-w);max-height:calc(var(--board-max-w) * 20 / 12);flex:auto;justify-content:center;align-items:center;display:flex;position:relative}#game-canvas{touch-action:none}.special-actions{gap:6px;margin-top:6px;display:flex}.special-actions .btn-tiny{font-size:var(--t-xs);letter-spacing:0;flex:1;padding:0 2px}.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}.das-settings .das-setting-row,.das-settings .settings-subhead,.das-only{display:none}.das-settings .das-touch-note{display:block}.freq-header{min-height:var(--ctl-h)}}.das-touch-note{font-size:var(--t-md);color:var(--text-dim);text-align:left;line-height:1.5;display:none}@media (hover:none){.btn:hover{background:var(--bg-panel);color:var(--text-bright);box-shadow:none}.btn-primary:hover{color:var(--accent);background:#035}.btn-secondary:hover{color:var(--purple)}.btn-accent:hover{color:var(--green)}.btn-danger:hover{color:var(--red)}.btn-toggle-on:hover{background:var(--bg-panel);color:var(--green)}}@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,.lobby-main .lobby-player-settings{grid-template-columns:1fr}.lobby-chat{min-height:150px}}@media (width<=820px),(orientation:portrait){.game-layout{flex-direction:column}.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;width:100%}.board-frame{--board-max-w:100%;max-height:none}.game-sidebar-left>*,.game-sidebar-right>*{flex:none}.btn-pause{width:auto;margin-top:0}}@media (width<=820px){.game-layout{gap:8px;height:100dvh;padding:8px;overflow:hidden}.game-sidebar-left,.game-sidebar-right{gap:8px;overflow-x:auto}.game-sidebar-left{padding-bottom:0}.info-panel{flex-direction:row;gap:10px}.specials-panel{flex:auto;min-width:124px}.hold-panel h3,.next-panel h3,.specials-panel h3{font-size:var(--t-xs);margin:0 0 2px}#hold-canvas,#next-canvas{width:52px;height:52px}.opponents-panel{flex-direction:row;flex:auto;gap:6px;display:flex;overflow-x:auto}.opponent-card{flex:none}.opponent-canvas{width:60px;height:100px}.special-actions{flex-direction:row}.specials-panel,.specials-list{min-height:0}.specials-panel{order:-2}.btn-pause{order:-1}.game-room-code{order:1}.game-chat-overlay,.game-special-log-overlay{bottom:8px;left:8px}.game-sidebar-right{margin-bottom:var(--ctl-h)}.controls-panel,.music-control{display:none}.game-chat-overlay,.game-special-log-overlay{max-height:22vh}}@media (width>=821px) and (orientation:portrait){.game-sidebar-left,.game-sidebar-right{justify-content:center}.info-panel{min-width:calc(var(--sidebar-left-w) * var(--ui-scale,1))}}@media (width>=821px) and (height<=820px) and (orientation:landscape){.hold-panel,.next-panel{padding:6px}.hold-panel h3,.next-panel h3,.specials-panel h3,.music-control h3{margin-bottom:4px}.info-panel,.specials-panel{padding:8px}.info-item{padding:2px 0}.btn-pause{margin-top:6px}}@media (orientation:landscape) and (height<=500px){.game-layout{flex-direction:row}.game-sidebar-left,.game-sidebar-right{flex-direction:column;width:auto}.controls-panel{display:none}.game-sidebar-right{flex:0 auto;min-width:0}.game-sidebar-left,.game-sidebar-right{overflow-y:auto}.board-frame{--board-max-w:100%;aspect-ratio:auto}.opponents-panel{flex-direction:column}.specials-panel{flex:none}.game-layout{padding-left:calc(min(30vw,220px) + 16px)}.game-chat-overlay,.game-special-log-overlay{width:min(30vw,220px)}}.btn-help{z-index:20;width:min(calc(44px * var(--ui-scale,1)), 64px);height:min(calc(44px * var(--ui-scale,1)), 64px);font-family:var(--font);font-size:min(calc(var(--t-xl) * var(--ui-scale,1)), 30px);color:var(--accent);background:var(--bg-panel);border:1px solid var(--accent);border-radius:var(--r-round);cursor:pointer;box-shadow:0 0 12px var(--accent-glow);line-height:1;transition:color .15s,background .15s;display:none;position:fixed;bottom:16px;right:16px}#screen-game.active~.btn-help{display:block}.btn-help:hover,.btn-help:focus-visible{color:var(--bg-dark);background:var(--accent)}.help-dialog{z-index:30;background:var(--scrim);justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.help-card{zoom:var(--screen-scale,1);width:100%;max-width:520px;max-height:calc(100% / var(--screen-scale,1));background:var(--bg-panel);border:1px solid var(--border);box-shadow:var(--glow-card);padding:20px 24px;overflow-y:auto}.help-head{justify-content:space-between;align-items:center;margin-bottom:12px;display:flex}.help-head h2{font-size:var(--t-xl);color:var(--accent);letter-spacing:var(--track-label);text-transform:uppercase}.btn-help-close{width:var(--ctl-h);height:var(--ctl-h);font-family:var(--font);font-size:var(--t-xl);color:var(--text-dim);border:1px solid var(--border);cursor:pointer;background:0 0;flex:none;line-height:1}.btn-help-close:hover{color:var(--text-bright);border-color:var(--border-bright)}.help-section+.help-section{margin-top:14px}.help-section h3{font-size:var(--t-md);color:var(--text-dim);text-transform:uppercase;letter-spacing:var(--track-label);margin-bottom:8px}.help-section .controls-panel{grid-template-columns:max-content 1fr;justify-content:start;align-items:baseline;gap:10px 14px;max-width:none;padding:14px 16px;display:grid}.help-section .controls-row{font-size:var(--t-ui);display:contents}.help-section .controls-row kbd{font-size:var(--t-md);justify-self:end;min-width:34px;padding:4px 8px}.help-section .controls-row span{white-space:normal}#screen-game.active~#help-dialog .help-card{zoom:var(--ui-scale,1);max-height:calc(100% / var(--ui-scale,1))}@media (width>=700px){.help-card{grid-template-columns:1fr 1fr;align-items:start;gap:4px 20px;max-width:680px;display:grid}.help-head{grid-column:1/-1}.help-section+.help-section{margin-top:0}}.help-section-specials{grid-column:1/-1;margin-top:14px}.help-section-specials summary{cursor:pointer;list-style:none}.help-section-specials summary::-webkit-details-marker{display:none}.help-section-specials summary h3{margin-bottom:0;display:inline-block}.help-section-specials summary h3:before{content:"▸ "}.help-section-specials[open] summary h3:before{content:"▾ "}.help-section-specials[open] summary{margin-bottom:8px}.help-note{font-size:var(--t-md);color:var(--text);margin-bottom:10px;line-height:1.5}.specials-help{background:var(--bg-panel);border:1px solid var(--border);font-size:var(--t-md);color:var(--text);grid-template-columns:max-content 1fr;align-items:center;gap:6px 10px;padding:14px 16px;display:grid}.specials-help strong{color:var(--text-bright)}.special-help-tile{color:#000;border-radius:var(--r-chip);justify-content:center;align-items:center;width:22px;height:22px;font-weight:700;display:inline-flex}@media (width>=700px){.specials-help{grid-template-columns:max-content 1fr max-content 1fr}}.winlist-header{font-size:var(--t-md);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--text-dim,#88a);margin:18px 0 6px}.winlist-list{flex-direction:column;gap:2px;display:flex}.winlist-row{font-size:var(--t-ui);background:var(--bg-dark);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);background:#00ccff1a}.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:var(--t-sm)}