/* ============================================================
   小人物升职记 — Riso Paper UI · v3.2
   Phase 3 high-fidelity restoration of comp-4-riso-paper.
   ============================================================ */

/* ---- Design tokens ---- */
:root {
  /* Substrates */
  --paper:        #EFE6D2;
  --paper-soft:   #F4ECD9;
  --paper-deep:   #E5D9BE;
  --desk:         #B7C2A8;
  --desk-shadow:  rgba(38, 32, 22, 0.18);

  /* Inks (riso-style limited palette) */
  --ink-fig:      #5C3A2E;   /* primary type, hairlines */
  --ink-dark:     #2D1F18;   /* rare, for max contrast headings */
  --ink-ochre:    #C68B3F;   /* secondary accent, stamps */
  --ink-celadon:  #7B8C73;   /* tertiary accent */
  --ink-red:      #B7322A;   /* reserved: termination + cash zero */
  --ink-pencil:   #6E6A62;   /* margin notes, dim labels */
  --ink-fig-50:   rgba(92, 58, 46, 0.50);
  --ink-fig-20:   rgba(92, 58, 46, 0.20);
  --ink-fig-10:   rgba(92, 58, 46, 0.10);

  /* Stat colors (each one a different riso ink, not bar-fills) */
  --stat-capital:   var(--ink-fig);
  --stat-cash:      var(--ink-ochre);
  --stat-health:    var(--ink-celadon);
  --stat-relations: #8E5A3C;

  /* Type stacks */
  --type-stamp: 'Special Elite', 'Courier Prime', 'Courier New',
                'STKaiti', 'Kaiti SC', monospace;
  --type-body:  'Noto Serif SC', 'Source Han Serif SC',
                'Songti SC', Georgia, serif;

  /* Numerals */
  --type-num:   'Special Elite', 'Courier New', monospace;
}

/* ---- Reset / base ---- */
* { box-sizing: border-box; }
*::selection { background: var(--ink-ochre); color: var(--paper); }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background-color: var(--desk);
  background-image: url('../images/ui-desk-celadon.png');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  color: var(--ink-fig);
  font-family: var(--type-body);
  font-size: 16px;
  line-height: 1.7;
  padding: 24px 16px 64px;
  display: flex;
  justify-content: center;
}

/* ---- The sheet (the page itself) ---- */
.sheet {
  position: relative;
  width: 100%;
  max-width: 880px;
  background-color: var(--paper);
  background-image: url('../images/ui-paper-sheet.png');
  background-size: cover;
  background-position: center;
  /* Right-angled per Riso rule. NO border-radius. */
  border: 1px solid var(--ink-fig-20);
  padding: 28px 28px 56px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 18px 38px var(--desk-shadow),
    0 2px 6px rgba(0,0,0,0.10);
  /* Subtle hand-placed tilt — only on wider viewports */
  transform: rotate(0deg);
}
@media (min-width: 1025px) {
  .sheet { transform: rotate(-0.35deg); }
}

/* Decorative stains/stamps on the sheet (purely visual) */
.sheet-stain {
  position: absolute;
  top: 380px;
  right: -26px;
  width: 200px;
  opacity: 0.22;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
  transform: rotate(8deg);
}
.sheet-archive {
  position: absolute;
  top: 14px;
  right: 18px;
  width: 96px;
  opacity: 0.78;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
  transform: rotate(6deg);
}
@media (max-width: 640px) {
  .sheet-archive { width: 64px; top: 10px; right: 10px; }
  .sheet-stain { display: none; }
}

