/* =============================================================================
   styles.game.css — additions on top of the prototype's warm paper styles.css.
   Covers: warm-styled modals (event / d20 / weekly summary / ending), the
   progressive-reveal metric rows, risk tones, Your Stack chips, location picker, commit gating.
   The base look & layout all come from styles.css (the v3 prototype).
   ============================================================================ */

/* ---- progressive reveal metric rows ------------------------------------- */
.metric-row.locked { opacity: 0.5; }
.metric-row .reveal-note {
  grid-column: 3 / 4;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(76, 52, 34, 0.6);
}
.metric-row .metric-val-num { color: #1d6c74; font-size: 12px; text-align: right; font-weight: 700; }

/* Right (plan) panel: with Scale's extra locations (Boardroom / Conference
   Stage) it can outgrow the viewport — scroll like the left panel, and keep
   COMMIT WEEK sticky so the turn can ALWAYS be ended without hunting. */
.right-panel {
  max-height: calc(100vh / var(--ui-scale) - 128px); /* same design-px math as .left-panel */
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.right-panel::-webkit-scrollbar { width: 6px; }
.right-panel::-webkit-scrollbar-thumb { background: rgba(91, 58, 31, 0.3); border-radius: 3px; }
/* The week's actions dock to the panel's bottom edge TOGETHER (playtest
   2026-10-03: both buttons were sticky at bottom:0, so whenever the panel had to
   scroll, "Wrap up & Exit" sat exactly on top of "Commit Week"). */
.right-panel .commit-dock {
  position: sticky;
  bottom: -16px; /* into the panel's bottom padding: nothing peeks out under it */
  z-index: 3;
  margin: 0 -16px -16px;
  padding: 8px 16px 14px;
  border-radius: 0 0 7px 7px;
  background: linear-gradient(180deg, rgba(232, 207, 167, 0) 0, rgba(232, 207, 167, 0.97) 10px);
}
body.night-ui .right-panel .commit-dock { background: linear-gradient(180deg, rgba(33, 25, 15, 0) 0, rgba(33, 25, 15, 0.97) 10px); }
.right-panel .commit-dock .commit-button { box-shadow: 0 5px 0 #07371f, 0 -8px 14px rgba(28, 13, 5, 0.25); }

/* Left (company) panel: compacted to fit the full-reveal layout (all metrics +
   cashflow + unit-econ strips + milestones + market signal) above the bottom
   bar with NO scroll in normal play. The max-height is a safety net for the
   rare extra-tall case (e.g. a Warning note on top of everything) — it only
   scrolls then, never otherwise. */
.left-panel {
  /* The panel lives inside the zoom:0.8 stage, so its CSS px are "design px"
     (1/scale × the real viewport). Cap in that space (100vh / --ui-scale) so
     the full-reveal layout fits without scrolling at normal window sizes;
     scroll is a safety net only on very short screens / extra-tall content.
     (−128 = 96 top + a ~32px bottom gap, like the hand's.) */
  max-height: calc(100vh / var(--ui-scale) - 128px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.left-panel::-webkit-scrollbar { width: 6px; }
.left-panel::-webkit-scrollbar-thumb { background: rgba(91, 58, 31, 0.3); border-radius: 3px; }
.left-panel .metric-stack { gap: 5px; }
.left-panel .cashflow-strip { margin: 2px 0 8px; padding: 6px 8px; }
.left-panel .unitecon-strip { margin: 0 0 8px; padding: 6px 8px; }
.left-panel .note-card { margin-top: 9px; padding: 9px 10px; }
.left-panel .market-stamp { width: auto; margin-top: 9px; padding: 9px 11px; }

/* Week-plan Energy/Focus rows: the count cell now holds an optional "−N stress"
   note. Let it size to content (no fixed 44px) and stack the note on its own
   short right-aligned line so nothing ragged-wraps and shoves the token row. */
.planner-tokens div { grid-template-columns: 54px 1fr auto; }
#energy-count, #focus-count {
  display: flex; flex-direction: column; align-items: flex-end;
  justify-content: center; line-height: 1.15; white-space: nowrap; text-align: right;
}
#energy-count .tok-pen, #focus-count .tok-pen {
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.02em; color: var(--red);
}

/* warning note: drop the action button (warnings resolve through play) */
.warning-note.hidden, .milestone-note.hidden { display: none; }

/* ---- weekly cash-flow strip (Income / Expenses / Net) ------------------- */
.cashflow-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
  margin: 2px 0 12px;
  padding: 8px;
  border-radius: 7px;
  background: rgba(255, 244, 214, 0.7);
  box-shadow: inset 0 0 0 1px rgba(108, 71, 38, 0.18);
}
.cashflow-strip .cf { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.cashflow-strip .cf small {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(76, 52, 34, 0.6);
}
.cashflow-strip .cf strong { font-size: 13px; font-weight: 800; }
.cashflow-strip #cf-income { color: #1d7a4f; }
.cashflow-strip #cf-expense { color: #b4502a; }
.cashflow-strip #cf-net[data-sign="pos"] { color: #1d7a4f; }
.cashflow-strip #cf-net[data-sign="neg"] { color: #b4502a; }

/* ---- unit-economics strip (Customers / LTV / CAC / Payback) ------------- */
.unitecon-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: -6px 0 12px;
  padding: 8px;
  border-radius: 7px;
  background: rgba(231, 240, 233, 0.7);
  box-shadow: inset 0 0 0 1px rgba(40, 90, 70, 0.16);
}
.unitecon-strip[hidden] { display: none; }
.unitecon-strip .ue { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.unitecon-strip .ue small {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: rgba(40, 70, 55, 0.65);
}
.unitecon-strip .ue strong { font-size: 12.5px; font-weight: 800; color: #1d6c4f; }

/* ---- Pinned-for-next-week box (clean empty + filled states) -------------
   The prototype's generic `.pinned-box span` rule styles a 26x26 amber icon
   chip; the empty-state sentence must NOT be a <span> or it gets crushed into
   that 26px square. Empty state is a full-width <p>; the filled row uses a
   scoped grid that beats the generic selector. */
/* #pinned-body must be a plain block; the prototype's `.pinned-box div` rule
   would otherwise make it a 3-column grid and squeeze the single child into the
   28px icon column. The filled row (.pinned-row) carries its own grid. */
#pinned-body { display: block; }
.pinned-box .pinned-empty {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.pinned-box .pinned-row {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.pinned-box .pinned-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}
.pinned-box .pinned-tag {
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}
.pinned-box .pinned-remove {
  border: 0;
  background: transparent;
  color: var(--red);
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
}

/* ---- desk-card risk tone (stamp colour by risk) ------------------------- */
.desk-card strong[data-tone="medium"] { background: #c98a2a; }
.desk-card strong[data-tone="high"]   { background: #c24132; }

/* ---- Upgrades HUD button ------------------------------------------------ */
.upgrades-button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; flex: 0 0 auto;
  border: 2px solid #b4522a; border-radius: 7px;
  background: linear-gradient(180deg, #ffb066, #e8762f);
  color: #2a1505; font-family: var(--font-mono); font-weight: 900;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
  cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
.upgrades-button .ic { width: 16px; height: 16px; }
.upgrades-button:hover { filter: brightness(1.05); }
.upgrades-button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); }

/* ---- Journey button (HUD) ---------------------------------------------- */
.journey-button {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px; flex: 0 0 auto;
  border: 2px solid #6c4726; border-radius: 7px;
  background: linear-gradient(180deg, #f3e1bd, #d9b87f);
  color: #3a2410; font-family: var(--font-mono); font-weight: 900;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
  cursor: pointer; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
}
.journey-button .ic { width: 16px; height: 16px; }
.journey-button:hover { filter: brightness(1.04); }
.journey-button:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.45); }

/* ---- Journey roadmap modal --------------------------------------------- */
.journey-modal .journey-intro { margin: 4px 0 14px; font-size: 12.5px; color: #6d5640; line-height: 1.4; }
.journey-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.journey-beat { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 9px 0 13px; }
.journey-beat::before {
  content: ""; position: absolute; left: 17px; top: 38px; bottom: -1px; width: 2px;
  background: rgba(108, 71, 38, 0.25);
}
.journey-beat:last-child::before { display: none; }
.journey-node {
  position: relative; z-index: 1; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center; background: #e9dcc0; color: #6d5640;
  box-shadow: inset 0 0 0 2px rgba(108, 71, 38, 0.3);
}
.journey-node .ic { width: 18px; height: 18px; }
.journey-body { padding-top: 2px; }
.journey-beat-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.journey-beat-head strong { font-size: 14px; color: #2a1c10; }
.journey-body small { display: block; margin-top: 2px; font-size: 11.5px; color: #6d5640; line-height: 1.3; }
.journey-badge {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 900; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
  background: rgba(108, 71, 38, 0.14); color: #6d5640;
}
.journey-beat[data-status="done"] .journey-node { background: var(--green, #2da763); color: #fff; box-shadow: inset 0 0 0 2px #0d4a2f; }
.journey-beat[data-status="done"] .journey-badge { background: rgba(45, 167, 99, 0.18); color: #1d6c4f; }
.journey-beat[data-status="now"] .journey-node {
  background: linear-gradient(180deg, #ffb066, #e8762f); color: #2a1505; box-shadow: inset 0 0 0 2px #b4522a;
  animation: journey-pulse 1.6s ease-in-out infinite;
}
.journey-beat[data-status="now"] .journey-beat-head strong { color: #b4522a; }
.journey-beat[data-status="now"] .journey-badge { background: rgba(232, 118, 47, 0.18); color: #b4522a; }
.journey-beat[data-status="locked"] { opacity: 0.62; }
@keyframes journey-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px #b4522a, 0 0 0 0 rgba(232, 118, 47, 0.4); }
  50% { box-shadow: inset 0 0 0 2px #b4522a, 0 0 0 6px rgba(232, 118, 47, 0); }
}

/* ---- €1B unicorn climax cues ------------------------------------------- */
.scale-strip.unicorn #sc-progresstxt { color: #b4522a; font-weight: 900; }
.commit-button.unicorn {
  background: linear-gradient(180deg, #ffd36a, #e8a33a);
  border-color: #b4522a; color: #2a1505;
  animation: unicorn-pulse 1.7s ease-in-out infinite;
}
@keyframes unicorn-pulse {
  0%, 100% { box-shadow: 0 3px 0 #8a4a1e, 0 0 0 0 rgba(232, 163, 58, 0.5); }
  50% { box-shadow: 0 3px 0 #8a4a1e, 0 0 0 8px rgba(232, 163, 58, 0); }
}
.unicorn-modal .modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.unicorn-modal .commit-button.unicorn { flex: 1 1 auto; }
.unicorn-modal .btn { flex: 0 0 auto; }

/* ---- Run journal (cause→effect ledger) --------------------------------- */
.journal-list { margin: 8px 0 4px; max-height: min(56vh, 460px); overflow-y: auto; padding-right: 4px; }
.journal-week {
  position: sticky; top: 0; z-index: 1;
  margin: 10px 0 4px; padding: 3px 0;
  font-family: var(--font-mono); font-size: 10px; font-weight: 900; letter-spacing: 0.1em;
  text-transform: uppercase; color: #61492f;
  background: linear-gradient(180deg, rgba(255,244,219,0.96), rgba(255,244,219,0.82));
  border-bottom: 1px solid rgba(108, 71, 38, 0.2);
}
.journal-week:first-child { margin-top: 0; }
.journal-row {
  display: flex; gap: 8px; align-items: baseline;
  padding: 4px 0; border-bottom: 1px dashed rgba(108, 71, 38, 0.14);
}
.journal-kind {
  flex: 0 0 64px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.03em; text-transform: uppercase; color: rgba(76, 52, 34, 0.6);
  text-align: right;
}
.journal-text { flex: 1 1 auto; font-size: 12px; line-height: 1.35; color: #2a1c10; }
.journal-row[data-tone="good"] .journal-text { color: #1d6c4f; }
.journal-row[data-tone="bad"] .journal-text { color: #b4502a; }
.journal-row[data-tone="good"] .journal-kind { color: rgba(29, 108, 79, 0.7); }
.journal-row[data-tone="bad"] .journal-kind { color: rgba(180, 80, 42, 0.7); }

/* ---- Upgrades shop modal ------------------------------------------------ */
.upgrades-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.upgrades-stat { display: flex; gap: 10px; align-items: center; }
.upgrades-stat .u-cash { font-family: var(--font-mono); font-weight: 900; color: #1d7a4f; font-size: 16px; }
.upgrades-stat .u-slots { font-size: 11px; font-weight: 800; color: #4d3724; background: rgba(108, 71, 38, 0.12); padding: 4px 9px; border-radius: 999px; }
.upgrade-cat { margin-top: 14px; }
.upgrade-cat-title { margin: 0 0 2px; font-size: 13px; color: #4d3724; text-transform: uppercase; letter-spacing: 0.03em; }
.upgrade-cat-blurb { margin: 0 0 8px; font-size: 11.5px; color: #6d5640; }
.upgrade-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.upgrade-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border-radius: 8px; border: 2px solid rgba(108, 71, 38, 0.2); background: rgba(255, 244, 214, 0.7); }
.upgrade-card.owned { border-color: rgba(40, 140, 90, 0.5); background: rgba(231, 244, 235, 0.85); }
.upgrade-card.locked { opacity: 0.72; }
.upgrade-top { display: flex; align-items: center; gap: 8px; }
.upgrade-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 6px; background: #3e73e6; color: #fff; flex: 0 0 auto; }
.upgrade-icon .ic { width: 16px; height: 16px; }
.upgrade-name { font-size: 13px; color: #2a1c10; line-height: 1.1; }
.upgrade-effect { font-size: 11.5px; color: #1d6c4f; font-weight: 700; line-height: 1.25; }
.upgrade-flavor { font-size: 11px; color: #6d5640; line-height: 1.3; }
.upgrade-foot { margin-top: auto; padding-top: 4px; }
.upgrade-buy { width: 100%; border: 2px solid #0d5234; border-radius: 6px; background: linear-gradient(180deg, #27aa6a, #16884f); color: #fff5db; font-weight: 900; font-size: 13px; padding: 7px; cursor: pointer; }
.upgrade-buy.disabled, .upgrade-buy:disabled { filter: grayscale(0.6) brightness(0.92); cursor: not-allowed; }
.upgrade-owned { display: inline-block; font-size: 12px; font-weight: 900; color: #1d7a4f; }
.upgrade-lock { font-size: 11px; color: #b4502a; font-weight: 700; }

/* ---- Exit menu (Scale endgame) ------------------------------------------ */
.exit-options { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.exit-option {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 10px 12px; border-radius: 8px; cursor: pointer;
  border: 2px solid #b4522a; background: rgba(255, 241, 211, 0.85); color: #2a1c10;
}
.exit-option:hover { filter: brightness(1.03); border-color: #e8762f; }
.exit-option strong { font-size: 13px; }
.exit-option small { font-size: 11px; color: #6d5640; }
/* cooling off after a failed deal: visible + explained, not clickable */
.exit-option.cooling { cursor: not-allowed; opacity: 0.6; border-style: dashed; filter: none; }

/* ---- Scale valuation track (€1B endgame) -------------------------------- */
.scale-strip {
  margin: -4px 0 12px;
  padding: 9px 10px;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(36, 30, 24, 0.92), rgba(28, 22, 17, 0.92));
  box-shadow: inset 0 0 0 1px rgba(255, 200, 120, 0.25);
  color: #ffe8c4;
}
.scale-strip[hidden] { display: none; }
.scale-strip .sc-top { display: flex; align-items: baseline; justify-content: space-between; }
.scale-strip .sc-top small { font-size: 9px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 232, 196, 0.6); }
.scale-strip .sc-top strong { font-family: var(--font-mono); font-size: 18px; font-weight: 900; color: #ffd27a; }
.scale-strip .sc-track { height: 7px; margin: 6px 0 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.scale-strip .sc-track i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #e8a23a, #ffd27a); }
.scale-strip .sc-meta { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; }
.scale-strip .sc-meta #sc-progresstxt { color: rgba(255, 232, 196, 0.75); }
.scale-strip #sc-fragility[data-level="Low"] { color: #6fd39a; }
.scale-strip #sc-fragility[data-level="Medium"] { color: #ffd27a; }
.scale-strip #sc-fragility[data-level="High"] { color: #ff9d5c; }
.scale-strip #sc-fragility[data-level="Bubble"] { color: #ff6b5c; }
/* Diligence Heat (plan 3.2): the fake road's dread-o-meter */
.scale-strip #sc-heat[data-level="Low"] { color: #6fd39a; }
.scale-strip #sc-heat[data-level="Warm"] { color: #ffd27a; }
.scale-strip #sc-heat[data-level="Hot"] { color: #ff9d5c; }
.scale-strip #sc-heat[data-level="Radioactive"] {
  color: #ff6b5c;
  animation: heat-pulse 1.6s ease-in-out infinite;
}
/* Phase 2: past Radioactive the bomb window keeps widening — faster pulse */
.scale-strip #sc-heat[data-level="Meltdown"] {
  color: #ff4f3f; font-weight: 800;
  animation: heat-pulse 0.9s ease-in-out infinite;
}
@keyframes heat-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
/* Funding climate (Phase 5): the weather the next round and the next buyer read */
.scale-strip #sc-climate[data-level="boom"] { color: #6fd39a; }
.scale-strip #sc-climate[data-level="normal"] { color: rgba(255, 232, 196, 0.75); }
.scale-strip #sc-climate[data-level="winter"] { color: #8cc8ff; }
.scale-strip .sc-equity { margin-top: 4px; font-size: 10px; color: rgba(255, 232, 196, 0.6); }
.scale-strip .sc-pressures { margin-top: 2px; font-size: 10px; font-weight: 700; color: rgba(255, 232, 196, 0.72); }

/* Market Signal box: full width of the panel (was a 75%-width "stamp"), and
   keep the validated-hypotheses note small — the generic `.market-stamp span`
   rule (font-size:18px) would otherwise blow it up and overflow the box. */
.left-panel .market-stamp { width: auto; }
.market-stamp .validated-note { margin-top: 5px; font-size: 11px; font-weight: 800; color: #1d7a4f; line-height: 1.25; }
.validated-note[hidden] { display: none; }
.desk-card p.bad { color: #be4230; }
/* trade-off line: the lead cost under the lead gain (studio review T4) */
.desk-card p.cost-line { font-size: 11px; min-height: 16px; max-height: 16px; margin-top: 1px; }
/* inspector: "numbers already include…" / "risky" notes under the effect chips */
.selected-card .live-note { margin: 4px 0 0; font-size: 11px; font-style: italic; color: #6a5239; line-height: 1.3; }

/* ---- selected-card action states ---------------------------------------- */
.selected-actions button.active {
  border-color: #146341;
  background: var(--green);
  color: #fff;
  box-shadow: 0 3px 0 #0d4a2f;
}
.selected-actions button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.selected-card.empty { display: grid; place-items: center; }
.selected-empty { color: #8a6e4f; font-style: italic; font-size: 13px; }

/* ---- plan slot focus toggle + remove ------------------------------------ */
/* the UA padding (1px 6px) left an 8px content box in these 24px squares — the
   ★ / × overflowed to the right; centre the content on a grid instead */
.plan-slot button { display: grid; place-items: center; padding: 0; line-height: 1; }
.plan-slot .slot-focus {
  width: 24px; height: 24px; border-radius: 5px;
  border: 2px solid #c6a276; background: #fff0cf; color: #7a4b0f;
  cursor: pointer; font-weight: 900; line-height: 1;
}
.plan-slot .slot-focus .ic { width: 14px; height: 14px; }
.plan-slot .slot-focus.active { background: var(--purple); border-color: #4a378f; color: #fff; }

/* ---- risk-box tone ------------------------------------------------------- */
.risk-box strong[data-level="Low"]    { background: var(--green); }
.risk-box strong[data-level="Medium"] { background: var(--amber); }
.risk-box strong[data-level="High"]   { background: var(--red); }

/* ---- commit gating ------------------------------------------------------- */
.commit-button:disabled { opacity: 0.5; cursor: not-allowed; filter: saturate(0.6); }
.commit-button { transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease; }
.commit-button:not(:disabled):hover { filter: brightness(1.06); }
.commit-button:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 0 #07371f; }

/* ---- Your Stack (left panel): owned tools/products as icon chips -------- */
.stack-strip { margin: 2px 0 10px; }
.stack-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}
.stack-head h3 {
  margin: 0;
  color: #61492f;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.stack-head #stack-count {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  color: rgba(76, 52, 34, 0.55);
}
.stack-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.stack-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: rgba(255, 244, 214, 0.72);
  box-shadow: inset 0 0 0 1px rgba(108, 71, 38, 0.22);
  color: #5c452f;
  cursor: default;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.stack-chip:hover {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 1px rgba(108, 71, 38, 0.32), 0 2px 5px rgba(0, 0, 0, 0.18);
}
.stack-chip .ic { width: 16px; height: 16px; }
.stack-empty {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.3;
  color: rgba(76, 52, 34, 0.5);
  font-style: italic;
}

/* ---- Location picker (above the Week Plan) — scene-thumbnail segmented control ---- */
.location-picker {
  margin: 2px 0 12px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(91, 58, 31, 0.25);
}
.loc-picker-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
  margin-bottom: 8px;
}
.loc-picker-head h3 {
  margin: 0; font-family: var(--font-mono); font-size: 11px; font-weight: 900;
  letter-spacing: 0.1em; text-transform: uppercase; color: #61492f;
}
.loc-picker-head #loc-picker-fav {
  flex: 1 1 auto; min-width: 0; text-align: right;
  font-size: 10.5px; font-style: italic; color: #7a614a;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.loc-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.loc-option {
  display: flex; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px;
  border: 2px solid rgba(91, 61, 35, 0.28); border-radius: 9px;
  background: rgba(255, 244, 219, 0.6); color: var(--ink);
  box-shadow: 0 2px 0 rgba(76, 45, 22, 0.16);
  transition: transform 110ms ease, border-color 110ms ease, box-shadow 110ms ease, background-color 110ms ease;
}
.loc-option:hover { transform: translateY(-2px); filter: brightness(1.03); }
.loc-option .loc-thumb {
  display: block; width: 100%; max-width: 72px; margin: 0 auto; aspect-ratio: 1 / 1;
}
.loc-option .loc-thumb img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 1px 1px rgba(40, 22, 8, 0.28));
}
.loc-option b {
  font-size: 11px; font-weight: 800; line-height: 1.05; text-align: center; color: #5c452f;
}
.loc-option.active {
  border-color: #146341; background: rgba(222, 248, 225, 0.85);
  box-shadow: 0 3px 0 #0d4a2f, 0 0 0 2px var(--green, #2da763) inset;
}
.loc-option.active b { color: #0d4a2f; }
@media (max-width: 1350px) {
  .loc-option b { font-size: 10px; }
}

/* Generated PNG family-icon tokens replace the SVG glyph chips. The plate carries
   its own colour + rounded shape, so the host chip's accent background is hidden. */
/* the center inspector is hidden until a card is actually selected */
.selected-card[hidden] { display: none !important; }

.fam-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.selected-icon:has(.fam-img),
.desk-card-top span:has(.fam-img),
.plan-slot i:has(.fam-img),
.pinned-row span:has(.fam-img),
.pinned-box span:has(.fam-img) {
  background: transparent !important;
  box-shadow: none !important;
  color: inherit;
}
/* the smaller chips need an explicit box for the image to fill */
.plan-slot i:has(.fam-img),
.pinned-row span:has(.fam-img),
.pinned-box span:has(.fam-img) {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 0;
}

/* tool-strip count icons */
.tool-strip .ic { width: 19px; height: 19px; }

/* =============================================================================
   MODALS — warm paper aesthetic (consumed by the unchanged modals.js)
   ============================================================================ */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 28px;
  background: rgba(10, 6, 3, 0.55);
  backdrop-filter: blur(2px);
  animation: fitFade 0.16s ease;
}
.modal-overlay[hidden] { display: none; }
@keyframes fitFade { from { opacity: 0; } to { opacity: 1; } }

.modal {
  width: min(560px, 100%);
  max-height: 86vh;
  overflow-y: auto;
  padding: 22px 24px 20px;
  border: 2px solid rgba(55, 33, 18, 0.92);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 247, 226, 0.99), rgba(232, 207, 167, 0.99)),
    var(--paper-light);
  box-shadow: 0 8px 0 rgba(28, 13, 5, 0.6), 0 22px 54px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42);
  color: var(--ink);
}

.modal-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 900;
  letter-spacing: 0.12em; text-transform: uppercase; color: #7a4b0f;
}
.modal-kicker[data-sev="crisis"], .modal-kicker[data-sev="catastrophe"] { color: var(--red); }
.modal-kicker[data-sev="warning"] { color: #b76417; }
.modal-kicker[data-sev="opportunity"] { color: #137448; }
.modal-kicker[data-sev="drama"] { color: var(--purple); }

.modal-title { font-size: 23px; font-weight: 800; letter-spacing: -0.01em; margin: 6px 0 10px; }
.modal-body { color: #4d3724; font-size: 14px; line-height: 1.42; }
.modal-body p { margin: 0 0 12px; }

.modal-causes {
  margin: 6px 0 16px; padding: 11px 13px; border-radius: 7px;
  background: rgba(255, 248, 231, 0.7); border: 1px solid rgba(106, 70, 38, 0.3);
}
.modal-causes h4 {
  margin: 0 0 6px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #7a4b0f;
}
.modal-causes ul { margin: 0; padding-left: 18px; }
.modal-causes li { margin-bottom: 4px; font-size: 13px; color: #4d3724; }

/* choices (event modal) */
.choice-list { display: grid; gap: 10px; }
.choice {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 2px solid rgba(91, 61, 35, 0.28); border-radius: 8px;
  background: #fff2d4; color: #3a2819; padding: 11px 13px;
  box-shadow: 0 3px 0 rgba(76, 45, 22, 0.2);
  transition: transform 110ms ease, box-shadow 110ms ease, filter 110ms ease;
}
.choice:hover { filter: brightness(1.03); transform: translateY(-1px); }
.choice:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(76, 45, 22, 0.2); }
.choice-label { display: block; font-weight: 800; font-size: 14px; }
.choice-consequence { display: block; margin-top: 3px; color: #725a43; font-size: 12px; font-style: italic; }

/* effect chips */
.choice-effects, .summary-deltas, .d20-aftermath .choice-effects {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.fx-chip {
  border-radius: 5px; padding: 4px 8px; font-size: 12px; font-weight: 900;
  background: rgba(222, 248, 225, 0.9); color: #137448;
}
.fx-chip.down { background: rgba(255, 234, 217, 0.94); color: #bb3f2d; }
/* neutral tag chips on d20 approaches (risk profile, postponement) */
.fx-chip.tag { background: rgba(106, 70, 38, 0.1); color: #5c4128; font-weight: 800; font-style: italic; }

/* buttons */
.btn {
  border: 2px solid rgba(91, 61, 35, 0.28); border-radius: 7px;
  background: #fff2d4; color: #3a2819; cursor: pointer;
  font-size: 13px; font-weight: 900; padding: 9px 14px;
  box-shadow: 0 3px 0 rgba(76, 45, 22, 0.22);
  transition: transform 110ms ease, box-shadow 110ms ease, filter 110ms ease;
}
.btn:hover { filter: brightness(1.04); }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(76, 45, 22, 0.22); }
.btn.primary {
  border-color: #0d5234; color: #fff5db;
  background: linear-gradient(180deg, #27aa6a, #16884f);
  box-shadow: 0 4px 0 #07371f;
}
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

/* Phase 3 — error containment: one overlay above every layer (modal 100,
   setup 200, story 240) instead of a dead screen. */
.error-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: grid; place-items: center; padding: 16px;
  background: rgba(14, 9, 4, 0.72);
}
.error-card {
  width: min(520px, 100%); padding: 22px 24px; border-radius: 12px;
  border: 3px solid #3a2819; background: #fff6e2; color: #2c1f12;
  box-shadow: 0 6px 0 rgba(20, 12, 4, 0.6), 0 18px 40px rgba(0, 0, 0, 0.45);
}
.error-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em; color: #b03a26;
}
.error-title { margin: 6px 0 8px; font-size: 22px; font-weight: 900; }
.error-body { margin: 0 0 10px; font-size: 14px; line-height: 1.5; }
.error-detail {
  margin: 0 0 6px; padding: 8px 10px; border-radius: 6px;
  font-family: var(--font-mono); font-size: 11.5px; color: #6b3a2a;
  background: rgba(176, 58, 38, 0.08); overflow-wrap: anywhere;
}
.error-count { margin: 0; font-size: 11.5px; color: #8a6a4a; }
.error-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.error-actions .error-resume { flex: 1 1 100%; margin-top: 0; font-size: 15px; }
.error-actions .btn { flex: 1 1 auto; }
.report-fallback { width: 100%; height: 96px; margin-top: 10px; font: 11px var(--font-mono); }
.journal-modal .journal-copy { flex: 0 0 auto; margin-top: 18px; white-space: nowrap; }
.ending-report {
  display: block; margin: 10px auto 0; border: 0; background: none; cursor: pointer;
  font-size: 12px; font-weight: 700; color: #8a7d63; text-decoration: underline;
}

/* d20 ritual */
.d20-stakes { color: #725a43; font-style: italic; font-size: 13px; margin: 0 0 12px; }
.d20-mods { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
/* caption above the modifier chips — names them as "the things that moved the roll" */
.d20-mods-cap {
  font-family: var(--font-mono); font-size: 10px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: #9a7c52;
  margin: 4px 0 5px;
}
/* plain-language "why you passed/failed" block under the verdict */
.d20-why {
  /* lives inside .d20-stage (display:grid; place-items:center), which centers
     children to content width — so stretch explicitly to fill the modal */
  width: 100%; box-sizing: border-box; justify-self: stretch;
  margin: 12px 0 2px;
  padding: 10px 13px; border-radius: 9px;
  background: rgba(106, 70, 38, 0.06); border: 1px solid rgba(106, 70, 38, 0.16);
  text-align: left;
}
.d20-why-line { margin: 0; font-size: 13.5px; line-height: 1.45; color: #4d3724; font-weight: 600; }
.d20-why-levers { margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: #6a5132; }
/* exit-ritual deal verdict line (under the badge / in the aftermath) */
.d20-exit-line { margin: 8px 0 0; font-size: 13.5px; line-height: 1.4; font-style: italic; color: #4d3724; text-align: center; }
.mod-chip {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  border-radius: 5px; padding: 4px 8px;
  background: rgba(255, 248, 231, 0.7); border: 1px solid rgba(106, 70, 38, 0.3); color: #4d3724;
}
.mod-chip.pos { background: rgba(222, 248, 225, 0.9); color: #137448; border-color: rgba(20,116,72,.3); }
.mod-chip.neg { background: rgba(255, 234, 217, 0.94); color: #bb3f2d; border-color: rgba(187,63,45,.3); }
.d20-approaches { display: grid; gap: 10px; }
.d20-stage { display: grid; place-items: center; gap: 12px; padding: 14px 0 6px; }
.die {
  width: 88px; height: 88px; display: grid; place-items: center;
  border: 3px solid #5b3a1f; border-radius: 16px;
  background: #241810; color: #ffd089;
  font-family: var(--font-mono); font-size: 36px; font-weight: 900;
  box-shadow: 0 6px 0 rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.die.rolling { animation: dieShake 0.18s linear infinite; }
@keyframes dieShake { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.die.nat1 { color: #ff7059; border-color: #c24132; }
.die.nat20 { color: #7CFFA0; border-color: #2da763; }
.d20-math { font-family: var(--font-mono); font-size: 13px; color: #4d3724; font-weight: 700; }
.band-badge {
  font-family: var(--font-mono); font-weight: 900; font-size: 14px;
  padding: 6px 14px; border-radius: 6px; border: 2px solid currentColor; text-transform: uppercase;
}
.band-badge[data-band="critical_failure"] { color: #c24132; }
.band-badge[data-band="failure"] { color: #bb6324; }
.band-badge[data-band="partial_success"] { color: #b76417; }
.band-badge[data-band="success"] { color: #1c7b4f; }
.band-badge[data-band="critical_success"] { color: #137448; }
.d20-aftermath { margin-top: 4px; }

/* weekly summary */
.summary-lines { margin: 4px 0 14px; padding-left: 18px; }
.summary-lines li { margin-bottom: 6px; font-size: 14px; color: #3a2819; line-height: 1.35; }

/* ending recap */
.scorecard { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0 16px; }
.axis {
  display: grid; gap: 3px; place-items: center; text-align: center;
  padding: 9px 4px; border-radius: 7px;
  background: rgba(255, 248, 231, 0.6); border: 1px solid rgba(106, 70, 38, 0.28);
}
.axis-name { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.04em; text-transform: uppercase; color: #7a4b0f; }
.axis-grade { font-family: var(--font-mono); font-size: 20px; font-weight: 900; color: #3a2819; }
.axis-grade[data-grade="S"], .axis-grade[data-grade="A"] { color: #137448; }
.axis-grade[data-grade="B"] { color: #1c7b4f; }
.axis-grade[data-grade="C"] { color: #b76417; }
.axis-grade[data-grade="D"] { color: #bb6324; }
.axis-grade[data-grade="Collapse"], .axis-grade[data-grade="F"] { color: #c24132; }
.axis-score { font-size: 10px; color: #725a43; }
.recap-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.recap-col h4 { margin: 0 0 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.recap-col.right h4 { color: #137448; }
.recap-col.wrong h4 { color: #bb3f2d; }
.recap-col ul { margin: 0; padding-left: 16px; }
.recap-col li { font-size: 12.5px; color: #4d3724; margin-bottom: 4px; }

/* chips: lessons / assets */
.lesson-list { display: flex; flex-wrap: wrap; gap: 6px; }
.lesson-chip {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700;
  border-radius: 999px; padding: 4px 9px;
  background: rgba(118, 93, 218, 0.16); color: #5d4ed4; border: 1px solid rgba(93, 78, 212, 0.3);
}
.asset-chip {
  font-size: 11px; font-weight: 700; border-radius: 5px; padding: 3px 8px;
  background: rgba(255, 248, 231, 0.7); border: 1px solid rgba(106, 70, 38, 0.3); color: #4d3724;
}
.empty-note { color: #8a6e4f; font-size: 12px; font-style: italic; }
.asset-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }

/* ---- playable milestones (the launch path) ------------------------------ */
.milestone.playable { cursor: pointer; border-radius: 6px; transition: background-color 120ms ease, box-shadow 120ms ease; }
.milestone.playable:hover { background: rgba(255, 244, 214, 0.6); box-shadow: 0 0 0 1px rgba(227, 161, 58, 0.4); }
.milestone.playable.planned { background: rgba(222, 248, 225, 0.7); box-shadow: 0 0 0 2px var(--green); }
.milestone.playable:focus-visible { outline: 2px solid #3f75df; outline-offset: 2px; }

/* ---- "Wrap up & Exit" button (player-initiated positive conclusion) ------ */
.commit-button.wrapup {
  margin-top: 10px;
  border-color: #8a5a14;
  background: linear-gradient(180deg, #e3a13a, #c8851f);
  box-shadow: 0 5px 0 #7a4a10;
  font-size: 15px;
}
/* in the dock it is the secondary action — smaller than Commit Week */
.right-panel .commit-dock .commit-button.wrapup { margin-top: 8px; padding-top: 9px; padding-bottom: 9px; font-size: 13.5px; box-shadow: 0 4px 0 #7a4a10; }
.commit-button.wrapup[hidden] { display: none; }

/* ---- drag-and-drop visual feedback (was unstyled) ----------------------- */
.desk-card.dragging { opacity: 0.55; filter: grayscale(0.2); }
.plan-slots.drop-hot, .pinned-box .drop-hot,
#planSlots.drop-hot { outline: 2px dashed var(--green); outline-offset: 3px; border-radius: 8px; }
#pinned-body.drop-hot { outline: 2px dashed var(--amber); outline-offset: 3px; border-radius: 6px; }

/* =============================================================================
   WEEK 0 — start screen (backstory + hero select + market thesis)
   ============================================================================ */
.setup-screen {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 28px; overflow-y: auto;
  background:
    radial-gradient(circle at 50% 30%, rgba(40, 26, 14, 0.6), rgba(8, 6, 4, 0.92)),
    #080604;
  font-family: var(--font-body); color: var(--ink);
}
.setup-screen[hidden] { display: none; }

.setup-card {
  width: min(860px, 100%);
  margin: auto;
  padding: 26px 30px 24px;
  border: 2px solid rgba(55, 33, 18, 0.92);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255, 247, 226, 0.99), rgba(232, 207, 167, 0.99)),
    var(--paper-light);
  box-shadow: 0 10px 0 rgba(28, 13, 5, 0.6), 0 26px 60px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.42);
}

.setup-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 900;
  letter-spacing: 0.14em; text-transform: uppercase; color: #7a4b0f;
}
.setup-title {
  font-family: var(--font-mono); font-weight: 800; font-size: 30px;
  letter-spacing: 0.02em; text-transform: uppercase; margin: 6px 0 8px; color: #1f150d;
}
.setup-intro { margin: 0 0 18px; max-width: 64ch; color: #4d3724; font-size: 14.5px; line-height: 1.5; }
.setup-h {
  font-family: var(--font-mono); font-size: 12px; font-weight: 900; letter-spacing: 0.1em;
  text-transform: uppercase; color: #61492f; margin: 16px 0 9px;
}

.setup-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.setup-grid-markets { grid-template-columns: repeat(3, 1fr); }
.setup-grid-bets { grid-template-columns: repeat(2, 1fr); }
.setup-grid-price { grid-template-columns: repeat(3, 1fr); }
.setup-sub { margin: -3px 0 9px; color: #6a513a; font-size: 12.5px; line-height: 1.4; max-width: 70ch; }
.setup-journal {
  margin: 4px 0 14px; padding: 9px 12px; border-radius: 8px;
  background: rgba(45, 110, 70, 0.1); border: 1px solid rgba(20, 99, 65, 0.35);
  font-size: 12.5px; color: #2c4a37;
}
.setup-journal strong { color: #146341; }
.setup-journal .journal-lessons { margin-top: 3px; font-size: 11.5px; font-style: italic; color: #5c6b5f; }

/* Phase 3 — "Continue your run" (input-log save): the first thing a returning
   player sees, so it sits above the new-run steps and reads as the default. */
.continue-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin: 4px 0 16px; padding: 14px 16px; border-radius: 12px;
  border: 2px solid #0d5234;
  background: linear-gradient(180deg, rgba(39, 170, 106, 0.16), rgba(22, 136, 79, 0.1));
  box-shadow: 0 4px 0 rgba(7, 55, 31, 0.35);
}
.continue-card-text { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.continue-kicker {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: #146341;
}
.continue-card-text strong { font-size: 17px; font-weight: 900; color: #1f2a1f; }
.continue-card-text span { font-size: 12.5px; color: #4a5a4c; }
.continue-card-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.continue-card .continue-button { margin-top: 0; width: auto; padding: 11px 22px; font-size: 15px; }
.continue-abandon {
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
  font-size: 11.5px; font-weight: 700; color: #7a5a3a; text-decoration: underline;
}
.continue-abandon.armed { color: #b03a26; }
.continue-note { flex: 1 1 100%; margin: 0; font-size: 12.5px; color: #8a3a26; }

.choose-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer;
  padding: 12px 13px; border: 2px solid rgba(91, 61, 35, 0.3); border-radius: 9px;
  background: rgba(255, 244, 219, 0.7); color: var(--ink);
  box-shadow: 0 3px 0 rgba(76, 45, 22, 0.18);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.choose-card:hover { transform: translateY(-2px); filter: brightness(1.02); }
.choose-card.selected {
  border-color: #146341; background: rgba(222, 248, 225, 0.85);
  box-shadow: 0 4px 0 #0d4a2f, 0 0 0 2px var(--green) inset;
}
.choose-head { display: flex; align-items: center; gap: 8px; }
.choose-icon {
  width: 30px; height: 30px; display: grid; place-items: center; flex: 0 0 auto;
  border-radius: 6px; background: #3a6ea5; color: #fff; box-shadow: inset 0 -3px rgba(0,0,0,0.18);
}
.choose-icon .ic { width: 18px; height: 18px; }
.choose-name { font-size: 14.5px; font-weight: 800; }
.choose-tag {
  margin-left: auto; font-family: var(--font-mono); font-size: 9px; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase; color: #137448;
  background: rgba(45, 167, 99, 0.16); border: 1px solid rgba(20, 116, 72, 0.3);
  border-radius: 999px; padding: 3px 7px;
}
.choose-tagline { font-style: italic; color: #725a43; font-size: 12.5px; }
.choose-blurb { color: #4d3724; font-size: 12px; line-height: 1.35; }
.choose-stats { display: flex; gap: 8px; margin: 2px 0; }
.stat-chip {
  display: inline-flex; align-items: baseline; gap: 5px;
  border-radius: 5px; padding: 3px 8px; background: rgba(255, 248, 231, 0.8);
  border: 1px solid rgba(106, 70, 38, 0.28); font-size: 12px; font-weight: 800; color: #2b1b10;
}
.stat-chip b {
  font-family: var(--font-mono); font-size: 9px; font-weight: 900; letter-spacing: 0.06em;
  text-transform: uppercase; color: #7a4b0f;
}
.choose-line { font-size: 11.5px; line-height: 1.3; }
.choose-line.good { color: #157248; }
.choose-line.bad { color: #b0492f; }

.setup-actions { margin-top: 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.setup-actions .commit-button { width: auto; min-width: 260px; margin-top: 0; }

@media (max-width: 720px) {
  .setup-grid, .setup-grid-markets, .setup-grid-bets, .setup-grid-price { grid-template-columns: 1fr; }
}

/* ============================================================================
 * STAGE 1 (improvement-plan v1.3) — drama pass: pre-roll odds, d20 ritual
 * choreography, portrait states, ending splashes, floating deltas, juice.
 * Rule (plan 2.1): light-week animations <= 300ms & non-blocking; slow
 * choreography belongs to the d20 ritual only.
 * ========================================================================== */

/* ---- pre-roll stakes panel (1.1) ---- */
.d20-odds {
  margin: 10px 0 12px; padding: 10px 12px; border-radius: 10px;
  background: rgba(46, 39, 60, 0.06); border: 1px solid rgba(46, 39, 60, 0.14);
}
.d20-odds-line { display: flex; align-items: center; gap: 10px; font-size: 14px; margin-bottom: 6px; }
.d20-odds-line b { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.3px; }
.d20-odds-label { font-weight: 700; font-size: 12.5px; padding: 2px 9px; border-radius: 999px; }
.d20-odds-label[data-odds="near_lock"] { background: rgba(222,248,225,.95); color: #137448; }
.d20-odds-label[data-odds="good"]      { background: rgba(222,248,225,.8);  color: #1c7b4f; }
.d20-odds-label[data-odds="risky"]     { background: rgba(255,243,205,.95); color: #9a6310; }
.d20-odds-label[data-odds="desperate"] { background: rgba(255,234,217,.95); color: #bb3f2d; }
.d20-odds-label[data-odds="long_shot"] { background: rgba(255,222,217,.95); color: #c22b1d; }
.d20-prep-note { margin-top: 7px; font-size: 12.5px; font-weight: 600; color: #137448; }

/* ---- d20 ritual choreography (1.7) ---- */
.die.big { width: 92px; height: 92px; font-size: 40px; line-height: 92px; }
.mod-chip.reveal { animation: chipIn 0.22s ease-out; }
@keyframes chipIn { from { opacity: 0; transform: translateY(8px) scale(0.85); } to { opacity: 1; transform: none; } }
.band-badge.pop { animation: bandPop 0.34s cubic-bezier(.2,1.6,.4,1); }
@keyframes bandPop { 0% { opacity: 0; transform: scale(0.6); } 100% { opacity: 1; transform: scale(1); } }

/* ---- founder portrait states (1.6) ---- */
.founder-portrait .portrait-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block;
}

/* ---- ending splash (1.6) ---- */
.ending-splash {
  display: block; width: calc(100% + 48px); margin: -24px -24px 14px;
  max-height: 260px; object-fit: cover;
  border-radius: 14px 14px 0 0;
}

/* ---- setup founder portraits (1.6) ---- */
.choose-card .setup-portrait {
  display: block; width: 100%; height: 150px; object-fit: cover; object-position: top;
  border-radius: 10px; margin-bottom: 10px;
}

/* ---- floating deltas (1.7; non-blocking, <=1.1s passive) ---- */
.float-delta {
  position: fixed; z-index: 90; transform: translateX(-50%);
  font-weight: 800; font-size: 13.5px; pointer-events: none;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  animation: floatUp 1.05s ease-out forwards;
}
.float-delta.good { color: #137448; }
.float-delta.bad { color: #bb3f2d; }
@keyframes floatUp {
  0% { opacity: 0; translate: 0 6px; }
  15% { opacity: 1; }
  100% { opacity: 0; translate: 0 -26px; }
}

/* ---- light-week juice (<=300ms, non-blocking) ---- */
/* The deal animation plays ONLY on the new week's deal (render.js adds .deal
   once per beginWeek) — re-renders from select/plan clicks must NOT replay it. */
.desk-card.deal { animation: dealIn 0.24s ease-out backwards; animation-delay: calc(var(--card-index, 0) * 0.04s); }
@keyframes dealIn { from { opacity: 0; transform: translateY(10px); } }
.meter span { transition: width 0.28s ease; }
.hud-stress-bar span, #hud-stressbar { transition: width 0.28s ease; }

/* ---- day/night theme skin ------------------------------------------------
   The scene art carries most of the change (every backdrop has a -day twin);
   the chrome just stops pretending it's 2 AM: lighter page background and a
   much softer vignette so the daylight scenes aren't dimmed back to night. */
body.theme-day { background: #b9aa8d; }
body.theme-day .scene-vignette {
  background:
    linear-gradient(180deg, rgba(60, 45, 25, 0.10), transparent 18%, transparent 67%, rgba(60, 40, 20, 0.16)),
    radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(50, 32, 14, 0.14) 100%);
}

/* ---- animated icon swap on the two header toggles ------------------------
   Each button holds TWO stacked icons; the state class on the button
   (#theme-btn.day / #sound-btn.muted) spins the old one out and the new one
   in with a springy overshoot. Sun ⇄ crescent, speaker ⇄ muted speaker. */
/* absolute icons remove the button's min-content width — in the zero-width
   flex header it would collapse, so pin the 48px square explicitly */
.settings-button { position: relative; flex: 0 0 48px; min-width: 48px; }
/* a single static icon (the progress download) is centred by flex — the swap
   icons below are absolutely centred and ignore it */
.settings-button:not(.icon-swap) { display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.icon-swap .ic {
  position: absolute; left: 50%; top: 50%; margin: -11px 0 0 -11px;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.22s ease;
}
.icon-swap .swap-b { transform: rotate(110deg) scale(0.25); opacity: 0; }
#theme-btn.day .swap-a, #sound-btn.muted .swap-a {
  transform: rotate(-110deg) scale(0.25); opacity: 0;
}
#theme-btn.day .swap-b, #sound-btn.muted .swap-b {
  transform: rotate(0deg) scale(1); opacity: 1;
}
/* muted state stays visibly "off" even at rest */
.settings-button.muted { opacity: 0.6; }

/* ============================================================================
 * ЭТАП S — story layer: cold open (S1), chapter cards (S2), ending
 * share-screen with epilogue (S5+S6). Fullscreen takeover above everything.
 * ========================================================================== */
.story-screen {
  position: fixed; inset: 0; z-index: 240;
  display: flex; align-items: center; justify-content: center;
  /* retro pixel night sky: hard-edged "star pixels" on a few tiled grids +
     CRT scanlines + a warm horizon glow, over the dark purple base */
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.55) 0 1.4px, transparent 1.6px) 0 0 / 92px 92px,
    radial-gradient(circle, rgba(255, 214, 130, 0.5) 0 1.4px, transparent 1.6px) 46px 60px / 164px 132px,
    radial-gradient(circle, rgba(150, 132, 210, 0.45) 0 1.2px, transparent 1.4px) 22px 14px / 70px 64px,
    radial-gradient(130% 70% at 50% 118%, rgba(120, 78, 40, 0.5), transparent 60%),
    radial-gradient(120% 90% at 50% 0%, rgba(36, 28, 52, 0.96), rgba(16, 12, 24, 0.985)),
    #100c18;
  overflow-y: auto; padding: 4vh 18px;
}
/* day theme: warmer dawn sky behind the cold open instead of midnight */
body.theme-day .story-screen {
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.08) 0 1px, transparent 1px 3px),
    radial-gradient(circle, rgba(255, 255, 255, 0.6) 0 1.4px, transparent 1.6px) 0 0 / 92px 92px,
    radial-gradient(circle, rgba(255, 226, 170, 0.55) 0 1.4px, transparent 1.6px) 46px 60px / 164px 132px,
    radial-gradient(130% 80% at 50% 120%, rgba(231, 161, 90, 0.55), transparent 62%),
    radial-gradient(120% 95% at 50% 0%, rgba(120, 96, 150, 0.9), rgba(58, 44, 80, 0.96)),
    #3a2c50;
}
/* display:flex above beats the UA [hidden] rule — restore it explicitly */
.story-screen[hidden], .story-actions[hidden] { display: none !important; }
.story-wrap { width: min(720px, 94vw); margin: auto; color: #f3ead8; text-align: center; }
.story-kicker {
  font-family: var(--font-mono);
  font-size: 12px; font-weight: 800; letter-spacing: 0.22em; color: #d9a52a;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.story-beat {
  font-size: 21px; line-height: 1.55; min-height: 4.6em; font-weight: 550;
  display: flex; align-items: center; justify-content: center;
  color: #efe6d2;
}
.story-actions { display: flex; gap: 12px; justify-content: center; margin-top: 26px; }
/* Same chunky tactile button language as the rest of the game (commit-button):
   3px border, vertical gradient, hard drop ledge, press-down on :active. */
.story-actions .btn {
  padding: 11px 24px; border-radius: 7px; cursor: pointer;
  border: 3px solid #14101f;
  background: linear-gradient(180deg, #443b5e, #322b48);
  color: #e8e2f4; font-weight: 950; font-size: 14px;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-shadow: 0 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 0 #0c0916;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.story-actions .btn.primary {
  border-color: #0d5234;
  background: linear-gradient(180deg, #27aa6a, #16884f);
  color: #fff5db;
  box-shadow: 0 4px 0 #07371f;
}
.story-actions .btn:hover { filter: brightness(1.1); }
.story-actions .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #0c0916; }
.story-actions .btn.primary:active { box-shadow: 0 1px 0 #07371f; }
.story-skip { opacity: 0.75; }

/* S1 — the WHY choice */
.story-why { margin-top: 10px; }
.story-why-title { font-size: 17px; margin: 18px 0 14px; color: #f3ead8; }
.story-why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.story-why-option {
  text-align: left; padding: 13px 15px; border-radius: 9px; cursor: pointer;
  border: 3px solid #14101f;
  background: linear-gradient(180deg, #3b3354, #2b2540);
  color: #f3ead8; display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 4px 0 #0c0916;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease, filter 120ms ease;
}
.story-why-option:hover { border-color: #d9a52a; filter: brightness(1.08); }
.story-why-option:active { transform: translateY(3px); box-shadow: 0 1px 0 #0c0916; }
.story-why-option strong { font-size: 15px; }
.story-why-option small { font-size: 12px; color: #c9bda3; }

/* S2 — chapter cards */
.story-chapter { cursor: pointer; }
.story-chapter-title {
  font-size: 44px; margin: 6px 0 14px; letter-spacing: 0.01em; color: #fff;
  animation: chapterIn 0.5s ease-out;
}
@keyframes chapterIn { from { opacity: 0; transform: translateY(14px); } }
.story-chapter .story-beat { min-height: auto; font-size: 18px; }

/* S5+S6 — ending share-screen */
.story-ending { text-align: left; width: min(860px, 96vw); }
.ending-hero {
  display: block; width: 100%; max-height: 42vh; object-fit: cover;
  border-radius: 16px 16px 0 0; border: 1px solid rgba(243, 234, 216, 0.18); border-bottom: none;
}
/* cold-open founder illustration (S1) — same treatment, free-standing card */
.open-hero {
  display: block; width: 100%; max-height: 36vh; object-fit: cover;
  border-radius: 14px; border: 1px solid rgba(243, 234, 216, 0.18);
  margin-bottom: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}
.ending-body {
  background: #f7efe2; color: #2c2418; border-radius: 0 0 16px 16px;
  padding: 22px 26px 18px; border: 1px solid rgba(243, 234, 216, 0.18); border-top: none;
}
.story-ending .story-kicker { margin-bottom: 8px; }
.ending-title { font-size: 34px; margin: 0 0 6px; }
.ending-diagnosis { font-style: italic; color: #5d5444; margin: 0 0 16px; font-size: 15.5px; }
/* the press clipping about the company (Phase 5) */
.ending-press {
  margin: 0 0 10px; padding-left: 10px; border-left: 3px solid #b9a27a;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.4; color: #6a5239;
}
.ending-stats { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ending-stat {
  background: #fff; border: 1px solid #e3d8c2; border-radius: 10px;
  padding: 8px 14px; display: flex; flex-direction: column; min-width: 86px;
}
.ending-stat b { font-size: 19px; }
.ending-stat small { font-size: 11px; color: #8a7d63; text-transform: uppercase; letter-spacing: 0.06em; }
.ending-scorecard { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 16px; }
.ending-axis {
  background: #fff; border: 1px solid #e3d8c2; border-radius: 10px;
  padding: 8px 6px; text-align: center;
}
.ending-axis b { font-size: 22px; display: block; }
.ending-axis b[data-grade="S"], .ending-axis b[data-grade="A"] { color: #1c7b4f; }
.ending-axis b[data-grade="B"], .ending-axis b[data-grade="C"] { color: #b76417; }
.ending-axis b[data-grade="D"], .ending-axis b[data-grade="Collapse"] { color: #c24132; }
.ending-axis small { font-size: 11px; color: #8a7d63; }
.ending-epilogue {
  background: #fff8ec; border: 1px solid #e8dcc4; border-radius: 12px;
  padding: 12px 16px; margin-bottom: 14px;
}
.ending-epilogue h3 {
  margin: 0 0 8px; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #9a8a68;
}
.ending-ep-row { display: flex; gap: 12px; padding: 5px 0; font-size: 14.5px; align-items: baseline; }
.ending-ep-row b { flex: 0 0 110px; font-size: 11px; letter-spacing: 0.1em; color: #b08d3c; }
.ending-lessons { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
/* 3.3 — scam-exit price tag + first achievements */
.lesson-chip.achievement-chip {
  background: rgba(217, 165, 42, 0.16); border: 1px solid rgba(217, 165, 42, 0.55);
  color: #8a6210; font-weight: 800;
}
.ending-carryover {
  font-size: 13.5px; font-weight: 700; color: #b3402f;
  border-left: 3px solid #c24132; padding-left: 10px; margin: 0 0 14px;
}
.ending-actions { justify-content: flex-start; margin-top: 4px; }
.story-ending .story-actions .btn { border-color: #cdbf9f; color: #2c2418; background: #fff; }
.story-ending .story-actions .btn.primary { background: #2e9e63; border-color: #2e9e63; color: #fff; }
.ending-share-fallback { width: 100%; height: 90px; margin-top: 10px; font-size: 12px; }
.ending-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed #d8cbae;
}
.ending-brand { font-weight: 900; letter-spacing: 0.18em; font-size: 12px; color: #b08d3c; }
.ending-seed { font-size: 12px; color: #8a7d63; font-family: ui-monospace, Menlo, monospace; }

/* ============================================================================
 * ЭТАП 2 — ритм: недельные модификаторы, экспайрящие офферы, either/or.
 * ========================================================================== */
.week-mod-chip {
  display: inline-block; margin-left: 10px; padding: 2px 10px;
  border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  background: rgba(217, 165, 42, 0.18); border: 1px solid rgba(217, 165, 42, 0.5);
  color: #8a6210; text-transform: uppercase; vertical-align: 1px;
}
.desk-card.expiring {
  box-shadow: 0 0 0 2px rgba(194, 65, 50, 0.55);
  padding-top: 27px; /* room for the banner — the card clips overflow */
}
.desk-card .expire-tag {
  position: absolute; top: 0; left: 0; right: 0;
  background: #c24132; color: #fff; font-size: 9px; font-weight: 800;
  letter-spacing: 0.1em; padding: 3px 0 2px; text-align: center;
}
.expire-line { font-size: 12.5px; font-weight: 600; color: #b3402f; margin: 4px 0; }

/* ============================================================================
 * S3/S4 — inbox ticker: story beats (✉) + satirical headlines (📰) on the desk.
 * ========================================================================== */
.inbox-ticker {
  display: flex; flex-direction: column; gap: 2px;
  margin: 2px 10px 4px; padding: 4px 10px;
  border-left: 3px solid rgba(217, 165, 42, 0.55);
  background: rgba(16, 12, 24, 0.35); border-radius: 0 8px 8px 0;
}
.inbox-item { display: flex; gap: 7px; align-items: baseline; font-size: 11.5px; line-height: 1.35; }
.inbox-item b { flex: 0 0 auto; font-size: 11px; }
.inbox-item.inbox-story span { color: #ffe3a1; font-weight: 600; }
.inbox-item.inbox-news span { color: rgba(255, 232, 196, 0.66); font-style: italic; }

/* ---- NPC portraits (Phase 5 follow-up): the people of the story get faces.
   Busts on cream paper, zoomed onto the face for the small medallions. ---- */
.npc-face {
  display: inline-block; flex: 0 0 auto; border-radius: 50%;
  background-color: #f6ead2; background-repeat: no-repeat;
  background-size: var(--face-zoom, 150%); background-position: 50% 24%;
}
.inbox-item .inbox-avatar {
  width: 20px; height: 20px; align-self: center; --face-zoom: 190%;
  box-shadow: 0 0 0 1px rgba(255, 227, 161, 0.55);
}
.modal .modal-face {
  float: right; width: 78px; height: 78px; margin: 0 0 8px 14px; --face-zoom: 125%;
  border: 2px solid rgba(55, 33, 18, 0.78); box-shadow: 0 2px 0 rgba(28, 13, 5, 0.3);
}
.ending-ep-row .ending-ep-face { flex: 0 0 26px; width: 26px; height: 26px; align-self: center; }
.ending-ep-row .npc-face.ending-ep-face { --face-zoom: 170%; box-shadow: 0 0 0 1px rgba(176, 141, 60, 0.6); }

/* ============================================================================
 * ЭТАП 4 — мета: перки-уроки, галерея концовок, daily run.
 * ========================================================================== */
.setup-h-opt { font-size: 12px; font-weight: 600; opacity: 0.55; letter-spacing: 0; }
.perk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.perk-chip {
  display: flex; flex-direction: column; gap: 4px; text-align: left;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(243, 234, 216, 0.25);
  background: rgba(243, 234, 216, 0.05); color: inherit;
}
.perk-chip b { font-size: 13px; }
.perk-chip span { font-size: 11.5px; opacity: 0.75; line-height: 1.35; }
.perk-chip:hover { filter: brightness(1.15); }
.perk-chip.picked {
  border-color: #d9a52a; background: rgba(217, 165, 42, 0.14);
  box-shadow: 0 0 0 1px #d9a52a inset;
}
/* Daily Run (plan 4.4): same chunky tactile language as the commit button,
   but amber — the "special mode" color — so it reads on the light setup. */
/* ---- Daily Challenge card (4.4) — explains the fixed-seed daily run ---- */
.daily-card {
  width: 100%; max-width: 460px; margin: 18px auto 0;
  padding: 16px 18px 18px; border-radius: 14px;
  border: 1px solid rgba(138, 98, 16, 0.4);
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(255, 214, 130, 0.55), transparent 70%),
    linear-gradient(180deg, #fcedc8, #f3dca6);
  box-shadow: 0 8px 22px rgba(60, 40, 8, 0.16), inset 0 0 0 1px rgba(255, 255, 255, 0.35);
  text-align: left;
}
/* "or take the" divider sitting on the card's top edge */
.daily-or {
  position: relative; text-align: center; margin: -26px 0 14px;
}
.daily-or span {
  background: #fcedc8; padding: 0 12px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: #9a7430;
}
.daily-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.daily-card-sun {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: #5e430c;
  background: radial-gradient(circle at 50% 38%, #ffd773, #f0b53e);
  box-shadow: 0 2px 0 #b9851d, 0 0 0 4px rgba(240, 181, 62, 0.22);
}
.daily-card-sun .ic { width: 22px; height: 22px; }
.daily-card-titles strong {
  display: block; font-size: 16px; font-weight: 900; color: #3a2a08; letter-spacing: 0.01em;
}
.daily-card-titles small {
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; color: #9a7430;
}
.daily-card-desc {
  margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #5a431f;
}
.daily-card-desc b { color: #7a4a10; font-weight: 800; }
.daily-button {
  display: block; width: 100%;
  border: 3px solid #8a6210; border-radius: 9px;
  background: linear-gradient(180deg, #f4bd48, #dd9a2c);
  color: #3a2a08; cursor: pointer;
  font-size: 14px; font-weight: 950; padding: 11px 16px;
  text-transform: uppercase; letter-spacing: 0.04em;
  text-shadow: 0 1px rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 0 #5e430c;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}
.daily-button:hover { filter: brightness(1.06); }
.daily-button:active { transform: translateY(3px); box-shadow: 0 1px 0 #5e430c; }
/* Phase 3 — challenge code entry (same start, same dice as a friend) */
.code-card { width: 100%; max-width: 460px; margin: 14px auto 0; text-align: left; }
.code-label {
  display: block; margin-bottom: 6px;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: #9a7430;
}
.code-row { display: flex; gap: 8px; }
.code-input {
  flex: 1 1 auto; min-width: 0; padding: 9px 12px; border-radius: 8px;
  border: 2px solid rgba(91, 61, 35, 0.35); background: #fffaf0; color: #2c1f12;
  font: 700 14px var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.code-input:focus-visible { outline: 3px solid rgba(217, 165, 42, 0.6); outline-offset: 1px; }
.code-button {
  flex: 0 0 auto; padding: 9px 16px; border-radius: 8px; cursor: pointer;
  border: 2px solid #8a6210; background: linear-gradient(180deg, #f4bd48, #dd9a2c);
  color: #3a2a08; font-size: 13px; font-weight: 900; text-transform: uppercase;
  box-shadow: 0 3px 0 #5e430c;
}
.code-button:active { transform: translateY(2px); box-shadow: 0 1px 0 #5e430c; }
.code-msg { margin: 6px 0 0; font-size: 12px; color: #8a3a26; }
.code-msg.ok { color: #146341; }
.story-why-equal { margin: -4px 0 12px; font-size: 13px; font-style: italic; opacity: 0.8; }
/* Phase 3 — page shell: build stamp, no-JS note, small-screen heads-up */
.setup-build {
  margin: 18px 0 0; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: #9a8a6a;
}
.noscript-note {
  max-width: 560px; margin: 40px auto; padding: 18px 20px; border-radius: 10px;
  background: #fff6e2; color: #2c1f12; font: 15px/1.5 system-ui, sans-serif;
}
.noscript-note strong { display: block; margin-bottom: 4px; }
.narrow-guard {
  position: fixed; inset: 0; z-index: 900;
  display: grid; place-items: center; padding: 16px;
  background: rgba(14, 9, 4, 0.86);
}
.narrow-guard[hidden] { display: none; }
.narrow-card {
  width: min(420px, 100%); padding: 20px; border-radius: 12px;
  border: 3px solid #3a2819; background: #fff6e2; color: #2c1f12; text-align: center;
}
.narrow-kicker {
  font-family: var(--font-mono); font-size: 11px; font-weight: 800;
  letter-spacing: 0.16em; color: #9a7430;
}
.narrow-card p { margin: 10px 0 0; font-size: 14px; line-height: 1.5; }
.journal-gallery { margin-top: 8px; }
.journal-gallery-head { font-size: 11px; font-weight: 800; letter-spacing: 0.08em; opacity: 0.8; margin-bottom: 5px; }
.journal-gallery-cells { display: flex; flex-wrap: wrap; gap: 5px; }
.gallery-cell {
  font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  border: 1px dashed rgba(138, 110, 60, 0.45); opacity: 0.55;
}
/* Discovered endings: solid amber badge with dark text so it stays readable on
   BOTH the dark journal modal and the light setup-screen recap (the light-amber
   text here used to vanish on the cream box). */
.gallery-cell.seen {
  border-style: solid; border-color: rgba(176, 124, 20, 0.65);
  background: rgba(227, 161, 58, 0.92); color: #3a2a08; opacity: 1;
}
.journal-stats { margin-top: 6px; font-size: 11px; opacity: 0.7; }
.ending-gallery-tease { font-size: 12.5px; font-weight: 700; color: #8a7d63; margin: 4px 0 10px; }

/* 6.7 — exit-ritual diligence warning + "what the lawyers found" */
.exit-risk-warning {
  margin: 10px 0 4px; padding: 9px 12px; border-radius: 8px;
  font-size: 13px; line-height: 1.4;
  border: 1px solid rgba(194, 65, 50, 0.45); background: rgba(194, 65, 50, 0.1);
}
.exit-risk-warning b { color: #c24132; margin-right: 4px; }
.exit-risk-warning[data-level="Low"] { border-color: rgba(47, 158, 99, 0.45); background: rgba(47, 158, 99, 0.08); }
.exit-risk-warning[data-level="Low"] b { color: #1d7a4f; }
.exit-risk-warning[data-level="Radioactive"] { animation: heat-pulse 1.6s ease-in-out infinite; }
.exit-risk-warning[data-level="Meltdown"] { animation: heat-pulse 0.9s ease-in-out infinite; border-width: 2px; }
.ending-diligence {
  margin: 0 0 14px; padding: 10px 14px; border-radius: 8px;
  border-left: 3px solid #c24132; background: rgba(194, 65, 50, 0.07);
  text-align: left;
}
.ending-diligence h3 {
  margin: 0 0 6px; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase; color: #b3402f;
}
.ending-df-row { display: flex; gap: 8px; font-size: 13.5px; padding: 2px 0; align-items: baseline; }
.ending-df-row b { color: #c24132; flex: 0 0 auto; }

/* ---- stress-burned Energy/Focus tokens: the cost stays visible ---- */
.energy-tokens i.burned,
.focus-tokens i.burned {
  background: rgba(194, 65, 50, 0.14);
  border: 1px dashed rgba(194, 65, 50, 0.55);
  position: relative;
}
.energy-tokens i.burned::after,
.focus-tokens i.burned::after {
  content: "✕"; position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 800; color: rgba(194, 65, 50, 0.75);
}

/* ============================================================================
 * NIGHT-UI SKIN — полная тёмная тема для ночного режима.
 * body.night-ui ставится в src/ui/main.js (флаг NIGHT_UI_TEST) и только в
 * ночной теме; дневная тема остаётся светлой бумагой. ОТКАТ: NIGHT_UI_TEST =
 * false — или удалить всё до маркера END NIGHT-UI SKIN.
 *
 * Палитра «лампа в тёмном офисе» (тёплая, под янтарь игры):
 *   поверхность  #342920→#21190f · текст #ecdcbd · заголовки #c9a86a
 *   приглушённый #a8916e · золото #ffd27a · зелёный #5ecf96/#6fd39a
 *   плохое #ff9d6e/#ff8a73 · бирюза #7fd2dc · фиолет #b3a6ff
 * Цветные акценты (зелёный коммит, оранжевый Upgrades, янтарная Daily-карта,
 * цветные глифы метрик) сознательно НЕ темнятся — это сигнальные цвета.
 * ========================================================================== */
body.night-ui {
  --n-hi: rgba(52, 41, 32, 0.97);
  --n-lo: rgba(33, 25, 15, 0.97);
  --n-base: #241b13;
  --n-ink: #ecdcbd;
  --n-ink-hi: #f6ecd4;
  --n-muted: #a8916e;
  --n-head: #c9a86a;
  --n-gold: #ffd27a;
  --n-amber-ink: #d9a955;
  --n-line: rgba(255, 210, 150, 0.16);
  --n-line-strong: rgba(255, 210, 150, 0.3);
  --n-hairline: rgba(255, 220, 160, 0.08);
  --n-well: rgba(0, 0, 0, 0.3);
  --n-chip: rgba(255, 225, 170, 0.08);
  --n-note: rgba(56, 42, 24, 0.9);
  --n-note-line: rgba(255, 200, 120, 0.22);
  --n-good: #5ecf96;
  --n-good-hi: #7ce8a8;
  --n-bad: #ff9d6e;
  --n-bad-hi: #ff8a73;
  --n-teal: #7fd2dc;
  --n-purple: #b3a6ff;
  /* перекраска базовой палитры прототипа — все var()-потребители темнеют сами */
  --ink: var(--n-ink);
  --muted: var(--n-muted);
}

/* ---- общие «бумажные» поверхности → тёмный орех ---- */
body.night-ui .hud-paper,
body.night-ui .side-panel,
body.night-ui .selected-card,
body.night-ui .modal,
body.night-ui .setup-card {
  border-color: rgba(10, 6, 2, 0.95);
  background: linear-gradient(180deg, var(--n-hi), var(--n-lo)), var(--n-base);
  box-shadow:
    0 4px 0 rgba(4, 2, 0, 0.85),
    0 10px 26px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px var(--n-hairline);
  color: var(--n-ink);
}
body.night-ui .side-panel::before,
body.night-ui .selected-card::before { border-color: rgba(255, 215, 150, 0.13); }
body.night-ui .side-panel::after,
body.night-ui .selected-card::after,
body.night-ui .hud-paper::after {
  background:
    linear-gradient(90deg, rgba(255, 226, 170, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(255, 226, 170, 0.02) 1px, transparent 1px);
  background-size: 18px 18px;
  mix-blend-mode: normal;
}
body.night-ui .left-panel::-webkit-scrollbar-thumb,
body.night-ui .right-panel::-webkit-scrollbar-thumb { background: rgba(255, 210, 150, 0.25); }

/* моно-заголовки секций */
body.night-ui .hud-paper small,
body.night-ui .side-panel h2,
body.night-ui .note-card h3,
body.night-ui .planner-title h2,
body.night-ui .pinned-box small { color: var(--n-head); }

/* ---- HUD-бумажки в шапке ---- */
body.night-ui .hud-paper strong { color: var(--n-ink-hi); }
body.night-ui .hud-paper em { color: var(--n-muted); }
body.night-ui .hud-paper b {
  border-color: var(--n-line);
  background: var(--n-chip);
  color: var(--n-ink);
}
body.night-ui .hud-bar { background: rgba(255, 255, 255, 0.12); }
body.night-ui .journey-button {
  border-color: #18100a;
  background: linear-gradient(180deg, #4a3a28, #33271a);
  color: #e8d4a8;
}

/* ---- левая панель: состояние компании ---- */
body.night-ui .founder-strip { border-color: var(--n-line); background: rgba(255, 220, 160, 0.07); }
body.night-ui .stack-head h3 { color: var(--n-head); }
body.night-ui .stack-head #stack-count { color: rgba(236, 220, 189, 0.45); }
body.night-ui .stack-chip { background: var(--n-chip); box-shadow: inset 0 0 0 1px var(--n-line); color: #e3c693; }
body.night-ui .stack-empty { color: rgba(236, 220, 189, 0.4); }
body.night-ui .cashflow-strip { background: var(--n-well); box-shadow: inset 0 0 0 1px rgba(255, 200, 120, 0.15); }
body.night-ui .cashflow-strip .cf small { color: rgba(236, 220, 189, 0.5); }
body.night-ui .cashflow-strip #cf-income,
body.night-ui .cashflow-strip #cf-net[data-sign="pos"] { color: var(--n-good); }
body.night-ui .cashflow-strip #cf-expense,
body.night-ui .cashflow-strip #cf-net[data-sign="neg"] { color: var(--n-bad); }
body.night-ui .unitecon-strip { background: rgba(22, 44, 34, 0.6); box-shadow: inset 0 0 0 1px rgba(110, 200, 160, 0.16); }
body.night-ui .unitecon-strip .ue small { color: rgba(190, 230, 208, 0.55); }
body.night-ui .unitecon-strip .ue strong { color: #67d9a4; }
body.night-ui .metric-row b { color: #d8c4a0; }
body.night-ui .metric-row strong,
body.night-ui .metric-row .metric-val-num { color: var(--n-teal); }
body.night-ui .metric-row .reveal-note { color: rgba(236, 220, 189, 0.4); }
body.night-ui .meter { background: rgba(255, 255, 255, 0.1); }
body.night-ui .note-card,
body.night-ui .market-stamp,
body.night-ui .milestone-note {
  border-color: var(--n-note-line);
  background: var(--n-note);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
}
body.night-ui .note-card h3 { color: var(--n-gold); }
body.night-ui .note-card p { color: #dcc9a6; }
body.night-ui .note-card button { color: #ffca6e; }
body.night-ui .market-stamp small { color: var(--n-head); }
body.night-ui .market-stamp .validated-note { color: var(--n-good); }
body.night-ui .milestone.playable:hover { background: rgba(255, 220, 160, 0.08); }
body.night-ui .milestone.playable.planned { background: rgba(45, 167, 99, 0.18); }

/* ---- правая панель: план недели ---- */
body.night-ui .location-picker { border-bottom-color: rgba(255, 210, 150, 0.2); }
body.night-ui .loc-picker-head h3 { color: var(--n-head); }
body.night-ui .loc-picker-head #loc-picker-fav { color: var(--n-muted); }
body.night-ui .loc-option { border-color: var(--n-line); background: var(--n-chip); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
body.night-ui .loc-option b { color: #e3c693; }
body.night-ui .loc-option.active { border-color: #2da763; background: rgba(45, 167, 99, 0.16); }
body.night-ui .loc-option.active b { color: var(--n-good-hi); }
body.night-ui .planner-tokens { border-color: var(--n-line); background: var(--n-well); }
body.night-ui .energy-tokens .empty,
body.night-ui .focus-tokens .empty { background: rgba(255, 255, 255, 0.12); }
body.night-ui .plan-slot { border-color: var(--n-line); background: var(--n-chip); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
body.night-ui .plan-slot.empty { color: rgba(236, 220, 189, 0.45); }
body.night-ui .slot-number,
body.night-ui .plan-slot.empty span { color: rgba(236, 220, 189, 0.3); }
body.night-ui .plan-slot em { color: var(--n-amber-ink); }
body.night-ui .plan-slot button { border-color: var(--n-line-strong); background: var(--n-chip); color: #e3c693; }
body.night-ui .plan-slot .slot-focus { border-color: var(--n-line-strong); background: var(--n-chip); color: #e3c693; }
body.night-ui .plan-slot .slot-focus.active { background: var(--purple); border-color: #4a378f; color: #fff; }
body.night-ui .pinned-box { border-color: rgba(255, 160, 130, 0.25); background: rgba(64, 38, 30, 0.9); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); }
body.night-ui .pinned-box .pinned-tag,
body.night-ui .pinned-box b,
body.night-ui .pinned-box .pinned-remove { color: var(--n-bad-hi); }
body.night-ui .risk-box { border-color: var(--n-note-line); background: var(--n-well); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45); }
body.night-ui .week-mod-chip { color: var(--n-gold); }

/* ---- сцена: статус-карточки ---- */
body.night-ui .assistant-card { background: rgba(18, 26, 24, 0.88); color: #cfe3d7; }
body.night-ui .assistant-card small { color: #8fc7e8; }

/* ---- карты на столе ---- */
body.night-ui .desk-card {
  background: linear-gradient(180deg, rgba(58, 46, 35, 0.98), rgba(37, 28, 20, 0.98));
  box-shadow:
    0 7px 0 rgba(0, 0, 0, 0.7),
    0 11px 18px rgba(0, 0, 0, 0.4),
    inset 0 0 0 1px rgba(255, 235, 200, 0.08);
}
body.night-ui .desk-card:hover,
body.night-ui .desk-card:focus-visible,
body.night-ui .desk-card.selected {
  filter: brightness(1.12);
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.7),
    0 16px 22px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 235, 200, 0.08);
}
body.night-ui .desk-card p { color: var(--n-good); }
body.night-ui .desk-card p.bad { color: var(--n-bad); }
body.night-ui .desk-card-top em { background: rgba(255, 210, 120, 0.16); color: var(--n-gold); }
body.night-ui .expire-line { color: var(--n-bad-hi); }

/* ---- инспектор выбранной карты ---- */
body.night-ui .selected-cost { border-color: var(--n-line-strong); background: rgba(255, 210, 120, 0.14); color: var(--n-gold); }
body.night-ui .selected-effects span { background: rgba(34, 78, 54, 0.75); color: #8fe7b5; }
body.night-ui .selected-effects .bad { background: rgba(92, 38, 26, 0.7); color: #ffb39a; }
body.night-ui .focus-line { color: var(--n-purple); }
body.night-ui .selected-card .live-note { color: var(--n-muted); }
body.night-ui .flavor-line { color: var(--n-muted); }
body.night-ui .selected-empty { color: var(--n-muted); }
body.night-ui .selected-actions button { border-color: var(--n-line-strong); background: var(--n-chip); color: var(--n-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
body.night-ui .selected-actions button:first-child { border-color: #146341; background: var(--green); color: #fff; box-shadow: 0 3px 0 #0d4a2f; }
body.night-ui .risk-high .risk-stamp { color: var(--n-bad-hi); }
body.night-ui .risk-medium .risk-stamp { color: #ffb45c; }
body.night-ui .risk-low .risk-stamp { color: #6fd39a; }

/* ---- модалки: событие / d20 / итоги / магазин / экзит ---- */
body.night-ui .modal-kicker { color: var(--n-amber-ink); }
body.night-ui .modal-kicker[data-sev="crisis"],
body.night-ui .modal-kicker[data-sev="catastrophe"] { color: var(--n-bad-hi); }
body.night-ui .modal-kicker[data-sev="warning"] { color: #ffb45c; }
body.night-ui .modal-kicker[data-sev="opportunity"] { color: #6fd39a; }
body.night-ui .modal-kicker[data-sev="drama"] { color: var(--n-purple); }
body.night-ui .modal-body { color: #dcc9a6; }
body.night-ui .modal-causes { background: var(--n-well); border-color: var(--n-line); }
body.night-ui .modal-causes h4 { color: var(--n-amber-ink); }
body.night-ui .modal-causes li { color: #dcc9a6; }
body.night-ui .choice { border-color: var(--n-line); background: var(--n-chip); color: var(--n-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
body.night-ui .choice-consequence { color: var(--n-muted); }
body.night-ui .fx-chip { background: rgba(34, 78, 54, 0.75); color: #8fe7b5; }
body.night-ui .fx-chip.down { background: rgba(92, 38, 26, 0.7); color: #ffb39a; }
body.night-ui .fx-chip.tag { background: rgba(255, 215, 150, 0.1); color: #dcc9a6; }
body.night-ui .modal .btn { border-color: var(--n-line); background: var(--n-chip); color: var(--n-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
body.night-ui .modal .btn.primary {
  border-color: #0d5234; color: #fff5db;
  background: linear-gradient(180deg, #27aa6a, #16884f);
  box-shadow: 0 4px 0 #07371f;
}

/* d20-ритуал */
body.night-ui .d20-stakes { color: var(--n-muted); }
body.night-ui .d20-mods-cap { color: #bfa377; }
body.night-ui .mod-chip { background: var(--n-well); border-color: var(--n-line); color: #dcc9a6; }
body.night-ui .mod-chip.pos { background: rgba(34, 78, 54, 0.75); color: #8fe7b5; border-color: rgba(110, 220, 160, 0.3); }
body.night-ui .mod-chip.neg { background: rgba(92, 38, 26, 0.7); color: #ffb39a; border-color: rgba(255, 150, 120, 0.3); }
body.night-ui .d20-why { background: var(--n-chip); border-color: var(--n-line); }
body.night-ui .d20-why-line { color: #dcc9a6; }
body.night-ui .d20-why-levers { color: #bfa377; }
body.night-ui .d20-exit-line { color: #dcc9a6; }
body.night-ui .d20-math { color: #dcc9a6; }
body.night-ui .d20-odds { background: rgba(16, 12, 26, 0.55); border-color: rgba(150, 132, 210, 0.3); }
body.night-ui .d20-prep-note { color: #6fd39a; }
body.night-ui .band-badge[data-band="critical_failure"] { color: var(--n-bad-hi); }
body.night-ui .band-badge[data-band="failure"] { color: #ffa45c; }
body.night-ui .band-badge[data-band="partial_success"] { color: #ffb45c; }
body.night-ui .band-badge[data-band="success"] { color: #6fd39a; }
body.night-ui .band-badge[data-band="critical_success"] { color: var(--n-good-hi); }

/* итоги недели / скоркарта / финальный разбор */
body.night-ui .summary-lines li { color: #dcc9a6; }
body.night-ui .axis { background: var(--n-well); border-color: var(--n-line); }
body.night-ui .axis-name { color: var(--n-amber-ink); }
body.night-ui .axis-grade { color: var(--n-ink-hi); }
body.night-ui .axis-grade[data-grade="S"],
body.night-ui .axis-grade[data-grade="A"] { color: var(--n-good-hi); }
body.night-ui .axis-grade[data-grade="B"] { color: #6fd39a; }
body.night-ui .axis-grade[data-grade="C"] { color: #ffb45c; }
body.night-ui .axis-grade[data-grade="D"] { color: #ffa45c; }
body.night-ui .axis-grade[data-grade="Collapse"],
body.night-ui .axis-grade[data-grade="F"] { color: var(--n-bad-hi); }
body.night-ui .axis-score { color: var(--n-muted); }
body.night-ui .recap-col li { color: #dcc9a6; }
body.night-ui .recap-col.right h4 { color: #6fd39a; }
body.night-ui .recap-col.wrong h4 { color: var(--n-bad-hi); }
body.night-ui .lesson-chip { color: var(--n-purple); border-color: rgba(179, 166, 255, 0.35); background: rgba(118, 93, 218, 0.2); }
body.night-ui .asset-chip { background: var(--n-well); border-color: var(--n-line); color: #dcc9a6; }
body.night-ui .empty-note { color: var(--n-muted); }

/* журнал запуска */
body.night-ui .journal-week {
  color: var(--n-head);
  background: linear-gradient(180deg, rgba(43, 33, 24, 0.97), rgba(43, 33, 24, 0.85));
  border-bottom-color: var(--n-line);
}
body.night-ui .journal-row { border-bottom-color: rgba(255, 210, 150, 0.12); }
body.night-ui .journal-kind { color: rgba(236, 220, 189, 0.45); }
body.night-ui .journal-text { color: var(--n-ink); }
body.night-ui .journal-row[data-tone="good"] .journal-text { color: #6fd39a; }
body.night-ui .journal-row[data-tone="bad"] .journal-text { color: #ffa45c; }
body.night-ui .journal-row[data-tone="good"] .journal-kind { color: rgba(111, 211, 154, 0.7); }
body.night-ui .journal-row[data-tone="bad"] .journal-kind { color: rgba(255, 164, 92, 0.7); }
body.night-ui .gallery-cell { border-color: rgba(255, 210, 150, 0.4); }

/* магазин апгрейдов */
body.night-ui .upgrades-stat .u-cash { color: var(--n-good); }
body.night-ui .upgrades-stat .u-slots { color: #dcc9a6; background: var(--n-chip); }
body.night-ui .upgrade-cat-title { color: #e3cfa6; }
body.night-ui .upgrade-cat-blurb,
body.night-ui .upgrade-flavor { color: var(--n-muted); }
body.night-ui .upgrade-card { border-color: var(--n-line); background: var(--n-chip); }
body.night-ui .upgrade-card.owned { border-color: rgba(110, 220, 160, 0.45); background: rgba(40, 140, 90, 0.16); }
body.night-ui .upgrade-name { color: var(--n-ink-hi); }
body.night-ui .upgrade-effect,
body.night-ui .upgrade-owned { color: #6fd39a; }
body.night-ui .upgrade-lock { color: #ffa45c; }

/* экзит-меню + дилидженс */
body.night-ui .exit-option { background: var(--n-chip); color: var(--n-ink); }
body.night-ui .exit-option small { color: var(--n-muted); }
body.night-ui .exit-risk-warning b { color: var(--n-bad-hi); }
body.night-ui .exit-risk-warning[data-level="Low"] b { color: #6fd39a; }

/* роадмап Journey */
body.night-ui .journey-modal .journey-intro,
body.night-ui .journey-body small { color: var(--n-muted); }
body.night-ui .journey-beat::before { background: rgba(255, 210, 150, 0.2); }
body.night-ui .journey-node { background: var(--n-chip); color: #d9c39a; box-shadow: inset 0 0 0 2px var(--n-line-strong); }
body.night-ui .journey-beat-head strong { color: var(--n-ink-hi); }
body.night-ui .journey-badge { background: var(--n-chip); color: #c9b08a; }

/* ---- стартовый экран (Week 0) ---- */
body.night-ui .setup-title { color: var(--n-ink-hi); }
body.night-ui .setup-kicker { color: var(--n-amber-ink); }
body.night-ui .setup-intro { color: #dcc9a6; }
body.night-ui .setup-h { color: var(--n-head); }
body.night-ui .setup-sub { color: var(--n-muted); }
body.night-ui .setup-journal { background: rgba(45, 110, 70, 0.16); border-color: rgba(110, 200, 150, 0.3); color: #bfe0c8; }
body.night-ui .setup-journal strong { color: #6fd39a; }
body.night-ui .setup-journal .journal-lessons { color: #9fb8a5; }
body.night-ui .choose-card { border-color: var(--n-line); background: var(--n-chip); color: var(--n-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
body.night-ui .choose-card.selected {
  border-color: #2da763; background: rgba(45, 167, 99, 0.14);
  box-shadow: 0 4px 0 #0d4a2f, 0 0 0 2px var(--green) inset;
}
body.night-ui .choose-tagline { color: var(--n-muted); }
body.night-ui .choose-blurb { color: #dcc9a6; }
body.night-ui .stat-chip { background: var(--n-well); border-color: var(--n-line); color: var(--n-ink); }
body.night-ui .stat-chip b { color: var(--n-amber-ink); }
body.night-ui .choose-line.good { color: #6fd39a; }
body.night-ui .choose-line.bad { color: #ff9d8a; }
body.night-ui .choose-tag { color: var(--n-good-hi); background: rgba(45, 167, 99, 0.18); }
body.night-ui .daily-or span { background: #251c12; color: var(--n-head); }
body.night-ui .continue-card { border-color: #2da763; background: rgba(45, 167, 99, 0.12); box-shadow: 0 4px 0 #0d4a2f; }
body.night-ui .continue-kicker { color: var(--n-good-hi); }
body.night-ui .continue-card-text strong { color: var(--n-ink-hi); }
body.night-ui .continue-card-text span { color: var(--n-muted); }
body.night-ui .continue-abandon { color: var(--n-muted); }
body.night-ui .continue-abandon.armed { color: var(--n-bad-hi); }
body.night-ui .continue-note { color: var(--n-bad-hi); }
body.night-ui .error-card {
  border-color: rgba(10, 6, 2, 0.95); color: var(--n-ink);
  background: linear-gradient(180deg, var(--n-hi), var(--n-lo)), var(--n-base);
}
body.night-ui .error-kicker { color: var(--n-bad-hi); }
body.night-ui .error-detail { color: #ffb8a6; background: rgba(255, 138, 115, 0.1); }
body.night-ui .error-count { color: var(--n-muted); }
body.night-ui .code-label { color: var(--n-head); }
body.night-ui .code-input { background: var(--n-well); border-color: var(--n-line-strong); color: var(--n-ink-hi); }
body.night-ui .code-msg { color: var(--n-bad-hi); }
body.night-ui .code-msg.ok { color: var(--n-good-hi); }
body.night-ui .setup-build { color: var(--n-muted); }

/* всплывающие дельты — тёмная подложка вместо светлой */
body.night-ui .float-delta { text-shadow: 0 1px 0 rgba(0, 0, 0, 0.65); }
body.night-ui .float-delta.good { color: #6fd39a; }
body.night-ui .float-delta.bad { color: var(--n-bad-hi); }
/* ---- END NIGHT-UI SKIN ---- */

/* ---- S2+ story beats: chapter art, EUREKA idea reveal, mechanics notes ---- */
.chapter-hero { max-height: 30vh; }
.story-chapter .story-beat { min-height: auto; }
.eureka-lead { font-size: 17px; color: #c9bda3; }
.eureka-name {
  margin: 14px auto 10px;
  font-family: var(--font-mono);
  font-size: 40px; font-weight: 900; letter-spacing: 0.01em;
  color: #ffd27a;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.45);
  animation: chapterIn 0.5s ease-out;
}
.eureka-pitch { font-size: 17.5px; max-width: 56ch; margin: 0 auto 6px; }
.eureka-tail { font-size: 14.5px; color: #c9bda3; max-width: 60ch; margin: 12px auto 0; }
.chapter-mech {
  max-width: 62ch; margin: 14px auto 0; padding: 11px 16px;
  border-radius: 9px; font-size: 14px; line-height: 1.5; color: #d8cdb6;
  background: rgba(243, 234, 216, 0.07);
  border: 1px solid rgba(243, 234, 216, 0.18);
  text-align: left;
}

/* ---- wrap-up confirmation: name the ending before the run ends ---- */
.wrapup-verdict {
  display: flex; flex-direction: column; gap: 2px; align-items: center;
  margin: 14px auto 8px; padding: 12px 18px; border-radius: 10px;
  background: rgba(217, 165, 42, 0.12); border: 1px solid rgba(217, 165, 42, 0.4);
}
.wrapup-verdict-label {
  font-family: var(--font-mono); font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase; color: #9a7430;
}
.wrapup-verdict-name { font-size: 21px; font-weight: 900; color: #7a4a10; }
.wrapup-stats {
  margin: 0; text-align: center; font-size: 12.5px; color: #6a513a; font-weight: 600;
}
body.night-ui .wrapup-verdict { background: rgba(255, 210, 120, 0.1); border-color: var(--n-note-line); }
body.night-ui .wrapup-verdict-label { color: var(--n-amber-ink); }
body.night-ui .wrapup-verdict-name { color: var(--n-gold); }
body.night-ui .wrapup-stats { color: var(--n-muted); }

/* ---- ending screen: the plain "how/why it ended" line ---- */
.ending-howline {
  display: flex; gap: 12px; align-items: baseline;
  margin: 0 0 14px; padding: 9px 14px; border-radius: 8px;
  background: #fff8ec; border-left: 3px solid #d9a52a;
  font-size: 14px; color: #4d3724; line-height: 1.4;
}
.ending-howline b {
  flex: 0 0 96px; font-family: var(--font-mono); font-size: 10px; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase; color: #b08d3c;
}

/* ---- ending screen: WHY (what worked / what didn't) + NEXT TIME ---- */
.ending-why {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px;
  margin: 0 0 14px;
}
.ending-why-col { padding: 10px 14px; border-radius: 8px; background: #fff8ec; border-top: 3px solid #b9a27a; }
.ending-why-col.good { border-top-color: #2f9a62; }
.ending-why-col.bad { border-top-color: #c4553e; }
.ending-why-col h3 {
  margin: 0 0 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase; color: #8a6c3b;
}
.ending-why-col p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.4; color: #4d3724; }
.ending-next { border-left-color: #2f9a62; }
.ending-next b { color: #2f7d55; }
/* The ending card stays paper-light in the night theme too — its parts keep their day colours. */

/* =============================================================================
   PHASE 4 — the newcomer: assistant tip, "Last week" ribbon, week ledger,
   ritual Skip, sticky Begin. (Desk text sits inside .stage → ×0.8 zoom, so
   14px here reads as ~11px on screen — the legibility floor.)
   ============================================================================= */

/* AI Assistant: narration + a standing tip (coaching / Term of the week) */
.assistant-card p#assistant-text { font-size: 14px; }
.assistant-tip {
  margin: 7px 0 0; padding-top: 7px;
  border-top: 1px dashed rgba(37, 52, 46, 0.3);
  font-family: var(--font-body); font-size: 14px; line-height: 1.35; color: #24402f;
}
.assistant-tip[hidden] { display: none; }
.assistant-tip[data-kind="alert"] { color: #8f2f1e; font-weight: 700; }
.assistant-tip-kicker { font-family: var(--font-mono); font-weight: 900; color: #2d5878; }
body.night-ui .assistant-tip { border-top-color: rgba(207, 227, 215, 0.25); color: #f1e2b8; }
body.night-ui .assistant-tip[data-kind="alert"] { color: #ffab8a; }
body.night-ui .assistant-tip-kicker { color: #8fc7e8; }

/* "Last week" — a quiet week's recap, riding above the desk (non-blocking) */
.week-recap {
  position: absolute; z-index: 2; top: 96px; left: 330px; right: 602px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 8px 10px 8px 12px; border-radius: 8px;
  border: 2px solid rgba(55, 33, 18, 0.85);
  background: linear-gradient(180deg, rgba(255, 247, 226, 0.97), rgba(240, 220, 182, 0.97));
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.38);
  font-size: 14px; color: #3a2819;
  animation: fitFade 0.2s ease;
}
.week-recap[hidden] { display: none; }
.week-recap-kicker {
  font-family: var(--font-mono); font-size: 14px; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase; color: #7a4b0f;
}
.week-recap-line { flex: 1 1 240px; min-width: 0; line-height: 1.3; }
.week-recap-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.week-recap-chips .fx-chip { font-size: 14px; padding: 3px 7px; cursor: help; }
.week-recap-details {
  border: 2px solid rgba(91, 61, 35, 0.35); border-radius: 6px; cursor: pointer;
  background: #fff2d4; color: #3a2819; font: inherit; font-size: 14px; font-weight: 900;
  padding: 3px 10px;
}
.week-recap-details:hover { filter: brightness(1.05); }
.week-recap-close {
  border: 0; background: none; cursor: pointer; padding: 0 4px;
  font-size: 20px; line-height: 1; font-weight: 700; color: #7a5a3a;
}
body.night-ui .week-recap {
  background: linear-gradient(180deg, var(--n-hi), var(--n-lo)), var(--n-base);
  border-color: var(--n-line-strong); color: var(--n-ink);
}
body.night-ui .week-recap-kicker { color: var(--n-gold); }
body.night-ui .week-recap-details { background: var(--n-chip); border-color: var(--n-line-strong); color: var(--n-ink); }
body.night-ui .week-recap-close { color: var(--n-muted); }

/* the week ledger in the summary — before → after, and where it came from */
.ledger {
  margin: 2px 0 12px; padding: 8px 12px 6px; border-radius: 10px;
  background: rgba(255, 248, 236, 0.92); border: 1px solid rgba(106, 70, 38, 0.2);
}
.ledger-cap {
  margin: 10px 0 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase; color: #7d5f30;
}
.ledger > .ledger-cap { margin-top: 0; }
.ledger-row {
  display: grid; grid-template-columns: 92px 1fr; align-items: baseline; gap: 1px 10px;
  padding: 5px 0; border-top: 1px dashed rgba(106, 70, 38, 0.2); font-size: 14px;
}
.ledger-cap + .ledger-row { border-top: 0; }
.ledger-name { font-weight: 800; color: #3a2819; }
.ledger-change { color: #5a4129; font-variant-numeric: tabular-nums; }
.ledger-after { color: #1f150d; font-weight: 900; }
.ledger-delta { font-weight: 800; }
.ledger-delta.up { color: #157248; }
.ledger-delta.down { color: #a8402a; }
.ledger-parts { grid-column: 2; color: #6a5239; font-size: 12.5px; line-height: 1.35; }
body.night-ui .ledger { background: var(--n-chip); border-color: var(--n-line); }
body.night-ui .ledger-cap { color: var(--n-head); }
body.night-ui .ledger-row { border-top-color: var(--n-line); }
body.night-ui .ledger-name, body.night-ui .ledger-after { color: var(--n-ink-hi); }
body.night-ui .ledger-change, body.night-ui .ledger-parts { color: var(--n-muted); }
body.night-ui .ledger-delta.up { color: var(--n-good); }
body.night-ui .ledger-delta.down { color: var(--n-bad); }

/* the d20 ritual fast-forwards only through this (no click-anywhere skip) */
.d20-skip-row { margin-top: 10px; }
.d20-skip { padding: 6px 12px; font-size: 12.5px; }

/* where you work → next week's desk */
.loc-picker-head .loc-picker-when {
  flex: 0 0 auto; padding: 1px 6px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 900; letter-spacing: 0.04em;
  text-transform: uppercase; color: #7a4b0f; background: rgba(227, 161, 58, 0.18);
  cursor: help;
}
body.night-ui .loc-picker-head .loc-picker-when { color: var(--n-gold); background: rgba(255, 210, 122, 0.12); }

/* setup: a start is preselected, so Begin stays in reach (sticky bottom) */
.setup-begin-bar {
  position: sticky; bottom: -24px; z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  margin: 18px -30px -24px; padding: 14px 30px 18px;
  border-top: 1px solid rgba(91, 61, 35, 0.18); border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, rgba(240, 222, 186, 0.97), rgba(232, 207, 167, 0.99));
}
.setup-begin-bar .commit-button { width: auto; min-width: 260px; margin-top: 0; }
.setup-begin-bar .commit-hint { margin: 0; font-size: 12.5px; color: #5d4630; }
.setup-begin-bar + .setup-actions { margin-top: 30px; }
#bet-step, #price-step { scroll-margin-bottom: 120px; }
body.night-ui .setup-begin-bar {
  background: linear-gradient(180deg, var(--n-hi), var(--n-lo)), var(--n-base);
  border-top-color: var(--n-line);
}
body.night-ui .setup-begin-bar .commit-hint { color: var(--n-muted); }

/* ---- Legibility pass (Phase 4 / studio review T21) --------------------------
   The desk is zoomed (--ui-scale: 0.8 on laptops, more on big screens — see
   main.js fitUiScale), so CSS px here read ×0.8 on a 1280–1536 screen. Key
   numbers go up (Energy cost 14px → 11.2px on screen), secondary labels to
   ≥ ~10px, and every pair that failed WCAG AA gets a solid colour instead of
   a faded one (locked rows used opacity .5 → 1.7:1). */
.desk-card-top { grid-template-columns: 24px minmax(0, 1fr) auto; gap: 5px; }
.desk-card-top span { width: 24px; height: 24px; }
.desk-card-top em { font-size: 14px; padding: 2px 5px; min-width: 30px; }
/* (the icon + accent already say the family; the word fits MARKETING whole) */
.desk-card-top b {
  font-size: 10.5px; letter-spacing: 0;
  color: color-mix(in srgb, var(--accent) 50%, #000);
}
body.night-ui .desk-card-top b { color: color-mix(in srgb, var(--accent) 55%, #fff); }
.desk-card h3 { margin: 10px 0 7px; }
.desk-card p { font-size: 13px; min-height: 19px; max-height: 19px; }
.desk-card p.bad { color: #a8361f; }
.desk-card p.cost-line { font-size: 12.5px; min-height: 18px; max-height: 18px; }
.desk-card strong { font-size: 11.5px; padding: 3px 6px; background: #1b7a4b; }
.desk-card strong[data-tone="medium"] { background: #9c6514; }
.desk-card strong[data-tone="high"] { background: #b0382a; }
.desk-card.planned::after { font-size: 10px; }

.hud-paper small { font-size: 12px; letter-spacing: 0.08em; }
.side-panel h2, .note-card h3, .planner-title h2, .pinned-box small { font-size: 11.5px; }
.founder-strip small, .milestone small { font-size: 12px; }

.metric-row b, .metric-row strong { font-size: 12.5px; }
.metric-row.locked { opacity: 1; }
.metric-row.locked .metric-glyph { filter: grayscale(0.7); opacity: 0.55; }
.metric-row .reveal-note { font-size: 10.5px; color: #6a5239; }
body.night-ui .metric-row.locked b,
body.night-ui .metric-row.locked strong,
body.night-ui .metric-row .reveal-note { color: var(--n-muted); }
.milestone.locked { opacity: 1; }
.milestone.locked small { color: #6a5239; }
body.night-ui .milestone.locked small { color: var(--n-muted); }

.cashflow-strip .cf small { font-size: 10.5px; color: #6a5239; }
body.night-ui .cashflow-strip .cf small { color: var(--n-muted); }
.unitecon-strip .ue small { font-size: 10px; color: #3f5a4b; }
body.night-ui .unitecon-strip .ue small { color: #9fc7b2; }
.stack-empty { font-size: 11.5px; }
body.night-ui .stack-empty { color: var(--n-muted); }

.loc-option b { font-size: 12px; color: #4a3624; }
.plan-slot b { font-size: 13px; }
.plan-slot em { font-size: 12px; }
.slot-number, .plan-slot.empty span { color: rgba(76, 52, 34, 0.55); }
body.night-ui .slot-number,
body.night-ui .plan-slot.empty span { color: rgba(236, 220, 189, 0.5); }
body.night-ui .plan-slot.empty { color: #bfa77f; }
#energy-count .tok-pen, #focus-count .tok-pen { font-size: 10.5px; }
.pinned-box .pinned-empty { font-size: 12px; }
.commit-hint { font-size: 12.5px; }

/* Left-panel diet: the full Scale panel (unit-econ + valuation strips on top
   of 13 metric rows) has to fit a 960px design canvas — 1366×768 / 1280×800
   laptops, and big screens now that the desk scales up. Labels get one line
   (wider label column, shorter meter), the PMF stamp becomes one row. */
.metric-row { grid-template-columns: 22px 110px minmax(0, 1fr) 42px; gap: 6px; }
.metric-row.locked strong { display: none; }
.metric-row .reveal-note { grid-column: 3 / 5; white-space: nowrap; }
.left-panel .metric-stack { gap: 4px; }
.left-panel .market-stamp {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px;
}
.left-panel .market-stamp small { grid-column: 1; }
.left-panel .market-stamp strong { grid-column: 1; margin-top: 3px; }
.left-panel .market-stamp #pmf-read { grid-column: 2; grid-row: 1 / span 2; margin: 0; text-align: right; }
.left-panel .market-stamp .validated-note { grid-column: 1 / -1; }
/* the warning reads as one bold line under its red pin (no "WARNING" header) */
.left-panel .warning-note h3 { display: none; }
.left-panel .warning-note p { margin: 0; font-weight: 700; font-size: 12.5px; line-height: 1.3; }
/* Scale's dread numbers were 9–10px (7–8px on screen) */
.scale-strip .sc-top small { font-size: 11px; }
.scale-strip .sc-meta, .scale-strip .sc-equity, .scale-strip .sc-pressures { font-size: 11px; }

/* day-skin pairs that measured under 4.5:1 (night already passed) */
.stack-empty { color: #6a5239; }
.metric-row.locked b, .metric-row.locked strong { color: #6a5239; }
.cashflow-strip #cf-expense, .cashflow-strip #cf-net[data-sign="neg"] { color: #a3421f; }
.selected-topline b { color: color-mix(in srgb, var(--accent) 50%, #000); }
body.night-ui .selected-topline b { color: color-mix(in srgb, var(--accent) 55%, #fff); }
.loc-picker-head #loc-picker-fav { color: #6a5239; }
.plan-slot.empty { color: #6a5239; }
.slot-number, .plan-slot.empty span { color: rgba(76, 52, 34, 0.72); }

/* primary buttons: cream text on the bright green top was 2.7:1 */
.btn.primary,
.story-actions .btn.primary,
body.night-ui .modal .btn.primary { background: linear-gradient(180deg, #1a7d4e, #12663d); }
.story-ending .story-actions .btn.primary { background: #1b7a4b; border-color: #1b7a4b; }
/* the big green CTA (Commit Week / Begin / Continue): a deeper green — 2.7 → 4:1
   at the top, ~5.5 at the bottom, on top of its dark text shadow */
.commit-button { background: linear-gradient(180deg, #1a8a52, #106a3b); }
/* setup's small gold labels were 3.4–3.8:1 */
.daily-or span, .daily-card-titles small, .code-label { color: #7a5a1e; }
.setup-build { color: #6f6248; }
.choose-tag { color: #0f6640; }

/* "Risk this week" pill: white on the bright green / amber was 3.1 / 2.2:1 */
.risk-box strong { font-size: 12px; }
.risk-box strong[data-level="Low"] { background: #1b7a4b; }
.risk-box strong[data-level="Medium"] { background: #9c6514; }
.risk-box strong[data-level="High"] { background: #b0382a; }

/* the small primary action (Add to Plan) — white on #2da763 was 3.1:1 */
.selected-actions button:first-child,
body.night-ui .selected-actions button:first-child { background: #1c8150; }
.choose-line.bad { color: #9e3d25; }

/* ---- Compact height (windows ≤ 750px tall) ---------------------------------
   A 1200–1366px-wide screen is usually a short one too (1366×768 / 1280×800
   laptops leave ~650–700px for the page). Same text sizes — only the vertical
   rhythm tightens, so both side panels fit without scrolling. Below ~680px the
   whole UI also steps down a notch (--ui-scale 0.8 → 0.75). */
@media (max-height: 750px) {
  .right-panel .location-picker { margin-bottom: 8px; padding-bottom: 8px; }
  .right-panel .loc-picker-head { margin-bottom: 5px; }
  .right-panel .loc-option { gap: 3px; padding: 3px; }
  .right-panel .loc-option .loc-thumb { max-width: 46px; }
  .right-panel .planner-tokens { margin: 8px 0; padding: 8px 10px; gap: 6px; }
  .right-panel .plan-slots { gap: 6px; }
  .right-panel .plan-slot { min-height: 40px; padding: 5px 8px; }
  .right-panel .pinned-box { margin-top: 8px; padding: 7px 10px; }
  .right-panel .risk-box { margin-top: 8px; padding: 6px 10px; }
  .right-panel .commit-button { margin-top: 10px; padding-top: 10px; padding-bottom: 10px; }
  .right-panel .commit-hint { margin-top: 5px; }
  .left-panel .metric-stack { gap: 2px; }
}
/* The left panel keeps the tight rhythm at every height (Phase 4): with the
   desk scaled to fit the window, its design canvas is ~960px tall on laptops
   AND on big screens — and Scale stacks unit economics, the valuation strip
   and a warning on top of 13 metric rows. */
.left-panel > h2 { margin-bottom: 8px; }
.left-panel .founder-strip { margin-bottom: 8px; padding: 6px 10px; }
.left-panel .stack-strip { margin-bottom: 5px; }
.left-panel .cashflow-strip { margin-bottom: 5px; }
.left-panel .unitecon-strip { margin-bottom: 6px; }
.left-panel .scale-strip { margin-bottom: 8px; }
.left-panel .metric-stack { gap: 3px; }
.left-panel .note-card { margin-top: 5px; padding: 6px 10px; }
.left-panel .market-stamp { margin-top: 5px; padding: 6px 11px; }
@media (max-height: 750px) {
  .left-panel .metric-stack { gap: 2px; }
}
/* (no-JS fallback — main.js fitUiScale() sets --ui-scale inline, same floor) */
@media (max-height: 680px) {
  :root { --ui-scale: 0.75; }
}

/* =============================================================================
   PHASE 6 — the meta ladder: the Founder Journal on the setup screen, Stakes,
   market knowledge on the market cards, the journal's news on the ending.
   ============================================================================= */
.setup-journal .journal-line { margin-top: 4px; font-size: 12px; line-height: 1.4; }
.setup-journal .journal-line b { font-weight: 800; color: #146341; }
.stakes-row { display: flex; flex-wrap: wrap; gap: 8px; }
.stakes-chip {
  font: inherit; font-family: var(--font-mono); font-size: 12px; font-weight: 800;
  padding: 7px 13px; border-radius: 8px; cursor: pointer;
  border: 2px solid rgba(91, 61, 35, 0.3); background: rgba(255, 244, 219, 0.7); color: var(--ink);
  box-shadow: 0 3px 0 rgba(76, 45, 22, 0.18);
}
.stakes-chip:hover { filter: brightness(1.04); }
.stakes-chip.picked { border-color: #9b2d1f; background: rgba(214, 92, 62, 0.16); box-shadow: 0 3px 0 #6e1f14, 0 0 0 1px #b13a28 inset; }
.stakes-detail { display: flex; flex-direction: column; gap: 2px; margin: 9px 0 0; font-size: 12px; color: #4d3724; }
.stakes-detail b { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: #9b2d1f; }
.stakes-rule::before { content: "▼ "; color: #b0492f; }
.market-knowledge {
  display: flex; flex-direction: column; gap: 3px; margin-top: 2px; padding: 6px 9px;
  border-radius: 6px; background: rgba(45, 110, 70, 0.08); border: 1px dashed rgba(20, 99, 65, 0.35);
}
.market-knowledge b {
  font-family: var(--font-mono); font-size: 9px; font-weight: 900; letter-spacing: 0.06em;
  text-transform: uppercase; color: #146341;
}
.mk-hint { font-size: 11.5px; line-height: 1.35; color: #2c4a37; }
body.night-ui .setup-journal .journal-line b { color: #6fd39a; }
body.night-ui .stakes-chip { border-color: var(--n-line); background: var(--n-chip); color: var(--n-ink); box-shadow: 0 3px 0 rgba(0, 0, 0, 0.4); }
body.night-ui .stakes-chip.picked { border-color: #e0674c; background: rgba(224, 103, 76, 0.16); box-shadow: 0 3px 0 #5a1a10, 0 0 0 1px #e0674c inset; }
body.night-ui .stakes-detail { color: #dcc9a6; }
body.night-ui .stakes-detail b { color: #ff9d8a; }
body.night-ui .market-knowledge { background: rgba(45, 110, 70, 0.14); border-color: rgba(110, 200, 150, 0.3); }
body.night-ui .market-knowledge b { color: #6fd39a; }
body.night-ui .mk-hint { color: #bfe0c8; }

/* the ending's journal block — paper-light in both themes like the rest of the card */
.ending-journal {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 8px;
  background: #f3f8f1; border-left: 3px solid #2f9a62;
}
.ending-journal h3 {
  margin: 0 0 6px; font-family: var(--font-mono); font-size: 10px; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase; color: #2f7d55;
}
.ej-row { display: flex; gap: 10px; align-items: baseline; padding: 2px 0; font-size: 13.5px; line-height: 1.4; color: #2c4a37; }
.ej-tag {
  flex: 0 0 92px; font-family: var(--font-mono); font-size: 10px; font-weight: 900;
  letter-spacing: 0.06em; text-transform: uppercase; color: #5f8a6f;
}
.ej-row.ej-unlock .ej-tag { color: #9b2d1f; }
/* an autopsy card in the hand / the inspector line that says where it came from */
.desk-card.from-journal::before {
  content: ""; position: absolute; inset: 3px; border-radius: 5px; pointer-events: none;
  border: 2px dashed rgba(20, 99, 65, 0.55);
}
.expire-line.unlock-line { color: #146341; }
body.night-ui .expire-line.unlock-line { color: #6fd39a; }

/* Progress file (start screen): save the journal + run to .json, load it back */
.progress-card .code-button { flex: 1 1 0; }
.progress-card .code-button:disabled { opacity: 0.5; cursor: default; transform: none; box-shadow: 0 3px 0 #5e430c; }
.progress-confirm {
  margin-top: 8px; padding: 10px 12px; border-radius: 8px;
  border: 2px dashed rgba(138, 98, 16, 0.55); background: rgba(255, 246, 220, 0.75);
}
.progress-confirm-text { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: #3a2a08; }
.progress-confirm .code-row { align-items: center; }
body.night-ui .progress-confirm { background: var(--n-well); border-color: var(--n-line-strong); }
body.night-ui .progress-confirm-text { color: var(--n-ink-hi); }