/* ANNUNAKI CITY // sim.css :: gold-on-obsidian watchers' console */

:root {
  --bg: #0a0906;
  --panel: #12100a;
  --gold: #e8c96a;
  --gold-dim: #8a7638;
  --ink: #cfc4a0;
  --ink-dim: #6e6650;
  --line: #2a2416;
  --bad: #ff6a5a;
  /* set per kind by racePalette(); the value here is only the cold-boot one */
  --good: #e8c96a;
  --good-dim: rgba(232,201,106,.35);
  /* ---- TWO TYPEFACES, AND WHY -------------------------------------------
     Everything was Courier New: thin strokes, wide glyphs, weak hinting, and
     .03em of tracking on top of it. On a phone it is hard to read, and the
     place it hurt most was the long paragraphs — a card's situation text, its
     "?" sheet, the verdicts in the watch report.

     --font   the instrument. Headings, labels, readings, anything with a
              number in it. The system's own mono is the same terminal
              register as Courier New and far better drawn at small sizes,
              and it keeps figures on a common width.
     --read   the voice. Paragraphs a person actually reads through. The
              system UI face, which every platform has already tuned for
              exactly this and which draws Turkish diacritics properly.
     Neither is downloaded, so the game stays offline-clean and adds no weight. */
  --font: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas,
          "Liberation Mono", "Courier New", monospace;
  --read: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; background: #000; color: var(--ink);
  font-family: var(--font); font-size: 15px; letter-spacing: .03em;
  overflow: hidden;
}

/* explicit offsets (not `inset`) for older mobile browsers */
.crt {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  display: flex; flex-direction: column;
  background: radial-gradient(ellipse at center, #14110a 0%, #080704 70%, #000 100%);
}
.crt::before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none; z-index: 40;
  box-shadow: inset 0 0 140px 30px rgba(0,0,0,.85);
}
.scanlines {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  pointer-events: none; z-index: 30;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 3px, rgba(0,0,0,0) 4px);
}

/* ---- top bar (in flow; wraps on narrow screens) ---- */
#topbar {
  position: relative; z-index: 10; flex: 0 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  min-height: 42px; padding: 6px 14px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  text-transform: uppercase; font-size: 12px;
}
.brand { color: var(--gold); font-weight: bold; letter-spacing: .2em; text-shadow: 0 0 8px rgba(232,201,106,.4); }
.sep { color: var(--ink-dim); }
.grow { flex: 1; }
#topbar b { color: var(--gold); }
#topbar button {
  font-family: var(--font); font-size: 12px; cursor: pointer;
  color: var(--ink); background: #0c0a06; border: 1px solid var(--line);
  padding: 5px 10px; transition: all .12s;
}
#topbar button:hover { color: var(--gold); border-color: var(--gold-dim); }
#topbar button.sel { color: #0a0906; background: var(--gold); border-color: var(--gold); font-weight: bold; }
#btn-reseed { color: var(--bad) !important; }
#btn-reseed:hover { background: var(--bad) !important; color: #0a0906 !important; border-color: var(--bad) !important; }

/* ---- layout (in flow below the wrapping topbar) ---- */
#layout {
  position: relative; z-index: 5; flex: 1 1 auto; min-height: 0;
  display: grid; grid-template-columns: 1fr clamp(340px, 25vw, 460px);
}
@media (max-width: 1100px) { #layout { grid-template-columns: 1fr 320px; } }
#left { display: flex; flex-direction: column; min-width: 0; min-height: 0; border-right: 1px solid var(--line); }

#statbar {
  display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 7px 14px;
  border-bottom: 1px solid var(--line); font-size: 12px; text-transform: uppercase;
  color: var(--ink-dim);
}
#statbar b { color: var(--gold); margin-left: 4px; }
.flags { color: var(--bad); font-weight: bold; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: .35; } }

#viewport { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: auto; }
#worldview { image-rendering: pixelated; border: 1px solid var(--line); max-width: 100%; max-height: 100%; }

#genebar {
  padding: 5px 14px; border-top: 1px solid var(--line);
  font-size: 11px; color: var(--ink-dim); text-transform: uppercase;
}
#genebar span { color: var(--gold-dim); }

#feed {
  list-style: none; margin: 0; padding: 8px 14px; height: 150px; overflow-y: auto;
  border-top: 1px solid var(--line); font-size: 14px;
}
#feed li { padding: 3px 0; border-bottom: 1px solid rgba(42,36,22,.5); line-height: 1.35; }
#feed .yr { color: var(--gold-dim); margin-right: 6px; }
#feed li.bad { color: var(--bad); }
#feed li.good { color: var(--good); }

/* ---- right panel ---- */
#right { display: flex; flex-direction: column; background: var(--panel); min-height: 0; }
/* ---- C · KART: the tab strip is a segmented control ------------------------
   Seven tabs in one row crushed to 43px and overlapped; three columns left an
   orphan row. Four columns takes 7 tabs as 4 + 3, and each button carries its
   mark above its label so the label has the full cell width. */
#tabs {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; padding: 1px 1px 0; background: var(--line);
}
.tab {
  box-sizing: border-box; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 9px 3px 8px; cursor: pointer;
  font-size: 10px; letter-spacing: .05em; line-height: 1.15;
  color: var(--ink-dim); background: rgba(8,7,12,.93);
  border: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .14s, color .14s;
}
.tab > i { font-style: normal; font-size: 15px; line-height: 1; opacity: .9; }
.tab > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.tab > b { font-weight: normal; font-size: 9px; color: var(--ink-dim); opacity: .8; }
.tab:hover { color: var(--ink); background: rgba(20,17,26,.95); }
.tab.sel {
  color: var(--race); background: color-mix(in srgb, var(--race) 13%, rgba(8,7,12,.95));
  box-shadow: inset 0 -2px 0 var(--race);
}
.tab.sel > i { opacity: 1; }
.tab:last-child { border-right: none; }
.tab:hover { color: var(--ink); }
.tab.sel { color: var(--gold); background: #171408; font-weight: bold; }
.pane { flex: 1; overflow-y: auto; min-height: 0; }
.pane.hidden { display: none !important; }   /* an id-level display: rule must never beat this */

/* objective bar — what humanity reaches for next */
#next-bar { padding: 10px 12px 6px; border-bottom: 1px solid var(--line); }
.nb-label { font-size: 12px; color: var(--ink-dim); letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; }
.nb-label b { color: var(--gold); }
.nb-track { height: 7px; background: #0c0a06; border: 1px solid var(--line); }
.nb-track i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width .4s; }

/* grounding line inside the decision modal */
#dc-ctx { font-size: 11.5px; color: var(--ink-dim); letter-spacing: .1em; margin: 0 0 10px; padding-bottom: 8px; border-bottom: 1px dotted var(--line); }

#milestones { list-style: none; margin: 0; padding: 8px 12px; }
#milestones li {
  display: flex; justify-content: space-between; padding: 6px 8px; margin: 2px 0;
  border: 1px solid transparent; color: var(--ink-dim); font-size: 13.5px;
}
#milestones li.done { color: var(--gold); border-color: var(--line); background: #171408; }
#milestones li.done .myear { color: var(--good); }
#milestones li.asc { letter-spacing: .15em; font-weight: bold; }
#milestones li.asc.done { color: #fff; background: var(--gold-dim); }
.myear { color: var(--line); }

.asc-label { color: var(--good); }
.asc-label b { color: var(--good) !important; }

#tabs .tab b { color: var(--gold-dim); font-weight: normal; margin-left: 3px; }

/* ---- census ---- */
#census { padding: 8px 12px; font-size: 12px; }
.cs { color: var(--gold); font-size: 10px; letter-spacing: .14em; margin: 9px 0 4px; }
.crow { display: flex; justify-content: space-between; gap: 6px; padding: 3px 0; color: var(--ink-dim); font-size: 13px; border-bottom: 1px dotted var(--line); }
.crow b { color: var(--gold); }
.crow span { margin-right: 4px; }
.cbar { height: 4px; background: #0c0a06; border: 1px solid var(--line); margin: 2px 0 4px; }
.cbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }

#annals { list-style: none; margin: 0; padding: 8px 12px; }
#annals li { padding: 6px; margin: 4px 0; border: 1px solid var(--line); font-size: 12px; }
.an-n { color: var(--gold); font-weight: bold; }
.an-cause { float: right; font-weight: bold; }
.an-cause.bad { color: var(--bad); }
.an-cause.good { color: var(--good); }
.an-detail { color: var(--ink-dim); font-size: 11px; margin-top: 3px; }
.an-story { color: var(--ink); font-size: 11px; margin-top: 5px; line-height: 1.45; border-top: 1px dotted var(--line); padding-top: 4px; }
.an-empty { color: var(--ink-dim); border: none !important; text-align: center; }

#credit { padding: 8px 12px; border-top: 1px solid var(--line); font-size: 10px; color: var(--ink-dim); text-transform: uppercase; }
#credit a { color: var(--gold-dim); text-decoration: none; }
#credit a:hover { color: var(--gold); }

.research { color: #6ab8e8; }
.pct.good { color: var(--good) !important; }
.pct.warn { color: var(--gold) !important; }
.pct.bad { color: var(--bad) !important; animation: blink 1s steps(1) infinite; }

/* ---- divine decision modal ---- */
.decision {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 45;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,3,1,.8);
  overflow: hidden;
}
.decision::before {
  content: ""; position: absolute; inset: -60%;
  background: conic-gradient(from 0deg,
    rgba(232,201,106,0) 0deg, rgba(232,201,106,.06) 12deg, rgba(232,201,106,0) 24deg,
    rgba(232,201,106,0) 90deg, rgba(232,201,106,.05) 102deg, rgba(232,201,106,0) 114deg,
    rgba(232,201,106,0) 180deg, rgba(232,201,106,.06) 192deg, rgba(232,201,106,0) 204deg,
    rgba(232,201,106,0) 270deg, rgba(232,201,106,.05) 282deg, rgba(232,201,106,0) 294deg);
  animation: rays 40s linear infinite;
  pointer-events: none;
}
@keyframes rays { to { transform: rotate(360deg); } }
.decision.hidden { display: none; }
.dc-box {
  position: relative;
  width: min(600px, 92%); max-height: 88%; overflow-y: auto; overflow-x: hidden;
  text-align: center; padding: 22px 26px;
  border: 1px solid var(--gold-dim); background: #0e0c07;
  box-shadow: 0 0 40px rgba(232,201,106,.15);
  animation: dcIn .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes dcIn { from { transform: scale(.9) translateY(14px); opacity: 0; } }
.dc-eye {
  font-size: 30px; color: var(--gold); text-shadow: 0 0 14px rgba(232,201,106,.6);
  animation: eyePulse 2.4s ease-in-out infinite;
}
@keyframes eyePulse {
  0%, 100% { transform: scale(1); text-shadow: 0 0 14px rgba(232,201,106,.6); }
  50% { transform: scale(1.15); text-shadow: 0 0 26px rgba(232,201,106,.95); }
}
.dc-box h2 { margin: 8px 0 8px; font-size: 24px; letter-spacing: .16em; color: var(--gold); }
/* The card's own sentences — the longest thing a player reads in this game. */
#dc-text { color: var(--ink); font-size: 16px; line-height: 1.65; margin: 0 0 14px;
  font-family: var(--read); letter-spacing: 0; }