/* ---- Header (chapter mark + tally) ---- */
.sheet-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding-right: 100px; /* clear the archive stamp */
  margin-bottom: 4px;
}
@media (max-width: 640px) {
  .sheet-header { padding-right: 70px; }
}
.header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
/* v6 — header-era styles removed (era moved into narrative body). */
.header-slug {
  font-family: var(--type-stamp);
  font-size: 13px;
  letter-spacing: 0.18em;
  color: var(--ink-fig);
  text-transform: uppercase;
  /* slight stamped unevenness */
  transform: rotate(-0.4deg);
}
.header-tally {
  display: flex;
  gap: 5px;
  align-items: flex-end;
  height: 18px;
}
.header-tally .mark {
  width: 2px;
  height: 16px;
  background: var(--ink-fig-20);
  /* hand-drawn unevenness */
  transform: translateY(0px);
}
.header-tally .mark.lit {
  background: var(--ink-ochre);
  height: 18px;
}
.header-tally .mark:nth-child(2n)  { transform: translateY(1px); }
.header-tally .mark:nth-child(3n)  { transform: translateY(-1px); }
.header-tally .mark:nth-child(5n)  { transform: translateY(0.5px); height: 17px; }
.header-tally .mark-extra {
  margin-left: 6px;
  padding: 1px 6px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-ochre);
  border: 1px solid var(--ink-ochre);
  border-radius: 2px;
  align-self: center;
}

/* ---- Hairlines ---- */
.hairline {
  border: 0;
  border-top: 1px solid var(--ink-fig);
  margin: 12px 0 18px;
  opacity: 0.85;
}
.hairline-soft {
  border-top: 1px dashed var(--ink-fig-50);
  margin: 14px 0 18px;
}

/* ---- Stats row (4-up, paper-toned cards, segmented bar meters) ---- */
.values-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 640px) {
  .values-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}
.val {
  position: relative;
  background: var(--paper-soft);
  border: 1px solid var(--ink-fig-20);
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  /* Slight per-card hand-rotation for stamped feel */
}
.val:nth-child(1) { transform: rotate(-0.25deg); }
.val:nth-child(2) { transform: rotate(0.2deg); }
.val:nth-child(3) { transform: rotate(-0.15deg); }
.val:nth-child(4) { transform: rotate(0.3deg); }

.val-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.val-label-left {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: var(--type-stamp);
  font-size: 12px;
  letter-spacing: 0.10em;
  color: var(--ink-pencil);
  text-transform: uppercase;
  min-width: 0;
  flex: 0 1 auto;
}
.val-label-left .ico {
  width: 14px; height: 14px;
  color: var(--ink-fig);
  flex-shrink: 0;
  display: inline-flex;
}
.val-label-left .ico svg { width: 100%; height: 100%; display: block; }
.val-num {
  font-family: var(--type-num);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-fig);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.val-num.is-zero { color: var(--ink-red); }

/* Segmented bar — 12 ticks like a hand-stamped meter, NOT a smooth gradient */
.bar {
  display: flex;
  gap: 2px;
  margin-top: 4px;
}
.bar .tick {
  flex: 1;
  height: 8px;
  background: var(--ink-fig-10);
  border: 0;
}
.bar .tick.on { background: var(--stat-capital); }
.val[data-key="cash"]      .bar .tick.on { background: var(--stat-cash); }
.val[data-key="health"]    .bar .tick.on { background: var(--stat-health); }
.val[data-key="relations"] .bar .tick.on { background: var(--stat-relations); }

/* ---- Tags row ---- */
.tags-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
  margin-bottom: 4px;
  min-height: 22px;
}
.tag {
  font-family: var(--type-stamp);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-fig);
  background: transparent;
  border: 1px solid var(--ink-fig);
  padding: 2px 8px 3px;
  text-transform: lowercase;
  /* Stamped unevenness */
  transform: rotate(-0.6deg);
  box-shadow: 1px 1px 0 var(--ink-fig-10);
}
.tag:nth-child(2n)  { transform: rotate(0.6deg); border-color: var(--ink-ochre); color: var(--ink-ochre); }
.tag:nth-child(3n)  { transform: rotate(-0.3deg); border-color: var(--ink-celadon); color: var(--ink-celadon); }
.tag:nth-child(4n)  { transform: rotate(0.4deg); }
.tag-empty {
  border-color: transparent !important;
  color: var(--ink-pencil) !important;
  font-style: italic;
  transform: none !important;
  box-shadow: none;
  font-family: var(--type-body);
  letter-spacing: 0;
}

