/* The header sits outside the game layout but has to line up with it, so the rail size lives on the document. */
html {
  --ad-rail-width: 300px;
  --ad-rail-height: 250px;
  scrollbar-gutter: auto;
}

.game-layout {
  --shell-width: 100%;
}

.site-header {
  box-shadow: none;
}

/* The table runs edge to edge, so the header lines up with it: the nav stops where the ad rail starts. */
.site-header__inner {
  max-width: none;
  padding-right: calc(var(--ad-rail-width) + var(--shell-gutter));
}

/* A game page is a table, not a document: the table fills the window below the header, and the rules and the footer wait underneath it.
   The small viewport keeps the table the same size while a phone's address bar comes and goes; only a real resize moves it. */
.site-main.game-main {
  flex: none;
}

.game-main > .game-layout {
  height: calc(100svh - var(--site-header-height));
  overflow: hidden;
}

.site-main.game-main {
  display: grid;
  min-height: 0;
  padding: 0;
  max-width: none;
  width: 100%;
  margin-inline: 0;
  background: transparent;
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--ad-rail-width);
  gap: 0;
  min-height: 0;
}

/* The game scales itself to fit the stage, so the stage never grows for it. */
.game-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.game-stage > * {
  min-height: 0;
}

/* Taps and drags on the table are moves, never text selection or a long-press menu. A modal dialog
   is reset to selectable by the browser, so the game's own panels are named too. */
.game-stage,
.game-stage dialog {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.game-stage :is(input, textarea, [contenteditable]) {
  user-select: text;
  -webkit-user-select: text;
}

.ad-rail {
  width: var(--ad-rail-width);
  min-height: var(--ad-rail-height);
  align-self: stretch;
  margin: 0;
  background: var(--rail);
}

@media (max-width: 64rem) {
  /* Stacked on a narrow screen, a short mobile banner sits under the table and both share the first screen. */
  html {
    --ad-rail-width: 320px;
    --ad-rail-height: 100px;
  }

  /* The banner is under the table now, so nothing is holding the nav back from the edge. */
  .site-header__inner {
    padding-right: var(--shell-gutter);
  }

  .game-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) var(--ad-rail-height);
  }

  .ad-rail {
    display: grid;
    place-items: center;
    width: 100%;
    height: var(--ad-rail-height);
  }

  .ad-rail > * {
    max-width: var(--ad-rail-width);
  }
}

/* The rules, under the table and above the footer: prose on the page, read once the table has been scrolled past. */
.game-guide {
  position: relative;
  z-index: 1;
  padding-block: 2.5rem 3rem;
}

.game-guide h3 {
  margin-top: 1.75rem;
}

/* A question is a heading of its own, so a search engine can lift it with its answer. */
.game-guide h4 {
  margin: 1.25rem 0 0.25rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
}

.game-guide__more ul,
.game-guide__posts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.game-guide__more ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}

.game-guide__posts li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}

.game-guide__posts li + li {
  margin-top: 0.5rem;
}

.game-guide__posts time {
  color: var(--cream-soft);
  font-size: 0.875rem;
}

/* The felt a game is played on: a table lit from above, laid across whatever space the page gives
   the game. It is the page's, not the game's, so it is there before the game has mounted. */
.felt {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--table-center) 65%, var(--rail)), var(--table-edge));
}

/* The weave is `/img/felt-nap.svg`, noise lit from one side so it reads as nap rather than grain.
   The tile is sized in device pixels, so it keeps its grain instead of coarsening as the page is
   zoomed in and washing out zoomed out; the game sets --pixel-ratio through useFeltPixelRatio. */
.felt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .38;
  mix-blend-mode: soft-light;
  pointer-events: none;
  background-size: calc(320px / var(--pixel-ratio, 1));
  background-image: url('/img/felt-nap.svg');
}