:root {
  color-scheme: dark;
  --evergreen-night: #14211B;
  --forest-surface: #1F2F27;
  --holly-border: #44614F;
  --parchment: #F1E8D6;
  --candle-gold: #D9A441;
  --cranberry: #B5413E;
  --ink: var(--parchment);
  --muted: rgba(241, 232, 214, 0.76);
  --panel: rgba(31, 47, 39, 0.92);
  --panel-strong: rgba(31, 47, 39, 0.97);
  --panel-soft: rgba(68, 97, 79, 0.62);
  --button-cream: rgba(241, 232, 214, 0.9);
  --line: var(--holly-border);
  --gold: var(--candle-gold);
  --gold-strong: var(--candle-gold);
  --green: var(--holly-border);
  --green-dark: var(--evergreen-night);
  --red: var(--cranberry);
  --blue: #6A8B7A;
  --snow: #f4f2e8;
  --shadow: 0 18px 42px rgba(4, 11, 8, 0.38);
  font-family:
    Georgia,
    "Times New Roman",
    serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: var(--evergreen-night);
  color: var(--ink);
}

button {
  color: inherit;
  font: inherit;
}

/* ---- Pre-runtime title and loading shell ---------------------------------
   This is deliberately independent of the game menu. It paints from static
   HTML before any game module is requested and completely covers the canvas
   until main.js reports a stable, fully composed first frame. */
body.boot-pending .game-shell {
  visibility: hidden;
}

.boot-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 46px 48px 72px;
  isolation: isolate;
  background:
    radial-gradient(circle at 15% 12%, rgba(120, 199, 174, 0.26), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(181, 65, 62, 0.2), transparent 27%),
    radial-gradient(ellipse at 50% 115%, rgba(217, 164, 65, 0.15), transparent 44%),
    linear-gradient(145deg, #061b1a 0%, #0d3028 52%, #081b1a 100%);
}

.boot-overlay::before,
.boot-overlay::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

.boot-overlay::before {
  inset: 0;
  opacity: 0.42;
  background:
    linear-gradient(118deg, transparent 0 42%, rgba(146, 215, 192, 0.12) 49%, transparent 58%),
    linear-gradient(62deg, transparent 0 60%, rgba(217, 164, 65, 0.08) 69%, transparent 77%);
  filter: blur(14px);
}

.boot-overlay::after {
  right: -8vw;
  bottom: -11vh;
  left: -8vw;
  height: 29vh;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #ecf3ea, #bdcec3 68%, #819c8b);
  box-shadow: 0 -8px 36px rgba(221, 241, 231, 0.12);
}

.boot-overlay[hidden] {
  display: none;
}

.boot-snow {
  position: fixed;
  inset: -80px 0 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.64;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.4px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.48) 0 0.8px, transparent 1.2px);
  background-position: 12px 8px, 70px 42px, 20px 30px;
  background-size: 112px 112px, 158px 158px, 76px 76px;
  animation: boot-snowfall 24s linear infinite;
}

@keyframes boot-snowfall {
  to { transform: translate3d(-28px, 80px, 0); }
}

.boot-stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(350px, 0.7fr);
  align-items: center;
  gap: clamp(30px, 5vw, 76px);
  width: min(1180px, calc(100vw - 96px));
}

.boot-brand {
  min-width: 0;
  text-align: center;
}

.boot-logo-frame {
  position: relative;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(244, 222, 164, 0.72);
  border-radius: 26px;
  background: rgba(241, 232, 214, 0.1);
  box-shadow:
    0 30px 80px rgba(0, 7, 6, 0.46),
    0 0 0 4px rgba(241, 232, 214, 0.05),
    inset 0 1px rgba(255, 255, 255, 0.3);
  transform: rotate(-0.45deg);
}

.boot-logo-frame::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 18px;
  pointer-events: none;
}

.boot-logo {
  display: block;
  width: 100%;
  aspect-ratio: 1607 / 979;
  object-fit: cover;
  border-radius: 18px;
}

.boot-tagline {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 19px 0 0;
  color: rgba(241, 232, 214, 0.82);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.boot-tagline span + span::before {
  content: "✦";
  margin-right: 18px;
  color: var(--gold);
}

.boot-card {
  position: relative;
  width: 100%;
  max-height: min(760px, calc(100vh - 116px));
  overflow: auto;
  padding: clamp(28px, 3.4vw, 46px);
  border: 1px solid rgba(217, 164, 65, 0.58);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(31, 62, 50, 0.985), rgba(9, 31, 27, 0.985)),
    var(--panel-strong);
  box-shadow:
    0 30px 70px rgba(0, 7, 6, 0.42),
    inset 0 1px rgba(255, 255, 255, 0.09);
  scrollbar-color: rgba(217, 164, 65, 0.5) transparent;
}

.boot-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 30px;
  left: 30px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.boot-surface[hidden] {
  display: none;
}

.boot-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ead39d;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.boot-kicker span {
  font-size: 15px;
}

.boot-surface h1 {
  margin: 10px 0 0;
  color: #fff6df;
  font-size: clamp(32px, 3.5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  text-wrap: balance;
}

.boot-subtitle,
.boot-splash-surface > p,
.boot-loading-status,
.boot-loading-note,
.boot-storage-note,
.boot-story-copy {
  color: rgba(241, 232, 214, 0.78);
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

.boot-subtitle,
.boot-splash-surface > p {
  margin: 17px 0 27px;
}

.boot-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.boot-actions > .boot-button:first-child,
.boot-actions > .boot-button:nth-child(2),
.boot-actions > .boot-button:nth-child(3) {
  grid-column: 1 / -1;
}

.boot-button,
.boot-back,
.boot-text-button {
  border-radius: 11px;
  font-family: Arial, sans-serif;
  cursor: pointer;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.boot-button {
  width: 100%;
  min-height: 56px;
  padding: 11px 17px;
  border: 1px solid rgba(241, 232, 214, 0.24);
  background: rgba(241, 232, 214, 0.07);
  color: var(--parchment);
  text-align: left;
}

.boot-button-label,
.boot-button-detail {
  display: block;
}

.boot-button-label {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.boot-button-detail {
  margin-top: 3px;
  color: rgba(241, 232, 214, 0.64);
  font-size: 11.5px;
  line-height: 1.35;
}

.boot-button:not(:disabled):hover,
.boot-back:hover,
.boot-text-button:hover {
  transform: translateY(-1px);
  border-color: rgba(217, 164, 65, 0.82);
  background-color: rgba(241, 232, 214, 0.11);
}

.boot-button:focus-visible,
.boot-back:focus-visible,
.boot-text-button:focus-visible {
  outline: 3px solid #f5c85d;
  outline-offset: 3px;
}

.boot-button.boot-primary {
  border-color: #f3d084;
  background: linear-gradient(180deg, #f7e6bd, #dcb560);
  box-shadow: 0 10px 28px rgba(217, 164, 65, 0.17);
  color: #173128;
}

.boot-button.boot-primary .boot-button-detail {
  color: rgba(20, 47, 38, 0.72);
}

.boot-button:disabled {
  border-style: dashed;
  background: rgba(4, 19, 16, 0.22);
  color: rgba(241, 232, 214, 0.42);
  cursor: not-allowed;
}

.boot-button:disabled .boot-button-detail {
  color: rgba(241, 232, 214, 0.38);
}

.boot-text-button {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(241, 232, 214, 0.78);
  font-size: 12px;
  text-decoration: underline;
  text-decoration-color: rgba(217, 164, 65, 0.48);
  text-underline-offset: 4px;
}

.boot-back {
  min-height: 40px;
  padding: 8px 13px;
  border: 1px solid rgba(241, 232, 214, 0.25);
  background: rgba(241, 232, 214, 0.07);
  color: var(--parchment);
  font-size: 12px;
  font-weight: 800;
}

.boot-surface-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 20px;
}

.boot-surface-header h1 {
  font-size: clamp(31px, 3vw, 42px);
}

.boot-storage-note {
  margin: 17px 0 0;
  padding: 10px 12px;
  border-left: 3px solid #e2b357;
  background: rgba(217, 164, 65, 0.09);
}

.boot-slot-list {
  display: grid;
  gap: 9px;
}

.boot-slot {
  position: relative;
  width: 100%;
  min-height: 68px;
  padding: 12px 96px 12px 15px;
  border: 1px solid rgba(241, 232, 214, 0.22);
  border-radius: 11px;
  background: rgba(241, 232, 214, 0.06);
  color: var(--parchment);
  font-family: Arial, sans-serif;
  text-align: left;
  cursor: pointer;
}

.boot-slot:hover:not(:disabled) {
  border-color: rgba(217, 164, 65, 0.82);
  background: rgba(241, 232, 214, 0.1);
}

.boot-slot:focus-visible {
  outline: 3px solid #f5c85d;
  outline-offset: 3px;
}

.boot-slot:disabled {
  cursor: not-allowed;
  opacity: 0.64;
}

.boot-slot-name,
.boot-slot-meta,
.boot-slot-detail {
  display: block;
}

.boot-slot-name {
  font-size: 14px;
  font-weight: 800;
}

.boot-slot-meta,
.boot-slot-detail {
  margin-top: 3px;
  color: rgba(241, 232, 214, 0.65);
  font-size: 11px;
  line-height: 1.35;
}

.boot-slot-state {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 7px;
  border: 1px solid rgba(142, 204, 175, 0.35);
  border-radius: 999px;
  background: rgba(70, 126, 96, 0.2);
  color: #c8ead7;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.boot-slot[data-state="empty"] .boot-slot-state,
.boot-slot[data-state="unavailable"] .boot-slot-state {
  border-color: rgba(241, 232, 214, 0.24);
  background: rgba(241, 232, 214, 0.06);
  color: rgba(241, 232, 214, 0.64);
}

.boot-slot[data-state="corrupt"] .boot-slot-state {
  border-color: rgba(224, 117, 112, 0.55);
  background: rgba(181, 65, 62, 0.18);
  color: #ffc0bc;
}

.boot-reference-grid {
  display: grid;
  gap: 0;
  margin-top: 24px;
}

.boot-reference-grid p {
  display: grid;
  grid-template-columns: minmax(108px, auto) 1fr;
  gap: 14px;
  align-items: center;
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid rgba(241, 232, 214, 0.12);
  color: rgba(241, 232, 214, 0.78);
  font-family: Arial, sans-serif;
  font-size: 12px;
}

.boot-reference-grid kbd {
  justify-self: start;
}

.boot-story-copy {
  margin-top: 24px;
}

.boot-story-copy p {
  margin: 0 0 16px;
}

.boot-spinner {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}

.boot-spinner span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e2b357;
  animation: boot-pulse 1.2s ease-in-out infinite;
}

.boot-spinner span:nth-child(2) { animation-delay: 140ms; }
.boot-spinner span:nth-child(3) { animation-delay: 280ms; }

@keyframes boot-pulse {
  0%, 100% { opacity: 0.28; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-4px); }
}

.boot-loading-status {
  margin: 24px 0 8px;
  color: #fff0c8;
  font-weight: 700;
}

.boot-progress-track {
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(241, 232, 214, 0.12);
}

.boot-progress-track span {
  display: block;
  width: 38%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #f0ce78, transparent);
  animation: boot-progress 1.6s ease-in-out infinite;
}

@keyframes boot-progress {
  from { transform: translateX(-100%); }
  to { transform: translateX(270%); }
}

.boot-loading-note {
  margin: 15px 0 0;
  color: rgba(241, 232, 214, 0.56);
  font-size: 11px;
}

.boot-error-kicker {
  color: #ffc0bc;
}

.boot-confirm {
  position: fixed;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 18, 15, 0.8);
  backdrop-filter: blur(8px);
}

.boot-confirm[hidden] {
  display: none;
}

.boot-confirm-card {
  width: min(500px, calc(100vw - 48px));
  padding: 28px;
  border: 1px solid rgba(217, 164, 65, 0.72);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(31, 62, 50, 0.995), rgba(8, 29, 25, 0.995));
  box-shadow: 0 30px 80px rgba(0, 7, 6, 0.62);
}

.boot-confirm-card h2 {
  margin: 8px 0 0;
  color: #fff6df;
  font-size: 28px;
  line-height: 1.08;
}

.boot-confirm-card > p {
  margin: 12px 0 0;
  color: rgba(241, 232, 214, 0.78);
  font-family: Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
}

.boot-confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 22px;
}

.boot-footer {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 19px;
  left: 24px;
  display: flex;
  justify-content: center;
  gap: 14px;
  color: rgba(12, 44, 36, 0.7);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .boot-overlay {
    align-items: start;
    padding: 28px 24px 78px;
  }

  .boot-stage {
    grid-template-columns: 1fr;
    gap: 24px;
    width: min(560px, calc(100vw - 48px));
  }

  .boot-logo-frame {
    width: min(520px, 100%);
    margin-inline: auto;
  }

  .boot-logo {
    max-height: 34vh;
  }

  .boot-tagline {
    margin-top: 12px;
  }

  .boot-card {
    max-height: none;
  }
}

@media (max-width: 560px) {
  .boot-overlay {
    padding: 18px 14px 72px;
  }

  .boot-stage {
    gap: 18px;
    width: 100%;
  }

  .boot-logo-frame {
    padding: 5px;
    border-radius: 18px;
  }

  .boot-logo,
  .boot-logo-frame::after {
    border-radius: 13px;
  }

  .boot-logo-frame::after { inset: 5px; }

  .boot-tagline {
    gap: 8px;
    font-size: 9px;
    letter-spacing: 0.11em;
  }

  .boot-tagline span + span::before { margin-right: 8px; }

  .boot-card {
    padding: 24px 20px 21px;
    border-radius: 17px;
  }

  .boot-surface h1 { font-size: 32px; }
  .boot-subtitle { margin: 13px 0 20px; font-size: 13px; }
  .boot-actions { grid-template-columns: 1fr; }
  .boot-actions > * { grid-column: 1 / -1; }
  .boot-surface-header { gap: 12px; }
  .boot-confirm-actions { grid-template-columns: 1fr; }
  .boot-footer { gap: 7px; font-size: 8px; letter-spacing: 0.08em; }
}

@media (max-height: 720px) and (min-width: 901px) {
  .boot-overlay { padding-block: 28px 56px; }
  .boot-stage { width: min(1060px, calc(100vw - 56px)); gap: 36px; }
  .boot-card { padding: 25px 30px; }
  .boot-surface h1 { font-size: 36px; }
}

@media (prefers-reduced-motion: reduce) {
  .boot-snow,
  .boot-spinner span,
  .boot-progress-track span {
    animation: none;
  }

  .boot-progress-track span {
    width: 100%;
    opacity: 0.7;
  }
}

.game-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-width: 1000px;
  min-height: 640px;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 20%, rgba(68, 97, 79, 0.38), transparent 44%),
    var(--evergreen-night);
}

.topbar {
  position: absolute;
  z-index: 20;
  top: 12px;
  left: 14px;
  right: 386px;
  min-height: 70px; /* §4.1: an expanded chain group may wrap the strip to a second row */
  display: grid;
  grid-template-columns: 86px minmax(560px, 1fr);
  gap: 12px;
  align-items: center;
  pointer-events: none;
}

.portrait,
.resource-strip,
.season-panel,
.sleigh-panel,
.speed-controls,
.build-dock,
.inspector,
.floating-tip {
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(31, 47, 39, 0.96), rgba(20, 33, 27, 0.92)),
    var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(7px);
}

.portrait {
  position: relative;
  display: grid;
  place-items: center;
  width: 78px;
  height: 78px;
  border-radius: 50%;
}

.portrait-face {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 34%, #ffe0b7 0 28%, transparent 29%),
    radial-gradient(circle at 50% 66%, #fff7e2 0 30%, transparent 31%),
    linear-gradient(145deg, var(--cranberry), #7f2926);
  color: var(--evergreen-night);
  font-size: 0;
}

.portrait span {
  position: absolute;
  right: -4px;
  bottom: -3px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--gold);
  color: var(--evergreen-night);
  font-size: 16px;
  font-weight: 700;
}

.resource-strip {
  /* §4.1 regroup: chips size to content and wrap — the strip was a fixed 7-column
     grid until the chain-group rework (a flat strip dies at 13+ resources). */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  min-height: 62px;
  padding: 6px 12px;
  border-radius: 8px;
  pointer-events: auto;
}

.resource {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  height: 46px;
  padding: 3px 4px;
  border-radius: 7px;
  white-space: nowrap;
}

.resource .icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(68, 97, 79, 0.78);
  background: rgba(217, 164, 65, 0.14);
  color: var(--gold);
  font-family:
    Arial,
    sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
  text-transform: uppercase;
}