/* ---- Node header (last-flavor block) ---- */
.node-header { margin-bottom: 14px; }
.node-header::after { content: ""; display: block; clear: both; }
.node-counter {
  display: none; /* hidden — chapter mark lives in .header-slug now */
}
.node-title {
  font-family: var(--type-stamp);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--ink-fig);
  margin: 0 0 14px;
  line-height: 1.3;
  /* tiny stamp unevenness on the title */
  transform: rotate(-0.25deg);
}
.last-flavor {
  border-left: 2px solid var(--ink-ochre);
  padding: 4px 0 4px 14px;
  margin: 6px 0 18px;
  background: linear-gradient(
    to right,
    rgba(198, 139, 63, 0.06),
    transparent 40%
  );
}
.last-flavor-label {
  font-family: var(--type-stamp);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-pencil);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.last-flavor-text {
  font-family: var(--type-body);
  font-size: 15.5px;
  color: var(--ink-fig);
  line-height: 1.75;
  /* hand-underline on the first sentence visual: skip — too noisy */
}
.last-flavor-roll {
  font-family: var(--type-stamp);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-pencil);
  margin-top: 4px;
}
.last-flavor-roll.roll-win  { color: var(--ink-ochre); }
.last-flavor-roll.roll-lose { color: var(--ink-red); }

/* v6 — narrative era hooks: prefix=resolution, suffix=rumour, opener at node 1.
   Italic + lighter ink to read as "background mood" not "main beat". */
.flavor-resolution {
  font-family: var(--type-body);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-pencil);
  margin-bottom: 6px;
}
.flavor-rumour {
  font-family: var(--type-body);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-pencil);
  margin-top: 6px;
  padding-left: 8px;
  border-left: 1px dashed var(--ink-pencil);
}
.node-opener {
  font-family: var(--type-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-pencil);
  margin: 0 0 12px;
  transform: rotate(-0.2deg);
}

/* ---- Options (carbon-paper form rows) ---- */
.options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.opt-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink-fig-50);
  padding: 12px 8px 12px 8px;
  text-align: left;
  cursor: pointer;
  font-family: var(--type-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-fig);
  width: 100%;
  min-height: 48px; /* >= 44px touch target */
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease;
}
.opt-btn:hover,
.opt-btn:focus-visible {
  outline: none;
  background-color: rgba(198, 139, 63, 0.10);
  border-bottom-color: var(--ink-fig);
}
.opt-btn:active {
  background-color: rgba(198, 139, 63, 0.18);
}
.opt-btn:focus-visible {
  outline: 1.5px solid var(--ink-ochre);
  outline-offset: 2px;
}
.opt-checkbox {
  width: 18px; height: 18px;
  flex-shrink: 0;
  color: var(--ink-fig);
}
.opt-btn:hover .opt-checkbox-idle,
.opt-btn:focus-visible .opt-checkbox-idle {
  display: none;
}
.opt-checkbox-on { display: none; }
.opt-btn:hover .opt-checkbox-on,
.opt-btn:focus-visible .opt-checkbox-on {
  display: inline-block;
  color: var(--ink-ochre);
}
.opt-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--type-stamp);
  font-size: 13px;
  font-weight: 700;
  width: 22px; height: 22px;
  border: 1.5px solid var(--ink-fig);
  color: var(--ink-fig);
  background: var(--paper-soft);
  flex-shrink: 0;
  transform: rotate(-2deg);
  letter-spacing: 0;
}
.opt-btn:nth-child(2n) .opt-letter { transform: rotate(1.5deg); }
.opt-btn:nth-child(3n) .opt-letter { transform: rotate(-1deg); }
.opt-btn:hover .opt-letter,
.opt-btn:focus-visible .opt-letter {
  background: var(--ink-ochre);
  color: var(--paper);
  border-color: var(--ink-ochre);
}
.opt-title { flex: 1; }
.opt-title > span:last-child { display: block; }

.no-options {
  font-family: var(--type-body);
  font-size: 14px;
  color: var(--ink-red);
  padding: 12px 0;
  border: 1px dashed var(--ink-red);
  padding: 12px 14px;
  background: rgba(183, 50, 42, 0.06);
}

