:root {
  --panel: #1c1a2e;
  --edge: #463e52;
  --ink: #f7efdf;
  --dim: #bdb3a6;
  --accent: #f8de88;
  --warn: #f4ae66;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #1c1a2e;
  color: var(--ink);
  font: 13px/1.3 Consolas, "Courier New", monospace;
}

#app, #app canvas { position: fixed; inset: 0; display: block; width: 100%; height: 100%; }
#app canvas { image-rendering: pixelated; touch-action: none; cursor: grab; }
#app canvas:active { cursor: grabbing; }

#hud {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 6px 10px;
  background: var(--panel);
  border-bottom: 1px solid var(--edge);
  font-variant-numeric: tabular-nums;
  user-select: none;
}
#hud .row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
#hud .brand { font-weight: 700; letter-spacing: 0.04em; color: var(--accent); }
#hud .stat { color: var(--dim); white-space: nowrap; }
#hud .stat b { color: var(--ink); font-weight: 600; }
#hud .stat b.low { color: var(--warn); }
#hud .spacer { flex: 1; }
#hud .controls { display: flex; align-items: center; gap: 4px; }
#hud .seed { color: var(--dim); margin-left: 6px; }
#hud .daylen { display: inline-flex; align-items: center; gap: 5px; margin: 0 6px; padding: 1px 4px 1px 8px; color: var(--accent); font-weight: 600; white-space: nowrap; border: 1px solid var(--edge); border-radius: 3px; background: transparent; }
#hud .daylen select { font: inherit; font-weight: 400; color: var(--ink); background: #1c1a2e; border: 1px solid var(--edge); border-radius: 3px; padding: 1px 2px; cursor: pointer; }

button {
  font: inherit;
  color: var(--ink);
  background: #1c1a2e;
  border: 1px solid var(--edge);
  border-radius: 3px;
  padding: 2px 8px;
  cursor: pointer;
}
button:hover { background: #2e2838; }
button.on { background: #463e52; border-color: var(--accent); }
button:disabled { opacity: 0.45; cursor: default; }

#ticker {
  position: fixed; left: 10px; bottom: 10px; max-width: 460px;
  pointer-events: auto; cursor: pointer;
  font-size: 12px;
}
#ticker div {
  margin-top: 3px; padding: 3px 7px;
  background: #1c1a2e;
  border-left: 3px solid var(--edge);
  border-radius: 2px;
}
#ticker div.good { border-left-color: #e9b232; }
#ticker div.bad { border-left-color: var(--warn); }

#label {
  position: fixed; display: none; pointer-events: none;
  padding: 3px 7px;
  background: #1c1a2e;
  border: 1px solid var(--edge);
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
}

.panel {
  position: fixed; top: 44px; left: 10px; width: 300px; max-height: calc(100vh - 64px - var(--ticker-h, 90px)); overflow-y: auto;
  padding: 8px 10px 10px;
  background: var(--panel);
  border: 1px solid var(--edge);
  border-radius: 4px;
}
.panel h2 { margin: 0 0 4px; font-size: 14px; color: var(--accent); }
.panel h3 { margin: 10px 0 4px; font-size: 12px; color: var(--accent); font-weight: 600; }
.panel .sub { color: var(--dim); font-size: 12px; margin-top: 2px; }
.panel .now { margin: 6px 0 4px; }
.panel .orns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.panel .orn { font-size: 11px; padding: 1px 6px; border-radius: 8px; border: 1px solid var(--c); color: var(--ink); background: transparent; }
.panel .hist { margin: 4px 0 0; padding-left: 18px; font-size: 12px; }
.panel .hist li { margin: 2px 0; }
.panel .hist small, .panel .list small { color: var(--dim); }
.panel .btns { display: flex; gap: 6px; margin-top: 8px; }
.panel .list { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.panel .list li { padding: 3px 4px; border-top: 1px solid #463e52; }
.panel .list li[data-id] { cursor: pointer; }
.panel .list li[data-id]:hover { background: #2e2838; }
.panel .list li small { display: block; }
.panel .list li.plain small { display: inline; }
.panel .list li.fallen b { color: var(--dim); font-weight: 600; }
.panel .dots i, .panel .sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--c); margin-right: 2px; }
.panel .sw { border-radius: 1px; margin-right: 6px; }
.panel b.warn { color: var(--warn); }

#caption {
  position: fixed; top: 46px; left: 50%; transform: translateX(-50%); max-width: 70vw;
  padding: 4px 12px;
  background: #1c1a2e;
  border: 1px solid var(--edge);
  border-radius: 3px;
  pointer-events: none;
  text-align: center;
}

