/* v1.2.1: an independent help block BELOW the board, never a side column.
   The widths of .player-main, .broadcast-layout and .board are unchanged. */
.game-help{
  flex:0 0 auto;min-width:0;width:100%;margin:20px 0 0;
  padding:16px 20px;border:1px solid #63757955;border-radius:12px;
  background:linear-gradient(115deg,#10242eed,#0b1b24ed);
}
.game-help-heading,.game-help-subheading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.game-help-heading{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid #a3b4b31c}
.game-help h2{margin:0;font:650 14px/1.4 system-ui,sans-serif;color:#e3d6b3;letter-spacing:.015em}
.game-help h3{margin:0 0 8px;font:650 12px/1.4 system-ui,sans-serif;color:#d0dcd6}
.game-help-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:16px 26px}
.game-help-grid>section{min-width:0}
.game-help-hints{border-left:1px solid #a3b4b31c;padding-left:26px}
.game-help p{margin:0;color:#a9bebf;font-size:12px;line-height:1.6;overflow-wrap:anywhere}
.game-help p+p{margin-top:7px}
.game-help .help-command{color:#efdbac;font-weight:600}
.game-help .legend{gap:8px 18px;font-size:11px;line-height:1.5;margin-top:10px}
.game-help .legend b{font-weight:400;opacity:.6;padding:0 3px}
.game-help .hint-list:not(:empty){margin-top:10px}
.game-help .hint-list:empty{display:none}
.game-help .text-button{margin:-9px 0;min-height:44px;flex-shrink:0;padding:8px 10px;border-radius:6px}
.game-help #hintButton{background:#d9c48a0a;border:1px solid #9b936052;margin:0;min-height:44px;padding:8px 14px}
.game-help-subheading{margin-bottom:8px;min-height:44px}
.game-help-subheading h3{margin:0}
.observer-page .game-help{margin:0;padding:13px 18px}
.observer-page .game-help-heading{margin-bottom:9px;padding-bottom:9px}
.observer-page .game-help h2{font-size:13px}
.observer-page .game-help h3{font-size:11px;margin-bottom:5px}
.observer-page .game-help p{font-size:11px;line-height:1.5}
.observer-page .game-help .legend{margin-top:0;font-size:11px;gap:8px 16px}
.observer-page .chat-vote-footer{justify-content:flex-end}
@media(max-width:760px){
  .game-help{padding:14px 16px}
  .game-help-grid{gap:14px 18px}
  .game-help-hints{padding-left:18px}
  .game-help p,.game-help .legend{font-size:11px}
  .game-help .legend{gap:8px 12px}
  .game-help #hintButton{padding:8px 10px;font-size:11px}
}
@media(max-width:600px){
  .game-help-grid{grid-template-columns:minmax(0,1fr)}
  .game-help-hints{padding:14px 0 0;border-left:0;border-top:1px solid #a3b4b31c}
  .game-help-heading{gap:10px}
  .game-help h2{font-size:13px}
}
/* Short screens scroll vertically rather than squeezing away the board.
   Its original horizontal viewport and eight-column grid are preserved. */
@media(max-width:680px),(max-height:640px){
  .observer-page{height:auto;min-height:100vh;min-height:100dvh;overflow-y:auto;overflow-x:hidden}
  .observer-page .broadcast-layout{flex:0 0 auto;min-height:0}
  .observer-page .broadcast-board-section{flex:0 0 auto;min-height:240px}
  .observer-page .broadcast-board-section .board-scroll{flex:0 0 auto;max-height:55vh;max-height:55dvh}
  .observer-page .game-help{margin-top:0}
}
@media(prefers-reduced-motion:reduce){.game-help{scroll-behavior:auto}}