/* Archive shares My games; keep its rows compact on phones and desktop. */
#mobile-game-select .archive-menu-row{border-top:1px solid var(--line);margin-top:6px;padding-top:6px}
#mobile-game-select .archive-menu-row .game-picker-select{display:flex;align-items:center;justify-content:flex-start;min-height:54px;width:100%;padding:10px 12px;text-align:left;gap:10px}
#mobile-game-select .archive-menu-row .game-picker-select::before{display:none}
#mobile-game-select .archive-menu-row .game-label{display:grid;gap:3px;text-align:left}
#mobile-game-select .archive-menu-row .game-title{font-size:14px}
#mobile-game-select .archive-menu-row .game-detail{font-size:12px;color:var(--muted)}
#beta-hub .archive-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 16px}
#beta-hub .archive-heading h3{font-size:18px;margin:0 0 6px}
#beta-hub .archive-heading p{font-size:13px;line-height:1.5;color:var(--muted);margin:0;max-width:32ch}
#beta-hub .archive-pin-current{flex:none;font-size:13px;padding:9px 12px;min-height:42px;white-space:normal;max-width:130px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink)}
#beta-hub .archive-tabs{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--line);padding-bottom:10px}
#beta-hub .archive-tabs button{font-size:14px;min-height:40px;padding:8px 14px;border:1px solid transparent;border-radius:8px;background:transparent}
#beta-hub .archive-tabs button[aria-pressed=true]{background:color-mix(in srgb,var(--ink) 8%,var(--panel));border-color:var(--line)}
#archive-count{margin-left:auto;color:var(--muted);font-size:12px;white-space:nowrap}
#beta-hub .archive-game-row{display:grid;grid-template-columns:minmax(0,1fr) 44px;align-items:center;border-bottom:1px solid var(--line);gap:5px}
#beta-hub .archive-game-open{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:5px;padding:13px 0;border:0;border-radius:0;background:none;min-width:0;min-height:62px;white-space:normal}
#beta-hub .archive-game-open strong{font-size:14px;overflow-wrap:anywhere}
#beta-hub .archive-game-meta{font-size:12px;line-height:1.5;color:var(--muted)}
#beta-hub .archive-pin{width:44px;height:44px;min-height:44px;display:grid;place-items:center;border:0;background:none;color:var(--muted);padding:11px}
#beta-hub .archive-pin svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6}
#beta-hub .archive-pin[aria-pressed=true]{color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);border-radius:8px}
#beta-hub .archive-empty{font-size:14px;line-height:1.5;color:var(--muted);margin:18px 0 24px}
#beta-hub :is(.archive-section,.championship-year,.archive-file-options){display:block;width:100%;padding:0;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none;min-width:0}
#beta-hub :is(.archive-section,.archive-file-options){border-top:1px solid var(--line);margin-top:20px;padding-top:8px}
#beta-hub :is(.archive-section,.championship-year,.archive-file-options)>summary{display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:48px;padding:10px 0;list-style:none;text-align:left;font-size:14px;font-weight:500;border:0;border-radius:0;background:none;box-shadow:none;white-space:normal}
#beta-hub :is(.archive-section,.championship-year,.archive-file-options)>summary::before{content:'›';display:block;flex:none;width:10px;font-size:20px;color:var(--muted);transform:none}
#beta-hub :is(.archive-section,.championship-year,.archive-file-options)[open]>summary::before{transform:rotate(90deg)}
#beta-hub :is(.archive-section,.championship-year,.archive-file-options)>summary::after{display:none}
#beta-hub :is(.archive-section,.championship-year,.archive-file-options)>summary::-webkit-details-marker{display:none}
#beta-hub .archive-section>summary{flex-wrap:wrap;column-gap:10px;row-gap:0}
#beta-hub .archive-section>summary strong{font-size:16px}
#beta-hub .archive-section>summary>span{font-size:12px;color:var(--muted);margin-left:auto;font-weight:400}
#beta-hub .championship-year{border-top:1px solid var(--line)}
#beta-hub .championship-year>summary>span{font-size:13px;font-weight:400;color:var(--muted);min-width:0;overflow-wrap:anywhere}
#beta-hub .championship-game{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:5px;min-height:56px;width:100%;padding:10px 12px;margin:4px 0;background:var(--panel);border:1px solid var(--line);border-radius:8px;white-space:normal}
#beta-hub .championship-game strong{font-size:14px;overflow-wrap:anywhere}#beta-hub .championship-game span{font-size:12px;line-height:1.5;color:var(--muted)}
#beta-hub .archive-file-options>div{display:flex;flex-wrap:wrap;gap:8px;padding:8px 0}
#beta-hub .archive-file-options button{min-height:40px;font-size:13px;padding:8px 12px;white-space:normal}
.archive-section [role=status]:empty{display:none}
body.compact-controls .footer-main>.replay-clocks{display:grid;grid-template-columns:minmax(0,1fr) minmax(44px,76px) minmax(0,1fr);align-items:center;gap:4px;flex:1;min-width:0;width:100%;padding:5px 0;box-sizing:border-box}
.replay-clock{display:grid;grid-template-rows:auto 16px;gap:2px;min-width:0;text-align:center;font-variant-numeric:tabular-nums;padding:4px 3px;border-radius:6px;color:var(--ink);grid-row:1}
.replay-clock.w{grid-column:1}.replay-clock.b{grid-column:3}
.replay-clock-line{display:flex;align-items:center;justify-content:center;gap:6px;min-width:0}
.replay-clock-line .clock-disc{display:block;box-sizing:border-box;width:11px;height:11px;flex:0 0 11px;border:1px solid #888;border-radius:50%;background:#faf8ee}
.replay-clock-line .clock-disc.b{background:#222;border-color:#aaa}
.replay-clock-value{font-size:17px;line-height:22px;white-space:nowrap}.replay-clock-delta{font-size:12px;line-height:16px;color:var(--muted);white-space:nowrap}.clock-increment{color:#288552}
.replay-clock.ticking{background:color-mix(in srgb,var(--accent) 12%,transparent);box-shadow:inset 0 -2px var(--accent)}
.replay-clock-label{grid-column:2;grid-row:1;font-size:11px;color:var(--muted);line-height:1.3;text-align:center;overflow-wrap:anywhere}
body.compact-controls[data-screen=desktop].has-replay-clock>.playground>.board-footer>.footer-main{display:flex!important;order:2;width:100%;border-top:1px solid var(--line);margin-top:4px}
body.compact-controls[data-screen=mobile][data-landscape=true].has-replay-clock[data-playback=true]{--landscape-footer:130px}
body.compact-controls[data-screen=mobile].has-replay-clock .footer-main{min-height:48px}
@media(max-width:460px){#beta-hub .archive-heading{align-items:flex-start}#beta-hub .archive-heading p{max-width:26ch}#beta-hub .archive-section>summary>span{width:100%;margin:3px 0 0 20px}}
/* User-positioned controls retain one DOM instance and the same keyboard actions. */
.workspace-menu .layout-choice{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;font-size:13px;min-height:44px}
.workspace-menu .layout-choice select{font:inherit;max-width:126px;min-height:36px;padding:6px;border:1px solid var(--line);border-radius:6px;background:var(--panel);color:var(--ink)}
/* Movable controls retain their normal geometry; editing affordances sit on the rim. */
html body.compact-controls[data-screen]>.playground>.board-footer.custom-toolbar-position{position:fixed;inset:auto;width:min(var(--drawer-width,360px),calc(100vw - 32px));max-width:calc(100vw - 32px);height:auto;min-height:0;margin:0;padding:4px;display:flex;flex-direction:column;align-items:stretch;gap:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);z-index:135;overflow:visible;box-shadow:0 3px 12px #0002}
html body.compact-controls[data-screen] .custom-toolbar-position .footer-actions{display:grid;grid-template-columns:44px minmax(0,1fr);grid-auto-flow:row;gap:4px 2px;width:100%}
html body.compact-controls[data-screen] .custom-toolbar-position .footer-actions>#mobile-game-select{grid-column:1;grid-row:1;width:44px;min-width:44px}
html body.compact-controls[data-screen] .custom-toolbar-position #mobile-game-select>summary{width:44px;height:44px;min-height:44px;margin:0}
html body.compact-controls[data-screen] .custom-toolbar-position .footer-panels{display:grid;grid-column:2;grid-row:1;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;width:100%;min-width:0}
html body.compact-controls[data-screen] .custom-toolbar-position .footer-transport{display:block;grid-column:1/-1;grid-row:2;min-width:0;width:100%}
html body.compact-controls[data-screen] .custom-toolbar-position .footer-transport .history-buttons{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px;width:100%}
html body.compact-controls[data-screen][data-playback=false] .custom-toolbar-position .footer-transport{display:none}
html body.compact-controls[data-screen] .custom-toolbar-position .footer-main{order:2;width:100%}
html body.compact-controls[data-screen].has-replay-clock .custom-toolbar-position .footer-main{display:flex!important;border-top:1px solid var(--line);margin-top:4px}
html body.compact-controls[data-screen] .custom-toolbar-position .footer-actions :is(button,#pause,#replay-recent,#room-toggle,#board-chat-toggle):not(.game-picker-list *){width:100%;min-width:0;max-width:none;height:44px;min-height:44px;flex:none;margin:0;padding:5px 2px}
.toolbar-position-handle{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);display:flex;align-items:center;width:64px;height:28px;padding:0 2px;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-sizing:border-box;z-index:1}
html body .toolbar-position-handle .toolbar-grip,html body .control-position-lock{display:grid;place-items:center;box-sizing:border-box;flex:none;width:28px;min-width:28px;max-width:28px;height:28px;min-height:28px;margin:0;padding:6px;border:0;border-radius:50%;background:transparent;color:var(--muted);line-height:1;touch-action:manipulation}
html body .toolbar-position-handle .toolbar-grip{width:32px;min-width:32px;max-width:32px;padding:7px;cursor:grab;touch-action:none}
.toolbar-grip>span{display:block;width:18px;height:3px;border-radius:3px;background:currentColor;opacity:.75}
.toolbar-grip:active{cursor:grabbing}
html body .control-position-lock svg{display:block;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
html body .control-position-lock:hover,html body .toolbar-grip:hover{color:var(--ink)}
.toolbar-position-handle[hidden],.control-position-lock[hidden]{display:none!important}
body[data-screen] .board-section>.camera-launcher.custom-camera-position{position:fixed;z-index:140}
body[data-screen] .camera-launcher.position-unlocked #camera-joystick{cursor:crosshair}
body[data-screen] .camera-launcher.position-unlocked .camera-hint{display:none}
html body .camera-launcher>.camera-position-lock{position:absolute;right:-8px;bottom:-8px;z-index:2000;background:var(--panel);border:1px solid var(--line);box-shadow:0 1px 4px #0002}
html body .camera-launcher>.camera-position-grip{position:absolute;left:-8px;top:-12px;z-index:2000;display:grid;place-items:center;width:28px;min-width:28px;height:28px;min-height:28px;padding:5px;border:1px solid var(--line);border-radius:50%;background:var(--panel);color:var(--muted);cursor:grab;touch-action:none}
html body .camera-position-grip svg{display:block;width:18px;height:18px}
html body .camera-position-grip[hidden]{display:none!important}
html body .camera-position-grip:active{cursor:grabbing}
body.compact-controls.has-replay-clock .footer-main{display:flex}
.workspace-menu .layout-position-lock{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Game controls are touch surfaces, not selectable document text. */
:where(button,summary,.board-footer,.board-toolbar,.camera-launcher,.workspace-bar,#banks){-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
:where(input,textarea,[contenteditable=true]){-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}

/* Playback keeps transport separate from tools on portrait phones too. */
html body.compact-controls[data-screen=mobile][data-landscape=false][data-playback=true] .footer-actions{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-flow:row;gap:4px}
html body.compact-controls[data-screen=mobile][data-landscape=false][data-playback=true] :is(.footer-transport,.footer-panels){display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-flow:column;grid-column:1;gap:3px;width:100%;margin:0}
html body.compact-controls[data-screen=mobile][data-landscape=false][data-playback=true] .footer-panels{grid-row:1}
html body.compact-controls[data-screen=mobile][data-landscape=false][data-playback=true] .footer-transport{grid-row:2}
/* Fit both banks in the remaining grid track, including eight-stack openings. */
html body.compact-controls[data-screen=mobile][data-landscape=true]>.playground>#banks.reserve-dock:not(.empty-players){align-self:stretch;min-height:0;display:flex;flex-direction:column;overflow:hidden}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks.reserve-dock:not(.empty-players)>.bank-side{flex:1 1 0;min-height:0;max-height:none}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks.reserve-dock .tray{flex:1 1 0;min-height:0;overflow:hidden}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks.reserve-dock .tray>svg{height:100%;max-height:100%;width:100%;aspect-ratio:auto}
/* Recorded players remain identifiable even when no clocks were imported. */
html body.compact-controls[data-screen=mobile][data-landscape=false][data-recorded-players=true] #banks>.bank-side{display:flex;flex-direction:column;align-items:stretch}
html body.compact-controls[data-screen=mobile][data-landscape=false][data-recorded-players=true] #banks .player-card{height:24px;min-height:24px;padding:0 8px;flex:none}
html body.compact-controls[data-screen=mobile][data-landscape=false][data-recorded-players=true] #banks .reserve-controller{font-size:13px;line-height:24px;min-height:24px;height:24px;width:auto;flex:1;text-align:left;display:block}
html body.compact-controls[data-screen=mobile][data-recorded-players=true] #banks .reserve-controller:after{display:none}
html body.compact-controls[data-screen=mobile][data-recorded-players=true] #banks .side-disc{display:block}
/* Keep a quiet turn marker instead of flashing an entire tray during replay. */
html body[data-recorded-players=true] #banks .bank-side{box-shadow:none;transition:none;border-color:var(--line)}
html body[data-recorded-players=true] #banks .player-card{transition:none}
.replay-clock.ticking{background:none;box-shadow:none}
html body[data-recorded-players=true] #banks .player-card.active{box-shadow:inset 3px 0 var(--selected)}
html body.compact-controls[data-screen=mobile][data-landscape=false][data-playback=true] .footer-panels{grid-template-columns:none;grid-auto-columns:minmax(0,1fr)}
/* Names align with their own clock; spent reserves need no empty cards. */
.replay-clock{grid-template-rows:auto auto 16px}
.replay-clock-player{display:block;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;line-height:18px;font-weight:500}
html body.has-replay-clock #banks.reserve-dock.empty-players{display:none!important}
html body.compact-controls[data-screen] #banks.empty-players>.bank-side.empty-reserve{aspect-ratio:auto;min-height:28px;height:28px;max-height:28px;border:0;border-radius:0;background:none;box-shadow:none}
html body.compact-controls[data-screen] #banks.empty-players .player-card{min-height:28px;height:28px;padding:0 6px;flex-direction:row;gap:5px;background:none;color:var(--ink);box-shadow:none}
html body.compact-controls[data-screen] #banks.empty-players .reserve-controller{min-height:28px;height:28px;line-height:28px;padding:0;display:block;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;font-size:13px;text-align:left}
html body.compact-controls[data-screen] #banks.empty-players .reserve-controller:after,html body.compact-controls[data-screen] #banks.empty-players .player-status{display:none}
html body.compact-controls[data-screen] #banks.empty-players .side-disc{display:block}
html body.compact-controls[data-screen] #banks.reserve-dock[hidden]{display:none!important}
html body.compact-controls[data-screen=mobile] #reserve-dock-toggle[hidden]{display:none!important}