/* ---- Start gate (overlay shown on first node only) ---- */
.start-gate {
  position: fixed;
  inset: 0;
  background-color: rgba(183, 194, 168, 0.94);
  background-image: url('../images/ui-desk-celadon.png');
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 80;
  padding: 20px;
}
.start-gate-card {
  position: relative;
  width: 100%;
  max-width: 620px;
  background-color: var(--paper);
  background-image: url('../images/ui-paper-sheet.png');
  background-size: cover;
  border: 1px solid var(--ink-fig-20);
  padding: 44px 36px 40px;
  box-shadow:
    0 1px 0 rgba(0,0,0,0.04),
    0 24px 50px var(--desk-shadow),
    0 4px 10px rgba(0,0,0,0.12);
  transform: rotate(-0.6deg);
}
.start-gate-archive {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 80px;
  opacity: 0.78;
  mix-blend-mode: multiply;
  transform: rotate(6deg);
  pointer-events: none;
}
.start-gate-title {
  font-family: var(--type-stamp);
  font-size: clamp(36px, 7.4vw, 60px);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ink-fig);
  margin: 0 0 10px;
  line-height: 1.15;
  /* slight letterpress unevenness via individual character spacing */
  transform: rotate(-0.4deg);
}
.start-gate-rule-double {
  border-top: 1px solid var(--ink-fig);
  border-bottom: 1px solid var(--ink-fig);
  height: 4px;
  margin: 6px 0 14px;
}
.start-gate-sub {
  font-family: var(--type-body);
  font-size: 16px;
  color: var(--ink-fig);
  margin: 0 0 26px;
  line-height: 1.7;
}
.start-gate-sub .pencil-underline {
  text-decoration: underline;
  text-decoration-color: var(--ink-celadon);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
.start-gate-meta {
  font-family: var(--type-stamp);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-pencil);
  text-transform: uppercase;
  margin-bottom: 24px;
}
/* v6 — start-gate-era* styles removed (no era teaser on start screen). */
.start-gate-cta {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: transparent;
  border: 2px solid var(--ink-fig);
  padding: 14px 26px;
  font-family: var(--type-stamp);
  font-size: 18px;
  letter-spacing: 0.30em;
  color: var(--ink-fig);
  min-height: 48px;
  transform: rotate(-0.7deg);
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.start-gate-cta:hover,
.start-gate-cta:focus-visible {
  outline: none;
  background: var(--ink-fig);
  color: var(--paper);
  transform: rotate(-0.7deg) translateY(-1px);
}
.start-gate-cta:active { transform: rotate(-0.7deg) translateY(1px); }
.start-gate-cta-hint {
  display: block;
  margin-top: 10px;
  font-family: var(--type-body);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-pencil);
}

/* ---- Ending screen ---- */
.ending {
  margin-top: 8px;
  position: relative;
}
.ending.hidden { display: none; }

/* The big stamped job-title — the headline reaction */
.ending-job-title {
  font-family: var(--type-stamp);
  font-size: clamp(40px, 8vw, 64px);
  font-weight: 400;
  letter-spacing: 0.10em;
  line-height: 1.15;
  color: var(--ink-fig);
  margin: 4px 0 4px;
  /* slight stamped unevenness */
  transform: rotate(-0.4deg);
  word-break: break-all;
}
.ending-path-name {
  font-family: var(--type-stamp);
  font-size: 13px;
  letter-spacing: 0.20em;
  color: var(--ink-pencil);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.ending--early .ending-job-title { color: var(--ink-fig); opacity: 0.78; }
.ending--early .ending-path-name { color: var(--ink-red); }

/* TERMINATED stamp shows ONLY on early endings */
.ending-terminated-stamp {
  position: absolute;
  top: -14px;
  right: -8px;
  width: 180px;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: multiply;
  transform: rotate(8deg);
  opacity: 0.92;
}
@media (max-width: 640px) {
  .ending-terminated-stamp { width: 130px; top: -8px; right: -4px; }
}

.ending-section {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed var(--ink-fig-50);
}
.ending-section-label {
  font-family: var(--type-stamp);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-pencil);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.ending-last { color: var(--ink-fig); font-size: 16px; line-height: 1.75; }

.ending-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .ending-values { grid-template-columns: repeat(2, 1fr); }
}
.ending-value {
  background: var(--paper-soft);
  border: 1px solid var(--ink-fig-20);
  padding: 10px 12px 12px;
  text-align: left;
  transform: rotate(-0.3deg);
}
.ending-value:nth-child(2n) { transform: rotate(0.4deg); }
.ending-value:nth-child(3n) { transform: rotate(-0.15deg); }
.ending-value-label {
  font-family: var(--type-stamp);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--ink-pencil);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ending-value-num {
  font-family: var(--type-num);
  font-size: 28px;
  font-weight: 700;
  color: var(--ink-fig);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.ending-value-num.is-zero { color: var(--ink-red); }
/* On early endings dim the non-key values */
.ending--early .ending-value-num:not(.is-zero) {
  color: var(--ink-pencil);
  text-decoration: line-through;
  text-decoration-color: var(--ink-pencil);
  text-decoration-thickness: 1px;
}

.ending-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 8px;
}

