/* One owner for the game shell, drawers, transport, and responsive layouts. */
:root{--radius:12px;--control:42px;--gap:8px;--shadow:0 12px 36px #0003;--font:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
body{margin:0;height:100dvh;display:flex;flex-direction:column;overflow:hidden;font:15px/1.45 var(--font);color:var(--ink);background:var(--bg);--left-drawer:0px;--right-drawer:0px;--drawer-width:clamp(270px,23vw,330px)}
button,input,select,textarea{font:inherit}button,select{color:inherit}button{min-height:36px;border-radius:8px}button:disabled{cursor:default;opacity:.4}button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
[hidden]{display:none!important}
body>header{display:flex;align-items:center;gap:10px;flex:none;min-height:56px;padding:6px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:4px;text-decoration:none;color:var(--ink);letter-spacing:.05em;font-size:18px;white-space:nowrap}.brand>span{font-size:25px;color:var(--accent);margin-right:4px}.brand b{font-weight:400;color:var(--accent)}
.header-tools{display:flex;align-items:center;gap:4px;margin-left:auto}.header-tools>button{width:42px;min-height:42px;font-size:23px}
#online-button{min-height:42px;font-size:14px}header .game-settings{display:none}
.theme-switch{display:flex;align-items:center;gap:5px;cursor:pointer}.theme-switch>span:not(.switch-track){font-size:13px}.theme-switch input{position:absolute;width:1px;height:1px;opacity:0}.switch-track{width:36px;height:22px;border-radius:12px;background:var(--line);padding:3px}.switch-track:after{content:'';display:block;width:16px;height:16px;background:white;border-radius:50%;transition:transform .15s}.theme-switch input:checked+.switch-track{background:var(--accent)}.theme-switch input:checked+.switch-track:after{transform:translateX(14px)}.theme-switch:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.workspace-bar{display:flex;align-items:center;gap:6px;min-height:48px;padding:4px 12px;flex:none;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--panel) 90%,var(--bg))}
#game-tabs{display:flex;align-items:center;gap:4px;min-width:0;overflow:auto;scrollbar-width:none}.game-tab{display:flex;align-items:center;border:1px solid transparent;border-radius:9px;flex:none}.game-tab.active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}.game-tab>[role=tab]{font-size:14px;padding:5px 10px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.close-tab{padding:0 7px;font-size:18px}.game-tab input{width:180px;max-width:40vw;min-height:36px;background:var(--panel);color:var(--ink);border:1px solid var(--accent)}#add-tab{font-size:22px;flex:none;width:40px}#workspace-status{font-size:12px}
.workspace-menu{margin-left:auto;position:relative;flex:none}.workspace-menu>summary{list-style:none;cursor:pointer;border:1px solid var(--line);border-radius:8px;padding:8px 12px;font-size:14px}.workspace-menu-items{position:absolute;right:0;top:calc(100% + 6px);min-width:210px;max-height:70dvh;overflow:auto;display:grid;padding:6px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);z-index:1300}.workspace-menu-items button{text-align:left;font-size:14px;min-height:40px}
body.drawer-left-open{--left-drawer:var(--drawer-width)}body.drawer-right-open{--right-drawer:var(--drawer-width)}
.playground{display:grid;grid-template-columns:var(--left-drawer) minmax(0,1fr) var(--right-drawer);grid-template-rows:auto minmax(0,1fr);flex:1;min-height:0;min-width:0;width:100%;max-width:none;padding:8px;gap:8px;overflow:hidden}
.board-toolbar{display:flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;flex:none;min-width:0}.playground>.board-toolbar{grid-column:1/-1;grid-row:1}.board-toolbar .turn{margin-right:auto;display:flex;align-items:center;gap:8px;font-size:14px}.turn>span{font-size:12px;color:var(--muted)}
.panel-controls{display:flex;gap:4px;flex:none}.drawer-tab{display:flex;align-items:center;gap:5px;min-height:42px;padding:5px 10px;border:1px solid var(--line)}.drawer-tab>span{font-size:20px}.drawer-tab>small{font-size:14px}.drawer-tab[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:var(--accent)}
.board-section{grid-column:2;grid-row:2;display:flex;flex-direction:column;min-width:0;min-height:0;position:relative}
.board-wrap{flex:1;min-height:0;position:relative;overflow:hidden;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#ffffff06,transparent 75%)}
#board{display:block;width:100%;height:100%;touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent}#board:focus{outline:none}
#empty-board{position:absolute;top:42%;left:16px;right:16px;text-align:center;pointer-events:none;color:var(--muted)}#empty-board strong{display:block;font-size:22px;font-weight:500;color:var(--ink)}#empty-board span{display:block;font-size:14px;margin-top:6px}
#board-notice{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);max-width:90%;padding:5px 10px;pointer-events:none;border-radius:8px;background:color-mix(in srgb,var(--panel) 90%,transparent);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#board-notice:empty{display:none}
.panel-rail{display:none;min-height:0;min-width:0;overflow:hidden}.panel-rail-left{grid-column:1;grid-row:2}.panel-rail-right{grid-column:3;grid-row:2}.panel-rail.drawer-open{display:flex}.drawer-content{display:flex;flex-direction:column;gap:8px;min-height:0;min-width:0;width:100%;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}
.game-panel,.stats-column{display:none}.game-widget{flex:none;min-width:0;width:100%;height:auto;margin:0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px}.game-widget .section-heading{gap:4px;flex-wrap:wrap}.game-widget .section-heading h2{font-size:15px}.game-widget .position-panel{border:0}.game-widget #engine-state{display:none}.game-widget .position-heading{padding:4px 0 10px}.game-widget #piece-notes:empty{display:none}
.floating-panel{position:fixed;overflow:auto;max-height:calc(100dvh - 72px);box-shadow:var(--shadow);padding-bottom:18px;scrollbar-width:thin}
.widget-grip{width:24px;min-width:24px;min-height:36px;padding:0;cursor:grab;touch-action:none;color:var(--muted)}.widget-resize{display:none}.floating-panel>.widget-resize{display:block;position:absolute;bottom:0;right:0;width:30px;min-height:30px;padding:0;touch-action:none;cursor:nwse-resize;background:transparent}.widget-resize:after{content:'';position:absolute;right:6px;bottom:6px;width:8px;height:8px;border-right:1px solid var(--muted);border-bottom:1px solid var(--muted)}body.panel-dragging{user-select:none;cursor:grabbing}
#banks.reserve-dock{order:20;display:grid;grid-template-columns:1fr 1fr;gap:6px;flex:none;width:min(100%,1000px);align-self:center;align-items:end;margin:4px 0;padding:0;background:none;border:0;box-shadow:none;overflow:visible}.banks-heading,#compact-banks{display:none}.bank-side{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--panel)}.player-card{order:-1;display:flex;align-items:center;gap:6px;padding:0 8px;min-height:34px;font-size:12px}.player-card.active{box-shadow:inset 3px 0 var(--selected)}.white-player{background:#efeedd;color:#24333a}.black-player{background:#20282c;color:#e1e7e7}.reserve-controller{font-size:12px;min-height:34px;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-status{margin-left:auto;white-space:nowrap;font-size:12px}.tray{display:block;padding:0 6px;min-height:0;overflow:visible}.tray>svg{display:block;width:100%;height:62px;min-width:0;max-height:none;overflow:visible}.empty-reserve .tray{display:none}.empty-reserve .player-card{opacity:.85}.tray svg{-webkit-tap-highlight-color:transparent}
#board g:focus,.tray svg g:focus{outline:none}#board .tile-group:focus-visible .face,.tray .reserve-stack:focus-visible .face,#board .move-hit:focus-visible polygon{stroke:var(--accent);stroke-width:3}
.board-footer{order:30;position:relative;isolation:isolate;z-index:1000;display:flex;align-items:center;gap:4px;flex:none;flex-wrap:wrap;padding:4px;border-top:1px solid var(--line);background:var(--bg)}.history-buttons{display:flex;gap:3px;flex:none}.history-buttons button{width:40px;min-height:40px;padding:0;border:1px solid var(--line);font-size:19px}.history-buttons #pause{font-size:0}.history-buttons #pause:before{content:attr(data-symbol);font-size:17px}
.move-context{display:flex;align-items:center;gap:2px;flex:1;min-width:0}#last-move{font-size:13px;min-height:40px;padding:4px 6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#last-move:after{content:' ⌄';color:var(--muted)}#last-move[aria-expanded=true]{background:var(--panel)}#return-original{font-size:12px;border:1px solid var(--accent);padding:4px 8px}
.board-footer #change-panel{position:static;margin:0;padding:0;max-height:none;border:0;overflow:visible}.board-footer #change-list,#history-popover{position:absolute;bottom:calc(100% + 8px);left:4px;width:min(420px,calc(100vw - 24px));max-height:min(420px,60dvh);overflow:auto;padding:10px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);scrollbar-width:thin}.board-footer #change-list{max-height:220px;display:grid;gap:4px}.board-footer #change-list button{text-align:left;font-size:13px;min-height:40px}.drawer-content>#history-popover{position:static;width:100%;max-height:none;box-shadow:none;flex:none}
#history-popover .history-panel{display:block;margin:0}#history-popover .history-panel>summary{display:flex;align-items:center;gap:8px;list-style:none;font-weight:600}#history-popover #move-count{margin-left:auto}#history-popover #history-list{max-height:none;overflow:visible}#history-popover .history-move{min-height:40px}.history-close{min-width:36px;min-height:40px;font-size:22px;padding:0}
.view-menu{position:relative;flex:none;order:20;margin-left:auto;z-index:1100}.view-menu>summary{display:grid;place-items:center;list-style:none;cursor:pointer;width:42px;min-height:42px;border:1px solid var(--line);border-radius:10px;font-size:24px;background:var(--panel)}.view-menu>summary::-webkit-details-marker{display:none}.view-menu .zoom,.view-menu .camera-options{position:absolute;right:0;left:auto;width:260px;max-width:calc(100vw - 24px);background:var(--panel);border:1px solid var(--line);padding:10px}.view-menu .zoom{bottom:calc(100% + 8px);display:flex;justify-content:space-between;border-radius:0 0 12px 12px}.view-menu .zoom button{width:42px;min-height:42px;font-size:23px;padding:0}.view-menu .camera-options{bottom:calc(100% + 71px);display:grid;gap:8px;border-radius:12px 12px 0 0}.camera-options label{display:flex;align-items:center;justify-content:space-between;font-size:13px;gap:8px}.camera-options select{max-width:160px}.camera-options input[type=range]{max-width:130px}
.focus-settings{display:none}.board-focus .focus-settings{display:block;min-width:40px;min-height:40px}.board-focus>header,.board-focus>.workspace-bar{display:none}.board-focus .board-footer{padding-bottom:max(4px,env(safe-area-inset-bottom))}
.mobile-nav,#mobile-game-select,#mobile-close-game{display:none}.game-picker-list{position:absolute;left:0;right:0;top:calc(100% + 6px);max-height:50dvh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:4px;box-shadow:var(--shadow)}.game-picker-list button{display:block;width:100%;min-height:44px;text-align:left;font-size:14px}.game-picker-list button[aria-current=true]{background:color-mix(in srgb,var(--accent) 16%,transparent)}
#workspace-status.save-error{display:block;position:fixed;bottom:68px;left:12px;max-width:calc(100vw - 24px);padding:10px;background:var(--panel);border:1px solid var(--selected);border-radius:10px;z-index:1400;font-size:13px}
.history-preview .hypothesis-base{visibility:hidden}.history-preview .hypothesis-tile{opacity:1}
/* Small screens keep a board above a scrollable information sheet. */
body[data-screen=mobile]{padding-bottom:env(safe-area-inset-bottom)}
[data-screen=mobile]>header{min-height:48px;padding:3px 8px;gap:6px}[data-screen=mobile] .brand{font-size:15px}[data-screen=mobile] .brand>span{font-size:22px}[data-screen=mobile] .header-tools{gap:0}[data-screen=mobile] .header-tools>button{width:36px;min-height:40px}[data-screen=mobile] .theme-switch>span:not(.switch-track){display:none}[data-screen=mobile] #online-button{display:none}
[data-screen=mobile] .workspace-bar{min-height:44px;padding:3px 8px}[data-screen=mobile] #game-tabs{display:none}[data-screen=mobile] #mobile-game-select{display:block;position:relative;z-index:1200;min-width:0;flex:1;background:var(--panel);border:1px solid var(--line);border-radius:8px}[data-screen=mobile] #mobile-game-select>summary{display:block;list-style:none;min-height:36px;padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}[data-screen=mobile] #mobile-close-game{display:block}[data-screen=mobile] #add-tab{width:34px;min-height:36px}
[data-screen=mobile] .mobile-nav{display:flex;flex:none;border-bottom:1px solid var(--line);background:var(--panel)}[data-screen=mobile] .mobile-nav button{flex:1;min-width:0;min-height:42px;padding:5px 2px;font-size:13px;border-radius:0;border-bottom:2px solid transparent;color:var(--muted)}[data-screen=mobile] .mobile-nav button[aria-pressed=true]{border-color:var(--accent);color:var(--ink);background:color-mix(in srgb,var(--accent) 10%,transparent)}.mobile-nav [data-section=players]{display:none}.online-game .mobile-nav [data-section=players]{display:block}
[data-screen=mobile] .playground{display:flex;flex-direction:column;padding:0 6px;gap:0}[data-screen=mobile] .board-section{order:1;flex:1;width:100%;min-height:0}[data-screen=mobile] .board-toolbar{min-height:40px;gap:4px}[data-screen=mobile] .board-toolbar .turn{font-size:12px}[data-screen=mobile] .turn>span{display:none}[data-screen=mobile] .panel-controls{display:none}[data-screen=mobile] .widget-grip,[data-screen=mobile] .widget-resize{display:none}
[data-screen=mobile] .panel-rail{order:20;display:none;flex:0 1 30%;min-height:0;width:100%;padding-top:5px}[data-screen=mobile] .drawer-content{display:block;overflow:auto}[data-screen=mobile] .game-widget{display:none;position:static;width:100%;height:auto;box-shadow:none}[data-screen=mobile][data-mobile-panel=moves] .panel-rail-left,[data-screen=mobile][data-mobile-panel=position] .panel-rail-right,[data-screen=mobile][data-mobile-panel=edge] .panel-rail-right{display:block}[data-screen=mobile][data-mobile-panel=moves] [data-panel-key=analysis],[data-screen=mobile][data-mobile-panel=position] [data-panel-key=tactics],[data-screen=mobile][data-mobile-panel=edge] [data-panel-key=edge]{display:block}
[data-screen=mobile] #banks.reserve-dock{order:30;grid-template-columns:1fr;gap:3px;margin:3px 0}[data-screen=mobile] .bank-side{display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center}[data-screen=mobile] .bank-side.empty-reserve{grid-template-columns:1fr}[data-screen=mobile] .player-card{height:100%;gap:4px;padding:0 5px}[data-screen=mobile] .reserve-controller{font-size:11px}[data-screen=mobile] .player-status{display:none}[data-screen=mobile] .player-card,[data-screen=mobile] .reserve-controller{min-height:28px}[data-screen=mobile] .tray>svg{height:47px}
[data-screen=mobile] .board-footer{order:40;flex-wrap:nowrap;gap:2px;padding:3px 0}[data-screen=mobile] .history-buttons{gap:2px}[data-screen=mobile] .history-buttons button{width:32px;min-height:40px;font-size:17px}[data-screen=mobile] .move-context{min-width:0}[data-screen=mobile] #last-move{font-size:12px;padding:3px}[data-screen=mobile] #change-panel>summary{width:28px;min-width:28px}[data-screen=mobile] .view-menu>summary{width:36px;min-height:40px}[data-screen=mobile] #return-original{position:absolute;bottom:calc(100% + 6px);left:4px;background:var(--panel)}
[data-screen=mobile] .focus-settings{display:none}[data-screen=mobile][data-mobile-panel=players] .board-section{display:none}[data-screen=mobile].online-game[data-mobile-panel=players] .game-panel{display:block;overflow:auto}
/* Online room controls have a designated place; normal play hides coaching. */
body.online-game .game-panel{display:none}body.normal-online .board-section{grid-column:1}body.normal-online .game-panel{display:block;grid-column:2;grid-row:2;overflow:auto;background:var(--panel);padding:12px;border-radius:12px;min-height:0}body.normal-online .panel-rail,body.normal-online .panel-controls,body.normal-online .game-widget{display:none}body.normal-online .playground{grid-template-columns:minmax(0,1fr) var(--drawer-width)}
body[data-screen=mobile].online-game .game-panel{display:none}body[data-screen=mobile].online-game[data-mobile-panel=players] .game-panel{display:block}
.lab-page .playground,.comparing .playground,body:has(#setup-page:not([hidden])) .playground,.lab-page .mobile-nav,.comparing .mobile-nav,.lab-page .floating-panel,.comparing .floating-panel{display:none}
/* Explore one selected candidate, with a single shared transport. */
.analysis-actions{display:flex;gap:6px;margin-bottom:12px}.analysis-actions button{flex:1;min-height:36px;padding:6px;font-size:12px}.ai-content{display:flow-root}.idea-picker{display:grid;gap:10px}.idea-choice{text-align:left;padding:14px;border:1px solid var(--line);border-radius:12px;display:grid;gap:8px;width:100%;background:color-mix(in srgb,var(--panel) 88%,var(--accent));transition:border-color .18s,background .18s}.idea-choice:hover,.idea-choice[aria-pressed=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel))}.idea-label{font-size:12px;color:var(--muted)}.idea-choice strong{font-size:19px;letter-spacing:.015em}.idea-reply{font-size:12px;color:var(--muted);line-height:1.5}.explore-empty{font-size:14px;color:var(--muted);line-height:1.6}.explore-footer{padding-top:10px}.explore-hint{font-size:12px;color:var(--muted);line-height:1.6;min-height:3.2em;margin:0 0 6px}.explore-more{font-size:12px;color:var(--accent);padding:6px 0;min-height:36px}.line-confirm{cursor:pointer}.line-confirm polygon{animation:idea-breathe 1.6s ease-in-out infinite}@keyframes idea-breathe{50%{stroke-opacity:.35;stroke-width:5}}@media(prefers-reduced-motion:reduce){.line-confirm polygon{animation:none}}

