#main .corners a, #game-table .game-menu > :is(a,button) {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 12px;
  overflow: hidden;
  text-align: left;
}
#main .corners img, #game-table .game-menu img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
#main .corners :is(strong,span), #game-table .game-menu :is(strong,span) {
  display: block;
  padding-inline: 12px;
}
#main .corners strong, #game-table .game-menu strong { margin-top: 10px; }
.br-game-banner {
  display: flex;
  align-items: flex-end;
  min-height: clamp(180px, 30vw, 320px);
  border-radius: 16px;
  background: linear-gradient(transparent, #112722d9), url('br-game-table-banner.webp') center / cover;
  padding: clamp(16px, 4vw, 40px);
  box-sizing: border-box;
}
#game-table .br-game-banner h1 { color: white; font-size: clamp(2rem, 5vw, 4rem); margin: 0; }

#game-table #panel-checkers .play-layout {
  --checker-board-size: clamp(240px, calc(100dvh - 165px), 680px);
  grid-template-columns: minmax(0, 1fr) minmax(0, min(var(--checker-board-size), calc(100% - 414px))) minmax(0, 1fr) !important;
  max-width: none;
}
#panel-checkers .board-wrap { grid-column: 2; grid-row: 1; }
#panel-checkers .game-sidebar { grid-column: 3; grid-row: 1; width: min(100%, 230px); }
#checkers-board .square { position: relative; }
#checkers-board .square .checker {
  position: absolute;
  inset: 13%;
  width: 74%;
  height: 74%;
  box-sizing: border-box;
  font-size: clamp(10px, 2vw, 23px);
}
@media (max-width: 900px) {
  #game-table #panel-checkers .play-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: var(--checker-board-size);
    margin-inline: auto;
  }
  #panel-checkers :is(.board-wrap, .game-sidebar) { grid-area: auto; }
}

#game-table .br-game-gallery-link { display: none; }
.br-playing #game-table :is(.br-game-banner, .br-gallery-prompt, .game-menu) { display: none; }
.br-playing #game-table .br-game-gallery-link { display: inline-block; }
.br-playing #game-table { padding-block: 8px 16px; }
.br-playing #game-table .game-panel { margin-top: 6px; padding-top: 0; }
.br-playing #game-table .game-panel > h3 { margin: 0 0 6px; font-size: 1.35rem; }
.br-playing #game-table #panel-chess .play-layout {
  --chess-board-size: clamp(240px, calc(100dvh - 146px), 760px);
}
.br-playing #game-table #panel-checkers .play-layout {
  --checker-board-size: clamp(240px, calc(100dvh - 146px), 760px);
}
.br-playing #game-table :is(.number-board, .game.match-game) {
  max-width: min(100%, clamp(240px, calc(100dvh - 165px), 720px)) !important;
}
@media (min-width: 901px) {
  .br-playing #game-table :is(.game-sidebar, .br-chess-match) {
    max-height: calc(100dvh - 146px);
    overflow: auto;
  }
}
.br-arcade-layout #board:not(.br-solitaire-board) {
  width: min(100%, clamp(240px, calc(100dvh - 180px), 720px));
}
body:has(.br-arcade-layout) #games[hidden],
body:has(.br-arcade-layout) main > h1,
body:has(.br-arcade-layout) main > h1 + p,
body:has(.br-arcade-layout) > header:not(.br-universal-header) { display: none !important; }
body:has(.br-arcade-layout) #title { margin-block: 6px; }

/* Budget the opening deal for two card heights plus six tableau offsets. */
.br-solitaire-view main {
  padding-block: 8px;
}
.br-solitaire-view main > .card {
  margin-block: 8px;
  padding: clamp(8px, 1.2vw, 16px);
}
.br-solitaire-view #instructions {
  margin-block: 4px 8px;
}
.br-solitaire-view #status {
  min-height: 0;
  margin-block: 0 6px;
}
.br-solitaire-view #board.br-solitaire-board {
  --br-card-step: clamp(10px, 2.5dvh, 27px) !important;
  max-width: min(100%, calc((100dvh - 225px - 6 * var(--br-card-step)) * 2.5)) !important;
  min-width: min(100%, 300px);
  margin-inline: auto;
  padding: 8px;
  border-width: 5px;
}
.br-solitaire-view .br-sol-top,
.br-solitaire-view .br-sol-tableau { gap: clamp(3px, .65vw, 8px); }
.br-solitaire-view .br-sol-top { margin-bottom: 12px; }
.br-solitaire-view .br-sol-tableau { min-height: 0; }
.br-solitaire-view .br-sol-info { margin-top: 8px; font-size: 12px; }
