/* Phone held sideways: the game screen splits into two columns. The board takes the left side at nearly the full
   screen height; the input pad and the toolbar stack on the right, and the hint card and toasts float over that
   column. Tablets and desktops (taller than 540px) keep the portrait layout. Loaded after every game stylesheet. */
@media (orientation: landscape) and (max-height: 540px) {
  .mobile-game-shell {
    --side: clamp(232px, 34vw, 300px);
    --appbar: 44px;
    /* Room for the board: screen height minus the app bar, progress line and padding; never wider than the left
       column. Games size their board wrapper from this. */
    --fit-h: calc(100dvh - var(--appbar) - 3px - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    --fit-w: calc(100vw - var(--side) - 32px - env(safe-area-inset-left) - env(safe-area-inset-right));
    --board-fit: min(560px, var(--fit-h), var(--fit-w));
    display: grid;
    grid-template-areas:
      'bar bar'
      'progress progress'
      'board input'
      'board tools';
    grid-template-columns: minmax(0, 1fr) var(--side);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    padding-right: env(safe-area-inset-right);
    padding-left: env(safe-area-inset-left);
  }
  .shell-appbar {
    grid-area: bar;
    height: var(--appbar);
  }
  .shell-progress {
    grid-area: progress;
  }
  /* The stage's children (board and, for some games, the input pad) become cells of the two-column grid. */
  .mobile-game-shell .shell-stage {
    display: contents;
  }
  .mobile-game-shell .shell-board-area {
    grid-area: board;
    align-self: center;
    justify-self: center;
    max-height: 100%;
    padding: var(--space-2) var(--space-4);
    overflow: hidden;
  }
  .mobile-game-shell .shell-input {
    grid-area: input;
    align-self: center;
    justify-self: stretch;
    min-height: 0;
    padding: var(--space-2) var(--space-3);
    border-left: 1px solid var(--line);
  }
  /* Games without an input pad leave the space above the toolbar empty, still divided from the board. */
  .mobile-game-shell::after {
    grid-area: input;
    border-left: 1px solid var(--line);
    content: '';
  }
  .mobile-game-shell:has(.shell-input)::after {
    content: none;
  }
  .mobile-game-shell .shell-toolbar {
    grid-area: tools;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    height: auto;
    padding: var(--space-1) var(--space-2) calc(var(--space-1) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
  .mobile-game-shell .shell-tool {
    min-height: 52px;
    padding: 2px 0;
  }
  /* Hint card and toasts sit over the right column so the board stays fully visible. */
  .mobile-game-shell .shell-hint,
  .mobile-game-shell .shell-hint.top {
    top: calc(env(safe-area-inset-top) + var(--appbar) + 8px);
    right: calc(env(safe-area-inset-right) + 8px);
    bottom: auto;
    left: auto;
    width: calc(var(--side) - 16px);
    max-height: calc(100dvh - var(--appbar) - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    margin: 0;
  }
  /* Toasts sit at the top of the right column, clear of the toolbar buttons below. */
  .mobile-game-shell .shell-toast {
    top: calc(env(safe-area-inset-top) + var(--appbar) + 8px);
    right: calc(env(safe-area-inset-right) + 8px);
    bottom: auto;
    left: auto;
    max-width: calc(var(--side) - 16px);
  }

  /* Board wrappers: each game's portrait rule subtracts its own controls from the height; here the controls
     live in the right column, so the board only has to fit --board-fit. */
  .atoms-shell .at-board-wrap,
  .color-sweeper-shell .color-board-wrap,
  .lits-shell .lits-board-wrap,
  .mambo-shell .mambo-board-wrap,
  .pipes-shell .pipes-board-wrap,
  .shikaku-shell .sk-board-wrap,
  .skyscrapers-shell .sky-board-wrap {
    width: var(--board-fit);
  }
  /* Codebreak's guess history scrolls inside the board area, so that area takes exactly the column height: size
     containment stops a long history from growing the grid rows. */
  .codebreak-shell .shell-board-area {
    align-self: stretch;
    width: 100%;
    align-items: stretch;
    contain: size;
  }
  /* Input pads sized for the phone's width get the narrower right column instead. */
  .codebreak-shell .cb-slot {
    --slot: min(44px, calc((var(--side) - 48px - (var(--slots, 5) - 1) * 8px) / var(--slots, 5)));
  }
  .codebreak-shell .cb-draft-row {
    flex-wrap: wrap;
    gap: var(--space-2);
  }
  .mambo-shell .mambo-touch-entry {
    grid-template-columns: repeat(3, minmax(0, 64px));
  }
  /* Chromedoku's frame adds row and column labels around the cells. */
  :root .chromedoku-shell #chromedoku-host .board-frame {
    width: min(560px, calc(var(--fit-h) - 24px), var(--fit-w));
  }
  /* Tall boards (12 × 18, 15 × 20): the height decides the width. */
  .mosaic-shell .mo-board-wrap {
    width: min(520px, var(--fit-w), calc(var(--fit-h) * var(--ratio)));
  }
  /* Threefold: card rows share the height left after the found-sets tray and the status line (about 100px). */
  .sets-shell .st-board-wrap {
    width: min(
      460px,
      var(--fit-w),
      calc((var(--fit-h) - 100px - (var(--rows, 4) - 1) * 8px) / var(--rows, 4) * 4.65 + 16px)
    );
  }
}