/* A 10×20 well: twice as tall as wide. Phones reserve extra height for the
   five-button control row; focused portrait keeps the board clear of it. */
.game-page[data-game="blocks"] { --board-ratio: .5; --board-size: min(calc(100vw - 24px), calc((100dvh - 284px) * var(--board-ratio) + 16px), 900px); }
.game-page[data-game="blocks"] .board { aspect-ratio: 1 / 2; }
.next-piece { display: block; width: 48px; height: 24px; margin: 0 auto; }
.game-page[data-game="blocks"] .dpad svg { display: block; width: 20px; height: 20px; margin: auto; }
.game-page[data-game="blocks"] #drop { grid-area: 1 / 3; }
@media (min-width: 700px), (min-width: 540px) and (orientation: landscape) {
  .game-page[data-game="blocks"] { --board-size: min(calc(100vw - 216px), calc((100dvh - 96px) * var(--board-ratio) + 16px), 900px); }
}
.game-page.is-focused[data-game="blocks"] { --board-size: min(calc(100vw - 16px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc((100dvh - 276px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * var(--board-ratio) + 16px), 1000px); }
@media (orientation: landscape) {
  .game-page.is-focused[data-game="blocks"] { --board-size: min(calc(100vw - 216px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc((100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * var(--board-ratio) + 16px), 1000px); }
}
/* Portrait tablets have spare width beside the tall well, so focus view uses
   the landscape side area there instead of shrinking the well. */
@media (orientation: portrait) and (min-width: 600px) {
  .game-page.is-focused[data-game="blocks"] { --board-size: min(calc(100vw - 216px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)), calc((100dvh - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) * var(--board-ratio) + 16px), 1000px); }
  .is-focused[data-game="blocks"] .game-layout { padding-right: calc(216px + env(safe-area-inset-right, 0px)); padding-left: env(safe-area-inset-left, 0px); }
  .is-focused[data-game="blocks"] .stats { right: max(12px, env(safe-area-inset-right, 0px)); left: auto; margin-inline: 0; gap: 12px; padding: 10px; }
  .is-focused[data-game="blocks"] .game-toolbar { top: calc(max(12px, env(safe-area-inset-top, 0px)) + 76px); right: max(12px, env(safe-area-inset-right, 0px)); left: auto; bottom: auto; margin-inline: 0; flex-direction: column; }
  .is-focused[data-game="blocks"] .dpad { right: max(12px, env(safe-area-inset-right, 0px)); left: auto; bottom: max(12px, env(safe-area-inset-bottom, 0px)); margin-inline: 0; display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); }
  .is-focused[data-game="blocks"] .dpad [data-direction="up"] { grid-area: 1 / 2; }
  .is-focused[data-game="blocks"] .dpad [data-direction="left"] { grid-area: 2 / 1; }
  .is-focused[data-game="blocks"] .dpad [data-direction="down"] { grid-area: 2 / 2; }
  .is-focused[data-game="blocks"] .dpad [data-direction="right"] { grid-area: 2 / 3; }
  .is-focused[data-game="blocks"] .settings-content { top: 0; bottom: auto; left: auto; right: calc(100% + 12px); transform: none; max-height: calc(100dvh - 100px); }
}