/* A viewport-sized table. Entering focus changes layout only, never board nodes. */
body[data-embed=true]:not([data-game-focus=true]) #play-view #game-focus-toggle{display:none}
.player-row .game-focus-toggle{display:inline-grid;place-items:center;flex:0 0 40px;width:40px;height:40px;min-width:40px;padding:8px;border:1px solid var(--line);border-radius:5px;background:var(--paper);color:var(--ink);line-height:1;cursor:pointer}
.player-row .game-focus-toggle:hover{background:var(--lilac)}
.player-row .game-focus-toggle svg{display:block;width:22px;height:22px;pointer-events:none}
.player-row .game-focus-toggle:focus-visible{outline:3px solid var(--lime);outline-offset:3px}
html[data-game-focus="true"]{overflow:hidden;overflow-anchor:none}
body[data-game-focus="true"]{margin:0;min-height:0;height:var(--game-focus-height,100dvh);overflow:hidden;background:var(--bg);--focus-width:var(--game-focus-width,100vw);--focus-height:var(--game-focus-height,100dvh);--focus-panel-width:clamp(280px,28vw,400px);--focus-gap:clamp(16px,2vw,28px);--focus-board-size:min(calc(var(--focus-width) - var(--focus-panel-width) - var(--focus-gap) - 32px),max(160px,calc(var(--focus-height) - 144px)))}
body[data-game-focus="true"]>.sidebar,
body[data-game-focus="true"] main>.topbar,
body[data-game-focus="true"] main>.intro,
body[data-game-focus="true"] main>footer,
body[data-game-focus="true"] #play-view>.feature-strip{display:none}
body[data-game-focus="true"] main{margin:0;width:100%;max-width:none;height:var(--focus-height);min-height:0;padding:8px 16px;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none}
body[data-game-focus="true"] #play-view{min-width:0;min-height:0;width:100%}
body[data-game-focus="true"] #play-view .workspace{display:grid;grid-template-columns:minmax(0,var(--focus-board-size)) minmax(0,var(--focus-panel-width));justify-content:center;align-items:start;align-content:center;gap:var(--focus-gap);width:100%;max-width:none;margin:0;min-width:0;min-height:calc(var(--focus-height) - 16px)}
body[data-game-focus="true"] #play-view .workspace>.board-column{grid-column:1;grid-row:1;justify-self:center;width:var(--focus-board-size);max-width:none;min-width:0}
body[data-game-focus="true"] #play-view .board-frame{width:100%;margin:0}
body[data-game-focus="true"] #play-view #board{width:var(--focus-board-size);height:var(--focus-board-size);aspect-ratio:1;box-shadow:none}
body[data-game-focus="true"] #play-view .player-row{min-height:48px;height:48px;padding:0;gap:8px;border:0;transform:none}
body[data-game-focus="true"] #play-view .player-row.bottom{height:48px;padding:0}
body[data-game-focus="true"] #play-view .player-row>div{min-width:0}
body[data-game-focus="true"] #play-view .player-row strong{font-size:18px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-game-focus="true"] #play-view .player-row small{margin-top:2px;font-size:13px;line-height:1.35;min-height:1.35em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-game-focus="true"] #play-view .player-row .avatar{width:34px;height:34px;flex:0 0 34px;font-size:21px}
body[data-game-focus="true"] #play-view .clock{font-size:clamp(26px,3vw,36px);line-height:1.1;min-width:90px;padding:3px 10px;transform:none;letter-spacing:-.5px}
body[data-game-focus="true"] #play-view #history-controls{display:flex;align-items:center;gap:5px;min-height:32px;height:32px;margin:0;padding:0;width:100%;min-width:0}
body[data-game-focus="true"] #play-view #history-controls>button{min-width:32px;min-height:32px;width:32px;height:32px;padding:3px;border-radius:4px;font-size:17px}
body[data-game-focus="true"] #play-view #history-controls>strong{flex:1;min-width:0;font-size:15px;line-height:1.3;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-game-focus="true"] #play-view #history-controls>#history-live{width:auto;padding-inline:8px}
body[data-game-focus="true"] #play-view .eval-bar{left:-12px;width:8px}
body[data-game-focus="true"] #play-view .workspace>.control-panel{display:flex;flex-direction:column;grid-column:2;grid-row:1;align-self:start;width:100%;max-width:none;max-height:calc(var(--focus-height) - 16px);min-width:0;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;border:1px solid var(--line);border-radius:6px;box-shadow:none}
body[data-game-focus="true"] #play-view .control-panel>*{flex-shrink:0;min-width:0;grid-column:auto;grid-row:auto}
body[data-game-focus="true"] #play-view .control-panel .mode-tabs{flex-direction:row;border-right:0;border-bottom:1px solid var(--line);padding:5px;gap:3px}
body[data-game-focus="true"] #play-view .control-panel .mode-tabs>button{flex:1;min-height:40px;padding:9px 3px;font-size:16px;text-align:center}
body[data-game-focus="true"] #play-view #bot-panel:not(.match-running){display:block}
body[data-game-focus="true"] #play-view .control-panel .panel-body{padding:12px 16px}
body[data-game-focus="true"] #play-view .control-panel .panel-body>.eyebrow,
body[data-game-focus="true"] #play-view .control-panel .bot-profile,
body[data-game-focus="true"] #play-view .control-panel .gentle-note,
body[data-game-focus="true"] #play-view #online-panel>h2,
body[data-game-focus="true"] #play-view #online-panel>.muted,
body[data-game-focus="true"] #play-view #my-stats{display:none}
body[data-game-focus="true"] #play-view .control-panel .field-label{margin:12px 0 7px;font-size:16px}
body[data-game-focus="true"] #play-view .control-panel .game-play-status{padding:9px 16px;font-size:16px;line-height:1.4}
body[data-game-focus="true"] #play-view .control-panel .game-utility-panel{padding:10px 16px}
body[data-game-focus="true"] #play-view .control-panel .notation{padding:12px 16px;border-left:0;border-top:1px solid var(--line);background:var(--paper)}
body[data-game-focus="true"] #play-view .control-panel .move-list{min-height:60px;max-height:clamp(100px,calc(var(--focus-height) - 390px),420px);margin-top:8px;font-size:16px}
body[data-game-focus="true"] #play-view .control-panel .move-pair{font-size:16px;line-height:1.4}
body[data-game-focus="true"] #play-view .control-panel .move-pair button{font-size:16px;padding:5px}
body[data-game-focus="true"] #play-view .control-panel #review-panel{padding:12px 16px}

