/* Game of Life — sandbox
   Design: "thermogram on graph paper." Neutral cool ground, monospace
   instrument readouts, single cyan signal accent, and a heat ramp (read by
   the canvas renderer) that encodes cell age. All presentational values live
   here as custom properties so the canvas and the DOM chrome stay in sync and
   dark mode is a token swap. */

:root {
  /* Type */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;

  /* Chrome — light "graph paper" */
  --bg: #e7eaef;
  --surface: #fbfcfd;
  --surface-2: #eef1f5;
  --border: #ccd3dc;
  --text: #16202b;
  --text-dim: #5c6774;
  --accent: #0e8ca8;          /* cyan signal */
  --accent-strong: #0b7189;
  --accent-contrast: #ffffff;
  --danger: #b4453a;

  /* Board */
  --grid-bg: #e0e5ec;         /* dead area — reads as a distinct sheet */
  --grid-line: rgba(30, 41, 59, 0.07);
  --cell-solid: #26323f;      /* when age-coloring is off */
  --trail: rgba(226, 120, 40, 0.22);

  /* Heat ramp — young (cool) to old (hot). Canvas interpolates across these. */
  --heat-0: #2b3a9e;
  --heat-1: #6a3d9a;
  --heat-2: #b83280;
  --heat-3: #e8663c;
  --heat-4: #f2c14e;

  --bar-h: 3.75rem;
  --radius: 0.6rem;
  --shadow: 0 0.5rem 1.5rem rgba(20, 30, 45, 0.14);
}

:root[data-theme="dark"] {
  --bg: #0d1117;
  --surface: #161b22;
  --surface-2: #1c232c;
  --border: #2a333e;
  --text: #e6edf3;
  --text-dim: #8b98a5;
  --accent: #22d3ee;
  --accent-strong: #38dbf3;
  --accent-contrast: #06222b;
  --danger: #e06a5e;

  --grid-bg: #090d12;         /* board darker than page → cells glow */
  --grid-line: rgba(130, 150, 170, 0.09);
  --cell-solid: #e8edf2;
  --trail: rgba(242, 193, 78, 0.16);
  /* heat ramp is shared — it reads well on both grounds */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#app {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  max-width: 900px;
  margin: 0 auto;
}

/* --- Top bar: wordmark + instrument readouts --------------------------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--bar-h);
  padding: 0 0.9rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.wordmark {
  font-weight: 650;
  letter-spacing: -0.01em;
  font-size: 0.98rem;
  white-space: nowrap;
}
.wordmark .dot { color: var(--accent); }
.readouts {
  margin-left: auto;
  display: flex;
  gap: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--text-dim);
}
.readout b {
  display: block;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.icon-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  width: 2.1rem; height: 2.1rem;
  border-radius: var(--radius);
  display: grid; place-items: center;
  cursor: pointer;
  font-size: 0.95rem;
}
.icon-btn[hidden] { display: none; }

/* --- Board (hero) ------------------------------------------------------ */
.board-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  background: var(--grid-bg);
  touch-action: none;   /* we own all gestures */
}
#board { display: block; width: 100%; height: 100%; }

.mode-pill {
  position: absolute;
  top: 0.6rem; left: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--border);
  color: var(--text-dim);
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.mode-pill b { color: var(--accent); }

/* --- Transport bar (thumb zone) --------------------------------------- */
.transport {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  flex: 0 0 auto;
}
.play {
  flex: 0 0 auto;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 1.15rem;
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
}
.play:active { transform: scale(0.94); }
.play.running { box-shadow: 0 0 0 0.32rem color-mix(in srgb, var(--accent) 26%, transparent); }
.ghost-btn {
  flex: 0 0 auto;
  min-width: 2.7rem; height: 2.7rem;
  padding: 0 0.7rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.95rem;
  cursor: pointer;
  display: grid; place-items: center;
}
.ghost-btn:active { background: var(--border); }