.ending-history {
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: var(--type-num);
  font-size: 14px;
  color: var(--ink-fig);
  line-height: 1.7;
}
.ending-history li {
  border-bottom: 1px dotted var(--ink-fig-20);
  padding: 4px 0;
  letter-spacing: 0.02em;
}
.ending-history li::before {
  content: "→ ";
  color: var(--ink-ochre);
  font-weight: 700;
}
.ending-history .dice-mark {
  display: inline-flex;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  color: var(--ink-red);
  margin-right: 2px;
}
.ending-history .dice-mark svg { width: 100%; height: 100%; }
.ending-history-era {
  display: inline;
  margin-left: 2px;
  font-size: 12px;
  color: var(--ink-pencil);
  letter-spacing: 0.01em;
  font-style: italic;
  word-break: break-word;
}
@media (max-width: 420px) {
  .ending-history-era { font-size: 11px; }
}
.ending-era-timeline {
  font-family: Georgia, "Times New Roman", "Songti SC", serif;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-pencil);
  margin: 8px 0 16px;
  transform: rotate(-0.3deg);
  font-style: italic;
}

.restart-btn {
  margin-top: 26px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 2px solid var(--ink-ochre);
  padding: 12px 22px;
  font-family: var(--type-stamp);
  font-size: 16px;
  letter-spacing: 0.30em;
  color: var(--ink-ochre);
  min-height: 48px;
  transform: rotate(-0.6deg);
  transition: background 140ms ease, color 140ms ease;
}
.restart-btn:hover,
.restart-btn:focus-visible {
  outline: none;
  background: var(--ink-ochre);
  color: var(--paper);
}
.restart-btn:focus-visible { outline: 1.5px solid var(--ink-fig); outline-offset: 3px; }

/* Share card button — sibling to restart, uses different ink color */
.share-btn {
  margin-top: 26px;
  margin-right: 14px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  border: 2px solid var(--ink-fig);
  padding: 12px 22px;
  font-family: var(--type-stamp);
  font-size: 16px;
  letter-spacing: 0.30em;
  color: var(--ink-fig);
  min-height: 48px;
  transform: rotate(0.4deg);
  transition: background 140ms ease, color 140ms ease;
}
.share-btn:hover,
.share-btn:focus-visible {
  outline: none;
  background: var(--ink-fig);
  color: var(--paper);
}
.share-btn:focus-visible { outline: 1.5px solid var(--ink-ochre); outline-offset: 3px; }
.share-btn:disabled { opacity: 0.55; cursor: progress; }

