/* base.css — design tokens (source of truth for the look; design/08-art.md).
   Act 1 "Home & Neighborhood" palette family: meadow-at-dusk — saturated,
   glowy characters on a deep green night (Kurzgesagt register, not babyish).
   Hazards share ONE hue family (amber) everywhere — color is pedagogy. */

:root {
  /* Act 1 palette */
  --bg: #0e1613;
  --bg-deep: #0a100d;
  --surface: #17241e;
  --surface-2: #1e3028;
  --ink: #eefcf3;
  --ink-soft: #9dbcaa;
  --ink-faint: #5d7a6b;

  --pip: #ffd166;            /* Pip the message-spark */
  --pip-glow: rgba(255, 209, 102, 0.45);
  --fragment: #6ee7ff;       /* fragment bodies */
  --fragment-glow: rgba(110, 231, 255, 0.4);
  --fragment-lost: #3a5a66;
  --fragment-corrupt: #ff5d8f; /* scrambled bits — glitch pink */
  --copy: #b58cff;           /* duplicate = translucent twin, violet */

  --wire: #2e4438;
  --wire-lit: #57806a;
  --road-pick: #7bd88f;      /* highlighted / chosen road */

  --hazard: #f4a259;         /* hazard hue family: storm, drizzle, gust */
  --hazard-soft: rgba(244, 162, 89, 0.18);
  --danger: #e05a7a;         /* loss, corruption */
  --safe: #7bd88f;
  --star: #ffd166;

  --bw: #7bd88f;             /* bandwidth meter = energy green */
  --deadline: #f4a259;       /* deadline meter = warm clock amber */

  --fog: rgba(158, 187, 172, 0.14);
  --fog-edge: rgba(158, 187, 172, 0.05);

  --stroke-w: 2px;           /* 2px rounded stroke, everywhere */
  --radius: 12px;
  --radius-sm: 8px;
  --space: 8px;

  --touch-min: 44px;         /* minimum touch target (design/06) */

  --font: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg-deep);
  color: var(--ink);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button {
  font-family: var(--font);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* Biome palette families (design/08): the ENVIRONMENT shifts per act;
   characters and the hazard hue family stay constant — color is pedagogy. */
body.act-2 { /* Backbone City: neon dusk */
  --bg: #131022;
  --bg-deep: #0c0a19;
  --surface: #1d1833;
  --surface-2: #2a2149;
  --ink-soft: #b3a8d1;
  --ink-faint: #6f6592;
  --wire: #3b3159;
  --wire-lit: #7263a5;
  --road-pick: #6ee8c8;
  --safe: #6ee8c8;
  --fog: rgba(170, 160, 210, 0.14);
  --fog-edge: rgba(170, 160, 210, 0.05);
}

body.act-4 { /* The Far Reaches: warm ochre — big skies, sparse grid */
  --bg: #1a1410;
  --bg-deep: #120d0a;
  --surface: #2a2118;
  --surface-2: #3b2f22;
  --ink-soft: #d1bfa4;
  --ink-faint: #8d7a60;
  --wire: #4a3b28;
  --wire-lit: #8a6f4d;
  --road-pick: #ffc966;
  --safe: #ffc966;
  --fog: rgba(215, 185, 140, 0.14);
  --fog-edge: rgba(215, 185, 140, 0.05);
}

body.act-5 { /* The Hostile Zone: inky violet — rough neighborhood */
  --bg: #16101f;
  --bg-deep: #0e0a16;
  --surface: #221831;
  --surface-2: #302145;
  --ink-soft: #bda8d6;
  --ink-faint: #776394;
  --wire: #423156;
  --wire-lit: #79619c;
  --road-pick: #e08cff;
  --safe: #e08cff;
  --fog: rgba(190, 160, 225, 0.15);
  --fog-edge: rgba(190, 160, 225, 0.05);
}

body.act-3 { /* The Ocean Crossing: deep blues */
  --bg: #0a141f;
  --bg-deep: #060d16;
  --surface: #112438;
  --surface-2: #19344e;
  --ink-soft: #9cc2dc;
  --ink-faint: #587e9a;
  --wire: #23445e;
  --wire-lit: #4a80a8;
  --road-pick: #6fd6ff;
  --safe: #6fd6ff;
  --fog: rgba(150, 195, 225, 0.15);
  --fog-edge: rgba(150, 195, 225, 0.05);
}

.act-chip { margin-left: auto; }
#seed-chip { margin-left: 10px; }

/* on a 6" portrait screen the act label wins; the seed lives in the URL */
@media (max-width: 430px) {
  #seed-chip { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}