/* Narrow windows use one table column, with game actions immediately below it. */
@media(max-width:780px){
 body[data-game-focus="true"]{--focus-panel-width:100%;--focus-gap:12px;--focus-board-size:min(calc(var(--focus-width) - 24px),max(160px,calc(var(--focus-height) - 154px)))}
 body[data-game-focus="true"] main{padding:8px 12px}
 body[data-game-focus="true"] #play-view .workspace{grid-template-columns:minmax(0,1fr);width:100%;gap:12px;align-content:start;min-height:0}
 body[data-game-focus="true"] #play-view .workspace>.control-panel{grid-column:1;grid-row:2;justify-self:center;width:min(100%,600px);max-height:calc(var(--focus-height) - 16px)}
 body[data-game-focus="true"] #play-view .player-row strong{font-size:16px}
 body[data-game-focus="true"] #play-view .player-row small{font-size:12px}
 body[data-game-focus="true"] #play-view .clock{font-size:27px;min-width:82px;padding-inline:7px}
 body[data-game-focus="true"] #play-view #history-controls{min-height:44px;height:44px;gap:4px}
 body[data-game-focus="true"] #play-view #history-controls>button{min-width:40px;min-height:40px;width:40px;height:40px}
 body[data-game-focus="true"] #play-view #history-controls>strong{font-size:14px}
 body[data-game-focus="true"] #play-view .control-panel .move-list{max-height:220px}
}
@media(max-height:480px) and (min-width:781px){
 body[data-game-focus="true"]{--focus-panel-width:280px;--focus-gap:16px}
 body[data-game-focus="true"] #play-view .player-row strong{font-size:15px}
 body[data-game-focus="true"] #play-view .player-row small{font-size:12px}
 body[data-game-focus="true"] #play-view .player-row .avatar{display:none}
 body[data-game-focus="true"] #play-view .clock{font-size:27px;min-width:82px;padding-inline:7px}
}
@media(max-width:350px){
 body[data-game-focus="true"] #play-view .player-row .avatar{display:none}
 body[data-game-focus="true"] #play-view .player-row{gap:5px}
 body[data-game-focus="true"] #play-view .clock{font-size:25px;min-width:75px}
}
