/* ============================================================
   theme.css — neutral dark instrument shell.

   Nothing is docked. The screen belongs to the colony; the UI is a
   row of round buttons top-right, each opening one popup that closes
   again the moment you are done. Same shape as the savanna sim.

   Amber appears ONLY where something is active, live, or being
   changed. Serif headings, system sans elsewhere, mono for numbers
   and keycaps. No network fetches: the sim has to run from file://,
   so the type is a system stack and every icon is inline.
   ============================================================ */

:root {
  /* surfaces */
  --bg:        #0b0c0d;
  --panel:     #101112;
  --panel-2:   #16181a;
  --raised:    #1d2023;
  --line:      rgba(255, 255, 255, 0.09);
  --line-soft: rgba(255, 255, 255, 0.05);

  /* ink */
  --text:      #e8e6e3;
  --dim:       #8b8b88;
  --faint:     #5f6062;

  /* the one accent */
  --accent:    #ffc861;
  --accent-dim:rgba(255, 200, 97, 0.16);
  --danger:    #ff7a6b;

  /* caste ramp — soil to pale, lifted so the dark end still reads
     as a bar against a near-black panel */
  --c-minim:   #8a6c45;
  --c-media:   #a98455;
  --c-major:   #c89f66;
  --c-soldier: #e6c184;

  /* type */
  --serif: ui-serif, Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --sans:  ui-sans-serif, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono:  ui-monospace, 'Cascadia Mono', Consolas, 'Courier New', monospace;

  /* rhythm */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --btn: 42px;

  /* motion — functional only */
  --t-fast: 140ms;
  --t-mid:  180ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: var(--sans);
  font-size: 13px;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#scene-holder, #scene-holder canvas { position: absolute; inset: 0; display: block; }

input { user-select: text; -webkit-user-select: text; }

.hidden, [hidden] { display: none !important; }

#vignette {
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(0, 0, 0, 0) 54%, rgba(0, 0, 0, 0.5) 100%);
  z-index: 5;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* inline icon defaults — strokes unless told otherwise */
svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.i-pause rect, .i-play path { fill: currentColor; stroke: none; }

/* ====================== status strip ====================== */

#statusbar {
  position: absolute; top: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(16, 17, 18, 0.86);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  white-space: nowrap;
  transition: background var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease);
}
.sb-title { font-family: var(--serif); font-size: 14px; letter-spacing: 0.01em; }
.sb-mark { margin-right: 8px; }
.sb-sep { width: 1px; height: 14px; background: var(--line); }
.sb-live { display: flex; align-items: baseline; gap: 6px; }
.sb-live b {
  font-family: var(--mono); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.sb-unit { font-size: 10.5px; color: var(--faint); letter-spacing: 0.04em; }
.sb-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--faint); margin: 0 4px; }
.sb-raid { display: none; font-size: 12.5px; font-weight: 600; color: #ffd9c8; }

/* raid: the strip itself is the alert. One element, never two stacked. */
#statusbar.raid {
  background: rgba(96, 24, 16, 0.9);
  border-color: rgba(255, 122, 107, 0.55);
}
#statusbar.raid .sb-live, #statusbar.raid .sb-sep { display: none; }
#statusbar.raid .sb-raid { display: inline; }
#statusbar.raid .sb-title { color: #ffd9c8; }

/* ========================= icon bar ========================= */

#iconbar {
  position: absolute; top: 14px; right: 16px;
  z-index: 22;
  display: flex; align-items: center; gap: 8px;
}

