/* =========================================================================
   YESTERLIGHT — the hollow hill that glows
   Near-black blue-slate ground, one warm amber light, parchment text.
   No external fonts, no images, no requests. Inline SVG only.

   v2 — the map release. The palette below is unchanged from v1; everything
   new extends it. The map is an instrument reading of a landscape: contour
   line work, restrained fills, small-caps sans labels, one warm point.
   ========================================================================= */

:root {
  /* ground */
  --ground:        #0a0e13;
  --ground-lift:   #10161f;
  --panel:         #111823;
  --panel-lift:    #161e2a;
  --line:          rgba(232, 223, 207, 0.085);
  --line-strong:   rgba(232, 223, 207, 0.16);

  /* the light */
  --amber:         #ffb347;
  --amber-soft:    #e2a04a;
  --amber-dim:     rgba(255, 179, 71, 0.18);
  --amber-ghost:   rgba(255, 179, 71, 0.07);

  /* parchment */
  --ink:           #e6dcc9;
  --ink-soft:      #b9b2a4;
  --ink-mute:      #7d8593;
  --ink-faint:     #5a626e;

  /* the four standings */
  --elite:         #9d80d6;
  --trust:         #a7b36b;
  --morale:        #f0e4cd;
  --mythos:        #78b0d8;
  --death:         #b4614f;

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", serif;
  --sans:  "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* ------------------------------------------------------------- the map */
  --map-sea:        #060a10;
  --map-sea-deep:   #04070c;
  --map-land:       #0e141d;
  --map-land-hi:    #131c27;
  --map-contour:    rgba(178, 196, 214, 0.16);
  --map-contour-2:  rgba(178, 196, 214, 0.09);
  --map-shore:      rgba(150, 180, 205, 0.34);
  --map-river:      rgba(120, 176, 216, 0.44);
  --map-road:       rgba(226, 214, 192, 0.24);
  --map-road-lit:   rgba(255, 179, 71, 0.42);
  --map-label:      rgba(203, 211, 223, 0.62);
  --map-label-lit:  rgba(240, 232, 214, 0.92);
  --map-plot:       rgba(200, 212, 226, 0.24);
  --map-build:      rgba(226, 214, 192, 0.72);
  --map-wood:       rgba(120, 150, 122, 0.34);

  /* season tint — overwritten by .yl-season-N on the svg root */
  --map-tint:       #6f7d63;
  --map-tint-a:     0.055;
  --map-veg:        #77875f;
  --map-field:      rgba(150, 160, 110, 0.30);
  --map-snow:       rgba(220, 234, 246, 0);
  --map-night:      0.0;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  min-width: 1280px;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, #16202c 0%, rgba(10,14,19,0) 62%),
    radial-gradient(ellipse 90% 60% at 50% 118%, rgba(255,179,71,0.055) 0%, rgba(10,14,19,0) 60%),
    var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button { font-family: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }

/* ---------------------------------------------------------------- top bar */

#yl-topbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(210px, auto) minmax(440px, 1fr) minmax(250px, 330px) auto;
  align-items: center;
  gap: 26px;
  padding: 10px 22px 10px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(22,30,42,0.85) 0%, rgba(10,14,19,0.4) 100%);
}

.yl-brand { display: flex; align-items: center; gap: 11px; min-width: 0; }
.yl-mark { width: 26px; height: 22px; flex: 0 0 auto; filter: drop-shadow(0 0 6px rgba(255,179,71,0.28)); }

.yl-wordmark { display: flex; flex-direction: column; min-width: 0; }
.yl-title {
  font-family: var(--serif);
  font-size: 17px;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(255,179,71,0.22);
  white-space: nowrap;
}
.yl-townname {
  font-family: var(--serif);
  font-style: italic;
  font-size: 11.5px;
  color: var(--ink-mute);
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.yl-townname.yl-named { color: var(--amber-soft); font-style: normal; letter-spacing: 0.14em; text-transform: uppercase; font-size: 10px; }

/* four standings, compact */
.yl-meterstrip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  min-width: 0;
}
/* Name and reading on one line, the bar full width beneath. At 1280 there is
   not enough room across for name-bar-value-trend in a row without crushing
   the bar to a stub, and the bar is the part that carries the information. */
