/* ============================================================================
   PIPE PURSUIT - game.css
   The host page and the game module. Trade-catalog Americana: warm paper
   ground, hard ink, copper as material, one signal red held for action.

   Tokens are inlined here so this folder is self-contained and can be opened
   straight from the filesystem. They match docs/tokens.css exactly.
   ========================================================================== */

:root {
  /* paper */
  --bone:        oklch(96.5% 0.012 82);
  --bone-deep:   oklch(93%   0.016 82);
  --bone-lift:   oklch(98.5% 0.008 82);

  /* ink */
  --ink:         oklch(21%   0.018 265);
  --ink-deep:    oklch(15.5% 0.020 265);
  --ink-muted:   oklch(46%   0.014 265);

  /* material and action */
  --copper:      oklch(63%   0.115 48);
  --copper-lift: oklch(74%   0.105 55);
  --signal:      oklch(53%   0.190 27);
  --signal-lift: oklch(64%   0.190 28);
  --valley:      oklch(52%   0.045 120);

  /* Fixed values for surfaces that are always dark, in either theme: the
     conversion drench and the signal-filled button. These never flip. */
  --bone-fixed:       oklch(96.5% 0.012 82);
  --bone-fixed-72:    oklch(96.5% 0.012 82 / 0.72);
  --bone-fixed-55:    oklch(96.5% 0.012 82 / 0.55);
  --bone-fixed-40:    oklch(96.5% 0.012 82 / 0.40);
  --bone-fixed-08:    oklch(96.5% 0.012 82 / 0.08);
  --copper-lift-fixed: oklch(74% 0.105 55);
  --ink-drench:       oklch(15.5% 0.020 265);

  /* lines. there are almost no shadows in this system */
  --rule:         oklch(21% 0.018 265 / 0.14);
  --rule-on-ink:  oklch(96.5% 0.012 82 / 0.16);
  --rule-w:       1px;

  --font-display: "ABC Monument Grotesk", "Archivo", system-ui, sans-serif;
  --font-body:    "Founders Grotesk Text", "Public Sans", system-ui, sans-serif;
  --font-spec:    "ABC Monument Grotesk Semi-Mono", "Archivo", ui-monospace, monospace;

  --t-display-l: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --t-h2:        clamp(1.5rem, 1.25rem + 1.2vw, 2rem);
  --t-body-l:    clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --t-body:      1rem;
  --t-small:     0.875rem;
  --t-spec:      0.75rem;

  --lh-heading: 1.12;
  --lh-body:    1.65;
  --tr-heading: -0.015em;
  --tr-spec:    0.12em;

  --s-2: 0.5rem;  --s-3: 0.75rem; --s-4: 1rem;
  --s-6: 1.5rem;  --s-8: 2rem;    --s-10: 2.5rem; --s-14: 3.5rem;

  --section-y:       clamp(3rem, 2.25rem + 3.5vw, 5.5rem);
  --section-y-tight: clamp(2rem, 1.6rem + 1.6vw, 3rem);
  --container:  1100px;
  --gutter:     clamp(1.25rem, 0.75rem + 2vw, 2.5rem);

  --radius: 2px;
  --target-min: 44px;

  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-move:  cubic-bezier(0.25, 1, 0.5, 1);
  --d-state: 140ms;
  --d-panel: 200ms;
}

/* Dark mode is a tuned palette, not an inversion. The playfield itself is
   always dark; only the page around it follows the visitor's theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bone:      oklch(19% 0.014 265);
    --bone-deep: oklch(15% 0.016 265);
    --bone-lift: oklch(24% 0.014 265);
    --ink:       oklch(94% 0.010 82);
    --ink-deep:  oklch(12% 0.018 265);
    --ink-muted: oklch(70% 0.012 82);
    --rule:      oklch(94% 0.010 82 / 0.16);
    --copper:    oklch(74% 0.105 55);
    --signal:    oklch(64% 0.190 28);
  }
}

/* ---------------------------------------------------------------------------
   Base
   ------------------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background-color: var(--bone);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: var(--lh-heading);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
  margin: 0;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.spec {
  font-family: var(--font-spec);
  font-size: var(--t-spec);
  letter-spacing: var(--tr-spec);
  text-transform: uppercase;
  font-weight: 600;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

.pp-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--bone);
  padding: 12px 20px; z-index: 50;
  font-family: var(--font-display); font-weight: 600;
}
.skip:focus { left: 12px; top: 12px; }

/* ---------------------------------------------------------------------------
   Masthead
   ------------------------------------------------------------------------ */

