/* Desktop shares the Games picker and makes the full tab bar optional. */
body.compact-controls[data-screen=desktop]>.playground>.board-section{grid-row:1/3}
body[data-screen=desktop]:not([data-desktop-game-tabs=true])>.workspace-bar{display:none}
body.compact-controls[data-screen=desktop] .footer-panels{position:static}
body.compact-controls[data-screen=desktop] #mobile-game-select{display:block;position:static;width:44px;min-width:44px;margin:0;border:0;background:none}
body.compact-controls[data-screen=desktop] #mobile-game-select>summary{box-sizing:border-box;display:grid;place-items:center;width:44px;height:44px;min-height:44px;padding:9px;list-style:none;cursor:pointer;border:1px solid color-mix(in srgb,var(--ink) 44%,var(--line));border-radius:9px 9px 12px 12px;color:var(--ink);background:linear-gradient(145deg,color-mix(in srgb,var(--ink) 16%,var(--panel)),var(--panel));box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--ink) 9%,transparent),0 2px 5px #0003}
body.compact-controls[data-screen=desktop] #mobile-game-select>summary::-webkit-details-marker{display:none}
/* The whole Games button signals a waiting move; its icon needs one grid cell. */
body.compact-controls[data-screen=desktop] #mobile-game-select>summary[data-turn]:before{display:none}
body.compact-controls[data-screen=desktop] #mobile-game-select>summary{gap:0}
body.compact-controls[data-screen=desktop] #mobile-game-select :is(.game-selector-title,.game-selector-arrow,.game-switch-label){display:none}
body.compact-controls[data-screen=desktop] #mobile-game-select .game-switch-icon{display:flex}
body.compact-controls[data-screen=desktop] #mobile-game-select>summary svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body.compact-controls[data-screen=desktop] #mobile-game-select .game-picker-list{position:absolute;left:-1px;right:-1px;top:calc(100% - 1px);width:auto;max-height:min(60dvh,520px);box-sizing:border-box;margin:0;padding:6px;border-radius:0 0 12px 12px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;z-index:2000}
body.compact-controls[data-screen=desktop]>.playground>.board-footer:has(#mobile-game-select[open]){border-radius:12px 12px 0 0}
body.compact-controls[data-screen=desktop] #mobile-game-select .game-picker-row :is(.game-picker-select,.game-picker-close,.game-picker-pin){height:auto;min-height:48px;border:0;border-radius:8px}
body.compact-controls[data-screen=desktop] #mobile-game-select .game-picker-row .game-picker-select{display:flex;width:auto;max-width:none;flex:1;justify-content:flex-start;padding:8px;gap:8px}
body.compact-controls[data-screen=desktop] #mobile-game-select .game-label{align-items:stretch;text-align:left}
body.compact-controls[data-screen=desktop] #mobile-game-select .game-picker-row :is(.game-picker-close,.game-picker-pin){flex:0 0 32px;width:32px;padding:4px;color:var(--muted)}
html body.compact-controls[data-screen=desktop] #mobile-game-select.needs-move>summary{border-color:var(--accent);background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 32%,var(--panel)),color-mix(in srgb,var(--accent) 12%,var(--panel)));box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 65%,transparent),0 0 10px color-mix(in srgb,var(--accent) 40%,transparent)}
body.compact-controls[data-screen=desktop] #mobile-game-select.needs-move:not([open]) .game-switch-icon{animation:games-turn-glow 2.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){body.compact-controls[data-screen=desktop] #mobile-game-select.needs-move .game-switch-icon{animation:none}}

/* Board actions always occupy the last position on the right. */
body.compact-controls[data-screen=desktop] .board-tools>.workspace-menu{flex:0 0 44px;width:44px;min-width:44px;height:44px;margin:0;padding:0;border:0;background:transparent}
body.compact-controls[data-screen=desktop] .board-tools>.workspace-menu>summary{box-sizing:border-box;display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:8px;border-radius:8px;background:var(--panel);color:var(--muted)}
body.compact-controls[data-screen=desktop] .board-tools>.workspace-menu>summary svg{width:23px;height:23px}
body.compact-controls[data-screen=desktop] .workspace-menu-items{width:268px;max-height:calc(100dvh - var(--board-menu-top,100px) - 12px)}
body.compact-controls[data-screen=desktop] #mobile-close-game{display:block}
.workspace-menu-items .game-menu-group:has(>button):not(:has(>button:not([hidden]))){display:none}
.workspace-menu-items button[hidden]{display:none!important}
.workspace-menu-items #desktop-game-tabs-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px}
.menu-switch{display:block;position:relative;flex:none;width:30px;height:18px;border-radius:10px;background:var(--line);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ink) 15%,transparent)}
.menu-switch:after{content:'';position:absolute;top:3px;left:3px;width:12px;height:12px;border-radius:50%;background:var(--muted)}
[aria-pressed=true]>.menu-switch{background:var(--accent)}
[aria-pressed=true]>.menu-switch:after{left:15px;background:var(--panel)}
body.compact-controls[data-screen=desktop] #connection-state{font-size:12px;max-width:140px;white-space:normal}