.round-btn {
  width: var(--btn); height: var(--btn);
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(16, 17, 18, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--dim);
  font-size: 17px; line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.round-btn svg { width: 16px; height: 16px; }
.round-btn:hover { border-color: rgba(255, 255, 255, 0.24); color: var(--text); }
.round-btn:active { transform: translateY(1px); }
.round-btn.open, .round-btn.paused {
  border-color: var(--accent);
  background: rgba(255, 200, 97, 0.14);
  color: var(--accent);
}
.round-btn.alarm { color: var(--danger); border-color: rgba(255, 122, 107, 0.3); }
.round-btn.alarm:hover { border-color: var(--danger); background: rgba(255, 122, 107, 0.12); }
#btn-help { font-family: var(--serif); font-size: 18px; }

/* a brush is selected: the brush button says so without opening */
.round-btn.armed { border-color: rgba(255, 200, 97, 0.5); color: var(--accent); }

/* pause + its speed caret, one pill */
.split {
  display: flex; align-items: center;
  height: var(--btn);
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(16, 17, 18, 0.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  overflow: hidden;
}
.split .round-btn {
  border: 0; background: transparent; backdrop-filter: none;
  border-radius: 999px 0 0 999px;
}
.split .round-btn.paused { background: rgba(255, 200, 97, 0.14); }
.split .caret {
  width: 24px; height: 100%;
  display: grid; place-items: center;
  border: 0; border-left: 1px solid var(--line);
  background: transparent;
  color: var(--faint);
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.split .caret svg { width: 12px; height: 12px; }
.split .caret:hover { background: var(--raised); color: var(--text); }
.split .caret.open { color: var(--accent); background: rgba(255, 200, 97, 0.14); }

/* ========================== popups ==========================
   Positioned from JS so each one hangs under the button that opened
   it, clamped to the window. Only one is ever open. */

.pop {
  position: absolute;
  z-index: 21;
  display: none;
  width: var(--w, 240px);
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: rgba(16, 17, 18, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.55);
}
.pop.open { display: block; animation: pop-in var(--t-mid) var(--ease); }
@keyframes pop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.pop.scroll {
  max-height: calc(100vh - 90px);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.14) transparent;
}
.pop.scroll::-webkit-scrollbar { width: 8px; }
.pop.scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.13);
  border-radius: 99px; border: 2px solid transparent; background-clip: padding-box;
}

.pop-title {
  font-family: var(--serif); font-size: 13px;
  color: var(--dim);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-soft);
}

.group { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.group:last-child { border-bottom: 0; }
.group:first-of-type { padding-top: 0; }
.group h3 {
  font-family: var(--serif);
  font-size: 12px; font-weight: 500;
  color: var(--dim);
  letter-spacing: 0.03em;
  margin-bottom: 9px;
}

.hint { margin-top: 9px; font-size: 11px; line-height: 1.55; color: var(--faint); }
.hint b { color: var(--dim); font-weight: 600; }

/* --------------------------- tiles --------------------------- */

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }

.tile {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 10px 4px 9px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel-2);
  color: var(--dim);
  font-family: var(--sans); font-size: 11.5px;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.tile-ico { font-size: 18px; line-height: 1; filter: saturate(0.85); }
.tile kbd {
  position: absolute; top: 4px; right: 5px;
  font-family: var(--mono); font-size: 9px; color: var(--faint);
}
.tile:hover { border-color: rgba(255, 255, 255, 0.18); color: var(--text); }
.tile:active { transform: translateY(1px); }
.tile.active {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent);
}
.tile.active .tile-ico { filter: none; }
.tile.active kbd { color: var(--accent); opacity: 0.7; }

/* ---------------------- camera instructions ----------------------
   This stands where the Look tool used to be. It is prose, not a
   control: there is nothing here to select. */
.cam-note {
  margin-top: 10px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.015);
}
.cam-row {
  display: flex; align-items: center; gap: 4px;
  padding: 2.5px 0;
  font-size: 10.5px; color: var(--faint);
}
.cam-row span { margin-left: 6px; }

/* -------------------------- segmented -------------------------- */