.pp-top {
  border-bottom: var(--rule-w) solid var(--rule);
  background: var(--bone-lift);
}

.pp-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  min-height: 60px;
  flex-wrap: wrap;
}

.pp-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: var(--tr-heading);
  text-decoration: none;
}

.pp-brand span { color: var(--ink-muted); font-weight: 500; }

.pp-top__meta { color: var(--ink-muted); }

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

.pp-hero {
  padding-block: var(--section-y) var(--section-y-tight);
}

.pp-eyebrow { color: var(--copper); margin-bottom: var(--s-4); }

.pp-hero h1 {
  font-size: var(--t-display-l);
  max-width: 14ch;
}

.pp-lede {
  margin-top: var(--s-4);
  font-size: var(--t-body-l);
  color: var(--ink-muted);
  max-width: 52ch;
}

/* ---------------------------------------------------------------------------
   The game module
   ------------------------------------------------------------------------ */

.pp-module { padding-bottom: var(--section-y-tight); }

.pp-frame {
  background: var(--bone-lift);
  border: var(--rule-w) solid var(--rule);
  border-radius: var(--radius);
  padding: var(--s-3);
}

.pp-stagewrap {
  background: var(--ink-deep);
  border-radius: var(--radius);
}

.pp-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 15 / 16;
  max-height: min(78vh, 760px);
  background: var(--ink-deep);
  border-radius: var(--radius);
  overflow: hidden;
}

#pp-canvas {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  cursor: crosshair;
  border-radius: var(--radius);
}

#pp-canvas:focus-visible {
  outline: 2px solid var(--copper-lift);
  outline-offset: -2px;
}

/* Fullscreen: the stage takes the whole screen and the letterbox handles the
   aspect difference. */
.pp-stagewrap:fullscreen { display: grid; place-items: stretch; }
.pp-stagewrap:fullscreen .pp-stage {
  aspect-ratio: auto;
  max-height: none;
  height: 100vh;
}
.pp-stagewrap:-webkit-full-screen .pp-stage {
  aspect-ratio: auto;
  max-height: none;
  height: 100vh;
}

/* ---- control bar ------------------------------------------------------- */

.pp-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  align-items: center;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: var(--rule-w) solid var(--rule);
}

.pp-bar__spacer { flex: 1 1 auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--target-min);
  padding: 0 1.1rem;
  border-radius: var(--radius);
  border: var(--rule-w) solid transparent;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-small);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  color: var(--ink);
  transition:
    background-color var(--d-state) var(--ease-enter),
    border-color var(--d-state) var(--ease-enter),
    color var(--d-state) var(--ease-enter);
}

.btn--fill { background: var(--signal); color: var(--bone-fixed); }
.btn--fill:hover { background: oklch(47% 0.19 27); }

.btn--ink { background: var(--ink); color: var(--bone); }
.btn--ink:hover { background: var(--ink-deep); }

.btn--line { border-color: var(--rule); color: var(--ink); }
.btn--line:hover { border-color: var(--copper); }

.btn[aria-pressed="true"] {
  border-color: var(--copper);
  background: color-mix(in oklch, var(--copper) 12%, transparent);
}

.btn[disabled] {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.btn--sm { min-height: 40px; padding: 0 0.85rem; font-size: 0.8125rem; }

/* ---- control legend ---------------------------------------------------- */

.pp-legend {
  margin-top: var(--s-8);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: var(--rule-w) solid var(--rule);
}

.pp-legend__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  padding-block: 0.7rem;
  border-bottom: var(--rule-w) solid var(--rule);
}

.pp-legend__k { color: var(--ink-muted); }
.pp-legend__v { color: var(--ink); text-align: right; }

.pp-note {
  margin-top: var(--s-4);
  color: var(--ink-muted);
  font-size: var(--t-small);
  max-width: 62ch;
}

/* ---- power-up reference ------------------------------------------------ */

.pp-kit {
  margin-top: var(--section-y-tight);
  border-top: var(--rule-w) solid var(--rule);
  padding-top: var(--s-6);
}

.pp-kit h2 { font-size: var(--t-h2); }

.pp-kit__list {
  margin: var(--s-6) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

.pp-kit__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  padding-block: 0.7rem;
  border-bottom: var(--rule-w) solid var(--rule);
}

.pp-kit__name { font-family: var(--font-display); font-weight: 600; }
.pp-kit__note { color: var(--ink-muted); text-align: right; font-size: var(--t-small); }

