html,body{height:100%;overflow:hidden}
#rival-name.is-waiting::after{content:'|';display:inline-block;width:1ch;text-align:center;animation:rival-caret 1s step-end infinite}
@keyframes rival-caret{0%,100%{opacity:1}50%{opacity:0}}
@media(prefers-reduced-motion:reduce){#rival-name.is-waiting::after{animation:none}}
#overlay.waiting-room #overlay-title::before{content:'...';display:block;width:3ch;margin:0 auto 8px;line-height:1;text-align:left;clip-path:inset(0 100% 0 0);animation:matchmaking-dots 1.4s step-end infinite}
@keyframes matchmaking-dots{0%{clip-path:inset(0 100% 0 0)}25%{clip-path:inset(0 66.666% 0 0)}50%{clip-path:inset(0 33.333% 0 0)}75%{clip-path:inset(0 0 0 0)}}
@media(prefers-reduced-motion:reduce){#overlay.waiting-room #overlay-title::before{animation:none;clip-path:inset(0 0 0 0)}}
#leaderboard-panel .offcanvas-header{justify-content:space-between}
.leaderboard-heading-group{display:flex;align-items:center;gap:9px;min-width:0;flex-wrap:nowrap}
.difficulty-icon{display:inline-grid;place-items:center;width:22px;height:24px;flex-shrink:0}
.difficulty-icon svg{width:22px;height:22px}
@media(max-width:350px){#leaderboard-panel .difficulty-icon,#leaderboard-panel .difficulty-icon svg{width:20px}#leaderboard-panel .leaderboard-heading-group #leaderboard-title{font-size:20px}}
.leaderboard-level-badge{font:15px/1 'VT323',monospace;font-weight:400;padding:5px 7px;border:1px solid #53697c;background:#2c3b48;color:#b9dbe9;border-radius:4px;white-space:nowrap;flex-shrink:0}
#leaderboard-panel button.leaderboard-close{margin-left:auto;flex-shrink:0;border:1px solid #5e7285;background:#293440;color:#d1e4f0;border-radius:6px;width:32px;height:32px;min-width:32px;min-height:32px;padding:4px}
#leaderboard-panel .leaderboard-close:hover{background:#3a4e60;border-color:#8ed4e6;color:#edf8ff}
@media(max-width:350px){.leaderboard-heading-group{gap:7px}#leaderboard-panel #leaderboard-title{font-size:24px}.leaderboard-level-badge{font-size:14px;padding:4px 6px}}
#connect-board{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;width:min(92%,580px);aspect-ratio:7/6;padding:8px;background:#253c52;border:2px solid #536e88;border-radius:6px;z-index:1}
@supports(width:1cqh){#connect-board{width:min(92cqw,93cqh,580px)}}
.connect-column{display:grid;grid-template-rows:repeat(6,minmax(0,1fr));gap:5px;min-width:0;min-height:0;width:100%;padding:0;border:0;border-radius:4px;background:transparent;touch-action:manipulation}
.connect-column:disabled{opacity:1;cursor:default}
.connect-cell{display:block;width:100%;aspect-ratio:1;border-radius:50%;background:#101820;border:1px solid #435b73;box-shadow:inset 0 2px 3px #0005}
.connect-cell[data-symbol=X]{background:#8ed4e6;border-color:#b9e8f3}
.connect-cell[data-symbol=O]{background:#eea38f;border-color:#f6c3b4}
#connect-board[data-side="1"] .connect-cell[data-symbol=X]{background:#eea38f;border-color:#f6c3b4}
#connect-board[data-side="1"] .connect-cell[data-symbol=O]{background:#8ed4e6;border-color:#b9e8f3}
.connect-column:not(:disabled):hover{background:#ffffff0b}
.connect-column:focus-visible{outline:2px solid #b9e8f3;outline-offset:2px}
.disc-score{display:inline-block;width:25px;height:25px;border-radius:50%;background:currentColor;flex-shrink:0}
.home-screen{height:100%;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:26px;padding:24px 20px;scrollbar-width:none}
.home-screen::-webkit-scrollbar{display:none}
.home-form{margin:0;min-width:0;flex-shrink:0}
.home-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 24px;flex-shrink:0;font:17px 'VT323',monospace}
.home-footer a{display:inline-flex;align-items:center;min-height:36px;color:#8f9eaf;padding:4px 0}
.home-footer a:hover{color:#b6e4f2;text-decoration:underline;text-underline-offset:4px}
#home-create-form{margin-top:auto}
.home-label{display:block;font:17px 'VT323',monospace;color:#a8b7c8;margin-bottom:9px}
.home-game-picker{width:100%}
.home-game-select.btn{display:flex;align-items:center;gap:11px;width:100%;min-height:56px;padding:12px 14px;border:1px solid #536173;background:#202731;color:#e1ebf5;font-size:23px}
.home-game-select.btn:hover,.home-game-select.btn[aria-expanded=true]{background:#293643;border-color:#819db3;color:#edf6ff}
.home-game-select>span{flex:1;text-align:left}
.home-game-select>img{width:26px;height:28px;object-fit:contain}
.home-game-select>svg{width:15px;height:15px}
.home-game-picker .game-menu{width:100%}
.home-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:13px}
.home-actions .btn{display:flex;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:10px 9px;font-size:18px;line-height:1.2;box-shadow:none}
.home-match-button{color:#c6d5e5;background:#252e39;border:1px solid #536173}
.home-match-button:hover{color:#eaf4fb;background:#344351;border-color:#7893aa}
.home-join-form{border-top:1px solid #384451;padding-top:25px;margin-bottom:auto}
.home-code-row{display:flex;align-items:stretch;gap:10px}
.home-code-row .form-control{min-width:0;min-height:52px;font:32px 'VT323',monospace;letter-spacing:3px;padding:9px 12px}
.home-code-row .play-btn{flex-shrink:0;min-width:91px;min-height:52px;padding:9px 13px;box-shadow:none}
body[data-layout=mobile] .secondary-topbar #room-code{font-size:28px;line-height:1;letter-spacing:1.5px}
body[data-layout=mobile] #overlay.waiting-room small{font:48px/1.2 'VT323',monospace;letter-spacing:5px;color:#dfc184}
@media(max-width:350px){.home-screen{padding:24px 18px}.home-actions{grid-template-columns:1fr}.home-actions .btn{min-height:44px}.home-code-row{gap:8px}.home-code-row .form-control{font-size:28px;letter-spacing:3px}.home-code-row .play-btn{min-width:80px;padding:8px 10px}}
.app-footer{display:flex;align-items:center;justify-content:center;min-height:38px;padding:5px 12px max(5px,env(safe-area-inset-bottom));flex-shrink:0;border-top:1px solid #353f4b;background:#1b1d22;font-size:16px}
.app-footer a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:28px;color:#b3c5d6}
.app-footer a:hover{color:#9edfed}
.app-footer svg{width:14px;height:14px}
html{background:#0b0c0f}
body[data-layout=mobile]{width:100%;max-width:430px;min-width:0;margin:0 auto;box-shadow:0 0 0 1px #30343c}
body[data-layout=mobile] .topbar-inner{min-height:56px;padding:0 12px;gap:10px}
body[data-layout=mobile] .topbar-inner .brand{font-size:28px;gap:6px}
body[data-layout=mobile] .topbar-inner #connection{display:none}
body[data-layout=mobile] .topbar-inner .tools{gap:4px}
body[data-layout=mobile] .topbar-inner #profile{font-size:19px;padding:8px 9px}
body[data-layout=mobile] #profile-toggle{width:44px;height:44px;justify-content:center;padding:0}
body[data-layout=mobile] #profile-name,body[data-layout=mobile] .profile-chevron{display:none}
body[data-layout=mobile] .secondary-topbar{flex-wrap:nowrap;gap:8px;min-height:54px;padding:5px 10px}
body[data-layout=mobile] .game-picker{flex:0 1 112px;width:112px;max-width:112px}
body[data-layout=mobile] .secondary-topbar #game-select{font-size:18px;padding:7px;gap:5px}
body[data-layout=mobile] .secondary-topbar #game-select>svg{width:12px;height:12px}
@media(max-width:350px){body[data-layout=mobile] .secondary-topbar #game-select{font-size:16px}}
body[data-layout=mobile] .secondary-topbar #game-select>img{display:none}
body[data-layout=mobile] .secondary-actions{width:auto;flex-shrink:0}
body[data-layout=mobile] .secondary-actions #match-controls{width:auto;gap:4px}
body[data-layout=mobile] .secondary-actions #play{flex:none;width:44px;min-width:44px;height:44px;padding:0}
body[data-layout=mobile] .secondary-actions #play>span,body[data-layout=mobile] #room-state{display:none}
body[data-layout=mobile] #room-code{font-size:18px;letter-spacing:0}
body[data-layout=mobile] .secondary-actions .icon-btn{width:44px;height:44px}
body[data-layout=mobile] .arcade-main .scoreboard{min-height:54px;padding:7px 14px}
body[data-layout=mobile] .arcade-main .scores{font-size:35px}
body[data-layout=mobile] .arcade-main #court-wrap{margin:0 7px}
body[data-layout=mobile] .arcade-main .game-toolbar{min-height:38px;padding-left:13px}
body[data-layout=mobile] .arcade-main .game-toolbar .icon-btn{height:36px;width:36px}
body[data-layout=mobile] #leaderboard-panel{right:max(0px,calc((100vw - 430px)/2));top:0;bottom:0;width:min(100vw,430px);max-width:none;height:100dvh;border:0;border-radius:0;box-shadow:none}
body[data-layout=mobile] #leaderboard-panel .offcanvas-header{flex-shrink:0;padding-top:max(17px,env(safe-area-inset-top))}
body[data-layout=mobile] #leaderboard-panel .offcanvas-body{min-height:0;overflow-y:auto;padding-bottom:max(18px,env(safe-area-inset-bottom))}
body[data-layout=mobile] #leaderboard-panel>.standing{margin:0;padding:14px 18px;flex-shrink:0;padding-bottom:max(14px,env(safe-area-inset-bottom))}
body[data-layout=mobile] .offcanvas-backdrop{left:max(0px,calc((100vw - 430px)/2));right:auto;width:min(100vw,430px)}
body[data-layout=mobile] #toast{max-width:min(400px,calc(100vw - 28px))}
body[data-theme=charcoal] #board button[data-symbol=O]{color:var(--coral)}
body[data-theme=charcoal] #overlay.result strong{color:var(--yellow)}
body[data-theme=charcoal] .scores span:nth-child(2){color:#7b8798}
.game-picker{min-width:0;flex:0 1 190px}
.secondary-topbar #game-select{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:7px 11px;background:#23262b;color:#e0e6eb;border:1px solid #444a53;border-radius:6px;font-size:21px}
#game-select #game-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#game-select>svg{margin-left:auto;width:14px;height:14px}
#game-select>img,.game-menu img{width:23px;height:24px;object-fit:contain;flex-shrink:0}
.game-menu{min-width:205px;padding:5px;font:21px 'VT323',monospace}
.game-menu .dropdown-item{display:flex;align-items:center;gap:12px;min-height:45px;padding:8px 11px;border-radius:4px}
@media(max-width:600px){.game-picker{flex:1;max-width:48%}.secondary-topbar #game-select{font-size:19px;padding:7px 9px;gap:7px}.secondary-topbar #game-select>img{display:none}}
body[data-theme=charcoal]{--bs-body-bg:#141518;--bs-body-color:#e4e6ea;--bs-border-color:#383d45;--bs-primary:#8ed4e6;--bs-primary-rgb:142,212,230;--bs-secondary-color:#929aa5;--green:#8ed4e6;--coral:#eea38f;--yellow:#dfc184;--edge:#383d45;background:#141518;color:#e4e6ea}
body[data-theme=charcoal] :is(.site-topbar,.secondary-topbar){background:#1b1d22;border-color:#353942}
body[data-theme=charcoal] :is(.brand,#profile,.player){color:#dbe0e6}
body[data-theme=charcoal] .rival{color:var(--coral)}
body[data-theme=charcoal] .icon-btn{color:#9ba5b3}
body[data-theme=charcoal] .icon-btn:hover{color:#edf1f7;background:#2c3038;border-color:#525a67}
body[data-theme=charcoal] #profile-toggle{background:#272c34;color:#d4dfeb;border-color:#474f5c}
body[data-theme=charcoal] #profile-toggle:hover,body[data-theme=charcoal] #profile-toggle[aria-expanded=true]{background:#343c46;border-color:#7f9cb0;color:#e5f0f7}
body[data-theme=charcoal] :is(.dropdown-menu,.auth-tabs){--bs-dropdown-bg:#22262c;--bs-dropdown-border-color:#4b5461;--bs-dropdown-link-color:#dbe2eb;--bs-dropdown-link-hover-bg:#333b45;--bs-dropdown-link-hover-color:#f0f5fa;--bs-dropdown-link-active-bg:#354956;--bs-dropdown-link-active-color:#b9e8f3;--bs-dropdown-divider-bg:#3a424c;background-color:#22262c;color:#dbe2eb;border-color:#4b5461;border-radius:6px}
body[data-theme=charcoal] .auth-tabs button{color:#a1acb9}
body[data-theme=charcoal] .auth-tabs button.selected{background:#334651;border-color:#6a8c9b;color:#c1e6f0}
body[data-theme=charcoal] :is(.game-panel,.game-toolbar,.scoreboard){background:#1b1e23}
body[data-theme=charcoal] #court-wrap{background:#101216;border-color:#3a414c}
body[data-theme=charcoal] .btn-primary{--bs-btn-color:#15252c;--bs-btn-bg:#8ed4e6;--bs-btn-border-color:#a9e3f1;--bs-btn-hover-color:#101f26;--bs-btn-hover-bg:#ace3ef;--bs-btn-hover-border-color:#c3edf5;--bs-btn-active-bg:#78bdcf;--bs-btn-active-color:#102128;--bs-btn-active-border-color:#6faebe;--bs-btn-disabled-bg:#536873;--bs-btn-disabled-border-color:#536873;--bs-btn-disabled-color:#17242b}
body[data-theme=charcoal] .play-btn{box-shadow:0 2px 0 #465461}
body[data-theme=charcoal] :is(#invite,#join,#copy,#leave){background:#292e35;border-color:#454d58}
body[data-theme=charcoal] :is(.form-control,.settings-switch .form-check-input){background-color:#161a20;color:#dce7f1;border-color:#526071}
body[data-theme=charcoal] .form-control:focus{background:#161a20;color:#e8f3fb;border-color:#8ed4e6;box-shadow:0 0 0 2px #8ed4e625}
body[data-theme=charcoal] .form-control::placeholder{color:#8995a5}
body[data-theme=charcoal] .form-check-input:checked{background-color:#5a9db4;border-color:#8ed4e6}
body[data-theme=charcoal] :is(dialog,#leaderboard-panel){background:#20242a;color:#e0e5ec;border-color:#536071}
body[data-theme=charcoal] dialog::backdrop{background:#080b10dc}
body[data-theme=charcoal] :is(.auth-note,.settings-label,#room-state,.game-toolbar,#empty,.leader-rank,.standing small){color:#9aa6b5}
body[data-theme=charcoal] :is(.settings-switch,.leader-row,.offcanvas-header){border-color:#3c4551}
body[data-theme=charcoal] #rules-content{color:#bec9d6}
body[data-theme=charcoal] #overlay{background:#10141ac4}
body[data-theme=charcoal] #overlay strong{color:#dfebf5}
body[data-theme=charcoal] #overlay small{color:#a1b2c5}
body[data-theme=charcoal] #overlay.countdown,body[data-theme=charcoal] #overlay.compact{background:transparent}
body[data-theme=charcoal] #board button{background:#222b34;border-color:#516779;color:#8ed4e6}
body[data-theme=charcoal] #board button:not(:disabled):hover{background:#344757}
body[data-theme=charcoal] #board button.winning{background:#403c2c;border-color:var(--yellow)}
body[data-theme=charcoal] .standing{background:#2a323d;border-color:#526173}
body[data-theme=charcoal] .leader-points{color:#d5e0ec}
body[data-theme=charcoal] #toast{background:#2c3b48;border-color:#7293aa;color:#e0eff8}
body[data-theme=charcoal] .retro-tooltip{--bs-tooltip-bg:#29343f;--bs-tooltip-color:#e5f0f9}
body[data-theme=charcoal] .retro-tooltip .tooltip-inner{border-color:#829db3}
body[data-theme=charcoal] :is(button,input,select,a):focus-visible{outline-color:#a1deed}
body .secondary-topbar .game-tabs{display:none}
body .secondary-topbar .game-select{display:block;width:190px;max-width:46%;min-width:0;flex:0 1 190px;height:44px;padding:4px 30px 4px 11px;font:21px 'VT323',monospace;color:#d4e5bb;background-color:#303b28;border-color:#63774b}
.retro-tooltip{--bs-tooltip-bg:#303e27;--bs-tooltip-color:#e1edcc;--bs-tooltip-opacity:1;--bs-tooltip-font-size:18px;--bs-tooltip-border-radius:6px;--bs-tooltip-padding-x:10px;--bs-tooltip-padding-y:5px;--bs-tooltip-max-width:230px;font-family:'VT323',monospace;pointer-events:none}
.retro-tooltip .tooltip-inner{border:1px solid #879e69;box-shadow:2px 2px 0 #1119;text-transform:uppercase;line-height:1.2}
:root,[data-bs-theme=dark]{--bs-border-radius:6px;--bs-border-radius-sm:4px;--bs-border-radius-lg:8px;--bs-border-radius-xl:8px;--bs-border-radius-xxl:8px}
body .btn{--bs-btn-border-radius:6px;border-radius:6px}
body .form-control,body .auth-tabs,body .profile-menu,body dialog,body #toast,body .game-panel,body #court-wrap,html body .secondary-topbar .game-select{border-radius:6px}
body .game-tabs button,body .auth-tabs button,body .profile-menu .dropdown-item,body #board button{border-radius:4px}
body #leaderboard-panel{border-radius:8px 0 0 8px}
#court-wrap{container-type:size}
.arcade-main #court-wrap:fullscreen canvas{top:0;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto}
#court-wrap #exit-fullscreen{display:none;position:absolute;top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));z-index:3;width:36px;height:36px;border:0;border-radius:6px;background:#1b1d2226;color:#d1e4f0b3;touch-action:manipulation}
#court-wrap:fullscreen #exit-fullscreen{display:inline-grid}
#court-wrap #exit-fullscreen:hover{background:#1b1d2259;color:#d1e4f0}
#court-wrap:fullscreen #exit-fullscreen{top:calc(8px + env(safe-area-inset-top))}
@supports(width:1cqh){body .arcade-main #board{width:min(80cqw,80cqh,580px);max-height:none}}
.game-select{display:none}
@media(max-width:600px){body .secondary-topbar{flex-wrap:nowrap;gap:8px;min-height:54px}body .secondary-topbar .game-tabs{display:none}body .secondary-topbar .game-select{display:block;width:130px;max-width:46%;min-width:0;flex:1;height:42px;padding:4px 26px 4px 10px;font:19px 'VT323',monospace;color:#d4e5bb;background-color:#303b28;border-color:#63774b;border-radius:1px}body .secondary-topbar .secondary-actions{width:auto;flex-shrink:0}body .secondary-actions #match-controls{width:auto;gap:4px}body .secondary-actions #play{flex:none;width:44px;min-width:44px;height:44px;padding:0}body .secondary-actions #play>span{display:none}body .secondary-actions #room-state{display:none}body .secondary-actions #room-code{font-size:18px;letter-spacing:0}body .secondary-actions .icon-btn,body .secondary-actions #match-controls>.icon-btn{width:44px;height:44px}}
body{display:flex;flex-direction:column;height:100dvh;min-height:0}
.site-topbar{position:relative;z-index:1020;display:block;width:100%;max-width:none;flex-shrink:0;padding:env(safe-area-inset-top) 0 0;margin:0;background:#22261f;border-bottom:1px solid var(--edge)}
.topbar-inner{width:100%;min-height:60px;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.topbar-inner .brand{flex-shrink:0}
.topbar-inner .tools{gap:7px}
.topbar-inner .icon-btn{width:44px;height:44px}
.topbar-inner #profile{min-height:40px;padding:8px 11px}
#profile-toggle{display:flex;align-items:center;gap:8px;min-height:42px;padding:8px 11px;color:#c7d7b3;background:#303928;border:1px solid #536143;max-width:230px}
#profile-toggle:hover,#profile-toggle[aria-expanded=true]{color:#e1eccd;background:#39462e;border-color:#849565}
#profile-name{max-width:145px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.profile-chevron{width:12px;height:12px}
.profile-menu{--bs-dropdown-bg:#293123;--bs-dropdown-border-color:#62744f;--bs-dropdown-border-radius:2px;--bs-dropdown-link-color:#d6e1c3;--bs-dropdown-link-hover-color:#eaf1d8;--bs-dropdown-link-hover-bg:#3a472e;--bs-dropdown-link-active-bg:#465839;--bs-dropdown-divider-bg:#46563a;min-width:190px;padding:5px;font:20px 'VT323',monospace;box-shadow:3px 3px 0 #1118}
.profile-menu .dropdown-item{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 11px}
.profile-menu #logout{color:var(--coral)}
.profile-menu .dropdown-divider{margin:4px 5px}
.arcade-main{display:block;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0}
.arcade-main .game-widget{display:flex;flex-direction:column;height:100%;min-height:0}
.secondary-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-shrink:0;min-height:58px;padding:6px 16px;background:#232921;border-bottom:1px solid #49553d;z-index:10}
.secondary-topbar .game-tabs{display:flex;flex-wrap:nowrap;gap:3px;padding:0;margin:0;border:0;background:transparent;min-width:0}
.secondary-topbar .game-tabs button{font-size:20px;min-height:44px;padding:6px 14px;gap:8px}
.secondary-actions{flex-shrink:0}
.secondary-actions #match-controls,.secondary-actions #room-controls{gap:6px;padding:0;min-height:44px}
.secondary-actions .icon-btn,.secondary-actions #match-controls>.icon-btn{height:44px;width:44px}
.secondary-actions #play{min-height:42px;padding:6px 15px}
.secondary-actions #room-state{font-size:16px}
.arcade-main .game-panel{display:flex;flex-direction:column;flex:1;min-height:0;border:0;box-shadow:none;background:#1c241b}
.arcade-main .scoreboard{min-height:58px;padding:9px 22px;flex-shrink:0}
.arcade-main .scores{font-size:38px}
.arcade-main #court-wrap{flex:1;min-height:0;aspect-ratio:auto;margin:0 12px;border-color:#3a4b33;background:#111b14}
.arcade-main canvas{position:absolute;inset:0;width:100%;height:100%}
.arcade-main .game-toolbar{min-height:40px;padding:0 12px 0 18px;flex-shrink:0;padding-bottom:env(safe-area-inset-bottom)}
.arcade-main .game-toolbar .icon-btn{height:38px;width:38px}
.arcade-main #board{left:50%;top:50%;transform:translate(-50%,-50%);width:min(78%,65dvh,580px);max-height:88%;aspect-ratio:1}
#leaderboard-panel{--bs-offcanvas-width:330px;width:330px;max-width:calc(100vw - 16px);padding:0;background:#252d23;border:0;border-left:1px solid #697c53;box-shadow:-4px 0 0 #1115}
#leaderboard-panel .offcanvas-header{gap:12px;border-bottom:1px solid var(--edge);padding:17px 18px}
#leaderboard-title{font:26px 'VT323',monospace;margin:0}
#leaderboard-panel .offcanvas-body{padding:0 18px 18px;overscroll-behavior:contain}
#leaderboard-panel .standing{margin:18px -18px -18px;padding:14px 18px}
#leaderboard-panel .icon-btn{width:44px;height:44px}
.settings-label{display:block;font-size:17px;color:#a6ba8e;margin-bottom:7px}
.settings-switch{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:48px;padding:12px 0;margin:13px 0;border-top:1px solid var(--edge);border-bottom:1px solid var(--edge);cursor:pointer}
.settings-switch .form-check-input{float:none;margin:0;width:38px;height:20px;border-color:#819568;box-shadow:none;cursor:pointer}
.settings-switch .form-check-input:checked{background-color:#899f65;border-color:#a8c17d}
#settings-error{color:var(--coral);font-size:17px;margin:0 0 12px}
#settings-error:empty{display:none}
#settings-form>.play-btn{width:100%}
dialog{max-height:calc(100dvh - 28px);overflow:auto}
@media(max-width:600px){.topbar-inner{min-height:56px;padding:0 12px;gap:10px}.topbar-inner .brand{font-size:28px;gap:6px}.topbar-inner #connection{display:none}.topbar-inner .tools{gap:4px}.topbar-inner #profile{font-size:19px;padding:8px 9px}#profile-toggle{width:44px;height:44px;justify-content:center;padding:0}#profile-name,.profile-chevron{display:none}.secondary-topbar{flex-wrap:wrap;gap:4px 8px;padding:5px 10px}.secondary-topbar .game-tabs{flex:1}.secondary-topbar .game-tabs button{flex:1;font-size:18px;padding:5px 7px;gap:6px}.secondary-topbar .game-tabs img{width:20px;height:22px}.secondary-actions{width:100%;display:flex;justify-content:flex-end}.secondary-actions #match-controls{width:100%}.secondary-actions #play{flex:1;min-height:40px}.secondary-actions #room-controls{width:100%}.secondary-actions #room-state{margin-right:auto}.secondary-actions .icon-btn,.secondary-actions #match-controls>.icon-btn{width:44px;height:40px}.arcade-main .scoreboard{min-height:54px;padding:7px 14px}.arcade-main .scores{font-size:35px}.arcade-main #court-wrap{margin:0 7px}.arcade-main .game-toolbar{min-height:38px;padding-left:13px}.arcade-main .game-toolbar .icon-btn{height:36px;width:36px}.arcade-main #board{width:min(82%,52dvh)}}
@media(max-height:500px) and (orientation:landscape){.topbar-inner{min-height:46px}.secondary-topbar{min-height:46px;padding:2px 12px;flex-wrap:nowrap}.secondary-topbar .game-tabs button{min-height:38px}.secondary-actions{width:auto}.secondary-actions .icon-btn,.secondary-actions #match-controls>.icon-btn{height:38px;width:38px}.arcade-main .scoreboard{min-height:43px;padding:4px 16px}.arcade-main .scores{font-size:30px}.arcade-main .game-toolbar{min-height:30px}.arcade-main .game-toolbar .icon-btn{height:28px;width:30px}.arcade-main #board{width:min(62dvh,280px)}}
body .topbar-inner .icon-btn,body .topbar-inner #profile-toggle,body .secondary-actions #room-controls>.icon-btn{width:32px;height:32px;min-height:32px;padding:0}
body[data-layout=mobile] .topbar-inner #profile{min-height:32px;padding:6px 8px}
.secondary-topbar .room-game-name{flex:1;min-width:0;font-size:21px;line-height:1.2;color:#e0e6eb;white-space:nowrap}