/* Appearance lives in navigation. Only pieces, players and history surround the board. */
html[data-embed=true][data-skin],html[data-embed=true][data-color-mode]{background:transparent}
body[data-embed=true][data-skin]{background:transparent;--board-max:min(1000px,max(280px,calc(var(--portal-viewport-height,820px) - 160px)))}
body[data-embed=true][data-skin=arena]{--bg:#181c24;--paper:#202630;--ink:#f1eee8;--muted:#adb7c4;--line:#343d49;--button-ink:#181c24}
body[data-embed=true] .quick-tools,body[data-embed=true] .topbar{display:none}
body[data-embed=true][data-skin=arena] .control-panel{background:var(--paper)}
body[data-embed=true][data-skin=arena] .mode-tabs{background:var(--bg)}
html[data-color-mode=day] body[data-embed=true][data-skin]{--bg:#f5f4f0;--paper:#fffefb;--ink:#252b34;--muted:#576371;--line:#d5d9de;--button-ink:#252b34}
html[data-color-mode=night] body[data-embed=true][data-skin]{--bg:#181c24;--paper:#202630;--ink:#f1eee8;--muted:#adb7c4;--line:#343d49;--button-ink:#181c24}
body:not([data-embed=true]) .topbar{display:none}
body:not([data-embed=true]) main{padding-top:20px}
body:not([data-embed=true]) .workspace>.board-column{max-width:min(1000px,max(280px,calc(100dvh - 170px)))}
body:not([data-embed=true]) .sidebar{padding:20px 18px 16px}
body:not([data-embed=true]) .sidebar nav{gap:3px}
body:not([data-embed=true]) .nav-item{min-height:44px;padding:10px 8px;font-size:16px;line-height:1.25}
body:not([data-embed=true]) .sidebar-bottom{display:block;min-width:0;padding-top:12px}
.sidebar-appearance-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;border-top:1px solid var(--line);padding-top:12px;margin:0}
.sidebar-appearance-controls>button{flex-direction:column;justify-content:center;gap:4px;min-height:60px;min-width:0;padding:6px 4px;font-size:15px;line-height:1.25}
.sidebar-appearance-controls button>span:not(.quick-swatch):not(.sound-icon){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sidebar-appearance-controls .quick-settings{margin:0;font-size:24px}
.sidebar-appearance-controls svg{flex-shrink:0}
body:not([data-embed=true]) .guest{margin-top:12px;padding-top:12px}
/* Focus retains its horizontal console, with every new section placed explicitly. */
body[data-embed=true][data-skin=dashboard]{--board-max:min(820px,max(280px,calc(var(--portal-viewport-height,820px) - 280px)))}
body[data-embed=true][data-skin=dashboard] .game-play-status{grid-column:1 / -1;grid-row:2}
body[data-embed=true][data-skin=dashboard] .game-utility-panel{grid-column:1 / 3;grid-row:3}
body[data-embed=true][data-skin=dashboard] #my-stats{grid-column:3;grid-row:3}
@media(max-width:920px){body:not([data-embed=true]) .sidebar-appearance-controls{grid-template-columns:minmax(0,1fr)}body:not([data-embed=true]) .sidebar-appearance-controls>button{min-height:44px;font-size:0;gap:0}body:not([data-embed=true]) .sidebar-appearance-controls .quick-settings{font-size:24px}body:not([data-embed=true]) .guest{display:none}}
@media(max-width:740px),(max-height:760px){
 body:not([data-embed=true]) .sidebar{position:relative;inset:auto;display:flex;flex-direction:column;width:100%;height:auto;padding:10px 14px;border-right:0;border-bottom:1px solid var(--line);gap:8px}
 body:not([data-embed=true]) .sidebar>.brand{display:none}
 body:not([data-embed=true]) .sidebar nav{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
 body:not([data-embed=true]) .sidebar .nav-item{display:flex;justify-content:center;min-height:44px;padding:6px 2px;font-size:0;gap:0}
 body:not([data-embed=true]) .sidebar .nav-item>span:first-child{font-size:23px;width:25px}
 body:not([data-embed=true]) .sidebar .nav-arrow{display:none}
 body:not([data-embed=true]) .sidebar-bottom{display:block;padding-top:0;margin:0}
 body:not([data-embed=true]) .sidebar-appearance-controls{grid-template-columns:repeat(4,minmax(0,1fr));padding-top:0;border:0;gap:5px}
 body:not([data-embed=true]) .sidebar-appearance-controls>button{min-height:44px;font-size:14px;gap:3px;padding:5px 3px}
 body:not([data-embed=true]) .sidebar-appearance-controls .quick-settings{font-size:24px}
 body:not([data-embed=true]) .guest{display:none}
 body:not([data-embed=true]) main{margin-left:0;padding:14px 14px 0;width:100%}
 body:not([data-embed=true]) .workspace>.board-column{max-width:none}
}
@media(max-width:1050px){body[data-embed=true][data-skin=dashboard] .control-panel{display:block}body[data-embed=true][data-skin=dashboard] .mode-tabs{flex-direction:row;border-right:0;border-bottom:1px solid var(--line)}body[data-embed=true][data-skin=dashboard] .mode-tabs button{flex:1;text-align:center}}