.segmented {
  display: grid; grid-template-columns: repeat(4, 1fr);
  padding: 3px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel-2);
}
.seg {
  padding: 8px 2px;
  border: 0; border-radius: var(--r-sm);
  background: transparent;
  color: var(--dim);
  font-family: var(--mono); font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.seg:hover { color: var(--text); }
.seg.active { background: var(--raised); color: var(--accent); }

/* ------------------------- row buttons ------------------------- */

.row-btn {
  position: relative;
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px;
  margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel-2);
  color: var(--text);
  font-family: var(--sans); font-size: 12px; text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.row-btn:last-child { margin-bottom: 0; }
.row-btn:hover { border-color: rgba(255, 255, 255, 0.18); background: var(--raised); }
.row-label { flex: 1; }
.row-value {
  font-family: var(--mono); font-size: 11px;
  color: var(--accent);
  max-width: 118px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row-btn kbd {
  font-family: var(--mono); font-size: 9px; color: var(--faint);
  border: 1px solid var(--line); border-radius: 4px;
  padding: 1px 4px;
}

/* the nest reveal — the headline control, so it carries the accent */
.row-btn.hero {
  padding: 11px 10px;
  font-size: 13px;
  border-color: rgba(255, 200, 97, 0.34);
  background: rgba(255, 200, 97, 0.07);
}
.row-btn.hero:hover { background: rgba(255, 200, 97, 0.12); border-color: var(--accent); }
.row-btn.hero.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }

.btn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.row-btn.compact {
  margin: 0; padding: 9px 8px;
  justify-content: center; text-align: center;
  font-size: 11px; color: var(--dim);
}
.row-btn.compact:hover { color: var(--text); }
.row-btn.danger { grid-column: 1 / -1; color: var(--danger); }
.row-btn.danger:hover { border-color: var(--danger); background: rgba(255, 122, 107, 0.1); }
.row-btn.confirming {
  color: var(--danger); border-color: var(--danger);
  background: rgba(255, 122, 107, 0.14);
}

/* ------------------------ disclosure menu ------------------------ */

.menu-btn .chev {
  width: 12px; height: 12px;
  color: var(--faint);
  transition: transform var(--t-fast) var(--ease);
}
.menu-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.menu-btn[aria-expanded="true"] { border-color: rgba(255, 255, 255, 0.18); }

.menu {
  display: none;
  margin: -2px 0 6px;
  padding: 4px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(0, 0, 0, 0.25);
}
.menu.open { display: block; }

.menu-row {
  width: 100%;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px;
  border: 0; border-radius: var(--r-sm);
  background: transparent;
  color: var(--dim);
  font-family: var(--sans); font-size: 11.5px; text-align: left;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.menu-row span:not(.track) { flex: 1; }
.menu-row:hover { background: var(--raised); }
.menu-row[aria-pressed="true"] { color: var(--text); }
.menu-row .sw { opacity: 0.35; transition: opacity var(--t-fast) var(--ease); }
.menu-row[aria-pressed="true"] .sw { opacity: 1; }

/* --------------------------- switch --------------------------- */

.row-btn.switch .track, .menu-row .track {
  width: 32px; height: 18px; flex: none;
  border-radius: 99px;
  background: var(--raised);
  border: 1px solid var(--line);
  position: relative;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.row-btn.switch .knob, .menu-row .knob {
  position: absolute; top: 2px; left: 2px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--faint);
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.row-btn.switch[aria-pressed="true"] .track, .menu-row[aria-pressed="true"] .track {
  background: var(--accent-dim); border-color: rgba(255, 200, 97, 0.45);
}
.row-btn.switch[aria-pressed="true"] .knob, .menu-row[aria-pressed="true"] .knob {
  transform: translateX(14px);
  background: var(--accent);
}
.row-btn.switch[aria-pressed="false"] .row-label { color: var(--dim); }

/* --------------------------- wind dial ---------------------------
   Both the control and the readout. The wind swings round on its own,
   so the arrow has to be live either way — once it is live, letting
   you grab it is nearly free, and far more legible than a number. */

.wind-dial {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin-bottom: 14px;
  padding: 6px 0 8px;
  cursor: grab;
  touch-action: none;
}
.wind-dial:active { cursor: grabbing; }
.wind-dial svg { width: 116px; height: 116px; overflow: visible; }

.dial-ring {
  fill: rgba(255, 255, 255, 0.02);
  stroke: var(--line); stroke-width: 1;
}
.dial-ticks path { stroke: var(--faint); stroke-width: 1.4; }
.dial-hub { fill: var(--dim); stroke: none; }

.dial-arrow {
  transition: transform 120ms linear;   /* the drift is slow; this just smooths it */
  transform-origin: 0 0;
}
.dial-shaft { stroke: var(--accent); stroke-width: 2.4; }
.dial-head { fill: var(--accent); stroke: none; }
.dial-gust path { stroke: var(--accent); stroke-width: 1.6; opacity: 0.45; }

/* wind at a standstill: the arrow means nothing, so it stops claiming
   attention and the dial reads as an empty compass */
.wind-dial.calm .dial-shaft { stroke: var(--faint); }
.wind-dial.calm .dial-head { fill: var(--faint); }
.wind-dial.calm .dial-gust { display: none; }

.dial-cap {
  font-family: var(--mono); font-size: 10.5px;
  color: var(--dim); letter-spacing: 0.04em;
}

/* --------------------------- sliders --------------------------- */

.sl-head { display: flex; align-items: center; gap: 6px; margin-bottom: 7px; }
.sl-head label { flex: 1; font-size: 12px; color: var(--text); cursor: pointer; }
.sl-val {
  width: 46px;
  padding: 2px 4px;
  border: 1px solid transparent; border-radius: 5px;
  background: transparent;
  color: var(--accent);
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: right;
  cursor: text;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.sl-val:hover { background: var(--panel-2); border-color: var(--line); }
.sl-val:focus { outline: none; background: var(--panel-2); border-color: var(--accent); }
.sl-unit { font-size: 10px; color: var(--faint); width: 26px; }
.sl-reset {
  width: 18px; height: 18px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 4px;
  background: transparent; color: var(--faint);
  cursor: pointer; opacity: 0;
  transition: opacity var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.sl-reset svg { width: 12px; height: 12px; }
.sl:hover .sl-reset { opacity: 1; }
.sl-reset:hover { color: var(--accent); }
.sl.dirty .sl-reset { opacity: 1; color: var(--dim); }

.sl-note { margin-top: 6px; font-size: 10.5px; color: var(--faint); line-height: 1.4; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; height: 18px;
  background: transparent;
  cursor: pointer;
}
/* the filled portion is painted by --v, set from ui.js */
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg,
    var(--accent) 0 var(--v, 0%), rgba(255, 255, 255, 0.11) var(--v, 0%) 100%);
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; margin-top: -4.5px;
  border-radius: 50%;
  background: var(--text);
  border: 0;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  transition: background var(--t-fast) var(--ease);
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:focus::-webkit-slider-thumb { background: var(--accent); }
input[type="range"]::-moz-range-track {
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.11);
}
input[type="range"]::-moz-range-progress {
  height: 4px; border-radius: 2px; background: var(--accent);
}
input[type="range"]::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--text); border: 0;
}
input[type="range"]:hover::-moz-range-thumb { background: var(--accent); }

/* ======================== the key popup ======================== */

/* caste bar chart — one horizontal bar per caste, length is that caste's
   share of the colony, all four on a common axis. */
.bars { list-style: none; }
.bars li { padding: 5px 0; }
.bar-head {
  display: flex; align-items: center; gap: 7px;
  margin-bottom: 5px;
  font-size: 11.5px; color: var(--dim);
}
.bar-head em { color: var(--faint); font-style: normal; font-size: 10.5px; }
.bar-head b {
  margin-left: auto;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.bar {
  display: block; height: 9px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.09);
  overflow: hidden;
}
.bar b {
  display: block; height: 100%; width: 0;
  border-radius: 2px;
  transition: width var(--t-mid) var(--ease);
}
.s-minim   { background: var(--c-minim); }
.s-media   { background: var(--c-media); }
.s-major   { background: var(--c-major); }
.s-soldier { background: var(--c-soldier); }

.sw {
  width: 10px; height: 10px; flex: none;
  border-radius: 3px;
  background: var(--c, var(--dim));
}
/* caste swatches keep their size cue — bigger ant, bigger square.
   The colour is restated because .sw's generic --c fallback comes
   after the caste ramp and would otherwise grey them out. */
.bar-head .s-minim   { width: 6px;  height: 6px;  margin: 0 2px;  background: var(--c-minim); }
.bar-head .s-media   { width: 8px;  height: 8px;  margin: 0 1px;  background: var(--c-media); }
.bar-head .s-major   { width: 10px; height: 10px;                 background: var(--c-major); }
.bar-head .s-soldier { width: 12px; height: 12px; margin: 0 -1px; background: var(--c-soldier); }

.signals { list-style: none; }
.signals li {
  display: grid;
  grid-template-columns: 10px 1fr;
  grid-template-areas: 'sw name' '.  sub' '.  meter';
  gap: 2px 8px;
  padding: 7px 0;
}
/* no row rules here: the meter track already draws a line across the
   row, and two hairlines an inch apart read as a mistake */
.signals.plain li { border-bottom: 1px solid var(--line-soft); }
.signals.plain li:last-child { border-bottom: 0; }
.signals .sw { grid-area: sw; margin-top: 3px; }
.sig-name { grid-area: name; font-size: 12px; color: var(--text); }
.sig-sub  { grid-area: sub;  font-size: 10.5px; color: var(--faint); line-height: 1.35; }

.meter {
  grid-area: meter;
  display: block; height: 3px; margin-top: 5px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.meter b {
  display: block; height: 100%; width: 0;
  border-radius: 2px;
  background: var(--dim);
  transition: width 260ms var(--ease);
}
.signals li:nth-child(1) .meter b { background: #28ff50; }
.signals li:nth-child(2) .meter b { background: #2882ff; }
.signals li:nth-child(3) .meter b { background: #ffaa28; }
.signals li:nth-child(4) .meter b { background: #c850ff; }
.signals li:nth-child(5) .meter b { background: #ff3c32; }
.signals li:nth-child(6) .meter b { background: #ebe196; }

.signals.plain li { grid-template-areas: 'sw name' '. sub'; }

/* ======================= camera keycaps ======================= */

#controls {
  position: absolute; left: 14px; bottom: 14px;
  z-index: 12;
  padding: 10px 12px;
  border-radius: var(--r-md);
  background: rgba(16, 17, 18, 0.7);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
#controls .ctl-row {
  display: flex; align-items: center; gap: 4px;
  padding: 2.5px 0;
  font-size: 11px; color: var(--faint);
}
#controls .ctl-row span { margin-left: 6px; }
kbd.cap {
  display: inline-block;
  min-width: 18px; padding: 2px 5px;
  border: 1px solid var(--line); border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--panel-2);
  color: var(--dim);
  font-family: var(--mono); font-size: 10px; text-align: center;
  line-height: 1.1;
}

/* ========================== credit ==========================
   Same block as the savanna sim, in this shell's palette. Links are
   the one place besides an active control where amber is allowed. */

#credit {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  padding: 8px 18px;
  border-radius: var(--r-md);
  background: rgba(16, 17, 18, 0.7);
  border: 1px solid var(--line-soft);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-align: center;
  font-size: 11.5px;
  white-space: nowrap;
}
/* The connecting words recede; the two marks carry it. Each link is a
   chip with a border and an outbound arrow — a bare underline in a 3D
   scene reads as decoration, and these are meant to be clicked. */
#credit {
  display: flex; align-items: center; gap: 7px;
  color: var(--faint);
}
.credit-lead { font-size: 11px; }

.credit-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px 3px 4px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.credit-chip b { font-weight: 600; font-size: 11.5px; }
.credit-chip:hover {
  border-color: var(--accent);
  background: rgba(255, 200, 97, 0.14);
  color: var(--accent);
  transform: translateY(-1px);
}
.credit-chip:active { transform: none; }

.chip-logo { display: block; flex: none; }
.chip-logo.round {
  width: 20px; height: 20px; border-radius: 50%;
  /* the badge carries its own cream ground, so it gets a rim rather
     than floating as a bright disc on the dark bar */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5);
}
/* their lockup is crest + wordmark in one file, so it needs real height
   to stay legible — 16px turned the wordmark into a smudge */
.chip-logo.wide { height: 24px; width: auto; margin-left: 4px; }

.ext { width: 11px; height: 11px; opacity: 0.5; }
.credit-chip:hover .ext { opacity: 1; }

/* ========================== intro ========================== */

.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(6, 7, 8, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 60;
}
.modal-card {
  width: min(540px, 100%);
  display: flex; flex-direction: column;
  max-height: 100%;
  padding: 18px 22px;
  border: 1px solid var(--line); border-radius: 16px;
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}

.modal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.dots { display: flex; gap: 6px; }
.dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--raised);
  transition: background var(--t-fast) var(--ease), width var(--t-fast) var(--ease);
}
.dot.active { width: 18px; border-radius: 99px; background: var(--accent); }

.text-btn {
  border: 0; background: transparent;
  color: var(--faint);
  font-family: var(--sans); font-size: 12px;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.text-btn:hover { color: var(--text); }
.text-btn:disabled { opacity: 0.3; cursor: default; }

.pages { overflow-y: auto; }
.page { display: none; }
.page.active { display: block; }
.page h2 {
  font-family: var(--serif);
  font-size: 22px; font-weight: 500; line-height: 1.25;
  margin-bottom: 12px;
}
.page p {
  font-size: 13.5px; line-height: 1.68;
  color: var(--text);
  margin-bottom: 11px;
  max-width: 62ch;
}
.page p.dim { color: var(--dim); }
.page b { font-weight: 600; color: #fff; }
.page p.dim b { color: var(--text); }
.page b.c-food { color: #7bea8b; }
.page b.c-callow { color: #f2ece2; }

.modal-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-top: 18px; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
}
.cta {
  padding: 9px 20px;
  border: 1px solid var(--accent); border-radius: 99px;
  background: var(--accent-dim);
  color: var(--accent);
  font-family: var(--sans); font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.cta:hover { background: rgba(255, 200, 97, 0.26); }

/* the About strip on the intro card — the full link set, out of the
   way of the sim but one click from it via the ? button */
.modal-credits {
  margin-top: 14px; padding-top: 13px;
  border-top: 1px solid var(--line-soft);
  display: flex; align-items: center; gap: 12px;
  font-size: 11.5px; color: var(--faint);
}
.mc-badge {
  flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  box-shadow: 0 0 0 1px var(--line);
}
.mc-body { flex: 1; min-width: 0; }
.mc-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mc-line b { color: var(--text); font-weight: 600; }
.mc-tk { display: inline-flex; opacity: 0.9; transition: opacity var(--t-fast) var(--ease); }
.mc-tk:hover { opacity: 1; }
.mc-tk img { display: block; height: 22px; width: auto; }

/* pill links: the About strip is where someone who wants to find you
   ends up, so the targets are chips rather than underlined words */
.mc-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mc-links a {
  padding: 4px 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--dim);
  font-size: 11px; text-decoration: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.mc-links a:hover {
  border-color: var(--accent);
  background: rgba(255, 200, 97, 0.14);
  color: var(--accent);
}

/* =========================== scrim ===========================
   Desktop dismisses a popup by clicking anywhere else, which the
   window listener handles. The scrim only exists so a popup-as-sheet
   on a phone has something obvious to tap. */
#scrim {
  position: fixed; inset: 0;
  z-index: 19;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-mid) var(--ease);
}

/* ========================= responsive ========================= */

@media (max-width: 900px) {
  #controls { display: none; }
  .sl-reset { opacity: 1; }        /* no hover on touch */
}

@media (max-width: 640px) {
  :root { --btn: 38px; }

  #statusbar {
    top: 8px; left: 12px; right: 12px;
    transform: none;
    max-width: none;
    padding: 6px 12px;
    justify-content: center;
  }
  .sb-title { font-size: 12px; }
  .sb-raid { font-size: 11px; white-space: normal; }

  #iconbar {
    top: auto; bottom: 0; right: 0; left: 0;
    z-index: 32;
    gap: 6px;
    justify-content: space-around;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
    background: rgba(11, 12, 13, 0.94);
    border-top: 1px solid var(--line);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .round-btn, .split { background: transparent; backdrop-filter: none; }

  /* every popup becomes a bottom sheet, above the icon bar */
  .pop {
    position: fixed !important;
    left: 0 !important; right: 0 !important;
    top: auto !important; bottom: 0;
    width: auto !important;
    max-height: 72vh;
    overflow-y: auto; overscroll-behavior: contain;
    padding: 14px 16px calc(70px + env(safe-area-inset-bottom));
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
    z-index: 31;
  }
  .pop.open { animation: sheet-in var(--t-mid) var(--ease); }
  @keyframes sheet-in {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
  .pop-title { text-align: center; }

  body.pop-open #scrim { opacity: 1; pointer-events: auto; z-index: 30; }

  /* bigger touch targets */
  .tile { padding: 13px 4px; font-size: 12px; }
  .tile-ico { font-size: 21px; }
  .row-btn { padding: 13px 12px; font-size: 13px; }
  .row-btn.compact { padding: 13px 8px; }
  .menu-row { padding: 12px 10px; font-size: 12.5px; }
  .seg { padding: 12px 2px; font-size: 12px; }
  input[type="range"] { height: 34px; }
  input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; }
  input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; }
  .sl-val { width: 56px; padding: 6px; font-size: 13px; }
  .sl-reset { width: 30px; height: 30px; }

  /* the icon bar owns the bottom edge on a phone, so the credit sits
     above it and is allowed to wrap */
  #credit {
    bottom: calc(74px + env(safe-area-inset-bottom));
    max-width: calc(100vw - 24px);
    padding: 6px 12px;
    font-size: 10.5px;
    white-space: normal;
  }
  #credit .credit-links { font-size: 10px; }

  .modal { padding: 0; align-items: flex-end; }
  .modal-card {
    width: 100%; max-height: 92vh;
    border-radius: 18px 18px 0 0;
    padding: 16px 18px calc(18px + env(safe-area-inset-bottom));
  }
  .page h2 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}