:root {
  --bg: #f7f4ec;
  --bg-card: #ffffff;
  --text: #141414;
  --muted: #3d3d3d;
  --border: rgba(0, 0, 0, 0.16);
  --accent: #9a3412;
  --accent-soft: #ffedd5;
  --on-accent: #141414;
  --urban: #b91c1c;
  --rural: #15803d;
  --wilderness: #1d4ed8;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  --hero-grad: linear-gradient(135deg, #ffedd5 0%, #f7f4ec 55%, #e7e5e4 100%);
  --anatomy-bg: #efe6d6;
  --chip-bg: #fff7ed;
  --bar-fill: #f59e0b;
  --bar-track: #e7e5e4;
}

body.dark-mode {
  --bg: #0c0e12;
  --bg-card: #171b22;
  --text: #f3f4f6;
  --muted: #c4cad4;
  --border: rgba(255, 255, 255, 0.18);
  --accent: #fbbf24;
  --accent-soft: #422006;
  --on-accent: #111827;
  --urban: #f87171;
  --rural: #4ade80;
  --wilderness: #60a5fa;
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --hero-grad: linear-gradient(135deg, #1c1917 0%, #0c0e12 60%, #111827 100%);
  --anatomy-bg: #14110e;
  --chip-bg: #1f2937;
  --bar-fill: #fbbf24;
  --bar-track: #374151;
}

html, body {
  background: var(--bg);
  color: var(--text);
  transition: background-color 0.25s ease, color 0.25s ease;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }
a { color: var(--accent); font-weight: 600; }
a:hover { text-decoration: underline; }

/* kill low-contrast bootstrap greys in both themes */
.text-muted,
.small.text-muted,
.form-label,
#filterStatus,
.opacity-75 {
  color: var(--muted) !important;
  opacity: 1 !important;
}

.lead {
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1.55;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
  color: var(--text);
  line-height: 1.25;
}

/* bootstrap form controls in dark mode */
.form-select,
.form-control {
  color: var(--text);
  background-color: var(--bg-card);
  border-color: var(--border);
}
.form-select option {
  background-color: var(--bg-card);
  color: var(--text);
}
.btn-outline-secondary {
  color: var(--text);
  border-color: var(--border);
}
.btn-outline-secondary:hover {
  background: var(--chip-bg);
  color: var(--text);
  border-color: var(--accent);
}

.hero {
  background: var(--hero-grad);
  border-color: var(--border) !important;
}

.tracking-wide { letter-spacing: 0.08em; }

.card,
.list-group-item,
.form-control,
.form-select {
  background-color: var(--bg-card);
  color: var(--text);
  border-color: var(--border);
}

.card-soft {
  background: color-mix(in srgb, var(--bg) 55%, var(--bg-card));
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 1rem;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--bg-card);
  color: var(--text);
  border-color: var(--accent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 25%, transparent);
}

.form-control::placeholder { color: var(--muted); opacity: 0.9; }
.border-top, .border-bottom { border-color: var(--border) !important; }

/* bio cards */
.bio-stat {
  border-left: 4px solid var(--accent);
  height: 100%;
}
.bio-stat .k {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  font-weight: 700;
}
.bio-stat .v {
  font-weight: 750;
  font-size: 1.05rem;
  color: var(--text);
  line-height: 1.3;
}

.trait-grid { display: grid; gap: 0.65rem; }
.trait-btn {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 0.65rem;
  padding: 0.8rem 0.9rem;
  transition: border-color .15s, background .15s;
}
.trait-btn:hover {
  border-color: var(--accent);
}
.trait-btn.active {
  border-color: var(--accent);
  background: #fde68a;
  color: #111827;
}
body.dark-mode .trait-btn.active {
  background: #fbbf24;
  color: #111827;
}
.trait-btn strong {
  display: block;
  margin-bottom: 0.3rem;
  color: inherit;
  font-size: 1rem;
}
.trait-btn span {
  font-size: 0.92rem;
  color: var(--muted);
  line-height: 1.45;
  display: block;
}
.trait-btn.active span {
  color: #1f2937;
}

/* size ladder: label + bar + note BELOW (never clip inside bar) */
.size-compare { display: grid; gap: 0.85rem; }
.size-row {
  display: grid;
  gap: 0.3rem;
}
.size-row-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  align-items: baseline;
}
.size-row-head strong {
  color: var(--text);
  font-size: 0.98rem;
}
.size-row-head .wt {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 600;
}
.size-bar-track {
  height: 14px;
  border-radius: 999px;
  background: var(--bar-track);
  overflow: hidden;
  border: 1px solid var(--border);
}
.size-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d97706, var(--bar-fill));
  min-width: 12px;
}
.size-note {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.4;
}

.vitals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem 0.85rem;
  font-size: 0.95rem;
  color: var(--text);
}
.vitals-grid b {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

/* anatomy */
.anatomy-stage {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--border);
}
.anatomy-svg { width: 100%; height: auto; display: block; }
.anatomy-bg { fill: var(--anatomy-bg); }
.hotspot-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.hotspot {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border-radius: 50%;
  border: 2px solid #fff;
  background: color-mix(in srgb, var(--accent) 75%, #000);
  box-shadow: 0 0 0 2px rgba(0,0,0,.25), 0 0 0 0 rgba(180,83,9,.5);
  pointer-events: auto;
  cursor: pointer;
  animation: pulse 2.2s ease-out infinite;
  padding: 0;
}
.hotspot:hover, .hotspot.active {
  background: var(--accent);
  transform: scale(1.12);
  animation: none;
}
.hotspot:focus-visible {
  outline: 3px solid var(--wilderness);
  outline-offset: 2px;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 2px rgba(0,0,0,.25), 0 0 0 0 rgba(180,83,9,.45); }
  70% { box-shadow: 0 0 0 2px rgba(0,0,0,.25), 0 0 0 12px rgba(180,83,9,0); }
  100% { box-shadow: 0 0 0 2px rgba(0,0,0,.25), 0 0 0 0 rgba(180,83,9,0); }
}
#anatomyList { padding-left: 1.1rem; }
#anatomyList li { margin-bottom: 0.25rem; cursor: pointer; }
#anatomyList li:hover, #anatomyList li.active { color: var(--accent); font-weight: 600; }