.resource-name {
  display: block;
  max-width: 54px;
  overflow: hidden;
  color: var(--muted);
  font-family:
    Arial,
    sans-serif;
  font-size: 10px;
  line-height: 1;
  text-overflow: ellipsis;
}

.resource strong {
  display: block;
  overflow: hidden;
  /* min-width: chips are size-to-content flex, so a ticking value (Cheer streams
     fractionally every frame) used to resize its chip and shift the whole strip.
     The serif value font has proportional figures (tnum can't bite), so reserve
     the width of a typical "445.6" instead — the strip only moves on rare
     digit-count jumps, not every tick. */
  min-width: 3.4em;
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(4, 11, 8, 0.7);
  font-size: clamp(13px, 1vw, 17px);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  line-height: 1.05;
  text-overflow: ellipsis;
}

.resource small {
  display: block; /* inline ignores min-width; it already sat on its own line under the block value */
  min-width: 5.2em; /* "+14.2/wk" — same anti-jitter reservation as the value line */
  color: rgba(241, 232, 214, 0.82);
  font-family:
    Arial,
    sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.resource.danger small {
  color: var(--cranberry);
}

.resource-tooltip {
  position: absolute;
  z-index: 50;
  top: calc(100% + 12px);
  left: 0;
  display: none;
  width: 240px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(31, 47, 39, 0.98);
  box-shadow: var(--shadow);
  color: var(--parchment);
  font-size: 13px;
  line-height: 1.3;
  white-space: normal;
}

.resource-tooltip strong {
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 15px;
}

.resource-tooltip em {
  display: block;
  margin-top: 7px;
  color: rgba(241, 232, 214, 0.72);
  font-family:
    Arial,
    sans-serif;
  font-size: 11px;
  font-style: normal;
}

.resource:hover,
.resource:focus-visible {
  background: rgba(68, 97, 79, 0.34);
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.22);
}

.resource:hover .resource-tooltip,
.resource:focus-visible .resource-tooltip {
  display: block;
}

.time-cluster {
  position: absolute;
  z-index: 19;
  left: 22px;
  bottom: 18px;
  display: grid;
  width: 252px;
  gap: 8px;
  pointer-events: auto;
}

/* The Courier Sleigh Manifest paints upward OUT of this cluster, and `z-index: 19` above
   makes the cluster a stacking context — so the popout's own z-index can never lift it
   past the z-20 topbar, whatever number it carries. At the supported 760px floor the
   resource strip wraps to a second row and the topbar reaches down into exactly the space
   a four-kind Chapter 5 manifest needs, hiding its top rows. hud.js sets this class for
   as long as the card is open, and only then: the cluster otherwise stays under the
   topbar, where it belongs. 21 clears the topbar and still sits under the place hint
   (22), floating tip (24) and toasts (30). */
body.manifest-open .time-cluster {
  z-index: 21;
}

/* Bottom-right utility tray: the detailed Ledger sits immediately left of the
   music volume control, away from the compact resource strip. */
.bottom-controls {
  position: absolute;
  right: 24px;
  bottom: 18px;
  z-index: 19;
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.bottom-tool-button,
.bottom-ledger-button {
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(217, 164, 65, 0.48);
  border-radius: 8px;
  background: rgba(20, 33, 27, 0.82);
  color: var(--parchment);
  font: 700 12px/1 Arial, sans-serif;
  cursor: pointer;
}
.bottom-tool-button:hover,
.bottom-tool-button:focus-visible,
.bottom-ledger-button:hover,
.bottom-ledger-button:focus-visible {
  border-color: var(--gold);
  background: rgba(68, 97, 79, 0.58);
  outline: none;
}
.bottom-tool-button kbd,
.bottom-ledger-button kbd {
  margin-left: 5px;
  padding: 1px 4px;
  border: 1px solid rgba(241, 232, 214, 0.34);
  border-radius: 4px;
  color: var(--gold-strong);
  font: inherit;
}

/* Always-visible sleigh meter above the North Pole box (Taylor, eyeball 2026-07-17:
   "def want the presents loaded visible at all times" — same numbers and fill as the
   quest panel's goal bar, which stays where it is). It is also the button that opens
   the Courier Sleigh Manifest, so the dock around it anchors that popout. */
.sleigh-dock {
  position: relative;
  pointer-events: auto;
  /* a grid item's automatic minimum is min-content, which with the pill's nowrap row would
     stretch the dock past the 252px time cluster instead of letting the label ellipsise. */
  min-width: 0;
}

.sleigh-panel {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.sleigh-panel:hover,
.sleigh-panel:focus-visible {
  border-color: var(--gold);
  outline: none;
}

.sleigh-panel-body {
  display: block;
  flex: 1;
  /* a flex item's automatic minimum is its min-content width, which with the nowrap row
     below would push the pill wider than its 228px cluster instead of letting the label
     shrink. Zero it here so the ellipsis further down is what actually happens. */
  min-width: 0;
}

/* The pill is a fixed 248px (228px under 1180px) and the quota grows all campaign: Beat 5's
   "1,600 / 1,600" leaves about 3px of headroom at the narrow cluster. If it ever runs over,
   wrapping is the worst answer available — it pushes the pill 52px -> 67px and shoves the
   whole bottom-left time cluster up with it. So the row never wraps, and the LABEL is what
   yields (the number is the load-bearing half). */
.sleigh-panel-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
}

.sleigh-panel-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sleigh-panel strong {
  color: var(--parchment);
  font-variant-numeric: tabular-nums;
}

.sleigh-panel .meter-track {
  display: block;
  margin-top: 7px;
  height: 10px;
}

.sleigh-caret {
  color: var(--gold);
  font-size: 11px;
  transition: transform 140ms ease;
}

.sleigh-panel[aria-expanded="true"] .sleigh-caret {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .sleigh-caret {
    transition: none;
  }
}

.season-panel {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 54px;
  padding: 8px 12px;
  border-radius: 8px;
}

.season-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(217, 164, 65, 0.54);
  background: var(--gold);
  color: var(--evergreen-night);
  font-size: 22px;
}

.season-panel strong {
  display: block;
  font-size: 18px;
  line-height: 1;
  color: var(--gold-strong);
  text-shadow: 0 1px 0 rgba(4, 11, 8, 0.72), 0 0 10px rgba(217, 164, 65, 0.18);
}

.season-panel small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 14px;
}

.speed-controls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  height: 48px;
  padding: 7px;
  border-radius: 8px;
  pointer-events: auto;
}

.time-controls-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 6px;
}

.pause-button {
  border: 1px solid rgba(217, 164, 65, 0.78);
  border-radius: 8px;
  background: rgba(31, 47, 39, 0.9);
  color: var(--parchment);
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease;
}

.pause-button:hover,
.pause-button:focus-visible {
  transform: translateY(-1px);
  border-color: var(--gold);
  background: rgba(68, 97, 79, 0.9);
}

.speed-controls button,
.dock-tabs button,
.build-card {
  border: 1px solid rgba(68, 97, 79, 0.86);
  background: rgba(31, 47, 39, 0.72);
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.speed-controls button {
  position: relative;
  border-radius: 6px;
  color: var(--parchment);
  font-size: 14px;
  font-weight: 700;
}

.speed-controls button.active,
.dock-tabs button.active,
.build-card.active {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow:
    inset 0 0 0 2px rgba(20, 33, 27, 0.22),
    0 0 0 1px rgba(241, 232, 214, 0.14);
  color: var(--evergreen-night);
  text-shadow: none;
}

.speed-controls button.active::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cranberry);
  box-shadow: 0 0 0 2px rgba(241, 232, 214, 0.56);
}

.speed-controls button:hover,
.dock-tabs button:hover,
.build-card:hover {
  transform: translateY(-1px);
  border-color: rgba(217, 164, 65, 0.86);
}

.map-frame {
  position: absolute;
  inset: 0;
}

#gameCanvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: default;
}

/* ---- Top-right hangers: the Belief ornament + the chapter bookmark (1B) ------
   All that survives of the "Letters from the World" aside. Both hang off the top
   edge of the map instead of sitting in a card, which is the whole point of the
   pick: the corner reads as set dressing, not as a second dashboard. The container
   is click-through so the empty air between them still belongs to the map. */
.hud-hangers {
  position: absolute;
  z-index: 15;
  top: 0;
  right: 30px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  pointer-events: none;
}

.belief-ornament,
.chapter-bookmark {
  pointer-events: auto;
}

/* …but a descendant's `auto` re-enables hit-testing under an ancestor's `none`, so the two
   hangers would still catch clicks and fire their tooltips over a posed postcard (F8) even
   though they're faded to zero. The retired Letters aside had no descendant `auto` and did
   go inert; put that back rather than reaching for `visibility` on the shared postcard rule,
   which would snap the whole HUD away instead of fading it. */
body.postcard .belief-ornament,
body.postcard .chapter-bookmark {
  pointer-events: none;
}

.chapter-bookmark:focus-visible {
  /* an outline on the wrapper, not a shadow on the art: the ribbon's clip-path
     would swallow a box-shadow */
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 7px;
}

.belief-ornament {
  display: grid;
  justify-items: center;
  cursor: default;
}

/* A pale thread alone vanishes against bright snow (the 2D map and a day-lit 3D sky are
   both near-white up here), so the hairline carries its own dark edge and reads on either. */
.ornament-string {
  position: relative;
  /* lifts the string AND its brass cap over the ball, which is a later sibling — the cap
     used to be the ball's own ::before and painted over its rim for free. */
  z-index: 1;
  width: 2px;
  height: 20px;
  background: rgba(241, 232, 214, 0.62);
  box-shadow: 0 0 0 1px rgba(4, 11, 8, 0.32);
}

/* the brass cap the string ties into. It hangs off the STRING, not the ball: the ball clips
   its overflow now (below) so a long Belief count can never paint on the snow, and a cap
   parented there would be clipped away with it. */
.ornament-string::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  width: 12px;
  height: 7px;
  transform: translateX(-50%);
  border-radius: 3px 3px 0 0;
  background: var(--gold-strong);
}

.ornament-ball {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  width: 60px;
  height: 60px;
  /* the backstop behind the font steps below: whatever the count grows to, the glass is
     the edge of the paint. Clips to the border-radius, so a stray digit is cut by the
     circle rather than left straddling the rim onto the snow. */
  overflow: hidden;
  border: 1.5px solid var(--gold-strong);
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 245, 220, 0.55), transparent 42%),
    radial-gradient(circle at 50% 55%, #2a4536, #1a2c23 78%);
  box-shadow:
    0 6px 18px rgba(4, 11, 8, 0.5),
    inset 0 -8px 16px rgba(217, 164, 65, 0.16);
  transition: border-color 140ms ease;
}

.ornament-ball strong {
  color: var(--parchment);
  font-size: 19px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Belief is CUMULATIVE letters answered, and the five beat quotas alone total 5,000 — the
   glass has to hold five and six digits, not the 704 of a first year. At 19px "5,000" is
   already 57.6px inside a 57px interior and "12,600" painted 7px of digits out onto the
   map. Same two-defence pattern as the resource pill's data-fit (hud.js chipFit): step the
   font down by string length first, clip second. Widths at the digits' cap height (the
   circle is ~50px across up there, not 57): "5,000" → 45.5px at 15px, "12,600" → 45.4px at
   13px, seven characters → ~45px at 11px. */
.ornament-ball strong[data-fit="long"] {
  font-size: 15px;
}

.ornament-ball strong[data-fit="xlong"] {
  font-size: 13px;
}

.ornament-ball strong[data-fit="xxlong"] {
  font-size: 11px;
  letter-spacing: -0.2px;
}

.ornament-ball small {
  margin-top: 2px;
  color: var(--gold);
  font-family:
    Arial,
    sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.belief-ornament:hover .ornament-ball {
  border-color: var(--parchment);
}

/* Belief's year-end pulse: armed when the summary lands, played once the recap has
   closed (hud.js). Two beats, then it stops — an ornament that pulsed forever would
   be wallpaper within a year. */
@keyframes belief-pulse {
  0% {
    transform: scale(1);
    box-shadow:
      0 6px 18px rgba(4, 11, 8, 0.5),
      inset 0 -8px 16px rgba(217, 164, 65, 0.16);
  }
  30% {
    transform: scale(1.13);
    box-shadow:
      0 6px 22px rgba(4, 11, 8, 0.5),
      0 0 20px rgba(217, 164, 65, 0.55),
      inset 0 -8px 16px rgba(217, 164, 65, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow:
      0 6px 18px rgba(4, 11, 8, 0.5),
      inset 0 -8px 16px rgba(217, 164, 65, 0.16);
  }
}

.belief-ornament.is-pulsing .ornament-ball {
  animation: belief-pulse 900ms ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
  .belief-ornament.is-pulsing .ornament-ball {
    animation: none;
  }
}

/* The hangers are a right-anchored flex row, so a ribbon that changes width drags the Belief
   ornament sideways with it — and the ribbon DOES change width exactly once, at the finale
   ("Christmas Traditions" below, 48px -> 92px). This margin reserves those 44px up front and
   the wide state gives them back, so the row is 172px wide either way and the ornament hangs
   in one place for the whole campaign instead of the ending nudging it left as a parting gift.
   Reserved as MARGIN, not width: the focus ring is an outline on this button (the ribbon's
   clip-path would swallow it), and a padded-out button would ring 44px of empty air. */
.chapter-bookmark {
  margin-left: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.chapter-bookmark.is-traditions {
  margin-left: 0;
}

.chapter-bookmark[hidden] {
  display: none;
}

.bookmark-ribbon {
  display: block;
  width: 48px;
  padding: 26px 0 15px;
  /* the notched tail; it also clips the shadow, hence the outline-based focus ring */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 11px), 0 100%);
  background: linear-gradient(180deg, #7f2926, var(--cranberry));
  text-align: center;
  transition: filter 140ms ease;
}

.bookmark-ribbon strong {
  display: block;
  color: var(--parchment);
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
}

.bookmark-ribbon small {
  display: block;
  margin-top: 3px;
  color: rgba(241, 232, 214, 0.85);
  font-family:
    Arial,
    sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Post-finale the campaign has no numbered chapter left, so the ribbon stops reading
   "Ch. N" and says what the village is doing instead. "Christmas Traditions" is 81px of
   nowrap text; the 48px ribbon clipped it to "Tradit" — the reward for finishing the
   campaign was a word fragment. That one state gets a wider ribbon that wraps to two
   lines. Every "Ch. 1".."Ch. 5" keeps the locked 48px exactly as designed. */
.chapter-bookmark.is-traditions .bookmark-ribbon {
  width: 92px;
  padding: 22px 8px 15px;
}

.chapter-bookmark.is-traditions .bookmark-ribbon strong {
  font-size: 13px;
  line-height: 1.15;
  white-space: normal;
}

.chapter-bookmark:hover .bookmark-ribbon,
.chapter-bookmark:focus-visible .bookmark-ribbon {
  filter: brightness(1.2);
}

/* Shared by the Presents Loaded pill, the manifest rows, the chapter view's goals, and
   the inspector meters — it outlived the goal meter it was first written for. */
.meter-track {
  width: 100%;
  height: 12px;
  margin-top: 10px;
  overflow: hidden;
  border: 1px solid rgba(68, 97, 79, 0.78);
  border-radius: 999px;
  background: rgba(20, 33, 27, 0.72);
}

.meter-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--holly-border), var(--gold));
}

/* ---- Courier Sleigh Manifest (UI redesign 3A) -------------------------------
   The per-kind split used to sit permanently open under the Presents Loaded pill.
   It now rides in a card the pill opens, together with the Christmas Forecast, so
   quota and pace read in one place and neither is always in the way. */
