/* =============================================================================
 * text-game.css — styling for the full-screen text-game view (.plane--game)
 * -----------------------------------------------------------------------------
 * The view reuses the site's .plane machinery (fixed overlay, slide-in, page
 * dim/lock, reduced-motion) from styles.css — this file only lays out the
 * game-specific chrome: header + a full-height terminal, and nothing else (no
 * footer, so the mobile keyboard can never push one over the prompt).
 * Everything flows through design tokens, so dark mode flips for free.
 * ========================================================================== */

/* Column layout: header (sticky) · terminal (grows to fill the rest). */
.plane--game {
  display: flex;
  flex-direction: column;
  background: var(--cream);
  /* Size to the VISUAL viewport, not the layout viewport, so the mobile soft
     keyboard can't hide the prompt: the base .plane is `inset:0` (full layout
     viewport, which does NOT shrink for the keyboard). We release the bottom
     pin and take a JS-driven height instead. When the keyboard opens, script
     sets `--game-vh` to visualViewport.height so the prompt rides just
     above it; with no JS / no visualViewport support it falls back to 100dvh
     (then 100vh for old engines) — full screen, unchanged behaviour. */
  bottom: auto;
  height: 100vh;
  height: var(--game-vh, 100dvh);
}

/* Header reuses .plane__bar; the brand sits where the back button normally is. */
.game__bar { flex: none; }
.game__brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--ink); text-decoration: none;
}
.game__brand .nav__logo { width: 26px; height: 26px; display: inline-flex; }
.game__brand .nav__logo svg { width: 100%; height: 100%; }
.game__exit { cursor: pointer; padding: 0.5rem 0.85rem; font-size: 0.8rem; }

/* Terminal stage: centres the terminal and lets it grow to fill the viewport
   between the sticky header and the footer. */
.game__stage {
  flex: 1 1 auto;
  display: flex;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 2.5rem) var(--gutter);
  min-height: 0;                 /* allow the terminal to own the scroll */
}

/* Full-height variant of the shared .terminal look. */
.terminal--game {
  display: flex; flex-direction: column;
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
}
.terminal--game .terminal__body {
  flex: 1 1 auto;
  height: auto;                  /* override the hero terminal's fixed frame */
  min-height: 320px;
  font-size: 0.9rem;
  line-height: 1.65;
}

/* Reduced motion: the shared styles.css block already zeroes the plane slide
   and the caret blink — nothing extra needed here. */

@media (max-width: 720px) {
  .game__stage { padding: 0.9rem var(--gutter) 1.2rem; }
  .terminal--game .terminal__body { font-size: 0.84rem; min-height: 260px; }
  .game__crumb { display: none; }
}

/* ---- reaction toast (bottom-right) ---------------------------------------
   A short verdict pill a game can flash via TextGame.toast(text, tone) — e.g.
   DEV LIFE's "Iryna" moral judgements. Terminal-flavoured (dark in both
   themes, like the terminal itself), pointer-transparent so it never blocks
   the tap-to-focus handler, and absolutely positioned inside the plane so it
   rides above the mobile keyboard (the plane's box is viewport-fitted).
   The fade transition is zeroed by the shared reduced-motion block. */
.game__toast {
  position: absolute;
  right: 16px;
  bottom: 20px;
  z-index: 5;
  max-width: min(72vw, 320px);
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  background: #24211b;
  border: 1px solid #3a362c;
  color: #ece7dc;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s var(--ease), transform 0.45s var(--ease);
}
.game__toast.is-shown { opacity: 1; transform: none; }
.game__toast--good { border-color: #7fb08a; color: #a9d2b2; }   /* tok-celebrate register */
.game__toast--bad  { border-color: #b06a5f; color: #e0a79e; }   /* muted ember, same register */