/* gestation */
.gest-track {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.gest-chip {
  border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--text);
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.gest-chip.active {
  background: #fbbf24;
  border-color: #f59e0b;
  color: #111827;
  font-weight: 800;
}
.gest-viz {
  min-height: 160px;
  border-radius: 0.85rem;
  border: 1px solid var(--border);
  background:
    radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 50%),
    var(--bg-card);
  display: grid;
  place-items: center;
  font-size: 3.5rem;
  position: relative;
  overflow: hidden;
  color: var(--text);
}
.gest-viz .den {
  width: 70%;
  height: 55%;
  border: 3px solid color-mix(in srgb, var(--text) 45%, transparent);
  border-bottom: 0;
  border-radius: 80px 80px 0 0;
  position: absolute;
  bottom: 12%;
}
.gest-viz .pup {
  width: 22px;
  height: 16px;
  border-radius: 40% 40% 40% 40%;
  background: #c4a574;
  display: inline-block;
  margin: 0 2px;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.25);
  border: 1px solid #3f2f1e;
}
.gest-viz .gest-caption {
  position: relative;
  z-index: 2;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
  background: #fde68a;
  border: 1px solid #f59e0b;
  border-radius: 999px;
  padding: 0.35rem 0.75rem;
  margin-top: 0.35rem;
  line-height: 1.3;
  max-width: 90%;
}
.gest-meta-pill {
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
  background: var(--chip-bg);
  color: var(--text);
  font-weight: 600;
}

