/* Large controls: shared navigation language, independent of player/engine colours. */
:root {
  --ui-accent: #e6a34c;
  --ui-accent-soft: var(--ui-control);
  --ui-accent-border: #72552e;
  --ui-panel: #222221;
  --ui-control: #2c2b28;
  --ui-hover: #353535;
  --ui-line: #3c3a35;
}
body.comfort-ui {
  --surface: var(--ui-panel);
  --soft: var(--ui-control);
  --hover: var(--ui-hover);
  --line: var(--ui-line);
  --text: #e9e7e1;
  --muted: #aaa8a1;
  font-size: max(11px, calc(15px * var(--ui-scale, 1)));
}
body.comfort-ui :is(button, input, select, textarea) {font-family: inherit;}
body.comfort-ui :is(button, a, summary, input, select, textarea):focus-visible {
  outline: calc(2px * var(--ui-scale, 1)) solid var(--ui-accent);
  outline-offset: calc(3px * var(--ui-scale, 1));
}
body.comfort-ui :is(.primary, .header-primary, .settings-flip) {
  color: #f5dfbd;
  background: var(--ui-accent-soft);
  border: 1px solid var(--ui-accent-border);
  border-bottom: calc(3px * var(--ui-scale, 1)) solid var(--ui-accent);
  border-radius: calc(4px * var(--ui-scale, 1));
  box-shadow: none;
  font-size: max(11px, calc(15px * var(--ui-scale, 1)));
  min-height: calc(46px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1)) calc(14px * var(--ui-scale, 1));
}
body.comfort-ui :is(.primary, .header-primary, .settings-flip):hover:not(:disabled) {
  background: var(--ui-hover);
  color: #fff1dc;
  box-shadow: none;
  transform: none;
}
body.comfort-ui .secondary {
  background: var(--ui-control);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: calc(4px * var(--ui-scale, 1));
  min-height: calc(42px * var(--ui-scale, 1));
  font-size: max(11px, calc(15px * var(--ui-scale, 1)));
  box-shadow: none;
}
body.comfort-ui .secondary:hover:not(:disabled) {background: var(--ui-hover); transform: none;}
body.comfort-ui :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
  background-color: #1c1c1b;
  color: var(--text);
  border-color: var(--line);
  border-radius: calc(4px * var(--ui-scale, 1));
}
body.comfort-ui input:is([type=checkbox], [type=radio], [type=range]) {accent-color: var(--ui-accent);}
body.comfort-ui .site-nav > :is(a, button) {font-size: max(11px, calc(15px * var(--ui-scale, 1)));}
body.comfort-ui .site-nav > :is(a, button).active {border-bottom-color: var(--ui-accent);}
body.comfort-ui dialog {
  background: var(--ui-panel);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: calc(6px * var(--ui-scale, 1));
  box-shadow: 0 calc(18px * var(--ui-scale, 1)) calc(70px * var(--ui-scale, 1)) #0008;
  font-size: max(11px, calc(15px * var(--ui-scale, 1)));
}
body.comfort-ui dialog::backdrop {background: #0009;}
body.comfort-ui dialog :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select) {min-height: calc(44px * var(--ui-scale, 1)); font-size: max(11px, calc(15px * var(--ui-scale, 1)));}
body.comfort-ui dialog :is(.close, .account-close, .rated-search-close) {width: calc(40px * var(--ui-scale, 1)); height: calc(40px * var(--ui-scale, 1));}
body.comfort-ui :is(.account-dialog, .rated-search-dialog) header {background: #1e1e1d;}
body.comfort-ui :is(.account-tabs, .casual-tabs, .mode-tabs) button {
  min-height: calc(44px * var(--ui-scale, 1));
  font-size: max(11px, calc(15px * var(--ui-scale, 1)));
  border-radius: 0;
  border: 0;
  border-bottom: calc(3px * var(--ui-scale, 1)) solid transparent;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
body.comfort-ui :is(.account-tabs, .casual-tabs, .mode-tabs) button:is([aria-pressed=true], [aria-selected=true], .active) {
  color: var(--text);
  background: #ffffff04;
  border-bottom-color: var(--ui-accent);
}
body.comfort-ui :is(.choice:has(input:checked), .casual-choice:has(input:checked), .casual-choice[aria-pressed=true]) {
  border-color: var(--ui-accent-border);
  background: var(--ui-accent-soft);
  box-shadow: inset 0 calc(-3px * var(--ui-scale, 1)) var(--ui-accent);
}
body.comfort-ui :is(#casual-lobby-dialog, #game-setup-dialog) {
  --casual-accent: var(--ui-accent);
  --casual-panel: var(--ui-panel);
  background: var(--ui-panel);
}
body.comfort-ui :is(.casual-heading, #casual-lobby-dialog footer, #game-setup-dialog footer) {background: #1e1e1d; border-color: var(--line);}
body.comfort-ui :is(.casual-switch, .casual-variants, .casual-variant-trigger) {background: var(--ui-control); border-radius: calc(4px * var(--ui-scale, 1)); border-color: var(--line); box-shadow: none;}
body.comfort-ui :is(.casual-switch, .casual-variants) input:checked + span {background: var(--ui-accent-soft); color: #f5dfbd; box-shadow: inset 0 calc(-3px * var(--ui-scale, 1)) var(--ui-accent);}
body.comfort-ui :is(.casual-point-options, .casual-clock-options) button {min-height: calc(34px * var(--ui-scale, 1)); font-size: max(11px, calc(14px * var(--ui-scale, 1))); border-radius: calc(4px * var(--ui-scale, 1)); background: var(--ui-control);}
body.comfort-ui :is(.casual-point-options, .casual-clock-options) button[aria-pressed=true] {color: var(--ui-accent); background: var(--ui-accent-soft); box-shadow: inset 0 calc(-2px * var(--ui-scale, 1)) var(--ui-accent);}
body.comfort-ui :is(#casual-lobby-dialog, #game-setup-dialog) footer > button,
body.comfort-ui :is(.account-submit, .account-finish, .account-notice-done, .account-verify-submit, .rated-search-resume) {
  background: var(--ui-accent-soft); color: #f5dfbd; min-height: calc(48px * var(--ui-scale, 1)); border: 1px solid var(--ui-accent-border); border-bottom: calc(3px * var(--ui-scale, 1)) solid var(--ui-accent); border-radius: calc(4px * var(--ui-scale, 1)); box-shadow: none; font-size: max(11px, calc(15px * var(--ui-scale, 1)));
}
body.comfort-ui :is(.account-auth-links button, .account-notice-resend, .account-resend) {color: var(--ui-accent); font-size: max(11px, calc(14px * var(--ui-scale, 1)));}
body.comfort-ui :is(.site-actions a:not(.header-primary), .tournament-link, .casual-entry .unrated-label) {color: var(--ui-accent);}
body.comfort-ui .casual-variant-menu > [aria-selected=true] {background: var(--ui-accent-soft);}
body.comfort-ui :is(.quick-tile, .casual-entry) {background: var(--ui-control); border-color: var(--line); box-shadow: none;}
body.comfort-ui :is(.quick-tile, .casual-entry):hover {background: var(--ui-hover); border-color: var(--ui-accent-border); box-shadow: inset 0 calc(-3px * var(--ui-scale, 1)) var(--ui-accent);}
body.comfort-ui .casual-section h2 {color: var(--text);}

/* One switch shape for automation, display and analysis preferences. */
body.comfort-ui .table-settings-drawer .settings-switch,
body.comfort-ui.classic-table .table-settings-drawer #play-preferences .settings-switch,
body.comfort-ui.analysis-table .pinned-settings .settings-display button.settings-switch {
  min-height: calc(44px * var(--ui-scale, 1));
  padding: calc(10px * var(--ui-scale, 1)) 0;
  gap: calc(12px * var(--ui-scale, 1));
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  font-size: 0 !important;
}
body.comfort-ui .table-settings-drawer .settings-switch::before {font-size: max(11px, calc(15px * var(--ui-scale, 1))); color: var(--text); line-height: 1.4;}
body.comfort-ui .table-settings-drawer .settings-switch::after {
  width: calc(38px * var(--ui-scale, 1));
  height: calc(22px * var(--ui-scale, 1));
  flex: none;
  border-radius: calc(20px * var(--ui-scale, 1));
  background: radial-gradient(circle at calc(11px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)), #bbb9b3 0 calc(7px * var(--ui-scale, 1)), transparent calc(8px * var(--ui-scale, 1))), #4b4944;
  box-shadow: none;
}
body.comfort-ui .table-settings-drawer .settings-switch:is([aria-checked=true], [aria-pressed=true])::after {
  background: radial-gradient(circle at calc(27px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)), #fff3dd 0 calc(7px * var(--ui-scale, 1)), transparent calc(8px * var(--ui-scale, 1))), #a36e2b;
}
body.comfort-ui .table-settings-drawer .settings-flip {min-height: calc(46px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)) calc(8px * var(--ui-scale, 1)); font-size: max(11px, calc(15px * var(--ui-scale, 1)));}
body.comfort-ui .table-settings-menu .settings-section > summary {font-size: max(11px, calc(15px * var(--ui-scale, 1))); color: var(--text);}
body.comfort-ui .table-settings-menu .settings-display > button:not(.settings-switch) {min-height: calc(42px * var(--ui-scale, 1)); font-size: max(11px, calc(15px * var(--ui-scale, 1)));}
body.comfort-ui .board-size-presets button,
body.comfort-ui .table-settings-drawer .board-size-presets button {
  min-height: calc(42px * var(--ui-scale, 1));
  font-size: max(11px, calc(15px * var(--ui-scale, 1)));
  color: var(--muted);
  background: var(--ui-control);
  border: 1px solid var(--line);
  border-radius: calc(4px * var(--ui-scale, 1));
}
body.comfort-ui .board-size-presets button[aria-pressed=true],
body.comfort-ui .table-settings-drawer .board-size-presets button[aria-pressed=true] {
  color: var(--ui-accent);
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent-border);
  box-shadow: inset 0 calc(-2px * var(--ui-scale, 1)) var(--ui-accent);
}
body.comfort-ui :is(.board-size-control, .settings-display) label {font-size: max(11px, calc(15px * var(--ui-scale, 1)));}
body.comfort-ui .history-toolbar > button[aria-expanded=true],
body.comfort-ui.classic-table .game-review-bar.history-toolbar > button[aria-expanded=true],
body.comfort-ui.analysis-table #pane-history .history-toolbar > button[aria-expanded=true] {
  background: var(--ui-accent-soft) !important;
  color: var(--ui-accent) !important;
  box-shadow: inset 0 calc(-3px * var(--ui-scale, 1)) var(--ui-accent);
}
body.comfort-ui.analysis-table #pane-history .history-toolbar > button,
body.comfort-ui.classic-table .game-review-bar.history-toolbar > button {height: calc(44px * var(--ui-scale, 1)); min-height: calc(44px * var(--ui-scale, 1));}

/* Navigation must reserve the full button height, including compact layouts. */
body.comfort-ui.analysis-table #pane-history .playback.history-toolbar {
  height: auto; min-height: 0; padding: 0;
}

/* The board and its clocks keep their existing geometry and colour semantics. */
body.comfort-ui.analysis-table .pinned-settings {padding: calc(10px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));}
body.comfort-ui.analysis-table :is(.mode-switch, .analysis-file-actions, .analysis-game-actions) button,
body.comfort-ui.classic-table .small-actions button {
  min-height: calc(42px * var(--ui-scale, 1));
  height: auto;
  padding: calc(8px * var(--ui-scale, 1)) calc(7px * var(--ui-scale, 1));
  font-size: max(11px, calc(15px * var(--ui-scale, 1)));
  line-height: 1.25;
  border: 1px solid var(--line);
  border-radius: calc(4px * var(--ui-scale, 1));
  background: var(--ui-control);
  color: var(--text);
  box-shadow: none;
}
body.comfort-ui.analysis-table :is(.mode-switch button[aria-pressed=true], #editor[aria-pressed=true]) {
  background: var(--ui-accent-soft);
  color: var(--ui-accent);
  border-color: var(--ui-accent-border);
  box-shadow: inset 0 calc(-3px * var(--ui-scale, 1)) var(--ui-accent);
}
body.comfort-ui.analysis-table .pinned-settings .analysis-play-console .turn-panel {
  grid-template-rows: calc(46px * var(--ui-scale, 1));
  height: calc(46px * var(--ui-scale, 1));
  min-height: calc(46px * var(--ui-scale, 1));
}
body.comfort-ui.analysis-table .pinned-settings .analysis-play-console .turn-panel > .primary {min-height: calc(46px * var(--ui-scale, 1)); font-size: max(11px, calc(15px * var(--ui-scale, 1)));}
body.comfort-ui.analysis-table .pinned-settings .analysis-play-console .cube-actions button {min-height: calc(42px * var(--ui-scale, 1)); font-size: max(11px, calc(14px * var(--ui-scale, 1)));}
body.comfort-ui.analysis-table .analysis-variant-switch button {
  min-height: calc(40px * var(--ui-scale, 1));
  padding: calc(8px * var(--ui-scale, 1));
  font-size: max(11px, calc(15px * var(--ui-scale, 1)));
  border: 0;
  border-bottom: calc(3px * var(--ui-scale, 1)) solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
}
body.comfort-ui.analysis-table .analysis-variant-switch button.active {
  color: var(--text);
  background: #ffffff04;
  border-bottom-color: var(--ui-accent);
}
body.comfort-ui.analysis-table #candidate-list .candidate-route,
body.comfort-ui.analysis-table #candidate-list .candidate-heading strong {font-size: max(11px, calc(15px * var(--ui-scale, 1)));}
body.comfort-ui.analysis-table #candidate-list .candidate.active {
  background: var(--ui-accent-soft);
  border-left-color: var(--ui-accent);
  box-shadow: inset calc(3px * var(--ui-scale, 1)) 0 var(--ui-accent);
}
body.comfort-ui.analysis-table #candidate-list .candidate-select:hover {background: #ffffff06;}
body.comfort-ui.analysis-table #timeline button:is(.active, [aria-current=true]),
body.comfort-ui.classic-table .game-history button:is(.active, [aria-current=true]) {
  background: var(--ui-accent-soft);
  box-shadow: inset 0 calc(-2px * var(--ui-scale, 1)) var(--ui-accent);
}
body.comfort-ui .history-moments:has(button.active) {background: #ffffff06;}
body.comfort-ui.analysis-table #timeline .history-moments button.active {background: var(--ui-accent-soft); color: #f5dfbd; box-shadow: inset 0 calc(-2px * var(--ui-scale, 1)) var(--ui-accent);}
body.comfort-ui.analysis-table #pane-position :is(button, select, input:not([type=checkbox]):not([type=radio])) {min-height: calc(40px * var(--ui-scale, 1)); font-size: max(11px, calc(15px * var(--ui-scale, 1)));}
body.comfort-ui.analysis-table #pane-position :is(.editor-brush button, .position-segments button)[aria-pressed=true] {
  background: var(--ui-accent-soft);
  border-color: var(--ui-accent-border);
  color: var(--ui-accent);
  box-shadow: inset 0 calc(-2px * var(--ui-scale, 1)) var(--ui-accent);
}
body.comfort-ui.analysis-table #pane-position #apply-context {background: var(--ui-accent-soft); color: var(--ui-accent); border-color: var(--ui-accent-border);}
body.comfort-ui.analysis-table #pane-position #finish-edit {background: var(--ui-accent-soft); color: #f5dfbd; border: 1px solid var(--ui-accent-border); border-bottom: calc(3px * var(--ui-scale, 1)) solid var(--ui-accent);}
body.comfort-ui.analysis-table #pane-position .editor-choices button[aria-pressed=true] {background: var(--ui-accent-soft); border-color: var(--ui-accent-border); box-shadow: inset 0 calc(-2px * var(--ui-scale, 1)) var(--ui-accent);}
body.comfort-ui.analysis-table #pane-position #editor-gesture-help {border-left-color: var(--ui-accent);}
body.comfort-ui.analysis-table #pane-position .editor-stepper {height: calc(42px * var(--ui-scale, 1));}
body.comfort-ui.analysis-table #pane-position #editor-cube-switch {width: calc(38px * var(--ui-scale, 1)); min-width: calc(38px * var(--ui-scale, 1)); height: calc(22px * var(--ui-scale, 1)); min-height: calc(22px * var(--ui-scale, 1));}
body.comfort-ui.analysis-table #pane-position #editor-cube-switch[aria-checked=true] {background: #a36e2b;}
body.comfort-ui.analysis-table #editor-cube-switch[aria-checked=true]::after {left: calc(21px * var(--ui-scale, 1));}
body.comfort-ui.classic-table #game-quick-controls #play-preferences .settings-switch {min-height: calc(44px * var(--ui-scale, 1)); gap: calc(12px * var(--ui-scale, 1)); padding: calc(10px * var(--ui-scale, 1)) 0;}
body.comfort-ui #game-quick-controls .settings-switch::before {font-size: max(11px, calc(15px * var(--ui-scale, 1))); color: var(--text);}
body.comfort-ui #game-quick-controls .settings-switch::after {width: calc(38px * var(--ui-scale, 1)); height: calc(22px * var(--ui-scale, 1)); background: radial-gradient(circle at calc(11px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)), #bbb9b3 0 calc(7px * var(--ui-scale, 1)), transparent calc(8px * var(--ui-scale, 1))), #4b4944;}
body.comfort-ui #game-quick-controls .settings-switch[aria-checked=true]::after {background: radial-gradient(circle at calc(27px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)), #fff3dd 0 calc(7px * var(--ui-scale, 1)), transparent calc(8px * var(--ui-scale, 1))), #a36e2b;}
body.comfort-ui.classic-table #game-quick-controls .board-size-presets button {min-height: calc(42px * var(--ui-scale, 1)); font-size: max(11px, calc(15px * var(--ui-scale, 1))); color: var(--muted); background: var(--ui-control); border-color: var(--line);}
body.comfort-ui.classic-table #game-quick-controls .board-size-presets button[aria-pressed=true] {color: var(--ui-accent); background: var(--ui-accent-soft); border-color: var(--ui-accent-border);}
body.comfort-ui.classic-table #main-actions button {min-height: calc(46px * var(--ui-scale, 1)); font-size: max(11px, calc(15px * var(--ui-scale, 1)));}
body.comfort-ui.classic-table .small-actions :is(#undo, #resign-match) {min-height: calc(42px * var(--ui-scale, 1)); font-size: max(11px, calc(15px * var(--ui-scale, 1)));}
body.comfort-ui.classic-table #game-quick-controls #expand-board {min-height: calc(42px * var(--ui-scale, 1)); font-size: max(11px, calc(15px * var(--ui-scale, 1))); background: var(--ui-control); box-shadow: none;}
body.comfort-ui.classic-table .history-moments button.active {background: var(--ui-accent-soft); color: #f5dfbd; box-shadow: inset 0 calc(-2px * var(--ui-scale, 1)) var(--ui-accent);}
body.comfort-ui .lobby-actions > :is(a, button) {background: var(--ui-control); border-color: var(--line); box-shadow: none; font-size: max(11px, calc(15px * var(--ui-scale, 1)));}
body.comfort-ui .lobby-actions > :is(a, button):hover {background: var(--ui-hover); border-color: var(--ui-accent-border); box-shadow: inset calc(3px * var(--ui-scale, 1)) 0 var(--ui-accent);}
body.comfort-ui :is(.account-trigger, .account-link, .unrated-label, .preview-footer button) {color: var(--ui-accent);}
body.comfort-ui.analysis-table .pinned-settings .settings-display > button:not(.settings-switch),
body.comfort-ui.analysis-table .pinned-settings :is(#editor, #share, #computer-toggle) {min-height: calc(42px * var(--ui-scale, 1)); font-size: max(11px, calc(15px * var(--ui-scale, 1))); background: var(--ui-control); border: 1px solid var(--line); box-shadow: none; color: var(--text);}
body.comfort-ui.analysis-table .pinned-settings #editor[aria-pressed=true] {background: var(--ui-accent-soft); color: var(--ui-accent); border-color: var(--ui-accent-border); box-shadow: inset 0 calc(-2px * var(--ui-scale, 1)) var(--ui-accent);}
body.comfort-ui .board-match-card {background: var(--ui-panel); border-color: var(--line); border-radius: calc(6px * var(--ui-scale, 1));}
body.comfort-ui .board-match-actions button {min-height: calc(48px * var(--ui-scale, 1)); font-size: max(11px, calc(15px * var(--ui-scale, 1)));}
body.comfort-ui .board-match-actions .primary {background: var(--ui-accent-soft); border-color: var(--ui-accent-border); border-bottom-color: var(--ui-accent); color: #f5dfbd;}

@media (min-width: 801px) {
  body.comfort-ui.analysis-table:not(.analysis-mobile) #candidate-list {--candidate-row-height: max(calc(40px * var(--ui-scale, 1)), calc(100cqh / 7));}
  body.comfort-ui.analysis-table:not(.analysis-mobile) #timeline .history-moments {grid-template-rows: calc(30px * var(--ui-scale, 1)) calc(24px * var(--ui-scale, 1));}
  body.comfort-ui.analysis-table:not(.analysis-mobile) #timeline .history-moments button {font-size: max(11px, calc(14px * var(--ui-scale, 1)));}
  body.comfort-ui.analysis-table:not(.analysis-mobile) .history-move-rating {font-size: max(11px, calc(13px * var(--ui-scale, 1)));}
}
/* A phone's short landscape viewport uses scrollable panels, never a larger board shell. */
body.comfort-ui.analysis-table.analysis-mobile-wide .analysis-variant-switch button {min-height: calc(34px * var(--ui-scale, 1)); font-size: max(11px, calc(13px * var(--ui-scale, 1))); padding: calc(5px * var(--ui-scale, 1));}
body.comfort-ui.analysis-mobile-wide #candidate-list :is(.candidate-route, .candidate-heading strong) {font-size: max(11px, calc(13px * var(--ui-scale, 1)));}
body.comfort-ui.analysis-mobile-wide #pane-position :is(button, select, input:not([type=checkbox]):not([type=radio])) {min-height: calc(38px * var(--ui-scale, 1)); font-size: max(11px, calc(14px * var(--ui-scale, 1)));}
body.comfort-ui.analysis-mobile-wide .board-match-actions button {font-size: max(11px, calc(14px * var(--ui-scale, 1)));}
body.comfort-ui.analysis-table.analysis-mobile-wide .study-panel > .analysis-play-console {height: auto; min-height: calc(100px * var(--ui-scale, 1)); flex: 0 0 auto;}
body.comfort-ui.analysis-table.analysis-mobile-wide .analysis-play-console .turn-panel {height: calc(40px * var(--ui-scale, 1)); min-height: calc(40px * var(--ui-scale, 1));}
body.comfort-ui.analysis-table.analysis-mobile-wide .analysis-play-console .turn-panel > .primary {min-height: calc(40px * var(--ui-scale, 1)); height: calc(40px * var(--ui-scale, 1)); padding: calc(6px * var(--ui-scale, 1)); font-size: max(11px, calc(13px * var(--ui-scale, 1)));}
body.comfort-ui.analysis-table.analysis-mobile-wide .analysis-game-actions button {min-height: calc(40px * var(--ui-scale, 1)); padding: calc(4px * var(--ui-scale, 1)) calc(2px * var(--ui-scale, 1)); font-size: max(11px, calc(12px * var(--ui-scale, 1))); line-height: max(14px, calc(14px * var(--ui-scale, 1)));}
body.comfort-ui.analysis-table.analysis-mobile-wide #pane-history .history-toolbar > button {height: calc(36px * var(--ui-scale, 1)); min-height: calc(36px * var(--ui-scale, 1));}
/* Keep the lobby's navigation geometry when entering a game or the analyser. */
@media (min-width: 851px) {
  body.comfort-ui:not(.mobile-table):not(.analysis-mobile-wide) > .site-header {
    position: sticky; top: 0; z-index: 50; flex: none;
    width: 100%; max-width: calc(1280px * var(--ui-scale, 1)); height: calc(64px * var(--ui-scale, 1)); min-height: calc(64px * var(--ui-scale, 1));
    margin: 0 auto; padding: 0 calc(24px * var(--ui-scale, 1)); gap: calc(28px * var(--ui-scale, 1)); flex-wrap: nowrap;
    background: transparent;
  }
  body.comfort-ui:not(.mobile-table):not(.analysis-mobile-wide) .site-nav {
    display: flex; order: 0; width: auto; height: 100%; margin: 0; gap: calc(4px * var(--ui-scale, 1));
  }
  body.comfort-ui:not(.mobile-table):not(.analysis-mobile-wide) .site-nav > :is(a, button) {padding: calc(3px * var(--ui-scale, 1)) calc(11px * var(--ui-scale, 1)) 0;}
  body.comfort-ui.classic-table.desktop-table .arena,
  body.comfort-ui.analysis-table:not(.analysis-mobile-wide) .study-layout {height: calc(100dvh - calc(64px * var(--ui-scale, 1)));}
}
@media (min-width: 851px) and (max-width: 1150px) {
  body.comfort-ui:not(.mobile-table):not(.analysis-mobile-wide) > .site-header {padding-inline: calc(18px * var(--ui-scale, 1)); gap: calc(20px * var(--ui-scale, 1));}
  body.comfort-ui:not(.mobile-table):not(.analysis-mobile-wide) .site-nav {gap: 0;}
  body.comfort-ui:not(.mobile-table):not(.analysis-mobile-wide) .site-nav > :is(a, button) {padding-inline: calc(8px * var(--ui-scale, 1));}
}
@media (min-width: 601px) and (max-width: 850px) {
  body.comfort-ui:not(.mobile-table):not(.analysis-mobile-wide) > .site-header {
    position: sticky; top: 0; z-index: 50; flex: none; width: 100%; max-width: calc(1280px * var(--ui-scale, 1));
    height: calc(108px * var(--ui-scale, 1)); min-height: calc(108px * var(--ui-scale, 1)); margin: 0 auto; padding: calc(14px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)) 0;
    gap: 0 calc(16px * var(--ui-scale, 1)); flex-wrap: wrap; background: transparent;
  }
  body.comfort-ui:not(.mobile-table):not(.analysis-mobile-wide) .site-nav {
    display: flex; order: 3; width: 100%; height: calc(46px * var(--ui-scale, 1)); margin: calc(8px * var(--ui-scale, 1)) 0 0; gap: 0;
  }
  body.comfort-ui:not(.mobile-table):not(.analysis-mobile-wide) .site-nav > :is(a, button) {padding: 0 calc(14px * var(--ui-scale, 1));}
  body.comfort-ui:not(.mobile-table):not(.analysis-mobile-wide) .site-nav > :first-child {padding-left: 0;}
  body.comfort-ui.classic-table.desktop-table .arena,
  body.comfort-ui.analysis-table:not(.analysis-mobile-wide) .study-layout {height: calc(100dvh - calc(108px * var(--ui-scale, 1))); min-height: 0;}
}

/* The live score uses the same dark surfaces and amber rules as navigation. */
body.comfort-ui.classic-table #active-game-panel {
  background: var(--ui-panel); border-color: var(--ui-line); border-radius: calc(6px * var(--ui-scale, 1)); gap: 0;
}
body.comfort-ui.classic-table.desktop-table #classic-console {padding: 0 calc(16px * var(--ui-scale, 1)) calc(12px * var(--ui-scale, 1));}
body.comfort-ui.classic-table .classic-match-meta {
  padding: calc(16px * var(--ui-scale, 1)) 0 calc(13px * var(--ui-scale, 1)); margin: 0 0 calc(8px * var(--ui-scale, 1)); gap: calc(5px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1));
  border-bottom: calc(3px * var(--ui-scale, 1)) solid var(--ui-accent);
}
body.comfort-ui.classic-table #score-variant {font-size: max(11px, calc(18px * var(--ui-scale, 1))); font-weight: 500; line-height: 1.3;}
body.comfort-ui.classic-table #score-target {font-size: max(11px, calc(14px * var(--ui-scale, 1))); color: var(--muted);}
body.comfort-ui.classic-table #score-extra {background: var(--ui-accent-soft); color: var(--ui-accent);}
body.comfort-ui.classic-table.desktop-table #classic-console .player-card {
  grid-template-columns: minmax(0,1fr) calc(44px * var(--ui-scale, 1)); min-height: calc(60px * var(--ui-scale, 1));
  padding: calc(9px * var(--ui-scale, 1)) calc(10px * var(--ui-scale, 1)); margin: calc(3px * var(--ui-scale, 1)) 0; border: 0; border-left: calc(3px * var(--ui-scale, 1)) solid transparent;
  border-radius: calc(3px * var(--ui-scale, 1)); background: transparent;
}
body.comfort-ui.classic-table.desktop-table #classic-console .player-card.turn {
  border-left-color: var(--seat-color); background: #ffffff05;
}
body.comfort-ui.classic-table.desktop-table #classic-console :is(#you-name, #opponent-name) {
  font-size: max(11px, calc(16px * var(--ui-scale, 1))); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere;
}
body.comfort-ui.classic-table #classic-console .player-score strong {font-size: max(11px, calc(32px * var(--ui-scale, 1))); font-weight: 500;}
body.comfort-ui.classic-table .game-review-bar.history-toolbar {
  background: #1d1d1c; border-top: 1px solid var(--ui-line); border-bottom: 0;
}
body.comfort-ui.classic-table .game-review-bar.history-toolbar > button {height: calc(46px * var(--ui-scale, 1)); min-height: calc(46px * var(--ui-scale, 1)); color: #bbb8ae;}
body.comfort-ui.classic-table .game-review-bar.history-toolbar > button:hover:not(:disabled) {
  color: #f5dfbd; background: var(--ui-accent-soft); box-shadow: inset 0 calc(-3px * var(--ui-scale, 1)) var(--ui-accent);
}
body.comfort-ui.classic-table .game-review-bar.history-toolbar svg {width: calc(21px * var(--ui-scale, 1)); height: calc(21px * var(--ui-scale, 1));}
body.comfort-ui.classic-table #classic-controls {padding: calc(12px * var(--ui-scale, 1)) calc(16px * var(--ui-scale, 1)); border-color: var(--ui-line);}
/* Action space exists only while there is an action to show. */
body.comfort-ui.classic-table #active-game-panel.live-game:not(.show-game-status):not(.table-settings-open) #classic-controls {
  display: block; flex: none; height: auto; min-height: 0;
}
body.comfort-ui.classic-table #classic-middle .turn-heading h2 {font-size: max(11px, calc(16px * var(--ui-scale, 1))); font-weight: 500;}
body.comfort-ui.classic-table #active-game-panel.show-game-status #turn-description {font-size: max(11px, calc(14px * var(--ui-scale, 1))); line-height: 1.5;}
body.comfort-ui.classic-table.mobile-table #mobile-player-summary {
  background: #ffffff03; border-bottom: calc(2px * var(--ui-scale, 1)) solid var(--ui-accent); padding: calc(5px * var(--ui-scale, 1));
}
body.comfort-ui.classic-table.mobile-table .game-review-bar.history-toolbar > button {height: calc(38px * var(--ui-scale, 1)); min-height: calc(38px * var(--ui-scale, 1));}

@media (prefers-reduced-motion: reduce) {
  body.comfort-ui :is(button, a, input, select) {transition: none;}
}