/* What The Blank? — layout & readability tweaks
   Loaded AFTER the app's stylesheet so these win the cascade.
   Goal: the split-flap board should FILL the screen and read from across a
   room (this is a game-show host tool shown on a TV/projector), instead of
   leaving a big empty gap on the right of every row with tiny letters.
   Scoped to the play screen only  (main.h-screen.w-screen)  so the setup
   and Question Manager screens are untouched. */

/* Let each flap cell grow to fill the row width, capped so it never gets
   absurd on an ultra-wide display. flex:1 1 0 = all cells share the row. */
main.h-screen.w-screen .flap-letter {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: clamp(40px, 4.4vw, 78px) !important;
  height: clamp(42px, 5.2vh, 76px) !important;
  font-size: clamp(20px, 2.1vw, 42px) !important;
}

/* When cells hit their max-width (very wide screens), center the row so the
   word group sits in the middle instead of stranded on the left. */
main.h-screen.w-screen div:has(> .flap-letter) {
  justify-content: center !important;
}

/* Keep the answer row's 21 cells compact. Scope to the answer container ONLY —
   NOT .neon-ring, because the app adds .neon-ring to a row while it's REVEALING,
   which would shrink those cells mid-animation and shift the row (a visible gap). */
main.h-screen.w-screen .rounded-xl.p-1 .flap-letter {
  max-width: clamp(34px, 3.4vw, 62px) !important;
}

/* Tighten the vertical rhythm so taller boards (up to 13 rows) still fit
   without clipping, and the board uses the full column height. */
main.h-screen.w-screen section .flap-letter {
  line-height: 1 !important;
}