/* pressure */
.pup-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  min-height: 36px;
}
.pup-icon {
  width: 28px;
  height: 22px;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(135deg, #c4a574, #6b542f);
  border: 1px solid #3f2f1e;
  position: relative;
}
.pup-icon::before {
  content: "";
  position: absolute;
  left: 4px; top: -6px;
  width: 8px; height: 10px;
  background: #6b542f;
  border-radius: 2px 2px 0 0;
  box-shadow: 12px 0 0 #6b542f;
}
.pressure-output .display-6 { color: var(--accent); font-weight: 800; }
.progress {
  background: var(--bar-track);
  height: 1.35rem;
  border: 1px solid var(--border);
}
.progress-bar {
  color: #111827 !important;
  font-weight: 800;
  font-size: 0.85rem;
  background-color: #fbbf24 !important;
}

/* diet */
.diet-chart { display: grid; gap: 0.65rem; }
.diet-row {
  display: grid;
  grid-template-columns: 140px 1fr 52px;
  gap: 0.55rem;
  align-items: center;
  cursor: pointer;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 600;
}
.diet-bar-wrap {
  height: 18px;
  background: var(--bar-track);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.diet-bar {
  height: 100%;
  background: linear-gradient(90deg, #d97706, #fbbf24);
  border-radius: 999px;
  transition: width .35s ease;
}
.diet-row.active .diet-bar { background: linear-gradient(90deg, #2563eb, #60a5fa); }
.diet-row small { color: var(--text); font-weight: 750; }

/* quiz */
.quiz-q { font-weight: 750; margin-bottom: 0.75rem; color: var(--text); font-size: 1.05rem; }
.quiz-choices { display: grid; gap: 0.5rem; }
.quiz-choices button {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 0.6rem;
  padding: 0.75rem 0.9rem;
  font-size: 0.98rem;
  font-weight: 600;
}
.quiz-choices button:hover:not(:disabled) { border-color: var(--accent); background: var(--chip-bg); }
.quiz-choices button.correct { border-color: #16a34a; background: #dcfce7; color: #14532d; }
.quiz-choices button.wrong { border-color: #dc2626; background: #fee2e2; color: #7f1d1d; }
body.dark-mode .quiz-choices button.correct { background: #14532d; color: #bbf7d0; border-color: #4ade80; }
body.dark-mode .quiz-choices button.wrong { background: #7f1d1d; color: #fecaca; border-color: #f87171; }
.quiz-explain { margin-top: 0.75rem; font-size: 0.98rem; color: var(--text); font-weight: 500; }

footer {
  color: var(--muted);
}
footer a { color: var(--accent); }

/* hero badges readable */
.badge.text-bg-secondary { background: #4b5563 !important; color: #fff !important; }
.badge.text-bg-warning { background: #fbbf24 !important; color: #111827 !important; }
.badge.text-bg-danger { background: #dc2626 !important; color: #fff !important; }
.badge.text-bg-success { background: #16a34a !important; color: #fff !important; }
.badge.text-bg-primary { background: #2563eb !important; color: #fff !important; }
.badge.text-bg-dark { background: #111827 !important; color: #f9fafb !important; }

/* Timeline */
.timeline-scroll {
  max-height: min(70vh, 720px);
  overflow-y: auto;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
}
#timelineList .list-group-item {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
  background: var(--bg-card);
}
#timelineList .list-group-item:last-child { border-bottom: 0; }
#timelineList .list-group-item:hover {
  transform: translateX(2px);
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--bg-card));
}
#timelineList .list-group-item.active-entry,
#timelineList .list-group-item.highlight {
  background: #fde68a;
  color: #111827;
  box-shadow: inset 0 0 0 1px #f59e0b;
}
#timelineList .list-group-item.active-entry .entry-title,
#timelineList .list-group-item.active-entry .entry-text,
#timelineList .list-group-item.active-entry .entry-place,
#timelineList .list-group-item.highlight .entry-title,
#timelineList .list-group-item.highlight .entry-text,
#timelineList .list-group-item.highlight .entry-place {
  color: #111827 !important;
}
body.dark-mode #timelineList .list-group-item.active-entry,
body.dark-mode #timelineList .list-group-item.highlight {
  background: #fbbf24;
  color: #111827;
}
#timelineList .list-group-item[data-region="urban"] { border-left-color: var(--urban); }
#timelineList .list-group-item[data-region="rural"] { border-left-color: var(--rural); }
#timelineList .list-group-item[data-region="wilderness"] { border-left-color: var(--wilderness); }

.entry-meta { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.5rem; }
.pill {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.75rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 0.25rem 0.55rem; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text); background: var(--chip-bg);
}
.pill.urban { color: #111827; background: #fecaca; border-color: #f87171; }
.pill.rural { color: #111827; background: #bbf7d0; border-color: #4ade80; }
.pill.wilderness { color: #111827; background: #bfdbfe; border-color: #60a5fa; }
body.dark-mode .pill.urban { background: #7f1d1d; color: #fecaca; border-color: #f87171; }
body.dark-mode .pill.rural { background: #14532d; color: #bbf7d0; border-color: #4ade80; }
body.dark-mode .pill.wilderness { background: #1e3a8a; color: #bfdbfe; border-color: #60a5fa; }
.entry-title { font-size: 1.08rem; font-weight: 750; margin-bottom: 0.2rem; color: var(--text); }
.entry-place { font-size: 0.92rem; color: var(--muted); margin-bottom: 0.5rem; font-weight: 500; }
.entry-text { font-size: 0.98rem; margin-bottom: 0.65rem; color: var(--text); line-height: 1.5; }
.details-btn {
  width: 100%; text-align: left; border: 1px solid var(--border);
  background: var(--chip-bg);
  color: var(--text); border-radius: 0.5rem; padding: 0.5rem 0.75rem;
  font-size: 0.9rem; font-weight: 700;
}
.details-btn::after { content: "+"; float: right; font-weight: 700; }
.details-btn.active::after { content: "−"; }
.details-panel {
  display: none; margin-top: 0.65rem; padding: 0.85rem; border-radius: 0.5rem;
  background: var(--chip-bg);
  border: 1px solid var(--border); font-size: 0.95rem;
  color: var(--text);
}
.details-panel.open { display: block; }
.details-panel dt { font-weight: 750; margin-top: 0.4rem; color: var(--text); }
.details-panel dd { margin-left: 0; color: var(--text); opacity: 0.92; }

/* Map */
#map {
  height: min(70vh, 720px);
  min-height: 360px;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  z-index: 1;
}
.legend-inline { display: flex; flex-wrap: wrap; gap: 0.75rem; color: var(--muted); }
.legend-inline .dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.25rem;
  border: 1px solid rgba(255, 255, 255, 0.7); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.legend-inline .dot.urban { background: var(--urban); }
.legend-inline .dot.rural { background: var(--rural); }
.legend-inline .dot.wilderness { background: var(--wilderness); }
.coyote-marker { background: transparent; border: 0; }
.coyote-pin {
  width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: var(--bg-card); color: var(--text); border-radius: 0.6rem; box-shadow: var(--shadow);
}
.leaflet-popup-content { margin: 0.75rem 0.9rem; font-size: 0.9rem; line-height: 1.35; }
.leaflet-popup-content h5 { font-size: 1rem; font-weight: 700; margin: 0 0 0.35rem; }
.leaflet-container a { color: var(--accent); }
body.dark-mode .leaflet-tile-pane { filter: brightness(0.82) contrast(1.05) saturate(0.9); }
body.dark-mode .navbar.bg-dark { background-color: #0b0d11 !important; }
body.dark-mode .btn-outline-light { color: #f3f4f6; border-color: #6b7280; }
body.dark-mode .btn-outline-secondary { color: var(--text); border-color: var(--border); }

/* ---- exhibit rail / tour / quotes / range ---- */
.navbar.sticky-top { z-index: 1030; }

.exhibit-rail {
  position: sticky;
  top: 56px;
  z-index: 1020;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.exhibit-rail-inner {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.75rem;
  max-width: 1140px;
  margin: 0 auto;
}
.exhibit-chips {
  display: flex;
  gap: 0.35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  padding-bottom: 2px;
  flex: 1;
}
.exhibit-chip {
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  white-space: nowrap;
}
.exhibit-chip:hover { border-color: var(--accent); color: var(--accent); }
.exhibit-chip.active {
  background: #fbbf24;
  border-color: #d97706;
  color: #111827;
}
.navbar .nav-link.exhibit-link.active {
  color: #fbbf24 !important;
  font-weight: 700;
}

.tour-banner {
  position: sticky;
  top: 104px;
  z-index: 1015;
  background: #fde68a;
  color: #111827;
  border-bottom: 2px solid #f59e0b;
  font-size: 0.95rem;
}
body.dark-mode .tour-banner {
  background: #fbbf24;
  color: #111827;
}
.tour-pulse {
  outline: 3px solid #f59e0b;
  outline-offset: 4px;
  animation: tourGlow 1.2s ease-in-out infinite alternate;
}
@keyframes tourGlow {
  from { outline-color: #f59e0b; }
  to { outline-color: #fbbf24; }
}

.exhibit-section {
  scroll-margin-top: 130px;
}
#timeline {
  scroll-margin-top: 140px;
}

.quote-stage blockquote {
  font-size: 1.2rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--text);
  border-left: 4px solid var(--accent);
  padding-left: 1rem;
  margin: 0;
}
.quote-stage .blockquote-footer {
  color: var(--muted);
  font-weight: 600;
}
.quote-dots {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.quote-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--bar-track);
  cursor: pointer;
}
.quote-dot.active { background: var(--accent); transform: scale(1.25); }

/* facts + videos */
.fact-card .fact-display {
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 1.1rem 1.15rem;
  min-height: 7.5rem;
}
.fact-card .fact-display.flash {
  animation: factFlash 0.35s ease;
}
@keyframes factFlash {
  from { transform: scale(0.985); background: #fde68a; }
  to { transform: scale(1); }
}
body.dark-mode .fact-card .fact-display.flash {
  animation: factFlashDark 0.35s ease;
}
@keyframes factFlashDark {
  from { transform: scale(0.985); background: #422006; }
  to { transform: scale(1); }
}
.fact-num {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #111827;
  background: #fbbf24;
  border-radius: 999px;
  padding: 0.2rem 0.55rem;
  margin-bottom: 0.55rem;
}
.fact-text {
  font-size: 1.15rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--text);
}

.video-card {
  color: inherit;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.video-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.video-thumb {
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  background-color: #1f2937;
  border-bottom: 1px solid var(--border);
}
.video-thumb-fallback {
  display: grid;
  place-items: center;
  font-size: 2rem;
  color: #fbbf24;
  font-weight: 800;
}
.video-card .card-body {
  background: var(--bg-card);
}

.range-block {
  background: var(--chip-bg);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
}
.era-ticks { gap: 0.25rem; }

#howlBtn.howling {
  background: #fbbf24 !important;
  color: #111827 !important;
  border-color: #d97706 !important;
}

/* bigger anatomy hotspots */
.hotspot {
  width: 36px !important;
  height: 36px !important;
  margin: -18px 0 0 -18px !important;
  border-width: 3px !important;
}

/* phone-first */
@media (max-width: 991.98px) {
  .exhibit-rail { top: 56px; }
  .tour-banner { top: 100px; font-size: 0.9rem; }
  .exhibit-section { scroll-margin-top: 150px; }

  .timeline-scroll {
    max-height: 42vh;
    margin-bottom: 0.75rem;
  }
  #map {
    height: 42vh;
    min-height: 240px;
    max-height: 360px;
  }
  #timelineList .list-group-item {
    border-left-width: 0;
    border-top: 4px solid var(--accent);
    padding: 0.9rem 0.85rem;
  }
  #timelineList .entry-title { font-size: 1.02rem; }
  #timelineList .entry-text { font-size: 0.95rem; }
  .diet-row { grid-template-columns: 92px 1fr 40px; font-size: 0.88rem; }

  .hotspot {
    width: 42px !important;
    height: 42px !important;
    margin: -21px 0 0 -21px !important;
  }

  .hero .lead { font-size: 1.05rem; }
  .quote-stage blockquote { font-size: 1.08rem; }

  .navbar .nav-link { padding: 0.45rem 0.55rem; }
  .btn, .form-select, .form-control, .details-btn {
    min-height: 44px;
  }
  .gest-chip { padding: 0.45rem 0.8rem; font-size: 0.88rem; }
}

@media (max-width: 575.98px) {
  .exhibit-rail-inner { padding: 0.4rem 0.5rem; }
  .bio-stat .v { font-size: 0.95rem; }
  .display-6 { font-size: 1.65rem; }
  #map { height: 38vh; min-height: 220px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    scroll-behavior: auto !important;
    animation: none !important;
  }
}

/* ========== ULTIMATE LAYER ========== */
.brand-ult {
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  background: #fbbf24;
  color: #111;
  padding: 0.15rem 0.4rem;
  border-radius: 0.3rem;
  margin-left: 0.35rem;
  vertical-align: middle;
  font-weight: 800;
}
.text-gradient {
  background: linear-gradient(90deg, #b45309, #d97706, #f59e0b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
body.dark-mode .text-gradient {
  background: linear-gradient(90deg, #fbbf24, #fde68a);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-ult { position: relative; overflow: hidden; }
.hero-ult::after {
  content: "";
  position: absolute;
  right: -40px; top: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(251,191,36,.25), transparent 70%);
  pointer-events: none;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.6rem;
}
@media (max-width: 991px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 575px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.kpi-card, .dash-tile {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.75rem;
  padding: 0.75rem 0.85rem;
  box-shadow: var(--shadow);
}
.kpi-value, .dash-v {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--accent);
  line-height: 1.1;
}
.kpi-label, .dash-k {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-top: 0.25rem;
}
.kpi-note { font-size: 0.78rem; color: var(--muted); margin-top: 0.15rem; }

.jump-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
}
@media (max-width: 575px) {
  .jump-grid { grid-template-columns: repeat(2, 1fr); }
}
.jump-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.65rem 0.4rem;
  border-radius: 0.55rem;
  border: 1px solid var(--border);
  background: var(--chip-bg);
  min-height: 44px;
}
.jump-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}

.fav-list { display: grid; gap: 0.5rem; max-height: 220px; overflow: auto; }
.fav-item {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.65rem;
  background: var(--chip-bg);
  font-size: 0.9rem;
}
.fav-item span { font-weight: 800; color: var(--accent); font-size: 0.75rem; }
.fav-item p { margin: 0.25rem 0 0.4rem; }

.key-help { display: grid; gap: 0.35rem; }
.key-row { display: flex; gap: 0.65rem; align-items: center; font-size: 0.88rem; }
.key-row kbd {
  background: #111827;
  color: #f9fafb;
  border-radius: 0.35rem;
  padding: 0.15rem 0.45rem;
  font-size: 0.75rem;
  min-width: 4.5rem;
  text-align: center;
}

.compare-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 1100px) {
  .compare-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .compare-grid { grid-template-columns: 1fr; }
}
.compare-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 0.9rem;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.compare-card:hover { border-color: var(--accent); }
.compare-card.is-focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 2px rgba(245,158,11,.35);
  background: color-mix(in srgb, #fde68a 35%, var(--bg-card));
}
body.dark-mode .compare-card.is-focus {
  background: color-mix(in srgb, #422006 55%, var(--bg-card));
}
.compare-head h3 { font-size: 1.05rem; margin: 0; font-weight: 800; }
.compare-head .latin { font-size: 0.8rem; color: var(--muted); font-style: italic; margin-bottom: 0.55rem; }
.compare-card dl { margin: 0; display: grid; gap: 0.45rem; }
.compare-card dt { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 800; }
.compare-card dd { margin: 0; font-size: 0.88rem; line-height: 1.35; color: var(--text); }

.season-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
@media (max-width: 991px) {
  .season-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .season-grid { grid-template-columns: 1fr; }
}
.season-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 0.85rem;
  padding: 0.9rem 1rem;
}
.season-card.is-now {
  border-color: #f59e0b;
  box-shadow: inset 0 0 0 1px #fbbf24;
}
.season-top { display: flex; justify-content: space-between; gap: 0.5rem; align-items: baseline; margin-bottom: 0.5rem; }
.season-top h3 { margin: 0; font-size: 1.05rem; font-weight: 800; }
.season-months { font-size: 0.78rem; font-weight: 700; color: var(--muted); }
.season-card ul { margin: 0 0 0.65rem; padding-left: 1.1rem; font-size: 0.9rem; }
.season-tip { font-size: 0.88rem; background: var(--chip-bg); border-radius: 0.5rem; padding: 0.5rem 0.65rem; border: 1px solid var(--border); }

.encounter-box { min-height: 140px; }
.enc-choices { display: grid; gap: 0.5rem; }
.enc-choice {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 0.65rem;
  padding: 0.85rem 1rem;
  font-weight: 650;
  font-size: 0.98rem;
  min-height: 48px;
}
.enc-choice:hover { border-color: var(--accent); background: var(--chip-bg); }
.enc-answer h3 { font-weight: 800; }
.enc-answer ol { margin-bottom: 1rem; }

.myth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}
@media (max-width: 991px) {
  .myth-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
  .myth-grid { grid-template-columns: 1fr; }
}
.myth-card {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 0.75rem;
  padding: 0.9rem;
  min-height: 130px;
}
.myth-card.open { border-color: #16a34a; }
.myth-label {
  font-size: 0.7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #b91c1c;
  margin-bottom: 0.35rem;
}
.myth-label.fact { color: #15803d; margin-top: 0.65rem; }
.myth-q { font-weight: 750; font-size: 0.98rem; }
.myth-hint { margin-top: 0.65rem; font-size: 0.78rem; color: var(--muted); }

.id-list { display: grid; gap: 0.4rem; }
.id-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: var(--chip-bg);
  font-weight: 600;
  cursor: pointer;
}
.id-item em { font-style: normal; font-size: 0.72rem; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.id-item.weight-high em { color: #b45309; }
.id-item input { width: 1.15rem; height: 1.15rem; }

.sound-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.55rem;
}
@media (max-width: 767px) {
  .sound-board { grid-template-columns: repeat(2, 1fr); }
}
.sound-btn {
  text-align: left;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text);
  border-radius: 0.7rem;
  padding: 0.85rem;
  min-height: 88px;
}
.sound-btn:hover { border-color: var(--accent); background: #fde68a; color: #111; }
.sound-btn strong { display: block; font-size: 1rem; margin-bottom: 0.25rem; }
.sound-btn span { font-size: 0.82rem; color: var(--muted); }
.sound-btn:hover span { color: #1f2937; }

.home-check { display: grid; gap: 0.4rem; }
.check-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  background: var(--chip-bg);
  font-weight: 600;
  cursor: pointer;
}
.check-row input { margin-top: 0.2rem; width: 1.15rem; height: 1.15rem; }

.glossary-list { display: grid; gap: 0.35rem; }
.gloss-item {
  border: 1px solid var(--border);
  border-radius: 0.5rem;
  background: var(--bg-card);
  padding: 0.35rem 0.7rem;
}
.gloss-item summary { cursor: pointer; font-weight: 750; padding: 0.35rem 0; }
.gloss-item p { margin: 0 0 0.5rem; color: var(--muted); }

/* search / video modals */
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: start center;
  padding: 8vh 1rem 1rem;
}
.search-modal[hidden] { display: none !important; }
.search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(3px);
}
.search-panel {
  position: relative;
  width: min(720px, 100%);
  background: var(--bg-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 1rem;
  max-height: 80vh;
  overflow: auto;
}
.search-panel.video-panel { width: min(900px, 100%); }
.search-head { display: flex; gap: 0.5rem; margin-bottom: 0.75rem; }
.search-results { display: grid; gap: 0.4rem; }
.search-empty { color: var(--muted); padding: 1rem 0.25rem; }
.search-hit {
  display: grid;
  gap: 0.15rem;
  text-decoration: none;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  padding: 0.65rem 0.75rem;
  background: var(--chip-bg);
}
.search-hit:hover { border-color: var(--accent); }
.search-type {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent);
}
.search-body { font-size: 0.86rem; color: var(--muted); }

body.search-open { overflow: hidden; }

@media print {
  .navbar, .exhibit-rail, .tour-banner, #howlBtn, .search-modal, footer { display: none !important; }
  body { background: white; color: black; }
  .card { break-inside: avoid; }
}

/* ========== WOW / MASS APPEAL ========== */
body.splash-open, body.story-open { overflow: hidden; }

.wow-splash {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center;
  padding: 1rem;
}
.wow-splash[hidden] { display: none !important; }
.wow-splash.out .wow-splash-card { transform: scale(.96); opacity: 0; }
.wow-splash.out .wow-splash-bg { opacity: 0; }
.wow-splash-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(251,191,36,.35), transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(180,83,9,.4), transparent 45%),
    linear-gradient(160deg, #0c0a09 0%, #1c1917 40%, #0f172a 100%);
  transition: opacity .35s ease;
}
.wow-splash-bg::after {
  content: "🐺";
  position: absolute;
  right: 8%; bottom: 10%;
  font-size: clamp(6rem, 20vw, 14rem);
  opacity: .08;
  filter: grayscale(1);
}
.wow-splash-card {
  position: relative;
  width: min(640px, 100%);
  background: rgba(12,10,9,.82);
  border: 1px solid rgba(251,191,36,.45);
  border-radius: 1.25rem;
  padding: 1.75rem 1.5rem 1.25rem;
  color: #fafaf9;
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
  backdrop-filter: blur(12px);
  transition: transform .35s ease, opacity .35s ease;
  animation: wowIn .5s ease;
}
@keyframes wowIn {
  from { transform: translateY(16px) scale(.98); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.wow-kicker {
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fbbf24;
}
.wow-splash-card h1 {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 900;
  line-height: 1.1;
  margin: .5rem 0 0.75rem;
}
.wow-splash-card > p {
  color: #d6d3d1;
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 1.1rem;
}
.wow-splash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin-bottom: 1.15rem;
}
.wow-splash-stats div {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .65rem;
  padding: .55rem .35rem;
  text-align: center;
}
.wow-splash-stats b {
  display: block;
  color: #fbbf24;
  font-size: 1.15rem;
  font-weight: 900;
}
.wow-splash-stats span {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #a8a29e;
  font-weight: 700;
}
.wow-splash-actions {
  display: flex; flex-wrap: wrap; gap: .55rem;
}
.wow-skip {
  display: block;
  margin: .9rem auto 0;
  background: none;
  border: 0;
  color: #a8a29e;
  font-size: .85rem;
  text-decoration: underline;
  cursor: pointer;
}
@media (max-width: 575px) {
  .wow-splash-stats { grid-template-columns: repeat(2, 1fr); }
  .wow-splash-actions .btn { width: 100%; }
}

/* story */
.wow-story {
  position: fixed; inset: 0; z-index: 2900;
  display: grid; place-items: center;
  padding: 1rem;
}
.wow-story[hidden] { display: none !important; }
.wow-story-bg {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 30% 30%, rgba(251,191,36,.2), transparent 40%),
    #0c0a09ee;
  backdrop-filter: blur(6px);
}
.wow-story-inner {
  position: relative;
  width: min(720px, 100%);
  color: #fafaf9;
  padding: 1.5rem;
}
.wow-story-progress {
  height: 4px;
  background: rgba(255,255,255,.12);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 1.25rem;
}
.wow-story-progress > div {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #d97706, #fbbf24);
  transition: width .35s ease;
}
.wow-story-inner h2 {
  font-size: clamp(1.6rem, 4.5vw, 2.4rem);
  font-weight: 900;
  line-height: 1.15;
  margin: .35rem 0 .75rem;
}
.wow-story-inner > p {
  font-size: 1.15rem;
  line-height: 1.55;
  color: #e7e5e4;
  margin-bottom: 1.25rem;
  max-width: 40rem;
}
.wow-story-actions {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: .5rem;
}
.wow-story-dots {
  display: flex; gap: .4rem; margin-top: 1rem;
}
.wow-story-dots button {
  width: 10px; height: 10px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.25); padding: 0;
}
.wow-story-dots button.on { background: #fbbf24; transform: scale(1.25); }

.wow-story[data-beat="hook"] .wow-story-bg { background: radial-gradient(circle at 50% 40%, rgba(180,83,9,.35), #0c0a09f2); }
.wow-story[data-beat="war"] .wow-story-bg { background: radial-gradient(circle at 70% 30%, rgba(220,38,38,.25), #0c0a09f2); }
.wow-story[data-beat="city"] .wow-story-bg { background: radial-gradient(circle at 30% 70%, rgba(37,99,235,.25), #0c0a09f2); }
.wow-story[data-beat="you"] .wow-story-bg { background: radial-gradient(circle at 50% 50%, rgba(22,163,74,.2), #0c0a09f2); }

.wow-story-banner {
  border: 1px solid rgba(251,191,36,.4) !important;
  background: linear-gradient(120deg, #fffbeb, var(--bg-card) 55%) !important;
}
body.dark-mode .wow-story-banner {
  background: linear-gradient(120deg, #422006, var(--bg-card) 60%) !important;
}

/* ticker */
.wow-ticker {
  margin-top: 1.1rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg-card) 80%, #fbbf24 8%);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.wow-ticker-track {
  display: flex;
  gap: 2rem;
  width: max-content;
  animation: ticker 40s linear infinite;
  padding: .55rem 0;
}
.wow-ticker-track span {
  font-size: .82rem;
  font-weight: 750;
  white-space: nowrap;
  color: var(--text);
  opacity: .9;
}
.wow-ticker-track span::before {
  content: "✦";
  color: #d97706;
  margin-right: .65rem;
}
@keyframes ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* range cinema */
.range-cinema-meter {
  height: 10px;
  background: var(--bar-track);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--border);
}
#rangeCinemaFill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #92400e, #f59e0b, #fde68a);
  transition: width .45s ease;
}

/* FAB */
.wow-fab {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 1500;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: .25s ease;
}
.wow-fab.show {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}
.wow-fab button {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,.15);
  background: #111827;
  color: #fff;
  font-size: 1.15rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  cursor: pointer;
}
.wow-fab button:hover { background: #f59e0b; color: #111; }

/* confetti */
.wow-confetti {
  pointer-events: none;
  position: fixed; inset: 0; z-index: 4000;
  overflow: hidden;
}
.wow-confetti i {
  position: absolute;
  top: -12px;
  width: 8px; height: 14px;
  border-radius: 2px;
  animation: confettiFall linear forwards;
}
@keyframes confettiFall {
  to { transform: translateY(110vh) rotate(720deg); opacity: .2; }
}

.wow-toast {
  position: fixed;
  left: 50%;
  bottom: 88px;
  transform: translateX(-50%) translateY(20px);
  background: #111827;
  color: #fff;
  padding: .65rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .92rem;
  z-index: 4100;
  opacity: 0;
  transition: .25s ease;
  pointer-events: none;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
}
.wow-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* hero pulse */
.hero-ult h1 {
  letter-spacing: -0.02em;
}
.hero-ult .lead {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
}

@media (max-width: 575px) {
  .wow-fab { right: 10px; bottom: 10px; }
  .wow-fab button { width: 44px; height: 44px; }
}

/* ========== EXTRAS / WILD LAB ========== */
body.night-mode {
  --bg: #05060a;
  --bg-card: #0d1118;
  --text: #e8eef7;
  --muted: #9aa8bc;
  --border: rgba(120, 160, 255, 0.18);
  --accent: #7dd3fc;
  --chip-bg: #111827;
}
body.night-mode .hero-ult {
  background: radial-gradient(ellipse at 30% 0%, rgba(56,189,248,.15), transparent 50%), #05060a !important;
}
body.night-mode #map {
  filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.1);
  box-shadow: 0 0 40px rgba(56,189,248,.15);
}
body.night-mode .coyote-pin {
  animation: pinPulse 1.8s ease-in-out infinite;
  box-shadow: 0 0 12px currentColor;
}
@keyframes pinPulse {
  0%, 100% { transform: rotate(-45deg) scale(1); opacity: 1; }
  50% { transform: rotate(-45deg) scale(1.25); opacity: .85; }
}
body.night-mode .navbar.bg-dark { background: #020617 !important; }

body.trickster-mode {
  --accent: #c084fc;
  --accent-soft: #3b0764;
}
body.trickster-mode .hero-ult::before {
  content: "TRICKSTER CHANNEL";
  position: absolute;
  top: 8px; right: 12px;
  font-size: .65rem;
  letter-spacing: .14em;
  font-weight: 900;
  color: #e9d5ff;
  opacity: .7;
}
body.trickster-mode .card,
body.trickster-mode .list-group-item {
  border-color: rgba(192,132,252,.35) !important;
}

.wild-hero {
  border: 1px solid rgba(251,191,36,.35) !important;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 80%, #fbbf24 10%), var(--bg-card)) !important;
}
.nation-pressure .nat-bar {
  height: 12px;
  background: var(--bar-track, #333);
  border-radius: 99px;
  overflow: hidden;
  border: 1px solid var(--border);
}
#natPressureFill {
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, #22c55e, #eab308, #ef4444);
  transition: width .5s ease;
}
.fact-day {
  border: 1px dashed var(--border);
  border-radius: .75rem;
  padding: .75rem 1rem;
  background: var(--chip-bg);
}

.lottery-card { overflow: hidden; }
.lottery-stage { text-align: center; }
.lottery-window {
  margin: 1rem auto;
  max-width: 520px;
  min-height: 120px;
  border: 4px solid #fbbf24;
  border-radius: 1rem;
  background: #111;
  display: grid;
  place-items: center;
  box-shadow: inset 0 0 40px rgba(251,191,36,.2);
}
.lottery-reels {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  padding: 1rem;
}
.lot-pup {
  font-size: 1.6rem;
  display: inline-block;
  animation: pupPop .4s ease backwards;
}
.lottery-reels.spinning .lot-pup { animation: pupSpin .5s linear infinite; }
@keyframes pupPop {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to { transform: none; opacity: 1; }
}
@keyframes pupSpin {
  to { transform: rotate(360deg); }
}
.lottery-result {
  font-weight: 800;
  font-size: 1.05rem;
  margin-top: .5rem;
}

.court-card {
  border: 2px solid var(--border);
  border-radius: 1rem;
  padding: 1.25rem;
  background: var(--chip-bg);
  min-height: 180px;
  transition: border-color .2s, background .2s;
}
.court-card.right { border-color: #22c55e; background: color-mix(in srgb, #14532d 30%, var(--bg-card)); }
.court-card.wrong { border-color: #ef4444; background: color-mix(in srgb, #7f1d1d 30%, var(--bg-card)); }
.court-claim { font-size: 1.25rem; font-weight: 800; margin-bottom: 1rem; line-height: 1.35; }
.court-actions { display: flex; gap: .75rem; }
.court-actions .btn { flex: 1; min-height: 48px; font-weight: 900; }
.court-explain { margin-top: 1rem; font-weight: 600; }

.scat-board {
  display: grid;
  grid-template-columns: 1fr 1.2fr 1fr;
  gap: .75rem;
}
@media (max-width: 991px) {
  .scat-board { grid-template-columns: 1fr; }
}
.scat-chip {
  display: inline-block;
  margin: .25rem;
  padding: .45rem .7rem;
  border-radius: 999px;
  background: var(--c, #666);
  color: #111;
  font-weight: 800;
  font-size: .85rem;
  cursor: grab;
}
.scat-bowl {
  min-height: 160px;
  border: 3px dashed var(--border);
  border-radius: 1rem;
  background: #1c1917;
  color: #e7e5e4;
  padding: .75rem;
}
.scat-bowl-label { opacity: .5; font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.scat-dropped { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.scat-dropped span {
  padding: .25rem .5rem;
  border-radius: 999px;
  color: #111;
  font-weight: 800;
  font-size: .78rem;
}
.scat-bar-row {
  display: grid;
  grid-template-columns: 70px 1fr 64px;
  gap: .35rem;
  align-items: center;
  font-size: .8rem;
  margin-bottom: .35rem;
}
.scat-bar {
  height: 12px;
  background: #333;
  border-radius: 99px;
  overflow: hidden;
}
.scat-bar i { display: block; height: 100%; }

.bodycam-view {
  position: relative;
  min-height: 280px;
  border-radius: .85rem;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(251,191,36,.15), transparent 50%),
    linear-gradient(180deg, #0f172a, #020617);
  color: #e2e8f0;
  padding: 1rem;
  border: 1px solid #334155;
  font-family: ui-monospace, monospace;
}
.bodycam-hud {
  font-size: .75rem;
  color: #f87171;
  font-weight: 800;
  margin-bottom: .75rem;
}
.bodycam-scene {
  font-size: 1.05rem;
  line-height: 1.5;
  margin-bottom: 1rem;
  min-height: 4.5rem;
}
.bodycam-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.bodycam-log { margin-top: .75rem; opacity: .75; }

.attractant-list { display: grid; gap: .35rem; }
.attr-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .5rem;
  align-items: center;
  padding: .45rem .6rem;
  border: 1px solid var(--border);
  border-radius: .5rem;
  background: var(--chip-bg);
  cursor: pointer;
  font-weight: 600;
  font-size: .9rem;
}
.attr-row em { font-style: normal; color: var(--accent); font-weight: 800; font-size: .78rem; }
.yard-preview {
  min-height: 140px;
  border: 1px solid var(--border);
  border-radius: .65rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--chip-bg);
  color: var(--muted);
  font-size: .85rem;
}
.yard-preview img { width: 100%; height: 180px; object-fit: cover; display: block; }

.pack-map {
  height: 360px;
  border-radius: .75rem;
  border: 1px solid var(--border);
  z-index: 1;
}
.sight-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 180px;
  overflow: auto;
  font-size: .88rem;
}
.sight-list li {
  padding: .35rem 0;
  border-bottom: 1px solid var(--border);
}

.voice-log {
  min-height: 160px;
  max-height: 280px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: .75rem;
  padding: .75rem;
  background: var(--chip-bg);
  display: grid;
  gap: .5rem;
}
.v-you, .v-bot {
  padding: .55rem .75rem;
  border-radius: .65rem;
  max-width: 92%;
  font-size: .95rem;
  line-height: 1.4;
}
.v-you {
  justify-self: end;
  background: #1d4ed8;
  color: #fff;
}
.v-bot {
  justify-self: start;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
}

.badge-canvas {
  width: min(320px, 100%);
  height: auto;
  border-radius: .75rem;
  border: 1px solid var(--border);
}

.egregore-layer {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
  background: rgba(0,0,0,.55);
  mix-blend-mode: hard-light;
}
.egregore-layer.show { opacity: 1; }
.egregore-msg {
  font-size: clamp(1.2rem, 4vw, 2rem);
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
  color: #fbbf24;
  text-shadow: 0 0 20px #f59e0b, 0 0 40px #7c3aed;
  max-width: 20ch;
  animation: egShake .2s linear 6;
}
@keyframes egShake {
  0%, 100% { transform: translate(0,0); }
  25% { transform: translate(-4px, 2px) skewX(-2deg); }
  75% { transform: translate(4px, -2px) skewX(2deg); }
}
body.egregore-glitch {
  animation: glitchHue .15s linear 8;
}
@keyframes glitchHue {
  50% { filter: hue-rotate(40deg) contrast(1.2); }
}

#nightModeBtn.active, #radioBtn.active, #tricksterBtn.active {
  background: #fbbf24 !important;
  color: #111 !important;
  border-color: #d97706 !important;
}

/* ========== REALISTIC ANATOMY ========== */
.anatomy-stage.realistic {
  background: linear-gradient(180deg, #e8e0d2 0%, #d5c9b4 100%);
  border: 1px solid var(--border);
}
body.dark-mode .anatomy-stage.realistic {
  background: linear-gradient(180deg, #1c1917 0%, #0c0a09 100%);
}
.anatomy-stage.realistic .anatomy-bg { fill: transparent; }
.diag-title { fill: #44403c; font-family: system-ui, sans-serif; }
body.dark-mode .diag-title { fill: #d6d3d1; }
.scale-stroke { stroke: #57534e; }
.scale-text { fill: #57534e; font-family: system-ui, sans-serif; }
body.dark-mode .scale-stroke { stroke: #a8a29e; }
body.dark-mode .scale-text { fill: #a8a29e; }

#coyoteFigure .anat-part {
  transition: filter 0.2s ease, opacity 0.2s ease;
}
#coyoteFigure .anat-part:hover {
  filter: brightness(1.08) drop-shadow(0 0 6px rgba(251,191,36,0.35));
}
#coyoteFigure .anat-part.is-active {
  filter: brightness(1.12) drop-shadow(0 0 10px rgba(251,191,36,0.65));
}
#coyoteFigure .anat-part.is-active path,
#coyoteFigure .anat-part.is-active ellipse {
  stroke: #d97706 !important;
  stroke-width: 2.2px;
}

.anatomy-stage.systems-on #coyoteFigure {
  opacity: 0.55;
}
.systems-layer {
  transition: opacity 0.3s ease;
}
.anatomy-stage.systems-on .systems-layer .sys-org {
  animation: organPulse 2s ease-in-out infinite;
}
@keyframes organPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}

.hotspot-num {
  width: 28px !important;
  height: 28px !important;
  margin: -14px 0 0 -14px !important;
  display: grid !important;
  place-items: center;
  font-size: 0.72rem;
  font-weight: 900;
  color: #111 !important;
  background: #fbbf24 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
  animation: none !important;
}
.hotspot-num span { line-height: 1; }
.hotspot-num.active,
.hotspot-num:hover {
  background: #fff !important;
  color: #b45309 !important;
  border-color: #f59e0b !important;
  transform: scale(1.15);
}

.anat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.35rem;
  max-height: 280px;
  overflow: auto;
}
.anat-list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.5rem;
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  font-weight: 650;
  color: var(--text);
}
.anat-list li:hover,
.anat-list li.active {
  border-color: #f59e0b;
  background: color-mix(in srgb, #fde68a 40%, var(--bg-card));
  color: #111;
}
body.dark-mode .anat-list li.active {
  background: #422006;
  color: #fde68a;
}
.anat-num {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  background: #fbbf24;
  color: #111;
  font-size: 0.7rem;
  font-weight: 900;
  flex-shrink: 0;
}
.anat-metric {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #92400e;
  background: #fef3c7;
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
  margin-bottom: 0.5rem;
}
body.dark-mode .anat-metric {
  background: #422006;
  color: #fde68a;
}
.anat-tell {
  font-size: 0.9rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.5rem;
  background: var(--chip-bg, #f5f5f4);
  border: 1px solid var(--border);
  color: var(--text);
}
.anat-detail-head { margin-bottom: 0.35rem; }

@media (max-width: 991px) {
  .hotspot-num {
    width: 32px !important;
    height: 32px !important;
    margin: -16px 0 0 -16px !important;
  }
  .anat-list { max-height: 200px; }
}

/* ========== PHOTO ANATOMY (real image) ========== */
.anatomy-stage.photo-stage {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: #1c1917;
  aspect-ratio: 16 / 9;
  max-height: none;
  padding: 0;
}
.anatomy-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  user-select: none;
  -webkit-user-drag: none;
}
.anatomy-photo-caption {
  position: absolute;
  left: 0.6rem;
  bottom: 0.5rem;
  z-index: 3;
  font-size: 0.68rem;
  font-weight: 650;
  color: #fafaf9;
  background: rgba(0,0,0,.55);
  padding: 0.2rem 0.5rem;
  border-radius: 0.35rem;
  pointer-events: none;
  backdrop-filter: blur(4px);
}
.photo-stage .hotspot-layer {
  position: absolute;
  inset: 0;
  z-index: 4;
}
.photo-stage .hotspot-num {
  width: 30px !important;
  height: 30px !important;
  margin: -15px 0 0 -15px !important;
  border-radius: 999px !important;
  background: #fbbf24 !important;
  color: #111 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 0 0 rgba(251,191,36,.55) !important;
  font-weight: 900 !important;
  animation: hotspotPulse 2.2s ease-out infinite !important;
}
.photo-stage .hotspot-num.active {
  background: #fff !important;
  color: #b45309 !important;
  border-color: #f59e0b !important;
  box-shadow: 0 0 0 4px rgba(245,158,11,.45), 0 4px 14px rgba(0,0,0,.4) !important;
  transform: scale(1.18);
  animation: none !important;
  z-index: 6;
}
@keyframes hotspotPulse {
  0% { box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 0 0 rgba(251,191,36,.5); }
  70% { box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 0 12px rgba(251,191,36,0); }
  100% { box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 0 0 rgba(251,191,36,0); }
}
.anatomy-systems-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.photo-stage.systems-on .anatomy-systems-svg { opacity: 1; }
.photo-stage.systems-on .anatomy-photo { filter: brightness(0.55) saturate(0.7); }
.anatomy-systems-svg .sys-org {
  fill: #f87171;
  fill-opacity: 0.55;
  stroke: #fecaca;
  stroke-width: 0.35;
  animation: organPulse 2s ease-in-out infinite;
}
.anatomy-systems-svg .sys-org[data-sys="lungs"] { fill: #38bdf8; fill-opacity: 0.4; }
.anatomy-systems-svg .sys-org[data-sys="stomach"] { fill: #a3e635; fill-opacity: 0.45; }
.anatomy-systems-svg .sys-org[data-sys="brain"] { fill: #c084fc; fill-opacity: 0.5; }
.anatomy-systems-svg .sys-spine {
  fill: none;
  stroke: #f8fafc;
  stroke-width: 0.7;
  stroke-opacity: 0.55;
  stroke-linecap: round;
}

/* ========== THEME FIX: light mode always readable ========== */
html {
  color-scheme: light;
}
body.dark-mode,
body.night-mode {
  color-scheme: dark;
}

/* bootstrap cards/list items respect tokens in BOTH themes */
.card,
.list-group-item,
.modal-content,
.dropdown-menu {
  background-color: var(--bg-card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
.card-body, .card-header, .card-footer {
  background-color: transparent !important;
  color: var(--text) !important;
}

/* light mode: kill any leftover pure-black skins from night/wow extras */
body:not(.dark-mode):not(.night-mode) {
  --bg: #f7f4ec;
  --bg-card: #ffffff;
  --text: #141414;
  --muted: #3d3d3d;
  --border: rgba(0, 0, 0, 0.16);
  --accent: #9a3412;
  --accent-soft: #ffedd5;
  --chip-bg: #fff7ed;
  --hero-grad: linear-gradient(135deg, #ffedd5 0%, #f7f4ec 55%, #e7e5e4 100%);
  background: var(--bg) !important;
  color: var(--text) !important;
}
body:not(.dark-mode):not(.night-mode) .hero-ult,
body:not(.dark-mode):not(.night-mode) .hero {
  background: var(--hero-grad) !important;
  color: var(--text) !important;
}
body:not(.dark-mode):not(.night-mode) .text-muted,
body:not(.dark-mode):not(.night-mode) .small.text-muted {
  color: #3d3d3d !important;
}
body:not(.dark-mode):not(.night-mode) .navbar.navbar-dark.bg-dark {
  /* keep top bar dark for brand; content area stays light */
  background-color: #1f2937 !important;
}
body:not(.dark-mode):not(.night-mode) #map {
  filter: none !important;
}
body:not(.dark-mode):not(.night-mode) .dash-tile,
body:not(.dark-mode):not(.night-mode) .kpi-card,
body:not(.dark-mode):not(.night-mode) .card-soft,
body:not(.dark-mode):not(.night-mode) .jump-btn,
body:not(.dark-mode):not(.night-mode) .exhibit-chip {
  color: var(--text);
}

/* night is an ADD-ON to dark — never alone as half-state */
body.night-mode:not(.dark-mode) {
  /* safety: if somehow night without dark, still full night tokens */
  --bg: #05060a;
  --bg-card: #0d1118;
  --text: #e8eef7;
}

/* ========== DARK MODE ACTUALLY FLIPS (override bootstrap) ========== */
html.dark-mode,
body.dark-mode {
  --bg: #0c0e12 !important;
  --bg-card: #171b22 !important;
  --text: #f3f4f6 !important;
  --muted: #c4cad4 !important;
  --border: rgba(255, 255, 255, 0.18) !important;
  --accent: #fbbf24 !important;
  --accent-soft: #422006 !important;
  --on-accent: #111827 !important;
  --chip-bg: #1f2937 !important;
  --hero-grad: linear-gradient(135deg, #1c1917 0%, #0c0e12 60%, #111827 100%) !important;
  --anatomy-bg: #14110e !important;
  --bar-fill: #fbbf24 !important;
  --bar-track: #374151 !important;
  --bs-body-bg: #0c0e12 !important;
  --bs-body-color: #f3f4f6 !important;
  --bs-secondary-color: #c4cad4 !important;
  --bs-border-color: rgba(255, 255, 255, 0.18) !important;
  background: #0c0e12 !important;
  background-color: #0c0e12 !important;
  color: #f3f4f6 !important;
  color-scheme: dark;
}
html.dark-mode body,
body.dark-mode {
  background: #0c0e12 !important;
  background-color: #0c0e12 !important;
  color: #f3f4f6 !important;
}
body.dark-mode .hero-ult,
body.dark-mode .hero {
  background: var(--hero-grad) !important;
  color: var(--text) !important;
}
body.dark-mode .text-muted,
body.dark-mode .small.text-muted,
body.dark-mode .form-text {
  color: #c4cad4 !important;
}
body.dark-mode .card,
body.dark-mode .list-group-item,
body.dark-mode .card-soft,
body.dark-mode .dash-tile,
body.dark-mode .kpi-card,
body.dark-mode .compare-card,
body.dark-mode .jump-btn,
body.dark-mode .fact-card,
body.dark-mode .hub-panel {
  background-color: #171b22 !important;
  color: #f3f4f6 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
}
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode li,
body.dark-mode label,
body.dark-mode .lead {
  color: #f3f4f6 !important;
}
body.dark-mode .btn-outline-secondary {
  color: #f3f4f6 !important;
  border-color: rgba(255,255,255,0.35) !important;
}