.yl-cmeter {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  gap: 3px 6px;
  min-width: 0;
  cursor: help;
}
.yl-cmeter-name {
  grid-column: 1; grid-row: 1;
  font-size: 9.5px; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--ink-mute); white-space: nowrap;
}
.yl-cmeter-value { grid-column: 2; grid-row: 1; }
.yl-trend        { grid-column: 3; grid-row: 1; text-align: right; }
.yl-cmeter-track {
  grid-column: 1 / -1; grid-row: 2;
  height: 5px; min-width: 30px;
  background: linear-gradient(180deg, #070b0f, #0c1219);
  border: 1px solid rgba(232,223,207,0.06);
  border-radius: 1px; overflow: hidden;
}
.yl-cmeter-fill {
  height: 100%; width: 0%;
  transition: width 640ms cubic-bezier(0.22, 0.8, 0.3, 1), background 400ms ease;
}
.yl-cmeter-value {
  font-family: var(--serif); font-size: 13px; color: var(--ink);
  min-width: 18px; text-align: right;
}
[data-meter="elite"]  .yl-cmeter-fill { background: linear-gradient(90deg, #4a3574, var(--elite)); box-shadow: 0 0 9px rgba(157,128,214,0.4); }
[data-meter="trust"]  .yl-cmeter-fill { background: linear-gradient(90deg, #4f5730, var(--trust)); box-shadow: 0 0 9px rgba(167,179,107,0.32); }
[data-meter="morale"] .yl-cmeter-fill { background: linear-gradient(90deg, #7d7364, var(--morale)); box-shadow: 0 0 9px rgba(240,228,205,0.3); }
[data-meter="mythos"] .yl-cmeter-fill { background: linear-gradient(90deg, #33556e, var(--mythos)); box-shadow: 0 0 9px rgba(120,176,216,0.34); }

.yl-cmeter.yl-critical .yl-cmeter-value,
.yl-cmeter.yl-critical .yl-cmeter-name { color: var(--death); }

/* a frozen meter is inert — say so without a number */
.yl-cmeter.yl-frozen .yl-cmeter-value { color: var(--ink-faint); font-style: italic; }
.yl-cmeter.yl-frozen .yl-cmeter-name  { color: var(--ink-faint); }
.yl-cmeter.yl-frozen .yl-cmeter-track { opacity: 0.35; }

.yl-trend { font-size: 9px; letter-spacing: 0.02em; color: var(--ink-faint); min-width: 16px; }
.yl-trend.yl-up   { color: #7fbf8a; }
.yl-trend.yl-down { color: var(--death); }

/* influence */
.yl-influence { min-width: 0; }
.yl-influence-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 4px;
}
.yl-influence-label {
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute);
}
.yl-influence-value {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--amber);
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(255,179,71,0.35);
}
.yl-influence-track {
  position: relative;
  height: 8px;
  background: linear-gradient(180deg, #070b0f, #0d131b);
  border: 1px solid var(--line);
  border-radius: 1px;
  overflow: visible;
}
.yl-influence-fill {
  position: absolute; inset: 0 auto 0 0;
  width: 0%;
  background: linear-gradient(90deg, #7a4a12 0%, var(--amber-soft) 55%, #ffd08a 100%);
  box-shadow: 0 0 14px rgba(255,179,71,0.45), inset 0 1px 0 rgba(255,255,255,0.16);
  transition: width 720ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.yl-influence-fill.yl-over { animation: yl-breathe 3.4s ease-in-out infinite; }
@keyframes yl-breathe {
  0%, 100% { box-shadow: 0 0 14px rgba(255,179,71,0.45), inset 0 1px 0 rgba(255,255,255,0.16); }
  50%      { box-shadow: 0 0 26px rgba(255,179,71,0.7),  inset 0 1px 0 rgba(255,255,255,0.24); }
}
.yl-influence-marker {
  position: absolute; top: -4px; bottom: -4px;
  left: 50%;                           /* fallback; js/ui.js positions it from TUNING (§17) */
  width: 1px;
  background: var(--line-strong);
}
.yl-influence-marker span {
  position: absolute; top: -13px; left: 50%;
  transform: translateX(-50%);
  font-size: 8.5px; letter-spacing: 0.12em; color: var(--ink-faint);
}
.yl-win-hint {
  margin-top: 3px;
  height: 12px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 11px;
  color: var(--amber-soft);
  letter-spacing: 0.03em;
  opacity: 0;
  transition: opacity 500ms ease;
}
.yl-win-hint.yl-on { opacity: 1; }

.yl-ghost-btn {
  justify-self: end;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 13px;
  border-radius: 1px;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.yl-ghost-btn:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(232,223,207,0.03);
}
.yl-quiet-btn {
  background: transparent; border: 1px solid var(--line);
  color: var(--ink-mute); border-radius: 1px;
  font-size: 11px; letter-spacing: 0.1em; padding: 5px 11px;
  transition: color 160ms ease, border-color 160ms ease;
}
.yl-quiet-btn:hover { color: var(--ink); border-color: var(--line-strong); }

/* ------------------------------------------------------------------ board */

#yl-board {
  flex: 1 1 auto;
  display: grid;
  /* 252 + 660 + 324 = 1236, under the 1280 floor with room to spare */
  grid-template-columns: 252px minmax(660px, 1fr) 324px;
  gap: 0;
  min-height: 0;
}
#yl-board.yl-chron-shut { grid-template-columns: 252px minmax(660px, 1fr) 30px; }

/* section headings — a hairline with one lit segment */
.yl-head {
  font-family: var(--serif);
  font-size: 11px;
  font-weight: normal;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 12px;
  padding-bottom: 7px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.yl-head::after {
  content: "";
  position: absolute; left: 0; bottom: -1px;
  width: 26px; height: 1px;
  background: var(--amber-soft);
  opacity: 0.55;
}
.yl-head-inline { margin: 0; border: none; padding: 0; }
.yl-head-inline::after { display: none; }
.yl-head-spaced { margin-top: 20px; }

.yl-panel {
  background: linear-gradient(180deg, var(--panel) 0%, rgba(13,18,26,0.72) 100%);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 12px 14px 13px;
  min-height: 0;
}
.yl-panel-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 6px; margin-bottom: 11px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.yl-panel-head::after {
  content: ""; position: absolute; left: 0; bottom: -1px;
  width: 26px; height: 1px; background: var(--amber-soft); opacity: 0.55;
}
.yl-workforce { font-size: 10.5px; color: var(--ink-mute); letter-spacing: 0.05em; }
.yl-workforce span { color: var(--ink-soft); font-family: var(--serif); font-size: 12.5px; }

.yl-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgba(232,223,207,0.14) transparent;
}
.yl-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.yl-scroll::-webkit-scrollbar-track { background: transparent; }
.yl-scroll::-webkit-scrollbar-thumb { background: rgba(232,223,207,0.1); border-radius: 0; }
.yl-scroll::-webkit-scrollbar-thumb:hover { background: rgba(232,223,207,0.2); }

/* ================================================== LEFT RAIL: the people */

.yl-rail {
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px 14px 24px;
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
  scrollbar-color: rgba(232,223,207,0.14) transparent;
}
.yl-rail::-webkit-scrollbar { width: 8px; }
.yl-rail::-webkit-scrollbar-track { background: transparent; }
.yl-rail::-webkit-scrollbar-thumb { background: rgba(232,223,207,0.1); }

.yl-council { display: flex; flex-direction: column; gap: 6px; }

.yl-member {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 9px;
  align-items: start;
  border: 1px solid var(--line);
  border-left: 2px solid rgba(232,223,207,0.16);
  background: linear-gradient(180deg, rgba(22,30,42,0.6), rgba(13,18,26,0.3));
  border-radius: 1px;
  padding: 7px 9px 8px;
  transition: border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}
.yl-portrait {
  width: 42px; height: 50px;
  display: block;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #0b1017, #0e151e);
  border-radius: 1px;
}
.yl-member-body { min-width: 0; }
.yl-member-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.yl-member-name {
  font-family: var(--serif); font-size: 12.5px; color: var(--ink);
  letter-spacing: 0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yl-member-age  { font-size: 10px; color: var(--ink-faint); flex: 0 0 auto; }
.yl-member-role {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 1px;
}
.yl-member-trait {
  font-family: var(--serif); font-style: italic; font-size: 11px;
  color: var(--ink-soft); margin-top: 4px; line-height: 1.38;
}

/* a Roman on the council is a moment */
.yl-member.yl-roman {
  border-left-color: var(--elite);
  background: linear-gradient(180deg, rgba(48,36,74,0.5), rgba(13,18,26,0.32));
  box-shadow: inset 0 0 22px rgba(157,128,214,0.09);
}
.yl-member.yl-roman .yl-member-name { color: #efe6f6; }
.yl-member.yl-roman .yl-portrait { border-color: rgba(157,128,214,0.34); }
.yl-roman-tag, .yl-away-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
  border-radius: 1px; padding: 0 4px; vertical-align: 1px;
}
.yl-roman-tag { color: var(--elite); border: 1px solid rgba(157,128,214,0.4); }
.yl-away-tag  { color: var(--mythos); border: 1px solid rgba(120,176,216,0.4); }

/* the first Roman to take a seat — announced, once, loudly by our standards */
.yl-member.yl-first-roman {
  animation: yl-seat 2600ms ease-out 1;
  box-shadow: inset 0 0 30px rgba(157,128,214,0.22), 0 0 26px rgba(157,128,214,0.16);
}
.yl-seat-note {
  grid-column: 1 / span 2;
  margin-top: 7px; padding-top: 6px;
  border-top: 1px solid rgba(157,128,214,0.24);
  font-family: var(--serif); font-style: italic; font-size: 10.5px;
  color: #cbb9e6; line-height: 1.45;
}
@keyframes yl-seat {
  0%   { box-shadow: inset 0 0 0 rgba(157,128,214,0), 0 0 0 rgba(157,128,214,0); }
  22%  { box-shadow: inset 0 0 44px rgba(157,128,214,0.42), 0 0 40px rgba(157,128,214,0.34); }
  100% { box-shadow: inset 0 0 30px rgba(157,128,214,0.22), 0 0 26px rgba(157,128,214,0.16); }
}

/* the dead are kept on the roster, quietly, in place */
.yl-member.yl-dead {
  opacity: 0.45;
  border-left-color: rgba(180,97,79,0.4);
  background: none;
  box-shadow: none;
}
.yl-member.yl-dead .yl-portrait { filter: grayscale(1) brightness(0.7); }
.yl-member.yl-dead .yl-member-name { font-style: italic; color: var(--ink-soft); }
.yl-member.yl-dead .yl-member-trait { color: var(--ink-faint); }
.yl-dagger { color: var(--death); margin-right: 5px; font-style: normal; }

.yl-member.yl-away { border-left-color: rgba(120,176,216,0.45); }
.yl-member.yl-away .yl-member-trait { color: var(--mythos); font-style: italic; }

/* ------------------------------------------------------------- rail: teams */

.yl-teams { display: flex; flex-direction: column; gap: 6px; }

.yl-team {
  border: 1px solid var(--line);
  border-left: 2px solid rgba(232,223,207,0.16);
  background: linear-gradient(180deg, rgba(22,30,42,0.5), rgba(13,18,26,0.25));
  border-radius: 1px;
  padding: 7px 9px 8px;
}
.yl-team-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.yl-team-name { font-family: var(--serif); font-size: 12.5px; color: var(--ink); }
.yl-team-state { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); }
.yl-team-line {
  font-size: 10.5px; color: var(--ink-mute); margin-top: 3px; line-height: 1.4;
}
.yl-team-track { height: 2px; margin-top: 7px; background: rgba(232,223,207,0.07); overflow: hidden; }
.yl-team-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, rgba(120,176,216,0.35), var(--mythos));
  transition: width 640ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.yl-team.yl-out { border-left-color: rgba(120,176,216,0.45); }
.yl-team.yl-out .yl-team-state { color: var(--mythos); }
.yl-team.yl-home { border-left-color: rgba(255,179,71,0.4); }
.yl-team.yl-home .yl-team-state { color: var(--amber-soft); }
.yl-team-actions { display: flex; gap: 6px; margin-top: 7px; }
.yl-team-actions button { font-size: 9.5px; padding: 3px 8px; letter-spacing: 0.12em; }

/* industry / teams with nowhere to go — a quiet flag, not an alarm */
.yl-idle-flag {
  margin-left: 9px;
  color: var(--amber-soft);
  opacity: 0;
  transition: opacity 420ms ease;
  cursor: help;
}
.yl-idle-flag.yl-on { opacity: 0.8; }

/* ==================================================== CENTRE: the map etc */

.yl-centre {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 16px 14px;
  position: relative;
}

/* §8: the map is the largest element on the screen. It takes every pixel the
   column does not owe to something else, and the panels below it are capped
   so they cannot quietly eat it as their lists grow. */
.yl-mapwrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 360px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  overflow: hidden;
  background: var(--map-sea-deep);
  box-shadow: inset 0 0 90px rgba(0,0,0,0.75);
}
/* The map surface. js/ui-map.js owns everything inside; the shell owns the
   box, the HUD over it, and the fallback under it. */
.yl-map-host { position: absolute; inset: 0; z-index: 1; }
.yl-map-host > svg, .yl-mapwrap svg.yl-map { display: block; width: 100%; height: 100%; }

/* map HUD — text over the map, never a panel */
.yl-map-hud {
  position: absolute; z-index: 3;
  pointer-events: none;
}
.yl-map-hud-tl { top: 10px; left: 14px; }
.yl-map-hud-tr { top: 10px; right: 12px; pointer-events: auto; }

.yl-date-wrap { display: flex; align-items: baseline; gap: 9px; }
.yl-date {
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.03em;
  color: var(--ink);
  text-shadow: 0 2px 18px rgba(0,0,0,0.9), 0 0 24px rgba(255,179,71,0.14);
}
.yl-auc {
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}
.yl-map-place {
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-mute); margin-top: 2px;
  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
}

.yl-framing { display: flex; gap: 0; }
.yl-frame-btn {
  background: rgba(9,13,19,0.72);
  border: 1px solid var(--line);
  color: var(--ink-mute);
  font-size: 9.5px; letter-spacing: 0.19em; text-transform: uppercase;
  padding: 5px 11px;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.yl-frame-btn + .yl-frame-btn { border-left: none; }
.yl-frame-btn:hover { color: var(--ink); border-color: var(--line-strong); }
.yl-frame-btn.yl-on {
  color: var(--amber);
  border-color: rgba(255,179,71,0.42);
  background: rgba(255,179,71,0.08);
}

.yl-map-legend {
  position: absolute; z-index: 3;
  left: 14px; bottom: 10px;
  display: flex; flex-wrap: wrap; gap: 4px 14px;
  max-width: 62%;
  pointer-events: none;
  font-size: 9.5px; letter-spacing: 0.11em;
  color: var(--ink-faint);
  text-shadow: 0 1px 6px rgba(0,0,0,0.95);
}
.yl-legend-item { display: inline-flex; align-items: center; gap: 5px; }
.yl-legend-swatch { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.yl-map-tip {
  position: absolute; z-index: 6;
  max-width: 250px;
  padding: 8px 11px 9px;
  background: linear-gradient(180deg, rgba(19,26,36,0.97), rgba(11,15,21,0.97));
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--amber-soft);
  border-radius: 1px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.7);
  pointer-events: none;
}
.yl-map-tip[hidden] { display: none; }
.yl-tip-title { font-family: var(--serif); font-size: 13px; color: var(--ink); }
.yl-tip-meta { font-size: 10px; letter-spacing: 0.06em; color: var(--ink-mute); margin-top: 3px; }
.yl-tip-desc {
  font-family: var(--serif); font-style: italic; font-size: 11.5px;
  color: var(--ink-soft); margin-top: 6px; line-height: 1.45;
}

.yl-map-fallback {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
  font-family: var(--serif); font-style: italic; font-size: 13px;
  color: var(--ink-faint);
  background: rgba(6,10,16,0.9);
}
.yl-map-fallback[hidden] { display: none; }

/* -------------------------------------------------------- the town, in numbers */

.yl-townbar {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 20px;
  padding: 6px 2px 7px;
  border-bottom: 1px solid var(--line);
}
.yl-popkinds { display: flex; gap: 16px; flex-wrap: wrap; min-width: 0; }
.yl-popkind { display: inline-flex; align-items: baseline; gap: 6px; cursor: help; }
.yl-popkind-dot { width: 7px; height: 7px; border-radius: 50%; align-self: center; }
.yl-popkind-n { font-family: var(--serif); font-size: 13.5px; color: var(--ink-soft); }
.yl-popkind-name { font-size: 10.5px; letter-spacing: 0.12em; text-transform: lowercase; color: var(--ink-mute); }
.yl-popkind-share { font-size: 9.5px; color: var(--ink-faint); }
.yl-popkind-total .yl-popkind-n { color: var(--ink); font-size: 15px; }

.yl-townbar-right { display: flex; align-items: baseline; gap: 0; font-size: 11.5px; color: var(--ink-mute); white-space: nowrap; }
.yl-townbar-item { letter-spacing: 0.02em; cursor: help; }
.yl-pop-n { font-family: var(--serif); font-size: 13px; color: var(--ink-soft); }
.yl-pop-dot { margin: 0 8px; color: var(--ink-faint); }

.yl-food-warning {
  flex: 0 0 auto;
  margin-top: -4px;
  padding: 6px 10px;
  border-left: 2px solid var(--death);
  background: linear-gradient(90deg, rgba(180,97,79,0.10), rgba(180,97,79,0));
  font-family: var(--serif); font-style: italic; font-size: 12px;
  color: #e8cfc7;
}
.yl-food-warning[hidden] { display: none; }

/* --------------------------------------------------------- efforts & works */

/* Fixed to its content, and its content is bounded: the project lists scroll
   rather than growing the row, so adding buildings to the data can never
   shrink the map. */
.yl-work-row {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(280px, 0.86fr) minmax(340px, 1.14fr);
  gap: 12px;
  min-height: 0;
}
.yl-panel-works { display: flex; flex-direction: column; min-height: 0; }

.yl-panel-efforts { display: flex; flex-direction: column; min-height: 0; }
.yl-allocs { display: flex; flex-direction: column; gap: 1px; flex: 0 0 auto; }

.yl-alloc {
  display: grid;
  grid-template-columns: 88px 1fr 18px 58px;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
}

/* the split, as one bar */
.yl-split {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 0;
  padding-top: 12px;
}
.yl-split-bar {
  display: flex;
  height: 7px;
  border: 1px solid rgba(232,223,207,0.07);
  background: #070b0f;
  border-radius: 1px;
  overflow: hidden;
  cursor: help;
}
.yl-split-seg { height: 100%; transition: width 380ms cubic-bezier(0.22,0.8,0.3,1); }
.yl-split-industry   { background: linear-gradient(180deg, #ffcb7a, var(--amber-soft)); }
.yl-split-medicine   { background: linear-gradient(180deg, #fff2da, #b8ac96); }
.yl-split-training   { background: linear-gradient(180deg, #9ccbe8, #4d7b98); }
.yl-split-diplomacy  { background: linear-gradient(180deg, #bda6e8, #6a5296); }
.yl-split-protection { background: linear-gradient(180deg, #c3ce93, #6e7842); }
.yl-split-note {
  margin-top: 7px;
  font-family: var(--serif); font-style: italic; font-size: 11px;
  color: var(--ink-faint); line-height: 1.45;
}
.yl-alloc-name { font-size: 12px; color: var(--ink-soft); cursor: help; letter-spacing: 0.02em; }
.yl-alloc-emph { font-family: var(--serif); font-size: 12.5px; color: var(--ink); text-align: center; }
.yl-alloc.yl-zero .yl-alloc-name,
.yl-alloc.yl-zero .yl-alloc-emph { color: var(--ink-faint); }
.yl-alloc-people {
  font-size: 10.5px; color: var(--amber-soft); text-align: right;
  letter-spacing: 0.02em; white-space: nowrap;
}
.yl-alloc.yl-zero .yl-alloc-people { color: var(--ink-faint); }

/* sliders — a lit notch on a dark rail */
.yl-slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 18px;
  background: transparent;
  margin: 0;
  cursor: pointer;
}
.yl-slider::-webkit-slider-runnable-track {
  height: 3px;
  background: linear-gradient(90deg, rgba(255,179,71,0.32), rgba(232,223,207,0.09));
  border-radius: 1px;
}
.yl-slider::-moz-range-track {
  height: 3px;
  background: linear-gradient(90deg, rgba(255,179,71,0.32), rgba(232,223,207,0.09));
  border-radius: 1px;
}
.yl-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 5px; height: 15px;
  margin-top: -6px;
  background: var(--amber);
  border: none; border-radius: 1px;
  box-shadow: 0 0 9px rgba(255,179,71,0.65);
  transition: box-shadow 180ms ease;
}
.yl-slider::-moz-range-thumb {
  width: 5px; height: 15px;
  background: var(--amber);
  border: none; border-radius: 1px;
  box-shadow: 0 0 9px rgba(255,179,71,0.65);
}
.yl-slider:hover::-webkit-slider-thumb { box-shadow: 0 0 15px rgba(255,179,71,0.95); }
.yl-slider:focus { outline: none; }
.yl-slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px rgba(255,179,71,0.5), 0 0 15px rgba(255,179,71,0.9); }

/* two build slots */
.yl-slots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 0;
  flex: 1 1 auto;
}
.yl-slot {
  display: flex; flex-direction: column;
  min-height: 0;
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber-soft);
  background: linear-gradient(180deg, rgba(255,179,71,0.04), rgba(13,18,26,0));
  border-radius: 1px;
  padding: 8px 10px 9px;
}
.yl-slot.yl-idle { border-left-color: rgba(232,223,207,0.14); background: none; }
.yl-slot-label {
  font-size: 8.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 5px; cursor: help;
}
.yl-slot-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.yl-slot-name { font-family: var(--serif); font-size: 13.5px; color: var(--ink); letter-spacing: 0.02em; }
.yl-slot.yl-idle .yl-slot-name { color: var(--ink-mute); font-style: italic; font-size: 12.5px; }
.yl-slot-progress { font-size: 9.5px; color: var(--ink-mute); letter-spacing: 0.05em; flex: 0 0 auto; }
.yl-slot-track {
  height: 4px; margin: 7px 0 7px;
  background: linear-gradient(180deg, #070b0f, #0c1219);
  border: 1px solid rgba(232,223,207,0.06);
  border-radius: 1px; overflow: hidden;
}
.yl-slot-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #7a4a12, var(--amber));
  box-shadow: 0 0 12px rgba(255,179,71,0.5);
  transition: width 640ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.yl-slot-desc {
  font-family: var(--serif); font-style: italic; font-size: 11px;
  color: var(--ink-mute); line-height: 1.42; margin-bottom: 8px;
  max-height: 47px; overflow: hidden;
}

.yl-project-list {
  display: flex; flex-wrap: wrap; gap: 5px;
  overflow-y: auto; min-height: 54px; max-height: 122px; flex: 1 1 auto;
  align-content: flex-start;
  scrollbar-width: thin; scrollbar-color: rgba(232,223,207,0.14) transparent;
  padding-right: 2px;
}
.yl-project-list::-webkit-scrollbar { width: 7px; }
.yl-project-list::-webkit-scrollbar-thumb { background: rgba(232,223,207,0.1); }
.yl-project-list.yl-attention .yl-project-btn:not(:disabled) {
  border-color: rgba(255,179,71,0.32);
  background: rgba(255,179,71,0.05);
}
.yl-project-btn {
  background: rgba(232,223,207,0.02);
  border: 1px solid var(--line);
  border-radius: 1px;
  color: var(--ink-soft);
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 4px 9px;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.yl-project-btn:hover:not(:disabled) {
  color: var(--ink);
  border-color: rgba(255,179,71,0.45);
  background: var(--amber-ghost);
  box-shadow: 0 0 14px rgba(255,179,71,0.1);
}
.yl-project-btn.yl-active { color: var(--amber); border-color: rgba(255,179,71,0.55); background: var(--amber-ghost); }
.yl-project-btn.yl-picking { color: var(--amber); border-color: rgba(255,179,71,0.8); background: rgba(255,179,71,0.14); }
.yl-project-btn:disabled {
  color: var(--ink-faint);
  border-color: rgba(232,223,207,0.05);
  background: none;
  cursor: help;
}
.yl-project-btn .yl-lock { opacity: 0.6; margin-right: 5px; }
.yl-project-btn .yl-cost { color: var(--ink-faint); margin-left: 6px; font-size: 10px; }

/* plot placement */
.yl-place {
  margin-bottom: 8px; padding: 8px 9px 9px;
  border: 1px solid rgba(255,179,71,0.24);
  background: rgba(255,179,71,0.045);
  border-radius: 1px;
}
.yl-place[hidden] { display: none; }
.yl-place-row { display: flex; align-items: center; gap: 8px; }
.yl-place-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-mute); flex: 0 0 auto; }
.yl-place-actions { margin-top: 8px; }
.yl-place-quality {
  font-family: var(--serif); font-style: italic; font-size: 11.5px;
  color: var(--ink-soft); margin-top: 7px; line-height: 1.4;
}
.yl-place-quality.yl-good { color: var(--trust); }
.yl-place-quality.yl-poor { color: var(--amber-soft); }

.yl-mission-expires {
  display: block; margin-top: 8px;
  font-size: 10px; letter-spacing: 0.1em; color: var(--ink-faint);
}
.yl-mission-expires.yl-urgent { color: var(--death); letter-spacing: 0.12em; }

.yl-workforce.yl-idle-warn { color: var(--amber-soft); }

.yl-project-done {
  margin-top: 9px;
  font-size: 10.5px;
  color: var(--ink-faint);
  line-height: 1.55;
  max-height: 44px; overflow-y: auto;
}
.yl-project-done b {
  font-weight: normal; letter-spacing: 0.16em; text-transform: uppercase;
  font-size: 9px; color: var(--ink-mute); margin-right: 7px;
}
.yl-done-group + .yl-done-group { display: block; }

/* ------------------------------------------------------- the minor card */

.yl-minor {
  flex: 0 0 auto;
  display: flex; gap: 11px;
  padding: 9px 13px 10px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--mythos);
  background: linear-gradient(90deg, rgba(120,176,216,0.055), rgba(13,18,26,0));
  border-radius: 1px;
  animation: yl-chron-in 420ms ease both;
}
.yl-minor[hidden] { display: none; }
.yl-minor-mark {
  flex: 0 0 auto; width: 7px; height: 7px; margin-top: 5px;
  border: 1px solid rgba(120,176,216,0.6);
  transform: rotate(45deg);
}
.yl-minor-body { min-width: 0; flex: 1 1 auto; }
.yl-minor-text {
  font-family: var(--serif); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft);
}
.yl-minor-text em { color: var(--ink); font-style: italic; }
.yl-minor-title { font-weight: normal; color: var(--mythos); letter-spacing: 0.03em; }
.yl-minor-choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.yl-minor-btn {
  background: rgba(232,223,207,0.03);
  border: 1px solid var(--line);
  border-radius: 1px;
  color: var(--ink-soft);
  font-size: 11px; letter-spacing: 0.02em;
  padding: 4px 10px;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.yl-minor-btn:hover:not(:disabled) { color: var(--ink); border-color: rgba(120,176,216,0.5); background: rgba(120,176,216,0.08); }
.yl-minor-btn.yl-default { border-left: 2px solid rgba(120,176,216,0.55); }
.yl-minor-resolved { font-family: var(--serif); font-style: italic; font-size: 11.5px; color: var(--mythos); margin-top: 6px; }

/* -------------------------------------------------------- end season */

.yl-endturn {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  background:
    linear-gradient(180deg, rgba(255,179,71,0.1), rgba(255,179,71,0.03)),
    linear-gradient(180deg, rgba(11,15,21,0.94), rgba(11,15,21,0.99));
  border: 1px solid rgba(255,179,71,0.35);
  border-radius: 2px;
  padding: 9px 0 9px;
  color: var(--amber);
  text-align: center;
  animation: yl-pulse 3.6s ease-in-out infinite;
  transition: background 200ms ease, border-color 200ms ease, transform 90ms ease;
}
.yl-endturn:hover:not(:disabled) {
  background:
    linear-gradient(180deg, rgba(255,179,71,0.19), rgba(255,179,71,0.06)),
    linear-gradient(180deg, rgba(11,15,21,0.94), rgba(11,15,21,0.99));
  border-color: rgba(255,179,71,0.6);
}
.yl-endturn:active:not(:disabled) { transform: translateY(1px); }
.yl-endturn:disabled {
  animation: none; color: var(--ink-faint); border-color: var(--line);
  background: linear-gradient(180deg, rgba(11,15,21,0.94), rgba(11,15,21,0.99));
}
.yl-endturn-label {
  display: block;
  font-family: var(--serif);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(255,179,71,0.4);
}
.yl-endturn-sub {
  display: block;
  margin-top: 2px;
  font-size: 9.5px;
  letter-spacing: 0.11em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
@keyframes yl-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(255,179,71,0); }
  50%      { box-shadow: 0 0 22px rgba(255,179,71,0.16); }
}

/* ================================================= RIGHT: chronicle column */

.yl-chron-col {
  position: relative;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  background: rgba(0,0,0,0.14);
  transition: none;
}
/* Two stacked regions, each scrolling on its own: what the network knows now,
   and what has been written down. Intelligence is on top because §13.8.6 says
   it is the thing a player checks first each season. */
.yl-right-inner {
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 16px 15px 18px;
}
/* The feed sizes to its content up to 44% of the column; the chronicle takes
   whatever is left. `flex-basis: 0` on the chronicle matters — with `auto` its
   basis is its (enormous) content height, and the shrink pass then collapses
   the feed to nothing. */
.yl-feed-sec {
  flex: 0 0 auto;
  max-height: 44%;
  display: flex; flex-direction: column; min-height: 0;
}
.yl-chron-sec {
  flex: 1 1 0;
  display: flex; flex-direction: column; min-height: 120px;
}
.yl-feed-head { margin-bottom: 9px; }
.yl-feed-list, .yl-chron-sec .yl-chronicle {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding-right: 3px;
}

/* ------------------------------------------------- the intelligence feed */

.yl-feed-list { display: flex; flex-direction: column; gap: 1px; }

.yl-feed-row {
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 8px;
  align-items: start;
  padding: 6px 8px 7px;
  border-left: 2px solid var(--ink-faint);
  background: linear-gradient(90deg, rgba(232,223,207,0.022), rgba(232,223,207,0));
  animation: yl-chron-in 380ms ease both;
}
.yl-feed-row.yl-clickable { cursor: pointer; }
.yl-feed-row.yl-clickable:hover { background: linear-gradient(90deg, rgba(255,179,71,0.07), rgba(255,179,71,0)); }
.yl-feed-glyph { width: 12px; height: 12px; margin-top: 2px; }
.yl-feed-body { min-width: 0; }
.yl-feed-line {
  font-family: var(--serif); font-size: 11.5px; line-height: 1.5; color: var(--ink-soft);
}
.yl-feed-line b { font-weight: normal; color: var(--ink); }
.yl-feed-meta {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-faint); margin-top: 2px;
}
.yl-feed-ready { color: var(--amber-soft); }
.yl-feed-strain { color: var(--death); }

.yl-feed-factor       { border-left-color: var(--amber-soft); }
.yl-feed-client       { border-left-color: var(--morale); }
.yl-feed-informant    { border-left-color: var(--mythos); }
.yl-feed-compromised  { border-left-color: var(--death); }
.yl-feed-route        { border-left-color: var(--trust); }
.yl-feed-dark         { border-left-color: rgba(125,133,147,0.35); }
.yl-feed-dark .yl-feed-line { color: var(--ink-faint); font-style: italic; }
.yl-feed-warn         { border-left-color: var(--amber); background: linear-gradient(90deg, rgba(255,179,71,0.075), rgba(255,179,71,0)); }
.yl-feed-warn .yl-feed-line { color: var(--ink); }
.yl-feed-op           { border-left-color: rgba(255,179,71,0.4); }
.yl-feed-op .yl-feed-line { color: var(--ink-soft); }

.yl-chron-toggle {
  position: absolute; top: 10px; left: -1px; z-index: 4;
  width: 18px; height: 26px;
  background: rgba(11,16,23,0.9);
  border: 1px solid var(--line);
  color: var(--ink-faint);
  font-size: 13px; line-height: 1; padding: 0;
  border-radius: 1px;
}
.yl-chron-toggle:hover { color: var(--ink); border-color: var(--line-strong); }
.yl-chron-toggle .yl-chron-toggle-shut { display: none; }
.yl-chron-spine {
  display: none;
  position: absolute; top: 52px; left: 6px;
  transform-origin: 0 0;
  transform: rotate(90deg);
  font-size: 9.5px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--ink-faint);
  white-space: nowrap;
  pointer-events: none;
}
.yl-chron-col.yl-shut .yl-right-inner { display: none; }
.yl-chron-col.yl-shut .yl-chron-spine { display: block; }
.yl-chron-col.yl-shut .yl-chron-toggle-open { display: none; }
.yl-chron-col.yl-shut .yl-chron-toggle-shut { display: inline; }

.yl-chronicle { display: flex; flex-direction: column; gap: 1px; }

.yl-chron {
  padding: 7px 10px 8px;
  border-left: 2px solid var(--ink-faint);
  background: linear-gradient(90deg, rgba(232,223,207,0.022), rgba(232,223,207,0));
  animation: yl-chron-in 420ms ease both;
}
@keyframes yl-chron-in {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: none; }
}
.yl-chron-meta {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 3px;
}
.yl-chron-text {
  font-family: var(--serif);
  font-size: 12px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.yl-chron-report  { border-left-color: rgba(125,133,147,0.45); }
.yl-chron-event   { border-left-color: var(--amber-soft); }
.yl-chron-event   .yl-chron-text { color: var(--ink); }
.yl-chron-history { border-left-color: var(--elite); }
.yl-chron-history .yl-chron-text { color: #ddd4ea; }
.yl-chron-history .yl-chron-meta { color: rgba(157,128,214,0.7); }
.yl-chron-project { border-left-color: var(--trust); }
.yl-chron-project .yl-chron-text { color: #e2e5cd; }
.yl-chron-build   { border-left-color: var(--trust); }
.yl-chron-build   .yl-chron-text { color: #e2e5cd; }
.yl-chron-mission { border-left-color: var(--mythos); }
.yl-chron-asset   { border-left-color: rgba(240,228,205,0.55); }
.yl-chron-asset   .yl-chron-text { color: #ece5d6; }
.yl-chron-minor   { border-left-color: rgba(120,176,216,0.42); }
.yl-chron-minor   .yl-chron-text { color: var(--ink-mute); font-size: 11.5px; }
.yl-chron-burn    { border-left-color: var(--death); background: linear-gradient(90deg, rgba(180,97,79,0.09), rgba(180,97,79,0)); }
.yl-chron-burn    .yl-chron-text { color: #e8cfc7; }
.yl-chron-death   { border-left-color: var(--death); background: linear-gradient(90deg, rgba(180,97,79,0.07), rgba(180,97,79,0)); }
.yl-chron-death   .yl-chron-text { color: #e8cfc7; font-style: italic; }

.yl-chron-empty {
  font-family: var(--serif); font-style: italic; font-size: 12px;
  color: var(--ink-faint); padding: 9px 2px;
}

/* ========================================================= DISPATCH PANEL */

.yl-dispatch {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 352px;
  z-index: 30;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #141c27 0%, #0c1119 100%);
  border-left: 1px solid var(--line-strong);
  box-shadow: -22px 0 60px rgba(0,0,0,0.6);
  transform: translateX(102%);
  transition: transform 280ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
.yl-dispatch[hidden] { display: none; }
.yl-dispatch.yl-open { transform: none; }

.yl-dispatch-head {
  flex: 0 0 auto;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;
  padding: 16px 18px 13px;
  border-bottom: 1px solid var(--line);
  background: radial-gradient(ellipse 120% 90% at 0% 0%, rgba(255,179,71,0.07), rgba(255,179,71,0) 70%);
}
.yl-dispatch-kind { font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--amber-soft); }
.yl-dispatch-title {
  font-family: var(--serif); font-size: 18px; font-weight: normal;
  color: var(--ink); margin: 5px 0 3px; letter-spacing: 0.02em;
}
.yl-dispatch-where { font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); }

.yl-dispatch-body {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  padding: 14px 18px 18px;
  scrollbar-width: thin; scrollbar-color: rgba(232,223,207,0.14) transparent;
}
.yl-dispatch-body::-webkit-scrollbar { width: 8px; }
.yl-dispatch-body::-webkit-scrollbar-thumb { background: rgba(232,223,207,0.1); }

.yl-dispatch-desc {
  font-family: var(--serif); font-size: 13px; line-height: 1.65; color: var(--ink-soft);
}
.yl-dispatch-desc p { margin: 0 0 10px; }
.yl-dispatch-desc p:last-child { margin-bottom: 0; }

.yl-dispatch-meta {
  font-size: 10px; letter-spacing: 0.06em; color: var(--ink-mute);
  margin-top: 12px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.yl-field {
  display: grid;
  grid-template-columns: 82px 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.yl-field-step { grid-template-columns: 82px auto 1fr; }
.yl-field-label { font-size: 12px; color: var(--ink-soft); cursor: help; letter-spacing: 0.02em; }
.yl-field-hint { font-size: 10px; color: var(--ink-faint); letter-spacing: 0.04em; text-align: right; }

.yl-select {
  width: 100%;
  background: #0d131b;
  border: 1px solid var(--line-strong);
  border-radius: 1px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  padding: 5px 7px;
}
.yl-select:focus { outline: none; border-color: rgba(255,179,71,0.5); }
.yl-select option { background: #0d131b; color: var(--ink); }
.yl-select option:disabled { color: var(--ink-faint); }

.yl-stepper { display: flex; align-items: center; gap: 2px; }
.yl-step {
  width: 24px; height: 24px;
  background: rgba(232,223,207,0.03);
  border: 1px solid var(--line);
  border-radius: 1px;
  color: var(--ink-soft);
  font-size: 13px; line-height: 1;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.yl-step:hover:not(:disabled) { color: var(--amber); border-color: rgba(255,179,71,0.45); background: var(--amber-ghost); }
.yl-step:disabled { color: var(--ink-faint); opacity: 0.4; }
.yl-step-value { font-family: var(--serif); font-size: 14px; color: var(--ink); min-width: 30px; text-align: center; }

.yl-dispatch-error {
  margin-top: 12px; font-size: 11.5px; color: var(--death); letter-spacing: 0.02em;
}
.yl-dispatch-error[hidden] { display: none; }

.yl-dispatch-foot {
  flex: 0 0 auto;
  display: flex; gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--line);
}
.yl-dispatch-foot .yl-choice { flex: 1; text-align: center; margin: 0; }

.yl-dispatch-btn {
  background: rgba(255,179,71,0.05);
  border: 1px solid rgba(255,179,71,0.28);
  border-radius: 1px;
  color: var(--amber-soft);
  font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 5px 13px;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.yl-dispatch-btn:hover:not(:disabled) { color: var(--amber); border-color: rgba(255,179,71,0.6); background: rgba(255,179,71,0.12); }
.yl-dispatch-btn:disabled { color: var(--ink-faint); border-color: var(--line); background: none; cursor: help; }

/* ============================================ PULLING A THREAD (§13.4) */
/* Reads as a different act from a dispatch: cooler light, a parchment edge
   rather than the amber one, and a standing note at the top saying no team
   leaves and no season passes. */

.yl-assetpanel { border-left-color: rgba(232,223,207,0.22); }
.yl-assetpanel .yl-dispatch-head {
  background: radial-gradient(ellipse 120% 90% at 0% 0%, rgba(240,228,205,0.06), rgba(240,228,205,0) 70%);
}
.yl-assetpanel .yl-dispatch-kind { color: var(--ink-soft); }

.yl-free-note {
  flex: 0 0 auto;
  padding: 7px 18px 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(240,228,205,0.035);
  font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--morale);
  cursor: help;
}

.yl-asset-stats {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 14px;
}
.yl-asset-stat { display: flex; flex-direction: column; gap: 2px; }
.yl-asset-stat-label {
  font-size: 8.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); cursor: help;
}
.yl-asset-stat-value { font-family: var(--serif); font-size: 14px; color: var(--ink); }

.yl-exposure-track {
  height: 4px; margin: 10px 0 6px;
  background: linear-gradient(180deg, #070b0f, #0c1219);
  border: 1px solid rgba(232,223,207,0.06);
  border-radius: 1px; overflow: hidden; cursor: help;
}
.yl-exposure-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, rgba(167,179,107,0.5), var(--amber-soft));
  transition: width 520ms cubic-bezier(0.22,0.8,0.3,1), background 400ms ease;
}
.yl-exposure-fill.yl-hot { background: linear-gradient(90deg, var(--amber-soft), var(--death)); }
.yl-asset-note {
  font-family: var(--serif); font-style: italic; font-size: 11.5px;
  color: var(--ink-mute); line-height: 1.45;
  padding-bottom: 13px; border-bottom: 1px solid var(--line);
}
.yl-asset-note.yl-hot { color: #e8cfc7; }

.yl-asset-useshead {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink-faint); margin: 14px 0 8px;
}
.yl-asset-uses { display: flex; flex-direction: column; gap: 7px; }

.yl-use {
  display: block; width: 100%; text-align: left;
  background: rgba(232,223,207,0.025);
  border: 1px solid var(--line);
  border-left: 2px solid rgba(232,223,207,0.2);
  border-radius: 1px;
  padding: 9px 12px 10px;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.yl-use:hover:not(:disabled) {
  border-color: rgba(255,179,71,0.4);
  border-left-color: var(--amber);
  background: var(--amber-ghost);
}
.yl-use:disabled { opacity: 0.42; cursor: help; }
.yl-use-label { display: block; font-size: 12.5px; color: var(--ink); letter-spacing: 0.02em; }
.yl-use-desc {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 11.5px; color: var(--ink-mute); line-height: 1.45; margin-top: 4px;
}
.yl-use-cost {
  display: block; margin-top: 6px;
  font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-faint);
}
.yl-use-cost .yl-cost-hot { color: var(--death); }
.yl-use-cost .yl-cost-warm { color: var(--amber-soft); }

/* ------------------------------------- asset-gated choices (§13.5) */
/* Visible and explained, never hidden. Wanting the thread you do not have is
   the point of the whole section. */
.yl-choice-gated {
  border-left-color: rgba(120,176,216,0.32);
  background: rgba(120,176,216,0.03);
}
/* A locked door you can see is not the same as no door. The label stays
   readable; only the affordance is withdrawn. */
.yl-choice-gated:disabled { opacity: 1; cursor: help; background: rgba(120,176,216,0.022); }
.yl-choice-gated:disabled .yl-choice-label { color: var(--ink-mute); }
.yl-choice-label { display: block; }
.yl-choice-gate {
  display: block; margin-top: 5px;
  font-family: var(--serif); font-style: italic; font-size: 11.5px;
  color: var(--mythos); line-height: 1.4;
}
.yl-choice-gated.yl-gate-open { border-left-color: var(--mythos); background: rgba(120,176,216,0.07); }
.yl-choice-gated.yl-gate-open .yl-choice-gate { color: var(--trust); }
.yl-choice-gated.yl-gate-shut .yl-choice-gate { color: var(--ink-faint); }

/* risk as a word, never a meter */
.yl-mission-risk { font-size: 9px; letter-spacing: 0.17em; text-transform: uppercase; cursor: help; }
.yl-risk-low     { color: var(--trust); }
.yl-risk-medium  { color: var(--amber-soft); }
.yl-risk-high    { color: var(--death); }
.yl-risk-unknown { color: var(--ink-faint); }

/* ============================================================= THE MAP SVG */

svg.yl-map text { font-family: var(--sans); }

.yl-map-sea { fill: var(--map-sea); }
.yl-map-land { fill: var(--map-land); }
.yl-map-tint { fill: var(--map-tint); opacity: var(--map-tint-a); transition: fill 900ms ease, opacity 900ms ease; }
.yl-map-shore { fill: none; stroke: var(--map-shore); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.yl-map-shore-2 { fill: none; stroke: var(--map-shore); stroke-width: 3.6; opacity: 0.16; vector-effect: non-scaling-stroke; }

.yl-map-hill { fill: rgba(140,158,178,0.045); stroke: var(--map-contour); stroke-width: 1; vector-effect: non-scaling-stroke; }
.yl-map-hill-2 { fill: none; stroke: var(--map-contour-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.yl-map-ridge { fill: none; stroke: var(--map-contour); stroke-width: 1; vector-effect: non-scaling-stroke; }
.yl-map-snow { fill: none; stroke: var(--map-snow); stroke-width: 2.4; vector-effect: non-scaling-stroke; transition: stroke 900ms ease; }

.yl-map-river { fill: none; stroke: var(--map-river); stroke-width: 1.2; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.yl-map-river-major { stroke-width: 2; }
.yl-map-lake { fill: rgba(90,140,180,0.30); stroke: var(--map-river); stroke-width: 0.8; vector-effect: non-scaling-stroke; }

.yl-map-road { fill: none; stroke: var(--map-road); stroke-width: 1; stroke-dasharray: 5 3.5; vector-effect: non-scaling-stroke; }
.yl-map-road-main { stroke-width: 1.4; stroke-dasharray: none; opacity: 0.85; }
.yl-map-road-lit { stroke: var(--map-road-lit); stroke-width: 1.5; stroke-dasharray: none; }

.yl-map-wood { fill: var(--map-wood); stroke: none; opacity: 0.5; }
.yl-map-tree { stroke: var(--map-veg); stroke-width: 1; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: 0.75; transition: stroke 900ms ease; }

.yl-map-label {
  fill: var(--map-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  paint-order: stroke;
  stroke: rgba(4,7,11,0.85);
  stroke-width: 2.6;
  stroke-linejoin: round;
}
.yl-map-label-major { fill: var(--map-label-lit); letter-spacing: 0.2em; }
.yl-map-label-water { fill: rgba(120,176,216,0.5); font-style: italic; text-transform: none; letter-spacing: 0.1em; }
.yl-map-label-road { fill: rgba(203,211,223,0.34); text-transform: none; letter-spacing: 0.08em; font-style: italic; }
.yl-map-label-plot { fill: rgba(203,211,223,0.5); letter-spacing: 0.1em; }

.yl-map-site { fill: rgba(190,204,220,0.55); stroke: rgba(12,17,24,0.9); stroke-width: 0.6; }
.yl-map-site-capital { fill: rgba(226,214,192,0.9); }
.yl-map-site-ring { fill: none; stroke: var(--map-contour); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* the plot markers: faint until built on */
.yl-map-plot { fill: none; stroke: var(--map-plot); stroke-width: 1; vector-effect: non-scaling-stroke; }
.yl-map-plot-hit { fill: transparent; cursor: default; }
.yl-map-plot-hit.yl-pickable { cursor: pointer; }
.yl-plotmark { transition: opacity 300ms ease; }
.yl-plotmark.yl-pick-on .yl-map-plot { stroke: var(--amber); stroke-width: 1.6; }
.yl-plotmark.yl-pick-good .yl-map-plot { stroke: var(--trust); stroke-width: 1.8; }
.yl-plotmark.yl-taken { opacity: 0; }

/* buildings */
.yl-glyph { fill: none; stroke: var(--map-build); stroke-width: 1.15; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.yl-glyph-fill { fill: rgba(16,23,32,0.86); stroke: var(--map-build); stroke-width: 1.15; vector-effect: non-scaling-stroke; }
.yl-glyph-accent { fill: none; stroke: var(--amber-soft); stroke-width: 1.1; vector-effect: non-scaling-stroke; opacity: 0.8; }
.yl-building { animation: yl-raise 700ms cubic-bezier(0.2,0.8,0.3,1) both; }
@keyframes yl-raise {
  from { opacity: 0; transform: translateY(3px); }
  to   { opacity: 1; transform: none; }
}

/* the town itself */
.yl-dwelling { fill: rgba(226,214,192,0.5); stroke: none; }
.yl-dwelling-veteran { fill: rgba(180,97,79,0.62); }
.yl-dwelling-artisan { fill: rgba(255,179,71,0.55); }
.yl-tent { fill: none; stroke: rgba(120,176,216,0.55); stroke-width: 0.9; vector-effect: non-scaling-stroke; }
.yl-field-strip { fill: var(--map-field); stroke: none; transition: fill 900ms ease; }
.yl-field-line { stroke: var(--map-veg); stroke-width: 0.6; opacity: 0.45; vector-effect: non-scaling-stroke; }
.yl-palisade { fill: none; stroke: rgba(190,170,140,0.42); stroke-width: 1.2; stroke-dasharray: 2 1.6; vector-effect: non-scaling-stroke; }

/* the vault */
.yl-vault-halo { pointer-events: none; }
.yl-vault-pulse { animation: yl-vault-breathe 4.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes yl-vault-breathe {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.14); }
}
.yl-vault-mouth { fill: none; stroke: var(--amber); stroke-width: 1.3; vector-effect: non-scaling-stroke; }

/* mission pins */
.yl-pin { cursor: pointer; }
.yl-pin-body { fill: rgba(12,17,25,0.92); stroke: var(--amber-soft); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.yl-pin:hover .yl-pin-body { stroke: var(--amber); fill: rgba(30,22,12,0.95); }
.yl-pin-icon { fill: none; stroke: var(--amber); stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.yl-pin-icon-fill { fill: var(--amber); stroke: none; }
.yl-pin-stem { stroke: rgba(255,179,71,0.5); stroke-width: 1; vector-effect: non-scaling-stroke; }
.yl-pin-count {
  fill: var(--ink); letter-spacing: 0.02em;
  paint-order: stroke; stroke: rgba(4,7,11,0.9); stroke-width: 2.2; stroke-linejoin: round;
}
.yl-pin-count-urgent { fill: #ffb0a0; }
.yl-pin-halo { fill: none; stroke: rgba(255,179,71,0.32); stroke-width: 1; vector-effect: non-scaling-stroke; animation: yl-ping 2.8s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes yl-ping {
  0%   { opacity: 0.55; transform: scale(0.7); }
  70%  { opacity: 0;    transform: scale(1.7); }
  100% { opacity: 0;    transform: scale(1.7); }
}
.yl-pin-urgent .yl-pin-body { stroke: var(--death); }
.yl-pin-urgent .yl-pin-halo { stroke: rgba(180,97,79,0.45); }

/* ------------------------------------------------- the influence web (§13.8)
   Class vocabulary for js/ui-map.js. The shell owns this stylesheet; the map
   owns the markup that wears these classes. Thread colour is by KIND, weight
   by strength (add .yl-str-1/2/3), and strain by exposure (.yl-strained, then
   .yl-fraying above ~70). Covert threads cut straight; factor/client routes
   follow the roads — that contrast is the point, and it is drawn, not styled. */

.yl-thread {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.72;
  transition: opacity 500ms ease, stroke 500ms ease;
}
.yl-thread-factor      { stroke: rgba(255,179,71,0.62); }
.yl-thread-client      { stroke: rgba(240,228,205,0.5); }
.yl-thread-informant   { stroke: rgba(120,176,216,0.55); stroke-dasharray: 7 4; }
.yl-thread-compromised { stroke: rgba(180,97,79,0.6); stroke-dasharray: 3 3.5; }
.yl-thread-route       { stroke: rgba(167,179,107,0.5); }
.yl-str-1 { stroke-width: 0.9; }
.yl-str-2 { stroke-width: 1.6; }
.yl-str-3 { stroke-width: 2.4; }
.yl-thread.yl-strained { opacity: 0.5; stroke-dasharray: 5 5; }
.yl-thread.yl-fraying  { opacity: 0.42; stroke-dasharray: 2.5 5.5; animation: yl-flicker 2.2s steps(1, end) infinite; }
@keyframes yl-flicker {
  0%, 62%, 71%, 100% { opacity: 0.46; }
  66%, 84%           { opacity: 0.13; }
}
/* the warm glow under a healthy thread — draw a second, wider copy beneath */
.yl-thread-glow { fill: none; stroke-width: 4.5; opacity: 0.1; vector-effect: non-scaling-stroke; }

.yl-asset { cursor: pointer; }
.yl-asset-body { fill: rgba(12,17,25,0.94); stroke: rgba(226,214,192,0.6); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.yl-asset:hover .yl-asset-body { stroke: var(--ink); }
.yl-asset-glyph { fill: none; stroke: rgba(226,214,192,0.85); stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.yl-asset-factor      .yl-asset-body { stroke: var(--amber-soft); }
.yl-asset-factor      .yl-asset-glyph { stroke: var(--amber); }
.yl-asset-client      .yl-asset-body { stroke: rgba(240,228,205,0.6); }
.yl-asset-client      .yl-asset-glyph { stroke: var(--morale); }
.yl-asset-informant   .yl-asset-body { stroke: rgba(120,176,216,0.6); }
.yl-asset-informant   .yl-asset-glyph { stroke: var(--mythos); }
.yl-asset-compromised .yl-asset-body { stroke: rgba(180,97,79,0.7); }
.yl-asset-compromised .yl-asset-glyph { stroke: var(--death); }
/* exposure as a ring that fills: stroke-dasharray set inline by the map */
.yl-asset-ring { fill: none; stroke: rgba(232,223,207,0.14); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.yl-asset-ring-fill { fill: none; stroke: var(--amber-soft); stroke-width: 1.4; stroke-linecap: butt; vector-effect: non-scaling-stroke; transition: stroke-dasharray 500ms ease; }
.yl-asset-ring-fill.yl-hot { stroke: var(--death); }
/* the pull affordance — a small notch that lights on hover */
.yl-asset-pull { fill: none; stroke: rgba(255,179,71,0.0); stroke-width: 1.2; vector-effect: non-scaling-stroke; transition: stroke 200ms ease; }
.yl-asset:hover .yl-asset-pull { stroke: rgba(255,179,71,0.85); }
.yl-asset.yl-ready .yl-asset-pull { stroke: rgba(255,179,71,0.5); }
.yl-asset.yl-cooling { opacity: 0.62; }

/* fog: a site you have no eyes in is dim, unlabelled and carries no pins */
.yl-site-dark  { opacity: 0.28; }
.yl-site-half  { opacity: 0.68; }
.yl-site-lit   { opacity: 1; }
.yl-reach-new  { animation: yl-reach 1400ms ease-out 1; }
@keyframes yl-reach {
  0%   { opacity: 0.2; }
  30%  { opacity: 1; filter: drop-shadow(0 0 10px rgba(255,179,71,0.7)); }
  100% { opacity: 1; filter: none; }
}
.yl-pin-half .yl-pin-count { fill: var(--ink-mute); }

/* teams out in the world */
.yl-token { transition: transform 900ms cubic-bezier(0.35, 0.05, 0.3, 1); }
.yl-token-body { fill: rgba(12,17,25,0.95); stroke: var(--mythos); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.yl-token-mark { fill: var(--mythos); }
.yl-token-label {
  fill: rgba(150,190,220,0.8); letter-spacing: 0.1em; text-transform: uppercase;
  paint-order: stroke; stroke: rgba(4,7,11,0.9); stroke-width: 2.2; stroke-linejoin: round;
}
.yl-token-trail { fill: none; stroke: rgba(120,176,216,0.30); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }

/* framing: what belongs to which zoom */
.yl-layer { transition: opacity 380ms ease; }
svg.yl-map.yl-fr-latium .yl-only-valley { opacity: 0; pointer-events: none; }
svg.yl-map.yl-fr-valley .yl-only-latium { opacity: 0; pointer-events: none; }
svg.yl-map.yl-fr-valley .yl-only-valley { opacity: 1; }
svg.yl-map.yl-fr-latium .yl-only-latium { opacity: 1; }

/* night / high mythos */
.yl-map-night { pointer-events: none; opacity: var(--map-night); transition: opacity 1100ms ease; }

/* seasons — four treatments, and the vegetation moves with them */
svg.yl-map.yl-season-0 { --map-tint: #5f7f63; --map-tint-a: 0.075; --map-veg: #7fa06a; --map-field: rgba(126,160,106,0.30); --map-snow: rgba(220,234,246,0); }
svg.yl-map.yl-season-1 { --map-tint: #b9a05c; --map-tint-a: 0.085; --map-veg: #b8a463; --map-field: rgba(196,172,96,0.34); --map-snow: rgba(220,234,246,0); }
svg.yl-map.yl-season-2 { --map-tint: #96612f; --map-tint-a: 0.095; --map-veg: #a8702f; --map-field: rgba(160,104,50,0.34); --map-snow: rgba(220,234,246,0); }
svg.yl-map.yl-season-3 { --map-tint: #8fa9c2; --map-tint-a: 0.075; --map-veg: #7d8c96; --map-field: rgba(150,168,184,0.22); --map-snow: rgba(224,238,250,0.42); }

/* ---------------------------------------------------------- overlays */

.yl-overlay {
  position: fixed; inset: 0;
  z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(5, 8, 12, 0.72);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  animation: yl-fade 240ms ease both;
  padding: 40px;
}
.yl-overlay[hidden] { display: none; }
.yl-overlay-final { z-index: 60; background: rgba(4, 6, 9, 0.9); }
@keyframes yl-fade { from { opacity: 0; } to { opacity: 1; } }

.yl-card {
  width: 620px;
  max-height: 86vh;
  overflow-y: auto;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(255,179,71,0.055), rgba(255,179,71,0) 70%),
    linear-gradient(180deg, #151d29 0%, #0d131b 100%);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: 26px 32px 28px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.7), 0 0 60px rgba(255,179,71,0.05);
  animation: yl-card-in 320ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
  scrollbar-width: thin;
  scrollbar-color: rgba(232,223,207,0.14) transparent;
}
@keyframes yl-card-in {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to   { opacity: 1; transform: none; }
}
.yl-card-small { width: 420px; }
.yl-card-final { width: 660px; }

/* The valley, seen from inside. Heavily dimmed — this is a backdrop behind
   prose, not a splash screen. A missing hero.png simply doesn't paint.
   NOTE: the ?v= below is the ONLY hand-maintained cache-buster in the build —
   url() cannot read index.html's version the way js/ui.js does. Bump it here
   whenever you bump ?v= in index.html, or a replaced hero.png will go stale. */
.yl-card-final {
  background-image:
    linear-gradient(180deg,
      rgba(10,14,19,0.80) 0%,
      rgba(10,14,19,0.90) 40%,
      rgba(10,14,19,0.96) 100%),
    url("../art/hero.png?v=8");
  background-size: cover, cover;
  background-position: center, center 32%;
  background-repeat: no-repeat, no-repeat;
}

.yl-intro-orient {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.7;
  letter-spacing: 0.03em;
  color: var(--ink-mute);
}

/* Banner strip: bleeds to the card edges (card padding is 26px 32px) and
   fades into the card ground so it reads as a window, not a header image. */
.yl-card-art {
  position: relative;
  height: 168px;
  margin: -26px -32px 20px;
  overflow: hidden;
}
.yl-card-art[hidden] { display: none; }
.yl-card-art img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.85) saturate(0.88);
}
.yl-card-art::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(13,19,27,0.30) 0%,
    rgba(13,19,27,0.12) 38%,
    rgba(13,19,27,0.80) 86%,
    #0d131b 100%);
}

.yl-card-rule {
  height: 1px;
  background: linear-gradient(90deg, var(--amber-soft) 0%, rgba(255,179,71,0.15) 34%, rgba(232,223,207,0) 100%);
  margin-bottom: 18px;
}
.yl-card-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: normal;
  letter-spacing: 0.04em;
  color: var(--ink);
  margin: 0 0 13px;
  text-shadow: 0 0 26px rgba(255,179,71,0.16);
}
.yl-card-text {
  font-family: var(--serif);
  font-size: 14.5px;
  line-height: 1.72;
  color: var(--ink-soft);
}
.yl-card-text p { margin: 0 0 12px; }
.yl-card-text p:last-child { margin-bottom: 0; }

.yl-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 22px; }
.yl-choices-row { flex-direction: row; }
.yl-choices-row .yl-choice { flex: 1; text-align: center; }

.yl-choice {
  display: block; width: 100%;
  text-align: left;
  background: rgba(232,223,207,0.025);
  border: 1px solid var(--line);
  border-left: 2px solid rgba(232,223,207,0.18);
  border-radius: 1px;
  padding: 11px 15px;
  color: var(--ink-soft);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.yl-choice:hover:not(:disabled) {
  color: var(--ink);
  border-color: rgba(255,179,71,0.4);
  border-left-color: var(--amber);
  background: var(--amber-ghost);
  box-shadow: 0 0 22px rgba(255,179,71,0.08);
}
.yl-choice:disabled { opacity: 0.3; }
.yl-choice-quiet { border-left-color: rgba(232,223,207,0.1); }

.yl-outcome { margin-top: 22px; }
.yl-outcome[hidden] { display: none; }
.yl-outcome-rule {
  height: 1px;
  background: linear-gradient(90deg, rgba(232,223,207,0.18), rgba(232,223,207,0));
  margin-bottom: 16px;
}
.yl-outcome-text {
  font-family: var(--serif);
  font-size: 14px;
  line-height: 1.72;
  color: var(--ink);
  animation: yl-fade 420ms ease both;
}
.yl-outcome-text p { margin: 0 0 11px; }
.yl-outcome-text p:last-child { margin-bottom: 0; }

.yl-continue {
  margin-top: 20px;
  background: linear-gradient(180deg, rgba(255,179,71,0.1), rgba(255,179,71,0.03));
  border: 1px solid rgba(255,179,71,0.32);
  border-radius: 1px;
  color: var(--amber);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  padding: 9px 26px;
  transition: background 180ms ease, border-color 180ms ease;
}
.yl-continue:hover {
  background: linear-gradient(180deg, rgba(255,179,71,0.19), rgba(255,179,71,0.06));
  border-color: rgba(255,179,71,0.6);
}

/* ------------------------------------------------------------- ending */

.yl-final-kicker {
  font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 9px;
}
.yl-final-title { font-size: 27px; }
.yl-final-text { font-size: 14.5px; line-height: 1.8; }
.yl-card-final.yl-win .yl-card-rule {
  background: linear-gradient(90deg, var(--amber) 0%, rgba(255,179,71,0.3) 40%, rgba(232,223,207,0) 100%);
}
.yl-card-final.yl-win .yl-final-kicker { color: var(--amber-soft); }
.yl-card-final.yl-loss .yl-card-rule {
  background: linear-gradient(90deg, var(--death) 0%, rgba(180,97,79,0.22) 40%, rgba(232,223,207,0) 100%);
}
.yl-card-final.yl-loss .yl-final-kicker { color: rgba(180,97,79,0.85); }

/* --------------------------------------------------------------- misc */

.yl-dev-badge {
  position: fixed; right: 10px; bottom: 8px; z-index: 80;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ink-faint);
  border: 1px solid var(--line);
  padding: 2px 7px; border-radius: 1px;
  background: rgba(10,14,19,0.8);
}
.yl-dev-badge a { color: var(--amber-soft); text-decoration: none; margin-left: 7px; }
.yl-dev-badge a:hover { color: var(--amber); }

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

/* ------------------------------------------------ dispatch odds (playtest) */
/* Gap #1/#2/#13: the odds for the proposed crew, the priced risk word, and
   the saturation note. Numbers all come from the engine at render time. */

.yl-dispatch-odds {
  margin-top: 10px; padding: 8px 10px;
  border: 1px solid var(--line); border-left: 2px solid var(--amber-soft);
  background: var(--amber-ghost);
  font-size: 12.5px; color: var(--ink-soft); line-height: 1.5;
}
.yl-dispatch-odds[hidden] { display: none; }
.yl-odds-num { color: var(--amber); font-weight: 600; font-size: 14px; }
.yl-odds-note { margin-top: 4px; color: var(--ink-mute); }
.yl-odds-safe { color: var(--trust); }
.yl-odds-danger { color: var(--death); }

/* ------------------------------------------------- effects chips (playtest) */
/* What a resolution actually did. A positive lost at a capped or frozen meter
   is shown struck rather than silently dropped. */

.yl-fx-row {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 12px; padding-top: 9px;
  border-top: 1px solid var(--line);
}
.yl-fx {
  font-family: var(--sans); font-size: 11.5px; letter-spacing: 0.02em;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong); border-radius: 2px;
  padding: 2px 7px;
  background: rgba(232, 223, 207, 0.04);
}
.yl-fx-flat { color: var(--amber-soft); border-color: rgba(226, 160, 74, 0.4); }
.yl-fx-bad { color: var(--death); border-color: rgba(180, 97, 79, 0.45); }
.yl-fx-lost { color: var(--ink-faint); text-decoration: line-through; }
.yl-fx-lost .yl-fx-note, .yl-fx .yl-fx-note { text-decoration: none; color: var(--ink-faint); font-style: italic; }
.yl-meter-row.yl-full .yl-meter-value { color: var(--amber-soft); }
.yl-portrait-img { object-fit: cover; object-position: top center; }

/* --------------------------------------------- person panel (drill-down) */

.yl-member-clickable { cursor: pointer; }
.yl-member-clickable:hover { background: var(--amber-ghost); }

.yl-person-top { display: flex; gap: 14px; margin-bottom: 12px; }
.yl-person-portrait { flex: 0 0 auto; }
.yl-person-img, .yl-person-plate .yl-portrait {
  width: 132px; height: 165px;
  object-fit: cover; object-position: top center;
  border: 1px solid var(--line-strong); border-radius: 1px;
  display: block;
}
.yl-person-img-dead, .yl-person-plate.yl-person-img-dead .yl-portrait {
  filter: grayscale(1) brightness(0.7);
}
.yl-person-facts { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

.yl-person-chronicle { display: flex; flex-direction: column; gap: 7px; }
.yl-person-chronline {
  font-size: 12px; line-height: 1.5; color: var(--ink-soft);
  border-left: 2px solid var(--line-strong); padding-left: 8px;
}
.yl-person-chronwhen { color: var(--amber-soft); font-variant: small-caps; letter-spacing: 0.04em; }

/* ---------------------------------------------- place panel (drill-down) */

.yl-linkish { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.yl-linkish:hover { color: var(--amber-soft); }

.yl-place-list { display: flex; flex-direction: column; gap: 5px; }
.yl-place-row {
  display: flex; align-items: baseline; gap: 8px; text-align: left;
  font-family: var(--sans); font-size: 12px; color: var(--ink-soft);
  background: rgba(232, 223, 207, 0.03);
  border: 1px solid var(--line); border-radius: 1px;
  padding: 5px 8px; cursor: pointer;
}
.yl-place-row:hover { border-color: var(--line-strong); background: var(--amber-ghost); }
.yl-place-row-static { cursor: default; }
.yl-place-row-static:hover { background: rgba(232, 223, 207, 0.03); border-color: var(--line); }
.yl-place-row-kind { color: var(--amber-soft); font-variant: small-caps; letter-spacing: 0.05em; }
.yl-place-row-name { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.yl-place-row-meta { margin-left: auto; color: var(--ink-faint); white-space: nowrap; }

/* ----------------------------------------------- chronicles (save slots) */

.yl-chron-slot {
  border: 1px solid var(--line); border-radius: 1px;
  padding: 9px 11px; background: rgba(232, 223, 207, 0.03);
}
.yl-chron-slot.yl-chron-active { border-color: rgba(226, 160, 74, 0.4); background: var(--amber-ghost); }
.yl-chron-slot-head { display: flex; align-items: baseline; gap: 8px; }
.yl-chron-slot-name { font-family: var(--serif); font-size: 14px; color: var(--ink); }
.yl-chron-slot-badge {
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber-soft);
}
.yl-chron-slot-meta { font-size: 11.5px; color: var(--ink-mute); margin-top: 2px; }
.yl-chron-slot-acts { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.yl-chron-slot-acts .yl-choice { font-size: 11.5px; padding: 4px 10px; }
.yl-chron-burn.yl-armed { color: var(--death); border-color: rgba(180, 97, 79, 0.55); }
.yl-chron-foot { display: flex; gap: 8px; }
/* Drag-panning must not select the map's labels (smoke test 3). */
.yl-map-host { user-select: none; -webkit-user-select: none; }

/* ========================================================== TITLE SCREEN */
/* Shown at every boot, above the board (z 70) and every in-game overlay.
   The chronicles shelf must open ON TOP of it (the menu's third button), so
   the shelf alone among the side panels sits above 70. Art is painted by
   js/ui.js (artUrl) so the release cache-buster applies. */

.yl-chronpanel { z-index: 72; }

.yl-titlescreen {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  background: var(--ground);
  animation: yl-title-in 900ms ease-out;
}
.yl-titlescreen[hidden] { display: none; }

@keyframes yl-title-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.yl-title-art {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 42%;
  background-repeat: no-repeat;
}

.yl-title-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 46%, rgba(10,14,19,0) 30%, rgba(10,14,19,0.42) 100%),
    linear-gradient(180deg, rgba(10,14,19,0.42) 0%, rgba(10,14,19,0.10) 34%, rgba(10,14,19,0.62) 82%, rgba(10,14,19,0.80) 100%);
}

.yl-title-inner {
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  transform: translateY(-3%);
  text-align: center;
}

.yl-title-glyph { width: 74px; height: 62px; margin-bottom: 4px; }

.yl-title-word {
  margin: 0;
  font-family: var(--serif);
  font-weight: normal;
  font-size: 62px;
  letter-spacing: 0.16em;
  color: var(--ink);
  text-shadow: 0 2px 34px rgba(0,0,0,0.85), 0 0 90px rgba(255,179,71,0.14);
}

.yl-title-sub {
  margin-top: 6px;
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; letter-spacing: 0.10em;
  color: var(--ink-soft);
  text-shadow: 0 1px 18px rgba(0,0,0,0.9);
}

.yl-title-menu {
  margin-top: 46px;
  display: flex; flex-direction: column; gap: 10px;
  min-width: 300px;
}

.yl-title-btn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 11px 26px;
  background: rgba(13, 18, 26, 0.74);
  border: 1px solid var(--line-strong);
  font-family: var(--serif);
  font-size: 15px; letter-spacing: 0.07em;
  color: var(--ink);
  transition: border-color 160ms, background 160ms, box-shadow 160ms;
}
.yl-title-btn:hover, .yl-title-btn:focus-visible {
  border-color: rgba(255, 179, 71, 0.55);
  background: rgba(18, 24, 33, 0.85);
  box-shadow: 0 0 26px rgba(255, 179, 71, 0.10);
  outline: none;
}
.yl-title-btn[hidden] { display: none; }
.yl-title-btn-label { pointer-events: none; }
.yl-title-btn-sub {
  pointer-events: none;
  font-family: var(--sans);
  font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--ink-mute);
}
.yl-title-btn-quiet { font-size: 13px; padding: 8px 26px; color: var(--ink-soft); }

/* ============================================================== PROLOGUE */
/* Full-bleed art, prose in a band at the foot. One layer, pages swap in it;
   the art and panel re-run their entrance each page. */

.yl-prologue {
  position: fixed; inset: 0; z-index: 70;
  background: #05080c;
}
.yl-prologue[hidden] { display: none; }

.yl-prologue-art {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 34%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 850ms ease;
}
.yl-prologue-art.yl-show { opacity: 1; }

.yl-prologue-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(5,8,12,0.30) 0%,
    rgba(5,8,12,0.02) 26%,
    rgba(5,8,12,0.10) 48%,
    rgba(5,8,12,0.82) 76%,
    rgba(5,8,12,0.95) 100%);
}

.yl-prologue-panel {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 34px;
  width: 660px;
  animation: yl-card-in 480ms ease-out;
}
.yl-prologue-panel.yl-page-in { animation: yl-card-in 480ms ease-out; }

.yl-prologue-nav {
  display: flex; align-items: center; gap: 14px;
  margin-top: 18px;
}
.yl-prologue-dots { flex: 1; display: flex; gap: 7px; align-items: center; }
.yl-prologue-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-faint);
  opacity: 0.5;
}
.yl-prologue-dot.yl-lit { background: var(--amber-soft); opacity: 1; }

.yl-prologue .yl-continue { margin-top: 0; }