body.film #hud, body.film #ticker, body.film #label, body.film .panel, body.film #caption { display: none !important; }

@media (max-width: 760px) {
  #hud { font-size: 11px; padding: 4px 6px; }
  #hud .row { gap: 2px 9px; }
  #hud .controls { flex-wrap: wrap; }
  #hud button { white-space: nowrap; padding: 2px 6px; }
  #ticker { display: none; }
  .panel { width: auto; right: 6px; top: auto; bottom: 10px; max-height: 50vh; }
  #caption { top: auto; bottom: 10px; max-width: 90vw; }
}
/* warrior ranks beside a name (Veteran: steel, Champion: the cape's deep red) */
.panel .rank { font-size: 10px; font-weight: 600; padding: 0 5px; border-radius: 7px; vertical-align: 1px; border: 1px solid #979ab0; color: #e4d8c4; }
.panel .rank.champion { border-color: #d8664c; color: #f4ae66; background: rgba(108, 42, 40, 0.5); }
/* the ledger: small charts in the palette, one under another */
#ledger { width: 340px; }
#ledger h2 small { color: var(--dim); font-weight: 400; font-size: 11px; }
#ledger .chart { margin-top: 6px; }
#ledger .chart h3 { margin: 6px 0 2px; }
#ledger .chart h3 small { color: var(--dim); font-weight: 400; }
#ledger svg { display: block; width: 100%; height: auto; }
#ledger svg text { font: 9px Consolas, monospace; fill: #bdb3a6; }
#ledger .lgd { display: flex; flex-wrap: wrap; gap: 1px 10px; font-size: 11px; color: var(--dim); }
#ledger .lgd i { display: inline-block; width: 8px; height: 8px; border-radius: 1px; margin-right: 3px; }
#ledger .lgd b { color: var(--ink); font-weight: 600; }
#ledger .empty { color: var(--dim); font-size: 12px; }
@media (max-width: 760px) { #ledger { width: auto; left: 6px; } }
.panel a.who { color: var(--ink); text-decoration: underline dotted; cursor: pointer; }
.panel .heart { color: #d8664c; }
/* the bandage mark beside a wounded dwarf: a strip of linen with a red stain (palette light2, red1) */
.panel .band { display: inline-block; width: 10px; height: 5px; margin: 0 2px 1px; vertical-align: middle; background: #f7efdf; border-radius: 1px; box-shadow: inset -3px 0 0 #a33c30; }
.panel .wound { color: #e4d8c4; }
#hud .stat.wounded b { color: #d8664c; }

/* The victory card: the world stays behind it, dimmed. Palette colours only (dark, wood, gold, light ramps); square
   corners and hard edges, like the pixel art it sits over. */
#victory {
  position: fixed; inset: 0; z-index: 20;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28, 26, 46, 0.62);
}
#victory[hidden] { display: none; }
#victory .vcard {
  width: min(560px, 94vw); max-height: 94vh; overflow-y: auto;
  padding: 14px 18px 16px;
  background: #2e2838;
  border: 3px solid #84562f;
  box-shadow: 0 0 0 2px #1c1a2e, inset 0 0 0 2px #463e52, 6px 6px 0 2px #1c1a2e;
  color: #f7efdf;
  text-align: center;
}
#victory h2 { margin: 0; font-size: 20px; letter-spacing: 0.04em; color: #e9b232; }
#victory h3 { margin: 12px 0 6px; font-size: 13px; color: #e9b232; font-weight: 600; }
#victory .vsub { margin-top: 2px; font-size: 12px; color: #bdb3a6; }
#victory .mugs { display: flex; justify-content: center; margin: 8px 0 6px; }
#victory .mugs canvas, #victory .face canvas { image-rendering: pixelated; display: block; }
#victory .record { margin: 0 auto; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
#victory .record th { padding: 1px 14px 1px 0; text-align: left; font-weight: 400; color: #bdb3a6; }
#victory .record td { padding: 1px 0; text-align: right; color: #f7efdf; font-weight: 600; }
#victory .six { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; text-align: left; }
#victory .six li { display: flex; align-items: center; gap: 8px; padding: 3px; background: #1c1a2e; border: 1px solid #463e52; }
#victory .face canvas { width: 60px; height: 60px; border: 1px solid #5a3820; }
#victory .who b { display: block; font-size: 13px; font-weight: 600; }
#victory .who i { font-style: normal; color: #f8de88; }
#victory .who .pair { display: block; font-size: 11px; color: #d8664c; }
#victory button {
  margin-top: 14px; padding: 6px 14px;
  font-size: 14px; font-weight: 600; color: #f7efdf;
  background: #84562f; border: 2px solid #b07f4c; border-radius: 0;
  box-shadow: 3px 3px 0 #1c1a2e;
}
#victory button:hover { background: #a87a1a; border-color: #f8de88; }
@media (max-width: 760px) { #victory .six { grid-template-columns: 1fr; } }

/* The Chronicle: a book of past colonies, drawn like the victory card (palette colours, square corners, hard edges). */
#chronicle {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  background: rgba(28, 26, 46, 0.62);
}
#chronicle[hidden] { display: none; }
#chronicle .ccard {
  width: min(600px, 94vw); max-height: 90vh; overflow-y: auto;
  padding: 14px 18px 16px;
  background: #2e2838;
  border: 3px solid #84562f;
  box-shadow: 0 0 0 2px #1c1a2e, inset 0 0 0 2px #463e52, 6px 6px 0 2px #1c1a2e;
  color: #f7efdf;
  font-variant-numeric: tabular-nums;
}
#chronicle h2 { margin: 0; font-size: 20px; letter-spacing: 0.04em; color: #e9b232; }
#chronicle h3 { margin: 12px 0 4px; font-size: 13px; color: #e9b232; font-weight: 600; }
#chronicle .saga { margin: 4px 0 10px; font-size: 13px; color: #e4d8c4; }
#chronicle .empty { margin: 10px 0 2px; color: #bdb3a6; }
#chronicle .vsub { margin-top: 3px; font-size: 12px; color: #bdb3a6; }
#chronicle .sequel { color: #e4d8c4; }
#chronicle a { color: #f8de88; text-decoration: underline dotted; cursor: pointer; }
#chronicle .back { font-size: 12px; }
#chronicle ul { list-style: none; margin: 0; padding: 0; font-size: 12px; }
#chronicle .entries li { display: grid; grid-template-columns: 82px 88px 1fr; align-items: baseline; padding: 4px 6px; margin-top: 3px; background: #1c1a2e; border: 1px solid #463e52; cursor: pointer; }
#chronicle .entries li:hover { border-color: #b07f4c; background: #463e52; }
#chronicle .entries .seed { font-weight: 600; font-size: 13px; }
#chronicle .entries .nums { color: #e4d8c4; }
#chronicle .entries small { grid-column: 1 / -1; color: #bdb3a6; margin-top: 1px; }
#chronicle .badge { display: inline-block; justify-self: start; padding: 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; border: 1px solid; }
#chronicle h2 .badge { vertical-align: 3px; margin-left: 6px; }
#chronicle .badge.victory { color: #1c1a2e; background: #e9b232; border-color: #f8de88; }
#chronicle .badge.collapse { color: #f7efdf; background: #a33c30; border-color: #d8664c; }
#chronicle .badge.abandoned { color: #f7efdf; background: #4e5068; border-color: #979ab0; }
#chronicle .record { margin: 8px 0 0; border-collapse: collapse; font-size: 13px; }
#chronicle .record th { padding: 1px 14px 1px 0; text-align: left; font-weight: 400; color: #bdb3a6; }
#chronicle .record td { padding: 1px 0; text-align: right; font-weight: 600; }
#chronicle .notable li, #chronicle .plain li { padding: 3px 4px; border-top: 1px solid #463e52; }
#chronicle .notable i { font-style: normal; color: #f8de88; }
#chronicle .notable .orns { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 8px; vertical-align: 1px; }
#chronicle .orn { font-size: 11px; padding: 0 5px; border: 1px solid var(--c); background: #1c1a2e; }
#chronicle .sw { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--c); }
#chronicle small { color: #bdb3a6; }
#chronicle button.close {
  display: block; margin: 14px auto 0; padding: 4px 14px;
  font-size: 13px; font-weight: 600; color: #f7efdf;
  background: #84562f; border: 2px solid #b07f4c; border-radius: 0;
  box-shadow: 3px 3px 0 #1c1a2e;
}
#chronicle button.close:hover { background: #a87a1a; border-color: #f8de88; }
body.film #chronicle { display: none !important; }
/* Save and resume (brief P5-UI): the resume question and the set-aside notice, a small card like the victory card;
   "Saved day N" beside the seed, fading out, its width reserved so the controls do not move when it first shows.
   Palette colours only. */