/* Pack the surviving types without changing the four-column piece scale. */
body.compact-controls[data-screen=desktop][data-reserves=left] #banks.reserve-dock .single-row-reserve .tray>svg{aspect-ratio:358/108;max-height:108px}
body.compact-controls[data-screen=mobile]:not([data-landscape=true]) #banks .single-row-reserve .tray>svg{height:clamp(72px,24vw,108px)}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks>.bank-side.single-row-reserve:not(.empty-reserve){flex:0 1 auto;height:clamp(64px,calc((var(--landscape-rail) - 56px)*.346),108px);max-height:108px}

/* Online reserve photos keep the player button's existing profile action. */
body #banks .reserve-controller[data-player-avatar=true]{display:flex;align-items:center;gap:7px;cursor:pointer;opacity:1}
body #banks .reserve-controller[data-player-avatar=true]:after{content:'';display:block;order:-1;flex:none;width:25px;height:28px;border:0;border-radius:0;box-shadow:none;background-color:var(--panel);background-image:var(--reserve-avatar);background-position:center;background-size:cover;background-repeat:no-repeat;mask:none;-webkit-mask:none;clip-path:polygon(50% 0,96% 25%,96% 75%,50% 100%,4% 75%,4% 25%)}
body #banks .player-card:has([data-player-avatar=true])>.side-disc{display:none}
body.compact-controls[data-screen=desktop] #banks .player-card:has([data-player-avatar=true]),body.compact-controls[data-screen=desktop] #banks .reserve-controller[data-player-avatar=true]{min-height:34px;height:34px}
body[data-screen=mobile] #banks .reserve-controller[data-player-avatar=true]{width:100%;min-width:0;min-height:36px;justify-content:center}
body[data-screen=mobile] #banks .empty-reserve .reserve-controller[data-player-avatar=true]{justify-content:flex-start;font-size:12px}
body[data-screen=mobile] #banks .empty-reserve .reserve-controller[data-player-avatar=true]:after{width:19px;height:22px}

/* A larger desktop camera pad keeps the same direct orbit, tilt and fit gestures. */
body[data-screen=desktop] .board-section>.camera-launcher{width:72px;height:72px;right:14px;bottom:14px}
body[data-screen=desktop] .camera-launcher .camera-pad{width:72px;height:72px}
body[data-screen=desktop] .camera-launcher #camera-joystick{width:72px;height:72px;min-height:72px;padding:4px}