/* ---------------------------------------------------------------------------
   Conversion block. Outside the game so the page still works as a page.
   ------------------------------------------------------------------------ */

.pp-cta {
  margin-top: var(--section-y);
  background: var(--ink-drench);
  color: var(--bone-fixed);
  padding-block: var(--section-y);
}

.pp-cta h2 { font-size: var(--t-h2); color: var(--bone-fixed); max-width: 20ch; }
.pp-cta__eyebrow { color: var(--copper-lift-fixed); margin-bottom: var(--s-4); }
.pp-cta p { color: var(--bone-fixed-72); margin-top: var(--s-3); max-width: 52ch; }

.pp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

.pp-cta .btn--ghost {
  border-color: var(--bone-fixed-40);
  color: var(--bone-fixed);
}
.pp-cta .btn--ghost:hover {
  border-color: var(--bone-fixed);
  background: var(--bone-fixed-08);
}

.pp-cta__meta {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  border-top: var(--rule-w) solid var(--rule-on-ink);
  color: var(--bone-fixed-55);
}

.pp-foot {
  padding-block: var(--s-8);
  color: var(--ink-muted);
}

.pp-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  justify-content: space-between;
  align-items: baseline;
}

/* ---------------------------------------------------------------------------
   Wider viewports
   ------------------------------------------------------------------------ */

@media (min-width: 720px) {
  .pp-legend { grid-template-columns: 1fr 1fr; column-gap: var(--s-10); }
  .pp-kit__list { grid-template-columns: 1fr 1fr; column-gap: var(--s-10); }
  .pp-frame { padding: var(--s-4); }
}

@media (min-width: 1024px) {
  .pp-stage { aspect-ratio: 15 / 16; max-height: min(80vh, 820px); }
}

/* Narrow viewports: the canvas letterboxes inside a shorter stage and the
   touch controls carry the interaction. */
@media (max-width: 560px) {
  .pp-stage { max-height: 66vh; }
  .pp-bar .btn { flex: 1 1 auto; }

  /* Two columns of tracked type get tight below 560. Stack them instead of
     letting either side wrap mid-phrase. */
  .pp-legend__row,
  .pp-kit__item {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
  .pp-legend__v,
  .pp-kit__note { text-align: left; }
}

/* ---------------------------------------------------------------------------
   Embed mode. Opt in with ?embed=1 (see the inline script at the top of
   index.html), so the game module can drop into an iframe on another page
   without carrying a second masthead, a duplicate headline, or its own
   conversion block into the frame. The host page already provides those.

   Additive only: the default load, with no query string, is untouched.
   ------------------------------------------------------------------------ */

body.is-embed {
  background-color: var(--ink-deep);
  overflow: hidden;
}

body.is-embed .skip,
body.is-embed .pp-top,
body.is-embed .pp-hero,
body.is-embed .pp-legend,
body.is-embed .pp-note,
body.is-embed .pp-kit,
body.is-embed .pp-cta,
body.is-embed .pp-foot { display: none; }

body.is-embed .pp-module { padding-bottom: 0; }
body.is-embed .wrap { max-width: none; padding-inline: 0; }

/* The frame takes the whole frame height and the stage takes what is left
   after the control row, so the canvas fills the host page's box at whatever
   aspect ratio that box happens to be. */
body.is-embed .pp-frame {
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: var(--s-2);
  border: 0;
  background: var(--ink-deep);
}

body.is-embed .pp-stagewrap { flex: 1 1 auto; min-height: 0; }

body.is-embed .pp-stage {
  aspect-ratio: auto;
  height: 100%;
  max-height: none;
}

body.is-embed .pp-bar {
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top-color: var(--rule-on-ink);
  flex-wrap: nowrap;
  overflow-x: auto;
}

/* Only the colors change. The buttons keep the .btn--sm sizing they already
   carry, so the touch targets in an embed match the ones on the full page. A
   narrow frame scrolls the row rather than shrinking the controls. */
body.is-embed .pp-bar .btn {
  flex: 0 0 auto;
  color: var(--bone-fixed);
  border-color: var(--rule-on-ink);
}

body.is-embed .pp-bar .btn--ink {
  background: var(--copper-lift-fixed);
  color: var(--ink-drench);
}

body.is-embed .pp-bar .btn--line:hover { border-color: var(--copper-lift-fixed); }

/* ---------------------------------------------------------------------------
   Reduced motion. The game stays fully playable; the presentation stops
   moving. Screen shake, the attract loop, and particle density are handled in
   the game code, keyed off the same query.
   ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}