#dc-options { display: flex; flex-direction: column; gap: 8px; }
.dc-opt {
  font-family: var(--font); cursor: pointer; text-align: left;
  background: #12100a; border: 1px solid var(--line); padding: 10px 14px;
  transition: border-color .12s, background .12s, transform .12s;
  opacity: 0; animation: optIn .45s ease-out forwards;
}
@keyframes optIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
.dc-opt:hover { border-color: var(--gold); background: #171408; transform: translateX(4px); }
.dc-label { display: block; color: var(--gold); font-weight: bold; font-size: 15px; letter-spacing: .08em; }
/* THE ACTION IS READ, THE CONSEQUENCE IS OFFERED. By year 200 a player reads
   only the labels, and the old styling made the hint compete for that read —
   same brightness class, four pixels away. The hint drops to .62 so the eye can
   skip it without effort, and comes back to full under the finger, because the
   moment of weighing one option is exactly when its consequence is wanted. */
.dc-hint { display: block; color: var(--ink-dim); font-size: 12.5px; margin-top: 4px;
  font-family: var(--read); letter-spacing: 0; opacity: .62; transition: opacity .15s; }
.dc-opt:hover .dc-hint, .dc-opt:focus-visible .dc-hint, .dc-opt:active .dc-hint { opacity: 1; }

/* THE COMMIT BLINK. One CRT flicker when an answer is stamped: a bright line
   collapses across the panel and the image snaps back. It is on the container
   so the reveal that replaces the card plays underneath it, and it lives in a
   media query so reduced-motion removes the flicker and keeps the stamp sound. */
@media not (prefers-reduced-motion: reduce) {
  .decision.crt-commit { animation: crtCommit .18s steps(2, end); }
  @keyframes crtCommit {
    0%   { filter: brightness(1); }
    35%  { filter: brightness(2.4) contrast(1.6); transform: scaleY(.985); }
    70%  { filter: brightness(.4); transform: scaleY(1.005); }
    100% { filter: none; transform: none; }
  }
}

/* THE "?" TEACHES ITSELF ONCE. The why-sheet is the best-hidden thing on the
   card, so for the first few cards the button breathes until it has been
   pressed once — main.js stamps data-teach while the count is low. */
#dc-why[data-teach] { animation: whyPulse 1.6s ease-in-out infinite; }
@keyframes whyPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,201,106,.0); }
  50% { box-shadow: 0 0 10px 2px rgba(232,201,106,.45); color: var(--gold); }
}
@media (prefers-reduced-motion: reduce) { #dc-why[data-teach] { animation: none; color: var(--gold); } }
.dc-note { margin-top: 14px; color: var(--ink-dim); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; animation: blink 1.6s steps(1) infinite; }

/* effect chips: each option's true consequences */
#dc-legend { font-size: 10.5px; color: var(--ink-dim); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 8px; }
.dc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chip {
  font-size: 11.5px; padding: 2px 8px; border: 1px solid var(--line);
  background: #0a0805; color: var(--ink-dim); letter-spacing: .04em;
}
.chip.g { color: var(--good); border-color: var(--good-dim); }
.chip.b { color: var(--bad); border-color: rgba(255,106,90,.35); }
.chip.n { color: var(--gold); border-color: rgba(232,201,106,.35); }

/* ---- world / regions panel ---- */
.favor-label { color: var(--gold); }
.favor-label b { color: var(--gold) !important; }
#regions { padding: 8px 10px; }
.rg-card { border: 1px solid var(--line); background: #14110a; padding: 9px 11px; margin: 0 0 8px; cursor: pointer; transition: border-color .12s; }
.rg-card:hover { border-color: var(--gold-dim); }
.rg-card.sel { border-color: var(--gold); background: #171408; }
.rg-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.rg-name { color: var(--gold); font-weight: bold; letter-spacing: .12em; font-size: 14px; }
.rg-pop { color: var(--ink-dim); font-size: 11px; }
.rg-belief { margin-top: 4px; font-size: 12.5px; color: var(--ink); }
.rg-belief b { color: var(--gold); }
.rg-stats { margin-top: 3px; font-size: 11.5px; color: var(--ink-dim); }
.rg-more { margin-top: 5px; font-size: 10.5px; color: var(--ink-dim); letter-spacing: .1em; }
.rg-acts-label { margin: 9px 0 5px; font-size: 10.5px; color: var(--gold-dim); letter-spacing: .12em; }
.rg-acts { display: flex; flex-direction: column; gap: 5px; }
.ra-btn {
  font-family: var(--font); font-size: 12px; text-align: left; cursor: pointer;
  color: var(--ink); background: #0c0a06; border: 1px solid var(--line); padding: 7px 9px;
  display: flex; justify-content: space-between; gap: 6px; transition: all .12s;
}
.ra-btn:hover:not(:disabled) { color: var(--gold); border-color: var(--gold-dim); }
.ra-btn:disabled { opacity: .4; cursor: not-allowed; }
.ra-cost { color: var(--gold-dim); }

/* ---- the other hand ---- */
.rg-acts-label.wrath { color: #d4694f; letter-spacing: .14em; border-top: 1px solid rgba(212,105,79,.22); padding-top: 8px; }
.rw-btn {
  font-family: var(--font); font-size: 12px; text-align: left; cursor: pointer;
  color: #e3a893; background: #150c08; border: 1px solid rgba(212,105,79,.3); padding: 7px 9px;
  display: flex; justify-content: space-between; gap: 6px; transition: all .12s;
}
.rw-btn:hover:not(:disabled) { color: #ffd4c2; border-color: #d4694f; background: #1e0f09; box-shadow: 0 0 14px rgba(212,105,79,.25); }
.rw-btn:disabled { opacity: .38; cursor: not-allowed; }
.rw-btn.locked { color: var(--ink-dim); border-style: dashed; }
.rw-btn.locked .ra-cost { color: #9a86c8; }

/* ---- top bar: echo, streak, seed, sound ---- */
.echo-label { color: #b9a8dd; }
.echo-label b { color: #d6c6f5 !important; }
.streak-chip { color: #ffb057; letter-spacing: .06em; }
.streak-chip.hidden { display: none; }
.seed-chip { cursor: pointer; color: var(--ink-dim); letter-spacing: .04em; user-select: none; }
.seed-chip b { color: var(--gold-dim); }
.seed-chip i { color: var(--good); font-style: normal; }
.seed-chip:hover b { color: var(--gold); }

/* ---- decision: the meters you are judged on ---- */
.dc-meters { display: grid; gap: 4px; margin: 4px 0 12px; text-align: left; }
.dm { display: grid; grid-template-columns: 74px 1fr 62px; gap: 7px; align-items: center; font-size: 10.5px; color: var(--ink-dim); letter-spacing: .08em; }
.dm-b { height: 6px; background: #0a0805; border: 1px solid var(--line); }
.dm-b i { display: block; height: 100%; transition: width .3s; }
.dm-b i.g { background: linear-gradient(90deg, var(--gold-dim), var(--good)); }
.dm-b i.n { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.dm-b i.b { background: linear-gradient(90deg, #6b2a22, var(--bad)); }
.dm b { color: var(--gold); text-align: right; font-size: 11px; }
.dc-tone { float: right; font-size: 9.5px; letter-spacing: .12em; padding: 1px 6px; border: 1px solid var(--line); }
.dc-tone.g { color: var(--good); border-color: var(--good-dim); }
.dc-tone.b { color: var(--bad); border-color: rgba(255,106,90,.35); }
.dc-tone.n { color: var(--gold-dim); }

/* ---- follow ---- */
.pc-follow {
  width: 100%; margin: 8px 0 2px; padding: 7px 0; cursor: pointer;
  font-family: var(--font); font-size: 11px; letter-spacing: .1em;
  color: var(--gold); background: #14110a; border: 1px solid var(--gold-dim); transition: all .12s;
}
.pc-follow:hover { background: #1c1710; box-shadow: 0 0 14px rgba(232,201,106,.2); }
.pc-follow.on { color: #0b0a07; background: var(--gold); }

/* ---- the long memory ---- */
.echo-box { width: min(560px, 94%); max-height: 90%; overflow-y: auto; }
.ec-bank { display: flex; justify-content: center; gap: 22px; font-size: 12px; color: var(--ink-dim); letter-spacing: .1em; margin-bottom: 14px; }
.ec-bank b { color: #d6c6f5; }
.ec-daily { font-size: 12px; color: var(--ink-dim); letter-spacing: .06em; margin: -6px 0 14px; }
.ec-daily b { color: var(--gold); }
.ec-list { display: grid; gap: 8px; text-align: left; margin-bottom: 16px; }
.ec-card { border: 1px solid var(--line); background: #100e08; padding: 10px 12px; cursor: pointer; transition: all .12s; }
.ec-card:hover { border-color: #7d6bb0; box-shadow: 0 0 16px rgba(150,120,210,.18); }
.ec-card.owned { border-color: var(--good-dim); background: var(--t-panel); cursor: default; }
.ec-card.owned:hover { box-shadow: none; }
.ec-card.poor { opacity: .5; }
.ec-top { display: flex; align-items: center; gap: 8px; }
.ec-icon { font-size: 18px; }
.ec-name { flex: 1; color: var(--gold); letter-spacing: .1em; font-size: 13px; }
.ec-cost { color: #d6c6f5; font-size: 12px; }
.ec-card.owned .ec-cost { color: var(--good); }
.ec-desc { margin-top: 5px; font-size: 12px; color: var(--ink); line-height: 1.5; }

/* ---- the chronicle card ---- */
.share-box { width: min(700px, 96%); max-height: 94%; overflow-y: auto; }
.sh-canvas { margin: 6px 0 10px; }
.sh-canvas canvas { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.sh-text {
  text-align: left; white-space: pre-wrap; word-break: break-word; margin: 0 0 12px;
  font-family: var(--font); font-size: 12px; line-height: 1.6; color: var(--ink);
  background: #0a0805; border: 1px solid var(--line); padding: 10px 12px;
}
.sh-btns { display: flex; gap: 8px; }
.sh-btns button { flex: 1; margin: 0 !important; }
.ov-share {
  font-family: var(--font); font-size: 14px; letter-spacing: .1em; cursor: pointer;
  color: var(--gold); background: #14110a; border: 1px solid var(--gold-dim);
  padding: 11px 26px; margin: 0 8px 10px 0;
}
.ov-share:hover { background: #1c1710; box-shadow: 0 0 18px rgba(232,201,106,.3); }
.ov-share.hidden { display: none; }
.ov-echo { color: #d6c6f5 !important; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 10px !important; }

/* how close you were — the reason anyone starts another run */
.ov-near { border: 1px solid rgba(232,201,106,.35); background: rgba(20,16,8,.55); padding: 10px 14px; margin: 12px 0 4px; }
.ov-near-h { color: var(--gold); font-size: 11px; letter-spacing: .2em; margin-bottom: 7px; }
.ov-near-r { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; }
.ov-near-r b { color: var(--gold); font-size: 22px; min-width: 52px; text-align: right; }
.ov-near-r span { color: var(--ink); font-size: 13px; }

/* ---- game menu ---- */
.gamemenu { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 60; display: flex; align-items: center; justify-content: center; background: rgba(3,2,0,.88); }
.gamemenu.hidden { display: none; }
.gm-box { width: min(360px, 90%); padding: 26px 28px; border: 1px solid var(--gold-dim); background: #0e0c07; text-align: center; box-shadow: 0 0 50px rgba(232,201,106,.12); }
.gm-box h2 { margin: 0 0 18px; color: var(--gold); letter-spacing: .2em; font-size: 18px; }
.gm-box button { display: block; width: 100%; margin: 7px 0; padding: 11px 0; font-family: var(--font); font-size: 14px; letter-spacing: .08em; cursor: pointer; color: var(--ink); background: #12100a; border: 1px solid var(--line); transition: all .12s; }
.gm-box button:hover:not(:disabled) { color: var(--gold); border-color: var(--gold-dim); }
.gm-box button:disabled { opacity: .35; cursor: not-allowed; }
.gm-danger { color: var(--bad) !important; }
.gm-danger:hover { border-color: var(--bad) !important; }
.gm-note { margin-top: 14px; font-size: 10px; color: var(--ink-dim); letter-spacing: .08em; text-transform: uppercase; }

/* ---- tutorial ---- */
.tut-hl { position: fixed; z-index: 71; border: 2px solid var(--gold); box-shadow: 0 0 0 4000px rgba(3,2,0,.72), 0 0 22px rgba(232,201,106,.55); pointer-events: none; transition: all .3s; }
.tut-hl.hidden { display: none; }
.tutorial { position: fixed; left: 0; right: 0; bottom: 26px; z-index: 72; display: flex; justify-content: center; pointer-events: none; }
.tutorial.hidden { display: none; }
.tut-box { pointer-events: auto; width: min(560px, 92%); border: 1px solid var(--gold-dim); background: #0e0c07; padding: 14px 18px; box-shadow: 0 0 40px rgba(0,0,0,.7); animation: dcIn .3s ease-out; }
.tut-head { display: flex; justify-content: space-between; color: var(--gold); font-weight: bold; letter-spacing: .14em; font-size: 14px; }
.tut-head #tut-step { color: var(--ink-dim); font-weight: normal; }
.tut-box p { margin: 9px 0 12px; color: var(--ink); font-size: 14px; line-height: 1.6; }
.tut-btns { display: flex; justify-content: space-between; }
.tut-btns button { font-family: var(--font); cursor: pointer; padding: 8px 18px; font-size: 13px; letter-spacing: .08em; border: 1px solid var(--line); background: #12100a; color: var(--ink-dim); }
#tut-next { color: #0a0906 !important; background: var(--gold) !important; border-color: var(--gold) !important; font-weight: bold; }
#tut-next:hover { box-shadow: 0 0 14px rgba(232,201,106,.5); }

/* world-view (zoom out) button */
#viewport { position: relative; }
#btn-worldview { position: absolute; top: 14px; left: 14px; z-index: 6; font-family: var(--font); font-size: 12px; letter-spacing: .1em; cursor: pointer; color: var(--gold); background: rgba(10,8,5,.85); border: 1px solid var(--gold-dim); padding: 7px 12px; }
#btn-worldview:hover { background: var(--gold); color: #0a0906; }
#btn-worldview.hidden { display: none; }

/* character card */
.person-card { position: absolute; top: 14px; right: 14px; z-index: 7; width: 232px; max-height: 88%; overflow-y: auto;
  border: 1px solid var(--gold-dim); background: rgba(12,10,6,.96); padding: 10px 12px; box-shadow: 0 0 26px rgba(0,0,0,.6); }
.person-card.hidden { display: none; }
.pc-head { display: flex; justify-content: space-between; color: var(--gold); font-weight: bold;
  letter-spacing: .1em; font-size: 14px; border-bottom: 1px solid var(--line); padding-bottom: 5px; margin-bottom: 6px; }
.pc-x { cursor: pointer; color: var(--ink-dim); }
.pc-x:hover { color: var(--bad); }
.pc-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-dim); padding: 2px 0; }
.pc-row b { color: var(--ink); }
.pc-marks { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 2px; }
.pc-gene { display: grid; grid-template-columns: 46px 1fr 30px; gap: 5px; align-items: center; font-size: 10.5px; color: var(--ink-dim); padding: 1px 0; }
.pc-bar { height: 5px; background: #0c0a06; border: 1px solid var(--line); }
.pc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.pc-gene b { color: var(--gold); text-align: right; }

/* chapter deadline + failure */
.ch-deadline { font-size: 11px; color: var(--gold-dim); letter-spacing: .12em; margin-bottom: 6px; }
.ms-dl { font-size: 11px; color: var(--gold-dim); margin-top: 5px; letter-spacing: .06em; }
.ms-dl.urgent { color: var(--bad); font-weight: bold; animation: blink 1.2s steps(1) infinite; }
.ms-item.fail { color: var(--bad); border-color: rgba(255,106,90,.35); background: #1a0f0c; }
#btn-lang { font-weight: bold; }

/* mission / campaign */
.ch-box { width: min(640px, 94%); }
.ch-kind { font-size: 12px; letter-spacing: .18em; font-weight: bold; margin-bottom: 4px; }
.ch-legend { font-size: 10.5px; color: var(--ink-dim); letter-spacing: .1em; text-transform: uppercase; margin: 0 0 10px; }
#ch-brief { color: var(--ink); font-size: 15px; line-height: 1.6; margin: 0 0 12px; }
.ch-goal { display: block; margin-top: 6px; font-size: 11.5px; letter-spacing: .06em; color: var(--gold); text-transform: uppercase; }
#mission { padding: 10px 12px; }
.ms-head { font-weight: bold; letter-spacing: .16em; font-size: 14px; }
.ms-mission { font-size: 12px; color: var(--ink-dim); line-height: 1.5; margin: 5px 0 4px; }
.ms-ch { color: var(--gold); font-weight: bold; font-size: 13.5px; }
.ms-path { color: var(--ink); font-size: 12.5px; margin-top: 3px; }
.ms-goal { color: var(--ink-dim); font-size: 12px; margin: 4px 0 5px; line-height: 1.4; }
.ms-prog { color: var(--gold-dim); font-size: 11px; margin-top: 4px; }
.ms-item { display: flex; justify-content: space-between; gap: 6px; flex-wrap: wrap; font-size: 12px;
  color: var(--ink-dim); padding: 5px 6px; border: 1px solid transparent; margin: 2px 0; }
.ms-item.done { color: var(--good); border-color: var(--line); background: var(--t-panel); }
.ms-item.cur { color: var(--gold); border-color: var(--gold-dim); background: #171408; }
.ms-item .ms-sub { width: 100%; color: var(--ink-dim); font-size: 10.5px; }
.ms-none { color: var(--ink-dim); font-size: 12px; }

/* faction selection */
.st-faction { font-weight: bold; letter-spacing: .1em; }
.fs-box { width: min(760px, 96%); max-height: 92%; overflow-y: auto; text-align: center; }
.fs-sub { color: var(--ink-dim); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
#fs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; text-align: left; }
.fs-card { border: 1px solid var(--line); background: #100e08; padding: 12px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.fs-card:hover { transform: translateY(-3px); box-shadow: 0 6px 24px rgba(0,0,0,.5); }
.fs-icon { font-size: 26px; }
.fs-name { font-weight: bold; letter-spacing: .14em; margin: 4px 0 6px; }
.fs-lore { font-size: 12px; color: var(--ink); line-height: 1.5;
  font-family: var(--read); letter-spacing: 0; }
.fs-mission { margin-top: 8px; font-size: 11px; color: var(--gold-dim); line-height: 1.45; text-transform: uppercase; letter-spacing: .04em; }

/* guide overlay */
.guide-box { width: min(560px, 94%); max-height: 86%; overflow-y: auto; text-align: left; }
.gd p { margin: 8px 0; font-size: 13px; line-height: 1.55; color: var(--ink); }
.gd b { color: var(--gold); }
#guide-close { margin-top: 12px; }

/* ---- cinematic moments ----
   EVERY LAYER HERE ENDS IN AN OPAQUE COLOUR. The gradients are all written with
   alpha — .55 at the centre for the neutral tone, .16 for a win — which is the
   right look over black and the wrong one over a card. The cinematic sits at
   z-index 48 and the decision modal at 45, so a rite resolving while a card was
   on the table put the medallion and THE WORK HELD straight on top of the card's
   own title and its three answers, both readable at once. Layering a solid under
   the gradient keeps the vignette and stops the thing behind it coming through. */
.cine {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 48;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(10,8,4,.55) 0%, rgba(2,1,0,.92) 100%),
              #060503;
  opacity: 0; transition: opacity .35s; cursor: pointer;
}
.cine.hidden { display: none; }
.cine.show { opacity: 1; }
/* ---- a win and a loss are not the same beat ------------------------------
   Every cinematic wore one grey: the rite that HELD and the rite that got away
   from you were the same card with different words. `tone` separates them —
   gold rays sweeping out behind a win, a red ground under a loss — and the
   sub-line says which it was. Rays are drawn on a pseudo-element so nothing in
   the existing markup moves. */
.cine.good { background:
  radial-gradient(ellipse at center, rgba(232,201,106,.16) 0%, rgba(4,3,1,.94) 68%),
  #070502; }
.cine.good .cine-sub { color: var(--gold); letter-spacing: .18em; }
.cine.good::before { content: ''; position: absolute; width: 150vmax; height: 150vmax;
  left: 50%; top: 50%; margin: -75vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg,
    rgba(232,201,106,.10) 0deg 4deg, transparent 4deg 14deg);
  animation: cineRays 3.4s cubic-bezier(.15,.7,.3,1) forwards; }
@keyframes cineRays {
  0%   { transform: scale(.25) rotate(0deg); }
  100% { transform: scale(1) rotate(26deg); }
}
.cine.bad { background:
  radial-gradient(ellipse at center, rgba(150,40,30,.20) 0%, rgba(3,1,1,.95) 70%),
  #0a0403; }
.cine.bad .cine-title { color: var(--bad, #d1605e); text-shadow: 0 0 24px rgba(209,96,94,.5); }
@media (prefers-reduced-motion: reduce) { .cine.good::before { animation: none; } }
/* Positioned so the ray sweep cannot paint over it: `.cine.good::before` is
   absolute with z-index auto, and an unpositioned in-flow child loses to that
   in paint order however faint the rays are. */
.cine-inner { position: relative; text-align: center; }
.cine-icon {
  font-size: 84px; line-height: 1;
  filter: drop-shadow(0 0 26px rgba(232,201,106,.55));
  animation: cineIcon 3.4s ease-out;
}
@keyframes cineIcon {
  0% { transform: scale(.3) translateY(30px); opacity: 0; }
  18% { transform: scale(1.15); opacity: 1; }
  30% { transform: scale(1); }
  100% { transform: scale(1.04); opacity: 1; }
}
.cine-title {
  margin-top: 18px; font-size: 44px; font-weight: bold; color: var(--gold);
  text-shadow: 0 0 24px rgba(232,201,106,.6);
  animation: cineTitle 3.4s ease-out;
}
@keyframes cineTitle {
  0% { letter-spacing: .02em; opacity: 0; }
  25% { opacity: 1; }
  100% { letter-spacing: .3em; opacity: 1; }
}
.cine-sub {
  margin-top: 12px; font-size: 15px; color: var(--ink); max-width: 560px;
  padding: 0 20px; line-height: 1.5;
  animation: cineSub 3.4s ease-out;
}
@keyframes cineSub { 0%, 30% { opacity: 0; transform: translateY(8px); } 55% { opacity: 1; transform: none; } }
@media (max-width: 600px) {
  .cine-icon { font-size: 58px; }
  .cine-title { font-size: 26px; }
  .cine-sub { font-size: 13px; }
}

/* ---- the era screen ----
   Sits inside the existing cinematic layer, so it inherits the opaque ground and
   the ray sweep and needs no scrim of its own. Everything is centred on one
   narrow column because this is read, not scanned: a plate, a name, then a
   ledger of what the age produced and what it lost. A won stone and a lost one
   share a type size on purpose — printing the failures only matters if they are
   not visibly demoted. */
.es { text-align: center; max-width: 460px; padding: 0 18px; }
.es-tag { font-size: 9.5px; letter-spacing: .26em; color: var(--gold-dim); }
.es-plate { display: block; width: 168px; height: auto; margin: 10px auto 2px; opacity: .9; }
.es-name { margin: 0 0 14px; font-size: 27px; letter-spacing: .16em; color: var(--gold);
  text-shadow: 0 0 22px rgba(232,201,106,.45); }
.es-sec { font-size: 9px; letter-spacing: .22em; color: var(--gold-dim);
  border-top: 1px solid var(--line); padding-top: 9px; margin: 14px 0 8px; }
.es-list { display: flex; flex-wrap: wrap; gap: 5px 8px; justify-content: center; }
.es-list span { font-size: 11.5px; border: 1px solid var(--line); padding: 3px 8px; }
.es-w { color: var(--ink); }
.es-l { color: var(--bad); border-color: rgba(255,106,90,.32) !important; }
.es-none { color: var(--ink-dim); font-style: italic; border: 0 !important; }
.es-f { display: flex; gap: 10px; text-align: left; margin: 9px 0; align-items: flex-start; }
.es-fi { font-size: 17px; line-height: 1.2; width: 22px; text-align: center; color: var(--gold); }
.es-f b { display: block; font-size: 10.5px; letter-spacing: .14em; color: var(--gold);
  font-weight: normal; }
.es-f i { display: block; font-style: normal; font-size: 11px; line-height: 1.55;
  color: var(--ink); font-family: var(--read); margin-top: 2px; }
@media (max-width: 600px) {
  .es-plate { width: 128px; }
  .es-name { font-size: 21px; }
}

/* ---- the seals, live in the mission pane ----
   Reads as instrumentation rather than as a score: no fill colour on the track,
   a hairline bar, numbers in the dim gold. It sits above the chapter board and
   deliberately does not look like the world readings under it, because it is
   not measuring the same thing. */
.sl { border: 1px solid var(--line); background: rgba(6,5,3,.55);
  padding: 8px 10px; margin: 0 0 10px; }
.sl-h { font-size: 9px; letter-spacing: .24em; color: var(--gold-dim);
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  margin-bottom: 7px; }
.sl-h i { font-style: normal; font-size: 8.5px; letter-spacing: .06em; opacity: .65;
  text-transform: none; }
.sl-r { display: grid; grid-template-columns: 12px 1fr 46px 20px; align-items: center;
  gap: 6px; margin: 3px 0; }
.sl-g { color: var(--gold-dim); font-size: 11px; text-align: center; }
.sl-n { font-size: 9px; letter-spacing: .1em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sl-b { height: 2px; background: rgba(232,201,106,.14); }
.sl-b u { display: block; height: 100%; background: var(--gold); text-decoration: none;
  transition: width .4s; }
.sl-v { font-size: 9px; color: var(--gold-dim); text-align: right; }

/* ---- the candidate report ----
   Deliberately plainer than everything around it. The run's own screens are
   gold and lit; this is the layer underneath speaking, so it is a form: a rule,
   a class line, four measured rows and a paragraph of assessment. Mono
   throughout, including the paragraph, because the instrument does not use the
   reading typeface it gave the player. */
.cnd { border: 1px solid var(--gold-dim); background: rgba(6,5,3,.7);
  padding: 14px 16px; margin: 4px 0 16px; }
.cnd-h { font-size: 10px; letter-spacing: .28em; color: var(--gold-dim); }
.cnd-k { font-size: 15px; letter-spacing: .12em; color: var(--gold); margin: 6px 0 12px;
  text-shadow: 0 0 14px rgba(232,201,106,.35); }
.cnd-bars { display: grid; gap: 7px; margin-bottom: 12px; }
.cnd-s { display: grid; grid-template-columns: 16px 1fr 84px 26px; align-items: center; gap: 9px; }
.cnd-g { color: var(--gold-dim); font-size: 13px; text-align: center; }
.cnd-t b { display: block; font-size: 10.5px; letter-spacing: .14em; color: var(--ink); font-weight: normal; }
.cnd-t i { display: block; font-size: 9.5px; font-style: normal; color: var(--gold-dim); opacity: .8; }
.cnd-b { height: 3px; background: rgba(232,201,106,.14); }
.cnd-b u { display: block; height: 100%; background: var(--gold); text-decoration: none; }
.cnd-v { font-size: 10px; color: var(--gold-dim); text-align: right; }
.cnd-o { margin: 0; font-size: 11.5px; line-height: 1.65; color: var(--ink);
  font-family: var(--font); border-top: 1px solid var(--line); padding-top: 10px; }
@media (max-width: 600px) {
  .cnd-s { grid-template-columns: 14px 1fr 54px 24px; gap: 7px; }
  .cnd-t i { display: none; }
}

/* ---- overlay ---- */
.overlay {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,3,1,.88);
}
/* THE TITLE MOMENT. Key art behind the boot overlay only — the class comes from
   showIntro and hideOverlay strips it, so an ending never inherits the tableau.
   FIRST VERSION KILLED THE PAINTING: a .72-.9 flat scrim over an already dark
   image read as a plain black screen, which made the whole install pointless.
   The scrim is now a vertical ramp — nearly open at the top where the five
   figures live, closing toward the floor where the text column sits — so the
   art carries the frame and the words still have their ground. The box itself
   gets a translucent panel instead of relying on the scrim. */
.overlay.title { background:
  linear-gradient(rgba(4,3,1,.14) 0%, rgba(4,3,1,.30) 42%, rgba(4,3,1,.86) 100%),
  url('../img/keyart.webp') center 22% / cover no-repeat, #060503; }
@media (max-width: 620px) {
  .overlay.title { background:
    linear-gradient(rgba(4,3,1,.12) 0%, rgba(4,3,1,.28) 45%, rgba(4,3,1,.88) 100%),
    url('../img/keyart_p.webp') center top / cover no-repeat, #060503; }
}
.overlay.title .ov-box { background: rgba(6,5,3,.66); border: 1px solid var(--line);
  padding: 18px 22px; backdrop-filter: blur(2px); }
/* The emblem is a TRANSPARENT circle cut from the delivery — never the square.
   A black box floating over a painting is the one thing this screen must not
   contain, and if the asset ever regresses to a square the drop-shadow will
   betray it immediately. */
#ov-logo { display: none; }
.overlay.title #ov-logo { display: block; width: 96px; height: 96px; margin: 0 auto 12px;
  filter: drop-shadow(0 3px 14px rgba(0,0,0,.65)) drop-shadow(0 0 22px rgba(232,201,106,.28)); }
.overlay.hidden { display: none; }
.ov-box { text-align: center; max-width: 620px; padding: 24px; }
.ov-box h1 { margin: 0; font-size: 42px; letter-spacing: .16em; color: var(--bad); text-shadow: 0 0 16px rgba(255,106,90,.5); }
.ov-box h1.good { color: var(--gold); text-shadow: 0 0 16px rgba(232,201,106,.55); }
#ov-sub { color: var(--gold); letter-spacing: .2em; font-size: 15px; margin: 10px 0 12px; }
.ov-story {
  text-align: left; max-height: 260px; overflow-y: auto; margin: 0 0 20px;
  border: 1px solid var(--line); background: rgba(10,9,6,.7); padding: 12px 16px;
}
.ov-story p { margin: 7px 0; color: var(--ink); font-size: 14.5px; line-height: 1.6; }
.ov-story p:first-child { color: var(--gold); }
#ov-reseed {
  font-family: var(--font); font-size: 15px; letter-spacing: .1em; cursor: pointer;
  color: #0a0906; background: var(--gold); border: none; padding: 12px 30px; font-weight: bold;
}
#ov-reseed:hover { box-shadow: 0 0 18px rgba(232,201,106,.6); }

/* THE RESUME OFFER (offerResume() in main.js) borrows this overlay, and while it
   is up the overlay's own button is no longer the primary action: a watcher who
   reloaded came back for the run they were in the middle of, and BEGIN THE WATCH
   would end it. So the two swap weight for exactly as long as the offer is on
   screen. Written with :has() rather than a state class because nothing then has
   to remember to take the class off again — the demotion cannot outlive the
   button that caused it. */
#ov-resume {
  font-family: var(--font); font-size: 15px; letter-spacing: .1em; cursor: pointer;
  color: #0a0906; background: var(--gold); border: none; padding: 12px 30px; font-weight: bold;
  display: block; margin: 0 auto 10px; max-width: 100%;
}
#ov-resume:hover { box-shadow: 0 0 18px rgba(232,201,106,.6); }
#ov-resume.hidden { display: none; }
.ov-box:has(#ov-resume:not(.hidden)) #ov-reseed {
  color: var(--gold); background: #14110a; border: 1px solid var(--gold-dim);
  font-size: 13px; font-weight: normal; padding: 10px 24px;
}
@media (max-width: 600px) { #ov-resume { width: 100%; padding: 12px 0; font-size: 13px; } }

#genebar { overflow-x: auto; white-space: nowrap; }

/* ---- the console opens slowly ---- */
[data-lock].locked { display: none !important; }

.unlockbar {
  position: absolute; left: 50%; top: 12px; transform: translate(-50%, -140%);
  z-index: 8; width: min(560px, 92%); cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  padding: 11px 15px; border: 1px solid var(--gold-dim);
  background: rgba(12,10,6,.97); box-shadow: 0 8px 34px rgba(0,0,0,.65);
  opacity: 0; transition: transform .45s cubic-bezier(.2,1.3,.4,1), opacity .35s;
}
.unlockbar.show { transform: translate(-50%, 0); opacity: 1; }
.unlockbar.hidden { display: none; }
.ub-icon { font-size: 24px; line-height: 1; }
.ub-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ub-body b { color: var(--gold); letter-spacing: .14em; font-size: 12.5px; }
.ub-body i { font-style: normal; color: var(--ink); font-size: 12px; line-height: 1.45; }

/* ---- the five acts ---- */
.nb-act { display: flex; justify-content: space-between; align-items: baseline;
  color: var(--gold); letter-spacing: .16em; font-size: 12px; font-weight: bold; }
.nb-act b { color: var(--ink-dim); font-weight: normal; letter-spacing: .06em; }
.nb-actline { color: var(--ink-dim); font-size: 11px; font-style: italic; margin: 2px 0 5px; }
.nb-track.act { margin-bottom: 10px; }
.nb-track.act i { background: linear-gradient(90deg, var(--gold-dim), var(--gold)); opacity: .55; }

/* ---- the album ---- */
.btn-album {
  position: absolute; right: 12px; bottom: 12px; z-index: 6; cursor: pointer;
  font-family: var(--font); font-size: 12px; letter-spacing: .1em;
  color: var(--gold); background: rgba(12,10,6,.9); border: 1px solid var(--gold-dim);
  padding: 7px 11px;
}
.btn-album:hover { background: #1c1710; box-shadow: 0 0 16px rgba(232,201,106,.3); }
.btn-album.hidden { display: none; }
.album-box { width: min(1000px, 96%); max-height: 94%; overflow-y: auto; }
.al-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.al-item { cursor: pointer; border: 1px solid var(--line); transition: border-color .12s, transform .12s; }
.al-item:hover { border-color: var(--gold-dim); transform: translateY(-2px); }
.al-item canvas { width: 100%; height: auto; display: block; }

/* ---- the thing running the console ---- */
.coldopen {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 95;
  background: #05070a; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.coldopen.hidden { display: none; }
.co-inner { width: min(620px, 88%); font-family: var(--font); }
.co-head { color: #4a7d7a; font-size: 11px; letter-spacing: .3em; margin-bottom: 20px; animation: sigflick 3.1s infinite; }
.co-line {
  color: #7fe3d8; font-size: 15px; line-height: 1.9; letter-spacing: .06em;
  text-shadow: 0 0 12px rgba(127,227,216,.45);
  animation: coIn .5s ease-out both;
}
.co-line:empty { height: 10px; }
.co-skip { margin-top: 26px; color: #24403f; font-size: 10px; letter-spacing: .22em; text-transform: uppercase; }
@keyframes coIn { from { opacity: 0; transform: translateX(-8px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes sigflick { 0%,96%,100% { opacity: 1; } 97% { opacity: .25; } 98% { opacity: .9; } }

.signal {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 88;
  display: flex; align-items: center; justify-content: center; pointer-events: auto; cursor: pointer;
  background: rgba(2,8,10,.72); opacity: 0; transition: opacity .45s;
}
.signal.show { opacity: 1; }
.signal.hidden { display: none; }
.sig-inner {
  width: min(560px, 88%); border-left: 2px solid #4fd8c8; padding: 16px 20px;
  background: linear-gradient(90deg, rgba(20,60,58,.5), rgba(4,12,14,.2));
}
.sig-head { color: #4a7d7a; font-size: 10px; letter-spacing: .3em; margin-bottom: 8px; animation: sigflick 2.3s infinite; }
#sig-text { color: #9ff0e4; font-size: 15px; line-height: 1.75; letter-spacing: .03em; text-shadow: 0 0 14px rgba(79,216,200,.4); }
#feed li.sig { color: #7fe3d8; border-left: 2px solid #4fd8c8; padding-left: 7px; }
/* a recruitment line takes the whole room */
.signal.deep { background: rgba(1,5,6,.94); }
.signal.deep .sig-inner { width: min(680px, 92%); border-left-width: 3px; padding: 26px 30px;
  background: linear-gradient(90deg, rgba(14,52,50,.6), rgba(2,8,10,.2)); }
.signal.deep #sig-text { font-size: 18px; line-height: 1.85; }
.signal.deep .sig-head::after { content: ' · PRIORITY'; }

/* ---- your kind's own instrument panel ---- */
.rp-res { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px;
  color: var(--gold-dim); letter-spacing: .1em; margin-bottom: 3px; }
.rp-res b { color: var(--gold); font-size: 13px; }
.rp-bar { margin-bottom: 9px; }
.rp-rows { display: grid; gap: 4px; margin-bottom: 4px; }
.rp-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: baseline;
  border-left: 2px solid var(--line); padding: 3px 0 3px 7px; }
.rp-row span { font-size: 11px; color: var(--ink-dim); letter-spacing: .08em; }
.rp-row b { color: var(--gold); font-size: 13px; }
.rp-row i { grid-column: 1 / -1; font-style: normal; font-size: 10.5px; color: #5c563f; line-height: 1.4; }

/* ---- the other four ---- */
.dp-list { display: grid; gap: 8px; margin-bottom: 6px; }
.dp-card { border: 1px solid var(--line); background: #100e08; padding: 8px 10px; }
.dp-card.pact { border-color: rgba(232,201,106,.4); }
.dp-card.allied { border-color: var(--good-dim); background: var(--t-panel); }
.dp-card.hostile { border-color: rgba(255,106,90,.4); }
.dp-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; letter-spacing: .1em; }
.dp-head i { font-style: normal; font-size: 10px; color: var(--ink-dim); letter-spacing: .14em; }
.dp-card.allied .dp-head i { color: var(--good); }
.dp-card.hostile .dp-head i { color: var(--bad); }
.dp-bar { height: 4px; background: #0a0805; border: 1px solid var(--line); margin: 5px 0 6px; }
.dp-bar i { display: block; height: 100%; }
.dp-bar i.g { background: var(--good); } .dp-bar i.n { background: var(--gold-dim); } .dp-bar i.b { background: var(--bad); }
.dp-terms { font-size: 10.5px; color: var(--ink-dim); line-height: 1.45; margin-bottom: 3px; }
.dp-terms b { color: var(--gold-dim); letter-spacing: .08em; }
.dp-moves { display: grid; gap: 4px; margin-top: 6px; }
.dp-btn { font-family: var(--font); font-size: 11px; text-align: left; cursor: pointer;
  color: var(--ink); background: #0c0a06; border: 1px solid var(--line); padding: 6px 8px;
  display: flex; justify-content: space-between; gap: 6px; transition: all .12s; }
.dp-btn:hover:not(:disabled) { color: var(--gold); border-color: var(--gold-dim); }
.dp-btn:disabled { opacity: .35; cursor: not-allowed; }
.dp-btn.bad { color: #e3a893; border-color: rgba(212,105,79,.3); }
.dp-btn.bad:hover:not(:disabled) { color: #ffd4c2; border-color: #d4694f; }

/* ================= THE WHOLE CONSOLE BELONGS TO YOUR KIND ==================
   The theming used to be scoped to #pane-kind, which is why every other screen
   still looked identical. --race / --race-dim / --race-glow now drive the top
   bar, the stat bar, the tabs, the goal bar, the milestone list, the decision
   modal, the world panel, the guide and the menus. Play the Reptilians and the
   instrument is green all the way through. */

body[data-kind] .brand,
body[data-kind] #topbar b,
body[data-kind] .favor-label,
body[data-kind] .favor-label b { color: var(--race) !important; }
body[data-kind] #topbar button:hover:not(:disabled) { color: var(--race); border-color: var(--race-dim); }
body[data-kind] .spd.sel { background: var(--race-dim); color: #08070a; border-color: var(--race); }

body[data-kind] #statbar b { color: var(--race); }
body[data-kind] .tab.sel { color: var(--race); border-bottom-color: var(--race); }
body[data-kind] .tab:hover { color: var(--race); }
body[data-kind] #tabs { border-bottom-color: var(--race-dim); }

body[data-kind] #next-bar b, body[data-kind] .nb-track i { color: var(--race); }
body[data-kind] .nb-track i { background: linear-gradient(90deg, var(--race-dim), var(--race)); }
body[data-kind] .ms-item.cur { border-color: var(--race-dim); color: var(--race); }
body[data-kind] #milestones li.on { color: var(--race); border-left-color: var(--race); }

/* the decision modal — the screen the player looks at most */
body[data-kind] .dc-box { border-color: var(--race-dim); box-shadow: 0 0 40px var(--race-glow); }
body[data-kind] .dc-box h2, body[data-kind] .dc-eye { color: var(--race); }
body[data-kind] .dc-opt:hover { border-color: var(--race-dim); }
body[data-kind] .dc-label { color: var(--race); }
body[data-kind] .dm b { color: var(--race); }
body[data-kind] .dm-b i.n { background: linear-gradient(90deg, var(--race-dim), var(--race)); }

/* the world panel and its buttons */
body[data-kind] .rg-card.sel { border-color: var(--race-dim); box-shadow: inset 0 0 40px var(--race-glow); }
body[data-kind] .rg-name { color: var(--race); }
body[data-kind] .rg-acts-label { color: var(--race-dim); }
body[data-kind] .ra-cost { color: var(--race-dim); }

/* menus, guide, overlays */
body[data-kind] .gm-box { border-color: var(--race-dim); box-shadow: 0 0 50px var(--race-glow); }
body[data-kind] .gm-box h2 { color: var(--race); }
body[data-kind] .gm-box button:hover:not(:disabled) { color: var(--race); border-color: var(--race-dim); }
body[data-kind] .gd b { color: var(--race); }
body[data-kind] #ov-title.good { color: var(--race); text-shadow: 0 0 16px var(--race-glow); }
body[data-kind] #ov-sub { color: var(--race); }
body[data-kind] #ov-reseed { background: var(--race); }
body[data-kind] .cine-title { color: var(--race); }
body[data-kind] #genebar b { color: var(--race); }

/* ---- each kind's own material, applied to the whole shell ---- */
body[data-kind="annunaki"] .crt { background:
  repeating-linear-gradient(0deg, rgba(232,201,106,.018) 0 2px, transparent 2px 6px), #0b0a06; }
body[data-kind="annunaki"] .dc-box h2,
body[data-kind="annunaki"] .brand { letter-spacing: .30em; text-shadow: 0 1px 0 #6a5320; }

body[data-kind="grey"] .crt { background: linear-gradient(180deg, #0b0f12, #05070a); }
body[data-kind="grey"] #statbar b, body[data-kind="grey"] .dm b,
body[data-kind="grey"] .rp-row b { font-variant-numeric: tabular-nums; }
body[data-kind="grey"] .brand, body[data-kind="grey"] .dc-box h2 { letter-spacing: .26em; font-weight: normal; }

body[data-kind="reptilian"] .crt { background:
  repeating-linear-gradient(120deg, rgba(var(--t-rgb),.030) 0 6px, transparent 6px 13px),
  repeating-linear-gradient(-120deg, rgba(var(--t-rgb),.030) 0 6px, transparent 6px 13px), var(--t-bg); }
body[data-kind="reptilian"] .dc-box h2 { font-style: italic; }

body[data-kind="insectoid"] .crt { background:
  repeating-linear-gradient(60deg, rgba(199,138,232,.05) 0 1px, transparent 1px 18px),
  repeating-linear-gradient(-60deg, rgba(199,138,232,.05) 0 1px, transparent 1px 18px), #08050d; }
body[data-kind="insectoid"] .dc-opt, body[data-kind="insectoid"] .ra-btn {
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px); }

body[data-kind="nordic"] .crt { background:
  radial-gradient(140% 55% at 50% 0%, rgba(154,212,255,.07), transparent 70%), #05080c; }
body[data-kind="nordic"] .brand, body[data-kind="nordic"] .dc-box h2 { letter-spacing: .3em; font-weight: normal; }

body[data-kind="human"] .crt { background:
  repeating-linear-gradient(0deg, rgba(224,185,138,.022) 0 1px, transparent 1px 24px), #0c0a07; }
body[data-kind="human"] .dc-opt { border-left: 2px solid rgba(224,185,138,.4); }

/* A rival's encounter is theirs, not yours: the box, the eye, the title and the
   option borders all take the rival's colour via inline --race on .dc-box. */
.dc-box.rival { border-color: var(--race); box-shadow: 0 0 44px var(--race-glow); }
.dc-box.rival h2 { color: var(--race); }
.dc-box.rival .dc-opt:hover { border-color: var(--race); }
.dc-box.rival .dc-label { color: var(--race); }
.dc-eye { transition: color .3s; }

/* ---- notices wear your kind's colour and sigil ---- */
.unlockbar { border-left: 3px solid var(--race); box-shadow: 0 0 30px var(--race-glow); }
.unlockbar .ub-sigil { font-size: 17px; margin-right: 2px; opacity: .9; }
.unlockbar .ub-body b { color: var(--race); }
.unlockbar.lore { border-left-color: #b9a8dd; box-shadow: 0 0 34px rgba(185,168,221,.22);
  background: linear-gradient(90deg, rgba(40,30,60,.6), rgba(10,8,6,.94)); }
.unlockbar.lore .ub-body b { color: #cbbdf0; letter-spacing: .22em; }
.unlockbar.lore .ub-body i { color: #d8cfae; font-style: italic; }
#feed li.lore { color: #cbbdf0; border-left: 2px solid #b9a8dd; padding-left: 7px; }

/* ---- each kind's console is built out of different material ----------------
   Colour was not enough: an Annunaki ledger should look struck in metal, a
   Grey readout should look like an instrument, the lattice should look like a
   lattice. Each kind gets its own surface, typography and rhythm. */

/* ANNUNAKI · a gold ledger stamped into a tablet */
body[data-kind="annunaki"] #pane-kind {
  background:
    repeating-linear-gradient(0deg, rgba(232,201,106,.030) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, #1a1408, #0d0a05);
}
body[data-kind="annunaki"] #pane-kind .cs {
  letter-spacing: .34em; border-bottom: 2px solid var(--race-dim);
}
body[data-kind="annunaki"] #pane-kind .rp-res b,
body[data-kind="annunaki"] #pane-kind .rp-row b {
  text-shadow: 0 1px 0 #6a5320, 0 0 14px rgba(232,201,106,.5);
}
body[data-kind="annunaki"] #pane-kind .rp-row {
  border-left-width: 3px; background: linear-gradient(90deg, rgba(232,201,106,.07), transparent);
}
body[data-kind="annunaki"] #pane-kind .ms-endbar,
body[data-kind="annunaki"] #pane-kind .rp-bar { height: 9px; border-color: var(--race-dim); }

/* GREYS · a cold instrument readout, tabular and clipped */
body[data-kind="grey"] #pane-kind {
  background: linear-gradient(180deg, #0d1114, #05070a);
}
body[data-kind="grey"] #pane-kind .cs,
body[data-kind="grey"] #pane-kind .rp-row span,
body[data-kind="grey"] #pane-kind .rp-res span {
  font-variant-numeric: tabular-nums; letter-spacing: .22em; text-transform: uppercase;
}
body[data-kind="grey"] #pane-kind .rp-row {
  border-left: none; border-top: 1px solid rgba(184,196,204,.18); padding-left: 0;
}
body[data-kind="grey"] #pane-kind .rp-row b { font-variant-numeric: tabular-nums; letter-spacing: .06em; }
body[data-kind="grey"] #pane-kind .rp-row::before {
  content: '▚'; color: rgba(184,196,204,.35); font-size: 9px; margin-right: 6px;
}
body[data-kind="grey"] #pane-kind .ms-endbar i, body[data-kind="grey"] #pane-kind .rp-bar i {
  background: repeating-linear-gradient(90deg, var(--race) 0 3px, transparent 3px 6px) !important;
}

/* REPTILIANS · scales, and everything slightly off-centre */
body[data-kind="reptilian"] #pane-kind {
  background:
    repeating-linear-gradient(120deg, rgba(var(--t-rgb),.045) 0 6px, transparent 6px 13px),
    repeating-linear-gradient(-120deg, rgba(var(--t-rgb),.045) 0 6px, transparent 6px 13px),
    #060c07;
}
body[data-kind="reptilian"] #pane-kind .rp-row { transform: skewX(-3deg); }
body[data-kind="reptilian"] #pane-kind .cs { font-style: italic; }

/* INSECTOIDS · the lattice, drawn as a lattice */
body[data-kind="insectoid"] #pane-kind {
  background:
    repeating-linear-gradient(60deg, rgba(199,138,232,.08) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-60deg, rgba(199,138,232,.08) 0 1px, transparent 1px 16px),
    #0a060f;
}
body[data-kind="insectoid"] #pane-kind .rp-row {
  border-left: none; border: 1px solid rgba(199,138,232,.22); padding: 5px 8px;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
body[data-kind="insectoid"] #pane-kind .rp-row b { font-variant-numeric: tabular-nums; }
body[data-kind="insectoid"] #pane-kind .cs::after { content: ' ⬡'; opacity: .6; }
body[data-kind="insectoid"] #pane-kind .ms-endbar i, body[data-kind="insectoid"] #pane-kind .rp-bar i {
  background: repeating-linear-gradient(90deg, var(--race) 0 6px, rgba(199,138,232,.35) 6px 9px) !important;
}

/* NORDICS · light, spacing, and nothing sharp */
body[data-kind="nordic"] #pane-kind {
  background: radial-gradient(120% 60% at 50% 0%, rgba(154,212,255,.10), transparent 70%), #060a0e;
}
body[data-kind="nordic"] #pane-kind .cs { letter-spacing: .3em; font-weight: normal; }
body[data-kind="nordic"] #pane-kind .rp-row {
  border-left: none; border-bottom: 1px solid rgba(154,212,255,.14); padding: 6px 0;
}
body[data-kind="nordic"] #pane-kind .rp-res b { text-shadow: 0 0 18px rgba(154,212,255,.7); }

/* HUMANITY · paper, ink and a ruled margin */
body[data-kind="human"] #pane-kind {
  background: repeating-linear-gradient(0deg, rgba(224,185,138,.035) 0 1px, transparent 1px 22px), #0d0a07;
}
body[data-kind="human"] #pane-kind .rp-row {
  border-left: 2px solid rgba(224,185,138,.45); margin-left: 10px;
}
body[data-kind="human"] #pane-kind .cs { border-bottom: 1px dashed var(--race-dim); }

/* ---- your kind's own colour ---- */
:root { --race: #e8c96a; --race-dim: #8a7638; --race-glow: rgba(232,201,106,.18); }
#pane-kind .ms-head { text-shadow: 0 0 18px var(--race-glow); }
#pane-kind .cs { color: var(--race); border-color: var(--race-dim); }
#pane-kind .rp-res b, #pane-kind .rp-row b { color: var(--race); }
#pane-kind .rp-bar i, #pane-kind .ms-endbar i { background: linear-gradient(90deg, var(--race-dim), var(--race)); }
#pane-kind .rp-row { border-left-color: var(--race-dim); }
#pane-kind .dp-btn:hover:not(:disabled) { color: var(--race); border-color: var(--race-dim); }
#pane-kind { box-shadow: inset 0 0 60px var(--race-glow); }
.kd-creed { font-style: italic; color: var(--race) !important; opacity: .85; }
.kd-fidbar i.g { background: linear-gradient(90deg, var(--gold-dim), var(--good)) !important; }
.kd-fidbar i.n { background: linear-gradient(90deg, var(--gold-dim), var(--gold)) !important; }
.kd-fidbar i.b { background: linear-gradient(90deg, #6b2a22, var(--bad)) !important; }
.rp-res b.g { color: var(--good) !important; }
.rp-res b.n { color: var(--gold) !important; }
.rp-res b.b { color: var(--bad) !important; }
.ra-btn:hover:not(:disabled) { color: var(--race); border-color: var(--race-dim); }

/* ---- the parley room ---- */
.parley-box { width: min(620px, 96%); max-height: 94%; overflow-y: auto; text-align: left; }
.pl-head { display: flex; align-items: baseline; gap: 10px; border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.pl-sigil { font-size: 24px; }
.pl-who { flex: 1; letter-spacing: .16em; font-size: 16px; font-weight: bold; }
.pl-round { color: var(--ink-dim); font-size: 11px; letter-spacing: .14em; }
.pl-power { margin: 12px 0 4px; }
.pl-band { font-size: 11px; letter-spacing: .2em; }
.pl-band.g { color: var(--good); } .pl-band.n { color: var(--gold); } .pl-band.b { color: var(--bad); }
.pl-bar { position: relative; height: 8px; background: #3a1a16; border: 1px solid var(--line); margin: 5px 0 3px; }
.pl-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--race-dim), var(--race)); transition: width .4s; }
.pl-legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--ink-dim); letter-spacing: .1em; }
.pl-line { color: var(--ink); font-size: 15px; line-height: 1.7; font-style: italic;
  border-left: 2px solid var(--race-dim); padding: 4px 0 4px 12px; margin: 14px 0; }
.pl-log { margin-top: 10px; max-height: 130px; overflow-y: auto; }
.pl-log div { font-size: 11.5px; color: var(--ink-dim); line-height: 1.55; padding: 4px 0; border-top: 1px solid var(--line); }
.pl-log b { color: var(--race); }
.dp-parley { border-color: var(--race-dim) !important; color: var(--race) !important; }

/* ---- disowned ---- */
.creed-box { width: min(560px, 94%); border-color: var(--bad); box-shadow: 0 0 60px rgba(255,106,90,.18); }
.creed-box h2 { color: var(--bad); letter-spacing: .16em; }
.cb-body p { color: var(--ink); font-size: 13.5px; line-height: 1.65; text-align: left; margin: 0 0 10px; }
.cb-fit { color: var(--ink-dim) !important; border-top: 1px solid var(--line); padding-top: 9px; }

/* ---- the cosmic chess ---- */
.finale-box { width: min(760px, 96%); max-height: 94%; overflow-y: auto; }
.fin-opts { display: grid; gap: 8px; text-align: left; margin: 10px 0 14px; }
.fin-opt {
  font-family: var(--font); cursor: pointer; text-align: left; display: block; width: 100%;
  background: #100e08; border: 1px solid var(--line); padding: 11px 14px;
  transition: border-color .12s, background .12s, transform .12s;
}
.fin-opt:hover:not(:disabled) { border-color: var(--gold-dim); background: #17140c; transform: translateX(3px); }
.fin-opt.own { border-color: rgba(232,201,106,.45); }
.fin-opt.sixth { border-color: var(--good-dim); background: var(--t-panel); }
.fin-opt.sixth:hover:not(:disabled) { border-color: var(--good); }
.fin-opt.locked { opacity: .45; cursor: not-allowed; border-style: dashed; }
.fin-h { display: flex; align-items: baseline; gap: 9px; }
.fin-i { font-size: 18px; }
.fin-h b { color: var(--gold); letter-spacing: .12em; font-size: 14px; }
.fin-h i { color: var(--ink-dim); font-style: normal; font-size: 11px; letter-spacing: .08em; margin-left: auto; }
.fin-opt.sixth .fin-h b { color: var(--good); }
.fin-l { display: block; margin-top: 5px; color: var(--ink); font-size: 12.5px; line-height: 1.5; }
.fin-lock { display: block; margin-top: 6px; color: var(--bad); font-size: 11px; }

.sx-box { text-align: left; border: 1px solid var(--line); background: #0a0805; padding: 9px 11px; }
.sx-box.open { border-color: var(--good-dim); }
.sx-head { color: var(--good); letter-spacing: .12em; font-size: 12px; margin-bottom: 3px; }
.sx-note { color: var(--ink-dim); font-size: 11px; line-height: 1.5; margin-bottom: 6px; }
.sx-row { display: flex; justify-content: space-between; font-size: 11.5px; padding: 2px 0; }
.sx-row.ok { color: var(--good); }
.sx-row.no { color: var(--ink-dim); }
.sx-row b { color: var(--ink); }

.ms-agenda { color: var(--gold); font-size: 11.5px; line-height: 1.55; margin-bottom: 7px; font-style: italic; }
.fs-agenda { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line);
  color: var(--gold-dim); font-size: 11px; line-height: 1.5; font-style: italic; }
.ms-end { color: var(--ink-dim); font-size: 11.5px; line-height: 1.5; margin-bottom: 6px; }
.ms-endbar { height: 6px; background: #0a0805; border: 1px solid var(--line); }
.ms-endbar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-dim), var(--gold)); }
.ms-endpct { font-size: 10.5px; color: var(--gold-dim); letter-spacing: .1em; margin: 3px 0 8px; }

/* ---- the console changes colour with the age ---- */
body[data-era="clay"]   { --gold: #e3b76e; --gold-dim: #8a6a38; }
body[data-era="bronze"] { --gold: #dc9f52; --gold-dim: #8a5f2a; }
body[data-era="iron"]   { --gold: #cbb49c; --gold-dim: #7d6d5b; }
body[data-era="marble"] { --gold: #e6dcc0; --gold-dim: #8a8266; }
body[data-era="ink"]    { --gold: #dccf92; --gold-dim: #857a48; }
body[data-era="soot"]   { --gold: #c8904e; --gold-dim: #7d5c2c; }
body[data-era="steel"]  { --gold: #bcc7cf; --gold-dim: #6e7a84; }
body[data-era="glass"]  { --gold: #93d2e2; --gold-dim: #4c7c88; }
body[data-era="light"]  { --gold: #a8e8ff; --gold-dim: #5c8c9e; }
.crt, #topbar, #statbar, #tabs, .pane, .dc-box, .gm-box { transition: color .8s, border-color .8s; }

/* ---- mobile ---- */
@media (max-width: 880px) {
  #layout { grid-template-columns: 1fr; grid-template-rows: minmax(0, 58%) minmax(0, 42%); }
  #left { border-right: none; }
  #right { border-top: 1px solid var(--line); }
  #feed { height: 84px; }
  .ov-box h1 { font-size: 28px; }
  .ov-story { max-height: 38vh; }
}
@media (max-width: 600px) {
  body { font-size: 13.5px; }
  #topbar { padding: 5px 8px; gap: 4px 8px; font-size: 11px; }
  #topbar button { padding: 5px 9px; font-size: 12px; }
  #statbar { gap: 3px 10px; padding: 5px 8px; font-size: 11px; }
  #viewport { padding: 4px; }
  #genebar { font-size: 10px; padding: 4px 8px; }
  #feed { height: 92px; font-size: 12.5px; padding: 5px 8px; }
  .tab { font-size: 11px; padding: 9px 0; }
  .dc-box { padding: 14px 14px; }
  .dc-box h2 { font-size: 18px; }
  #dc-text { font-size: 14px; }
  .dc-label { font-size: 13.5px; }
  #ov-reseed { font-size: 13px; padding: 10px 22px; }
  /* the top bar has to stay usable: drop the least urgent readouts, but never
     the seed chip — copying the world link matters most on a phone */
  .asc-label, #topbar .sep { display: none; }
  #seed-chip { font-size: 10px; }
  .dm { grid-template-columns: 62px 1fr 54px; font-size: 9.5px; }
  .dc-tone { display: block; float: none; margin-top: 4px; width: fit-content; }
  .sh-btns { flex-direction: column; }
  .sh-text { font-size: 11px; }
  .ov-share { display: block; width: 100%; margin: 0 0 10px; font-size: 12.5px; padding: 10px 0; }
  .ec-name { font-size: 12px; }
}

/* ---- the objective strip: why any of this matters, always on screen -------- */
.objective {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 10px; margin: 0 0 4px;
  font-size: 11px; letter-spacing: .08em; cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--race) 14%, transparent), transparent 70%);
  border-left: 3px solid var(--race);
  color: #cfc6b4; overflow: hidden; white-space: nowrap;
}
.objective:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--race) 24%, transparent), transparent 70%); }
.objective .ob-mark { color: var(--race); font-size: 13px; }
.objective .ob-now { color: var(--race); font-weight: 700; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; }
.objective .ob-arrow { opacity: .45; }
.objective .ob-end { opacity: .72; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }

/* ---- HOW TO DO THIS: the levers that actually move the bar ----------------- */
.ms-how {
  margin: 8px 0 4px; padding: 8px 9px;
  border: 1px solid color-mix(in srgb, var(--race) 34%, transparent);
  background: color-mix(in srgb, var(--race) 7%, transparent);
}
.ms-how-h {
  font-size: 9.5px; letter-spacing: .16em; color: var(--race);
  margin-bottom: 5px; opacity: .9;
}
.ms-how-i {
  font-size: 11px; line-height: 1.5; color: #b8b0a0;
  padding-left: 12px; position: relative; margin-bottom: 4px;
}
.ms-how-i:last-child { margin-bottom: 0; }
.ms-how-i::before { content: '▸'; position: absolute; left: 0; color: var(--race); opacity: .7; }

/* An ancient-knowledge card now holds for 16s — give it a read-timer edge so it
   is obvious it is going to stay, and that it is going to leave. */
.unlockbar.lore::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 2px;
  background: var(--race); width: 100%;
  transform-origin: left; animation: lore-read 16s linear forwards;
}
@keyframes lore-read { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ---- THE SIGILS: drawn marks, not borrowed emoji --------------------------- */
/* Each sits on the text baseline and takes the colour of whatever it is next to,
   so one mark serves the statbar, the toasts, the chapter head and the pact
   cards without a size or colour rule per site. */
.sig {
  width: 1.15em; height: 1.15em;
  display: inline-block; vertical-align: -.22em;
  color: inherit; flex: none;
}
.fs-icon .sig    { width: 2.4em; height: 2.4em; vertical-align: middle; }
.cine-icon .sig,
#cine-icon .sig  { width: 1em;   height: 1em;   vertical-align: middle; }
.ms-head .sig    { width: 1.3em; height: 1.3em; }
.ub-sigil .sig   { width: 1.25em; height: 1.25em; opacity: .95; }
.fin-i .sig      { width: 1.5em; height: 1.5em; }
#pl-sigil .sig   { width: 1.6em; height: 1.6em; }
#st-faction .sig { width: 1.1em; height: 1.1em; }
.dc-eye .sig, #dc-eye .sig { width: 1em; height: 1em; }
/* the mark breathes very slightly, so it reads as a live signal not a logo */
@keyframes sig-pulse { 0%,100% { opacity: .92; } 50% { opacity: 1; } }
.ms-head .sig, .fs-icon .sig, #pl-sigil .sig { animation: sig-pulse 4.5s ease-in-out infinite; }

/* ---- readability: the guidance was set too small to read ------------------- */
.ms-how { padding: 10px 11px; }
.ms-how-h { font-size: 11px; letter-spacing: .14em; margin-bottom: 7px; }
.ms-how-i {
  font-size: 13.5px; line-height: 1.62; color: #cbc3b2;
  padding-left: 16px; margin-bottom: 8px;
}
.ms-how-i::before { font-size: 12px; top: 1px; }
.ms-how-i.go {
  cursor: pointer; border-bottom: 1px dashed color-mix(in srgb, var(--race) 40%, transparent);
  padding-bottom: 5px; transition: color .15s, background .15s;
}
.ms-how-i.go:hover { color: var(--race); background: color-mix(in srgb, var(--race) 9%, transparent); }
.ms-go {
  margin-left: 7px; font-size: 11px; letter-spacing: .12em;
  color: var(--race); opacity: .85; white-space: nowrap;
}
.ms-goal { font-size: 13px; line-height: 1.55; }
.ms-prog { font-size: 12.5px; }
.ms-path { font-size: 13px; }
.ms-ch   { font-size: 13.5px; }

/* ---- the kind's material, behind the whole right column -------------------- */
/* One pinned surface, not a canvas inside each scrolling pane: a pane is a
   scroll container, so a canvas inside one slides out of view the moment the
   panel has any length. This one never moves and it is under every tab. */
#right { position: relative; background: var(--panel); }
.kindskin {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
/* the tabs, the panes and the credit all sit on top of the material */
#right > *:not(.kindskin) { position: relative; z-index: 1; }
/* the panes themselves go transparent so the material shows through, and the
   text keeps its own dark plate so it stays readable over a live surface */
#right .pane { background: transparent; }
#tabs { background: rgba(6,5,8,.86); backdrop-filter: blur(2px); }
/* The panes carry no plate at all now: the material is visible in the gutters
   BETWEEN cards, and every card is opaque, so no glyph ever crosses a letter. */
#right .pane { background: transparent; }
#pane-kind #kind, #pane-pacts #pacts, #pane-mission #mission,
#pane-miles, #pane-regions #regions, #pane-census #census, #pane-annals {
  background: transparent;
  padding: 11px 11px 26px;
  display: flex; flex-direction: column; gap: 11px;
}
#pane-annals, #milestones { gap: 0; }

/* ---- the card ------------------------------------------------------------- */
.pcard {
  background: rgba(9,8,13,.97);
  border: 1px solid var(--line);
  border-left: 3px solid var(--race);
}
.pcard > h3 {
  margin: 0; padding: 10px 13px 9px;
  font-size: 10.5px; letter-spacing: .2em; font-weight: normal;
  color: var(--race); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--race) 6%, transparent);
}
.pcard > .in { padding: 12px 13px; }
.pcard > .in > *:first-child { margin-top: 0; }

/* the kind's name and its agenda, at the top of every kind screen */
.pc-who {
  color: var(--race); font-size: 15px; letter-spacing: .18em;
  display: flex; align-items: center; gap: 9px;
}
.pc-agenda { font-size: 12px; color: var(--ink-dim); line-height: 1.7; margin-top: 8px; }
.pc-quote { font-style: italic; font-size: 12.5px; line-height: 1.7; color: var(--ink); }

/* a headline figure with its bar underneath */
.pc-big { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pc-big span { font-size: 10.5px; letter-spacing: .14em; color: var(--ink-dim); }
.pc-big b { font-size: 24px; line-height: 1; color: var(--race); font-variant-numeric: tabular-nums; }
.pc-big b small { font-size: 14px; color: var(--ink-dim); font-weight: normal; }
.pc-bar { height: 5px; background: #0d0b10; margin: 10px 0 7px; }
.pc-bar i { display: block; height: 100%; background: var(--race); transition: width .4s; }
.pc-bar i.b { background: var(--bad); } .pc-bar i.n { background: var(--gold-dim); }
.pc-cap { font-size: 10.5px; color: var(--ink-dim); opacity: .8; line-height: 1.55; }
.pc-prose { font-size: 12px; color: var(--ink-dim); line-height: 1.7; }

/* the resource rows, as tiles: the number first and aligned */
.pc-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.pc-tile { background: rgba(9,8,13,.97); padding: 11px 12px; min-width: 0; }
.pc-tile b {
  display: block; font-size: 20px; line-height: 1.1; color: var(--race);
  font-variant-numeric: tabular-nums;
}
.pc-tile span {
  display: block; font-size: 10.5px; letter-spacing: .09em; color: var(--ink);
  margin-top: 5px; overflow-wrap: anywhere;
}
.pc-tile i {
  display: block; font-style: normal; font-size: 10px; color: var(--ink-dim);
  opacity: .78; margin-top: 4px; line-height: 1.5;
}

/* a checklist row (the sixth path, the chapter list) */
.pc-ck {
  display: grid; grid-template-columns: 16px 1fr auto; gap: 9px;
  padding: 8px 0; font-size: 11.5px; border-top: 1px solid rgba(36,31,24,.7);
}
.pc-ck:first-of-type { border-top: 0; }
.pc-ck.no { color: var(--ink-dim); } .pc-ck.yes { color: var(--good); }
.pc-ck b { font-weight: normal; font-variant-numeric: tabular-nums; }

#credit { background: rgba(6,5,8,.92); }
/* the old flat per-kind backgrounds are replaced by the material itself */
body[data-kind] #pane-kind { background: transparent; }

/* ---- PACTS: the four other watchers, loudest first ------------------------- */
.pc-top {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
  margin-bottom: 10px;
}
.pc-tally {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; border: 1px solid rgba(255,255,255,.09);
  background: rgba(0,0,0,.42);
}
.pc-tally b { font-size: 22px; line-height: 1; color: var(--race); }
.pc-tally b.bad  { color: #d4735e; }
.pc-tally b.good { color: var(--good); }
.pc-tally span {
  font-size: 9.5px; letter-spacing: .1em; text-align: center;
  color: #9a9284; line-height: 1.3;
}
.dp-power {
  font-size: 11px; color: #9a9284; margin: 4px 0 6px;
  letter-spacing: .05em;
}
.dp-power b { color: var(--race); }
/* each card wears the colour of the watcher it is about, not yours */
#pane-pacts .dp-card {
  border-left: 3px solid var(--race);
  background: rgba(0,0,0,.5);
  margin-bottom: 9px; padding: 9px 10px;
}
#pane-pacts .dp-card.hostile { box-shadow: inset 0 0 26px rgba(212,115,94,.13); }
#pane-pacts .dp-card.ally    { box-shadow: inset 0 0 26px rgba(127,201,138,.13); }
#pane-pacts .dp-head { font-size: 13px; }
#pane-pacts .dp-terms { font-size: 11.5px; line-height: 1.5; }

/* ---- the remaining panes, brought onto the card grammar -------------------- */
/* MILESTONES, WORLD, CENSUS and HISTORY were not built out of cards, so they
   each get one card-shaped surface rather than floating on the material. */
#pane-miles > #next-bar,
#pane-miles > #milestones,
#pane-regions > #regions,
#pane-census > #census,
#pane-annals > #annals {
  background: rgba(9,8,13,.97);
  border: 1px solid var(--line);
  border-left: 3px solid var(--race);
  padding: 11px 13px;
  margin: 0;
}
#pane-miles { padding: 11px 11px 26px; display: flex; flex-direction: column; gap: 11px; }
#pane-annals > #annals, #pane-census > #census { list-style: none; }

/* the region cards and milestone rows sit inside their surface, so they lose
   their own borders and keep only the rhythm */
#pane-regions .rg-card { background: transparent; border-left: 0; }
#milestones li { background: transparent; }
#pane-annals #annals li { background: transparent; }

/* the tally strip at the head of PACTS */
.pcard > .pc-top { margin: 0; padding: 11px 11px 0; }
.pcard > .pc-top + .in { padding-top: 10px; }
.pc-tally { border: 1px solid var(--line); background: rgba(0,0,0,.4); }

/* PACTS cards: the head becomes the card's title bar */
.pcard.dp-card > h3.dp-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  font-size: 12.5px; letter-spacing: .14em; color: var(--race);
}
.pcard.dp-card > h3.dp-head i { font-style: normal; font-size: 10px; color: var(--ink-dim); letter-spacing: .1em; }
.pcard.dp-card .dp-moves { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.pcard.dp-card .dp-terms { font-size: 11.5px; line-height: 1.55; margin-top: 6px; color: var(--ink-dim); }
.pcard.dp-card .dp-terms b { color: var(--ink); font-weight: normal; }

/* the chapter card's own bits */
.ms-ch { font-size: 13.5px; letter-spacing: .1em; color: var(--ink); }
.ms-path { font-size: 12.5px; color: var(--race); margin-top: 8px; }
.ms-goal { font-size: 12px; color: var(--ink-dim); line-height: 1.6; margin-top: 5px; }
.pc-big b.urgent { color: var(--bad); }

/* HOW TO DO THIS is a card now, so its old box chrome goes */
.pcard > .in > .ms-how-i:first-child { margin-top: 0; }
.pcard .ms-how-i { margin-bottom: 9px; }
.pcard .ms-how-i:last-child { margin-bottom: 0; }

/* the three figures at the head of PACTS are buttons into the deck */
.pc-tally[data-filter] { cursor: pointer; transition: background .15s, border-color .15s; }
.pc-tally[data-filter]:hover { background: rgba(255,255,255,.05); border-color: var(--race); }
.pc-tally.on { border-color: var(--race); background: color-mix(in srgb, var(--race) 14%, transparent); }
.pc-tally.on span { color: var(--race); }

/* ---- the sixth seat: on the table, not yours to take ----------------------- */
.fs-card.sealed {
  cursor: not-allowed; position: relative;
  filter: grayscale(.55) brightness(.66);
  transition: filter .25s;
}
.fs-card.sealed::before {
  /* a seal across the card, drawn rather than written */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(-45deg,
    transparent 0 13px, rgba(216,207,174,.055) 13px 15px);
}
.fs-card.sealed:hover { filter: grayscale(.35) brightness(.82); }
.fs-card.sealed .fs-icon { opacity: .6; }
.fs-refuse {
  min-height: 0; margin-top: 0; padding: 0 0;
  font-size: 12px; line-height: 1.65; color: #d8cfae;
  border-top: 0 solid transparent; overflow: hidden;
  max-height: 0; opacity: 0;
  /* height applies at once — only the fade is animated, so the answer is on
     screen even where transitions do not run */
  transition: opacity .3s ease;
}
.fs-card.refusing .fs-refuse {
  max-height: 90px; opacity: 1; margin-top: 11px; padding-top: 10px;
  border-top: 1px solid rgba(216,207,174,.3);
}
/* the card flinches once, the way a channel closing looks */
@keyframes seal-flinch {
  0%   { transform: translateX(0); }
  18%  { transform: translateX(-4px); }
  36%  { transform: translateX(3px); }
  54%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.fs-card.refusing { animation: seal-flinch .34s ease-out; filter: grayscale(.2) brightness(1); }

/* ---- THE RACE HUD: what your kind is counting, big, across the top ---------- */
/* The statbar counts the world. This counts you. */
.racehud {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0; border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--race) 9%, rgba(6,5,9,.92)), rgba(6,5,9,.94));
}
.racehud.hidden { display: none; }

/* the two headline figures */
.rh-gauges { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.rh-g {
  padding: 9px 16px 10px; min-width: 0;
  border-right: 1px solid color-mix(in srgb, var(--race) 22%, transparent);
}
.rh-g-top { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; }
.rh-g-i { font-size: 14px; color: var(--race); line-height: 1; }
.rh-g-n {
  font-size: 9.5px; letter-spacing: .16em; color: #9a9284;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rh-g-v {
  font-size: 30px; line-height: 1.05; color: var(--race);
  font-variant-numeric: tabular-nums; letter-spacing: .02em;
  text-shadow: 0 0 22px color-mix(in srgb, var(--race) 45%, transparent);
}
.rh-g-bar { height: 4px; background: #0d0b10; margin: 6px 0 5px; }
.rh-g-bar i {
  display: block; height: 100%; background: var(--race);
  box-shadow: 0 0 10px var(--race); transition: width .5s;
}
.rh-g-note {
  font-size: 10px; line-height: 1.45; color: #7d766a;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* the three forces pushing back */
.rh-press { padding: 8px 16px 9px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rh-p-head {
  font-size: 9px; letter-spacing: .22em; color: #7d766a; margin-bottom: 2px;
}
.rh-p {
  display: grid; grid-template-columns: 15px minmax(0, 1fr) 88px 30px;
  align-items: center; gap: 8px; cursor: help;
}
.rh-p-i { font-size: 12px; line-height: 1; text-align: center; }
.rh-p-n {
  font-size: 10.5px; letter-spacing: .07em; color: #a49c8e;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rh-p-bar { display: block; height: 5px; background: #0d0b10; }
.rh-p-bar i { display: block; height: 100%; transition: width .5s; }
.rh-p-v { font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; font-weight: normal; }
.rh-p.low  .rh-p-bar i { background: var(--good); } .rh-p.low  .rh-p-v { color: var(--good); }
.rh-p.mid  .rh-p-bar i { background: #c9a24a; } .rh-p.mid  .rh-p-v { color: #c9a24a; }
.rh-p.high .rh-p-bar i { background: #d4735e; box-shadow: 0 0 9px rgba(212,115,94,.65); }
.rh-p.high .rh-p-v { color: #d4735e; }
.rh-p.high .rh-p-n { color: #d4735e; }
.rh-p.high .rh-p-i { animation: blink 1.4s steps(1) infinite; }

@media (max-width: 1250px) {
  .racehud { grid-template-columns: 1fr; }
  .rh-press { border-top: 1px solid color-mix(in srgb, var(--race) 22%, transparent); }
  .rh-g-v { font-size: 25px; }
}

/* ---- what a place still holds about you ----------------------------------- */
.rg-mood {
  display: grid; grid-template-columns: minmax(0,1fr) 74px 34px;
  align-items: center; gap: 8px; margin-top: 7px;
}
.rg-mood-w { font-size: 9.5px; letter-spacing: .13em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rg-mood-bar { display: block; height: 4px; background: #0d0b10; }
.rg-mood-bar i { display: block; height: 100%; }
.rg-mood b { font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; font-weight: normal; }
.rg-mood.fear .rg-mood-w, .rg-mood.fear b { color: #d4735e; }
.rg-mood.fear .rg-mood-bar i { background: #d4735e; }
.rg-mood.love .rg-mood-w, .rg-mood.love b { color: var(--good); }
.rg-mood.love .rg-mood-bar i { background: var(--good); }
.rg-mood.flat .rg-mood-w, .rg-mood.flat b { color: #8d8577; }
.rg-mood.flat .rg-mood-bar i { background: #8d8577; }
.rg-voice {
  font-size: 10.5px; font-style: italic; line-height: 1.5;
  color: #9a9284; margin-top: 5px; padding-left: 9px;
  border-left: 2px solid color-mix(in srgb, var(--race) 40%, transparent);
}

/* ---- statbar diet ---------------------------------------------------------
   Nine numbers competed for the same attention and perhaps three of them ever
   changed what a player clicked. The read-outs stay — they are still true, and
   the panels use them — but they stop shouting alongside the levers. */
#statbar .st-quiet { opacity: .45; font-size: 11px; transition: opacity .2s; }
#statbar .st-quiet:hover { opacity: 1; }
#statbar .st-quiet b { color: var(--ink-dim); }
@media (max-width: 1400px) { #statbar .st-quiet { display: none; } }

/* ---- the instrument calling your choice before you make it ---------------- */
.dc-predict {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; padding: 9px 12px;
  border: 1px solid rgba(184,220,236,.28);
  background: linear-gradient(90deg, rgba(184,220,236,.09), transparent 78%);
  font-size: 12px; line-height: 1.5; color: #b6cdd8;
  animation: dp-in .5s ease-out;
}
.dc-predict.hidden { display: none; }
.dp-mark { color: #9ecbdc; font-size: 13px; animation: blink 2.2s steps(1) infinite; }
.dp-line { flex: 1; min-width: 0; }
.dp-rec {
  font-size: 10.5px; letter-spacing: .1em; color: #7f97a3;
  border-left: 1px solid rgba(184,220,236,.25); padding-left: 10px; white-space: nowrap;
}
@keyframes dp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---- which build you are looking at ---------------------------------------- */
.version {
  margin-left: 10px; padding: 3px 8px;
  font-size: 10px; letter-spacing: .16em; white-space: nowrap;
  color: #7d766a; border: 1px solid var(--line);
  background: rgba(0,0,0,.35); cursor: default; user-select: all;
}
.version:hover { color: var(--race); border-color: color-mix(in srgb, var(--race) 45%, transparent); }

/* ---- the epoch row: what this species has made possible -------------------- */
.rg-acts-label.epoch { color: #c9a24a; }
.rg-epoch-line {
  font-size: 10.5px; font-style: italic; line-height: 1.55;
  color: #9a9284; margin: 0 0 7px; padding-left: 9px;
  border-left: 2px solid rgba(201,162,74,.45);
}

/* ---- the chapter purse: favor stops being free ----------------------------- */
.purse {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 10px;
  font-size: 10px; letter-spacing: .1em; color: #8d8577;
}
.purse.hidden { display: none; }
.purse .pu-l { opacity: .8; }
.purse .pu-bar { display: block; width: 62px; height: 4px; background: #0d0b10; }
.purse .pu-bar i { display: block; height: 100%; background: var(--race); transition: width .4s; }
.purse b { color: var(--ink-dim); font-weight: normal; font-variant-numeric: tabular-nums; }
.purse.low .pu-bar i { background: #c9a24a; } .purse.low b { color: #c9a24a; }
.purse.over .pu-bar i { background: #d4735e; } .purse.over b { color: #d4735e; }
.purse .pu-debt {
  font-style: normal; color: #d4735e; font-size: 10px;
  border-left: 1px solid var(--line); padding-left: 7px;
}

/* ---- a rival's plan, with a countdown you can play against ------------------ */
.rh-s {
  display: grid; grid-template-columns: 15px minmax(0,1fr) 34px auto;
  align-items: center; gap: 8px; cursor: help;
}
.rh-s-i { font-size: 12px; text-align: center; color: var(--race); }
.rh-s-n {
  font-size: 10.5px; letter-spacing: .06em; color: var(--race);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rh-s-y { font-size: 12px; text-align: right; color: var(--race); font-variant-numeric: tabular-nums; font-weight: normal; }
.rh-s.urgent .rh-s-n, .rh-s.urgent .rh-s-y { color: #d4735e; }
.rh-s.urgent .rh-s-i { animation: blink 1.1s steps(1) infinite; }
.rh-s-b {
  font: 9.5px "Courier New", monospace; letter-spacing: .08em; cursor: pointer;
  padding: 3px 7px; white-space: nowrap;
  background: rgba(0,0,0,.45); color: var(--race);
  border: 1px solid color-mix(in srgb, var(--race) 45%, transparent);
}
.rh-s-b:hover { background: color-mix(in srgb, var(--race) 18%, transparent); }
.rh-s-b.poor { opacity: .4; cursor: not-allowed; }

/* ---- the parley answers back ----------------------------------------------- */
/* Round one they open; after that the line on screen is their reply to what you
   just said, tinted by whether it moved the balance your way. */
.pl-line { transition: color .3s; }
.pl-line.r-won  { color: #8fca8f; }
.pl-line.r-held { color: #cbc3b2; }
.pl-line.r-lost { color: #d4735e; }
.pl-them-said {
  display: block; font-style: italic; color: #a8b6c0;
  padding-left: 10px; margin-top: 3px;
  border-left: 2px solid rgba(168,182,192,.35);
}