/* ---- Responsive breakpoints ---- */
@media (max-width: 1024px) {
  body { padding: 16px 12px 48px; }
  .sheet { padding: 22px 22px 48px; }
}
@media (max-width: 640px) {
  body { padding: 10px 8px 32px; font-size: 15.5px; }
  .sheet { padding: 18px 16px 36px; }
  .node-title { font-size: 19px; }
  .last-flavor-text { font-size: 15px; }
  .opt-btn { font-size: 15.5px; padding: 12px 4px; }
  .opt-letter { width: 20px; height: 20px; font-size: 12px; }
  .ending-section { margin-top: 18px; padding-top: 12px; }
  .header-slug { font-size: 11.5px; }
  .header-tally .mark { width: 1.5px; height: 14px; }
  .header-tally .mark.lit { height: 16px; }
  .start-gate-card { padding: 32px 22px 30px; }
  .start-gate-cta { font-size: 15px; padding: 12px 18px; letter-spacing: 0.22em; }
  .val { padding: 6px 8px 8px; }
  .val-label-left { font-size: 11px; letter-spacing: 0.06em; gap: 4px; }
  .val-label-left .ico { width: 12px; height: 12px; }
  .val-num { font-size: 16px; }
  .last-flavor { padding-left: 10px; }
  .last-flavor-text { word-break: break-word; }
}
@media (max-width: 380px) {
  .val-label-left { font-size: 10.5px; }
  .val-num { font-size: 15px; }
  .header-slug { font-size: 10.5px; }
  .header-tally { gap: 3px; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .opt-btn, .start-gate-cta, .restart-btn { transition: none; }
}

/* ---- Print fallback (you never know) ---- */
@media print {
  body { background: white; padding: 0; }
  .sheet { box-shadow: none; border: 0; transform: none; }
  .sheet-stain, .sheet-archive { display: none; }
  .start-gate { display: none !important; }
}

/* =====================================================================
   v7 — Node + Ending illustrations
   - Riso paper-stamp aesthetic: hairline frame, paper-soft backing,
     subtle rotation, slow fade-in.
   - Failures hide silently (.is-failed sets display:none on the <img>).
   ===================================================================== */

/* Node illustration: "stamp" pinned to the upper right of the node block.
   On wide screens it floats next to .node-title; on mobile it collapses
   into a banner above the title. */
.node-illustration {
  display: block;
  float: right;
  width: 220px;
  height: 220px;
  margin: 0 0 12px 18px;
  background: var(--paper-soft);
  border: 1px solid var(--ink-fig-20);
  box-shadow: 0 1px 0 rgba(92, 58, 46, 0.05),
              0 6px 14px rgba(92, 58, 46, 0.06);
  object-fit: cover;
  /* tiny stamp unevenness, mirrors .node-title rotation */
  transform: rotate(0.25deg);
  /* fade-in choreography */
  opacity: 0;
  transition: opacity 280ms ease-out, transform 280ms ease-out;
  /* image-rendering keeps Riso edges crisp on retina */
  image-rendering: -webkit-optimize-contrast;
}
.node-illustration.is-loading {
  /* paper-grain placeholder while streaming */
  background-color: var(--paper-soft);
  background-image:
    radial-gradient(rgba(92, 58, 46, 0.06) 1px, transparent 1px),
    radial-gradient(rgba(92, 58, 46, 0.04) 1px, transparent 1px);
  background-size: 6px 6px, 11px 11px;
  background-position: 0 0, 3px 3px;
  opacity: 0.6;
}
.node-illustration.is-loaded {
  opacity: 1;
}
.node-illustration.is-failed {
  display: none;
}

@media (max-width: 1024px) {
  .node-illustration {
    width: 160px;
    height: 160px;
    margin: 0 0 10px 14px;
  }
}
@media (max-width: 640px) {
  /* Mobile: become a top banner (full width, short) above the title.
     Float would force wrap-around with the text; switch to block. */
  .node-illustration {
    float: none;
    display: block;
    width: 100%;
    height: 120px;
    margin: 0 0 10px;
    transform: rotate(0deg);
  }
}
@media (max-width: 380px) {
  .node-illustration { height: 96px; }
}

/* Ending cover hero — full-width band above the job title */
.ending-cover {
  display: block;
  width: 100%;
  max-width: 1000px;
  aspect-ratio: 1000 / 600;
  margin: 0 auto 18px;
  object-fit: cover;
  background: var(--paper-soft);
  border: 1px solid var(--ink-fig-20);
  box-shadow: 0 1px 0 rgba(92, 58, 46, 0.05),
              0 8px 22px rgba(92, 58, 46, 0.08);
  opacity: 0;
  transition: opacity 320ms ease-out;
  image-rendering: -webkit-optimize-contrast;
}
.ending-cover.is-loading {
  background-color: var(--paper-soft);
  background-image:
    radial-gradient(rgba(92, 58, 46, 0.05) 1px, transparent 1px);
  background-size: 8px 8px;
  opacity: 0.55;
}
.ending-cover.is-loaded { opacity: 1; }
.ending-cover.is-failed { display: none; }

@media (max-width: 640px) {
  .ending-cover {
    aspect-ratio: 3 / 2;
    margin-bottom: 14px;
  }
}

/* Reduced motion — no fade, just appear */
@media (prefers-reduced-motion: reduce) {
  .node-illustration, .ending-cover {
    transition: none;
  }
}

/* v8 — AI ending section ornaments */
.ending-ai-section { position: relative; }
.ending-ai-title {
  font-family: var(--type-stamp, Georgia, serif);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink-dark, #2a2620);
  letter-spacing: 0.04em;
  margin: 4px 0 10px;
  min-height: 0;
}
.ending-ai-title:empty { display: none; }
.ending-ai-body { white-space: pre-wrap; }
.ending-ai-status {
  margin-top: 10px;
  font-family: var(--type-stamp);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-pencil, #8a847a);
  text-transform: uppercase;
}
.ending-ai-status.is-warn { color: var(--ink-red, #b03a2e); letter-spacing: 0.08em; text-transform: none; }
.ending-ai-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.ending-ai-action {
  font-family: var(--type-stamp);
  font-size: 11px;
  letter-spacing: 0.16em;
  padding: 6px 10px;
  background: transparent;
  border: 1px dashed var(--ink-fig-50, #b9b1a4);
  color: var(--ink-fig, #5a544a);
  cursor: pointer;
  text-transform: uppercase;
}
.ending-ai-action:hover:not(:disabled) {
  background: var(--paper-soft, #f4eee2);
  color: var(--ink-dark, #2a2620);
}
.ending-ai-action:disabled { opacity: 0.45; cursor: not-allowed; }
.ending-ai-action.ending-ai-settings { letter-spacing: 0; padding: 6px 9px; font-size: 14px; }


/* ----- v8 Step C — AI choices status + skeleton + footer ----- */
.opt-status {
  font-size: 12.5px;
  letter-spacing: 0.08em;
  margin: 4px 0 10px;
  padding: 6px 10px;
  border: 1px dashed currentColor;
  border-radius: 2px;
  display: inline-block;
}
.opt-status-loading { color: var(--ink-soft, #777); animation: opt-pulse 1.4s ease-in-out infinite; }
.opt-status-warn    { color: var(--ink-red, #b03a2e); border-style: solid; }
.opt-status-cache   { color: var(--ink-soft, #777); border-style: dotted; opacity: 0.85; }
.opt-status-ai      { color: var(--ink-fig, #2a2620); border-style: solid; }
@keyframes opt-pulse { 0%,100% { opacity: 0.45; } 50% { opacity: 1; } }
.opt-btn-skeleton {
  pointer-events: none;
  opacity: 0.7;
  background: repeating-linear-gradient(
    45deg, transparent 0 8px, rgba(120,110,90,0.06) 8px 16px);
  position: relative;
}
.opt-title-skeleton {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--ink-soft, #888);
}
.opt-skel-arch {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-fig, #4a4338);
  opacity: 0.7;
}
.opt-skel-tone {
  font-size: 11px;
  color: var(--ink-soft, #999);
  letter-spacing: 0.04em;
}
.opt-skel-spinner {
  position: absolute;
  right: 36px;
  top: 50%;
  width: 12px; height: 12px;
  margin-top: -6px;
  border: 2px solid rgba(0,0,0,0.12);
  border-top-color: rgba(0,0,0,0.45);
  border-radius: 50%;
  animation: opt-skel-spin 0.9s linear infinite;
}
@keyframes opt-skel-spin { to { transform: rotate(360deg); } }
.opt-skel-pill {
  position: absolute;
  right: 8px;
  top: 6px;
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
  color: var(--ink-soft, #888);
  opacity: 0.65;
}
.opt-pill {
  position: absolute;
  right: 8px;
  top: 6px;
  font-size: 9px;
  letter-spacing: 0.08em;
  padding: 1px 5px;
  border-radius: 8px;
  background: rgba(0,0,0,0.04);
  color: var(--ink-soft, #888);
  opacity: 0.55;
  pointer-events: none;
}
.opt-pill-ai    { color: var(--ink-fig, #4a4338); background: rgba(0,0,0,0.05); }
.opt-pill-cache { color: var(--ink-soft, #888); border: 1px dotted rgba(0,0,0,0.2); background: transparent; }
.opt-btn-fadein {
  animation: opt-fadein 360ms ease-out both;
}
@keyframes opt-fadein {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes opt-shimmer { 0% { background-position: 0 0; } 100% { background-position: -200% 0; } }
.opt-btn-ai .opt-letter::after {
  content: '·AI';
  font-size: 9px;
  margin-left: 3px;
  opacity: 0.5;
  letter-spacing: 0;
  vertical-align: super;
}
.ending-ai-footer {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px dashed rgba(0,0,0,0.18);
  font-size: 12px;
  letter-spacing: 0.05em;
  color: var(--ink-soft, #888);
  text-align: center;
}

/* ---- Interlude (v8.3 — between-node "what just happened" page) ---- */
.interlude {
  margin: 18px 0 12px;
  padding: 22px 22px 26px;
  background: var(--paper-soft);
  border: 1px solid var(--ink-fig-20);
  border-left: 3px solid var(--ink-ochre);
  position: relative;
  animation: interlude-in 280ms ease-out both;
}
@keyframes interlude-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.interlude-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--type-stamp);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--ink-pencil);
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px dashed var(--ink-fig-20);
}
.interlude-label-prefix { color: var(--ink-pencil); }
.interlude-label-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1.5px solid var(--ink-ochre);
  color: var(--ink-ochre);
  font-family: var(--type-stamp);
  font-size: 12px;
  letter-spacing: 0;
  transform: rotate(-1deg);
}
.interlude-label-title {
  font-family: var(--type-body);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-fig);
  text-transform: none;
}
.interlude-body {
  margin: 4px 0 18px;
}
.interlude-prefix {
  font-family: var(--type-body);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink-celadon);
  margin-bottom: 6px;
}
.interlude-flavor {
  font-family: var(--type-body);
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-fig);
}
.interlude-suffix {
  font-family: var(--type-body);
  font-style: italic;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-pencil);
  margin-top: 6px;
}
.interlude-roll {
  font-family: var(--type-stamp);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ink-pencil);
  margin-top: 10px;
}
.interlude-roll.roll-win  { color: var(--ink-ochre); }
.interlude-roll.roll-lose { color: var(--ink-red); }

.interlude-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
}
.interlude-cta {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background: transparent;
  border: 2px solid var(--ink-fig);
  padding: 10px 22px;
  font-family: var(--type-stamp);
  font-size: 14px;
  letter-spacing: 0.28em;
  color: var(--ink-fig);
  min-height: 42px;
  transform: rotate(-0.5deg);
  transition: background 140ms ease, color 140ms ease, transform 140ms ease;
}
.interlude-cta:hover,
.interlude-cta:focus-visible {
  outline: none;
  background: var(--ink-fig);
  color: var(--paper);
  transform: rotate(-0.5deg) translateY(-1px);
}
.interlude-cta:active { transform: rotate(-0.5deg) translateY(1px); }
.interlude-cta:focus-visible { outline: 1.5px solid var(--ink-fig); outline-offset: 3px; }
.interlude-cta.is-waiting { border-style: dashed; }
.interlude-cta-hint {
  font-family: var(--type-body);
  font-style: italic;
  font-size: 12px;
  color: var(--ink-pencil);
}
.interlude-pending {
  font-family: var(--type-stamp);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-pencil);
  text-transform: uppercase;
  margin-left: auto;
  animation: opt-pulse 1.6s ease-in-out infinite;
}
@media (max-width: 640px) {
  .interlude { padding: 16px 14px 20px; }
  .interlude-flavor { font-size: 15px; }
  .interlude-cta { padding: 10px 16px; letter-spacing: 0.22em; font-size: 13px; }
  .interlude-cta-row { flex-wrap: wrap; }
  .interlude-pending { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .interlude { animation: none; }
  .interlude-cta { transition: none; }
}