#hud .saved { color: #bdb3a6; font-size: 11px; opacity: 0; transition: opacity 0.8s; white-space: nowrap; display: inline-block; min-width: 6.5em; }
#hud .saved.on { opacity: 1; transition: opacity 0.15s; }
#savebox {
  position: fixed; left: 0; right: 0; top: 34%; z-index: 25;
  display: flex; justify-content: center; pointer-events: none;
}
#savebox[hidden] { display: none; }
#savebox .scard {
  pointer-events: auto;
  width: min(420px, 94vw);
  padding: 12px 16px 14px;
  background: #2e2838;
  border: 3px solid #84562f;
  box-shadow: 0 0 0 2px #1c1a2e, inset 0 0 0 2px #463e52, 6px 6px 0 2px #1c1a2e;
  color: #f7efdf;
  text-align: center;
}
#savebox .q { margin: 0; font-size: 14px; font-weight: 600; color: #e9b232; }
#savebox .vsub { margin-top: 4px; font-size: 12px; color: #bdb3a6; }
#savebox .bad .q { color: #f7efdf; }
#savebox .btns { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
#savebox button {
  padding: 4px 14px;
  font-size: 13px; font-weight: 600; color: #f7efdf;
  background: #84562f; border: 2px solid #b07f4c; border-radius: 0;
  box-shadow: 3px 3px 0 #1c1a2e;
}
#savebox button:hover { background: #a87a1a; border-color: #f8de88; }
#savebox #b-fresh { background: #463e52; border-color: #979ab0; }
#savebox #b-fresh:hover { background: #4e5068; border-color: #f7efdf; }
body.film #savebox { display: none !important; }
/* purses (brief P2d-R): the roster's purse column and the coin on the inspect panel */
.panel .list li .purse { float: right; color: #e9b232; font-size: 11px; font-variant-numeric: tabular-nums; }
.panel .coin { display: inline-block; width: 7px; height: 7px; margin: 0 4px 1px 0; vertical-align: middle; background: #e9b232; border-radius: 50%; box-shadow: inset -2px -1px 0 #a87a1a; }
.panel .purse b { color: #f8de88; font-weight: 600; }
/* the Sound panel (brief P8): on the right, under the HUD's Sound button */
#sound { left: auto; right: 10px; width: 260px; }
#sound .srow { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
#sound .srow label { display: inline-flex; align-items: center; gap: 5px; min-width: 76px; white-space: nowrap; }
#sound input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
#sound select { font: inherit; color: var(--ink); background: #1c1a2e; border: 1px solid var(--edge); border-radius: 3px; padding: 1px 2px; cursor: pointer; }
#sound .sub { margin-top: 8px; }
#sound .weather-setting { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 12px; }
#weather-coordinates { display: grid; gap: 6px; margin-top: 8px; }
#weather-coordinates label { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
#weather-coordinates input { width: 105px; min-width: 0; font: inherit; }
#sound a { color: var(--ink); }
@media (max-width: 760px) { #sound { width: auto; left: 6px; right: 6px; } }

/* L2: shared day cursors and bounded, wrapping readouts; Chronicle miniatures. */
#ledger .ledger-cursor { stroke: #f8de88; stroke-width: 0.8; pointer-events: none; }
#ledger .ledger-marker { cursor: help; }
#ledger .ledger-readout { min-height: 30px; font-size: 11px; line-height: 15px; color: var(--ink); overflow-wrap: anywhere; pointer-events: none; }
#chronicle .chron-curves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
#chronicle .chron-curves svg { display: block; width: 100%; height: auto; }
#chronicle .chron-curves svg text { font: 9px Consolas, monospace; fill: #bdb3a6; }
#chronicle .chron-curves .lgd { font-size: 11px; color: #bdb3a6; }
#chronicle .chron-curves .lgd i { display: inline-block; width: 8px; height: 8px; margin-right: 3px; }
@media (max-width: 600px) { #chronicle .chron-curves { grid-template-columns: 1fr; } }

/* R1: small square meters in the ledger palette, wrapping at phone width. */
.panel .vitals { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 10px; margin-top: 4px; font-size: 10px; line-height: 14px; }
.panel .vital { display: inline-flex; align-items: center; gap: 4px; }
.panel .vital-name { color: #bdb3a6; }
.panel .vital-bar { display: inline-block; width: 48px; height: 5px; background: #1c1a2e; border: 1px solid #6e5436; }
.panel .vital-bar i { display: block; height: 100%; background: #94b25a; }
.panel .vital-bar i.mid { background: #e9b232; }
.panel .vital-bar i.low { background: #d8664c; }
.panel .energy .vital-bar i.full { background: #86b2dc; }
.panel .sleep-hours { color: #bdb3a6; white-space: nowrap; }
.panel .roster-group h3 { margin: 10px 0 2px; color: #ecca96; }

/* UI2 / the owner's direction 3: reading plateaus with dark0 fades, no plates or borders.
   unslop-ignore: these dark shadows reproduce the chosen mockup's fades. */
html { color-scheme: dark; }
[hidden] { display: none !important; }
:root { --hud-h: 140px; --fade: #1c1a2e; --dim: #e4d8c4; --warn: #f4ae66; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pixel-title { display: inline-block; vertical-align: middle; fill: currentColor; max-width: 100%; height: 14px; }
.drawn-heading { display: inline-block; max-width: 100%; }
#hud { padding: 18px 28px 24px; border: 0; z-index: 5; background: linear-gradient(to bottom, var(--fade) 0%, var(--fade) calc(100% - 20px), transparent 100%); }
#hud .row { gap: 10px 22px; }
#hud .row + .row { margin-top: 12px; }
#hud .brand { margin-right: 8px; }
#hud .controls { flex-wrap: wrap; width: 100%; gap: 4px 10px; }
#hud .stat[data-stat] { display: inline-flex; gap: 6px; align-items: center; color: var(--ink); font-size: 15px; line-height: 20px; }
#hud .stat[hidden] { display: none; }
#hud .stat.wagon { max-width: 100%; white-space: normal; }
.icon { width: 14px; height: 14px; flex-shrink: 0; fill: var(--icon, var(--accent)); vertical-align: -2px; }
#b-chron .icon { margin-right: 5px; }
#hud .stat b.low, #hud .stat.wounded b { color: var(--warn); }
#hud .daylen { border: 0; background: transparent; padding: 0; margin: 0 12px; color: var(--dim); font-weight: 400; }
button, #hud .daylen select, #sound select, #victory button, #chronicle button.close, #savebox button, #savebox #b-fresh {
  color: var(--ink); background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 4px 5px;
}
button:hover, button:focus-visible, #victory button:hover, #chronicle button.close:hover, #savebox button:hover, #savebox #b-fresh:hover { background: transparent; color: var(--accent); text-decoration: underline; text-underline-offset: 4px; }
button.on { color: var(--accent); background: transparent; text-decoration: underline; text-underline-offset: 4px; }
button:focus-visible, select:focus-visible, input:focus-visible, a:focus-visible, .stat:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
select { border: 0; border-bottom: 1px solid var(--dim); color: var(--ink); background: var(--fade); font: inherit; }
option { color: var(--ink); background: var(--fade); }
.panel, #chronicle .ccard {
  top: calc(var(--hud-h) + 12px); bottom: auto; left: 28px; right: auto;
  width: 310px; max-height: max(70px, calc(100dvh - var(--hud-h) - var(--ticker-h, 90px) - 60px));
  padding: 10px 14px 16px; border: 0; border-radius: 0;
  background: linear-gradient(var(--fade), var(--fade));
  box-shadow: 0 0 20px 12px var(--fade); /* unslop-ignore: brief's dark fade */
  scrollbar-color: #6e7188 #1c1a2e; scrollbar-width: thin; z-index: 3;
}
.panel, #chronicle { opacity: 1; transition: opacity .18s ease, display .18s allow-discrete; }
.panel[hidden], #chronicle[hidden] { opacity: 0; }
@starting-style { .panel:not([hidden]), #chronicle:not([hidden]) { opacity: 0; } }
.panel h2 { margin-bottom: 10px; line-height: 20px; }
.panel h3 { color: var(--accent); }
.panel .list li { padding: 6px 0; border: 0; }
.panel .list li[data-id]:hover { background: transparent; }
.panel .list li[data-id]:hover > b { text-decoration: underline; text-underline-offset: 3px; }
.panel .orn, .panel .rank, .panel .rank.champion { border: 0; border-radius: 0; background: transparent; color: var(--ink); padding-left: 0; }
.panel .vitals { gap: 4px 10px; margin: 5px 0 2px; }
.panel .vital-bar { border: 0; background: #463e52; height: 6px; }
.panel .vital-name, .panel .sleep-hours, .panel .list small, .panel .hist small { color: var(--dim); }
.panel .roster-group h3 { color: var(--accent); border-bottom: 1px solid #463e52; padding-bottom: 3px; }
.panel .now { padding: 7px 0; border-top: 1px solid #463e52; border-bottom: 1px solid #463e52; }
#inspect, #sound, #ledger { left: auto; right: 28px; }
#ledger { width: 350px; }
#ledger svg:not(.pixel-title) { width: 100%; }
#ledger .pixel-title { width: auto; }
#sound { width: 300px; }
#ticker { left: 28px; bottom: 18px; max-width: min(520px, calc(100vw - 56px)); z-index: 2; color: var(--ink); }
#ticker div { padding: 3px 0; border: 0; border-radius: 0; background: linear-gradient(var(--fade), var(--fade)); box-shadow: 0 0 12px 5px var(--fade); } /* unslop-ignore: brief's dark fade */
#ticker div.bad { color: var(--warn); }
#ticker:focus-visible, #event-history-list:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
#event-history { width: min(520px, calc(100vw - 56px)); overflow: hidden; }
#event-history h2 { display: inline-block; }
#b-history-close { float: right; }
#event-history-list { clear: both; overflow-y: auto; max-height: max(50px, calc(100dvh - var(--hud-h) - var(--ticker-h, 90px) - 130px)); scrollbar-color: #6e7188 #1c1a2e; scrollbar-width: thin; }
#event-history-list div { padding: 5px 0; overflow-wrap: anywhere; }
#event-history-list .bad { color: var(--warn); }
#event-history-list .good { color: var(--accent); }
#label, #caption { border: 0; border-radius: 0; color: var(--ink); background: var(--fade); box-shadow: 0 0 14px 10px var(--fade); } /* unslop-ignore: brief's dark fade */
#label { z-index: 8; white-space: pre-line; max-width: min(430px, calc(100vw - 30px)); }
#caption { top: calc(var(--hud-h) + 10px); }
#chronicle { inset: auto; top: calc(var(--hud-h) + 12px); right: 28px; left: auto; bottom: calc(var(--ticker-h, 90px) + 42px); width: min(600px, calc(100vw - 56px)); z-index: 4; background: transparent; display: block; pointer-events: none; }
#chronicle .ccard { position: static; pointer-events: auto; width: 100%; max-height: 100%; overflow-y: auto; }
#chronicle .entries li { background: transparent; border: 0; padding: 7px 0; }
#chronicle .entries li:hover { background: transparent; text-decoration: underline; }
#chronicle .badge, #chronicle .orn { border: 0; background: transparent; color: var(--accent); }
#chronicle .badge.collapse { color: var(--warn); }
#chronicle .badge.abandoned { color: var(--dim); }
#chronicle button.close { margin: 14px 0 0; }
#victory .vcard, #savebox .scard { border: 0; border-radius: 0; background: var(--fade); box-shadow: 0 0 22px 18px var(--fade); } /* unslop-ignore: same reading fade */
#victory .six li, #victory .face canvas { border: 0; background: transparent; }
#victory button, #savebox button { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 760px) {
  #hud { padding: 12px 16px 20px; font-size: 11px; }
  #hud .row { gap: 7px 15px; }
  #hud .brand { width: 100%; }
  #hud .stat[data-stat] { font-size: 13px; }
  #hud .controls { gap: 4px 8px; }
  #hud .daylen { margin: 0; }
  #hud .seed { margin-left: 0; }
  .panel, #inspect, #ledger, #sound { left: 10px; right: 10px; width: auto; top: calc(var(--hud-h) + 8px); bottom: auto; max-height: max(70px, calc(100dvh - var(--hud-h) - var(--ticker-h, 70px) - 54px)); padding: 10px 14px 14px; }
  #ticker { display: block; left: 16px; bottom: 14px; max-width: calc(100vw - 32px); font-size: 10px; line-height: 13px; }
  #ticker div { margin-top: 2px; padding: 1px 0; }
  #event-history { width: auto; }
  #chronicle { top: calc(var(--hud-h) + 8px); right: 10px; left: 10px; width: auto; bottom: calc(var(--ticker-h, 70px) + 38px); }
  #chronicle .ccard { padding: 10px 14px 14px; }
  #chronicle .entries li { grid-template-columns: 75px 80px 1fr; }
  #caption { top: calc(var(--hud-h) + 8px); bottom: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .panel, #chronicle, #hud .saved, #hud .saved.on { transition: none; animation: none; }
}

#hud .hud-stats { justify-content: space-between; gap: 10px 20px; }
#hud .hud-top .seed { margin-left: auto; }
#hud .hud-top .saved { margin-left: -14px; }
#hud .controls #b-sound { margin-left: auto; }
@media (max-width: 760px) {
  #hud .hud-stats { justify-content: flex-start; gap: 8px 20px; }
  #hud .hud-top .seed { margin-left: 0; }
  #hud .controls #b-sound { margin-left: 0; }
}


#hud .stat[data-stat]::after { content: attr(title); position: fixed; top: calc(var(--hud-h) + 8px); left: 28px; max-width: min(420px, calc(100vw - 56px)); padding: 5px 8px; font-size: 12px; font-weight: 400; line-height: 17px; white-space: pre-line; pointer-events: none; visibility: hidden; color: var(--ink); background: var(--fade); box-shadow: 0 0 14px 10px var(--fade); }
#hud .stat[data-stat]:hover::after, #hud .stat[data-stat]:focus-visible::after { visibility: visible; }

[hidden] { pointer-events: none; }

#ledger h2 small { display: block; margin-top: 5px; }

/* R12: a quiet, movable recent-events log. */
#ticker {
  width: min(520px, calc(100vw - 56px));
  text-shadow: 0 1px 2px #1c1a2e, 1px 0 2px #1c1a2e, -1px 0 2px #1c1a2e;
}
#ticker div {
  background: rgba(28, 26, 46, .18); box-shadow: none;
  padding: 3px 40px 3px 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#ticker div:nth-last-of-type(n+3) { display: none; }
#ticker div:nth-last-of-type(2) { color: var(--dim); }
#ticker:hover div, #ticker:focus div, #ticker.dragging div {
  display: block; color: var(--ink); white-space: normal; overflow-wrap: anywhere;
  background: var(--fade); box-shadow: 0 0 12px 5px var(--fade);
}
#ticker:hover div.bad, #ticker:focus div.bad, #ticker.dragging div.bad { color: var(--warn); }
#ticker-grip {
  position: absolute; right: 0; bottom: 0; width: 36px; height: 24px;
  display: grid; place-items: center; cursor: grab; touch-action: none; user-select: none;
  color: var(--dim); font-size: 18px; background: rgba(28, 26, 46, .18);
}
#ticker.dragging #ticker-grip { cursor: grabbing; }
@media (min-width: 761px) {
  :root { --ticker-panel-top: calc(var(--hud-h) + 12px); --ticker-panel-bottom: calc(var(--ticker-h, 90px) + 54px); }
  :root[data-ticker-corner^="top"] {
    --ticker-panel-top: calc(var(--hud-h) + var(--ticker-h, 90px) + 48px);
    --ticker-panel-bottom: 28px;
  }
  :root[data-ticker-corner$="right"] #ticker { left: auto; right: 28px; }
  :root[data-ticker-corner^="top"] #ticker { bottom: auto; top: calc(var(--hud-h) + 30px); }
  :root[data-ticker-corner^="top"] #ticker-grip { bottom: auto; top: -24px; }
  .panel, #inspect, #ledger, #sound {
    top: var(--ticker-panel-top);
    max-height: max(70px, calc(100dvh - var(--ticker-panel-top) - var(--ticker-panel-bottom)));
  }
  #chronicle { top: var(--ticker-panel-top); bottom: var(--ticker-panel-bottom); }
  #event-history {
    top: auto; bottom: calc(var(--ticker-h, 90px) + 48px);
    max-height: max(70px, calc(100dvh - var(--hud-h) - var(--ticker-h, 90px) - 90px));
  }
  :root[data-ticker-corner$="right"] #event-history { left: auto; right: 28px; }
  :root[data-ticker-corner^="top"] #event-history { top: var(--ticker-panel-top); bottom: auto; }
}
@media (max-width: 760px) { #ticker { visibility: hidden; pointer-events: none; } }