.manifest-popout {
  position: absolute;
  left: 0;
  bottom: calc(100% + 10px);
  z-index: 21;
  width: 268px; /* wider than the 252/228px dock on purpose: the forecast detail needs it */
  /* The card grows upward from the pill, so a tall one runs off the TOP of the screen, not
     the bottom. hud.js measures the real gap above the dock on open and on resize and sets
     an inline max-height; this is the no-measurement fallback (a DOM without layout). */
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 13px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background:
    linear-gradient(180deg, rgba(31, 47, 39, 0.98), rgba(20, 33, 27, 0.96)),
    var(--panel-strong);
  box-shadow: var(--shadow);
  backdrop-filter: blur(7px);
  pointer-events: auto;
}

.manifest-popout[hidden] {
  display: none;
}

.manifest-popout h4 {
  margin: 0 0 10px;
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.manifest-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 4px 9px;
  align-items: center;
  margin-bottom: 9px;
}

.manifest-row:last-child {
  margin-bottom: 0;
}

.manifest-icon {
  width: 26px;
  height: 26px;
  grid-row: span 2;
}

.manifest-row b {
  color: var(--parchment);
  font-size: 13px;
  font-weight: normal;
}

.manifest-row b em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.manifest-row small {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* Deliberately NOT var(--green): that token is --holly-border (#44614F), a panel-edge
   colour that reads as roughly 2:1 against this card's background. A done ✓ has to be
   legible, so it gets its own light green. */
.manifest-row small i {
  color: #9fc79f;
  font-style: normal;
}

.manifest-row .meter-track {
  grid-column: 2 / 4;
  height: 7px;
  margin-top: 0;
}

.manifest-row.is-done b,
.manifest-row.is-done b em,
.manifest-row.is-done small {
  color: rgba(241, 232, 214, 0.55);
}

.manifest-row.is-done .manifest-icon {
  opacity: 0.6;
}

.manifest-empty {
  color: var(--muted);
  font-size: 12.5px;
}

/* The forecast, folded in as the card's last line. Same verdict colours as the
   standalone block, one step quieter — but SELF-CONTAINED: every rule it needs is
   `.manifest-forecast.forecast-*` below. The bare `.forecast-warn/-behind/-idle` rules
   further down also match these elements, but they only set `border-left-color` on an
   element with no left border. P6 can delete the `.forecast` blocks outright; the
   manifest does not depend on them. */
.manifest-forecast {
  margin-top: 3px;
  padding-top: 9px;
  border-top: 1px solid rgba(68, 97, 79, 0.6);
  color: var(--muted);
  font-size: 12px;
}

.manifest-forecast b {
  color: var(--parchment);
  font-weight: normal;
}

.manifest-forecast small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.manifest-forecast.forecast-warn b {
  color: var(--gold);
}

.manifest-forecast.forecast-behind b {
  color: var(--cranberry);
}

.manifest-forecast.forecast-idle b {
  color: var(--muted);
}

/* The manifest's forecast line owns every colour it needs above (`.manifest-forecast.forecast-*`),
   so the standalone `.forecast` block that used to sit in the Letters panel — and the bare
   `.forecast-ok/-warn/-behind/-idle` border rules that only ever painted its left edge —
   retired with the panel (P1). Nothing renders a bare `forecast-*` element any more. */

/* ---- the chapter view: a storybook spread (UI redesign 2A) -------------------
   What the ribbon bookmark opens. Two facing pages inside one bound book: the story
   so far on the left, this chapter's goals on the right. Overlay mechanics are the
   ✦ magic board's, one shade warmer — this is the one HUD surface deliberately
   trying to look like a keepsake rather than a panel. */
.chapter-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(6, 12, 9, 0.55);
  pointer-events: auto;
}

/* display:grid above would override the hidden attribute's UA display:none — the same
   trap .magic-overlay documents. Without it the invisible backdrop blankets the screen
   and eats every click. */
.chapter-overlay[hidden] {
  display: none;
}

.chapter-book {
  position: relative;
  display: grid;
  /* 780px is the mock's spread. `min()` is what makes the shell's 1000px floor safe:
     with the overlay's 24px padding the book has 952px to live in at that width. */
  grid-template-columns: 1fr 1fr;
  width: min(780px, 100%);
  max-height: min(84vh, 640px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(31, 47, 39, 0.97), rgba(20, 33, 27, 0.95));
  box-shadow: var(--shadow);
  animation: chapter-book-open 180ms ease-out;
}

@keyframes chapter-book-open {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-book {
    animation: none;
  }
}

/* Each page scrolls on its own: a Chapter 5 recap is five entries plus a Star Letter,
   and a 700px-tall window has ~590px of book to put it in. */
.chapter-page {
  overflow-y: auto;
  padding: 22px 24px 20px;
}

.chapter-page + .chapter-page {
  border-left: 1px solid rgba(68, 97, 79, 0.55);
  background: rgba(20, 33, 27, 0.35);
}

.chapter-page-goals {
  display: flex;
  flex-direction: column;
  padding-right: 46px; /* clear of the ✕ */
}

.chapter-page-head {
  margin: 0 0 12px;
  color: var(--gold);
  font-family:
    Arial,
    sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.chapter-view-close {
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 2px 7px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.4;
  cursor: pointer;
}

.chapter-view-close:hover,
.chapter-view-close:focus-visible {
  color: var(--parchment);
  background: rgba(68, 97, 79, 0.45);
}

/* ---- left page: the story so far ---- */
.chapter-recap {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 8px;
  margin: 0 0 11px;
}

.chapter-recap .tick {
  color: #9fc79f; /* NOT var(--green): that token is the panel-edge #44614F and unreadable here */
  font-size: 13px;
  line-height: 1.5;
}

.chapter-recap.is-now .tick {
  color: var(--gold);
}

.chapter-recap b {
  display: block;
  color: var(--parchment);
  font-size: 14.5px;
  font-weight: normal;
}

.chapter-recap i {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}

.chapter-recap.is-now b {
  color: var(--gold);
}

/* The one surviving line of the retired sample-letter feed: the Star Letter still waiting. */
.chapter-star-letter {
  margin: 14px 0 0;
  padding-top: 11px;
  border-top: 1px solid rgba(68, 97, 79, 0.6);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.chapter-star-letter b {
  color: var(--parchment);
  font-weight: normal;
}

.chapter-star-letter i {
  color: var(--muted);
}

/* ---- right page: this chapter's goals ---- */
.chapter-view-title {
  margin: 0;
  color: var(--parchment);
  font-size: 22px;
  line-height: 1.15;
}

.chapter-view-blurb {
  margin: 6px 0 14px;
  color: var(--muted);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.45;
}

.chapter-goal {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 11px;
}

.chapter-goal > div {
  flex: 1;
  min-width: 0;
}

.chapter-goal-icon {
  width: 30px;
  height: 30px;
  flex: none;
}

.chapter-goal-glyph {
  display: grid;
  place-items: center;
  color: var(--gold);
  font-size: 19px;
}

.chapter-goal b {
  display: block;
  color: var(--parchment);
  font-size: 13.5px;
  font-weight: normal;
}

.chapter-goal b em {
  color: var(--muted);
  font-size: 10.5px;
  font-style: normal;
}

.chapter-goal i {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.chapter-goal .meter-track {
  height: 8px;
  margin-top: 4px;
}

.chapter-goal small {
  flex: none;
  color: var(--muted);
  font-family:
    Arial,
    sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

.chapter-goal.is-done b,
.chapter-goal.is-done small {
  color: rgba(241, 232, 214, 0.6);
}

.chapter-goal.is-done .chapter-goal-icon {
  opacity: 0.6;
}

/* Larkspur Lane, three marks: answered letters turn from an outline star to a ✓. */
.chapter-stars span {
  margin-right: 4px;
  color: rgba(241, 232, 214, 0.45);
}

.chapter-stars span.is-answered {
  color: #9fc79f;
}

.chapter-close-hint {
  margin: auto 0 0;
  padding-top: 14px;
  color: rgba(241, 232, 214, 0.5);
  font-family:
    Arial,
    sans-serif;
  font-size: 10.5px;
}

/* Belt and braces for the shell's 1000px floor: if the book ever has less than a
   spread's worth of room, the pages stack instead of squeezing to two thin columns. */
@media (max-width: 760px) {
  .chapter-book {
    grid-template-columns: 1fr;
  }

  .chapter-page + .chapter-page {
    border-top: 1px solid rgba(68, 97, 79, 0.55);
    border-left: 0;
  }

  /* Stacked, the STORY page is the one under the ✕, so the reserve moves with it: without
     this swap the close button sits on top of "The story so far". */
  .chapter-page-story {
    padding-right: 46px;
  }

  .chapter-page-goals {
    padding-right: 24px;
  }
}

/* ---- P7 year-end overlay ---- */
.year-end-overlay {
  position: absolute;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 33, 27, 0.72);
  backdrop-filter: blur(4px);
}

.year-end-overlay[hidden] {
  display: none;
}

.year-end-panel {
  width: min(480px, calc(100vw - 48px));
  padding: 26px 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(31, 47, 39, 0.98), rgba(20, 33, 27, 0.97)),
    var(--panel-strong);
  box-shadow: var(--shadow);
  text-align: center;
}

.year-end-kicker {
  color: var(--muted);
  font-family:
    Arial,
    sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.year-end-panel h2 {
  margin: 8px 0 0;
  font-size: 30px;
  line-height: 1.05;
  color: var(--gold-strong);
  text-shadow: 0 1px 0 rgba(4, 11, 8, 0.78), 0 0 12px rgba(217, 164, 65, 0.16);
}

.year-end-sub {
  margin: 10px 0 0;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.year-end-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 20px 0;
}

.year-end-stats > div {
  padding: 12px;
  border: 1px solid rgba(68, 97, 79, 0.74);
  border-radius: 8px;
  background: rgba(68, 97, 79, 0.28);
}

.year-end-stats span {
  display: block;
  color: var(--muted);
  font-family:
    Arial,
    sans-serif;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.year-end-stats strong {
  display: block;
  margin-top: 5px;
  color: var(--gold-strong);
  font-size: 19px;
}

.year-end-bottleneck {
  margin: 14px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(191, 77, 66, 0.55);
  border-radius: 8px;
  background: rgba(191, 77, 66, 0.16);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
}

/* "Check your Santa Magic" — the year-end reminder that the ✦ board has something
   affordable on it (Taylor sat on 17 unspent points). Gold, not alarm-red. */
.year-end-magic-check {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(217, 164, 65, 0.6);
  border-radius: 8px;
  background: rgba(217, 164, 65, 0.14);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.4;
  text-align: left;
}
.year-end-magic-check strong { color: var(--gold-strong); }

/* ---- The Ledger (hotkey L): the one full-detail table (§4.2). Lighter backdrop than the
   year-end overlay so the in-world row highlights stay readable behind it. ---- */
.ledger-overlay {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12, 24, 18, 0.38);
}

.ledger-overlay[hidden] {
  display: none;
}

.ledger-panel {
  width: min(760px, calc(100vw - 48px));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(31, 47, 39, 0.97), rgba(20, 33, 27, 0.96)),
    var(--panel-strong);
  box-shadow: var(--shadow);
}

.ledger-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
}

.ledger-head h2 {
  margin: 0;
  font-size: 20px;
  color: var(--gold-strong);
}

.ledger-head small {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.ledger-panel table {
  width: 100%;
  border-collapse: collapse;
  font-family: Arial, sans-serif;
  font-size: 12.5px;
}

.ledger-panel th {
  padding: 6px 8px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
  border-bottom: 1px solid rgba(68, 97, 79, 0.6);
}

.ledger-panel th:first-child,
.ledger-panel td:first-child {
  text-align: left;
}

.ledger-panel td {
  padding: 6px 8px;
  color: var(--ink);
  text-align: right;
  border-bottom: 1px solid rgba(68, 97, 79, 0.28);
}

.ledger-group td {
  padding-top: 12px;
  color: var(--gold);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: left;
  border-bottom: none;
}

.ledger-row {
  cursor: pointer;
}

.ledger-row:hover td {
  background: rgba(217, 164, 65, 0.08);
}

.ledger-row.active td {
  background: rgba(217, 164, 65, 0.16);
}

.ledger-row .ledger-note {
  max-width: 220px;
  color: var(--muted);
  font-size: 11.5px;
  text-align: left;
}

.ledger-row .net-pos { color: #8fd49a; }
.ledger-row .net-neg { color: #e2918a; }

/* The always-available hotkey reference. It shares the Ledger's quiet backdrop,
   but stays narrower and reads as four quick groups instead of a data table. */
.controls-overlay {
  position: absolute;
  inset: 0;
  z-index: 56;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(12, 24, 18, 0.48);
  backdrop-filter: blur(3px);
}

.controls-overlay[hidden] {
  display: none;
}

.controls-panel {
  width: min(820px, calc(100vw - 48px));
  max-height: calc(100vh - 72px);
  overflow-y: auto;
  padding: 22px 24px 24px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(31, 47, 39, 0.98), rgba(20, 33, 27, 0.98)),
    var(--panel-strong);
  box-shadow: var(--shadow);
}

.controls-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.controls-panel header small {
  color: var(--muted);
  font: 700 10px/1 Arial, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.controls-panel h2 {
  margin: 3px 0 0;
  color: var(--gold-strong);
  font-size: 24px;
}

.controls-close {
  padding: 7px 11px;
  border: 1px solid rgba(217, 164, 65, 0.55);
  border-radius: 7px;
  background: rgba(68, 97, 79, 0.46);
  color: var(--parchment);
  font-weight: 700;
  cursor: pointer;
}

.controls-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.controls-grid section {
  padding: 13px 14px;
  border: 1px solid rgba(68, 97, 79, 0.62);
  border-radius: 8px;
  background: rgba(12, 24, 18, 0.28);
}

.controls-grid h3 {
  margin: 0 0 9px;
  color: var(--gold);
  font: 800 12px/1 Arial, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.controls-grid p {
  display: grid;
  grid-template-columns: minmax(112px, auto) 1fr;
  align-items: center;
  gap: 9px;
  margin: 6px 0;
  color: var(--ink);
  font: 12.5px/1.35 Arial, sans-serif;
}

.controls-grid p > span {
  color: var(--muted);
}

.controls-grid kbd {
  justify-self: start;
  padding: 2px 5px;
  border: 1px solid rgba(241, 232, 214, 0.32);
  border-bottom-color: rgba(241, 232, 214, 0.55);
  border-radius: 4px;
  background: rgba(20, 33, 27, 0.72);
  color: var(--parchment);
  font: 700 11px/1.2 Arial, sans-serif;
}

@media (max-width: 720px) {
  .controls-grid { grid-template-columns: 1fr; }
  .controls-panel { padding: 18px; }
}

/* Inspector chain-links rows (§5.2): amber when the chain's draw outruns the built supply. */
.inspector-stat.chain-bad strong {
  color: #e8b25c;
}

/* Memories (§7): the Hall's quiet mystery-clue album. */
.inspector-memories {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(68, 97, 79, 0.6);
  border-radius: 8px;
  background: rgba(20, 33, 27, 0.55);
}

.inspector-memories .memories-head {
  margin-bottom: 6px;
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.inspector-memories .memory-line {
  margin: 4px 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
  font-style: italic;
}

.year-end-unlock {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin-bottom: 20px;
  border: 1px solid rgba(68, 97, 79, 0.82);
  border-radius: 8px;
  background: rgba(68, 97, 79, 0.28);
  text-align: left;
}

.unlock-tag {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: 4px 9px;
  border-radius: 999px;
  background: var(--cranberry);
  color: var(--parchment);
  font-family:
    Arial,
    sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.year-end-unlock strong {
  display: block;
  color: var(--ink);
  font-size: 16px;
}

.year-end-unlock small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 13px;
}

.primary-button {
  width: 100%;
  padding: 13px;
  border: 1px solid var(--gold);
  border-radius: 8px;
  background: var(--gold);
  color: var(--evergreen-night);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  transition:
    transform 140ms ease,
    filter 140ms ease;
}

.primary-button:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* ---- Delete confirmation ("are you sure" box) ---- */
.confirm-overlay {
  position: absolute;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 33, 27, 0.72);
  backdrop-filter: blur(4px);
}

.confirm-overlay[hidden] {
  display: none;
}

.save-conflict-overlay {
  z-index: 110;
}

.save-conflict-box {
  width: min(500px, calc(100vw - 48px));
}

.confirm-box {
  width: min(360px, calc(100vw - 48px));
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(31, 47, 39, 0.98), rgba(20, 33, 27, 0.97)),
    var(--panel-strong);
  box-shadow: var(--shadow);
  text-align: center;
}

.confirm-box h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.1;
  color: var(--gold-strong);
}

.confirm-box p {
  margin: 10px 0 18px;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.confirm-actions button {
  padding: 11px;
  border-radius: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    transform 140ms ease,
    filter 140ms ease;
}

.confirm-cancel {
  border: 1px solid var(--line);
  background: rgba(241, 232, 214, 0.12);
  color: var(--parchment);
}

.confirm-cancel:hover {
  background: rgba(241, 232, 214, 0.18);
  border-color: var(--gold);
}

.confirm-delete {
  border: 1px solid var(--cranberry);
  background: var(--cranberry);
  color: var(--parchment);
}

.confirm-delete:hover {
  transform: translateY(-1px);
  filter: brightness(1.08);
}

/* ---- Tutorial mode (pause-and-point popups) ----
   z 80 = new top of the overlay ladder (confirm/creation sit at 70): the tutorial
   DEFERS to every other overlay while it's open (see tutorial.js eligibleNow), so it
   never competes — the only surface it deliberately sits on is year-end (60), which
   it annotates. An explainer that can be occluded is worse than useless. */
.tutorial-overlay {
  position: absolute;
  inset: 0;
  z-index: 80;
  background: rgba(20, 33, 27, 0.55);
}

.tutorial-overlay.spotlit {
  /* the spotlight's box-shadow paints the dim instead — no double tint */
  background: transparent;
}

.tutorial-overlay[hidden] {
  display: none;
}

.tutorial-spotlight {
  position: absolute;
  border: 2px solid var(--gold);
  border-radius: 10px;
  /* the cutout trick: the giant shadow dims everything EXCEPT the target */
  box-shadow: 0 0 0 9999px rgba(20, 33, 27, 0.55);
  pointer-events: none;
  animation: tutorial-pulse 1.6s ease-in-out infinite;
}

.tutorial-spotlight[hidden] {
  display: none;
}

@keyframes tutorial-pulse {
  0%,
  100% {
    border-color: var(--gold);
  }

  50% {
    border-color: rgba(217, 164, 65, 0.35);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tutorial-spotlight {
    animation: none;
  }
}

/* callout arrow toward the spotlit target (arrow-up = card sits below it) */
.tutorial-card.arrow-up::before,
.tutorial-card.arrow-down::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  border: 9px solid transparent;
}

.tutorial-card.arrow-up::before {
  top: -18px;
  border-bottom-color: var(--gold);
}

.tutorial-card.arrow-down::before {
  bottom: -18px;
  border-top-color: var(--gold);
}

.tutorial-card {
  position: absolute;
  width: min(340px, calc(100vw - 48px));
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(31, 47, 39, 0.98), rgba(20, 33, 27, 0.97)),
    var(--panel-strong);
  box-shadow: var(--shadow);
}

/* ---- Head Elf guided opening ------------------------------------------------
   ?headelf=on runs Pip's action-by-action Year 1 opening. The regular tutorial
   remains available without the flag for A/B comparison. */
.tutorial-overlay.head-elf-active { pointer-events: none; }
.tutorial-overlay.head-elf-active .tutorial-card,
.tutorial-overlay.head-elf-active .tutorial-head-elf-orb { pointer-events: auto; }

.tutorial-card.head-elf-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  width: min(510px, calc(100vw - 64px));
  min-height: 230px;
  padding: 0;
  border-color: rgba(226, 179, 87, 0.84);
  border-radius: 18px 18px 18px 8px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.055), transparent 40%),
    linear-gradient(180deg, rgba(31, 47, 39, 0.985), rgba(13, 24, 19, 0.985));
  box-shadow: 0 24px 54px rgba(5, 12, 8, 0.5), inset 0 0 0 6px rgba(245, 234, 211, 0.035), inset 0 0 0 7px rgba(245, 234, 211, 0.08);
}
.tutorial-card.head-elf-card::before,
.tutorial-card.head-elf-card::after { display: none; }
.tutorial-copy { min-width: 0; }
.head-elf-card .tutorial-copy {
  display: flex;
  flex-direction: column;
  padding: 24px 26px 18px 8px;
}
.tutorial-head-elf-portrait {
  position: relative;
  align-self: stretch;
  display: grid;
  place-items: center;
  min-height: 194px;
  margin: 18px 0 18px -32px;
  z-index: 2;
}
.tutorial-head-elf-portrait[hidden],
.tutorial-head-elf-eyebrow[hidden],
.tutorial-head-elf-guide[hidden],
.tutorial-head-elf-orb[hidden],
.tutorial-minimize[hidden] { display: none; }
.tutorial-head-elf-medallion {
  position: relative;
  width: 128px;
  height: 164px;
  overflow: hidden;
  border: 3px solid #e2b357;
  border-radius: 64px 64px 20px 20px;
  background: radial-gradient(circle at 50% 38%, rgba(255, 217, 135, 0.24), transparent 44%), linear-gradient(180deg, #6c8e7a, #273b31 66%, #14211b);
  box-shadow: 0 12px 28px rgba(3, 8, 5, 0.45), 0 0 0 5px rgba(13, 24, 19, 0.92), 0 0 0 6px rgba(226, 179, 87, 0.42);
}
.tutorial-head-elf-medallion svg { display: block; width: 100%; height: 100%; }
.tutorial-head-elf-spark {
  position: absolute;
  top: 5px;
  right: -6px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 2px solid #fff0bd;
  border-radius: 50%;
  background: var(--cranberry);
  box-shadow: 0 6px 14px rgba(6, 13, 9, 0.45);
  color: #fff3c9;
  font-size: 17px;
  transform: rotate(9deg);
}
.tutorial-head-elf-name {
  position: absolute;
  left: 50%;
  bottom: 4px;
  min-width: 138px;
  padding: 6px 11px 5px;
  border: 1px solid #ffd987;
  border-radius: 5px;
  background: linear-gradient(180deg, #b84642, #842f2d);
  box-shadow: 0 6px 12px rgba(4, 10, 7, 0.38);
  color: #fff5df;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
  white-space: nowrap;
}
.tutorial-head-elf-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 34px 7px 0;
  color: #ffd987;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tutorial-head-elf-eyebrow::before {
  content: "";
  width: 20px;
  height: 1px;
  background: currentColor;
  box-shadow: 4px 0 0 rgba(255, 217, 135, 0.28);
}
.tutorial-card.head-elf-card h3 { color: #fff7e8; font-size: clamp(24px, 2.1vw, 31px); line-height: 1.05; }
.tutorial-card.head-elf-card p {
  max-width: 42ch;
  margin: 10px 0 18px;
  color: rgba(255, 247, 232, 0.8);
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.48;
}
.tutorial-card.head-elf-card .tutorial-actions { margin-top: auto; }
.tutorial-card.head-elf-card .tutorial-off { color: rgba(255, 247, 232, 0.58); }
.tutorial-card.head-elf-card .primary-button {
  min-width: 94px;
  min-height: 38px;
  border-color: #ffd987;
  border-radius: 8px;
  background: linear-gradient(180deg, #ecc66f, #d7a544);
  box-shadow: 0 4px 0 #7e5a23, 0 8px 14px rgba(4, 9, 6, 0.32);
  color: #1b281f;
  font-family: Arial, sans-serif;
  font-size: 13px;
  font-weight: 800;
}
.tutorial-minimize {
  position: absolute;
  top: 14px;
  right: 15px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(245, 234, 211, 0.18);
  border-radius: 50%;
  background: rgba(245, 234, 211, 0.07);
  color: rgba(255, 247, 232, 0.72);
  font: 18px/1 Arial, sans-serif;
  cursor: pointer;
}
.tutorial-minimize:hover,
.tutorial-minimize:focus-visible { border-color: var(--gold); color: var(--parchment); outline: none; }
.tutorial-head-elf-guide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.tutorial-head-elf-guide-underlay { fill: none; stroke: rgba(10, 20, 15, 0.64); stroke-width: 8; stroke-linecap: round; }
.tutorial-head-elf-guide-thread {
  fill: none;
  stroke: #ffd987;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 3 9;
  filter: drop-shadow(0 0 4px rgba(255, 217, 135, 0.72));
  animation: tutorial-head-elf-thread 1.2s linear infinite;
}
.tutorial-head-elf-guide circle { fill: #ffd987; filter: drop-shadow(0 0 5px rgba(255, 217, 135, 0.84)); }
@keyframes tutorial-head-elf-thread { to { stroke-dashoffset: -24; } }
.tutorial-overlay.head-elf-active .tutorial-spotlight {
  border-color: #ffd987;
  border-radius: 14px;
  box-shadow: 0 0 0 5px rgba(226, 179, 87, 0.16), 0 0 28px rgba(255, 217, 135, 0.5), 0 0 0 9999px rgba(7, 15, 11, 0.27);
}
.tutorial-overlay.head-elf-active .tutorial-extra-spotlight {
  z-index: 1;
  background: rgba(255, 217, 135, 0.08);
  box-shadow: 0 0 0 5px rgba(226, 179, 87, 0.2), 0 0 32px 8px rgba(255, 217, 135, 0.72);
}
.tutorial-head-elf-orb {
  position: absolute;
  left: 18px;
  top: 50%;
  z-index: 2;
  display: grid;
  grid-template-columns: 48px auto;
  align-items: center;
  width: 54px;
  height: 54px;
  padding: 2px;
  overflow: hidden;
  border: 2px solid #e2b357;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--forest-surface), var(--evergreen-night));
  box-shadow: 0 12px 28px rgba(4, 10, 7, 0.42);
  color: var(--parchment);
  cursor: pointer;
  transform: translateY(-50%);
  transition: width 200ms ease;
}
.tutorial-head-elf-orb:hover,
.tutorial-head-elf-orb:focus-visible { width: 126px; outline: none; }
.tutorial-head-elf-orb-face {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 1px solid rgba(255, 217, 135, 0.5);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, #769783, #263a30 72%);
}
.tutorial-head-elf-orb-face svg { display: block; width: 44px; height: 44px; transform: translateY(2px); }
.tutorial-head-elf-orb > span:last-child { padding: 0 13px 0 8px; font-family: Arial, sans-serif; font-size: 11px; font-weight: 800; white-space: nowrap; }
.tutorial-overlay.head-elf-minimized { background: transparent; }
.tutorial-overlay.head-elf-minimized .tutorial-card,
.tutorial-overlay.head-elf-minimized .tutorial-spotlight,
.tutorial-overlay.head-elf-minimized .tutorial-head-elf-guide { display: none; }

@media (max-width: 780px) {
  .tutorial-card.head-elf-card { grid-template-columns: 86px minmax(0, 1fr); width: calc(100vw - 32px); min-height: 200px; }
  .tutorial-head-elf-portrait { min-height: 150px; margin-left: -12px; }
  .tutorial-head-elf-medallion { width: 92px; height: 126px; }
  .tutorial-head-elf-name { min-width: 104px; font-size: 8px; }
  .head-elf-card .tutorial-copy { padding: 22px 18px 18px 6px; }
  .tutorial-head-elf-guide { display: none; }
}

.tutorial-card.centered {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.tutorial-card h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
  color: var(--gold-strong);
}

.tutorial-card p {
  margin: 8px 0 16px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
}

.tutorial-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.tutorial-actions .primary-button {
  width: auto;
  padding: 10px 18px;
  font-size: 15px;
}

.tutorial-off {
  padding: 6px 2px;
  border: none;
  background: none;
  color: var(--muted);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
}

.tutorial-off:hover {
  color: var(--parchment);
}

/* the ? chip under the time controls — the opt-in switch */
.tutorial-chip {
  justify-self: start;
  width: 36px;
  height: 30px;
  border: 1px solid rgba(68, 97, 79, 0.86);
  border-radius: 6px;
  background: rgba(31, 47, 39, 0.72);
  color: var(--parchment);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease;
}

.tutorial-chip:hover {
  transform: translateY(-1px);
  border-color: rgba(217, 164, 65, 0.86);
}

.tutorial-chip.active {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--evergreen-night);
}

.tutorial-chip[hidden] {
  display: none;
}

/* ---- Full-screen boot menu -------------------------------------------------
   z 90: the boot surface — nothing may paint over it. The tutorial (80) cannot
   be up while the menu is; the storybook intentionally sits above it at z 95. */
.game-shell.menu-open {
  min-width: 0;
  min-height: 0;
}

/* The map is not merely blurred behind the menu: it is absent until a choice is
   made. This also prevents stray mouse focus from reaching the game chrome. */
.game-shell.menu-open > :not(.menu-overlay):not(.storybook-overlay):not(script) {
  visibility: hidden;
}

.menu-overlay {
  position: absolute;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 48px 48px 74px;
  isolation: isolate;
  background:
    radial-gradient(circle at 15% 12%, rgba(120, 199, 174, 0.26), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(181, 65, 62, 0.2), transparent 27%),
    radial-gradient(ellipse at 50% 115%, rgba(217, 164, 65, 0.15), transparent 44%),
    linear-gradient(145deg, #061b1a 0%, #0d3028 52%, #081b1a 100%);
}

.menu-overlay::before,
.menu-overlay::after {
  content: "";
  position: fixed;
  z-index: -1;
  pointer-events: none;
}

.menu-overlay::before {
  inset: 0;
  opacity: 0.42;
  background:
    linear-gradient(118deg, transparent 0 42%, rgba(146, 215, 192, 0.12) 49%, transparent 58%),
    linear-gradient(62deg, transparent 0 60%, rgba(217, 164, 65, 0.08) 69%, transparent 77%);
  filter: blur(14px);
}

.menu-overlay::after {
  left: -8vw;
  right: -8vw;
  bottom: -11vh;
  height: 29vh;
  border-radius: 50% 50% 0 0;
  background: linear-gradient(180deg, #ecf3ea, #bdcec3 68%, #819c8b);
  box-shadow: 0 -8px 36px rgba(221, 241, 231, 0.12);
}

.menu-overlay[hidden] {
  display: none;
}

.menu-snow {
  position: fixed;
  inset: -80px 0 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.64;
  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.95) 0 1.4px, transparent 1.8px),
    radial-gradient(circle, rgba(255, 255, 255, 0.7) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.48) 0 0.8px, transparent 1.2px);
  background-position: 12px 8px, 70px 42px, 20px 30px;
  background-size: 112px 112px, 158px 158px, 76px 76px;
  animation: menu-snowfall 24s linear infinite;
}

@keyframes menu-snowfall {
  to { transform: translate3d(-28px, 80px, 0); }
}

.menu-stage {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.7fr);
  align-items: center;
  gap: clamp(30px, 5vw, 76px);
  width: min(1180px, calc(100vw - 96px));
}

.menu-brand {
  min-width: 0;
  text-align: center;
}

.menu-logo-frame {
  position: relative;
  padding: 9px;
  overflow: hidden;
  border: 1px solid rgba(244, 222, 164, 0.72);
  border-radius: 26px;
  background: rgba(241, 232, 214, 0.1);
  box-shadow:
    0 30px 80px rgba(0, 7, 6, 0.46),
    0 0 0 4px rgba(241, 232, 214, 0.05),
    inset 0 1px rgba(255, 255, 255, 0.3);
  transform: rotate(-0.45deg);
}

.menu-logo-frame::after {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 18px;
  pointer-events: none;
}

.menu-logo {
  display: block;
  width: 100%;
  aspect-ratio: 1607 / 979;
  object-fit: cover;
  border-radius: 18px;
}

.menu-tagline {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 19px 0 0;
  color: rgba(241, 232, 214, 0.82);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.menu-tagline span + span::before {
  content: "✦";
  margin-right: 18px;
  color: var(--gold);
}

.menu-panel {
  position: relative;
  width: 100%;
  padding: clamp(28px, 3.4vw, 46px);
  overflow: hidden;
  border: 1px solid rgba(217, 164, 65, 0.58);
  border-radius: 22px;
  background:
    linear-gradient(145deg, rgba(31, 62, 50, 0.98), rgba(9, 31, 27, 0.98)),
    var(--panel-strong);
  box-shadow:
    0 30px 70px rgba(0, 7, 6, 0.42),
    inset 0 1px rgba(255, 255, 255, 0.09);
}

.menu-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 30px;
  right: 30px;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.menu-kicker {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ead39d;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.menu-kicker span {
  font-size: 15px;
}

.menu-panel h1 {
  margin: 10px 0 0;
  color: #fff6df;
  font-size: clamp(34px, 3.5vw, 48px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 0.98;
  text-wrap: balance;
}

.menu-subtitle {
  margin: 17px 0 27px;
  color: rgba(241, 232, 214, 0.78);
  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.55;
}

.menu-actions {
  display: grid;
  gap: 10px;
}

.menu-button {
  position: relative;
  width: 100%;
  min-height: 58px;
  padding: 11px 17px;
  border: 1px solid rgba(241, 232, 214, 0.24);
  border-radius: 11px;
  background: rgba(241, 232, 214, 0.07);
  color: var(--parchment);
  font-family: Arial, sans-serif;
  text-align: left;
  cursor: pointer;
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.menu-button-label,
.menu-button-detail {
  display: block;
}

.menu-button-label {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
}

.menu-button-detail {
  margin-top: 3px;
  color: rgba(241, 232, 214, 0.62);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.menu-button:not(:disabled):hover {
  transform: translateY(-1px);
  border-color: rgba(217, 164, 65, 0.82);
  background: rgba(241, 232, 214, 0.11);
}

.menu-button:focus-visible,
.menu-story-button:focus-visible {
  outline: 3px solid #f5c85d;
  outline-offset: 3px;
}

.menu-button.primary-button {
  border-color: #f3d084;
  background: linear-gradient(180deg, #f7e6bd, #dcb560);
  box-shadow: 0 10px 28px rgba(217, 164, 65, 0.17);
  color: #173128;
}

.menu-button.primary-button .menu-button-detail {
  color: rgba(20, 47, 38, 0.7);
}

.menu-button.primary-button:not(:disabled):hover {
  border-color: #fff2c9;
  background: linear-gradient(180deg, #fff0cb, #e7bf66);
  box-shadow: 0 13px 30px rgba(217, 164, 65, 0.24);
}

.menu-button:disabled {
  border-style: dashed;
  background: rgba(4, 19, 16, 0.22);
  color: rgba(241, 232, 214, 0.4);
  cursor: not-allowed;
}

.menu-button:disabled .menu-button-detail {
  color: rgba(241, 232, 214, 0.33);
}

.menu-story-button {
  justify-self: center;
  margin-top: 2px;
  padding: 7px 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: rgba(241, 232, 214, 0.7);
  font-family: Arial, sans-serif;
  font-size: 12px;
  text-decoration: underline;
  text-decoration-color: rgba(217, 164, 65, 0.48);
  text-underline-offset: 4px;
  cursor: pointer;
}

.menu-story-button:hover {
  color: #fff6df;
}

/* An armed New-Game button — the second click is the one that erases. */
.menu-button.menu-danger {
  border-color: #e07570;
  background: rgba(181, 65, 62, 0.24);
}

.menu-button.menu-danger:hover {
  border-color: #f09892;
  background: rgba(181, 65, 62, 0.32);
}

.menu-keyboard-hint {
  margin: 21px 0 0;
  color: rgba(241, 232, 214, 0.44);
  font-family: Arial, sans-serif;
  font-size: 10.5px;
  text-align: center;
}

.menu-keyboard-hint kbd {
  display: inline-grid;
  min-width: 20px;
  min-height: 20px;
  margin: 0 2px;
  place-items: center;
  border: 1px solid rgba(241, 232, 214, 0.24);
  border-radius: 4px;
  background: rgba(4, 19, 16, 0.3);
  box-shadow: none;
  color: rgba(241, 232, 214, 0.72);
  font-family: Arial, sans-serif;
  font-size: 9px;
}

.menu-confirm {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(3, 18, 15, 0.74);
  backdrop-filter: blur(8px);
}

.menu-confirm[hidden] {
  display: none;
}

.menu-confirm-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 6px 18px;
  width: min(470px, calc(100vw - 48px));
  padding: 28px;
  border: 1px solid rgba(217, 164, 65, 0.72);
  border-radius: 18px;
  background:
    linear-gradient(145deg, rgba(31, 62, 50, 0.99), rgba(8, 29, 25, 0.99)),
    var(--panel-strong);
  box-shadow:
    0 30px 80px rgba(0, 7, 6, 0.62),
    inset 0 1px rgba(255, 255, 255, 0.1);
}

.menu-confirm-icon {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid rgba(217, 164, 65, 0.7);
  border-radius: 50%;
  background: rgba(217, 164, 65, 0.14);
  color: #f1cf83;
  font-size: 30px;
  font-weight: 700;
}

.menu-confirm-kicker {
  margin: 1px 0 5px;
  color: #e7c878;
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.menu-confirm-card h2 {
  margin: 0;
  color: #fff6df;
  font-size: 27px;
  line-height: 1.08;
}

.menu-confirm-card p:last-child {
  margin: 11px 0 0;
  color: rgba(241, 232, 214, 0.76);
  font-family: Arial, sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
}

.menu-confirm-actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 20px;
}

.menu-confirm-actions button {
  min-height: 48px;
  padding: 10px 13px;
  border-radius: 9px;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
}

.menu-confirm-safe {
  border: 1px solid #f3d084;
  background: linear-gradient(180deg, #f7e6bd, #dcb560);
  color: #173128;
}

.menu-confirm-skip {
  border: 1px solid rgba(241, 232, 214, 0.3);
  background: rgba(241, 232, 214, 0.08);
  color: var(--parchment);
}

.menu-confirm-actions button:hover {
  filter: brightness(1.06);
}

.menu-confirm-actions button:focus-visible {
  outline: 3px solid #f5c85d;
  outline-offset: 3px;
}

.menu-footer {
  position: absolute;
  z-index: 2;
  right: 24px;
  bottom: 19px;
  left: 24px;
  display: flex;
  justify-content: center;
  gap: 14px;
  color: rgba(12, 44, 36, 0.7);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.menu-footer-star {
  color: #9d6c20;
}

@media (max-width: 900px) {
  .menu-overlay {
    align-items: start;
    padding: 28px 24px 78px;
  }

  .menu-stage {
    grid-template-columns: 1fr;
    gap: 24px;
    width: min(560px, calc(100vw - 48px));
  }

  .menu-logo-frame {
    width: min(520px, 100%);
    margin-inline: auto;
  }

  .menu-tagline {
    margin-top: 12px;
  }
}

@media (max-width: 560px) {
  .menu-overlay {
    padding: 18px 14px 72px;
  }

  .menu-stage {
    gap: 18px;
    width: 100%;
  }

  .menu-logo-frame {
    padding: 5px;
    border-radius: 18px;
  }

  .menu-logo,
  .menu-logo-frame::after {
    border-radius: 13px;
  }

  .menu-logo-frame::after {
    inset: 5px;
  }

  .menu-tagline {
    gap: 8px;
    font-size: 9px;
    letter-spacing: 0.11em;
  }

  .menu-tagline span + span::before {
    margin-right: 8px;
  }

  .menu-panel {
    padding: 24px 20px 21px;
    border-radius: 17px;
  }

  .menu-panel h1 {
    font-size: 32px;
  }

  .menu-subtitle {
    margin: 13px 0 20px;
    font-size: 13px;
  }

  .menu-button {
    min-height: 54px;
  }

  .menu-keyboard-hint {
    display: none;
  }

  .menu-confirm-card {
    grid-template-columns: 1fr;
    padding: 24px 20px;
  }

  .menu-confirm-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 5px;
    font-size: 25px;
  }

  .menu-confirm-actions {
    grid-template-columns: 1fr;
  }

  .menu-footer {
    gap: 7px;
    font-size: 8px;
    letter-spacing: 0.08em;
  }
}

@media (max-height: 720px) and (min-width: 901px) {
  .menu-overlay {
    padding-block: 28px 56px;
  }

  .menu-stage {
    width: min(1060px, calc(100vw - 56px));
    gap: 36px;
  }

  .menu-panel {
    padding: 25px 30px;
  }

  .menu-panel h1 {
    font-size: 36px;
  }

  .menu-subtitle {
    margin: 12px 0 18px;
  }

  .menu-button {
    min-height: 51px;
    padding-block: 8px;
  }

  .menu-keyboard-hint {
    margin-top: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu-snow {
    animation: none;
  }
}
.inspector {
  position: absolute;
  /* Above the hangers (z 15). They no longer reach this far down — the ornament and the
     ribbon both stop at 80px, where the retired Letters panel ran to 112 and, expanded,
     to 320 — but selection is the active intent, so the inspector still wins any overlap.
     top: 92 is 12px of air under the hangers; the bottom edge is unchanged (100vh - 24). */
  z-index: 16;
  right: 24px;
  top: 92px;
  width: 312px;
  min-height: 148px;
  max-height: calc(100vh - 116px);
  padding: 15px;
  border-radius: 8px;
  overflow-y: auto;
}

.inspector[hidden] {
  display: none;
}

.inspector small {
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}

.inspector h2 {
  margin: 4px 0 0;
  color: var(--gold-strong);
  font-size: 21px;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(4, 11, 8, 0.78);
}

.inspector p {
  margin: 12px 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
}

/* Inspector close (✕) — top-right, shown only when a building is selected. */
.inspector-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--gold);
  color: var(--evergreen-night);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition:
    background 140ms ease,
    color 140ms ease,
    border-color 140ms ease;
}

.inspector-close:hover {
  background: var(--parchment);
  border-color: var(--red);
  color: var(--evergreen-night);
}

.inspector-close[hidden] {
  display: none;
}

.inspector-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.inspector-stat {
  min-height: 48px;
  padding: 8px;
  border: 1px solid rgba(68, 97, 79, 0.74);
  border-radius: 7px;
  background: rgba(68, 97, 79, 0.28);
}

.inspector-stat span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}

.inspector-stat strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 15px;
}

/* Builder editing controls (Rotate / Move / Delete) — full-width row in the stats grid. */
.inspector-edit {
  grid-column: 1 / -1;
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.edit-btn {
  flex: 1;
  cursor: pointer;
  padding: 8px 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--parchment);
  background: rgba(31, 47, 39, 0.72);
  border: 1px solid var(--line, rgba(68, 97, 79, 0.86));
  border-radius: 8px;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}
.edit-btn:hover { background: rgba(68, 97, 79, 0.44); border-color: var(--gold, #D9A441); }
.edit-btn:active { transform: translateY(1px); }
.edit-btn.is-active { background: var(--gold, #D9A441); color: var(--evergreen-night); border-color: var(--gold); }
/* `.edit-danger` retired with the stat-row stack: Delete is a rail button now
   (.rail-btn.rail-danger below), and .edit-btn survives only for the Bellhouse's Fund and
   Fly controls and the contextual row (Lights, roof-lights, ✦ board). */
/* The lone primary action (Move) — slightly warmer so it reads as THE action. */
.edit-btn.edit-primary { background: rgba(217, 164, 65, 0.22); border-color: rgba(217, 164, 65, 0.7); }
.edit-btn.edit-primary:hover { background: rgba(217, 164, 65, 0.32); border-color: var(--gold, #D9A441); }

/* ---- Building inspector composite (UI redesign P4) ------------------------
   The single-building panel: status line, Wants strip, facts band, next-batch
   meter, Level 2 lock row, contextual controls, then the fixed action rail.
   Everything full-width opts out of .inspector-stats' two-column grid; the
   housing coverage pair is the one thing that wants both columns. Selectors are
   scoped under .inspector-stats where the older .inspector p / .inspector small
   rules would otherwise win on specificity. */

/* 1. Status line: coloured dot + verb phrase + the type description as <small>. */
.inspector-stats .inspector-status {
  grid-column: 1 / -1;
  margin: 0 0 2px;
  color: var(--parchment);
  font-size: 13.5px;
  line-height: 1.35;
}

.inspector-stats .inspector-status strong {
  font-weight: 700;
}

.inspector-stats .inspector-status small {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}

.statusdot {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 6px;
  border-radius: 50%;
  vertical-align: 1px;
}

/* Deliberately not var(--green): that token is the panel-edge holly border and reads
   about 2:1 on this background. A "working" dot has to be legible. */
.dot-ok { background: #83c783; box-shadow: 0 0 7px rgba(131, 199, 131, 0.7); }
.dot-warn { background: var(--candle-gold); box-shadow: 0 0 7px rgba(217, 164, 65, 0.7); }
.dot-idle { background: rgba(241, 232, 214, 0.42); }
.dot-build { background: var(--blue); box-shadow: 0 0 7px rgba(106, 139, 122, 0.7); }

/* 2. Wants strip: inputs ➜ output, as art. */
.inspector-stats .wants-strip {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 14px 6px 9px;
  border: 1px solid rgba(68, 97, 79, 0.7);
  border-radius: 8px;
  background: rgba(20, 33, 27, 0.5);
}

/* The legend sits on the border like a fieldset's. --panel-strong is within a few
   percent of the panel gradient behind it at this height, so the seam does not read. */
.wants-head {
  position: absolute;
  top: -8px;
  left: 12px;
  padding: 0 6px;
  background: var(--panel-strong);
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wants-item {
  width: 54px;
  text-align: center;
}

.wants-icon {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  cursor: help;
}

.wants-icon:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

.wants-art {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 34px;
}

.wants-art img {
  display: block;
  width: 34px;
  height: 34px;
}

.wants-item b,
.wants-out strong {
  display: block;
  margin-top: 3px;
  color: var(--parchment);
  font-family: Arial, sans-serif;
  font-size: 10.5px;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

/* Nothing arriving at all: dim the icon and flag it. */
.wants-flag { display: none; }

.wants-item.is-flagged .wants-art img { filter: grayscale(0.9) brightness(0.75); }

.wants-item.is-flagged .wants-flag {
  position: absolute;
  top: -4px;
  right: -4px;
  display: block;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--candle-gold);
  color: #3d2c0d;
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 15px;
}

.wants-item.is-flagged b { color: var(--candle-gold); }

/* Arriving, but short or from partly idle suppliers: an amber ring, no alarm. */
.wants-item.is-ringed .wants-art {
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.75);
}

.wants-item.is-ringed b { color: #e8b25c; }

.wants-plus,
.wants-arrow {
  align-self: center;
  margin-top: 5px;
  color: rgba(241, 232, 214, 0.5);
}

.wants-plus { font-size: 13px; }
.wants-arrow { font-size: 15px; }

/* The explanation the old chain rows spelled out, now a tooltip on a focusable icon.
   It anchors to the STRIP, not the tile, so a long sentence can never push past the
   panel edge (the inspector scrolls, and a clipped tip would be unreadable). */
.wants-tip {
  position: absolute;
  top: calc(100% + 6px);
  right: 8px;
  left: 8px;
  z-index: 3;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  /* Opaque, not --panel-strong: the tip lands on top of the facts band, and 3% of the tiles
     bleeding through made the sentence hard to read. */
  background: #1c2b23;
  box-shadow: var(--shadow);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease;
}

.wants-tip strong {
  color: var(--parchment);
  font-weight: normal;
}

.wants-tip.chain-bad strong { color: #e8b25c; }

.wants-item:hover .wants-tip,
.wants-item:focus-within .wants-tip,
.wants-item.is-open .wants-tip {
  opacity: 1;
}

/* Wrap Hut good toggles (§3.3) — pressed squares, right under the Wants strip. */
.inspector-stats .wrap-goods {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.wrap-goods-head {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.wrap-square {
  min-width: 46px;
  padding: 5px 8px;
  border: 1px solid rgba(68, 97, 79, 0.8);
  border-radius: 6px;
  background: rgba(31, 47, 39, 0.72);
  color: var(--parchment);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.wrap-square:hover { border-color: var(--gold); }

.wrap-square.is-active {
  border-color: var(--gold);
  background: var(--gold);
  box-shadow: inset 0 2px 4px rgba(4, 11, 8, 0.3);
  color: var(--evergreen-night);
}

/* 3. Facts band: Staff · "<Output> go to" · Line — and housing's coverage pair. */
.inspector-stats .inspector-band {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* Content-sized basis, not `1 1 0`: an equal three-way split squeezed "1 · Wrap Hut" onto two
   lines at the 300px panel while Staff sat half empty. */
.band-cell {
  flex: 1 1 auto;
  min-width: 62px;
  padding: 7px 6px;
  border: 1px solid rgba(68, 97, 79, 0.5);
  border-radius: 7px;
  background: rgba(68, 97, 79, 0.16);
  text-align: center;
}

.band-cell.band-grow { flex-grow: 2; }
.band-cell.band-wide { flex-basis: 100%; }

.band-cell > span {
  display: block;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  line-height: 1.2;
  text-transform: uppercase;
}

.band-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  margin-top: 4px;
  color: var(--parchment);
  font-size: 13px;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
}

.band-value img { width: 18px; height: 18px; }
.band-value strong { font-weight: normal; }

.band-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.band-link:hover { text-decoration: underline; }
.band-link.is-active { color: var(--parchment); }

.band-coverage .band-cell {
  flex-basis: calc(50% - 4px);
  text-align: left;
}

.band-coverage .band-value { justify-content: flex-start; }

.band-cell em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.band-cell em strong {
  color: var(--parchment);
  font-weight: normal;
}

/* 5. Level 2 lock row — one line, three states. */
.inspector-stats .lock-row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 7px 10px;
  border: 1px solid rgba(68, 97, 79, 0.55);
  border-radius: 7px;
  background: rgba(20, 33, 27, 0.4);
  color: var(--muted);
  font-size: 12.5px;
}

.lock-row b {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--parchment);
  font-weight: normal;
}

.lock-pad {
  font-size: 13px;
  color: rgba(241, 232, 214, 0.55);
}

/* The requirement under a lock that has no ✦ shortcut to jump to (Improved Loading Bays:
   its gate is a Great Flight part, not a magic-board node). `flex: 1 1 100%` drops it onto
   the row's second line — same component, not a stray paragraph below it. */
.lock-note {
  flex: 1 1 100%;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.lock-row.is-done { opacity: 0.82; }
.lock-row.is-done .lock-pad { color: #9fc79f; }
.lock-row.is-ready { border-color: rgba(217, 164, 65, 0.5); }
.lock-row.is-ready .lock-pad { color: var(--gold); }

.lock-go {
  flex: 0 0 auto;
  padding: 4px 9px;
  border: 1px solid rgba(217, 164, 65, 0.55);
  border-radius: 6px;
  background: rgba(217, 164, 65, 0.14);
  color: var(--gold);
  font: inherit;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}

.lock-go:hover:not(:disabled) {
  border-color: var(--gold);
  background: rgba(217, 164, 65, 0.28);
}

.lock-go:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* The Depot's standing notes — same words, quieter frame. */
.inspector-stats .inspector-note {
  grid-column: 1 / -1;
  margin-top: 8px;
  padding: 2px 0 2px 9px;
  border-left: 2px solid rgba(68, 97, 79, 0.7);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.35;
}

.inspector-stats .inspector-note b {
  display: block;
  color: var(--parchment);
  font-size: 12.5px;
  font-weight: normal;
}

.inspector-stats .inspector-note small {
  display: block;
  margin-top: 2px;
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}

/* 7. Contextual controls: their OWN row above the rail, so Lights or roof-lights can
   never shuffle Move/Another/Pause/Delete under the player's cursor. */
.inspector-stats .inspector-context {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 10px;
}

.inspector-stats .inspector-context .edit-btn {
  flex: 1 1 100%;
  font-size: 12px;
}

/* 6. The universal action rail — fixed set, icon over a small label. */
.inspector-stats .action-rail {
  grid-column: 1 / -1;
  display: flex;
  gap: 7px;
  margin-top: 10px;
}

.rail-btn {
  flex: 1 1 0;
  display: grid;
  gap: 1px;
  place-items: center;
  padding: 7px 2px 5px;
  border: 1px solid rgba(68, 97, 79, 0.8);
  border-radius: 7px;
  background: rgba(68, 97, 79, 0.28);
  color: var(--parchment);
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, transform 0.06s ease;
}

.rail-btn i {
  font-size: 15px;
  font-style: normal;
  line-height: 1;
}

.rail-btn span {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 9.5px;
}

.rail-btn:hover { border-color: var(--gold); background: rgba(68, 97, 79, 0.46); }
.rail-btn:active { transform: translateY(1px); }

.rail-btn.rail-primary { border-color: rgba(217, 164, 65, 0.7); background: rgba(217, 164, 65, 0.16); }
.rail-btn.rail-primary:hover { background: rgba(217, 164, 65, 0.3); }
.rail-btn.rail-danger { border-color: rgba(181, 65, 62, 0.65); }
.rail-btn.rail-danger i { color: #e08a86; }
.rail-btn.rail-danger:hover { border-color: var(--red); background: var(--cranberry); }
.rail-btn.rail-danger:hover i { color: var(--ink); }

/* Last, so an armed Move/Pause wins over the primary and danger tints. */
.rail-btn.is-active {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--evergreen-night);
}

.rail-btn.is-active i,
.rail-btn.is-active span { color: rgba(20, 33, 27, 0.86); }

@media (prefers-reduced-motion: reduce) {
  .wants-tip,
  .rail-btn {
    transition: none;
  }
}

/* ---- Bellhouse restoration tracker (UI redesign P5) ------------------------
   The Great Flight panel: five bell nodes, one part card, ONE cheer meter where
   five finance rows used to stack. It borrows P4's components wherever it can
   (.inspector-band for the finale jobs, .action-rail for Move/Delete,
   .meter-track for the meter) — only the tracker and the part card are new.
   Everything is full-width in .inspector-stats' two-column grid, and every rule
   is scoped so the older `.inspector p` / `.inspector small` rules do not win. */
/* The tracker is the first thing under the header now that the panel's description
   paragraph is gone (mock A has no body copy), so the breathing room it used to
   borrow from that paragraph's margin lives here instead. */
.inspector-stats .gf-tracker {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.gf-node {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(68, 97, 79, 0.9);
  border-radius: 50%;
  background: rgba(20, 33, 27, 0.6);
  color: rgba(241, 232, 214, 0.4);
  font-size: 14px;
  line-height: 1;
}

.gf-node.is-built {
  border-color: var(--candle-gold);
  background: radial-gradient(circle at 36% 30%, #f0d494, var(--candle-gold) 62%, #8f6a2a);
  box-shadow: 0 0 9px rgba(217, 164, 65, 0.4);
  color: #3d2c0d;
}

.gf-node.is-next {
  border-color: var(--candle-gold);
  color: var(--gold);
}

.gf-link { width: 16px; height: 2px; background: rgba(68, 97, 79, 0.9); }
.gf-link.is-built { background: var(--candle-gold); }

.inspector-stats .gf-progress {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

.gf-progress strong { color: var(--muted); font-weight: 700; }

.inspector-stats .gf-state {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  font-style: italic;
  line-height: 1.4;
}

/* The next part, as one card: name, one story line, the cheer meter, the button. */
.inspector-stats .gf-part {
  grid-column: 1 / -1;
  padding: 11px 12px;
  border: 1px solid rgba(68, 97, 79, 0.7);
  border-radius: 8px;
  background: rgba(20, 33, 27, 0.5);
}

.gf-part-kicker {
  display: block;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.inspector-stats .gf-part-name {
  margin: 3px 0 4px;
  color: var(--parchment);
  font-size: 16px;
  line-height: 1.2;
}

.inspector-stats .gf-part-body {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

/* The Chapter gate, said once, in the card it gates. */
.inspector-stats .gf-part-note {
  margin: 7px 0 0;
  color: var(--gold);
  font-size: 12px;
  line-height: 1.35;
}

.gf-cheer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
}

.gf-cheer img { width: 26px; height: 26px; }

.gf-cheer b {
  color: var(--parchment);
  font-size: 14px;
  font-weight: normal;
  font-variant-numeric: tabular-nums;
  line-height: 1.3;
}

.gf-cheer b span {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 11px;
}

.inspector-stats .gf-meter { height: 8px; margin-top: 8px; }

.inspector-stats .gf-weeks {
  margin: 6px 0 0;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 11px;
}

/* The one-time placement instruction, right above the control it names. */
.inspector-stats .gf-first-step {
  margin: 9px 0 0;
  color: var(--gold);
  font-size: 12px;
  line-height: 1.35;
}

.gf-first-step strong { font-weight: 700; }

.inspector-stats .gf-fund {
  display: block;
  width: 100%;
  margin-top: 11px;
}

.inspector-stats .gf-fund[disabled] { cursor: default; opacity: 0.62; }

.inspector-stats .gf-issue {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 11.5px;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}

.inspector-stats .gf-later {
  margin: 9px 0 0;
  color: rgba(241, 232, 214, 0.5);
  font-size: 11.5px;
  font-style: italic;
  line-height: 1.35;
}

.inspector-stats .gf-final {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--parchment);
  font-size: 13px;
  line-height: 1.4;
}

/* Beat 5: the requirement sentence, then the two jobs as a P4 facts band. */
.inspector-stats .gf-finale {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  color: var(--parchment);
  font-size: 12.5px;
  line-height: 1.35;
}

.gf-finale strong { font-weight: 700; }

.inspector-stats .gf-finale + .inspector-band { margin-top: 6px; }

/* Two buttons, not four: keep them icon-sized instead of stretching one Move
   button across the whole panel. */
.inspector-stats .action-rail.gf-rail { justify-content: flex-start; }
.gf-rail .rail-btn { flex: 0 0 92px; }

/* Santa Magic upgrade board (Great Hall inspector) — full-width in the stats grid. */
.inspector-magic {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
  padding: 8px;
  border: 1px solid rgba(217, 164, 65, 0.5);
  border-radius: 8px;
  background: rgba(217, 164, 65, 0.10);
}
.inspector-magic .magic-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--muted);
}
.inspector-magic .magic-head strong { color: var(--gold, #D9A441); font-size: 15px; }
.magic-card {
  padding: 6px 8px;
  border: 1px solid rgba(68, 97, 79, 0.6);
  border-radius: 6px;
  background: rgba(68, 97, 79, 0.24);
}
.magic-card.owned { opacity: 0.72; border-color: rgba(217, 164, 65, 0.5); }
.magic-card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.magic-card-head strong { color: var(--ink); font-size: 13px; }
.magic-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.3; }
.magic-buy {
  flex: none;
  cursor: pointer;
  padding: 4px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--evergreen-night, #11271b);
  background: var(--gold, #D9A441);
  border: 1px solid var(--gold, #D9A441);
  border-radius: 6px;
}
.magic-buy:hover { filter: brightness(1.08); }
.magic-buy:active { transform: translateY(1px); }
.magic-buy:disabled { cursor: default; color: var(--muted); background: transparent; border-color: rgba(120, 120, 120, 0.4); }
.magic-owned { font-size: 12px; font-weight: 700; color: var(--gold, #D9A441); white-space: nowrap; }

/* ---- the Santa Magic button + board overlay (Y3 rework: magic spending is a
   first-class surface, not a Great Hall inspector section) ------------------- */
.magic-button {
  /* rides the bottom-left time-cluster column (Presents / North Pole / speed) — the
     top-right corner belongs to the full-width topbar chips + the Letters panel */
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 12px;
  border: 1px solid rgba(217, 164, 65, 0.54);
  border-radius: 8px;
  background: rgba(16, 28, 22, 0.92);
  box-shadow: var(--shadow);
  cursor: pointer;
  font: inherit;
  text-align: left;
  pointer-events: auto;
}
.magic-button:hover { filter: brightness(1.12); }
.magic-button-star {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(217, 164, 65, 0.54);
  background: rgba(217, 164, 65, 0.14);
  color: var(--gold-strong);
}
.magic-button strong { display: block; color: var(--gold, #D9A441); font-size: 15px; line-height: 1.1; }
.magic-button small { display: block; color: var(--muted); font-family: Arial, sans-serif; font-size: 10px; }
/* something on the board is buyable right now — the quiet nudge Blessings never had */
.magic-button.affordable { border-color: var(--gold-strong); box-shadow: 0 0 10px rgba(217, 164, 65, 0.45); }
/* A new year just opened with points to spend: pulse for a few seconds so the ✦ button
   catches the eye of a player clicking away from the Eve recap, then settle back to the
   steady `affordable` ring. Cleared as soon as the board is opened. */
@keyframes magic-year-start-pulse {
  0%, 100% { box-shadow: 0 0 10px rgba(217, 164, 65, 0.45); transform: scale(1); }
  50%      { box-shadow: 0 0 22px rgba(217, 164, 65, 0.95); transform: scale(1.06); }
}
.magic-button.year-start-pulse { animation: magic-year-start-pulse 1.1s ease-in-out 6; }
@media (prefers-reduced-motion: reduce) {
  .magic-button.year-start-pulse { animation: none; box-shadow: 0 0 18px rgba(217, 164, 65, 0.85); }
}

.magic-overlay {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  background: rgba(6, 12, 9, 0.55);
  pointer-events: auto;
}

/* display:grid above would override the hidden attribute's UA display:none — without
   this the invisible overlay blankets the screen and eats every click (capture-caught) */
.magic-overlay[hidden] {
  display: none;
}
.magic-panel {
  /* Wide rectangle, not a 560px tower — the single column scrolled seven cards deep
     while the rest of the monitor sat empty (Taylor, 2026-07-20). Cards flow into
     however many 320px+ columns fit; small windows land back at one column. */
  width: min(1120px, calc(100vw - 80px));
  max-height: min(80vh, 700px);
  overflow-y: auto;
  padding: 16px 18px;
  border: 1px solid rgba(217, 164, 65, 0.4);
  border-radius: 10px;
  background: rgba(16, 28, 22, 0.97);
  box-shadow: var(--shadow);
}
/* The board reuses the inspector's .inspector-magic wrapper — the inspector keeps its
   flex column; only the overlay spreads it into a grid. Subheads span the full row. */
.magic-panel .inspector-magic {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 8px;
}
.magic-panel .magic-subhead {
  grid-column: 1 / -1;
}
.magic-panel .magic-board-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(68, 97, 79, 0.72);
}
.magic-panel .magic-board-head h2 { margin: 0; color: var(--gold, #D9A441); font-size: 19px; }
.magic-panel .magic-board-head strong { color: var(--gold-strong); font-size: 16px; white-space: nowrap; }
.magic-panel .magic-board-close {
  border: none;
  background: none;
  color: var(--muted);
  font-size: 16px;
  cursor: pointer;
  padding: 2px 6px;
}
.magic-panel .magic-board-close:hover { color: var(--ink); }
/* Wonder's second home (UI redesign 1B). One quiet line, not a card in the buy grid —
   it is a modifier on what this board pays out, not something you can spend. */
.magic-panel .magic-wonder {
  margin: 0 0 12px;
  padding: 8px 11px;
  border: 1px solid rgba(68, 97, 79, 0.6);
  border-radius: 7px;
  background: rgba(68, 97, 79, 0.28);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.35;
}
.magic-panel .magic-wonder strong {
  color: var(--gold-strong);
  font-size: 14px;
}
.magic-panel .magic-wonder small { font-size: 12px; }
.magic-panel .magic-card { margin: 6px 0; }
.magic-panel .magic-subhead {
  margin: 12px 0 4px;
  color: var(--gold, #D9A441);
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Memories album — moved into the Hall Room with the kid (Y3 rework) */
.hallroom-memories {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(68, 97, 79, 0.6);
  border-radius: 8px;
  background: rgba(9, 18, 14, 0.55);
}
.hallroom-memories .memories-head {
  margin-bottom: 6px;
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hallroom-memories .memory-line {
  margin: 4px 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
  font-style: italic;
}

/* Live production-cycle bar in the inspector (PACING-PLAN.md P2) */
.inspector-cycle {
  grid-column: 1 / -1;
  margin-top: 2px;
}

.inspector-cycle .cycle-head {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}

.inspector-cycle .cycle-head strong {
  color: var(--parchment);
}

.inspector-cycle .meter-track {
  margin-top: 6px;
  height: 10px;
}

/* Compact strip dock (decor overhaul): one bar of tabs/chips/label + ONE row of
   square model cards that scrolls horizontally. ~120px tall expanded, ~44px
   collapsed — the old 6-column card grid reached 42vh on the Decor tab. */
.build-dock {
  position: absolute;
  z-index: 18;
  left: 50%;
  bottom: 18px;
  /* 100vw - 560px keeps ≥6px off the time cluster (right edge 274px) on the left and
     mirrors it on the right — the Decorate tab's six sub-chips + "Placing" label were
     truncating at the old 820px cap (decor polish #5). Floor 580px = the old floor, so
     sub-1140px widths behave exactly as before (the <1100px block takes over below). */
  width: min(1080px, max(580px, calc(100vw - 560px)));
  min-width: 430px;
  transform: translateX(-50%);
  border-radius: 8px;
  pointer-events: auto;
}

.dock-bar {
  display: flex;
  /* the full Decorate bar (4 tabs + 7 chips + Placing label) needs ~965px — below
     that the chips/label row wraps under the tabs instead of truncating (decor
     polish #5); the dock grows to ~145px only then (boot test guards < 150px) */
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 6px 8px 0;
  min-height: 34px;
}

.dock-tabs {
  display: flex;
  gap: 2px;
}

.dock-tabs button {
  min-height: 26px;
  padding: 2px 12px;
  border-radius: 6px 6px 0 0;
  color: var(--ink);
  font-size: 13px;
  white-space: nowrap;
}

.dock-tabs button.active {
  color: var(--evergreen-night);
}

.dock-subtabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.dock-subtabs button {
  padding: 2px 9px;
  border: 1px solid rgba(68, 97, 79, 0.72);
  border-radius: 10px;
  background: rgba(31, 47, 39, 0.72);
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

.dock-subtabs button.active {
  border-color: var(--gold);
  color: #fff4db;
  background: rgba(217, 164, 65, 0.16);
}

/* §D4 collection counts: the quiet placed/total on a started set's chip */
.dock-subtabs .set-count {
  opacity: 0.62;
  font-size: 10px;
}

/* §D6 postcard mode (F8): the HUD breathes out and the village poses.
   Every HUD surface fades + stops catching clicks; the canvas stays live.
   Toasts and the head-elf orb are in the list so they can't land in a shot;
   a live tutorial CARD stays visible on purpose (it swallows every key while
   up — hiding it invisibly would soft-lock the keyboard). */
.topbar, .time-cluster, .hud-hangers, .inspector, .build-dock,
.floating-tip, .place-hint, .bottom-controls, .toast-stack, .tutorial-head-elf-orb {
  transition: opacity 0.6s ease;
}
body.postcard .topbar,
body.postcard .time-cluster,
body.postcard .hud-hangers,
body.postcard .inspector,
body.postcard .build-dock,
body.postcard .floating-tip,
body.postcard .place-hint,
body.postcard .bottom-controls,
body.postcard .toast-stack,
body.postcard .tutorial-head-elf-orb {
  opacity: 0;
  pointer-events: none;
}

/* H — the recording hide: everything postcard fades PLUS the postcard strip
   itself snaps away instantly (visibility, no transition), leaving only the
   canvas for screen capture. Same key exits; Esc also lifts it. The tutorial
   card is excluded for the same soft-lock reason as above. */
body.ui-hidden .topbar,
body.ui-hidden .time-cluster,
body.ui-hidden .hud-hangers,
body.ui-hidden .inspector,
body.ui-hidden .build-dock,
body.ui-hidden .floating-tip,
body.ui-hidden .place-hint,
body.ui-hidden .bottom-controls,
body.ui-hidden .toast-stack,
body.ui-hidden .tutorial-head-elf-orb,
body.ui-hidden .postcard-controls {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

.dock-current {
  margin-left: auto;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* §D2 color swatches: the armed card's colorways, now a pill floating centered above
   the dock (Taylor, eyeball round 2: "centered a little bigger on the menu"). The span
   stays INSIDE #dockCurrent (click delegation + memo untouched) — .build-dock is the
   positioned ancestor, so .dock-current's overflow:hidden doesn't clip it. */
.dock-swatches {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  transform: translateX(-50%);
  display: inline-flex;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid rgba(217, 164, 65, 0.4);
  border-radius: 999px;
  background: rgba(16, 28, 22, 0.92);
  box-shadow: var(--shadow);
  z-index: 30;
}
.dock-swatches .swatch {
  width: 38px;
  height: 38px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.35);
  background: var(--sw, #ccc);
  cursor: pointer;
}
.dock-swatches .swatch.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.55);
}
/* The Mixed chip (bulb cards): a five-color pinwheel of the chip hexes — armed, a drag
   strings a straight multicolor run, one colorway per bulb. */
.dock-swatches .swatch.mixed {
  background: conic-gradient(#d9534a 0 72deg, #e8c25a 72deg 144deg, #58b26e 144deg 216deg, #5a8fd6 216deg 288deg, #a06cd5 288deg 360deg);
}
.build-dock.collapsed .dock-swatches {
  display: none;
}

.dock-toggle {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(68, 97, 79, 0.86);
  border-radius: 6px;
  background: rgba(31, 47, 39, 0.72);
  color: var(--ink);
  cursor: pointer;
}

.build-dock.collapsed .build-list {
  display: none;
}

/* The strip tip lives OUTSIDE .build-list so overflow-x can't clip it; it opens
   above the dock, horizontally anchored to the hovered card (hud.js positions it). */
.dock-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  z-index: 30;
  max-width: 280px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background:
    linear-gradient(180deg, rgba(31, 47, 39, 0.97), rgba(20, 33, 27, 0.95)),
    var(--panel);
  box-shadow: var(--shadow);
  pointer-events: none;
}

.dock-tip strong {
  display: block;
  font-size: 13px;
}

.dock-tip small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

.dock-tip p {
  margin: 4px 0 0;
  color: var(--ink);
  font-size: 11px;
  line-height: 1.35;
}

/* Build-hover facts as resource pips instead of a wall of small text (Taylor, Y1).
   Each row is "COSTS <pips>" / "EACH WEEK <in> -> <out>", wrapping inside the tip. */
.dock-tip .tip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  margin-top: 5px;
}

.dock-tip .tip-row em {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

.dock-tip .tip-pip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px 2px 2px;
  border: 1px solid rgba(217, 164, 65, 0.28);
  border-radius: 999px;
  background: rgba(20, 33, 27, 0.62);
}

.dock-tip .tip-pip-icon {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  object-fit: cover;
}

.dock-tip .tip-pip-glyph {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: rgba(217, 164, 65, 0.16);
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 0;
}

.dock-tip .tip-pip b {
  color: var(--ink);
  font-family: Arial, sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 700;
}

.dock-tip .tip-arrow {
  color: var(--gold);
  font-size: 12px;
}

.dock-tip .tip-plain {
  color: var(--ink);
  font-size: 11px;
}

.build-list {
  display: flex;
  gap: 6px;
  padding: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
}

.build-card {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 4px;
  border-radius: 7px;
  color: var(--ink);
}

/* §5.1 — Production chains label their card runs; in the flat strip the header is a
   slim vertical separator (rotated label) between one chain's cards and the next. */
.chain-header {
  flex: 0 0 auto;
  align-self: center;
  padding: 2px 3px;
  border-left: 1px solid rgba(217, 164, 65, 0.4);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.85;
  white-space: nowrap;
}

.build-card.active {
  color: var(--evergreen-night);
}

/* Baked model thumbnail (src/thumbs.js) — fills the compact square card. */
.build-card .thumb {
  width: 54px;
  height: 54px;
  object-fit: contain;
  pointer-events: none; /* clicks land on the card button, not the img */
}

.build-card .glyph {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  border: 1px solid rgba(68, 97, 79, 0.72);
  background: rgba(217, 164, 65, 0.12);
  font-family:
    Arial,
    sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

/* (Card name/cost text moved into #dockTip + the "Placing:" label — cards are image-only.) */

.floating-tip {
  position: absolute;
  z-index: 24;
  max-width: 260px;
  padding: 10px 12px;
  border-radius: 7px;
  color: var(--parchment);
  font-size: 13px;
  line-height: 1.3;
  pointer-events: none;
}

.floating-tip strong {
  display: block;
  margin-bottom: 4px;
  color: var(--gold);
  font-size: 15px;
}

/* Placement / move hint — a centered pill shown while a build ghost is active. Sits
   below the topbar (the bottom-center is taken by the build dock). pointer-events:none
   so it never blocks the canvas. */
.place-hint {
  position: absolute;
  z-index: 22;
  top: 92px;
  left: 50%;
  transform: translateX(-50%);
  /* 600px: fits the widest copy (name + rotate + scroll-to-resize + exit) on one line */
  max-width: min(600px, calc(100% - 32px));
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(181, 65, 62, 0.92);
  box-shadow: var(--shadow);
  backdrop-filter: blur(7px);
  color: var(--parchment);
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  pointer-events: none;
}

.place-hint[hidden] {
  display: none;
}

.place-hint strong {
  color: var(--gold-strong);
}

.place-hint kbd {
  display: inline-block;
  margin: 0 1px;
  padding: 1px 7px;
  border: 1px solid var(--gold);
  border-radius: 5px;
  background: rgba(217, 164, 65, 0.16);
  color: var(--gold-strong);
  font-family:
    Arial,
    sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.toast-stack {
  position: absolute;
  z-index: 30;
  left: 22px;
  top: 102px;
  display: grid;
  gap: 9px;
  width: 330px;
  pointer-events: none;
}

.toast {
  padding: 12px 14px;
  border: 1px solid rgba(68, 97, 79, 0.74);
  border-radius: 8px;
  background: rgba(31, 47, 39, 0.94);
  box-shadow: var(--shadow);
  color: var(--parchment);
  animation: slideIn 220ms ease both;
}

.toast strong {
  display: block;
  margin-bottom: 3px;
  color: var(--gold-strong);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-12px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@media (max-width: 1180px) {
  .game-shell {
    min-width: 760px;
  }

  .topbar {
    right: 346px;
    grid-template-columns: 74px minmax(0, 1fr);
  }

  .resource-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
    padding: 7px 8px;
  }

  .resource {
    gap: 5px;
    height: 44px;
    padding: 2px;
  }

  .resource .icon {
    width: 24px;
    height: 24px;
    font-size: 8px;
  }

  .resource-name {
    max-width: 38px;
    font-size: 9px;
  }

  .resource strong {
    font-size: 13px;
  }

  .resource small {
    font-size: 9px;
  }

  .time-cluster {
    left: 14px;
    bottom: 14px;
    width: 228px;
  }

  /* The manifest caret costs ~20px of the pill's row (glyph + gap). At the 228px cluster
     that is exactly enough to break "Presents Loaded" and the count onto two lines and
     push the pill 52px -> 67px. Buy the room back here instead of dropping the caret —
     it is the only thing on the pill that says the card opens. The line's `gap` is a
     MINIMUM under space-between, so tightening it costs nothing visually.
     The caret keeps its full 11px now that the row can no longer wrap (white-space: nowrap
     above): at 10px it read as a dot, and the measured row is 191px of content in 192px. */
  .sleigh-panel {
    gap: 6px;
    padding: 9px 10px;
  }

  .sleigh-panel-line {
    gap: 6px;
  }

  .season-panel {
    height: 50px;
    padding: 7px 10px;
  }

  .season-panel strong {
    font-size: 16px;
  }

  .season-panel small {
    font-size: 12px;
  }

  .speed-controls {
    height: 44px;
    padding: 6px;
    gap: 5px;
  }

  .speed-controls button {
    font-size: 12px;
  }

  .time-controls-row {
    grid-template-columns: minmax(0, 1fr) 64px;
    gap: 5px;
  }

  .pause-button {
    font-size: 12px;
  }

  .hud-hangers {
    right: 18px;
  }

  /* The composite (P4) is the panel's whole read, and 210px showed about a third of a Candy
     Cane Kitchen. The Letters panel used to reach 264px down this corner, which is the only
     reason the inspector started at 284; the hangers stop at 80, so it climbs to 92 and keeps
     the SAME bottom edge — the dock is bottom-anchored at 100vh - 134px, and 100vh - 234px
     leaves the same 8px gap under it (566px at 800 tall, up from 374). */
  .inspector {
    top: 92px;
    right: 14px;
    width: 300px;
    max-height: calc(100vh - 234px);
  }

  .build-dock {
    left: calc(50% + 70px);
    width: min(560px, calc(100vw - 340px));
    min-width: 360px;
    transform: translateX(-50%);
  }

  /* The strip is height-stable at every width — narrow viewports just scroll more.
     The Placing label is the give: hide it before the tabs/chips wrap. */
  .dock-bar {
    flex-wrap: nowrap;
  }

  .dock-current {
    display: none;
  }
}

/* ---- P1 (section 8/9): character creation + the Hall Room ---------------- */

.portrait {
  /* the topbar is pointer-events:none so clicks reach the canvas — interactive
     children opt back in (same pattern as .resource-strip / .speed-controls) */
  pointer-events: auto;
  cursor: pointer;
  border-color: var(--player-accent, var(--line));
}

.portrait:hover,
.portrait:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--player-accent, var(--gold)), var(--shadow);
}

.portrait-face svg {
  width: 100%;
  height: 100%;
  display: block;
}

.portrait-face.has-kid {
  background: radial-gradient(circle at 50% 30%, rgba(241, 232, 214, 0.18), transparent 60%), var(--evergreen-night);
  overflow: hidden;
}

.creation-overlay,
.hallroom-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 33, 27, 0.78);
  backdrop-filter: blur(4px);
}

.creation-overlay { z-index: 70; }
.hallroom-overlay { z-index: 55; }

.creation-overlay[hidden],
.hallroom-overlay[hidden] {
  display: none;
}

.creation-panel,
.hallroom-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(31, 47, 39, 0.98), rgba(20, 33, 27, 0.97)),
    var(--panel-strong);
  box-shadow: var(--shadow);
}

.creation-panel {
  width: min(720px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 22px 26px;
}

.creation-kicker {
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.creation-panel h2 {
  margin: 6px 0 2px;
  font-size: 26px;
  color: var(--gold-strong);
}

.creation-found {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 13.5px;
  font-style: italic;
}

.creation-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  align-items: start;
}

.creation-preview {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: radial-gradient(circle at 50% 26%, rgba(241, 232, 214, 0.12), transparent 62%), rgba(20, 33, 27, 0.6);
}

.creation-preview svg {
  width: 100%;
  height: auto;
  display: block;
}

.creation-row {
  margin-bottom: 11px;
}

.creation-row > small {
  display: block;
  margin-bottom: 5px;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.creation-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Scoped to the creation overlay — the bare .swatch selector used to leak into the
   dock's colorway dots (they inherited this 26px, found during the eyeball pass). */
.creation-options .swatch {
  width: 26px;
  height: 26px;
  padding: 0;
  border: 2px solid rgba(241, 232, 214, 0.25);
  border-radius: 50%;
  cursor: pointer;
}

.creation-options .swatch.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(217, 164, 65, 0.35);
}

.chip {
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(20, 33, 27, 0.6);
  font-family: Georgia, serif;
  font-size: 13px;
  cursor: pointer;
}

.chip.active {
  border-color: var(--gold);
  color: var(--gold-strong);
  background: rgba(217, 164, 65, 0.12);
}

.creation-footer {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
}

.creation-footer input {
  flex: 1;
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(20, 33, 27, 0.75);
  color: var(--ink);
  font-family: Georgia, serif;
  font-size: 15px;
}

.creation-footer input:focus {
  outline: none;
  border-color: var(--gold);
}

.creation-footer button {
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(20, 33, 27, 0.75);
  font-family: Georgia, serif;
  font-size: 14px;
  cursor: pointer;
}

.creation-footer .head-north {
  border-color: var(--gold);
  background: linear-gradient(180deg, rgba(217, 164, 65, 0.28), rgba(217, 164, 65, 0.12));
  color: var(--gold-strong);
  font-size: 15px;
}

.creation-footer .head-north:hover {
  background: linear-gradient(180deg, rgba(217, 164, 65, 0.4), rgba(217, 164, 65, 0.2));
}

.hallroom-panel {
  position: relative;
  width: min(960px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  overflow: auto;
  padding: 18px 22px 20px;
}

.hallroom-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 12px;
}

.hallroom-head h2 {
  margin: 0;
  font-size: 24px;
  color: var(--gold-strong);
}

.hallroom-head small {
  color: var(--muted);
}

.hallroom-head .hallroom-close {
  margin-left: auto;
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: rgba(20, 33, 27, 0.75);
  cursor: pointer;
}

.hallroom-body {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(250px, 1fr);
  gap: 18px;
  align-items: start;
}

.hallroom-stage {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.hallroom-stage > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hallroom-kid {
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 26%;
  transform: translateX(-50%);
  filter: drop-shadow(0 6px 8px rgba(4, 11, 8, 0.55));
}

.hallroom-kid svg {
  width: 100%;
  height: auto;
  display: block;
}

.hallroom-stage .mirror-button {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(20, 33, 27, 0.82);
  font-family: Georgia, serif;
  font-size: 13px;
  cursor: pointer;
}

.hallroom-stage .mirror-button:hover {
  border-color: var(--gold);
  color: var(--gold-strong);
}

.closet {
  display: grid;
  gap: 8px;
}

.closet-slot > small {
  display: block;
  margin-bottom: 4px;
  color: var(--muted);
  font-family: Arial, sans-serif;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.closet-pieces {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.piece {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(20, 33, 27, 0.6);
  font-family: Georgia, serif;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}

.piece.worn {
  border-color: var(--gold);
  color: var(--gold-strong);
  background: rgba(217, 164, 65, 0.12);
}

.piece.locked {
  cursor: default;
  opacity: 0.55;
  color: var(--muted);
}

.piece.locked small {
  display: block;
  font-size: 11px;
  font-style: italic;
  opacity: 0.9;
}

/* ---- section 4.1: chain-grouped resource strip ---------------------------- */

.resource {
  flex: 0 1 auto;
}



.resource-group {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  height: 46px;
  padding: 3px 12px 3px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: rgba(20, 33, 27, 0.55);
  color: inherit;
  font: inherit;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.resource-group:hover,
.resource-group:focus-visible {
  background: rgba(68, 97, 79, 0.34);
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.22);
  outline: none;
}

.resource-group:hover .resource-tooltip,
.resource-group:focus-visible .resource-tooltip {
  display: block;
}

.resource-group.open {
  border-color: rgba(217, 164, 65, 0.55);
  background: rgba(217, 164, 65, 0.1);
}

.resource-group .dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.resource-group.dot-green .dot { background: #8fd49a; box-shadow: 0 0 6px rgba(143, 212, 154, 0.8); }
.resource-group.dot-amber .dot { background: #e8b34b; box-shadow: 0 0 6px rgba(232, 179, 75, 0.8); }
.resource-group.dot-red .dot { background: #e2918a; box-shadow: 0 0 7px rgba(226, 145, 138, 0.9); }
.resource-group.dot-idle .dot { background: rgba(241, 232, 214, 0.3); }

.resource.chain-member {
  background: rgba(68, 97, 79, 0.18);
}

/* ---- icon-first resource strip pilot (?resourcebar=icons) ----------------- */
.resource-strip.icon-pilot {
  align-items: flex-start;
  gap: 6px;
  min-height: 78px;
  padding: 6px 8px;
}

.icon-pilot .resource.icon-resource {
  display: grid;
  flex: 0 0 64px;
  place-items: center;
  width: 64px;
  height: 64px;
  padding: 2px 4px 5px;
  border: 1px solid rgba(217, 164, 65, 0.24);
  border-radius: 10px;
  background: rgba(20, 33, 27, 0.5);
  overflow: visible;
}

.icon-pilot .resource.icon-resource:hover,
.icon-pilot .resource.icon-resource:focus-visible {
  border-color: rgba(217, 164, 65, 0.72);
  background: rgba(68, 97, 79, 0.42);
  outline: none;
}

.icon-pilot .resource-icon-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  overflow: hidden;
  border: 1px solid rgba(241, 232, 214, 0.38);
  border-radius: 10px;
  background: radial-gradient(circle at 42% 30%, rgba(255, 255, 255, 0.18), rgba(20, 33, 27, 0.32));
  box-shadow: inset 0 0 0 1px rgba(20, 33, 27, 0.35), 0 2px 5px rgba(4, 11, 8, 0.34);
}

.icon-pilot .resource-icon-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.icon-pilot .resource-icon-fallback {
  display: none;
  place-items: center;
  width: 100%;
  height: 100%;
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
}

.icon-pilot .icon-resource.icon-missing .resource-icon-image {
  display: none;
}

.icon-pilot .icon-resource.icon-missing .resource-icon-fallback {
  display: grid;
}

/* The value pill. max-width is exactly the 64px tile (66px reaching back from right:-2px),
   so a long value never laps the chip beside it. hud.js shortens the STRING first
   ("1,240", "128/240"); these font steps catch whatever is still long, because clipping a
   count to "12…" is worse than reading it a point smaller (Taylor, Y4). */
.icon-pilot .icon-resource > strong {
  position: absolute;
  right: -2px;
  bottom: -2px;
  z-index: 2;
  min-width: 24px;
  max-width: 66px;
  padding: 2px 6px;
  overflow: hidden;
  border: 1px solid rgba(241, 232, 214, 0.48);
  border-radius: 999px;
  background: rgba(28, 44, 35, 0.97);
  box-shadow: 0 2px 5px rgba(4, 11, 8, 0.52);
  color: #fff7e6;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon-pilot .icon-resource > strong[data-fit="long"] {
  padding: 2px 5px;
  font-size: 11px;
  letter-spacing: -0.2px;
}

.icon-pilot .icon-resource > strong[data-fit="xlong"] {
  padding: 2px 4px;
  font-size: 10px;
  letter-spacing: -0.3px;
}

.icon-pilot .icon-resource.danger .resource-icon-frame,
.icon-pilot .icon-resource.danger > strong {
  border-color: rgba(226, 145, 138, 0.9);
}

.icon-pilot .icon-resource.danger > strong {
  background: rgba(111, 42, 40, 0.98);
}

.icon-pilot .icon-name-tooltip {
  top: calc(100% + 8px);
  left: 50%;
  width: max-content;
  max-width: 180px;
  padding: 7px 10px;
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}

.icon-pilot .icon-name-tooltip strong {
  min-width: 0;
  margin: 0;
  color: var(--parchment);
  font-family: Arial, sans-serif;
  font-size: 12px;
  line-height: 1.15;
  text-shadow: none;
}

.icon-pilot .resource-chain {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: 4px;
  min-height: 70px;
  padding: 3px;
  border: 1px solid rgba(217, 164, 65, 0.22);
  border-radius: 11px;
  background: rgba(20, 33, 27, 0.36);
}

.icon-pilot .resource-chain.open {
  border-color: rgba(217, 164, 65, 0.48);
  background: rgba(217, 164, 65, 0.06);
}

.icon-pilot .resource-chain-members {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-pilot .resource-chain-members[hidden] {
  display: none;
}

.icon-pilot .resource-group {
  display: grid;
  flex: 0 0 72px;
  grid-template-columns: 1fr;
  place-items: center;
  width: 72px;
  height: 64px;
  padding: 15px 3px 9px;
  border-color: rgba(217, 164, 65, 0.28);
  border-radius: 8px;
  background: rgba(31, 47, 39, 0.82);
  text-align: center;
}

.icon-pilot .resource-group .dot {
  position: absolute;
  top: 7px;
  left: 7px;
}

.icon-pilot .resource-group .resource-name {
  max-width: 66px;
  color: var(--parchment);
  font-family: Georgia, serif;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.05;
  text-overflow: ellipsis;
}

.icon-pilot .chain-collapse-mark {
  position: absolute;
  top: 3px;
  right: 7px;
  color: rgba(241, 232, 214, 0.7);
  font-family: Arial, sans-serif;
  font-size: 15px;
  line-height: 1;
}

.icon-pilot .resource.chain-member {
  flex-basis: 64px;
  background: rgba(68, 97, 79, 0.16);
}

.icon-pilot .wrapped-chain .resource-tooltip {
  right: 0;
  left: auto;
}
/* ---- live-number stability (Taylor Y6 playtest: the strip jittered) ------- */
/* Big values + per-week decimals re-rendered at a different width every tick,
   so the flex chips grew/shrank and the whole strip danced. Tabular figures
   give every digit one width — same digit count = same pixel width = no reflow. */
.topbar,
.hud-hangers,
.inspector,
.year-end-stats {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ---- the intro storybook (storybook.js): picture-book pages ---------------- */
/* Treatment: STORYBOOK PAGE — a picture-book plate on cream paper, the full line
   beneath, page dots. Deliberately NOT the game's dark pine UI: the story is a
   book you're being read before you're handed the village. */
.storybook-overlay {
  position: absolute;
  inset: 0;
  z-index: 95; /* over the menu (90): the boot menu's "Read the story" opens on top */
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(252, 246, 231, 1) 0%, rgba(244, 234, 212, 1) 58%, rgba(228, 213, 184, 1) 100%);
  cursor: pointer;
}

.storybook-overlay[hidden] {
  display: none;
}

/* The Last Route owns the whole lens while its required assets load and for the
   eleven-second flight. The renderer removes this class on a recoverable load
   failure or before Homecoming opens, so no control state leaks into the book. */
body.great-flight-flyover .topbar,
body.great-flight-flyover .time-cluster,
body.great-flight-flyover .hud-hangers,
body.great-flight-flyover .inspector,
body.great-flight-flyover .build-dock,
body.great-flight-flyover .toast-stack,
body.great-flight-flyover .bottom-controls,
body.great-flight-flyover .floating-tip,
body.great-flight-flyover .place-hint,
body.great-flight-flyover .postcard-controls,
body.great-flight-flyover .tutorial-head-elf-orb,
body.great-flight-flyover .tutorial-overlay,
body.great-flight-flyover .storybook-overlay {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: none !important;
}

.storybook-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  /* The third clamp keeps the 16:9 plate plus ~310px of text/footer chrome
     inside the viewport height, so the wider page never scrolls or crops. */
  width: min(1120px, calc(100vw - 64px), calc((100vh - 310px) * 16 / 9));
  padding: 20px 12px 14px;
}

.storybook-plate {
  width: 100%;
  padding: 10px;
  border: 1px solid #c9bda4;
  border-radius: 4px;
  background: #fbf6ea;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 10px 28px rgba(88, 70, 40, 0.28);
  animation: storybook-plate-in 700ms ease both;
}

.storybook-plate img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid #3a3128;
  border-radius: 2px;
  background: #101a2e; /* night-navy while the still streams in */
}

.storybook-text {
  min-height: 108px;
  max-width: 620px;
  text-align: center;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 20px;
  line-height: 1.55;
  color: #3a3128;
}

.storybook-line {
  margin: 0 0 6px;
  opacity: 0;
  animation: storybook-line-in 600ms ease forwards;
}

.storybook-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.storybook-dots {
  display: flex;
  gap: 9px;
}

.storybook-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 1px solid #8a7a5e;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.storybook-dot.active {
  background: #6b5c42;
  border-color: #6b5c42;
}

.storybook-hint {
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-style: italic;
  font-size: 13px;
  color: #8a7a5e;
  opacity: 0;
  animation: storybook-line-in 600ms ease 1.6s forwards;
}

.storybook-skip {
  position: absolute;
  top: 16px;
  right: 18px;
  padding: 6px 12px;
  border: 1px solid #c2b394;
  border-radius: 6px;
  background: rgba(251, 246, 234, 0.85);
  color: #6b5c42;
  font-family: Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 140ms ease, color 140ms ease;
}

.storybook-skip:hover {
  border-color: #6b5c42;
  color: #3a3128;
}

@keyframes storybook-plate-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@keyframes storybook-line-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .storybook-plate,
  .storybook-line,
  .storybook-hint {
    animation-duration: 1ms;
    animation-delay: 0ms;
  }
}

/* ---- narrative-overhaul copy pass (deck S2/S3/S6) --------------------------
   `.chapter-blurb` lived here for the Letters panel's #chapterBlurb line. That panel
   retired with the UI redesign (1B) and the blurb moved into the chapter view, which
   styles it as .chapter-view-blurb / .chapter-recap i. */
.memory-note {
  margin: 2px 0 6px 18px;
  font-size: 12px;
  color: var(--muted);
}

.dice-name {
  padding: 0 10px;
  font-size: 16px;
  line-height: 1;
}

#creationName.needs-name {
  border-color: var(--cranberry);
  box-shadow: 0 0 0 2px rgba(181, 65, 62, 0.25);
}

.hallroom-story {
  margin-left: auto;
  margin-right: 8px;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(241, 232, 214, 0.10);
  color: var(--parchment);
  font-size: 12px;
  cursor: pointer;
}

.hallroom-story:hover {
  border-color: var(--gold);
}

/* ---- Traditional in-game Pause / Save / Load -----------------------------
   The controller reuses the old branded menu markup. Everything below is
   scoped to its runtime class so the lightweight boot title remains untouched. */
.menu-overlay.pause-menu .menu-panel {
  max-height: calc(100vh - 90px);
  overflow-y: auto;
}

.menu-overlay.pause-menu .menu-actions[aria-busy="true"] {
  opacity: 0.72;
}

.menu-overlay.pause-menu .pause-return-title {
  border-color: rgba(224, 117, 112, 0.52);
}

.menu-overlay.pause-menu .pause-return-title:hover {
  border-color: #f09892;
  background: rgba(181, 65, 62, 0.2);
}

.pause-menu-back {
  justify-self: start;
  margin: -3px 0 4px;
}

.pause-slot-list {
  display: grid;
  gap: 10px;
}

.pause-slot-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 70px;
  padding: 11px 12px 11px 15px;
  border: 1px solid rgba(241, 232, 214, 0.2);
  border-radius: 11px;
  background: rgba(4, 19, 16, 0.22);
}

.pause-slot-copy,
.pause-slot-label,
.pause-slot-detail {
  display: block;
  min-width: 0;
}

.pause-slot-label {
  color: var(--parchment);
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;
}

.pause-slot-detail {
  margin-top: 4px;
  color: rgba(241, 232, 214, 0.62);
  font-family: Arial, sans-serif;
  font-size: 11px;
  line-height: 1.35;
}

.pause-slot-row[data-slot-state="known-corrupt"] .pause-slot-detail,
.pause-slot-row[data-slot-state="corrupt"] .pause-slot-detail,
.pause-slot-row[data-slot-state="unavailable"] .pause-slot-detail,
.pause-slot-row[data-slot-state="storage-unavailable"] .pause-slot-detail {
  color: #f0aaa5;
}

.pause-slot-actions {
  display: flex;
  align-items: stretch;
  gap: 7px;
}

.menu-overlay.pause-menu .pause-slot-save {
  width: auto;
  min-width: 92px;
  min-height: 43px;
  padding: 8px 13px;
  text-align: center;
}

.pause-slot-delete {
  min-width: 66px;
  padding: 8px 10px;
  border: 1px solid rgba(224, 117, 112, 0.46);
  border-radius: 9px;
  background: rgba(181, 65, 62, 0.12);
  color: #f3d4d1;
  font: 800 11px/1 Arial, sans-serif;
  cursor: pointer;
}

.pause-slot-delete:hover {
  border-color: #f09892;
  background: rgba(181, 65, 62, 0.24);
}

.pause-slot-delete:focus-visible,
.pause-menu-back:focus-visible {
  outline: 3px solid #f5c85d;
  outline-offset: 3px;
}

.pause-load-list {
  gap: 8px;
}

.menu-overlay.pause-menu .pause-load-slot {
  min-height: 54px;
}

.pause-menu-message {
  margin: 14px 0 0;
  padding: 9px 11px;
  border: 1px solid rgba(127, 198, 151, 0.42);
  border-radius: 8px;
  background: rgba(58, 122, 82, 0.16);
  color: #c9efd4;
  font: 700 11.5px/1.4 Arial, sans-serif;
}

.pause-menu-message[data-kind="error"] {
  border-color: rgba(224, 117, 112, 0.52);
  background: rgba(181, 65, 62, 0.17);
  color: #ffd2ce;
}

.pause-menu-message[hidden] {
  display: none;
}

.menu-confirm-skip.pause-hold-target {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.menu-confirm-skip.pause-hold-target::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgba(217, 164, 65, 0.45);
  transform: scaleX(0);
  transform-origin: left center;
}

.menu-confirm-skip.pause-hold-target.pause-hold-active::before {
  animation: pause-confirm-hold 900ms linear forwards;
}

.menu-confirm-skip.pause-hold-target > span {
  position: relative;
  z-index: 1;
}

@keyframes pause-confirm-hold {
  to { transform: scaleX(1); }
}

@media (max-width: 560px) {
  .pause-slot-row {
    grid-template-columns: 1fr;
  }

  .pause-slot-actions {
    width: 100%;
  }

  .menu-overlay.pause-menu .pause-slot-save {
    flex: 1;
  }
}