:root {
  color-scheme: dark;
  --ink: #f5ead7;
  --muted: #bda98d;
  --soft: rgba(255, 244, 222, 0.08);
  --line: rgba(255, 244, 222, 0.16);
  --panel: rgba(22, 18, 15, 0.86);
  --panel-strong: rgba(42, 31, 22, 0.9);
  --gold: #d6a84f;
  --green: #7ea66a;
  --red: #b95a46;
  --sky: #8da7ad;
  --purple: #a08bc7;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 0%, rgba(214, 168, 79, 0.2), transparent 34rem),
    linear-gradient(145deg, rgba(19, 20, 18, 0.78), rgba(12, 9, 7, 0.96)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cpath d='M0 130 C40 90 70 150 120 96 C145 72 162 82 180 70 L180 180 L0 180 Z' fill='%23231610'/%3E%3Cpath d='M0 128 C40 88 70 148 120 94 C145 70 162 80 180 68' fill='none' stroke='%23433323' stroke-width='2'/%3E%3C/svg%3E");
  background-size: cover, cover, 420px;
}

button, select { font: inherit; }
button { cursor: pointer; }

.shell {
  width: min(1440px, calc(100% - 32px));
  margin: 0 auto;
  padding: 32px 0 56px;
}

.hero, .crisis, .metrics, .layout, .event-modal {
  display: grid;
  gap: 16px;
}

.hero {
  grid-template-columns: 1fr auto;
  align-items: start;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(39, 26, 17, 0.86), rgba(12, 11, 10, 0.82));
  box-shadow: 0 22px 80px rgba(0, 0, 0, 0.42);
  display: grid;
  gap: 16px;
}
.hero > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.hero-actions { display: flex; align-items: center; gap: 12px; }

h1, h2, p { margin: 0; }

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 9vw, 7rem);
  letter-spacing: -0.08em;
  line-height: 0.84;
}

h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.5rem;
  letter-spacing: -0.03em;
}

.subtitle {
  color: var(--muted);
  margin-top: 12px;
  font-size: 1.15rem;
}

.eyebrow {
  color: var(--gold);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 800;
}

.reset, .action {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--soft);
  padding: 11px 15px;
}

.reset:hover, .action:hover:not(:disabled) {
  border-color: rgba(214, 168, 79, 0.64);
  background: rgba(214, 168, 79, 0.16);
}

.crisis {
  grid-template-columns: 1fr 220px;
  align-items: stretch;
  margin-top: 16px;
}

.crisis > div, .crisis aside, .panel, .metric, .verdict {
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--panel);
  backdrop-filter: blur(18px);
}

.crisis > div, .crisis aside { padding: 22px; }

.crisis p:last-child {
  color: var(--muted);
  margin-top: 10px;
  max-width: 78ch;
}

.crisis aside {
  display: grid;
  align-content: center;
  gap: 4px;
}

.crisis aside span, .metric span, label, small, .hint, li {
  color: var(--muted);
}

.crisis aside strong { font-size: 2rem; }

.metrics {
  grid-template-columns: repeat(7, 1fr);
  margin-top: 16px;
}

.metric { padding: 18px; }
.metric strong {
  display: block;
  margin-top: 4px;
  font-size: 1.45rem;
}

.verdict {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  padding: 16px 20px;
  background: rgba(57, 39, 23, 0.76);
}

.verdict--over { border-color: rgba(185, 90, 70, 0.65); }
.verdict--good { border-color: rgba(126, 166, 106, 0.7); background: rgba(46, 60, 32, 0.78); }

.layout {
  grid-template-columns: minmax(0, 1fr) 340px;
  align-items: start;
}

.layout--lower {
  grid-template-columns: repeat(3, 1fr);
  margin-top: 16px;
}

.panel { padding: 20px; }

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  margin-bottom: 16px;
}

select {
  min-width: 160px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  background: #1c1510;
  padding: 10px 12px;
}

.horse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.card {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 244, 222, 0.08), rgba(255, 244, 222, 0.03));
  color: var(--ink);
  padding: 16px;
}

.card--selected { outline: 2px solid var(--gold); }
.card strong {
  display: block;
  margin: 5px 0 3px;
  font-size: 1.2rem;
}
.card p {
  margin: 10px 0;
  min-height: 54px;
  color: var(--muted);
}

.horse-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 10px 0;
}

.horse-stats div {
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.2);
  padding: 8px;
}

.horse-stats dt { color: var(--muted); font-size: 0.68rem; }
.horse-stats dd { margin: 2px 0 0; font-weight: 800; }

.life-stage {
  display: inline-block;
  margin: 8px 0;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 800;
  background: rgba(255, 244, 222, 0.08);
  border: 1px solid var(--line);
}