.speed {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-dim);
  min-width: 0;
}
.speed input { flex: 1 1 auto; min-width: 0; accent-color: var(--accent); }
.speed .val { width: 3.6rem; text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* --- Tools row --------------------------------------------------------- */
.tools {
  display: flex;
  gap: 0.4rem;
  padding: 0 0.8rem 0.7rem;
  background: var(--surface);
  border-top: 1px solid var(--surface);   /* seamless with transport */
  flex: 0 0 auto;
}
.chip {
  flex: 1 1 0;            /* share the row so nothing overflows */
  min-width: 0;
  height: 2.4rem;
  padding: 0;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem;
  white-space: nowrap;
  overflow: hidden;
}
.chip .ico { font-size: 1.05rem; line-height: 1; }
.chip .lbl { display: none; text-overflow: ellipsis; overflow: hidden; } /* icon-only by default */
.chip[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
/* Enough width for five labelled chips → show the labels. */
@media (min-width: 34rem) {
  .chip { padding: 0 0.85rem; }
  .chip .ico { font-size: 0.95rem; }
  .chip .lbl { display: inline; }
}

/* --- Slide-up sheets (settings, stamps) -------------------------------- */
.sheet-scrim {
  position: fixed; inset: 0;
  background: rgba(10, 16, 24, 0.42);
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
  z-index: 20;
}
.sheet-scrim.open { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: 900px;
  margin: 0 auto;
  background: var(--surface);
  border-top-left-radius: 1.1rem;
  border-top-right-radius: 1.1rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: translateY(102%);
  transition: transform 0.26s cubic-bezier(0.22, 0.61, 0.36, 1);
  z-index: 21;
  max-height: 78dvh;
  overflow-y: auto;
  padding: 0.5rem 1rem 1.4rem;
}
.sheet.open { transform: translateY(0); }
.sheet-grip {
  width: 2.4rem; height: 0.28rem;
  background: var(--border);
  border-radius: 999px;
  margin: 0.5rem auto 0.8rem;
}
.sheet h2 {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin: 1.1rem 0 0.6rem;
}
.sheet h2:first-of-type { margin-top: 0.2rem; }

.field { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.field label { font-size: 0.86rem; flex: 0 0 auto; }
select, input[type="text"] {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.5rem 0.6rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
}
select { flex: 1 1 auto; }
#rule-input { flex: 1 1 auto; letter-spacing: 0.03em; text-transform: uppercase; }
#rule-input.invalid { border-color: var(--danger); }

/* Birth/Survival toggle chips */
.bs-row { display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.5rem; flex-wrap: wrap; }
.bs-row .bs-label {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  width: 1.4rem;
  color: var(--text-dim);
}
.nbtn {
  width: 2rem; height: 2rem;
  border-radius: 0.45rem;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  cursor: pointer;
}
.nbtn[aria-pressed="true"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

/* Toggle switches */
.toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--surface-2);
}
.toggle-row:last-child { border-bottom: none; }
.toggle-row span { font-size: 0.88rem; }
.switch { position: relative; width: 2.7rem; height: 1.55rem; flex: 0 0 auto; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch .track {
  position: absolute; inset: 0;
  background: var(--border);
  border-radius: 999px;
  transition: background 0.18s ease;
}
.switch .thumb {
  position: absolute; top: 0.18rem; left: 0.18rem;
  width: 1.19rem; height: 1.19rem;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
}
.switch input:checked + .track { background: var(--accent); }
.switch input:checked ~ .thumb { transform: translateX(1.15rem); }

/* Stamp grid */
.stamp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
  gap: 0.5rem;
}
.stamp {
  border: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: var(--radius);
  padding: 0.5rem;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
}
.stamp[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.stamp canvas { width: 3.6rem; height: 3.6rem; image-rendering: pixelated; }
.stamp span { font-size: 0.72rem; color: var(--text-dim); text-align: center; }

.heat-legend {
  height: 0.5rem; border-radius: 999px; margin: 0.2rem 0 0.4rem;
  background: linear-gradient(90deg, var(--heat-0), var(--heat-1), var(--heat-2), var(--heat-3), var(--heat-4));
}
.legend-caption { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-dim); }

@media (prefers-reduced-motion: reduce) {
  .sheet, .sheet-scrim, .play, .switch .track, .switch .thumb { transition: none; }
}