/* Sparse portrait reserves share one row, retaining both player controls. */
body.compact-controls[data-screen=mobile]:not([data-landscape=true]) #banks.reserve-dock.paired-reserves{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:6px}
body.compact-controls[data-screen=mobile]:not([data-landscape=true]) #banks.paired-reserves>.bank-side{min-height:60px;align-items:stretch}
body.compact-controls[data-screen=mobile]:not([data-landscape=true]) #banks.paired-reserves .tray>svg{height:60px}
body.compact-controls[data-screen=mobile]:not([data-landscape=true]) #banks.paired-reserves .empty-reserve .player-card{justify-content:center;padding:4px;overflow:hidden}
body.compact-controls[data-screen=mobile]:not([data-landscape=true]) #banks.paired-reserves .empty-reserve .reserve-controller{width:100%;min-width:0;justify-content:center}
body.compact-controls[data-screen=mobile]:not([data-landscape=true])[data-reserve-sizing=yours] #banks .single-row-reserve .tray>svg{height:clamp(72px,24vw,108px)}

/* Profile actions retain familiar symbols and full accessible names. */
.player-profile-dialog .opponent-profile-actions{display:grid;grid-template-columns:repeat(4,minmax(44px,1fr));gap:8px}
.player-profile-dialog .profile-icon-action{display:grid;place-items:center;min-height:48px;padding:10px;color:var(--ink)}
.profile-icon-action svg,#beta-hub .table-join svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.profile-icon-action[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 15%,var(--panel));border-color:var(--accent)}
.profile-icon-action:focus-visible,:is(#beta-hub,#online-dialog) :is(.table-host-mark,.table-details-toggle,.table-join):focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* Table cards show the host and a compact, readable set of game symbols. */
#beta-hub .table-host-mark{width:40px;height:46px;min-width:40px;min-height:46px;padding:0;border:0;border-radius:0;overflow:hidden}
#beta-hub .table-host-mark :is(img,svg){display:block;width:100%;height:100%;object-fit:cover}
#beta-hub .community-table-card>div{flex:1;min-width:0}
:is(#beta-hub,#online-dialog) .community-table-card .table-details{display:block;margin-top:2px}
:is(#beta-hub,#online-dialog) .table-details-toggle{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;width:100%;min-height:36px;padding:4px 0;border:0;background:none;text-align:left;color:var(--muted)}
:is(#beta-hub,#online-dialog) .table-detail-icon{display:inline-flex;align-items:center;gap:3px;min-height:24px;font-size:14px;white-space:nowrap}
:is(#beta-hub,#online-dialog) .table-detail-icon+.table-detail-icon{padding-left:8px;border-left:1px solid var(--line)}
:is(#beta-hub,#online-dialog) .table-detail-icon svg{width:19px;height:19px;display:block;flex:none}
:is(#beta-hub,#online-dialog) .table-detail-icon .table-expansion{display:flex}
#beta-hub .table-expansion[data-bug=P]{color:#409a93}#beta-hub .table-expansion[data-bug=L]{color:#d55c7c}#beta-hub .table-expansion[data-bug=M]{color:var(--muted)}
:is(#beta-hub,#online-dialog) .table-infinity{font-size:25px;line-height:24px;font-weight:400}
:is(#beta-hub,#online-dialog) .table-details-description{display:block;margin:4px 0;font-size:13px;line-height:1.45;color:var(--muted)}
:is(#beta-hub,#online-dialog) .table-details-description[hidden]{display:none}
#beta-hub .table-join{display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;padding:9px;border-radius:10px}

.manual-update-check{margin-top:20px;padding-top:14px;border-top:1px solid var(--line)}
.manual-update-check>button{display:flex;align-items:center;gap:10px;min-height:44px;padding:8px 12px;border:1px solid var(--line);border-radius:9px;font-size:14px}
.manual-update-check>button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.manual-update-check>p{font-size:14px;line-height:1.5;color:var(--muted);margin:10px 0}
.manual-update-check [hidden]{display:none}

/* Reserve frames follow the surviving rows instead of stretching into empty space. */
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks>.bank-side:not(.empty-reserve){flex:0 1 auto;min-height:0;height:clamp(112px,calc((var(--landscape-rail) - 56px)*.526),184px);max-height:184px}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks>.bank-side[data-reserve-rows="1"]:not(.empty-reserve){height:clamp(64px,calc((var(--landscape-rail) - 56px)*.346),108px);max-height:108px}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks>.bank-side:has(#black-reserve):not(.empty-reserve) .player-card{padding-top:0}
body.compact-controls[data-screen=mobile]:not([data-landscape=true]) #banks.paired-reserves>.bank-side{min-height:76px}
body.compact-controls[data-screen=mobile]:not([data-landscape=true]) #banks.paired-reserves .tray>svg{height:76px}
body.compact-controls[data-screen=mobile]:not([data-landscape=true]) #banks.paired-reserves:has([data-reserve-count="4"]) .tray>svg{height:92px}
/* Chat occupies exactly the Battle panel's landscape cell while reading. */
html body.compact-controls[data-screen=mobile][data-landscape=true]>.playground .panel-rail-left #board-chat-dialog.game-window[open]{height:100%!important;flex:1 1 100%;min-height:0;overflow:hidden}
html body.compact-controls[data-screen=mobile][data-landscape=true] .panel-rail-left #board-chat-dialog .room-chat{flex:1 1 0;min-height:0;overflow:hidden}
html body.compact-controls[data-screen=mobile][data-landscape=true] .panel-rail-left #board-chat-dialog #chat-messages{min-height:0;overflow:auto;overscroll-behavior:contain;font-size:14px}
html body.compact-controls[data-screen=mobile][data-landscape=true] .panel-rail-left #board-chat-dialog .chat-message{font-size:14px}

/* Same compact update action as mobile, directly on the desktop board. */
.desktop-update-dock{display:none}
body.compact-controls[data-screen=desktop] .desktop-update-dock:has(#app-update:not([hidden])){display:flex;position:absolute;top:10px;left:12px;align-items:center;z-index:150}

/* Portrait player badges share one centred avatar row, with the You label below. */
body[data-screen=mobile]:not([data-landscape=true]):not([data-reserve-sizing=compact]) #banks .bank-side:not(.empty-reserve) .reserve-controller[data-player-avatar=true]{position:relative;align-self:stretch;height:100%;min-height:52px;flex-direction:column;justify-content:center;gap:0;padding:0 0 12px}
body[data-screen=mobile]:not([data-landscape=true]):not([data-reserve-sizing=compact]) #banks .bank-side:not(.empty-reserve) .reserve-controller[data-player-avatar=true][data-you=true]:before{position:absolute;bottom:3px;left:0;right:0;text-align:center;margin:0;line-height:12px}
@layer screens {
 .game-manager{box-sizing:border-box;width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:18px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-surface);color:var(--ui-ink);overflow:hidden}
 .game-manager[open]{display:flex;flex-direction:column;gap:12px}
 .game-manager-heading,.game-manager-tools,.game-manager-footer{display:flex;align-items:center;gap:8px;flex:none}
 .game-manager-heading h2{margin:0;flex:1;font-size:22px}.game-manager-heading button{min-width:44px;min-height:44px}
 .game-manager-tools{flex-wrap:wrap}.game-manager-tools select{flex:1;min-width:150px}.game-manager-tools :is(button,select),.game-manager-footer button{min-height:44px;font-size:14px}
 .game-manager-list{min-height:0;overflow:auto;overscroll-behavior:contain;display:flex;flex-direction:column;gap:6px;flex:1}
 .game-manager-row{display:flex;align-items:center;gap:12px;padding:10px;border:1px solid var(--ui-line);border-radius:10px;min-height:48px;flex:none;cursor:pointer}
 .game-manager-row input{width:22px;height:22px;flex:none;accent-color:var(--ui-primary)}.game-manager-row span{display:flex;flex-direction:column;min-width:0;gap:4px}.game-manager-row strong{font-size:16px;overflow-wrap:anywhere}.game-manager-row small{font-size:14px;color:var(--ui-muted);overflow-wrap:anywhere}
 .game-manager-count{margin:0;flex:1;font-size:14px}.game-manager-status{margin:0;font-size:14px;overflow-wrap:anywhere}.game-manager-status:empty{display:none}.game-manager-footer{padding-top:8px;border-top:1px solid var(--ui-line)}
}