.life-stage--foal { color: #d4b56a; border-color: rgba(212, 181, 106, 0.5); }
.life-stage--weanling { color: #c9a05a; border-color: rgba(201, 160, 90, 0.5); }
.life-stage--yearling { color: #b48a4a; border-color: rgba(180, 138, 74, 0.5); }
.life-stage--two_year_old { color: #a37340; border-color: rgba(163, 115, 64, 0.5); }
.life-stage--campaigner { color: #7ea66a; border-color: rgba(126, 166, 106, 0.6); }
.life-stage--retiree { color: #bda98d; border-color: rgba(189, 169, 141, 0.5); }
.life-stage--dead { color: var(--red); border-color: rgba(185, 90, 70, 0.5); }

.bar {
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  margin-top: 8px;
  overflow: hidden;
}

.bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sky);
}

.bar--gold span { background: var(--gold); }
.bar--green span { background: var(--green); }

.value {
  display: inline-block;
  margin-top: 12px;
  color: var(--gold);
  font-weight: 800;
}

.lineage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.lineage-block {
  display: grid;
  align-content: start;
  gap: 6px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.18);
}

.lineage-block--self { border: 1px solid var(--gold); }

.lineage-link {
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  background: var(--soft);
  padding: 6px 10px;
  font-size: 0.78rem;
  text-align: left;
}

.lineage-link:hover { border-color: var(--gold); }

.event-modal {
  border: 1px solid var(--gold);
  background: rgba(36, 24, 14, 0.96);
  border-radius: 22px;
  padding: 24px;
  margin: 16px 0;
}

.event-modal h2 { color: var(--gold); }
.event-modal p { margin: 8px 0 16px; color: var(--ink); }

.event-modal--ending {
  border-color: var(--red);
  background: rgba(48, 18, 12, 0.94);
}

.event-modal--ending h2 { color: var(--red); }

.control-panel label {
  display: grid;
  gap: 8px;
  margin: 16px 0;
}

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

.action { width: 100%; border-radius: 15px; text-align: left; }
.action:disabled { opacity: 0.45; cursor: not-allowed; }
.action--danger { border-color: rgba(185, 90, 70, 0.5); }

.hint { margin-top: 14px; font-size: 0.92rem; }

.breed-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 12px 0;
}

.breed-grid label { margin: 0; }

ul, ol { padding-left: 20px; }
li + li { margin-top: 8px; }
li button { margin-left: 8px; font-size: 0.78rem; padding: 4px 10px; }

.upgrades li { display: grid; gap: 4px; padding: 12px; border-radius: 14px; background: rgba(0, 0, 0, 0.18); }
.upgrades li strong { font-size: 1.05rem; }
.upgrades li small { color: var(--gold); }
.upgrades li p { font-size: 0.86rem; color: var(--muted); margin: 4px 0 8px; }

.log-panel ol {
  max-height: 280px;
  overflow: auto;
}

.tutorial {
  background: linear-gradient(140deg, rgba(48, 32, 18, 0.55), rgba(20, 14, 8, 0.75));
  border: 1px solid var(--gold);
  border-radius: 18px;
  padding: 18px 22px;
  margin: 18px 0 12px;
  display: grid;
  gap: 8px;
  box-shadow: 0 0 0 1px rgba(201, 162, 90, 0.18) inset, 0 12px 32px -22px rgba(0, 0, 0, 0.7);
}
.tutorial h2 { margin: 0; font-size: 1.4rem; }
.tutorial p { margin: 0; }
.tutorial-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.tutorial-skip {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.tutorial-skip:hover { background: rgba(201, 162, 90, 0.12); }
.tutorial-skip:active { transform: scale(0.96); }

/* Path 1 Phase F — micro-animations and feedback */

@keyframes pulse-gold {
  0%   { box-shadow: 0 0 0 0 rgba(201, 162, 90, 0.55); }
  60%  { box-shadow: 0 0 0 14px rgba(201, 162, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(201, 162, 90, 0); }
}
@keyframes flash-up {
  0%   { background: rgba(126, 168, 96, 0.32); }
  100% { background: transparent; }
}
@keyframes flash-down {
  0%   { background: rgba(185, 90, 70, 0.32); }
  100% { background: transparent; }
}
@keyframes flash-gold {
  0%   { background: rgba(201, 162, 90, 0.34); }
  100% { background: transparent; }
}
@keyframes slide-in-top {
  0%   { opacity: 0; transform: translateY(-12px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes slide-in-bottom {
  0%   { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes log-slide {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* Button press feedback — works in all browsers */
button { transition: transform 80ms ease-out, background 120ms ease-out, color 120ms ease-out; }
button:active:not(:disabled) { transform: scale(0.97); filter: brightness(0.92); }

/* Action buttons pulse briefly when their click has been registered */
.action.is-firing {
  animation: pulse-gold 360ms ease-out;
}

/* Metric value flashes */
.metric.is-up   strong { animation: flash-up   420ms ease-out; border-radius: 8px; padding: 2px 6px; }
.metric.is-down strong { animation: flash-down 420ms ease-out; border-radius: 8px; padding: 2px 6px; }
.metric.is-tick strong { animation: flash-gold 360ms ease-out; border-radius: 8px; padding: 2px 6px; }

/* New horse card slides in from the top */
.horse-card.is-new {
  animation: slide-in-top 380ms ease-out;
}

/* Newly added log entry */
.log-panel li.is-new {
  animation: log-slide 280ms ease-out;
  background: rgba(201, 162, 90, 0.10);
  border-radius: 6px;
}

/* Tutorial step — done state */
.tutorial-step--done .tutorial-step-num { animation: pop 360ms ease-out; }

/* Verdict on game-over rises up */
.verdict.is-ending {
  animation: slide-in-bottom 440ms ease-out;
  border: 1px solid var(--gold);
}

/* Action danger variants get a subtle warm flash on hover */
.action--danger:hover { border-color: var(--gold); }

/* Audio toggle button in the hero */
.audio-toggle {
  background: transparent;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.audio-toggle:hover { background: rgba(201, 162, 90, 0.12); }
.audio-toggle.is-muted { color: var(--muted); border-color: var(--muted); }

/* Respect prefers-reduced-motion */
/* Path 1 Phase G — share / import / export UI */

.share-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  margin: 14px 0 6px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(201, 162, 90, 0.22), rgba(20, 14, 8, 0.75));
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(201, 162, 90, 0.18) inset;
}
.share-banner p { margin: 0; }
.share-banner strong { display: block; font-size: 1.1rem; color: var(--gold); margin-top: 2px; }
.share-banner small { color: var(--muted); font-size: 0.84rem; }
.share-banner-actions { display: flex; gap: 8px; flex-shrink: 0; }
.share-banner-actions .action { width: auto; padding: 8px 14px; }

.share-card {
  margin: 18px 0 6px;
  padding: 22px 24px;
  border-radius: 22px;
  background: linear-gradient(140deg, rgba(48, 32, 18, 0.62), rgba(15, 12, 10, 0.88));
  border: 1px solid var(--gold);
  box-shadow: 0 0 0 1px rgba(201, 162, 90, 0.18) inset, 0 16px 36px -22px rgba(0, 0, 0, 0.7);
}
.share-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.share-card-head small { color: var(--muted); font-size: 0.84rem; }
.share-card-body h3 { margin: 0 0 4px; font-size: 2.1rem; color: var(--gold); letter-spacing: 0.02em; }
.share-card-meta { margin: 0 0 14px; color: var(--muted); font-size: 0.94rem; }
.share-card-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.share-card-stats > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(201, 162, 90, 0.18);
}
.share-card-stats span { font-size: 0.74rem; color: var(--muted); letter-spacing: 0.06em; text-transform: uppercase; }
.share-card-stats strong { font-size: 1.1rem; }
.share-card-section-label { margin: 12px 0 6px; font-size: 0.78rem; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; }
.share-card-horses, .share-card-log { margin: 0; padding-left: 18px; }
.share-card-horses li, .share-card-log li { font-size: 0.94rem; }

@media (max-width: 720px) {
  .share-card-stats { grid-template-columns: repeat(2, 1fr); }
  .share-banner { flex-direction: column; align-items: flex-start; }
  .share-banner-actions { width: 100%; }
  .share-banner-actions .action { flex: 1; }
}

/* Path 1 Phase H — visual polish */

h1.wordmark { font-family: 'Rye', 'IM Fell English', Georgia, serif; }
h1.wordmark .wordmark-amp { font-style: italic; color: var(--gold); padding: 0 0.1em; }

.horse-card .horse-silhouette {
  display: block;
  width: 100%;
  height: 40px;
  margin: 6px 0 4px;
  background-color: var(--gold);
  -webkit-mask: var(--silhouette, none) center / contain no-repeat;
          mask: var(--silhouette, none) center / contain no-repeat;
  opacity: 0.42;
}
.horse-card .bloodline-ribbon {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.horse-card .bloodline-ribbon--hot { background: rgba(220, 110, 60, 0.22); color: #f1b88f; border: 1px solid rgba(220, 110, 60, 0.5); }
.horse-card .bloodline-ribbon--warm { background: rgba(201, 162, 90, 0.22); color: var(--gold); border: 1px solid rgba(201, 162, 90, 0.5); }
.horse-card .bloodline-ribbon--cool { background: rgba(86, 130, 160, 0.22); color: #a8c5d8; border: 1px solid rgba(86, 130, 160, 0.5); }

/* Ending screen visual lift */
@keyframes ending-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(201, 162, 90, 0.6), 0 0 32px -8px rgba(201, 162, 90, 0.4); }
  50%      { box-shadow: 0 0 0 2px rgba(201, 162, 90, 0.9), 0 0 64px -8px rgba(201, 162, 90, 0.6); }
}
.event-modal--ending {
  border: 1px solid var(--gold);
  animation: ending-pulse 4s ease-in-out infinite, slide-in-bottom 600ms ease-out;
  text-align: left;
  background: linear-gradient(160deg, rgba(48, 32, 18, 0.92), rgba(15, 12, 10, 0.96));
  padding: 32px 36px;
}
.event-modal--ending .ending-title {
  margin: 4px 0 12px;
  font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--gold);
}
.event-modal--ending p { font-size: 1.05rem; line-height: 1.5; margin: 8px 0; }
.event-modal--ending .ending-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 20px 0 16px;
}
.event-modal--ending .ending-stats > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid rgba(201, 162, 90, 0.24);
}
.event-modal--ending .ending-stats span { font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.event-modal--ending .ending-stats strong { font-size: 1.4rem; color: var(--gold); }
.event-modal--ending .ending-horses-label { margin: 14px 0 6px; font-size: 0.78rem; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; }
.event-modal--ending .ending-horses { margin: 0; padding-left: 18px; }
.event-modal--ending .ending-horses li { font-size: 0.96rem; }
.event-modal--ending .ending-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.event-modal--ending .ending-actions .action { width: auto; padding: 12px 18px; }

@media (max-width: 720px) {
  .event-modal--ending { padding: 22px; }
  .event-modal--ending .ending-stats { grid-template-columns: repeat(2, 1fr); }
  .event-modal--ending .ending-actions { flex-direction: column; }
  .event-modal--ending .ending-actions .action { width: 100%; }
}

/* Horse portrait (real art — pixel or painterly) */
.horse-portrait {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center;
  border-radius: 10px 10px 0 0;
  margin: -12px -12px 10px -12px;
  opacity: 0;
  animation: portrait-fade-in 500ms ease-out forwards;
}

/* Pixel art: hard edges, no smoothing. PixelLab delivers at 64x64 so we
   scale up to fill the card without interpolating. */
.horse-portrait--pixel {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Size variants for non-card contexts (lineage thumbnails, breeding panel,
   auction card, ending roll call). Override the default 100%-width-of-card. */
.horse-portrait--sm,
.horse-silhouette--sm {
  width: 48px;
  height: 48px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
.horse-portrait--md,
.horse-silhouette--md {
  width: 80px;
  height: 80px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
.horse-portrait--lg,
.horse-silhouette--lg {
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
.horse-portrait--xl,
.horse-silhouette--xl {
  width: 180px;
  height: 180px;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
/* The non-card sizes undo the card-only negative margins and radius. */
.horse-portrait--sm,
.horse-portrait--md,
.horse-portrait--lg,
.horse-portrait--xl {
  margin: 0;
  border-radius: 8px;
  animation: none;
  opacity: 1;
}

/* Lineage panel: row layouts pairing a portrait with text/link. */
.lineage-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px 0;
}
.lineage-row--link {
  cursor: pointer;
}
.lineage-row--link:hover .lineage-link {
  color: var(--gold);
}

/* Verdict (show result): portrait beside the result text. */
.verdict {
  display: flex;
  align-items: center;
  gap: 12px;
}
.verdict-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Ending screen: larger portrait, body beside. */
.ending-horse {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0;
}
.ending-horse-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Breeding panel: side-by-side parents with × between. */
.breed-pending {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0;
}
.breed-x {
  font-size: 1.4rem;
  color: var(--gold);
  font-weight: 600;
  padding: 0 4px;
}
.breed-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 10px;
  margin: 10px 0;
}

/* Auction preview: portrait + horse stats. */
.auction-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 10px 0 14px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 10px;
  border: 1px solid rgba(201, 162, 90, 0.18);
}
.auction-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

@keyframes portrait-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mood tints. Calm = warm earth, intense = cool desaturated, proud = golden.
   Applied via inline background-color on .horse-portrait (see portraits.js).
   The values are subtle so they tint the rim of the frame, not the horse. */
.horse-portrait { transition: background-color 400ms ease; }
.horse-portrait[data-mood="intense"] { box-shadow: inset 0 -8px 14px -8px rgba(40, 60, 90, 0.35); }
.horse-portrait[data-mood="proud"]   { box-shadow: inset 0 -8px 14px -8px rgba(190, 140, 50, 0.35); }
.horse-portrait[data-mood="calm"]    { box-shadow: inset 0 -8px 14px -8px rgba(110, 80, 50, 0.25); }

/* Subtle pulse on intense horses — they're under pressure. */
@keyframes intense-pulse {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.06); }
}
.horse-portrait[data-mood="intense"]:not(:hover) {
  animation: intense-pulse 2400ms ease-in-out infinite;
}

/* When no portrait yet, silhouette shows through */
.horse-card:has(.horse-silhouette) .horse-silhouette {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--silhouette) center / contain no-repeat;
  opacity: 0.18;
  margin: -12px -12px 10px -12px;
  border-radius: 10px 10px 0 0;
  pointer-events: none;
}

/* Hide silhouette when portrait is present */
.horse-card:has(.horse-portrait) .horse-silhouette {
  display: none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .horse-portrait { animation: none; opacity: 1; }
}
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}
.tutorial-track {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.tutorial-track li { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); }
.tutorial-step-num {
  width: 24px; height: 24px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 162, 90, 0.4);
  font-size: 0.78rem;
  font-weight: 600;
}
.tutorial-step--done { color: var(--green); }
.tutorial-step--done .tutorial-step-num { background: rgba(126, 168, 96, 0.2); border-color: var(--green); }
.tutorial-step--current { color: var(--gold); font-weight: 600; }
.tutorial-step--current .tutorial-step-num { background: rgba(201, 162, 90, 0.22); border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 90, 0.18); }

@media (max-width: 1100px) {
  .metrics { grid-template-columns: repeat(4, 1fr); }
  .layout, .layout--lower { grid-template-columns: 1fr; }
  .lineage { grid-template-columns: 1fr 1fr; }
  .hero-actions { flex-wrap: wrap; }
}

@media (max-width: 720px) {
  .metrics, .layout, .layout--lower, .crisis, .hero { grid-template-columns: 1fr; }
  .breed-grid { grid-template-columns: 1fr; }
  h1.wordmark { font-size: clamp(2.6rem, 14vw, 4.4rem); }
  .hero-actions { gap: 6px; }
  .hero-actions .reset, .hero-actions .audio-toggle { padding: 6px 10px; font-size: 0.74rem; }
  .horse-grid { grid-template-columns: 1fr; }
  .tutorial-track { grid-template-columns: 1fr; gap: 4px; }
  .action { min-height: 48px; padding: 12px 14px; }
  .lineage { grid-template-columns: 1fr; }
}

/* ---------- Seasonal atmosphere ----------
   Subtle radial washes behind the dashboard. Each season has its own
   color temperature so the soundtrack swap is reinforced visually. The
   wash sits above the page background but below all cards, achieved via
   a fixed positioned pseudo-element with negative z-index. */
body.season-spring,
body.season-summer,
body.season-autumn,
body.season-winter {
  position: relative;
}
body.season-spring::before,
body.season-summer::before,
body.season-autumn::before,
body.season-winter::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  transition: background 1500ms ease;
}
body.season-spring::before {
  background: radial-gradient(ellipse at top, rgba(190, 215, 170, 0.16), transparent 65%),
              radial-gradient(ellipse at bottom right, rgba(220, 200, 140, 0.10), transparent 70%);
}
body.season-summer::before {
  background: radial-gradient(ellipse at top, rgba(245, 200, 100, 0.18), transparent 65%),
              radial-gradient(ellipse at bottom, rgba(200, 130, 70, 0.08), transparent 70%);
}
body.season-autumn::before {
  background: radial-gradient(ellipse at top, rgba(200, 110, 50, 0.18), transparent 65%),
              radial-gradient(ellipse at bottom right, rgba(150, 70, 40, 0.12), transparent 70%);
}
body.season-winter::before {
  background: radial-gradient(ellipse at top, rgba(140, 170, 200, 0.18), transparent 65%),
              radial-gradient(ellipse at bottom, rgba(180, 200, 220, 0.10), transparent 70%);
}

/* ---------- Modal ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 10, 14, 0.78);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 24px;
  animation: modal-fade-in 200ms ease-out;
  backdrop-filter: blur(2px);
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-panel {
  background: var(--panel, #1a1c20);
  background: linear-gradient(180deg, #1f2227 0%, #16181c 100%);
  color: var(--paper, #ece4d2);
  border: 1px solid rgba(201, 162, 90, 0.25);
  border-radius: 14px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.2);
  max-width: 720px;
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  padding: 32px 36px;
  position: relative;
  animation: modal-rise 240ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes modal-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--paper, #ece4d2);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  transition: background 150ms ease, border-color 150ms ease;
}
.modal-close:hover,
.modal-close:focus {
  background: rgba(201, 162, 90, 0.12);
  border-color: rgba(201, 162, 90, 0.35);
  outline: none;
}
.modal-title {
  font-family: 'Rye', serif;
  font-size: 1.5rem;
  color: var(--gold, #c9a25a);
  margin: 0 0 16px;
  padding-right: 40px;
}

/* ---------- Horse detail modal content ---------- */
.horse-detail {
  display: grid;
  gap: 22px;
}
.detail-portrait-block {
  text-align: center;
  border-bottom: 1px solid rgba(201, 162, 90, 0.18);
  padding-bottom: 18px;
}
.detail-portrait {
  margin: 0 auto 14px;
  width: 200px !important;
  height: 200px !important;
  display: block;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.04);
}
.detail-name {
  font-family: 'Rye', serif;
  font-size: 1.7rem;
  color: var(--gold, #c9a25a);
  margin: 6px 0 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.detail-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border: 1px solid rgba(201, 162, 90, 0.4);
  background: rgba(201, 162, 90, 0.12);
  color: var(--gold, #c9a25a);
}
.detail-badge--injured {
  border-color: rgba(220, 80, 80, 0.5);
  background: rgba(220, 80, 80, 0.12);
  color: #ff8888;
}
.detail-badge--mood[data-mood="intense"] {
  border-color: rgba(40, 60, 90, 0.6);
  background: rgba(40, 60, 90, 0.25);
  color: #a8c4e0;
}
.detail-badge--mood[data-mood="proud"] {
  border-color: rgba(190, 140, 50, 0.6);
  background: rgba(190, 140, 50, 0.2);
  color: #f0c878;
}
.detail-badge--mood[data-mood="calm"] {
  border-color: rgba(110, 80, 50, 0.5);
  background: rgba(110, 80, 50, 0.15);
  color: #d4b88a;
}
.detail-role { font-weight: 600; color: var(--paper, #ece4d2); margin: 4px 0; }
.detail-bloodline { font-size: 0.85rem; color: #b0a890; margin: 0 0 4px; font-style: italic; }
.detail-meta { font-size: 0.8rem; color: #888; margin: 0; }

.detail-section h3.eyebrow {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold, #c9a25a);
  margin: 0 0 10px;
  font-weight: 600;
}
.detail-section {
  border-top: 1px solid rgba(201, 162, 90, 0.10);
  padding-top: 14px;
}
.detail-section:first-of-type { border-top: none; padding-top: 0; }
.detail-stats, .detail-traits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  margin: 0 0 8px;
}
.detail-stat, .detail-trait {
  display: grid;
  grid-template-columns: 80px 1fr 32px;
  gap: 8px;
  align-items: center;
}
.detail-stat-label, .detail-trait-label {
  font-size: 0.78rem;
  color: #b0a890;
}
.detail-stat-value, .detail-trait-value {
  font-weight: 600;
  font-size: 0.85rem;
  text-align: right;
  color: var(--paper, #ece4d2);
  font-variant-numeric: tabular-nums;
}
.trait-bar {
  position: relative;
  height: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(201, 162, 90, 0.15);
  border-radius: 5px;
  overflow: hidden;
}
.trait-bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  transition: width 400ms ease;
}
.trait-bar--gold .trait-bar-fill { background: linear-gradient(90deg, #b8862e, #e0b865); }
.trait-bar--green .trait-bar-fill { background: linear-gradient(90deg, #4a8060, #6ab088); }
.trait-bar--blue .trait-bar-fill { background: linear-gradient(90deg, #2a5a8a, #4a90c8); }
.trait-bar--red .trait-bar-fill { background: linear-gradient(90deg, #8a3a3a, #c8605a); }
.trait-bar-text {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--paper, #ece4d2);
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}
.detail-value { color: var(--gold, #c9a25a); font-weight: 600; margin: 4px 0 0; }
.detail-temperament { font-style: italic; color: #c4b89a; margin: 0; }

.detail-lineage { display: grid; gap: 10px; }
.detail-lineage-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.detail-lineage-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(201, 162, 90, 0.12);
  border-radius: 8px;
  min-width: 96px;
}
.detail-lineage-cell .eyebrow { margin: 0; }
.detail-lineage-cell small { font-size: 0.72rem; color: #888; }
.detail-lineage-cell--wide { width: 100%; }
.detail-lineage-cell--wide .detail-offspring {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-wrap: wrap; gap: 6px 12px;
}
.detail-lineage-cell--wide .detail-offspring li {
  display: flex; align-items: center; gap: 4px;
}

.detail-chronicle {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 200px;
  overflow-y: auto;
}
.detail-chronicle li {
  font-size: 0.84rem;
  color: #c4b89a;
  padding: 6px 0;
  border-bottom: 1px solid rgba(201, 162, 90, 0.08);
  line-height: 1.4;
}
.detail-chronicle li:last-child { border-bottom: none; }
.detail-chronicle li::before {
  content: '·';
  color: var(--gold, #c9a25a);
  font-weight: bold;
  margin-right: 8px;
}

.hint { color: #888; font-size: 0.85rem; font-style: italic; margin: 0; }

@media (max-width: 600px) {
  .modal-panel { padding: 20px; }
  .detail-portrait { width: 160px !important; height: 160px !important; }
  .detail-stats, .detail-traits { grid-template-columns: 1fr; }
}

/* ---------- Memorials ---------- */
.memorial-banner-section { margin: 14px 0 0; }
.memorial {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(20, 18, 14, 0.7) 0%, rgba(14, 12, 10, 0.85) 100%);
  border: 1px solid rgba(201, 162, 90, 0.20);
  border-left: 3px solid var(--gold, #c9a25a);
  border-radius: 8px;
  color: var(--paper, #ece4d2);
}
.memorial--banner { padding: 12px 14px; gap: 12px; }
.memorial--hall {
  flex-direction: column;
  align-items: stretch;
  padding: 16px 18px;
}
.memorial-portrait {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.memorial-silhouette {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  background: linear-gradient(135deg, rgba(60, 50, 35, 0.6), rgba(40, 35, 25, 0.6));
  border: 1px solid rgba(201, 162, 90, 0.3);
  position: relative;
  overflow: hidden;
}
.memorial-silhouette::after {
  content: '✝';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(201, 162, 90, 0.35);
  font-size: 1.6rem;
  font-weight: 300;
}
.memorial-body { flex: 1; min-width: 0; }
.memorial-kind {
  font-family: 'Inter', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(201, 162, 90, 0.7);
  margin: 0 0 4px;
  font-weight: 600;
}
.memorial-name {
  font-family: 'Rye', serif;
  font-size: 1.15rem;
  color: var(--gold, #c9a25a);
  margin: 0 0 2px;
  line-height: 1.2;
}
.memorial-meta {
  font-size: 0.78rem;
  color: #b0a890;
  margin: 0 0 8px;
  font-style: italic;
}
.memorial-circumstance {
  font-size: 0.85rem;
  color: #d4ccb0;
  margin: 0 0 6px;
  line-height: 1.4;
}
.memorial-epitaph {
  font-size: 0.92rem;
  color: #c4b89a;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}
.memorial-moments {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  border-top: 1px solid rgba(201, 162, 90, 0.12);
  padding-top: 10px;
}
.memorial-moments li {
  font-size: 0.8rem;
  color: #c4b89a;
  padding: 3px 0;
  line-height: 1.4;
}
.memorial-moments li::before {
  content: '·';
  color: var(--gold, #c9a25a);
  font-weight: bold;
  margin-right: 8px;
}
.memorial-hall {
  margin: 22px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(201, 162, 90, 0.18);
}
.memorial-hall h2.eyebrow {
  font-family: 'Rye', serif;
  font-size: 1.3rem;
  color: var(--gold, #c9a25a);
  margin: 0 0 4px;
  letter-spacing: 0.02em;
}
.memorial-hall .hint { margin: 0 0 14px; }
.memorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

/* ============================================================== */
/*  GROUP B — VISUAL CHROME                                        */
/*  Slab serif (Rye) for titles. Cormorant Garamond for time-     */
/*  jump cards. Paper grain on panels. Sepia mode unlock. Cold-   */
/*  blue winter desaturation. Warm autumn grain. Leather-stitch     */
/*  buttons. Boot-on-fence-post cemetery. Telegram death notice.   */
/* ============================================================== */

/* --- h1 wordmark: now slab serif (Rye) ---------------------------- */
h1, h2, .modal-title, .codex-collection-head h2 {
  font-family: 'Rye', 'IM Fell English', Georgia, serif;
}

/* --- Hero with brand glyph block --------------------------------- */
.hero-brand-block {
  display: flex;
  align-items: center;
  gap: 18px;
}
.hero-brand-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(160deg, rgba(214, 168, 79, 0.06), rgba(0,0,0,0.3));
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 244, 222, 0.04);
}
.hero-brand-glyph {
  font-family: 'Rye', 'IM Fell English', Georgia, serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--gold);
  letter-spacing: 0;
  font-weight: 400;
}
.hero-brand-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero h1.wordmark {
  font-family: 'Rye', 'IM Fell English', Georgia, serif;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: -0.04em;
  line-height: 0.92;
  color: var(--ink);
  margin: 0;
}
.hero-brand-text .subtitle { margin-top: 0; }

/* --- Ranch brand glyph styling (rendered anywhere) --------------- */
.ranch-brand {
  display: inline-block;
  font-family: 'Rye', 'IM Fell English', Georgia, serif;
  letter-spacing: 0;
  line-height: 1;
}
.letterhead {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(214, 168, 79, 0.05), rgba(0,0,0,0.25));
  margin: 0 0 14px;
}
.letterhead-brand {
  font-family: 'Rye', serif;
  font-size: 2rem;
  color: var(--gold);
  line-height: 1;
}
.letterhead-text { display: flex; flex-direction: column; gap: 2px; }
.letterhead-name {
  font-family: 'Rye', serif;
  margin: 0;
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.letterhead-owner, .letterhead-meta { margin: 0; color: var(--muted); font-size: 0.82rem; }

/* --- Ranch profile modal form ------------------------------------ */
.ranch-profile { display: flex; flex-direction: column; gap: 16px; }
.ranch-profile-field { display: flex; flex-direction: column; gap: 6px; border: none; padding: 0; margin: 0; }
.ranch-profile-field legend { padding: 0; }
.ranch-profile-field input[type="text"] {
  background: #1c1510;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-family: 'Rye', serif;
  font-size: 1rem;
  letter-spacing: 0.01em;
}
.brand-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 8px;
  margin-top: 4px;
}
.brand-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 6px;
  background: rgba(255, 244, 222, 0.04);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s ease;
  color: var(--ink);
}
.brand-option:hover { border-color: rgba(214, 168, 79, 0.4); background: rgba(214, 168, 79, 0.08); }
.brand-option--selected {
  border-color: var(--gold);
  background: rgba(214, 168, 79, 0.18);
  box-shadow: 0 0 0 1px var(--gold) inset;
}
.brand-option-glyph {
  font-family: 'Rye', serif;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
}
.brand-option small { color: var(--muted); font-size: 0.7rem; }
.brand-hint { margin: 4px 0 0; font-size: 0.82rem; }
.ranch-profile-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}
.action--primary {
  background: rgba(214, 168, 79, 0.22);
  border-color: var(--gold);
  color: var(--gold);
  font-weight: 700;
}

/* --- Codex modal -------------------------------------------------- */
.codex { display: flex; flex-direction: column; gap: 18px; }
.codex-collection {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px;
  background: rgba(22, 18, 15, 0.5);
}
.codex-collection-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.codex-collection-head p.eyebrow { margin: 0; }
.codex-collection-head small { margin: 0; }
.codex-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.codex-entry {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255, 244, 222, 0.03);
  border-left: 2px solid rgba(214, 168, 79, 0.4);
}
.codex-entry--locked {
  opacity: 0.45;
  border-left-color: rgba(189, 169, 141, 0.2);
}
.codex-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.45;
}
.codex-text--locked {
  font-style: normal;
  letter-spacing: 0.2em;
  font-family: 'Rye', serif;
}

/* --- Legendary block in horse detail ----------------------------- */
.detail-section--legendary {
  border-top: 1px solid rgba(214, 168, 79, 0.4);
  padding-top: 16px;
  margin-top: 16px;
}
.legendary-coat {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--ink);
  margin: 0 0 8px;
}
.legendary-backstory {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0 0 12px;
}
.legendary-status {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.88rem;
  color: var(--muted);
}

/* --- Time-jump card (1883 / 1923 device) ------------------------- */
.time-jump {
  position: fixed;
  inset: 0;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.8s ease-out;
  pointer-events: none;
}

/* --- Sheridan intro (Phase 10) ------------------------------------
   The dispersal. Four lines, first-person, voiced. Plays once on
   first render. The bowed-cello memorial tone plays at low volume.
   Sits over the dashboard at the title card, not full-screen. */
.sheridan-intro {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.55) 100%);
  animation: sheridan-intro-fade 4s ease-in-out forwards;
}
@keyframes sheridan-intro-fade {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { opacity: 0; }
}
.sheridan-intro-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.6;
  color: #f5ead7;
  margin: 0.15em 0;
  text-align: center;
  text-shadow: 0 0 14px rgba(0,0,0,0.85), 0 0 4px rgba(0,0,0,0.95);
  letter-spacing: 0.01em;
}
.time-jump--visible { opacity: 1; }
.time-jump--fading { opacity: 0; transition: opacity 0.8s ease-in; }
.time-jump-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: #f5ead7;
}
.time-jump-line {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Adobe Garamond', Georgia, serif;
  text-align: center;
  letter-spacing: 0.02em;
  color: #f5ead7;
}
.time-jump-line--year {
  font-size: 1.1rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-family: 'Rye', serif;
  font-weight: 400;
  opacity: 0.78;
}
.time-jump-line--location {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 500;
  font-style: italic;
  letter-spacing: 0.01em;
}
.time-jump-line--season {
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-family: 'Rye', serif;
  font-weight: 400;
  opacity: 0.7;
  margin-top: 4px;
}

/* --- Paper grain texture on panels ------------------------------- */
.panel,
.crisis > div,
.crisis aside,
.metric,
.verdict,
.letterhead,
.event-modal,
.codex-collection,
.ranch-profile-field input[type="text"] {
  position: relative;
}
.panel::before,
.crisis > div::before,
.crisis aside::before,
.metric::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.96 0 0 0 0 0.92 0 0 0 0 0.84 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.45;
  mix-blend-mode: overlay;
}
.panel > *, .crisis > div > *, .crisis aside > *, .metric > * { position: relative; }

/* --- Leather-stitch button treatment ----------------------------- */
.action:not(.action--primary),
.reset,
button.btn,
.modal-panel button:not(.modal-close):not(.brand-option) {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(214, 168, 79, 0.06) 6px 7px),
    linear-gradient(180deg, rgba(255, 244, 222, 0.08), rgba(255, 244, 222, 0.03));
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(214, 168, 79, 0.06), 0 1px 0 rgba(0, 0, 0, 0.4);
}
.reset:hover, .action:hover:not(:disabled) {
  background-image:
    repeating-linear-gradient(45deg, transparent 0 6px, rgba(214, 168, 79, 0.1) 6px 7px),
    linear-gradient(180deg, rgba(214, 168, 79, 0.16), rgba(214, 168, 79, 0.06));
  transform: translateY(-1px);
  transition: all 0.18s ease;
}

/* --- Cold-blue winter desaturation ------------------------------- */
body.season-winter {
  filter: saturate(0.86) hue-rotate(-6deg) brightness(0.96);
}

/* --- Warm autumn grain ------------------------------------------- */
body.season-autumn::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='320' viewBox='0 0 320 320'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.86 0 0 0 0 0.42 0 0 0 0 0.18 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 320px 320px;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

/* --- Sepia mode (legacy ≥ 75) ------------------------------------ */
body.sepia-mode {
  filter: grayscale(0.45) sepia(0.78) saturate(0.7) hue-rotate(-8deg) brightness(0.94);
  background:
    radial-gradient(circle at 12% 0%, rgba(180, 140, 60, 0.18), transparent 34rem),
    linear-gradient(145deg, rgba(38, 28, 14, 0.85), rgba(20, 14, 6, 0.95)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cpath d='M0 150 C50 100 90 170 140 110 C170 80 190 90 220 80 L220 220 L0 220 Z' fill='%23331708'/%3E%3Cpath d='M0 148 C50 98 90 168 140 108 C170 78 190 88 220 78' fill='none' stroke='%23523623' stroke-width='2'/%3E%3C/svg%3E");
  background-size: cover, cover, 480px;
}
body.sepia-mode h1, body.sepia-mode h2, body.sepia-mode .eyebrow { color: #e8d3a4; }

/* --- Boot-on-fence-post cemetery marker -------------------------- */
.memorial--hall {
  position: relative;
  padding-left: 32px;
}
.memorial--hall::before {
  content: '\u2003\2003\u26DF'; /* vertical bar with boot glyph */
  position: absolute;
  left: 0;
  top: 0;
  font-size: 1.4rem;
  color: rgba(189, 169, 141, 0.6);
  line-height: 1;
  letter-spacing: -0.1em;
}

/* --- Telegram-style death notice --------------------------------- */
.telegram {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink);
  background: rgba(22, 18, 15, 0.85);
  border-left: 3px solid var(--ink);
  padding: 12px 16px;
  margin: 8px 0;
  text-decoration: underline dotted rgba(214, 168, 79, 0.4);
  text-underline-offset: 4px;
}
.telegram .telegram-head {
  font-family: 'Rye', serif;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
  opacity: 0.85;
}

/* --- Page-turn transition between major views -------------------- */
@keyframes page-turn {
  0% { transform: perspective(1200px) rotateY(0); opacity: 1; }
  35% { transform: perspective(1200px) rotateY(-22deg); opacity: 0.4; }
  60% { transform: perspective(1200px) rotateY(22deg); opacity: 0.4; }
  100% { transform: perspective(1200px) rotateY(0); opacity: 1; }
}
main.shell.is-turning {
  animation: page-turn 0.6s ease-in-out;
  transform-origin: center;
}

/* ============================================================== */
/*  GROUP C — UX/UI: Pasture view, ledger log, bill of sale, etc.  */
/* ============================================================== */

/* Pasture view: paddocks fenced by life stage. */
.pasture { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.pasture-paddock {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(255, 244, 222, 0.04), rgba(255, 244, 222, 0.01));
}
.pasture-paddock-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pasture-paddock-head p.eyebrow { margin: 0; }
.pasture-paddock-head small { margin: 0; }

/* Wood-fence paddock: horizontal rails behind the horses. */
.pasture-fence--wood {
  background:
    linear-gradient(180deg, rgba(255, 244, 222, 0.04), rgba(255, 244, 222, 0.01)),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(120, 90, 60, 0.16) 18px 19px, transparent 19px 36px);
}
.pasture-fence--old-wood {
  background:
    linear-gradient(180deg, rgba(255, 244, 222, 0.03), rgba(255, 244, 222, 0.005)),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(80, 60, 40, 0.22) 22px 23px, transparent 23px 44px);
  opacity: 0.95;
}
/* Iron-fence (legendary) — vertical pickets with iron-gray. */
.pasture-fence--iron {
  background:
    linear-gradient(180deg, rgba(214, 168, 79, 0.05), rgba(255, 244, 222, 0.01)),
    repeating-linear-gradient(90deg, transparent 0 14px, rgba(60, 50, 38, 0.32) 14px 15px, transparent 15px 28px);
  border-color: rgba(214, 168, 79, 0.4);
}
.pasture-paddock-head p.eyebrow { color: var(--gold); }
.pasture-fence--iron .pasture-paddock-head p.eyebrow {
  color: var(--gold);
  font-size: 0.92rem;
}

.pasture-paddock-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.pasture-horse {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 244, 222, 0.06);
  border-radius: 10px;
  background: rgba(22, 18, 15, 0.4);
  text-align: center;
  color: var(--ink);
  cursor: pointer;
  transition: all 0.18s ease;
}
.pasture-horse:hover {
  border-color: rgba(214, 168, 79, 0.4);
  background: rgba(214, 168, 79, 0.08);
  transform: translateY(-1px);
}
.pasture-horse strong { font-size: 0.92rem; }
.pasture-horse small { color: var(--muted); font-size: 0.72rem; }

/* Ledger book log */
.ledger-log {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.5;
  background:
    linear-gradient(180deg, rgba(214, 168, 79, 0.04), rgba(0,0,0,0.18)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='40' viewBox='0 0 120 40'%3E%3Cpath d='M0 12h120M0 28h120' stroke='%23856f4a' stroke-width='0.6' opacity='0.18'/%3E%3C/svg%3E");
  background-size: cover, 100% 32px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 12px;
}
.ledger-log ol { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.ledger-log li {
  padding: 2px 0;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.ledger-log .ledger-day {
  color: var(--gold);
  font-family: 'Rye', serif;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  flex-shrink: 0;
  width: 90px;
}
.ledger-log .ledger-line {
  flex: 1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--ink);
}
.ledger-log li.is-new .ledger-line {
  color: var(--gold);
  font-weight: 500;
}

/* Bill of sale / registration paper modal */
.bill-of-sale {
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  background:
    linear-gradient(180deg, rgba(214, 168, 79, 0.04), rgba(0,0,0,0.15)),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(214, 168, 79, 0.05) 26px 27px);
  padding: 18px 18px 20px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.bill-head { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 2px double rgba(214, 168, 79, 0.4); }
.bill-head .letterhead { margin: 0; border: none; padding: 0; background: transparent; }
.bill-title {
  font-family: 'Rye', serif;
  font-size: 1.7rem;
  letter-spacing: 0.18em;
  color: var(--gold);
  margin: 4px 0 0;
}
.bill-subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--muted);
  margin: 0;
}
.bill-body {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 600px) {
  .bill-body { grid-template-columns: 1fr; }
}
.bill-portrait-block {
  position: relative;
  width: 200px;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.bill-stamp {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: 'Rye', serif;
  font-size: 1.4rem;
  color: var(--gold);
  opacity: 0.55;
  line-height: 1;
  transform: rotate(-12deg);
}
/* Image brand (bar-b) needs an explicit frame inside the stamp. */
.bill-stamp:has(.ranch-brand-image) {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.bill-name {
  font-family: 'Rye', serif;
  font-size: 1.6rem;
  color: var(--ink);
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}
.bill-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 16px;
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
}
.bill-grid > div { padding: 4px 0; border-bottom: 1px dashed rgba(214, 168, 79, 0.18); }
.bill-grid dt {
  font-family: 'Rye', serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2px;
}
.bill-grid dd { margin: 0; color: var(--ink); }
.bill-section {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.bill-section h3.eyebrow { margin-top: 0; }
.bill-footer {
  border-top: 2px double rgba(214, 168, 79, 0.4);
  padding-top: 12px;
  margin-top: 4px;
  text-align: center;
}
.bill-footer p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--muted);
  margin: 0;
  font-size: 0.95rem;
}

/* Personal monologue on horse detail modal */
.monologue { position: relative; }
.monologue-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid rgba(214, 168, 79, 0.4);
}
.monologue-text::before {
  content: '\2014  ';
  color: var(--gold);
  font-style: normal;
  margin-right: 4px;
}

/* Costco Cowgirl authenticity detector banner */
.authenticity-banner {
  border: 1px solid rgba(214, 168, 79, 0.4);
  border-left-width: 4px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(214, 168, 79, 0.06), rgba(0, 0, 0, 0.2));
  padding: 14px 18px;
  margin-top: 12px;
}
.authenticity-banner h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--gold);
  margin: 4px 0 8px;
}
.authenticity-detail {
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 8px;
}
.authenticity-comments {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.authenticity-comments li {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
  padding-left: 14px;
  border-left: 2px solid rgba(214, 168, 79, 0.3);
}
.authenticity-npc {
  font-family: 'Rye', serif;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-right: 6px;
}

/* --- Title-card hero (cinematic backdrop) ----------------------- */
/*
 * The .hero--title-card variant places the Codex title_card.png shot
 * (1536×1024) as a full-bleed cinematic backdrop behind the brand mark
 * and wordmark. A radial-ish dark gradient keeps the text readable.
 * Falls back gracefully: if the image fails to load, the dark gradient
 * alone holds together.
 */
.hero--title-card {
  position: relative;
  overflow: hidden;
  padding: 36px 32px 28px;
  isolation: isolate;
  min-height: 220px;
}
.hero-backdrop {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(12, 10, 8, 0.55) 0%, rgba(12, 10, 8, 0.78) 60%, rgba(12, 10, 8, 0.92) 100%),
    url('/assets/hero/title_card.png');
  background-size: cover;
  background-position: center 40%;
  z-index: -1;
  pointer-events: none;
}
/* When the backdrop image fails to load, hide the gradient by making
 * it inherit the hero panel tone — the hero still looks intentional. */
.hero-backdrop:not([style]) { /* no-op selector retained for future hooks */ }
.hero--title-card .hero-brand-block,
.hero--title-card .hero-actions {
  position: relative;
  z-index: 1;
}
.hero--title-card .hero-brand-mark {
  background: rgba(20, 14, 10, 0.62);
  border-color: rgba(214, 168, 79, 0.45);
  box-shadow: 0 0 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 244, 222, 0.06);
}

/* --- Brand image rendering -------------------------------------- */
/*
 * When a BRAND_SET entry has an `imagePath`, renderBrandGlyph() emits
 * an <img> inside the .ranch-brand span instead of the text symbol.
 * These rules size the image to its frame across hero, letterhead,
 * bill-of-sale, and ranch-profile contexts.
 */
.ranch-brand--image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ranch-brand-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.hero-brand-mark .ranch-brand-image {
  /* The hero frame is 64×64 — the canonical mark fits inside. */
  width: 52px;
  height: 52px;
}
.hero-brand-mark:has(.ranch-brand-image) {
  width: 72px;
  height: 72px;
}
.letterhead-brand-image {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}
.brand-option-image {
  width: 40px;
  height: 40px;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.4));
}

/* --- Codex horse portraits (modal cinematic) -------------------- */
/*
 * Codex portraits are photoreal/painterly, generated via openai-codex
 * at 1024×1536 (portrait). They render in the modal bill-of-sale at
 * xl size. Do NOT apply pixelated scaling here — that breaks the
 * painterly intent.
 */
.horse-portrait--codex {
  background-size: cover;
  background-position: center 30%;
  box-shadow: inset 0 0 0 1px rgba(255, 244, 222, 0.08);
}
.horse-portrait--xl.horse-portrait--codex {
  /* Modal portrait — let it breathe. */
  aspect-ratio: 2 / 3;
  border-radius: 14px;
  background-color: #1a130d;
}

/* --- Kitchen table scene modal ------------------------------------ */
/*
 * The kitchen table modal is a cinematic scene: a bunkhouse backdrop
 * image (256×192 pixel art), a darkening overlay for legibility,
 * a setup line as a stage direction, the speakers with portraits +
 * line bubbles, and 2-3 choice buttons along the bottom.
 *
 * The portraits are 64×96 pixel-art hands. They fall back to initials
 * on a placeholder frame if the asset isn't generated yet.
 */
.kt-scene {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 0;
  border-radius: 14px;
  overflow: hidden;
  min-height: 320px;
  background: #1a130d;
}
.kt-background {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.kt-background--placeholder {
  background:
    repeating-linear-gradient(
      45deg,
      rgba(214, 168, 79, 0.04) 0,
      rgba(214, 168, 79, 0.04) 8px,
      transparent 8px,
      transparent 16px
    ),
    linear-gradient(180deg, rgba(20, 14, 10, 0.95), rgba(12, 10, 8, 0.98));
}
.kt-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(12, 10, 8, 0.55) 0%, rgba(12, 10, 8, 0.82) 100%);
  z-index: 1;
}
.kt-content {
  position: relative;
  z-index: 2;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.kt-setup {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--muted);
  letter-spacing: 0.01em;
  border-left: 2px solid rgba(214, 168, 79, 0.45);
  padding-left: 12px;
  margin: 0;
}
.kt-speakers {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.kt-speaker {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: start;
}
.kt-portrait-frame {
  width: 64px;
  height: 96px;
  border: 1px solid rgba(214, 168, 79, 0.3);
  border-radius: 6px;
  background: rgba(20, 14, 10, 0.7);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kt-portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.kt-portrait-placeholder {
  font-family: 'Rye', serif;
  font-size: 1.4rem;
  color: var(--gold);
  opacity: 0.6;
}
.kt-speaker-bubble {
  background: rgba(20, 14, 10, 0.78);
  border: 1px solid rgba(214, 168, 79, 0.18);
  border-radius: 10px;
  padding: 10px 14px;
}
.kt-speaker-name {
  font-family: 'Rye', serif;
  font-size: 0.78rem;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.kt-speaker-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--ink);
  margin: 0;
}
.kt-speaker--mae       { border-left: 3px solid rgba(214, 168, 79, 0.5); padding-left: 10px; }
.kt-speaker--eli       { border-left: 3px solid rgba(125, 158, 110, 0.5); padding-left: 10px; }
.kt-speaker--reyes     { border-left: 3px solid rgba(140, 110, 70, 0.5); padding-left: 10px; }
.kt-speaker--elena     { border-left: 3px solid rgba(160, 139, 199, 0.5); padding-left: 10px; }
.kt-speaker--cordell-voss { border-left: 3px solid rgba(141, 167, 173, 0.5); padding-left: 10px; }
.kt-speaker[data-mood="advocating"] .kt-speaker-line { color: #fff; font-weight: 500; }

.kt-silent {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--muted);
  opacity: 0.7;
}

.kt-choices {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.kt-choice {
  width: 100%;
  text-align: left;
  justify-content: flex-start;
  padding: 12px 16px;
  background: rgba(20, 14, 10, 0.7);
  border: 1px solid rgba(214, 168, 79, 0.25);
  border-radius: 10px;
  color: var(--ink);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  transition: all 0.18s ease;
  cursor: pointer;
}
.kt-choice:hover {
  border-color: var(--gold);
  background: rgba(214, 168, 79, 0.08);
  color: #fff;
}
.kt-choice--danger {
  border-color: rgba(185, 90, 70, 0.45);
  color: rgba(255, 244, 222, 0.85);
}
.kt-choice--danger:hover {
  background: rgba(185, 90, 70, 0.18);
  border-color: var(--red);
}

/* --- Kitchen shortcuts panel (moral moments in action panel) ----- */
.kitchen-shortcuts {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.kitchen-shortcuts .eyebrow {
  display: block;
  margin-bottom: 6px;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.kitchen-shortcuts .eyebrow .hint {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  font-weight: 400;
  color: var(--muted);
  font-size: 0.78rem;
}
.kitchen-shortcuts .actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Phase 12 — rival portraits in auction preview ──────────────── */
.auction-bidders {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.auction-bidder {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background 120ms ease;
}
.auction-bidder--top {
  background: var(--accent-soft, rgba(180, 142, 75, 0.12));
  border-color: var(--accent, rgba(180, 142, 75, 0.4));
}
.auction-bidder-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.86rem;
}
.auction-bidder-offer {
  color: var(--muted);
  font-size: 0.78rem;
}
.rival-portrait {
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--rule, rgba(255,255,255,0.12));
  background: var(--bg-alt, #1f1814);
  vertical-align: middle;
  flex-shrink: 0;
}
.rival-portrait--sm { width: 28px; height: 28px; }
.rival-portrait--md { width: 36px; height: 36px; }
.rival-portrait--lg { width: 48px; height: 48px; }
.rival-portrait--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt, #1f1814);
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ── Phase 12 — rivals list & community list in region panel ───── */
.rivals-list,
.community-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rivals-list-item,
.community-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule-faint, rgba(255,255,255,0.06));
}
.community-list-item:last-child {
  border-bottom: none;
}
.rivals-list-info,
.community-list-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.84rem;
  flex: 1;
}
.community-list-info small {
  color: var(--muted);
  font-size: 0.74rem;
}
.community-list-item--departed em {
  color: var(--muted);
  font-size: 0.78rem;
  font-style: italic;
}

/* ── Phase 13 — heir portrait in kitchen-table scene header ────── */
.kt-heir-portrait {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  margin: 0 0 14px;
  background: rgba(0,0,0,0.35);
  border-radius: 6px;
  border: 1px solid var(--rule, rgba(255,255,255,0.10));
}
.kt-heir-portrait .heir-portrait {
  width: 64px;
  height: 64px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--accent, rgba(180, 142, 75, 0.5));
}
.kt-heir-portrait-caption {
  margin: 0;
  font-style: italic;
  color: var(--muted);
  font-size: 0.92rem;
}
.heir-portrait--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-alt, #1f1814);
  color: var(--muted);
  font-size: 1.2rem;
  font-weight: 600;
}

/* ── Phase 14 — brand surfaces (title card, ranch profile, letterhead) */
.brand-surface {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}
.brand-surface--title-card {
  /* Set on .hero-backdrop via inline style — no override needed here */
}
.brand-surface--ranch-profile {
  /* Ranch-profile hero: shows the hay barn. The CSS below is in the
     .ranch-profile-hero-surface rule. */
}
.ranch-profile-hero-surface {
  display: block;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 4px 4px 0 0;
  margin: -16px -16px 16px;
}
.letterhead {
  display: flex;
  align-items: center;
  gap: 14px;
}
.letterhead-jacket {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
}

/* ── Phase 14 — hero backdrop (gate surface) ──────────────────── */
.hero-backdrop {
  background-size: cover;
  background-position: center;
  opacity: 0.85;
  filter: saturate(1.05) contrast(1.04);
}