/* Keep the playable screens within the viewport at the site's CSS zoom. */
body.chess-page {
  height: calc(100dvh / var(--ui-scale));
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.chess-page .header-content,
.chess-page .site-content { width: min(calc(100% - 1rem), 72rem); }
.chess-page .header-content { min-height: 0; }
.chess-page .brand-lockup { flex-direction: row; align-items: center; gap: .65rem; padding: .35rem 0; }
.chess-page .brand-avatar { width: 2.25rem; height: 2.25rem; }
.chess-page .site-content { display: flex; flex-direction: column; min-height: 0; max-width: none; }
.chess-page .page-intro { display: none; }
.chess-page .site-footer { padding: .2rem 0; font-size: .68rem; line-height: 1.3; }
body.chess-page .game-layout {
  flex: 1;
  min-height: 0;
  min-width: 0;
  margin: 0;
  max-width: none;
  grid-template-columns: minmax(0, 1fr) minmax(0, clamp(15rem, 31vw, 23rem));
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(.4rem, 2vw, 1.4rem);
  padding-block: .4rem;
}
.chess-page .board-column {
  min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: .25rem;
}
.chess-page .board-column:has(#board-hint:not([hidden])) {
  grid-template-rows: auto minmax(0, 1fr) auto auto;
}
.chess-page .board-stage {
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
}
.board-surface { position: relative; width: min(100%, var(--board-edge, 0px)); }
.chess-page .board-hint { padding: .22rem .4rem; font-size: .76rem; }
.chess-page .player-strip { min-height: 2.25rem; gap: .45rem; padding: .2rem .55rem; }
.chess-page .player-piece { flex-basis: 1.65rem; height: 1.65rem; }
.chess-page .player-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .45rem; }
.chess-page .player-name { font-size: .83rem; overflow-wrap: anywhere; }
.chess-page .player-side { font-size: .67rem; }
.chess-page .clock { min-width: 0; font-size: 1.12rem; padding: .1rem .25rem; white-space: nowrap; }
.chess-page .game-sidebar { grid-template-columns: minmax(0, 1fr); align-content: start; gap: .4rem; }
.chess-page .game-actions { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: .32rem; }
.chess-page #new-game { justify-self: end; }
.chess-page .game-actions .button,
.chess-page #request-hint { min-height: 2.25rem; padding: .25rem .6rem; }
.chess-page .game-panel { min-width: 0; padding: .45rem .65rem; }
.chess-page .game-panel :is(h1, h2) { margin: .2rem 0 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.chess-page .chips { margin-top: .25rem; gap: .3rem; }
.chess-page .chip { padding: .14rem .4rem; font-size: .68rem; }
.chess-page .game-status { min-height: 0; margin: .3rem 0 0; padding: 0; font-size: .76rem; overflow-wrap: anywhere; }
.chess-page .coach-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .15rem .4rem;
  margin: .3rem 0 0;
}
.chess-page :is(.coach-feedback, .coach-note) { margin: 0; font-size: .72rem; }
.chess-page #hint-feedback,
.chess-page .coach-note:last-child { grid-column: 1 / -1; }
.chess-page:has(#board-hint:not([hidden])) #hint-feedback {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.chess-page .controls-panel { padding: .5rem .65rem; }
.chess-page .controls-panel p { margin-top: .25rem; font-size: .77rem; }

.chess-page dialog,
.chess-page .setup-dialog.appearance-open {
  width: min(calc(100% - 1rem), 33rem);
  max-height: calc(100dvh / var(--ui-scale) - 1rem);
  margin: auto;
  padding: .7rem;
  border-radius: .8rem;
}
.chess-page .setup-dialog.appearance-open { width: min(calc(100% - 1rem), 54rem); }
.chess-page .promotion-dialog { width: min(calc(100% - 1rem), 23rem); }
.chess-page .dialog-header { gap: .5rem; margin-bottom: .45rem; align-items: center; }
.chess-page .dialog-header h2 { font-size: clamp(1.25rem, 3vw, 1.75rem); }
.chess-page .dialog-header p { margin-top: .12rem; font-size: .72rem; }
.chess-page dialog :is(.button, .icon-button) { min-height: 2.2rem; padding: .23rem .6rem; }
.chess-page .setup-tabs { display: flex; gap: .35rem; margin-bottom: .45rem; }
.chess-page .setup-tabs .button { flex: 1; min-width: 0; padding-inline: .28rem; font-size: .78rem; }
.chess-page .setup-tabs [aria-pressed="true"] { background: var(--wash); border-color: var(--green); }
.chess-page .appearance-link { flex-direction: column; justify-content: center; }
.chess-page .appearance-link small { font-size: .6rem; }
.chess-page .choice-set { margin-bottom: .35rem; padding-top: .35rem; }
.chess-page .option > span { min-height: 2.15rem; padding: .25rem .4rem; font-size: .76rem; line-height: 1.2; }
.chess-page .level-controls { padding-block: .12rem; }
.chess-page .form-hint { margin-block: .25rem; font-size: .72rem; }
.chess-page .unlock-row, .chess-page .unlock-button { min-height: 2rem; }
.chess-page .start-button { margin-top: .4rem; }
.chess-page .appearance-layout { gap: .55rem; }
.chess-page .appearance-preview {
  width: min(100%, 22rem, calc(38dvh / var(--ui-scale)));
  margin-inline: auto;
  padding: .35rem;
}
.chess-page .appearance-preview .eyebrow { margin-bottom: .2rem; }
.chess-page .color-fields { gap: .4rem; }
.chess-page :is(.time-fields input, .hex-field) { min-height: 2.3rem; }
.chess-page .color-swatch { height: calc(100% - .5rem); }
.chess-page .appearance-actions { position: static; padding: 0; margin-top: .5rem; background: transparent; }
.chess-page .appearance-actions .button { flex: 1; }
.chess-page .moves-scroll { max-height: none; overflow: visible; }
.chess-page .moves-scroll :is(th, td) { padding: .34rem .4rem; overflow-wrap: anywhere; }
.move-pages { display: flex; justify-content: space-between; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .77rem; }

@media (max-width: 849px) and (orientation: portrait), (max-width: 479px) {
  body.chess-page .game-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .chess-page .site-content { max-width: 43rem; }
}
@media (max-width: 849px), (max-height: 650px) {
  .chess-page .game-panel > .eyebrow,
  .chess-page .controls-panel,
  .chess-page .coach-note:last-child { display: none; }
}
@media (max-width: 650px) and (orientation: portrait), (max-width: 479px) {
  .chess-page .appearance-layout { grid-template-columns: minmax(0, 1fr); }
  .chess-page .appearance-preview { width: min(100%, 8.5rem, calc(28dvh / var(--ui-scale))); }
}
@media (max-width: 370px), (max-height: 430px) {
  .chess-page .theme-option small,
  .chess-page .dialog-header p,
  .chess-page .game-panel :is(h1, h2) { display: none; }
  .chess-page .theme-option > span { gap: .3rem; }
  .chess-page .theme-option strong { font-size: .76rem; }
  .chess-page .mini-board { flex-basis: 1.15rem; height: 1.15rem; }
}
@media (max-width: 370px) {
  .chess-page .appearance-preview { width: min(100%, 7rem); }
}
@media (min-width: 480px) and (max-height: 510px) {
  .chess-page .appearance-layout,
  .chess-page .game-settings,
  .chess-page .clock-settings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem .55rem; }
  .chess-page .game-settings > .choice-set { grid-row: span 3; }
  .chess-page .level-controls { flex-wrap: wrap; }
  .chess-page .dialog-header p,
  .chess-page #reply-pace,
  .chess-page .clock-settings .form-hint { display: none; }
}
@media (min-width: 480px) and (max-height: 430px) {
  .chess-page .board-column,
  .chess-page .board-column:has(#board-hint:not([hidden])) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto minmax(0, 1fr) auto;
  }
  .chess-page #top-player { grid-area: 1 / 1; }
  .chess-page #bottom-player { grid-area: 1 / 2; }
  .chess-page .board-stage { grid-area: 2 / 1 / 3 / -1; }
  .chess-page #board-hint { grid-area: 3 / 1 / 4 / -1; }
  .chess-page .player-piece { display: none; }
  .chess-page .player-strip { padding-inline: .3rem; gap: .15rem; }
  .chess-page .player-name { font-size: .72rem; }
  .chess-page .clock { font-size: .9rem; padding-inline: .1rem; }
  .chess-page .setup-tabs,
  .chess-page .dialog-header,
  .chess-page .choice-set { margin-bottom: .25rem; }
  .chess-page .two-up { gap: .32rem; }
}
@supports (zoom: .86) {
  @media (max-height: 355px) {
    .chess-page dialog,
    .chess-page .setup-dialog.appearance-open {
      zoom: .86;
      max-height: calc(100dvh / var(--ui-scale) / .86 - 1rem);
    }
  }
}