@media(max-height:560px) and (min-width:600px){[data-screen=mobile] .player-card{min-height:25px}[data-screen=mobile] .tray>svg{height:36px}[data-screen=mobile] #banks.reserve-dock{grid-template-columns:1fr 1fr}[data-screen=mobile] .mobile-nav button{min-height:34px}[data-screen=mobile] .board-toolbar{min-height:34px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto;animation-duration:.001ms!important;transition-duration:.001ms!important}}
:root[data-surface=walnut]{--table-color:#68503f;--table-texture:linear-gradient(#261c1636,#261c1636),url('/surfaces/walnut.jpg')}
:root[data-surface=felt]{--table-color:#234c43;--table-texture:linear-gradient(#15392d55,#15392d55),url('/surfaces/felt.jpg')}
:root[data-surface=midnight]{--table-color:#17242f;--table-texture:radial-gradient(ellipse at 50% 40%,#35495666,transparent 75%)}
:root[data-surface]:not([data-surface=plain]) .board-wrap{background-color:var(--table-color);background-image:none}


/* Entry, account, recovery, and match completion. */
#play-menu{min-height:40px;min-width:72px;padding:6px 18px}#account-menu{font-size:13px;max-width:130px;width:auto;padding:6px 10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#beta-sync{font-size:12px;color:var(--muted);margin-left:auto;padding:4px 8px;min-height:36px;white-space:nowrap}#beta-sync[data-state=error]{color:var(--selected);border:1px solid var(--selected)}#beta-sync[data-state=busy]{color:var(--accent)}.workspace-menu{margin-left:0}
#beta-hub{width:min(640px,94vw);padding:24px;max-height:90dvh;border-radius:18px}#beta-hub h2{font-size:25px;margin:0}#beta-hub h2 small{display:block;margin-top:4px;font-size:12px;letter-spacing:.04em;color:var(--muted);font-weight:400}.beta-heading p{margin:10px 0 0}.beta-tabs{margin-top:18px;gap:2px}.beta-tabs button{min-height:42px}.beta-play{gap:10px}.beta-play button{min-height:100px;padding:16px;border-radius:12px;background:color-mix(in srgb,var(--accent) 5%,var(--panel))}.beta-play strong{font-size:17px}.beta-play span{font-size:13px;line-height:1.4;margin-top:7px}.beta-guide{margin-top:18px}.beta-guide summary{min-height:40px;cursor:pointer}.beta-note{font-size:13px;line-height:1.6}.beta-setup-sides{display:grid;grid-template-columns:1fr 1fr;gap:12px}.beta-setup-sides label{display:grid;gap:7px;font-size:14px}.beta-setup-sides select{width:100%;min-width:0;min-height:44px}#beta-setup{padding:14px;border:1px solid var(--accent);border-radius:12px;margin:12px 0}#beta-setup h3{font-size:17px;margin:0 0 10px}#beta-status:empty{display:none}#beta-status{border-left:3px solid var(--accent);padding-left:10px;font-size:13px}#beta-account-state{margin-top:16px}
#game-end{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);width:min(340px,90%);padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel);box-shadow:var(--shadow);text-align:center}#game-end strong{display:block;font-size:21px}#game-end span{display:block;font-size:12px;color:var(--muted);margin:5px 0 10px}#game-end div{display:flex;gap:8px;justify-content:center}#game-end button{min-height:40px;padding:6px 14px}#recovery-dialog{max-width:520px}#recovery-dialog button{display:block;margin:8px 0;min-height:44px;width:100%}
#room-toggle{min-height:42px;padding:5px 10px}#online-panel{padding:2px}#room-status,#room-result{font-size:13px}.room-actions{display:flex;flex-wrap:wrap;gap:5px}.room-actions button{min-height:40px;font-size:13px}#room-copy{min-height:40px}#room-players{font-size:14px}.room-chat summary{min-height:40px;cursor:pointer}
#room-dialog{width:min(420px,94vw);padding:16px}.room-dialog-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.room-dialog-heading h2{font-size:18px;margin:0}
[data-screen=mobile] #play-menu{min-width:52px;padding:5px 10px;font-size:13px}[data-screen=mobile] #account-menu{max-width:76px;font-size:12px;padding:4px 6px}[data-screen=mobile] .header-tools>button{width:34px}[data-screen=mobile] #beta-sync{font-size:11px;padding:3px 5px}[data-screen=mobile] #beta-hub{padding:18px}[data-screen=mobile] #room-toggle{font-size:12px;min-height:40px;padding:4px 8px}[data-screen=mobile] .beta-play button{min-height:90px;padding:12px}[data-screen=mobile] .beta-play strong{font-size:16px}

#connection-state{font-size:12px;color:var(--selected);white-space:nowrap}#app-update{color:var(--accent)}[data-screen=mobile] #connection-state{position:absolute;top:100%;right:8px;z-index:1200;background:var(--panel);border-radius:6px;padding:4px 8px}.workspace-bar{position:relative}

#workspace-status.save-error span{display:block}#workspace-status.save-error button{font-size:12px;margin:5px 4px 0 0;border:1px solid var(--line)}

[data-screen=mobile] .bank-side:not(.empty-reserve) .side-disc{display:none}[data-screen=mobile] .bank-side:not(.empty-reserve) .reserve-controller{font-size:0;width:34px;min-height:44px}[data-screen=mobile] .bank-side:not(.empty-reserve) .reserve-controller:after{font-size:14px;font-weight:600}[data-screen=mobile] .black-player .reserve-controller:after{content:"B"}[data-screen=mobile] .white-player .reserve-controller:after{content:"W"}[data-screen=mobile] .empty-reserve .reserve-controller:after{content:none}

@media(max-height:560px) and (min-width:600px){
 [data-screen=mobile]>header{min-height:40px;padding-top:0;padding-bottom:0}[data-screen=mobile] .workspace-bar{min-height:38px}
 [data-screen=mobile] .playground{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto auto;gap:3px}
 [data-screen=mobile]:is([data-mobile-panel=moves],[data-mobile-panel=position],[data-mobile-panel=edge]) .playground{grid-template-columns:minmax(0,1fr) minmax(250px,.75fr)}
 [data-screen=mobile] .board-section{grid-column:1;grid-row:1}[data-screen=mobile] .panel-rail{grid-column:2;grid-row:1;max-height:none;padding:0}
 [data-screen=mobile] #banks.reserve-dock{grid-column:1/-1;grid-row:2;grid-template-columns:1fr 1fr;margin:0;max-height:40px}
 [data-screen=mobile] .bank-side:not(.empty-reserve) .reserve-controller{min-height:36px}[data-screen=mobile] .board-footer{grid-column:1/-1;grid-row:3}
}
.appearance-preview{height:160px;position:relative;border-radius:12px;display:grid;place-items:center;background-size:cover;background-position:center;overflow:hidden}.appearance-preview>svg{height:140px;width:230px}.appearance-preview>span{position:absolute;bottom:8px;left:10px;padding:4px 8px;border-radius:5px;color:#fff;background:#142129c7;font-size:11px}.material-swatch{width:64px;height:38px;border-radius:6px;background-size:cover;background-position:center;border:1px solid #8884}.tile-swatch{width:75px;height:46px}.tile-swatch>svg{width:100%;height:100%}.palette-swatch{width:24px;height:24px;border-radius:50%}.appearance-custom summary{font-size:14px;cursor:pointer;min-height:36px}.appearance-custom .setting-chips{margin-top:10px}
#online-dialog{width:500px;max-width:calc(100vw - 20px);max-height:88dvh;padding:20px;border-radius:18px;background:var(--panel);border:1px solid var(--line);color:var(--ink)}#online-dialog h2{margin:0;font-size:25px}#online-dialog .section-heading p{margin:5px 0 12px;font-size:13px}#close-online{width:44px;height:44px}.lobby-tabs{display:flex;gap:5px;padding-bottom:12px;margin-bottom:15px;border-bottom:1px solid var(--line)}.lobby-tabs button{flex:1;min-height:42px;font-size:13px;border-radius:8px}.lobby-tabs button[aria-pressed=true]{background:color-mix(in srgb,var(--accent) 16%,var(--panel));color:var(--ink)}#online-dialog .setting{display:grid;grid-template-columns:110px 1fr;gap:10px;margin:0 0 15px;font-size:14px}#online-dialog input,#online-dialog select{width:100%;min-width:0;min-height:42px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:7px;padding:8px}.lobby-rules{margin:8px 0 18px;border-top:1px solid var(--line);padding-top:10px}.lobby-rules summary{font-size:14px;min-height:36px;cursor:pointer}.lobby-rules p,.lobby-footnote{font-size:12px;line-height:1.6;color:var(--muted)}#create-room-button,#join-room{width:100%;min-height:46px}.join-link-row{display:flex;gap:8px;margin:10px 0 20px}.join-link-row button{font-size:13px;padding:8px 12px}.lobby-game{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;text-align:left;border:1px solid var(--line);border-radius:10px;min-height:62px;padding:12px;margin:7px 0}.lobby-game strong{font-size:14px}.lobby-game span{font-size:12px;color:var(--muted)}#recent-rooms h3{font-size:13px;margin:20px 0 9px;color:var(--muted)}#lobby-status{font-size:13px;line-height:1.5}#lobby-status:empty{display:none}
.queen-surrounded .piece-mark{transform-box:fill-box;transform-origin:center;animation:queen-sigh 1.6s ease-out both}.queen-emote{animation:queen-thought 2.4s ease-out both}@keyframes queen-sigh{20%{transform:rotate(-12deg) translateY(-3px)}45%{transform:rotate(10deg)}65%{transform:rotate(-5deg)}100%{transform:rotate(0)}}@keyframes queen-thought{0%{opacity:0}20%,65%{opacity:1}100%{opacity:0}}@media(prefers-reduced-motion:reduce){.queen-surrounded .piece-mark,.queen-emote{animation:none}.queen-emote{display:none}}

@media(pointer:coarse){.explore-hint{font-size:12px}}
body[data-screen=mobile] .idea-picker{grid-template-columns:1fr 1fr;gap:7px}body[data-screen=mobile] .idea-choice{padding:9px;gap:5px;border-radius:9px}body[data-screen=mobile] .idea-choice strong{font-size:16px}body[data-screen=mobile] .idea-label,body[data-screen=mobile] .idea-reply{font-size:11px}body[data-screen=mobile] .explore-footer{display:flex;gap:10px;align-items:center;padding-top:8px}body[data-screen=mobile] .explore-hint{flex:1;min-height:0;font-size:11px;margin:0;line-height:1.4}body[data-screen=mobile] .explore-more{width:93px;flex:none;line-height:1.4;font-size:11px;text-align:right}body[data-screen=mobile] #ai-panel .section-heading{margin-bottom:6px}

/* The table surrounds the play area; controls sit above it. */
:root[data-surface=walnut] .playground,:root[data-surface=felt] .playground{background:var(--table-color)}
:root[data-surface]:not([data-surface=plain]) .board-wrap{border-radius:0}
:root[data-surface]:not([data-surface=plain]) .board-toolbar{color:#f0f4f1}
:root[data-surface]:not([data-surface=plain]) .board-toolbar .turn>span{color:#d3dbd5}
:root[data-surface]:not([data-surface=plain]) .board-toolbar :is(.drawer-tab,.overlay-options>summary,.board-focus-button){background:var(--panel);color:var(--ink)}
#stack-inspection{position:fixed;z-index:1800;pointer-events:none;max-width:280px;max-height:85dvh;overflow:hidden;border:1px solid var(--line);border-radius:12px;padding:12px;background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}
#stack-inspection>strong{display:block;font-size:12px;color:var(--muted);margin-bottom:5px}#stack-inspection>div{display:flex;align-items:center;gap:12px;font-size:13px}#stack-inspection svg{width:48px;height:55px;flex:none}
#game-review{width:min(520px,94vw);max-height:88dvh;overflow:auto;padding:20px;border-radius:16px}#game-review h2{margin:0;font-size:23px}#game-review .muted{font-size:12px;line-height:1.6}.review-result{font-size:17px}.review-moments{display:grid;gap:10px}.review-moments article{border:1px solid var(--line);border-radius:10px;padding:12px}.review-moments strong,.review-moments span{display:block}.review-moments span{font-size:12px;color:var(--accent);margin-top:5px}.review-moments p{font-size:13px;line-height:1.5}.review-moments button{min-height:42px;border:1px solid var(--line);padding:6px 12px}

.buy-game{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:5px 8px;font-size:12px;color:var(--muted);text-decoration:none;white-space:nowrap}.buy-game:hover{color:var(--ink)}body[data-screen=mobile] .buy-game{font-size:11px;padding:4px;min-height:36px;flex:none}

.playground{position:relative;isolation:isolate}.table-scene{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}:root[data-surface]:not([data-surface=plain]) .board-wrap{background:transparent}

/* Tiles may use the open space beside a short panel; panels remain above them. */
body[data-screen=desktop] .board-wrap,body[data-screen=desktop] #board{overflow:visible}
.board-toolbar{position:relative;z-index:35}.panel-rail{position:relative;z-index:30}
.board-toolbar .control-picker>summary{background:var(--panel);color:var(--ink);border:1px solid var(--line);min-height:42px;border-radius:8px;display:flex;align-items:center;padding:5px 12px}
#reserve-dock-toggle{min-width:40px;min-height:40px;font-size:21px;order:19;border:1px solid var(--line)}
body[data-screen=desktop][data-reserves=left] #banks.reserve-dock{order:0;display:grid;grid-template-columns:1fr 1fr;width:100%;margin:0 0 8px;align-items:start}
body[data-screen=desktop][data-reserves=left] .reserve-dock .tray>svg{height:clamp(360px,58dvh,600px);width:100%}
body[data-screen=desktop][data-reserves=left] .reserve-dock .player-card{padding:0 5px}
body[data-screen=desktop][data-reserves=left] .reserve-controller{font-size:11px}
body[data-screen=desktop][data-reserves=left] .reserve-dock .player-status{display:none}
.idea-choice .idea-move{display:flex;align-items:center;gap:9px;min-height:36px}.idea-move svg{width:34px;height:34px;flex:none}.idea-move strong{overflow-wrap:anywhere}
.explore-hint{height:3.2em;overflow:hidden}.idea-reply{min-height:3em}

body[data-screen=mobile] .idea-move{gap:5px}body[data-screen=mobile] .idea-move svg{width:26px;height:26px}body[data-screen=mobile] .idea-reply{min-height:2.8em}
body[data-screen=desktop][data-reserves=left] .drawer-content:has(.analysis-panel:not([hidden])) .reserve-dock .tray>svg{height:clamp(270px,40dvh,420px)}
body[data-screen=desktop][data-reserves=left] .analysis-panel .idea-picker{grid-template-columns:1fr 1fr;gap:6px}
body[data-screen=desktop][data-reserves=left] .analysis-panel .idea-choice{padding:8px;gap:5px}
body[data-screen=desktop][data-reserves=left] .analysis-panel .idea-move{gap:4px}
body[data-screen=desktop][data-reserves=left] .analysis-panel .idea-move svg{width:24px;height:24px}
body[data-screen=desktop][data-reserves=left] .analysis-panel .idea-move strong{font-size:14px}
body[data-screen=desktop][data-reserves=left] .analysis-panel :is(.idea-label,.idea-reply,.explore-hint){font-size:11px}

.beta-save-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin:8px 0}.beta-save-row .beta-game-row{margin:0;min-width:0}.beta-save-row strong{overflow-wrap:anywhere}.beta-delete-confirm{grid-column:1/-1;padding:12px;border:1px solid var(--border);border-radius:10px}.beta-delete-confirm p{margin:0 0 10px}.beta-delete-confirm button+button{margin-left:8px}

/* Match information has its own compact home; local setup never leaks into it. */
body.normal-online .game-panel{align-self:start;max-height:100%;padding:16px;border:1px solid var(--line)}
body.online-game .game-panel>:not(#online-panel){display:none!important}
#online-panel .section-heading{align-items:center;margin:0 0 14px}#room-heading{font-size:17px}#room-seat{font-size:12px;color:var(--muted);white-space:nowrap}
#room-players{display:grid;gap:8px}.room-player{display:flex;align-items:center;gap:8px;padding:10px;background:var(--bg);border-radius:9px;min-width:0}.room-player strong{flex:1;overflow-wrap:anywhere;font-size:14px}.room-player>span:last-child{color:var(--muted);font-size:12px}
#room-status{min-height:1.4em;margin:12px 0 4px;color:var(--muted)}#room-result{margin:4px 0 12px}#room-result:empty{display:none}#room-copy{width:100%;background:var(--accent);color:var(--accent-ink,#10272c);font-weight:600}#room-invite{width:100%;min-width:0;margin:8px 0;padding:9px;background:var(--bg);color:var(--muted);border:1px solid var(--line);border-radius:8px;font-size:12px}
.room-actions{display:flex;gap:8px;margin:12px 0}.room-actions button{flex:1}.room-actions #room-leave{flex-basis:100%;background:transparent;color:var(--muted)}
.room-chat{border-top:1px solid var(--line);padding-top:4px}.room-chat summary{display:flex;align-items:center;font-size:14px}.room-chat summary::after{content:'⌄';margin-left:auto}#chat-messages{min-height:72px;max-height:180px;height:auto}#chat-form{display:flex;gap:6px}#chat-text{width:100%;min-width:0}#chat-form button{flex:none}.room-chat>label{font-size:13px;color:var(--muted)}
body[data-screen=mobile].normal-online .playground{grid-template-columns:minmax(0,1fr)}body[data-screen=mobile].online-game .mobile-nav [data-section=players]{display:none}
#room-dialog{width:min(420px,calc(100vw - 24px));padding:18px}#room-dialog #online-panel{border:0}#room-dialog .room-dialog-heading h2{font-size:16px;color:var(--muted)}
body.normal-online[data-screen=desktop][data-reserves=left] .playground{grid-template-columns:var(--drawer-width) minmax(0,1fr) var(--drawer-width)}
body.normal-online[data-screen=desktop][data-reserves=left] .board-section{grid-column:2}
body.normal-online[data-screen=desktop][data-reserves=left] .game-panel{grid-column:3}
body.normal-online[data-screen=desktop][data-reserves=left] .panel-rail-left{display:flex;grid-column:1}
body.online-game .history-buttons{display:none}
body.normal-online .game-panel{position:relative;z-index:30}

body[data-screen=mobile].normal-online .mobile-nav{display:none}body.online-game #empty-board{top:30%}

#room-dialog .room-dialog-heading{position:absolute;right:8px;top:8px;margin:0}#room-dialog .room-dialog-heading button{width:36px;min-height:36px}#room-dialog #online-panel>.section-heading{padding-right:26px}
/* Compact reserves: one color per card, two staggered rows of four stacks. */
body[data-screen=desktop][data-reserves=left] #banks.reserve-dock{grid-template-columns:minmax(0,1fr);gap:8px}
body[data-screen=desktop][data-reserves=left] #banks.reserve-dock .tray>svg{height:auto;aspect-ratio:358/200;max-height:185px}
body[data-screen=desktop][data-reserves=left] #banks .player-card{padding:0 9px}
#reserve-dock-toggle{order:0;font-size:19px;min-height:42px}
body.normal-online .panel-controls{display:flex}
body.normal-online .panel-controls .drawer-tab:not([aria-label="Toggle Tactics"]){display:none}
body.normal-online #strategy-panel.game-widget:not(.floating-panel){display:block;position:static;width:100%;height:auto;max-height:none;margin:0}
body.normal-online .game-panel>:not(#online-panel):not(#strategy-panel){display:none!important}
body.normal-online .game-panel>#strategy-panel{display:block!important}
body.normal-online .game-panel>#strategy-panel[hidden]{display:none!important}
body.normal-online[data-screen=mobile] #strategy-panel.game-widget{order:2;max-height:32dvh;overflow:auto;flex:none;margin:6px 0}
body.normal-online[data-screen=mobile] .panel-controls .drawer-tab{padding:4px 6px;min-height:40px}
body.normal-online[data-screen=mobile] .panel-controls .drawer-tab>span{display:none}
body.normal-online[data-screen=mobile] .panel-controls .drawer-tab>small{font-size:12px}
body.normal-online[data-screen=mobile] .board-toolbar .turn{min-width:0;overflow:hidden}
body.normal-online[data-screen=mobile] .turn strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* A room is social space; Tactics belongs to its own dock. */
body.normal-online[data-screen=desktop].drawer-left-open .playground{grid-template-columns:var(--drawer-width) minmax(0,1fr) var(--drawer-width)}
body.normal-online[data-screen=desktop].drawer-left-open .board-section{grid-column:2}
body.normal-online[data-screen=desktop].drawer-left-open .game-panel{grid-column:3}
body.normal-online[data-screen=desktop] .panel-rail-left.drawer-open{display:flex;grid-column:1;grid-row:2}
body.normal-online #strategy-panel.floating-panel{display:block}
body.normal-online #strategy-panel[hidden]{display:none!important}
.room-player.is-turn{box-shadow:inset 3px 0 var(--accent)}
#room-status:empty,#room-result:empty{display:none}
#room-heading{font-size:16px}#room-players{display:grid;gap:6px}#room-players .room-player{padding:9px 10px;background:transparent;border:1px solid var(--line)}
#series-score{font-variant-numeric:tabular-nums;text-align:center;font-size:13px;margin:10px 0}
#room-leave{font-size:13px;min-height:36px}#room-copy{margin:10px 0}
.chat-controls{display:flex;gap:6px;align-items:center}
details.room-chat:not([open])>:not(summary){display:none}
#chat-messages{grid-column:1/-1;min-height:64px;max-height:180px;margin:6px 0}
#chat-form{flex:1;min-width:0}.chat-icon{width:40px;min-width:40px;height:40px;padding:9px;border:1px solid var(--line);border-radius:10px;display:inline-grid;place-items:center}
.chat-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#chat-mute{flex:none}#chat-mute .sound-off{display:none}#chat-mute[aria-pressed=true] .sound-off{display:block}#chat-mute[aria-pressed=true] .sound-waves{display:none}#chat-mute[aria-pressed=true]{color:var(--selected);border-color:currentColor}
.game-tab.online-tab{border-color:var(--accent);border-style:dashed}.game-tab.online-tab.active{border-style:solid;box-shadow:inset 0 -2px var(--accent)}.game-tab.online-tab.your-turn>[role=tab]::after{content:'•';color:var(--selected);margin-left:6px}

.pending-piece .tile-art{animation:pending-breathe 1.6s ease-in-out infinite}.pending-piece .face{stroke:var(--selected)!important;stroke-width:3!important}#rotate-left,#rotate-right{touch-action:none}
.visual-metrics{display:grid;grid-template-columns:1fr 1fr;gap:4px}.visual-metrics>button{padding:9px 6px!important;min-height:64px}.visual-metrics .metric-label,.visual-metrics .balance-title{font-size:13px}.visual-metrics .race-pair{font-size:21px;margin-top:6px}.visual-metrics .qualification-pair{display:grid;gap:5px}.visual-metrics .qualification-pair b{font-size:11px}.visual-metrics .balance-title{flex-wrap:wrap;gap:3px}.visual-metrics .balance-title b{font-size:11px}.visual-metrics .balance-track{margin-top:9px}.visual-metrics .balance-title svg{width:18px;height:18px}
@media(prefers-reduced-motion:reduce){.pending-piece .tile-art{animation:none;filter:drop-shadow(0 0 4px var(--selected))}}

body[data-screen=desktop] .panel-controls .drawer-tab{width:42px;min-width:42px;padding:7px;position:relative}body[data-screen=desktop] .panel-controls .drawer-tab small{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}body[data-screen=desktop] .panel-controls .drawer-tab>span{font-size:20px}.rules-choice{display:grid;gap:6px;margin:10px 0}.rules-choice select{width:100%;min-height:42px}.visual-metrics .race-pair b{font-size:21px}

/* Tactics keeps its frame while summary, explanations and details trade places. */
body #strategy-panel.game-widget,body.normal-online #strategy-panel.game-widget:not(.floating-panel){height:410px;max-height:calc(100dvh - 160px);overflow:hidden;padding:10px;min-height:180px}
#strategy-panel .position-panel{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
#strategy-panel .position-heading{flex:none;min-height:42px}
#strategy-panel .position-content,#strategy-panel .position-help{flex:1;min-height:0;overflow:auto;scrollbar-width:thin;overscroll-behavior:contain}
#strategy-panel .visual-metrics{display:flex;flex-direction:column;padding:0 4px;gap:0}
#strategy-panel .visual-metrics>button{flex:none;min-height:68px;width:100%;padding:8px 4px!important;text-align:left;border-radius:0;border:0;border-bottom:1px solid var(--line)}
#strategy-panel .qualification-pair{display:flex;justify-content:space-between;gap:8px}
#strategy-panel .qualification-pair b{font-size:12px}#strategy-panel .balance-title{flex-wrap:nowrap}#strategy-panel .metric-label{display:flex;justify-content:space-between;font-size:14px}
#strategy-panel .balance-title{font-size:14px}#strategy-panel .balance-title b{margin-left:auto;font-size:12px}
#strategy-panel .metric-drilldown{padding:0 4px}#strategy-panel .metric-back{display:block;min-height:36px;margin:0 0 8px;padding:4px 8px;color:var(--accent)}
#strategy-panel .metric-drilldown>summary{display:none}#strategy-panel .metric-table{font-size:13px}#strategy-panel .metric-table td,#strategy-panel .metric-table th{padding:7px 4px}
#strategy-panel>.widget-resize{display:none}
.board-toolbar{flex-wrap:wrap}.board-toolbar>.turn{flex:1;min-width:120px}
.board-toolbar .drawer-tab,#reserve-dock-toggle,.control-picker>summary{display:flex;align-items:center;justify-content:center;width:42px;height:42px;min-height:42px;padding:9px;border:1px solid var(--line);border-radius:8px;background:var(--panel);box-sizing:border-box}
.board-toolbar .drawer-tab>span{display:flex;align-items:center;justify-content:center;line-height:1}
.board-toolbar svg{width:22px;height:22px;display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.board-toolbar .drawer-tab[aria-pressed=true],#reserve-dock-toggle[aria-pressed=true],.control-picker[open]>summary{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--panel))}
.control-picker>summary::marker{content:''}.control-picker>summary::after{display:none}
.overlay-strip{flex:0 0 100%;min-width:0;order:100;border:1px solid var(--line);border-radius:10px;padding:5px;background:var(--panel)}
.overlay-strip .overlay-options{position:static;display:flex;flex-wrap:wrap;width:auto;max-width:none;padding:0;border:0;box-shadow:none;background:transparent;gap:5px}
.overlay-strip .overlay-chip{flex:1;min-width:110px;min-height:42px;padding:6px 10px;font-size:13px}
body[data-screen=mobile] .overlay-strip .overlay-options{flex-wrap:nowrap;overflow-x:auto}.overlay-strip .overlay-symbol svg{stroke:none;fill:currentColor}
body[data-screen=mobile] #strategy-panel.game-widget{height:310px;max-height:38dvh}body[data-screen=mobile] .board-toolbar>.turn{min-width:75px}

/* Compact, consistently docked analysis and reserve groups. */
#reset-panel-layout{width:42px;min-width:42px;height:42px;padding:7px;font-size:21px;border:1px solid var(--line);background:var(--panel)}
body[data-screen=desktop] .panel-rail-left .analysis-panel{height:auto;max-height:none;flex:none;overflow:visible}
body[data-screen=desktop][data-reserves=left] .panel-rail-left .analysis-panel{max-height:340px;overflow:auto}
body[data-screen=desktop][data-reserves=left] #banks.reserve-dock .tray>svg{max-height:145px}
body[data-screen=desktop] .panel-rail-right .drawer-content:has(>#strategy-panel:not([hidden])):has(>#graph-panel:not([hidden])){height:100%;display:grid;grid-template-rows:minmax(0,1fr) minmax(0,1fr);overflow:hidden}
body[data-screen=desktop] .panel-rail-right .drawer-content>#strategy-panel{height:100%;max-height:none;min-height:0}
body[data-screen=desktop] .panel-rail-right .drawer-content>#graph-panel{min-height:0;overflow:auto}
.idea-move .move-diagram{width:72px;height:56px;flex:none;max-width:none}.idea-move{gap:6px}.own-move-reply{padding:10px;border:1px solid var(--accent);border-radius:10px;margin:8px 0;background:color-mix(in srgb,var(--accent) 8%,var(--panel))}.own-move-reply>span{font-size:12px;color:var(--muted)}
.overlay-strip{flex:0 1 auto;order:0;padding:3px;border-radius:9px;max-width:100%}.overlay-strip .overlay-options{display:flex;flex-wrap:nowrap;gap:3px;overflow-x:auto}
.overlay-strip .overlay-chip{position:relative;flex:0 0 36px;min-width:36px;width:36px;min-height:36px;height:36px;padding:6px;display:flex;align-items:center;justify-content:center;border-radius:7px}
.overlay-strip .overlay-chip>span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.overlay-strip .overlay-symbol{display:flex;align-items:center;justify-content:center;width:22px;height:22px}
body[data-screen=mobile] .overlay-strip{flex:1 1 100%;margin-left:auto}.overlay-strip .overlay-options{justify-content:flex-end}

.idea-choice .idea-move{flex-wrap:wrap}.idea-choice .idea-move strong{font-size:15px}.idea-choice .move-diagram{width:60px;height:48px}body[data-screen=mobile] .overlay-strip .overlay-chip{flex-basis:42px;width:42px;min-height:42px;height:42px}

/* Stable toolbar anchors: overlay choices never participate in its layout. */
.board-toolbar{position:relative}
.board-toolbar>.control-picker{order:-2;flex:none;margin:0}
.board-toolbar>.overlay-strip{position:absolute;left:0;top:calc(100% + 6px);z-index:1400;width:max-content;max-width:calc(100vw - 24px);margin:0;padding:5px;box-shadow:var(--shadow);background:var(--panel);border:1px solid var(--line);border-radius:12px}
.board-toolbar>.overlay-strip .overlay-options{justify-content:flex-start}
body[data-screen="mobile"] .board-toolbar>.overlay-strip{flex:none;margin:0;max-width:calc(100vw - 16px)}
.workspace-menu>summary{display:flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 12px;background:var(--panel);border-radius:10px;font-weight:600;transition:background .15s,border-color .15s}
.workspace-menu>summary::-webkit-details-marker{display:none}
.workspace-menu>summary svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.workspace-menu>summary .menu-chevron{width:14px;height:14px;opacity:.65}
.workspace-menu[open]>summary .menu-chevron{transform:rotate(180deg)}
.workspace-menu>summary:hover,.workspace-menu[open]>summary{background:var(--bg);border-color:var(--accent)}
.workspace-menu-items{padding:7px;gap:3px;min-width:224px;border-radius:12px}
.workspace-menu-items button{border:0;background:transparent;border-radius:7px;padding:10px 12px;line-height:1.3}
.workspace-menu-items button:hover,.workspace-menu-items button:focus-visible{background:var(--bg)}
.workspace-menu-items #import-game{border-top:1px solid var(--line);border-radius:0 0 7px 7px;margin-top:4px;padding-top:13px}



/* Playback reads from navigation to replay, then notation and consequences. */
.history-buttons{align-items:center}
.history-buttons button{display:inline-flex;align-items:center;justify-content:center}
body .history-buttons button svg{display:block;flex:none;width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.history-buttons #replay{margin-left:7px}
#move-insights{flex:1;min-width:0;max-height:3em;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:14px;line-height:1.45;color:var(--muted);padding:0 12px;border-left:1px solid var(--line);margin-left:8px}
#move-insights[hidden],body.online-game #move-insights{display:none}
.move-context>#last-move{flex:0 1 auto}
.move-context>#change-panel{flex:none}
@media(max-width:1100px){#move-insights{display:none}}
[data-screen=mobile] #move-insights{display:none}
[data-screen=mobile] .history-buttons #replay{display:none}
[data-screen=mobile] .history-buttons #rewind-start{width:32px}

/* Overlay palette expands left from its place in the tool group. */
.overlay-anchor{position:relative;flex:none;display:flex;align-items:center}
.overlay-anchor>.control-picker{margin:0;flex:none}
.overlay-anchor>.overlay-strip{position:absolute;right:calc(100% + 6px);left:auto;top:50%;transform:translateY(-50%);z-index:1400;width:max-content;max-width:calc(100vw - 24px);margin:0;padding:5px;box-shadow:var(--shadow);background:var(--panel);border:1px solid var(--line);border-radius:12px}
.overlay-anchor>.overlay-strip .overlay-options{justify-content:flex-start}
@media(max-width:900px){.overlay-anchor>.overlay-strip{position:fixed;top:var(--overlay-top);right:8px;left:auto;transform:none;max-width:calc(100vw - 16px)}}

/* Follow the same active state as the player label, including empty trays. */
.bank-side:has(.player-card.active){border-color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 50%,transparent),0 0 12px color-mix(in srgb,var(--accent) 12%,transparent)}
.bank-side:has(.player-card.active) .player-card.active{box-shadow:none}

/* One camera pad replaces the scattered menu controls. */
.board-footer>.view-menu{display:none!important}
#camera-joystick{position:relative;flex:none;margin-left:auto;width:48px;height:48px;min-height:48px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel);color:var(--accent);touch-action:none;user-select:none;cursor:grab;z-index:1100}
#camera-joystick svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
#camera-joystick .camera-nub{fill:currentColor;transform:translate(var(--stick-x,0px),var(--stick-y,0px))}
.camera-guide{opacity:0;transition:opacity .15s}
#camera-joystick.steering{cursor:grabbing;border-color:var(--accent);box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 12%,transparent)}
#camera-joystick.steering .camera-guide{opacity:.7}
.camera-hint{position:absolute;bottom:calc(100% + 14px);right:0;white-space:nowrap;padding:7px 10px;border-radius:8px;background:var(--panel);color:var(--text);font-size:13px;pointer-events:none;opacity:0}
#camera-joystick.steering .camera-hint,#camera-joystick:focus-visible .camera-hint{opacity:1}

.camera-pad{display:flex;align-items:center;gap:3px;flex:none;margin-left:auto}
.camera-pad #camera-joystick{margin-left:0}
.camera-north{min-width:38px;min-height:44px;padding:4px;font-size:14px;color:var(--muted);border:1px solid var(--line);border-radius:9px;background:var(--panel)}
.idea-move .move-diagram,.idea-choice .move-diagram{width:86px;height:80px;flex:0 0 86px}
[data-screen=mobile] .idea-move .move-diagram{width:72px;height:68px;flex-basis:72px}

/* Game pieces stay beneath interface surfaces, even outside the board viewport. */
.board-wrap{z-index:0;isolation:isolate}
#banks.reserve-dock{position:relative;z-index:20}
.panel-rail{position:relative;z-index:20}
.board-toolbar{z-index:30}
body[data-screen=desktop][data-reserves=bottom].drawer-left-open{--left-drawer:270px}
body[data-screen=desktop][data-reserves=bottom] .panel-rail-left .analysis-panel #ai-panel{max-height:none;height:auto;overflow:visible}
#change-panel>summary svg{display:block;width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
#change-panel>summary{display:flex;align-items:center;justify-content:center}
#move-insights{cursor:default}

#move-insights{display:flex;align-items:center;gap:12px;max-height:none;-webkit-line-clamp:unset}
#move-insights[hidden]{display:none}
#move-insights .move-insight{flex:0 1 auto;min-width:0;min-height:40px;padding:4px 0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:0;background:transparent;color:var(--muted);font-size:14px;cursor:pointer}
#move-insights .move-insight:hover,#move-insights .move-insight:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.move-context:has(#change-panel[open]) #move-insights{visibility:hidden}
@media(max-width:1100px){#move-insights{display:none}}
[data-screen=mobile] #move-insights,body.online-game #move-insights{display:none}

/* Panels size to their information; the play surface owns the remaining room. */
body[data-screen=desktop] .panel-rail-right .drawer-content:has(>#strategy-panel:not([hidden])):has(>#graph-panel:not([hidden])){display:flex;height:auto;overflow:auto}
body[data-screen=desktop] .panel-rail .drawer-content>#strategy-panel{height:410px;max-height:410px;flex:none}
body[data-screen=desktop] .panel-rail .drawer-content>#graph-panel{height:auto;max-height:410px;flex:none}
body[data-screen=desktop] .board-footer{width:min(100%,1100px);align-self:center;flex-wrap:nowrap}
body[data-screen=desktop] #banks.reserve-dock{width:min(100%,1000px)}
body[data-screen=desktop][data-reserves=left] .panel-rail-left .drawer-content{gap:8px}
body[data-screen=desktop][data-reserves=left] .panel-rail-left #banks{order:-1;width:100%}
body[data-screen=desktop][data-reserves=left] .drawer-content:has(.analysis-panel:not([hidden])) .reserve-dock .tray>svg{height:150px;max-height:150px}
body[data-screen=desktop][data-reserves=left] .analysis-panel .idea-move svg{width:64px;height:60px}
body[data-screen=desktop][data-reserves=left] .analysis-panel :is(.idea-label,.idea-reply,.explore-hint){font-size:13px}
@media(min-width:1001px) and (max-width:1399px){body[data-screen=desktop].drawer-left-open{--left-drawer:280px}}
.bank-side:has(.player-card.active){border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 0 18px color-mix(in srgb,var(--accent) 24%,transparent)}
.explore-actions{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.explore-deep{font-size:13px;padding:6px 10px;border:1px solid var(--line);background:var(--panel);color:var(--accent);border-radius:8px}
[data-screen=mobile] .camera-pad{position:absolute;right:8px;bottom:calc(100% + 68px);z-index:1100}
[data-screen=mobile] .camera-pad #camera-joystick{width:48px;height:48px}

/* A single sizing rule for the six overlay controls. */
.overlay-anchor>.overlay-strip{padding:6px;width:max-content;border-radius:12px}
.overlay-anchor>.overlay-strip .overlay-options{display:grid;grid-template-columns:repeat(6,44px);gap:4px;width:max-content;min-width:0;max-width:none;padding:0;margin:0;overflow:visible;border:0;border-radius:0}
.overlay-anchor>.overlay-strip .overlay-chip,body[data-screen=mobile] .overlay-anchor>.overlay-strip .overlay-chip{box-sizing:border-box;width:44px;height:44px;min-width:0;min-height:44px!important;margin:0;padding:7px!important;gap:0;border-radius:8px;overflow:visible}
.overlay-anchor>.overlay-strip .overlay-chip:has(input:focus-visible){outline-offset:0}
@media(max-width:310px){.overlay-anchor>.overlay-strip .overlay-options{grid-template-columns:repeat(3,44px)}}

/* Seven aligned controls share the width of the information dock. */
.board-tools{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;width:var(--drawer-width);flex:none;margin-left:auto;align-items:center}
.board-tools>.panel-controls{display:contents}
.board-tools>.overlay-anchor{width:100%;min-width:0}
.board-tools>.overlay-anchor>.control-picker{width:100%;min-width:0}
.board-tools>button,.board-tools>.panel-controls>button,.board-tools .control-picker>summary{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;min-width:0;height:44px;min-height:44px;margin:0;padding:8px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--muted)}
.board-tools .control-picker>summary::-webkit-details-marker{display:none}
.board-tools>button[aria-pressed=true],.board-tools>.panel-controls>button[aria-pressed=true],.board-tools .control-picker[open]>summary{background:color-mix(in srgb,var(--accent) 22%,var(--panel));color:var(--ink);border-color:var(--accent);box-shadow:inset 0 -3px var(--accent)}
.board-tools>button:hover,.board-tools>.panel-controls>button:hover,.board-tools .control-picker>summary:hover{border-color:var(--accent);color:var(--ink)}
[data-screen=mobile] .board-tools{display:flex;width:auto;gap:4px}
[data-screen=mobile] .board-tools>.panel-controls{display:none}
[data-screen=mobile] .board-tools>button,[data-screen=mobile] .board-tools>.overlay-anchor{width:42px;flex:none}

.camera-launcher{display:contents}
.camera-toggle,.camera-close,.camera-mobile-help{display:none}
#game-end #end-close{position:absolute;right:8px;top:8px;width:36px;min-height:36px;padding:0;font-size:24px;line-height:1;background:transparent;border:0;color:var(--muted)}
#game-end{padding-top:32px}
[data-screen=mobile] .camera-launcher{display:block;position:relative;flex:none;margin-left:auto}
[data-screen=mobile] .camera-toggle{display:flex;align-items:center;justify-content:center;width:40px;height:40px;min-height:40px;padding:8px;background:var(--panel);border:1px solid var(--line);color:var(--accent);border-radius:9px}
.camera-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.6}
[data-screen=mobile] .camera-launcher .camera-pad{display:none;position:fixed;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:250px;max-width:calc(100vw - 24px);height:190px;margin:0;padding:44px 35px 48px;background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);align-items:center;justify-content:center;gap:18px;z-index:1500}
[data-screen=mobile] .camera-open .camera-pad{display:flex}
[data-screen=mobile] .camera-close{display:block;position:absolute;right:6px;top:6px;width:36px;min-height:36px;padding:0;background:transparent;border:0;font-size:24px}
[data-screen=mobile] .camera-mobile-help{display:block;position:absolute;bottom:12px;left:14px;right:14px;text-align:center;font-size:13px;color:var(--muted)}
[data-screen=mobile] .camera-hint{display:none}

/* Compact camera strip stays near its launcher, clear of reserve trays. */
[data-screen=mobile] .camera-launcher .camera-pad{left:auto;right:8px;top:auto;bottom:var(--camera-bottom,220px);transform:none;width:auto;height:60px;max-width:calc(100vw - 16px);padding:5px;gap:4px;border-radius:12px;box-shadow:0 4px 14px #0003}
[data-screen=mobile] .camera-mobile-help{display:none}
[data-screen=mobile] .camera-close{position:static;order:3;width:36px;height:44px;min-height:44px;flex:none;font-size:22px}
[data-screen=mobile] .camera-pad .camera-north{width:40px;height:48px;padding:4px}
[data-screen=mobile] .camera-pad #camera-joystick{width:48px;height:48px;flex:none}

.beta-publisher{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:14px 0}.beta-buy{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:8px 14px;border:1px solid var(--line);border-radius:10px;color:var(--ink);text-decoration:none;font-size:14px}.beta-buy:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,var(--panel))}

/* Information stays below the live board and owns a single scroll surface. */
body[data-screen=mobile]:not(.normal-online) .board-section{display:flex;flex:1 1 0;min-height:0}
body[data-screen=mobile]:not(.normal-online) .panel-rail{flex:0 1 32%;min-height:0;max-height:30dvh;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
body[data-screen=mobile]:not(.normal-online) .panel-rail .drawer-content{height:auto;max-height:none;overflow:visible}
body[data-screen=mobile]:not(.normal-online) #strategy-panel.game-widget{height:auto;max-height:none;overflow:visible;min-height:0}
body[data-screen=mobile]:not(.normal-online) #strategy-panel .position-panel{height:auto;overflow:visible}
body[data-screen=mobile]:not(.normal-online) #strategy-panel :is(.position-content,.position-help){flex:none;overflow:visible;max-height:none}
body[data-screen=mobile]:not(.normal-online) #graph-panel.game-widget{height:auto;max-height:none;overflow:visible}
body[data-screen=mobile] .panel-rail:not(.drawer-open){display:none}
body[data-screen=mobile] .idea-picker{gap:6px}
body[data-screen=mobile] .idea-choice{padding:8px;gap:4px}
body[data-screen=mobile] .idea-move .move-diagram{width:48px;height:44px;flex-basis:48px}
body[data-screen=mobile] .explore-footer{padding-top:6px}
body[data-screen=mobile] .explore-hint{min-height:0;margin:0}
@media(max-height:560px) and (min-width:600px){
 body[data-screen=mobile]:not(.normal-online) .panel-rail{max-height:none;height:100%;min-width:0}
}

/* A compact Edge reading keeps the whole chart beside the selected turn. */
body[data-screen=mobile] #graph-panel>.stat-heading{position:sticky;top:-5px;z-index:2;min-height:36px;background:var(--panel);padding-bottom:4px}
body[data-screen=mobile] #graph-panel .stat-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:center;column-gap:8px;row-gap:4px;padding:0}
body[data-screen=mobile] #graph-panel #edge-graph{grid-column:1;grid-row:1;width:100%;height:92px!important;overflow:hidden}
body[data-screen=mobile] #edge-review{display:contents}
body[data-screen=mobile] #edge-review .edge-reading{grid-column:2;grid-row:1;min-width:0;min-height:0;gap:4px;font-size:14px;line-height:1.35}
body[data-screen=mobile] #edge-review .edge-reading span{font-size:12px;white-space:normal;overflow-wrap:anywhere}
body[data-screen=mobile] #edge-review input{grid-column:1/-1;grid-row:2;min-width:0;min-height:32px}
body[data-screen=mobile] #edge-review .edge-review-actions{grid-column:1/-1;grid-row:3;gap:6px}
body[data-screen=mobile] #edge-review .edge-review-actions button{min-height:40px;font-size:13px;border-radius:8px}
body[data-screen=mobile] #graph-panel .preview-readout{display:none}
body[data-screen=mobile] #graph-panel.show-help>.stat-body{display:none}

/* Stable control sizes and restrained state feedback on mouse and touch. */
body .board-tools{display:flex;width:auto;max-width:100%;gap:4px;flex-wrap:wrap;justify-content:flex-end}
body .board-tools>.panel-controls{display:contents}
body .board-tools>button,body .board-tools>.panel-controls>button,body .board-tools>.overlay-anchor{width:44px;min-width:44px;flex:0 0 44px}
body .board-tools .control-picker>summary{width:44px;min-width:44px;padding:9px}
body .board-tools svg{width:24px;height:24px;flex:none}
body .board-tools #room-toggle{width:auto;min-width:68px;flex:0 0 auto;font-size:14px}
body .board-tools>button,body .board-tools>.panel-controls>button,body .board-tools .control-picker>summary{box-shadow:none;-webkit-tap-highlight-color:transparent}
body .board-tools>button[aria-pressed=true],body .board-tools>.panel-controls>button[aria-pressed=true],body .board-tools .control-picker[open]>summary,body .board-tools #room-toggle[aria-expanded=true]{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel));box-shadow:none}
body .board-tools :is(button,summary):focus:not(:focus-visible){outline:none}
@media(hover:none){body .board-tools>button:not([aria-pressed=true]),body .board-tools>.panel-controls>button:not([aria-pressed=true]),body .board-tools .control-picker:not([open])>summary{border-color:var(--line);color:var(--muted)}}
body.normal-online .game-panel{display:none!important}
body.normal-online[data-screen=desktop] .playground{grid-template-columns:var(--left-drawer) minmax(0,1fr) 0px}
body.normal-online[data-screen=desktop] .board-section{grid-column:2}
#room-dialog{max-height:calc(100dvh - 32px);overflow:auto;border:1px solid var(--line);border-radius:16px;background:var(--panel);color:var(--ink)}
#room-dialog::backdrop{background:#0006}
#room-dialog .room-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
#room-dialog .room-actions button{min-height:44px;white-space:normal}
#room-leave{grid-column:1/-1;color:var(--selected);border:1px solid var(--line)}
#room-dialog .room-chat{margin-top:12px}#room-dialog #chat-messages{max-height:24dvh;min-height:60px}
.lobby-game-row{display:flex;align-items:center;gap:8px}.lobby-game-row .lobby-game{flex:1;min-width:0}.lobby-leave{flex:none;padding:8px 10px;min-height:44px;border:1px solid var(--line);font-size:14px;color:var(--selected)}
body .board-toolbar{flex-wrap:wrap;row-gap:6px}body .board-toolbar .turn{min-width:0;flex:1 1 140px}
body[data-screen=mobile] .board-tools>.panel-controls{display:none}
body[data-screen=mobile].normal-online .board-tools>.panel-controls{display:contents}
@media(max-width:600px){.lobby-game-row{flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:8px}.lobby-game-row .lobby-game{flex-basis:100%;margin-bottom:0}.lobby-leave{margin-left:auto}}

/* The transport spans the shell; mobile sheets size to their content. */
body[data-screen=desktop] .playground{grid-template-rows:auto minmax(0,1fr) auto}
body[data-screen=desktop] .playground>.board-footer{grid-column:1/-1;grid-row:3;width:100%;min-width:0;justify-self:stretch;margin:0}
body .board-tools #room-toggle{width:44px;min-width:44px;flex:0 0 44px;padding:9px}
body[data-screen=mobile].normal-online .panel-controls .drawer-tab>span{display:flex}
body .board-tools .drawer-tab>small{display:none}
body .overlay-strip .overlay-symbol svg.pin-icon{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
body[data-screen=mobile]:not(.normal-online) .panel-rail{flex:0 1 auto;height:auto;max-height:36dvh;padding:0;margin:0;border-radius:12px 12px 0 0;background:var(--panel)}
body[data-screen=mobile] .panel-rail .drawer-content{margin:0;padding:0}
body[data-screen=mobile] .panel-rail .game-widget{margin:0;border-radius:12px 12px 0 0}
body[data-screen=mobile] #banks.reserve-dock{margin-top:0;width:100%;max-width:none}
body[data-screen=mobile] #strategy-panel .position-heading{min-height:34px;padding:0 0 6px}
body[data-screen=mobile] #strategy-panel .visual-metrics>button{min-height:56px;padding:6px 4px!important}
body[data-screen=mobile] #strategy-panel .race-pair{margin-top:2px;font-size:18px}
body[data-screen=mobile] #strategy-panel .balance-track{margin-top:6px}
body[data-screen=mobile] #strategy-panel .visual-metrics>button:last-child{border-bottom:0}
body[data-screen=mobile].normal-online #strategy-panel.game-widget{height:auto;min-height:0;margin:0;order:20;max-height:36dvh;border-radius:12px 12px 0 0}
body[data-screen=mobile].normal-online #strategy-panel .position-panel{height:auto}
body[data-screen=mobile].normal-online #strategy-panel .position-content{overflow:visible}
body .controller-dialog,body .action-dialog{width:min(380px,calc(100vw - 24px));height:fit-content;max-height:calc(100dvh - 32px);padding:18px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:var(--ink)}
.controller-dialog::backdrop,.action-dialog::backdrop{background:#0006}
body .controller-dialog h2,.action-dialog h2{font-size:18px;margin:0 0 12px}
body .controller-options{grid-template-columns:1fr 1fr;gap:8px}
body .controller-options button{position:relative;min-height:64px;padding:10px;text-align:left}
.controller-options button strong,.controller-options button span{display:block}
.controller-options button strong{font-size:14px}.controller-options button span{font-size:12px;color:var(--muted)}
body .controller-options button[aria-pressed=true]:after{position:absolute;right:8px;top:8px}
.action-dialog p{font-size:14px;color:var(--muted);margin:0 0 18px}
.action-dialog form{display:flex;gap:8px;justify-content:flex-end}.action-dialog button{min-height:44px;padding:8px 12px;border:1px solid var(--line)}.danger-action{background:var(--selected);color:var(--panel)}
@media(max-height:560px) and (min-width:600px){body[data-screen=mobile]:not(.normal-online) .panel-rail{max-height:36dvh;height:auto}}

/* Quiet turn context beside the transport; reserves indicate the active player. */
.board-toolbar .turn.routine-turn{visibility:hidden}
.board-toolbar #turn-dot{display:none}
.move-history-context{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;min-width:0;flex:0 1 auto}
.move-history-context #turn-number{display:block;font-size:10px;line-height:1.2;color:var(--muted);font-variant-numeric:tabular-nums;padding:0 6px;white-space:nowrap}
body .move-history-context #last-move{min-height:22px;max-width:100%;padding:0 6px;line-height:1.3}

body #game-review{width:min(430px,calc(100vw - 24px));padding:18px;max-height:70dvh}#game-review h2{font-size:20px}.review-result{font-size:14px;color:var(--muted);margin:10px 0 14px}.review-help{position:absolute;right:60px;top:24px}.review-help summary{cursor:pointer}.review-help p{position:fixed;max-width:300px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;font-size:14px;right:24px;z-index:1}.review-moments{gap:6px}#game-review .review-moment{display:grid;grid-template-columns:32px minmax(0,1fr) 20px;align-items:center;gap:10px;width:100%;text-align:left;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--bg)}#game-review .review-moment:hover{border-color:var(--accent)}#game-review .review-moment span{margin:0;color:inherit}.review-moment strong{font-size:15px}.review-moment small{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:4px}.review-ply{font-variant-numeric:tabular-nums;font-size:18px!important;color:var(--accent)!important}

/* Keep the game picker flexible and its actions compact. */
.workspace-bar #add-tab,.workspace-bar .workspace-menu{flex-shrink:0}
#settings-more .beta-buy{display:flex;flex-direction:column;gap:5px;margin:16px 0 0;padding:14px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink)}#settings-more .beta-buy span{font-size:13px;color:var(--muted)}
.overlay-symbol>svg{overflow:visible}.overlay-symbol>.fixed-bug-icon path{stroke:none}

/* Phone pieces: use the reserve width and identify sides without letters. */
body[data-screen=mobile] .tray>svg{height:60px}
body[data-screen=mobile] .bank-side:not(.empty-reserve){grid-template-columns:34px minmax(0,1fr)}
body[data-screen=mobile] .bank-side:not(.empty-reserve) .player-card{padding:0 2px;justify-content:center}
body[data-screen=mobile] .bank-side:not(.empty-reserve) .reserve-controller{width:30px;min-width:0;display:flex;align-items:center;justify-content:center}
body[data-screen=mobile] .bank-side:not(.empty-reserve) .reserve-controller:after{content:"";display:block;width:16px;height:16px;border-radius:50%;border:1px solid #899398;box-shadow:0 1px 2px #0003}
body[data-screen=mobile] .black-player .reserve-controller:after{background:#101619}
body[data-screen=mobile] .white-player .reserve-controller:after{background:#f4f1df}
body[data-screen=mobile] .tray{padding:0 3px}

/* Controller identity stays legible on each side's existing colour panel. */
body[data-screen=mobile] .bank-side:not(.empty-reserve) .reserve-controller:after{width:22px;height:24px;border:0;border-radius:0;box-shadow:none;background:currentColor;mask:center/contain no-repeat var(--controller-icon);-webkit-mask:center/contain no-repeat var(--controller-icon)}
.reserve-controller[data-controller=human]{--controller-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3Cpath d='M4 22v-3a8 8 0 0 1 16 0v3'/%3E%3C/g%3E%3C/svg%3E")}
.reserve-controller[data-controller=bot]{--controller-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7' width='16' height='14' rx='3'/%3E%3Cpath d='M12 7V3M2 12v5m20-5v5M8 17h8'/%3E%3C/g%3E%3Ccircle cx='8' cy='12' r='1.4'/%3E%3Ccircle cx='16' cy='12' r='1.4'/%3E%3C/svg%3E")}
html{background:var(--bg)}
body[data-screen=mobile]{padding-bottom:max(6px,env(safe-area-inset-bottom))}
body[data-screen=mobile] .board-footer{width:100%;margin:3px 0 0;padding:4px;gap:4px;border:1px solid var(--line);border-radius:12px;background:var(--panel);align-items:center}
body[data-screen=mobile] .board-footer .history-buttons{gap:2px}
body[data-screen=mobile] .board-footer .history-buttons button{width:clamp(28px,8vw,36px);min-height:40px}
.board-footer>#change-panel{flex:none;margin-left:auto}
.board-footer>.camera-launcher{margin-left:0}
body[data-screen=mobile] .board-footer>#change-panel>summary{width:34px;min-width:34px;min-height:40px}
body[data-screen=mobile] .board-footer #change-list{left:auto;right:4px}

/* Game switcher: separate selection and close targets, aligned with the toolbar. */
.game-picker-row{display:flex;align-items:center;min-width:0;border-radius:8px}
.game-picker-row.active{background:color-mix(in srgb,var(--accent) 16%,transparent)}
.game-picker-row .game-picker-select{flex:1;min-width:0;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:transparent}
.game-picker-row .game-picker-close{display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;padding:0;text-align:center;font-size:21px;line-height:1;background:transparent;color:var(--muted)}
.game-picker-row .game-picker-close:hover:not(:disabled){color:var(--ink);background:color-mix(in srgb,var(--accent) 12%,transparent)}
body[data-screen=mobile] .workspace-bar{gap:6px;padding:6px 8px;align-items:center}
body[data-screen=mobile] #mobile-game-select{border-radius:10px}
body[data-screen=mobile] #mobile-game-select>summary{height:42px;min-height:42px;line-height:42px;padding:0 10px}
body[data-screen=mobile] #mobile-game-select>summary::-webkit-details-marker{display:none}
body[data-screen=mobile] .workspace-bar #add-tab{width:42px;min-width:42px;height:44px;min-height:44px;padding:0;display:flex;align-items:center;justify-content:center}
body[data-screen=mobile] .workspace-bar .workspace-menu>summary{box-sizing:border-box;width:44px;min-width:44px;height:44px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:10px}

body[data-screen=desktop]:not([data-reserves=left]) #banks.reserve-dock{width:min(100%,1120px)}
body[data-screen=desktop]:not([data-reserves=left]) .tray>svg{height:70px}

body[data-screen=mobile] .bank-side:not(.empty-reserve) .reserve-controller[data-you=true]:after{content:'You\A' attr(data-side);white-space:pre;text-align:center;font-size:10px;font-weight:700;line-height:1.4;width:30px;height:auto;background:none;mask:none;-webkit-mask:none}