/* Game page. Loads after portal-shell.css and adds only what a title page needs
   that the portal home does not: the play stage and a controls list. Every
   colour, space and stroke below is a token from the kit — no new values. */

/* ---------- Hero ---------- */

/* Matches .hero's rhythm but drops the bottom slab of space, because the stage
   follows immediately and a game page should put the game near the top. */
.game-hero { display: grid; gap: var(--cn-space-4); justify-items: start; padding-block: var(--cn-space-12) var(--cn-space-8); }
.game-hero .game-title { display: block; }
.game-hero .body-l { margin: 0; }
.game-kicker { color: var(--cn-color-muted); font-variant-numeric: tabular-nums; margin: 0; }
.play-opens { font-variant-numeric: tabular-nums; margin: 0; }

/* ---------- Launch ---------- */

/* The game is a link, not an embed, and that is a constraint rather than a
   preference: the distribution sends `frame-ancestors 'none'` on every response,
   so the game's own page cannot be framed even by us, on our own origin.
   Loosening that to 'self' is a security-header change and belongs in its own
   reviewed release, not smuggled into a catalog update.
   So this is built to read as a play surface rather than a text link: cover art
   at the arena's real proportions, with one unmissable action over it. */
.launch {
  border: var(--cn-stroke) solid var(--cn-color-ink);
  border-radius: 0.75rem;                       /* 12px: this box holds a figure */
  box-shadow: var(--cn-offset-figure) var(--cn-offset-figure) 0 var(--cn-color-ink);
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}
.launch-art { aspect-ratio: 960 / 560; display: block; height: auto; object-fit: cover; width: 100%; }

/* The action sits on the art, so it needs its own opaque field to stay legible
   over the arena rather than relying on the image behind it. Paper on Ink is
   15.8:1 — the same pairing the .slab uses, and for the same reason. */
.launch-action {
  align-items: center;
  background: var(--cn-color-ink);
  border-radius: var(--cn-radius-control);
  color: var(--cn-color-canvas);
  display: flex;
  font-family: var(--cn-font-display);
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 600;
  gap: var(--cn-space-3);
  left: var(--cn-space-6);
  padding: var(--cn-space-3) var(--cn-space-6);
  position: absolute;
  top: var(--cn-space-6);
}

/* A play triangle drawn in Signal, the one accent, on the one thing we want
   pressed on this page. */
.launch-cue {
  border-block: 0.5em solid transparent;
  border-inline-start: 0.8em solid var(--cn-color-amber);
  border-inline-end: 0;
  display: block;
  flex: 0 0 auto;
  height: 0;
  width: 0;
}

.launch:hover .launch-text { text-decoration: underline; text-decoration-color: var(--cn-color-amber); text-decoration-thickness: 3px; }
.launch:focus-visible { outline: var(--cn-stroke) solid var(--cn-color-amber); outline-offset: 4px; }

/* The play section is a bare .wrap, not a .section, so it carries no block
   padding of its own and the note would otherwise sit on the rule beneath it. */
.launch-note { margin-block: var(--cn-space-4) var(--cn-space-16); max-width: 62ch; }

@media (max-width: 30rem) {
  /* Center the action in the clear middle of every cover. The title art is split
     between top-set and bottom-set wordmarks, so either edge hides the identity
     on at least one title at phone widths. */
  .launch-action {
    justify-content: center;
    left: var(--cn-space-6);
    right: var(--cn-space-6);
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ---------- Controls ---------- */

/* A description list, not a table: each control is one term and one answer, and
   it collapses to stacked rows on a narrow screen without a horizontal scroll. */
.controls { display: grid; gap: var(--cn-space-3) var(--cn-space-6); grid-template-columns: max-content 1fr; margin: 0; }
.controls dt { font-weight: 600; }
.controls dd { margin: 0; }

/* Panel fill against Ink text, on the Wash callout: the key face has to read as
   a physical key without borrowing the accent, which is reserved for one use. */
.controls kbd {
  background: var(--cn-color-panel);
  border: var(--cn-stroke-small) solid var(--cn-color-ink);
  border-radius: var(--cn-radius-rule);
  font-family: var(--cn-font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.1rem 0.35rem;
}

@media (max-width: 30rem) {
  .controls { grid-template-columns: 1fr; gap: var(--cn-space-1) 0; }
  .controls dd { margin-block-end: var(--cn-space-3); }
}