/*
 * THE page layout, the only one: a grid on the dynamic viewport with three
 * areas and three modes. A game fills the areas and never lays out the page.
 *
 *   <div class="shell">
 *     <header class="shell-header">…brand bar, price strip, stages…</header>
 *     <main class="shell-board">…the plot…</main>
 *     <section class="shell-controls">…</section>
 *   </div>
 *
 * Portrait phone: three rows; the board takes every pixel the header and
 * controls leave (never under --plot-min-h, below that the page scrolls).
 * Landscape phone: the header across the top, controls beside the board.
 * Desktop: the column widens with the window; the controls stay at the
 * source's 600px column, centred under the board.
 */

.shell {
  /* the column the game lives in */
  --shell-column: 600px;
  --shell-pad: 18px;
  --shell-pad-bottom: 16px;

  display: grid;
  min-height: 100vh;
  min-height: 100dvh;
  grid-template-columns: minmax(0, var(--shell-column));
  grid-template-rows: auto minmax(var(--plot-min-h), 1fr) auto;
  grid-template-areas:
    "header"
    "board"
    "controls";
  justify-content: center;
  /* the top padding is the demo notch's height, if any */
  padding:
    var(--fun-mode-height, 0px)
    max(var(--shell-pad), env(safe-area-inset-right, 0px))
    calc(var(--shell-pad-bottom) + env(safe-area-inset-bottom, 0px))
    max(var(--shell-pad), env(safe-area-inset-left, 0px));
}

.shell-header {
  grid-area: header;
  min-width: 0;
}

/* Positioned: canvases and tap targets fill it absolutely. Clipped: glows
   and the head's halo may reach past the edge. */
.shell-board {
  grid-area: board;
  position: relative;
  min-width: 0;
  min-height: var(--plot-min-h);
  overflow: hidden;
}

.shell-controls {
  grid-area: controls;
  justify-self: center;
  width: 100%;
  max-width: calc(600px - 2 * var(--shell-pad));
  min-width: 0;
}

/* Demo mode: a notch above the header; the shell reserves its height. */
.shell.is-demo {
  --fun-mode-height: calc(28px + env(safe-area-inset-top, 0px));
}

@media (max-width: 639.98px) {
  .shell {
    --shell-pad: 12px;
    --shell-pad-bottom: 12px;
  }
}

@media (min-width: 1024px) {
  .shell {
    --shell-column: min(960px, 70vw);
  }
}

/* a phone on its side */
@media (orientation: landscape) and (max-height: 500px) {
  .shell {
    --shell-pad: 12px;
    --shell-pad-bottom: 12px;
    height: 100dvh;
    grid-template-columns: minmax(0, 1fr) minmax(240px, 36%);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "header header"
      "board controls";
    column-gap: var(--shell-pad);
  }
  .shell-board {
    min-height: 0;
  }
  .shell-controls {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}