/* Playfield sizing. The shared shell owns the 64px toolbar and stage height.
   Keep these overrides last: older themes contain viewport minimums and !important rules. */
.page-play > #game-stage > :is(.beet-game,.chronol-game,.connect4-game,.tictactoe-game,.pong-game,.memory-game,.wer-game,.millionaire-game,.blackjack-game,.holdem-game,.war-game,.president-game,.boss-game,.chess-game,.dame-game,.bowling-game,.flags-game,.you-game,.tot-game,.fr-stage),
.page-play > #game-stage > #zf-root {
  --field-h: calc(100dvh - 174px);
  box-sizing: border-box;
  width: 100% !important;
  max-width: none !important;
  min-width: 0;
  min-height: 0 !important;
  height: 100% !important;
  margin: 0 !important;
}
/* Kicker labels repeat the toolbar name. Status titles are live game state. */
.page-play > #game-stage :is(.beet-game,.chronol-game,.connect4-game,.tictactoe-game,.pong-game,.memory-game,.wer-game,.millionaire-game,.blackjack-game,.holdem-game,.war-game,.president-game,.boss-game,.chess-game,.dame-game,.bowling-game,.flags-game,.you-game,.tot-game) .game-kicker,
.page-play > #game-stage :is(.connect4-score-orbit,.tictactoe-rule-stack,.war-brand,.flags-board-caption,.flags-title > h1,.tot-title > h1) {
  display: none !important;
}
.page-play > #game-stage :is(.beet-hud,.chronol-hero,.connect4-hero,.tictactoe-hero,.pong-hud,.memory-hero,.wer-hero,.millionaire-hud,.blackjack-hud,.holdem-hud,.president-hud,.boss-hud,.chess-hud,.dame-hud,.bowling-hud,.flags-head,.you-head,.tot-header) {
  min-height: 0 !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  gap: 10px !important;
}
.page-play > #game-stage :is(.connect4-hero,.tictactoe-hero,.pong-hud,.memory-hero,.wer-hero,.millionaire-hud,.blackjack-hud,.holdem-hud,.president-hud,.boss-hud,.chess-hud,.dame-hud,.bowling-hud,.you-head) h1 {
  font-size: clamp(18px, 2vw, 27px) !important;
  line-height: 1.1 !important;
  margin: 0 0 3px !important;
}
.page-play > #game-stage :is(.tictactoe-shell,.pong-shell,.memory-shell,.wer-shell,.millionaire-shell,.blackjack-shell,.holdem-shell,.president-shell,.boss-shell,.chess-shell,.dame-shell,.bowling-shell) {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0 !important;
  gap: 10px;
}
.page-play > #game-stage :is(.beet-game,.chronol-game,.connect4-game) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.page-play > #game-stage :is(.beet-layout,.chronol-layout,.connect4-layout,.tictactoe-layout,.memory-layout,.wer-layout,.millionaire-layout,.blackjack-layout,.president-table-wrap,.boss-layout,.chess-layout,.dame-layout,.bowling-layout) {
  flex: 1;
  min-height: 0 !important;
  min-width: 0;
  gap: 12px;
  margin-top: 0 !important;
  align-items: stretch !important;
}
.page-play > #game-stage :is(.beet-side,.beet-score-card,.beet-history-card,.chronol-side,.connect4-panel,.tictactoe-panel,.memory-panel,.wer-panel,.millionaire-ladder,.millionaire-players,.blackjack-panel,.president-scoreboard,.president-log-panel,.boss-history-panel,.boss-panel,.chess-panel,.dame-panel,.bowling-panel,.flags-score) {
  min-height: 0 !important;
  max-height: 100%;
  overflow: auto !important;
  overscroll-behavior: contain;
}
.page-play > #game-stage :is(.connect4-stage,.tictactoe-arena,.memory-table,.wer-table,.millionaire-stage,.blackjack-table,.holdem-table,.president-table,.boss-arena,.chess-board-wrap,.dame-board-wrap,.bowling-lane-wrap) {
  min-height: 0 !important;
  min-width: 0;
  box-sizing: border-box;
}
/* Duels: size the actual cells from both available dimensions. */
.page-play > #game-stage :is(.connect4-layout,.tictactoe-layout) {
  grid-template-columns: minmax(160px,230px) minmax(0,1fr) minmax(140px,200px) !important;
}
.page-play > #game-stage .connect4-stage { padding: 8px; gap: 6px; }
.page-play > #game-stage :is(.connect4-board,.connect4-drop-row) {
  width: min(100%, calc(var(--field-h) * 1.02), 820px) !important;
  margin-inline: auto;
}
.page-play > #game-stage .connect4-cell span { pointer-events: none; }
.page-play > #game-stage .connect4-board { gap: 6px; padding: 8px; }
.page-play > #game-stage .connect4-drop-row button { min-height: 28px; padding: 3px; }
.page-play > #game-stage :is(.tictactoe-arena,.chess-board-wrap,.dame-board-wrap) {
  container-type: size;
  grid-template-columns: minmax(0,1fr);
  grid-template-rows: minmax(0,1fr);
  padding: 8px !important;
}
.page-play > #game-stage .tictactoe-board {
  width: min(100%, var(--field-h), 680px) !important;
  height: auto !important;
  aspect-ratio: 1;
  transform: none !important;
}
.page-play > #game-stage .tictactoe-board::after { display: none; }
.page-play > #game-stage :is(.chess-layout,.dame-layout) {
  grid-template-columns: minmax(200px,270px) minmax(0,1fr) !important;
}
.page-play > #game-stage :is(.chess-board-wrap,.dame-board-wrap) { padding: 8px !important; }
.page-play > #game-stage :is(.chess-board,.dame-board) {
  width: min(100%, calc(var(--field-h) - 22px), 860px) !important;
  height: auto !important;
  aspect-ratio: 1;
  margin: auto;
  transform: none !important;
  grid-template-rows: repeat(8,minmax(0,1fr));
}
@supports (width: 1cqh) {
  .page-play > #game-stage :is(.tictactoe-board,.chess-board,.dame-board) {
    width: min(100%,100cqh) !important;
  }
}
.page-play > #game-stage .pong-arena {
  flex: 1;
  min-height: 180px !important;
  height: auto !important;
  max-height: none;
}
.page-play > #game-stage .pong-controls { margin: 0; padding: 8px 12px; gap: 12px; }
/* Music games: long timelines and history scroll inside their own panels. */
.page-play > #game-stage .beet-layout { grid-template-columns: minmax(230px,300px) minmax(0,1fr) !important; }
.page-play > #game-stage .beet-side { display: grid; grid-template-rows: 1fr 1fr; gap: 10px; }
.page-play > #game-stage :is(.beet-score-card,.beet-history-card,.beet-guess-card) { padding: 14px; }
.page-play > #game-stage .beet-guess-card { min-height: 0; overflow: auto; }
.page-play > #game-stage .beet-guess-card h1 { font-size: clamp(24px,3vw,40px); }
.page-play > #game-stage .chronol-hero { grid-template-columns: minmax(180px,.8fr) minmax(260px,1.2fr) auto !important; }
.page-play > #game-stage .chronol-hero h1 { font-size: clamp(20px,2vw,30px) !important; margin: 0; }
.page-play > #game-stage .chronol-cover-shell { width: 66px; height: 66px; }
.page-play > #game-stage .chronol-now-card { min-height: 0; padding: 6px; gap: 10px; }
.page-play > #game-stage .chronol-layout { grid-template-columns: minmax(0,1fr) minmax(230px,270px) !important; }
.page-play > #game-stage .chronol-controls { grid-column: auto; }
.page-play > #game-stage .chronol-cover-shell img { width: 100%; height: 100%; object-fit: cover; }
.page-play > #game-stage .chronol-now-card { grid-template-columns: 66px minmax(0,1fr); }
.page-play > #game-stage .chronol-now-card h2 { margin: 5px 0; font-size: 20px; }
.page-play > #game-stage .chronol-feedback-slot { flex: none; height: auto; padding: 8px 12px 0; }
.page-play > #game-stage .chronol-feedback-slot:has(.chronol-feedback[hidden]) { display: none; }
.page-play > #game-stage .chronol-timeline { min-height: 0; flex: 1; padding: 12px 18px 18px; }
.page-play > #game-stage .chronol-timeline > .chronol-song { display: grid; grid-template-columns: 88px minmax(0,1fr); align-items: center; gap: 10px; flex-basis: 270px; min-height: 150px; padding: 10px; }
.page-play > #game-stage .chronol-timeline > .chronol-song img { width: 88px; height: 88px; }
.page-play > #game-stage .chronol-timeline > .chronol-song > div { min-width: 0; }
.page-play > #game-stage .chronol-table { order: 0; min-height: 0 !important; overflow: auto; }
.page-play > #game-stage .chronol-table > header { min-height: 0; padding: 8px 14px; }
.page-play > #game-stage .chronol-side { flex: none; }
.page-play > #game-stage .chronol-own-overview { padding: 8px 12px; }
/* Memory uses the deal's row/column variables instead of a fixed card count. */
.page-play > #game-stage .memory-layout { grid-template-columns: minmax(180px,250px) minmax(0,1fr) !important; }
.page-play > #game-stage .memory-table { display: grid; place-items: center; padding: 12px !important; }
.page-play > #game-stage .memory-board {
  width: auto !important;
  max-width: 100% !important;
  height: min(calc(var(--field-h) - 46px), 780px) !important;
  aspect-ratio: var(--memory-board-ratio,.75);
  grid-template-columns: repeat(var(--memory-cols,4),minmax(0,1fr)) !important;
  grid-template-rows: repeat(var(--memory-rows,4),minmax(0,1fr)) !important;
  gap: 8px;
}
.page-play > #game-stage .memory-card { min-width: 0; min-height: 0; }
.page-play > #game-stage .wer-layout { grid-template-columns: minmax(200px,260px) minmax(0,1fr) !important; }
.page-play > #game-stage .wer-table { padding: 14px; gap: 10px; }
.page-play > #game-stage .wer-own-card { padding: 10px; }
.page-play > #game-stage .wer-identity-grid { min-height: 0; overflow: auto; }
.page-play > #game-stage .millionaire-layout { grid-template-columns: minmax(140px,190px) minmax(0,1fr) minmax(180px,240px) !important; }
.page-play > #game-stage .millionaire-stage { padding: 12px; gap: 10px; overflow: auto; }
.page-play > #game-stage .millionaire-question-card { padding: 14px; min-height: 0; }
.page-play > #game-stage .millionaire-question-card h2 { font-size: clamp(20px,2.1vw,32px); }
.page-play > #game-stage .millionaire-answers button { min-height: 54px; padding: 10px 14px; }
.page-play > #game-stage .millionaire-lock-panel { padding: 10px 12px; }
/* Card tables reserve their action rows before distributing table space. */
.page-play > #game-stage .blackjack-layout { grid-template-columns: minmax(0,1fr) minmax(210px,270px) !important; }
.page-play > #game-stage :is(.blackjack-actionbar,.holdem-actionbar,.president-handbar,.bowling-actionbar) { flex: none; margin-top: 0; padding: 8px 12px; gap: 10px; }
.page-play > #game-stage .blackjack-table {
  padding: 12px !important;
  grid-template-rows: minmax(145px,.8fr) minmax(210px,1fr);
  gap: 8px;
  overflow: auto !important;
}
.page-play > #game-stage .blackjack-players {
  grid-row: 2;
  grid-template-columns: repeat(auto-fit,minmax(min(220px,100%),1fr));
  min-height: 0;
  max-height: 100% !important;
  overflow: auto !important;
  align-items: stretch;
  padding: 4px !important;
}
.page-play > #game-stage .blackjack-players article.blackjack-player { min-height: 210px; }
.page-play > #game-stage .blackjack-felt-copy { display: none; }
.page-play > #game-stage .blackjack-table-actions button { min-height: 48px; padding: 5px 14px; }
.page-play > #game-stage .blackjack-table-actions button > i { font-size: 20px; }
.page-play > #game-stage .holdem-table-wrap { flex: 1; min-height: 0 !important; padding: 10px !important; }
.page-play > #game-stage .holdem-table { height: 100%; }
.page-play > #game-stage .president-table-wrap { grid-template-columns: minmax(180px,230px) minmax(0,1fr) minmax(170px,220px) !important; }
.page-play > #game-stage .president-table { min-height: 0 !important; }
.page-play > #game-stage .president-hand { min-width: 0; overflow-x: auto; }
.page-play > #game-stage .boss-layout { grid-template-columns: minmax(180px,240px) minmax(0,1fr) minmax(180px,250px) !important; }
.page-play > #game-stage .boss-arena { height: 100%; }
.page-play > #game-stage .bowling-layout { grid-template-columns: minmax(240px,320px) minmax(0,1fr) !important; }
.page-play > #game-stage .bowling-lane-wrap { display: grid; place-items: center; padding: 10px; }
.page-play > #game-stage .bowling-lane { height: 100% !important; min-height: 0; max-height: none; }
/* WAR's five rows share the available table height, including both draw piles. */
.page-play > #game-stage .war-game .war-table { height: 100%; min-height: 0 !important; padding: 10px !important; }
.page-play > #game-stage .war-board { height: 100%; min-height: 0 !important; }
.page-play > #game-stage .war-hud { grid-template-columns: minmax(0,1fr) auto auto; inset: 4px 8px auto; gap: 10px; }
.page-play > #game-stage .war-battlefield { height: 100%; min-height: 0 !important; padding: 64px 20px 12px; grid-template-rows: minmax(60px,1fr) minmax(60px,1fr) 50px minmax(60px,1fr) minmax(60px,1fr); }
.page-play > #game-stage .war-card-lanes { inset: 64px 0 12px; grid-template-rows: minmax(60px,1fr) minmax(60px,1fr) 50px minmax(60px,1fr) minmax(60px,1fr); }
.page-play > #game-stage .war-table-deck { width: clamp(55px,7vh,85px); height: clamp(72px,10vh,112px); }
/* FLAGS: keep the guess field below a flag sized for the actual viewport. */
.page-play > #game-stage .flags-layout { height: 100%; min-height: 0; grid-template-columns: minmax(0,1fr) minmax(240px,300px) !important; }
.page-play > #game-stage .flags-panel { min-height: 0; padding: 14px !important; display: flex; flex-direction: column; gap: 10px; }
.page-play > #game-stage .flags-board { min-height: 0 !important; padding: 8px 12px 0 !important; flex: 1; display: flex !important; flex-direction: column; justify-content: center; }
.page-play > #game-stage .flags-flag-mount { width: min(100%,calc((100dvh - 350px) * 1.5)); padding: 6px; margin: auto; }
.page-play > #game-stage .flags-intel-row { width: auto !important; margin: 8px -12px 0 !important; padding: 8px 4px !important; }
.page-play > #game-stage .flags-answer-zone { flex: none; margin: 0; }
.page-play > #game-stage .flags-score { padding: 14px !important; }
/* Party views retain dynamic topics, questions, vote counts and action buttons. */
.page-play > #game-stage .tot-game { grid-template-rows: auto minmax(0,1fr) auto; gap: 10px; padding: 8px; }
.page-play > #game-stage .tot-choice-board { min-height: 0; height: 100%; }
.page-play > #game-stage .tot-choice { min-height: 0; padding: 12px; }
.page-play > #game-stage .tot-choice-media { min-height: 0; }
.page-play > #game-stage .tot-choice-media img { max-height: calc(100dvh - 360px); object-fit: contain; }
.page-play > #game-stage .tot-footer { min-height: 0; padding: 8px 12px; }
.page-play > #game-stage .tot-scoreboard { max-height: 95px; overflow: auto; }
.page-play > #game-stage .you-game { display: grid !important; grid-template-columns: 1fr !important; grid-template-rows: minmax(0,1fr) auto !important; gap: 0 !important; overflow: visible !important; }
.page-play > #game-stage .you-tv { padding: 10px !important; min-height: 0 !important; gap: 10px !important; }
.page-play > #game-stage .you-prompt-card { min-height: 0 !important; padding: 16px !important; width: min(100%,1100px) !important; }
.page-play > #game-stage .you-prompt-card h2 { font-size: clamp(24px,3.2vw,48px) !important; }
.page-play > #game-stage .you-controller.you-actionbar { min-height: 0 !important; padding: 10px !important; }
.page-play > #game-stage .you-joker-explain { display: none !important; }
.page-play > #game-stage .you-scoreboard { max-height: 110px; overflow: auto; }
/* Motion games retain connection/setup controls; only the play surface is fitted. */
.page-play > #game-stage .fr-stage { display: flex; flex-direction: column; gap: 10px; }
.page-play > #game-stage .fr-header { margin: 0; gap: 10px; }
.page-play > #game-stage .fr-header h1 { font-size: 28px !important; }
.page-play > #game-stage .fr-fields { flex: 1; min-height: 0; overflow: auto; }
.page-play > #game-stage .fr-field canvas { max-height: calc(100dvh - 245px); object-fit: contain; }
.page-play > #game-stage #zf-root .zf-shell { height: 100%; min-height: 0; }
@media (min-width: 901px) and (max-height: 800px) {
  .page-play > #game-stage :is(.blackjack-cards,.holdem-own-cards,.holdem-community,.president-pile-cards) .poker-card { width: 58px; height: 82px; }
  .page-play > #game-stage .president-hand .poker-card { width: 55px; height: 80px; }
  .page-play > #game-stage .you-choice-grid button { min-height: 60px !important; }
  .page-play > #game-stage .you-choice-grid img { width: 28px !important; height: 28px !important; }
}
/* Narrow screens use normal document flow: cards and controls stay touchable. */
@media (max-width: 900px) {
  .page-play > #game-stage > :is(.beet-game,.chronol-game,.connect4-game,.tictactoe-game,.pong-game,.memory-game,.wer-game,.millionaire-game,.blackjack-game,.holdem-game,.war-game,.president-game,.boss-game,.chess-game,.dame-game,.bowling-game,.flags-game,.you-game,.tot-game,.fr-stage),
  .page-play > #game-stage > #zf-root { height: auto !important; min-height: 100% !important; --field-h: min(76vw,calc(100dvh - 200px)); }
  .page-play > #game-stage :is(.beet-layout,.connect4-layout,.tictactoe-layout,.memory-layout,.wer-layout,.millionaire-layout,.blackjack-layout,.president-table-wrap,.boss-layout,.chess-layout,.dame-layout,.bowling-layout,.flags-layout) { grid-template-columns: minmax(0,1fr) !important; height: auto; }
  .page-play > #game-stage :is(.beet-side,.connect4-panel,.tictactoe-panel,.memory-panel,.wer-panel,.millionaire-ladder,.millionaire-players,.blackjack-panel,.president-scoreboard,.president-log-panel,.boss-history-panel,.boss-panel,.bowling-panel,.flags-score) { max-height: 230px; }
  .page-play > #game-stage :is(.connect4-stage,.tictactoe-arena,.memory-table,.wer-table,.boss-arena,.chess-board-wrap,.dame-board-wrap,.bowling-lane-wrap) { order: -1; }
  .page-play > #game-stage .connect4-stage { grid-template-rows: auto auto; align-content: start; gap: 10px; }
  .page-play > #game-stage .connect4-drop-row { position: static; transform: none; }
  .page-play > #game-stage .connect4-drop-row button { height: 44px; }
  .page-play > #game-stage .chronol-layout { grid-template-columns: minmax(0,1fr) !important; }
  .page-play > #game-stage .chronol-timeline { min-height: 280px; }
  .page-play > #game-stage .chronol-hero { grid-template-columns: minmax(0,1fr) !important; }
  .page-play > #game-stage .chronol-table { max-height: 70dvh; }
  .page-play > #game-stage .memory-board { width: 100% !important; height: auto !important; aspect-ratio: auto; grid-template-columns: repeat(var(--memory-mobile-cols,4),minmax(0,1fr)) !important; grid-template-rows: none !important; }
  .page-play > #game-stage .pong-arena { height: min(65vw,55dvh) !important; flex: none; }
  .page-play > #game-stage :is(.tictactoe-arena,.chess-board-wrap,.dame-board-wrap) { container-type: normal; }
  .page-play > #game-stage .tictactoe-board { width: min(100%,var(--field-h)) !important; }
  .page-play > #game-stage :is(.chess-board,.dame-board) { width: min(100%,calc(100dvh - 210px)) !important; }
  .page-play > #game-stage .wer-table { min-height: 420px !important; }
  .page-play > #game-stage .millionaire-ladder { max-height: 160px; }
  .page-play > #game-stage .millionaire-stage { order: -1; }
  .page-play > #game-stage :is(.blackjack-table,.holdem-table-wrap,.president-table,.boss-arena) { min-height: 360px !important; }
  .page-play > #game-stage .holdem-table { min-height: 360px !important; }
  .page-play > #game-stage :is(.blackjack-actionbar,.holdem-actionbar,.president-handbar,.bowling-actionbar) { display: flex; flex-wrap: wrap; }
  .page-play > #game-stage :is(.holdem-controls,.president-controls) { display: flex; flex-wrap: wrap; gap: 8px; }
  .page-play > #game-stage .bowling-lane { height: 440px !important; }
  .page-play > #game-stage .war-game .war-table { height: 650px; }
  .page-play > #game-stage .war-battlefield { width: 100% !important; padding-inline: 8px; }
  .page-play > #game-stage .flags-flag-mount { width: min(100%,460px); }
  .page-play > #game-stage .tot-game { grid-template-rows: auto minmax(340px,1fr) auto; }
  .page-play > #game-stage .tot-choice-media img { max-height: 180px; }
  .page-play > #game-stage .you-game { grid-template-rows: auto auto !important; }
  .page-play > #game-stage .you-controller.you-actionbar { order: 1; max-height: none; }
  .page-play > #game-stage .you-tv { order: 0; }
  .page-play > #game-stage .you-head { grid-template-columns: minmax(0,1fr) 62px 60px !important; }
  .page-play > #game-stage .you-head .you-fullscreen { grid-column: auto !important; padding: 6px !important; }
  .page-play > #game-stage .you-timer { min-width: 58px !important; padding: 6px !important; }
  .page-play > #game-stage .you-head .you-fullscreen { font-size: 10px !important; min-width: 0; }
  .page-play > #game-stage .you-head > div:first-child { min-width: 0; }
  .page-play > #game-stage .you-head h1 { font-size: 18px !important; }
  .page-play > #game-stage .you-prompt-card { flex: none !important; padding: 10px !important; }
  .page-play > #game-stage .you-prompt-card h2 { font-size: clamp(20px,6vw,24px) !important; line-height: 1.1 !important; }
  .page-play > #game-stage .you-tv { min-height: 0 !important; }
  .page-play > #game-stage .you-timer { width: 62px !important; overflow-wrap: anywhere; }
  .page-play > #game-stage .you-prompt-card { display: block !important; margin-top: 0 !important; }
  .page-play > #game-stage :is(.you-submissions,.you-score-events):empty { display: none !important; }
  .page-play > #game-stage #zf-root .zf-shell { height: auto; min-height: 750px; }
}

/* Keep FLAGS inside its assigned grid row; size the flag from the board's
   remaining height after the status and answer form have taken their space. */
@media (min-width: 901px) {
  .page-play > #game-stage .flags-panel { height: 100%; box-sizing: border-box; }
  .page-play > #game-stage .flags-board { container-type: size; }
  @supports (width: 1cqh) {
    .page-play > #game-stage .flags-flag-mount { width: min(100%,calc((100cqh - 80px) * 1.5)); }
  }
}