/* Update belongs to the left control surface, never on top of the board tools. */
html body.compact-controls[data-screen] .desktop-update-dock{display:none}
html body.compact-controls[data-screen] .desktop-update-dock:has(#app-update:not([hidden])){display:flex;position:relative;inset:auto;order:4;align-items:center;justify-content:flex-start;width:100%;min-width:0;box-sizing:border-box;margin-top:4px;padding:5px 2px 1px;border-top:1px solid var(--line);z-index:150}
html body.compact-controls[data-screen] .desktop-update-dock #app-update{position:relative;inset:auto;margin:0;max-width:100%}

/* Landscape follows the desktop column: actions, playback, experiment, pieces. */
html body.compact-controls[data-screen=mobile][data-landscape=true]>.playground{grid-template-rows:auto minmax(0,1fr)}
html body.compact-controls[data-screen=mobile][data-landscape=true]>.playground>.board-footer{grid-column:1;grid-row:1;align-self:start;margin:5px;padding:4px;border-radius:12px;position:relative;z-index:130}
html body.compact-controls[data-screen=mobile][data-landscape=true]>.playground>.workspace-bar{display:none!important}
html body.compact-controls[data-screen=mobile][data-landscape=true] .footer-actions{display:grid;grid-template-columns:44px minmax(0,1fr);grid-auto-flow:row;gap:4px 2px}
html body.compact-controls[data-screen=mobile][data-landscape=true] .footer-panels{display:grid;grid-column:2;grid-row:1;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;gap:2px}
html body.compact-controls[data-screen=mobile][data-landscape=true] .footer-transport{grid-column:1/-1;grid-row:2}
html body.compact-controls[data-screen=mobile][data-landscape=true] #mobile-game-select,
html body.compact-controls[data-screen=mobile][data-landscape=true] #mobile-game-select[open]{display:block;position:static;grid-column:1;grid-row:1;width:44px;height:44px;min-width:44px;border:0;background:none;box-shadow:none;pointer-events:auto}
html body.compact-controls[data-screen=mobile][data-landscape=true] #mobile-game-select>summary{box-sizing:border-box;display:grid;place-items:center;width:44px;min-width:44px;height:44px;min-height:44px;gap:0;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:10px;overflow:hidden}
html body.compact-controls[data-screen=mobile][data-landscape=true] #mobile-game-select .game-switch-label{display:none}
html body.compact-controls[data-screen=mobile][data-landscape=true] #mobile-game-select .game-picker-list{position:absolute;inset:100% 0 auto;box-sizing:border-box;width:100%;height:auto;min-height:0;max-height:calc(100dvh - 170px);margin:0;padding:5px;background:var(--panel);border:1px solid var(--line);border-radius:0 0 12px 12px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;pointer-events:auto;z-index:2000}
html body.compact-controls[data-screen=mobile][data-landscape=true]>.playground>#banks.reserve-dock{grid-row:2;align-self:start;justify-content:flex-start;margin:0 5px 5px;padding:0;max-height:100%;overflow:auto;gap:6px}
html body.compact-controls[data-screen=mobile][data-landscape=true]>.playground>:is(.panel-rail.drawer-open,#strategy-panel.game-widget:not([hidden]),#history-popover:not([hidden])){grid-row:2;margin:0 5px 5px!important;border:1px solid var(--line);border-radius:12px}
html body.compact-controls[data-screen=mobile][data-landscape=true] :is(.panel-rail-left .panel-header,#history-popover .history-panel>summary,#board-chat-dialog>header,.room-dialog-heading){padding-left:8px}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks>.bank-side:not(.empty-reserve){display:flex;flex-direction:column;min-height:104px;flex:none}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks .bank-side:not(.empty-reserve) .player-card{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex:0 0 28px;height:28px;min-height:28px;padding:0 7px;gap:5px}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks .bank-side:not(.empty-reserve) .reserve-controller{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;width:auto;height:28px;min-height:28px;padding:0;flex:1;font-size:13px;line-height:1.3;gap:5px}
/* Online names already include the local player's You label. */
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks .reserve-controller[data-you=true]:before{display:none}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks .bank-side:not(.empty-reserve) .reserve-controller:not([data-player-avatar=true]):after{display:none}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks .bank-side:not(.empty-reserve) .reserve-controller[data-player-avatar=true]:after{width:20px;height:23px;flex:none}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks .bank-side:not(.empty-reserve) .side-disc{display:block;flex:none}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks .bank-side:not(.empty-reserve) .tray{flex:1;min-height:0;width:100%}

/* Exhausted reserves become compact player strips, never empty square cards. */
html body.compact-controls[data-screen] #banks.reserve-dock.empty-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-items:start;width:100%;max-width:var(--drawer-width,100%);box-sizing:border-box}
html body.compact-controls[data-screen=mobile][data-landscape=true]>.playground>#banks.reserve-dock.empty-players{width:auto;max-width:none;align-self:start}
html body.compact-controls[data-screen] #banks.empty-players>.bank-side.empty-reserve{aspect-ratio:auto;min-height:44px;height:auto;max-height:none;min-width:0;box-sizing:border-box;overflow:hidden}
html body.compact-controls[data-screen=desktop] #banks.empty-players .player-card{min-height:44px;padding:4px 8px}
html body.compact-controls[data-screen=desktop][data-reserves=bottom]>.playground>#banks.reserve-dock.empty-players{width:min(560px,100%);max-width:560px}
html body.compact-controls #mobile-game-select.move-witnessed>summary{animation:move-witnessed 900ms ease-out 2}
@keyframes move-witnessed{0%,100%{box-shadow:none}40%{box-shadow:inset 0 0 0 2px var(--accent),0 0 12px var(--accent)}}
@media(prefers-reduced-motion:reduce){html body.compact-controls #mobile-game-select.move-witnessed>summary{animation:none}}
html body.compact-controls[data-screen] #banks[hidden]{display:none!important}

/* Explore lines: Nokamute's move and graded alternatives, stacked. The ID
   scope overrides the older two-column idea cards on every layout. */
#analysis-result.xp{display:flex;flex-direction:column;gap:8px}
#analysis-result .xp-position{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink)}
#analysis-result .xp-position strong{font-weight:650;white-space:nowrap}
#analysis-result .xp-bar{flex:1;height:8px;border-radius:4px;background:linear-gradient(90deg,#f7f3e6 var(--white),#2b3037 var(--white));border:1px solid var(--line)}
#analysis-result .idea-picker.xp-list{display:flex!important;flex-direction:column;gap:6px;grid-template-columns:none}
#analysis-result .idea-choice.xp-choice{--tone:var(--line);display:grid!important;grid-template-columns:100px minmax(0,1fr);grid-template-rows:auto 1fr;align-items:center!important;gap:4px 10px!important;width:100%;min-height:108px!important;height:auto!important;padding:8px!important;border:1px solid var(--line);border-left:3px solid var(--tone);border-radius:10px;background:var(--panel);color:var(--ink);text-align:left;white-space:normal}
#analysis-result .xp-choice.tone-best{--tone:#2f9a6c}#analysis-result .xp-choice.tone-good{--tone:#5b8f7b}#analysis-result .xp-choice.tone-mistake{--tone:#e98a2e}#analysis-result .xp-choice.tone-blunder{--tone:#d9483b}
#analysis-result .idea-choice.xp-choice[aria-pressed=true]{box-shadow:inset 0 0 0 1px var(--selected);border-color:var(--selected);background:color-mix(in srgb,var(--selected) 7%,var(--panel))}
#analysis-result .xp-top{display:flex;grid-column:2;grid-row:1;align-items:center;gap:6px;min-width:0}
#analysis-result .xp-rank{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--tone);color:#fff;font-size:12px;font-weight:700;flex:none}
#analysis-result .xp-choice .idea-label{font-size:13px!important;line-height:1.3!important;color:var(--muted);white-space:normal}
#analysis-result .xp-choice .idea-move{display:contents!important}
#analysis-result .xp-choice .idea-move .move-diagram{grid-column:1;grid-row:1/3;width:100px!important;height:96px!important;max-width:none!important;margin:0!important}
#analysis-result .idea-description{grid-column:2;grid-row:2;display:flex;flex-direction:column;gap:5px;min-width:0}
#analysis-result .xp-choice .idea-move strong{font:600 15px/1.3 system-ui,sans-serif!important;white-space:normal;text-align:left!important}
#analysis-result .idea-notation{font:12px/1.3 ui-monospace,monospace;color:var(--muted)}
#analysis-result .xp-choice .idea-reply{font:13px/1.35 system-ui,sans-serif!important;color:var(--muted);text-align:left!important}
#analysis-result .xp-reason{grid-column:1/-1;font-size:13px;line-height:1.4;color:var(--muted)}
#analysis-result .explore-empty{margin:4px 0;font-size:14px;color:var(--muted)}

/* Pass 6 (W7): the compact landscape rail. While the rail shows the reserves
   it narrows to about a quarter of the screen; a panel (Game, Chat, Moves,
   Explore, Review, Tactics), an experiment or a replay's playback row widens
   it again, since those add rows above the reserves. The actions sit in two labelled
   rows beside Games, and each player's clock sits beside their name
   (reserve-clocks.mjs). Both reserves share the remaining height. */
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]){--landscape-rail:clamp(196px,27vw,264px)}
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) .footer-actions{grid-template-columns:40px minmax(0,1fr);align-items:stretch;gap:3px}
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) #mobile-game-select{width:40px;min-width:40px;height:auto;align-self:stretch}
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) #mobile-game-select>summary{width:40px;min-width:40px;height:100%;min-height:44px;padding:8px}
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) .footer-panels{grid-auto-flow:row;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-columns:auto;gap:3px}
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) .board-footer .footer-actions .footer-panels :is(button,#replay-recent,#room-toggle,#board-chat-toggle,#history-toggle)[data-label]:not([hidden]){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:auto;min-width:0;max-width:none;height:42px;min-height:42px;padding:3px 2px}
html body.compact-controls[data-screen=mobile][data-landscape=true]:is([data-assist=light],[data-assist=guided]):not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) .footer-panels [data-label]::after{content:attr(data-label);display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:12px;line-height:1.1;font-weight:400;color:var(--ink);white-space:nowrap}
html body.compact-controls[data-screen=mobile][data-landscape=true]:is([data-assist=light],[data-assist=guided]):not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) .footer-panels [data-label]:is([aria-pressed=true],[aria-expanded=true])::after{color:var(--ink)}
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) .footer-panels svg{width:20px;height:20px}
/* The clock line empties once the clocks sit with the players. */
html body.compact-controls.clocks-in-reserves[data-screen=mobile][data-landscape=true] .footer-main:not(:has(.replay-clocks:not([hidden]))){display:none!important}
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true])>.playground>#banks.reserve-dock{align-self:stretch;gap:5px}
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) #banks>.bank-side:not(.empty-reserve){flex:1 1 0;height:auto;min-height:0;max-height:none}
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) #banks .bank-side:not(.empty-reserve) .player-card{flex:0 0 26px;height:26px;min-height:26px;padding:0 5px 0 6px;gap:4px}
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) #banks .bank-side:not(.empty-reserve) .reserve-controller{min-width:0;height:26px;min-height:26px;font-size:12px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* The card's own colour and the clock's ○/● already say which side it is, so the disc gives its room to the name. */
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]).clocks-in-reserves #banks .bank-side:not(.empty-reserve) .side-disc{display:none}
html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]) #banks .bank-side:not(.empty-reserve) .reserve-controller[data-player-avatar=true]:after{width:18px;height:20px}
/* On the smallest phones the name (with rating and You) needs the avatar's room too. */
@media(max-width:700px){html body.compact-controls[data-screen=mobile][data-landscape=true]:not(.drawer-left-open):not([data-history-open=true]):not([data-window-open],.game-window[open],[data-strategy-open],#strategy-panel:not([hidden])):not(.microscope-active):not([data-playback=true]).clocks-in-reserves #banks .bank-side:not(.empty-reserve) .reserve-controller[data-player-avatar=true]:after{display:none}}
/* A player's clock beside their name; the running clock is filled. */
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks .player-card>.footer-clock{flex:none;min-width:0;margin-left:auto;padding:0 5px;border-radius:6px;font-size:12.5px;line-height:20px;font-weight:700;color:inherit;opacity:.8;box-shadow:none;background:color-mix(in srgb,currentColor 10%,transparent)}
html body.compact-controls[data-screen=mobile][data-landscape=true] #banks .player-card>.footer-clock.ticking{opacity:1;background:#1f8a57;color:#fff}
html body:not(.has-match-clock) #banks .player-card>.footer-clock{display:none}

/* The phone header's Settings button keeps the 44 px target of its neighbours (pass 6 review). */
html body[data-screen=mobile] .header-tools>#settings{width:var(--touch,44px);min-width:var(--touch,44px)}