/* Live cards grow with their content. Only the dedicated broadcast has a viewport budget. */
.observer-page .watch-toolbar { flex-wrap:wrap; }
.observer-page .bdq-sound-toggle { position:static; flex:none; margin:0; min-height:44px; }
.observer-page .watch-board.panel,
.observer-page #watch-selected .watch-board {
  height:auto; min-height:0; max-height:none;
  grid-template-rows:auto auto auto auto auto;
  align-content:start; overflow:visible;
}
.observer-page .watch-board .broadcast-ranking { grid-row:2; }
.observer-page .watch-board .watch-player-screen { grid-row:3; min-width:0; }
.observer-page .watch-board .watch-player-screen.spectator-grid {
  grid-auto-rows:620px; overflow:visible;
}
.observer-page .watch-board .spectator-grid>.spectator-player-screen {
  height:100%; min-height:0; max-height:none;
}
.observer-page .watch-board .watch-player-screen.spectator-grid:has(>.is-matching) { grid-auto-rows:720px; }
.observer-page .watch-board .watch-player-screen.spectator-grid:has(>.is-historical) { grid-auto-rows:820px; }
.observer-page .watch-board .watch-board-footer { grid-row:4; padding:0; margin:0; }
.observer-page .watch-board .watch-actions {
  grid-row:5; display:flex; flex-wrap:wrap; height:auto; min-height:44px;
  gap:4px 16px; align-items:center; padding:8px 0 0;
}
.observer-page .watch-actions a { display:inline-flex; align-items:center; min-height:44px; max-width:100%; overflow-wrap:anywhere; }
.observer-page .watch-board .watch-actions .replay-direct-share { margin-left:0; }
.observer-page .watch-board .watch-player-screen.charade-observer {
  display:flow-root; height:auto; min-height:0; overflow:visible;
  padding:clamp(16px,2vw,28px); background:var(--bd-card,#112338); color:var(--bd-ink,#edf4fc);
}
.observer-page .charade-observer h3 { font-size:clamp(22px,2vw,30px); margin:6px 0 18px; overflow-wrap:anywhere; }
.observer-page .charade-observer .charade-statement { font-size:clamp(17px,1.4vw,22px); line-height:1.5; }
.observer-page .charade-observer .charade-clue { padding:12px 14px; }
.observer-page .charade-observer .charade-live-state {
  margin:16px 0 0; padding-top:12px; border-top:1px solid var(--bd-line,#486479);
  color:var(--bd-muted,#c7d6e4); font-size:14px; line-height:1.6; overflow-wrap:anywhere;
}
@container(max-width:700px) {
  .observer-page .watch-board .watch-player-screen.spectator-grid.has-opponents { grid-template-columns:minmax(0,1fr); }
}
@media(max-width:450px) {
  .observer-page .watch-toolbar .bdq-sound-toggle { display:block; margin-top:12px; }
  .observer-page .watch-board .watch-actions { justify-content:flex-start; gap:4px 12px; }
  .observer-page .watch-actions a+a { border-left:0; padding-left:0; }
  .observer-page .watch-board .watch-player-screen.charade-observer { padding:14px; }
  .observer-page .charade-observer .charade-clue { padding:10px; gap:8px; }
  .observer-page .charade-observer .charade-whole { padding:12px; }
}

/* Two independent columns inside the 16:9 safe area; neither can cover the footer. */
html.bdq-broadcast { --broadcast-safe:clamp(16px,4vh,48px); }
html.bdq-broadcast body#bdq-extension .shell { padding:var(--broadcast-safe) 4vw!important; }
html.bdq-broadcast .observer-page #watch-selected { max-width:none; width:100%; }
html.bdq-broadcast .observer-page #watch-selected .watch-board {
  height:calc(100dvh - 2 * var(--broadcast-safe)); min-height:0; max-height:none;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  grid-template-rows:auto minmax(0,1fr) auto!important;
  gap:clamp(12px,1.5vw,24px)!important; padding:clamp(12px,1.5vw,24px)!important;
  overflow:hidden; container-type:normal;
}
html.bdq-broadcast .observer-page .watch-board .watch-board-head { grid-row:1; grid-column:1/-1; }
html.bdq-broadcast .observer-page .watch-board .broadcast-ranking {
  grid-row:2; grid-column:1; display:flex; flex-direction:column; height:100%; min-height:0;
}
html.bdq-broadcast .broadcast-title,html.bdq-broadcast .broadcast-archive { flex:none; }
html.bdq-broadcast .broadcast-list { flex:1 1 auto; min-height:0; max-height:none; }
html.bdq-broadcast .observer-page .watch-board .watch-player-screen {
  grid-row:2; grid-column:2; min-height:0; height:100%; margin:0;
  overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable;
}
html.bdq-broadcast .observer-page .watch-board .watch-player-screen.spectator-grid { grid-auto-rows:100%; }
html.bdq-broadcast .observer-page .watch-board .spectator-grid>.spectator-player-screen {
  overflow:auto; grid-template-rows:auto auto minmax(64px,auto) minmax(180px,1fr) auto;
}
html.bdq-broadcast .observer-page .watch-board .spectator-grid>.spectator-player-screen.is-historical:not(.is-review) {
  grid-template-rows:auto auto auto auto minmax(180px,1fr) auto;
}
html.bdq-broadcast .observer-page .watch-board .spectator-grid>.spectator-player-screen.is-review { grid-template-rows:auto minmax(0,1fr); }
html.bdq-broadcast .observer-page .watch-board .spectator-screen-head { min-height:0; }
html.bdq-broadcast .spectator-screen .historical-portrait img { height:clamp(120px,20vh,220px); }
html.bdq-broadcast .observer-page .watch-board .watch-board-footer { grid-row:3; grid-column:1/-1; }
html.bdq-broadcast .observer-page .charade-observer .charade-statement { font-size:clamp(18px,1.5vw,29px); }
html.bdq-broadcast .observer-page .charade-observer .charade-clues { gap:10px; }
html.bdq-broadcast .observer-page .charade-observer .charade-whole { margin-top:12px; padding:12px 14px; }
html.bdq-broadcast .observer-page .charade-observer .charade-live-state { font-size:clamp(13px,1vw,18px); }
@media(max-width:850px) {
  html.bdq-broadcast .observer-page #watch-selected .watch-board { height:auto; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:repeat(4,auto)!important; overflow:visible; }
  html.bdq-broadcast .observer-page .watch-board .broadcast-ranking { grid-column:1; grid-row:2; height:auto; }
  html.bdq-broadcast .observer-page .watch-board .watch-player-screen { grid-column:1; grid-row:3; height:auto; }
  html.bdq-broadcast .observer-page .watch-board .watch-board-footer { grid-row:4; }
  html.bdq-broadcast .observer-page .watch-board .watch-player-screen.spectator-grid { grid-auto-rows:620px; }
  html.bdq-broadcast .observer-page .watch-board .watch-player-screen.spectator-grid:has(>.is-historical) { grid-auto-rows:820px; }
  html.bdq-broadcast .broadcast-name { font-size:16px; }
  html.bdq-broadcast .broadcast-kind { font-size:12px; }
  html.bdq-broadcast .broadcast-crown { font-size:10px; }
  html.bdq-broadcast .broadcast-score { font-size:23px; }
}
html.bdq-overlay .observer-page #watch-selected .watch-board { display:block; height:auto; min-height:0; overflow:visible; }
html.bdq-overlay .observer-page .watch-board .broadcast-ranking { height:auto; }

/* Long charades keep every clue and the whole visible in a broadcast frame. */
@media(min-width:851px) {
  html.bdq-broadcast .observer-page .watch-board .charade-observer:has(.charade-clue:nth-child(4)) { padding:14px; }
  html.bdq-broadcast .observer-page .charade-observer:has(.charade-clue:nth-child(4)) .eyebrow { margin:0 0 4px; }
  html.bdq-broadcast .observer-page .charade-observer:has(.charade-clue:nth-child(4)) h3 { margin:4px 0 10px; font-size:clamp(22px,1.6vw,30px); }
  html.bdq-broadcast .observer-page .charade-observer:has(.charade-clue:nth-child(4)) .charade-statement { font-size:clamp(17px,1.25vw,24px); line-height:1.35; }
  html.bdq-broadcast .observer-page .charade-observer:has(.charade-clue:nth-child(4)) .charade-clues { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  html.bdq-broadcast .observer-page .charade-observer:has(.charade-clue:nth-child(4)) .charade-clue { padding:8px; gap:7px; }
  html.bdq-broadcast .observer-page .charade-observer:has(.charade-clue:nth-child(4)) .charade-clue-number { flex-basis:22px; height:22px; font-size:13px; }
  html.bdq-broadcast .observer-page .charade-observer:has(.charade-clue:nth-child(4)) .charade-whole { margin-top:8px; padding:10px; }
  html.bdq-broadcast .observer-page .charade-observer:has(.charade-clue:nth-child(4)) .charade-live-state { margin-top:8px; padding-top:8px; }
}