/*
 * Bone Wizardry — Universal Theme
 * Based on the autoimmune diseases deep-dive design language.
 * Link this from any page: <link rel="stylesheet" href="/theme.css">
 * Page-specific styles go AFTER this import.
 */

/* ── DISPLAY FONT (matches biochem/gut-flora + fixed .page-nav crumb) ── */
@font-face {
  font-family: 'Heavyweight';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  /* No local(): a wrong system match can skip the bundled Bone Wizardry cut. */
  src: url('/fonts/heavyweight.woff') format('woff');
}

/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ── PRO STATE: hide all FREE/PRO indicators sitewide for signed-in Pro users ──
   Pro state is signaled by either body.pro (subject indexes, updates) or
   html.is-pro (homepage applyProUI). Cover both. */
body.pro .free-badge,
body.pro .lock-badge,
body.pro .recent-free,
body.pro .update-free,
body.pro .bw-elite-tag,
body.pro .page-nav-elite,
html.is-pro .free-badge,
html.is-pro .lock-badge,
html.is-pro .recent-free,
html.is-pro .update-free,
html.is-pro .bw-elite-tag,
html.is-pro .page-nav-elite { display: none !important; }

/* ── INLINE ELITE TAG - bookplate seal variant from Pill Redesigns.html ── */
.bw-elite-tag {
  display: inline-flex; align-items: center; gap: 0.34rem;
  font-size: 0.62rem; font-weight: 500;
  vertical-align: middle; margin-left: 6px;
  opacity: 0.94;
  line-height: 1;
  white-space: nowrap;
}
.bw-elite-tag .et-star {
  position: relative;
  width: 1.28em; height: 1.28em; min-width: 1.28em;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  font-family: 'Heavyweight', 'Newsreader', serif;
  font-weight: 400; font-size: 0.9em; line-height: 1;
  color: var(--foil-warm); -webkit-text-fill-color: currentColor;
  background: linear-gradient(180deg, var(--elite-plate-top) 0%, var(--elite-plate-bot) 100%);
  border: 1px solid var(--foil-deep);
  box-shadow:
    inset 0 -1px 3px rgba(63,42,18,0.55),
    inset 0 1px 2px rgba(232,196,125,0.2),
    0 3px 10px -5px rgba(0,0,0,0.7);
  transform: rotate(-7deg);
  text-shadow: 0 0 6px rgba(232,196,125,0.38), 0 1px 0 rgba(0,0,0,0.75);
}
.bw-elite-tag .et-star::before {
  content: '';
  position: absolute; inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(232,196,125,0.34);
  pointer-events: none;
}
.bw-elite-tag .et-div {
  width: 1px; height: 0.86em; background: rgba(232,196,125,0.26); flex-shrink: 0;
}
.bw-elite-tag .et-word {
  font-family: 'Newsreader', 'Georgia', serif; font-style: italic; font-weight: 500;
  font-size: 1.03em; letter-spacing: 0.02em;
  background: linear-gradient(180deg, var(--foil-light) 0%, var(--foil-warm) 40%, var(--foil-mid) 75%, var(--foil-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.55));
}

/* ── iOS SAFARI GLOBAL ── */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button, a, [onclick], [role="button"], .quiz-option, .battle-tab, .opener-choice,
.elim-card, .dt-opt, .nyha-step, .chunk, .flow-choice, .villain-card, .subpage-btn {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
@supports (-webkit-touch-callout: none) {
  body { min-height: -webkit-fill-available; }
}

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap');

/* ── DESIGN TOKENS ── */
:root {
  /* Base palette */
  --bg: #020617;
  --bg-card: #12121c;
  --bg-elevated: #15151f;
  --border: #2a2a3e;
  --border-subtle: #1e1a30;
  --text: #e2e8f0;
  --text-muted: #cbd5e1;
  --text-dim: #aeb8c8;

  /* Primary accent (purple/pink) */
  --accent: #c084fc;
  --accent-dim: rgba(192, 132, 252, 0.15);
  --accent-border: rgba(192, 132, 252, 0.3);
  --purple: #a855f7;
  --pink: #ec4899;

  /* Secondary accents */
  --blue: #38bdf8;
  --orange: #f97316;
  --green: #22c55e;
  --teal: #14b8a6;

  /* Alias vars — used by subject index pages and older pages */
  --accent2: var(--purple);        /* purple alias for --accent2 */
  --muted: var(--text-muted);      /* muted text alias */
  --elevated: var(--bg-elevated);  /* elevated surface alias */

  /* Subject-specific accents (used by index pages) */
  --cardio-accent: #f43f5e;
  --neuro-accent: #818cf8;
  --biochem-accent: #a78bfa;
  --pharm-accent: #38bdf8;
  --endo-accent: #fb923c;
  --gi-accent: #4ade80;
  --renal-accent: #38bdf8;
  --resp-accent: #67e8f9;
  --heme-accent: #f87171;
  --micro-accent: #06b6d4;
  --immuno-accent: #e879f9;
  --msk-accent: #c084fc;
  --omm-accent: #c084fc;
  --derm-accent: #f472b6;
  --psych-accent: #d946ef;
  --peds-accent: #f59e0b;
  --path-accent: #ef4444;
  --biostats-accent: #94a3b8;
  --repro-accent: #f472b6;

  /* Card & layout */
  --card: #15151f;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);

  /* Transitions */
  --transition: 0.2s cubic-bezier(0.2, 0, 0, 1);
  --transition-slow: 0.4s cubic-bezier(0.2, 0, 0, 1);

  /* Gold foil — used by .page-nav-elite and .brand-pro */
  --foil-light: #fff6d0;
  --foil-warm:  #e8c47d;
  --foil-mid:   #c79850;
  --foil-deep:  #8a6230;
  --foil-shadow:#3f2a12;
  --elite-plate-top:#1a140a;
  --elite-plate-bot:#0d0903;
}

/* ── BASE ── */
body {
  font-family: 'Newsreader', sans-serif;
  background: #0a0a0f;
  color: #e0e0e8;
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── LONG MEDICAL WORD WRAP (375px-safe) ── */
.prose,
.quiz-stem,
.quiz-opt,
.quiz-explain,
.section-sub,
.med-review,
.v3-entry-title,
.v3-entry-desc,
.dd-title,
.dd-sub,
.fc-body,
.sign-a,
.dt-question,
.dt-feedback,
.challenge-vignette,
.attending,
.trap-note,
table th,
table td {
  overflow-wrap: anywhere;
  word-break: normal;
}

/* ── GPU ACCELERATION ── */
.sc-stage, .topic-card, .bg-blobs, .hero, .quiz-card {
  transform: translate3d(0,0,0);
  backface-visibility: hidden;
  will-change: transform;
}

/* ── AURORA CANVAS ── */
.bg-blobs {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* ── TOPIC CARDS v3 ── */
.topic-card {
  display: block;
  background: linear-gradient(150deg, #1f1a44 0%, #1a1638 100%);
  border: 1px solid rgba(192, 132, 252, 0.2);
  border-radius: 20px;
  padding: 24px;
  transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
  position: relative;
  overflow: hidden;
  text-decoration: none !important;
}

.topic-card:hover {
  border-color: rgba(192, 132, 252, 0.5);
  box-shadow: 0 12px 40px -12px rgba(192, 132, 252, 0.3);
}

.topic-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 4px; height: 100%;
  background: linear-gradient(to bottom, var(--accent), var(--purple));
  opacity: 0;
  transition: opacity 0.2s;
}

.topic-card:hover::before { opacity: 1; }

a { color: #60a5fa; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── FORM ELEMENT DEFAULTS (prevent black-on-black) ──
   Browser defaults render <input>, <textarea>, <select> as black text on
   white. On the BW dark theme that flashes white on focus and reads as
   "broken." Set sensible defaults that page-local styles can override. */
input, textarea, select, button {
  color: #e2e8f0;
  font-family: inherit;
  font-size: inherit;
}
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="search"], input[type="tel"],
input[type="url"], textarea, select {
  background: #15151f;
  border: 1px solid #2a2a3e;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 16px; /* iOS 16px floor — prevents focus zoom */
}
input::placeholder, textarea::placeholder { color: #aeb8c8; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #c084fc;
  box-shadow: 0 0 0 3px rgba(192,132,252,0.18);
}
select option { color: #e2e8f0; background: #15151f; }

/* SVG <text> defaults to fill:black per spec → invisible on dark theme.
   Inherit the current text color unless the SVG explicitly sets fill. */
svg text:not([fill]):not(.no-inherit-fill) { fill: currentColor; }

/* SVG label legibility halo — a dark outline painted BEHIND diagram text so
   labels stay readable when they sit over busy shapes, lines, or fills.
   paint-order:stroke draws the stroke first, then the fill repaints crisp on
   top (the visible halo is only the outer half of the stroke). Width is in em
   so it scales with each label's own font-size and never over-thickens text in
   a small viewBox. Opt a specific label out with class="no-halo". (2026-06-11) */
svg text:not(.no-halo), svg tspan:not(.no-halo) {
  paint-order: stroke;
  stroke: #0a0a14;
  stroke-width: 0.14em;
  stroke-linejoin: round;
  stroke-linecap: round;
}
svg text.no-halo, svg tspan.no-halo { stroke: none; }

/* ── TYPOGRAPHY ── */
h1, h2, h3, .section-title { font-family: 'Heavyweight', 'Space Grotesk', sans-serif; }

/* ── BACK LINK (LEGACY) ── */
/* Deprecated 2026-05-12. New pages use .page-nav breadcrumb below. */
.back-link {
  position: fixed; top: 16px; left: 16px; z-index: 100;
  color: #888; text-decoration: none; font-size: 0.85rem;
  transition: color 0.2s;
}
.back-link:hover { color: #fff; }

/* ── PAGE NAV (canonical breadcrumb, 2026-05-12) ──
   Usage:
     <body class="has-page-nav">
     <nav class="page-nav">
       <a href="/" class="page-nav-brand">
         <img src="/bw-logo-transparent-128.png" alt="Bone Wizardry" width="30" height="30" loading="eager">
         <span>Bone Wizardry</span>
       </a>
       <span class="page-nav-sep" aria-hidden="true"></span>
       <div class="page-nav-crumb">
         <a href="/{subject}/">{Subject}</a>
         <span class="crumb-sep" aria-hidden="true"></span>
         <span class="crumb-current">{Topic}</span>
       </div>
     </nav>
   The .has-page-nav body class reserves 68px top padding so the fixed bar
   never overlaps content. Modern browsers also handle this via :has(). */
body.has-page-nav { padding-top: 68px; }
body:has(.page-nav) { padding-top: 68px; }

.page-nav {
  position: fixed; top: 0; left: 0; right: 0; height: 64px;
  z-index: 200;
  display: flex; align-items: center; gap: 14px;
  padding: 0 20px;
  background: linear-gradient(180deg, rgba(10,10,15,0.94) 0%, rgba(10,10,15,0.82) 100%);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(192, 132, 252, 0.12);
  box-shadow: 0 1px 0 rgba(192,132,252,0.04), 0 8px 24px -16px rgba(0,0,0,0.6);
}
.page-nav-brand {
  display: flex; align-items: center; gap: 11px;
  font-family: 'Heavyweight', 'Space Grotesk', sans-serif;
  font-weight: 400; font-size: 0.92rem; color: #c084fc;
  letter-spacing: 0.22em; text-transform: uppercase;
  min-height: 44px; flex-shrink: 0;
  transition: color 0.25s, text-shadow 0.25s;
  text-shadow: 0 0 18px rgba(192,132,252,0.25);
}
.page-nav-brand:hover { color: #e9d5ff; text-shadow: 0 0 24px rgba(192,132,252,0.55); text-decoration: none; }
.page-nav-brand img {
  width: 30px; height: 30px; flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(192,132,252,0.35));
}
.page-nav-brand span { display: inline; }
.page-nav-sep {
  display: inline-block; width: 1px; height: 22px;
  background: linear-gradient(180deg, transparent 0%, rgba(192,132,252,0.55) 50%, transparent 100%);
  flex-shrink: 0;
}
.page-nav-crumb {
  display: flex; align-items: center; gap: 10px;
  font-family: 'Heavyweight', 'Space Grotesk', sans-serif;
  font-weight: 400; font-size: 0.86rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  min-height: 44px; overflow: hidden;
}
.page-nav-crumb a {
  color: #cbd5e1; transition: color 0.25s, text-shadow 0.25s;
  white-space: nowrap; padding: 10px 2px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.page-nav-crumb a:hover { color: #c084fc; text-shadow: 0 0 14px rgba(192,132,252,0.5); text-decoration: none; }
.crumb-sep {
  display: inline-block; width: 1px; height: 16px;
  background: linear-gradient(180deg, transparent, rgba(192,132,252,0.38), transparent);
  flex-shrink: 0;
}
.crumb-current {
  color: #f5e8ff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 6px 12px;
  border: 1px solid rgba(192,132,252,0.28);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(192,132,252,0.12) 0%, rgba(168,85,247,0.06) 100%);
  text-shadow: 0 0 16px rgba(192,132,252,0.45);
  min-width: 0; /* allow ellipsis inside flex */
}
/* Tablets — keep the full desktop layout, just tighten gaps + sizing
   so logo + brand + separator + subject + separator + topic chip
   all sit on ONE LINE. Topic chip truncates with ellipsis if needed. */
@media (max-width: 760px) {
  body.has-page-nav { padding-top: 56px; }
  body:has(.page-nav) { padding-top: 56px; }
  .page-nav { height: 52px; padding: 0 14px; gap: 11px; }
  .page-nav-brand { font-size: 0.72rem; gap: 9px; letter-spacing: 0.2em; }
  .page-nav-brand img { width: 26px; height: 26px; }
  .page-nav-sep { height: 20px; }
  .page-nav-crumb { font-size: 0.68rem; gap: 9px; letter-spacing: 0.16em; flex: 1; min-width: 0; }
  .page-nav-crumb a { padding: 6px 0; flex-shrink: 0; }
  .crumb-sep { height: 14px; }
  .crumb-current {
    padding: 5px 11px; font-size: 0.64rem;
    flex: 1; min-width: 0; max-width: 100%;
  }
}
/* Phones — drop the brand wordmark (logo still identifies us), keep
   the full crumb intact: subject pill + separator + current-topic chip.
   Matches the desktop visual language at small widths. */
@media (max-width: 480px) {
  .page-nav { padding: 0 12px; gap: 9px; }
  .page-nav-brand { gap: 0; }
  .page-nav-brand span { display: none; }
  .page-nav-brand img { width: 28px; height: 28px; }
  .page-nav-sep { display: inline-block; height: 22px; margin: 0 1px; }
  .page-nav-crumb { gap: 8px; font-size: 0.66rem; letter-spacing: 0.15em; }
  .page-nav-crumb a { padding: 5px 0; }
  .crumb-current { font-size: 0.62rem; padding: 5px 11px; }
}
/* Tiny phones — keep the separator + chip styling, just trim text more. */
@media (max-width: 360px) {
  .page-nav { padding: 0 10px; gap: 7px; }
  .page-nav-crumb { gap: 6px; font-size: 0.62rem; letter-spacing: 0.13em; }
  .crumb-current { font-size: 0.58rem; padding: 4px 10px; }
}

/* ── PAGE-NAV ELITE BADGE (top-right on pro pages) ── */
.page-nav-elite {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 0.36rem;
  flex-shrink: 0;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  opacity: 0.92;
  line-height: 1;
}
.page-nav-elite .pne-star {
  position: relative;
  width: 1.35em; height: 1.35em; min-width: 1.35em;
  display: inline-grid; place-items: center;
  border-radius: 999px;
  font-family: 'Heavyweight', 'Newsreader', serif; font-weight: 400;
  font-size: 0.9em; line-height: 1;
  color: var(--foil-warm); -webkit-text-fill-color: currentColor;
  background: linear-gradient(180deg, var(--elite-plate-top) 0%, var(--elite-plate-bot) 100%);
  border: 1px solid var(--foil-deep);
  box-shadow:
    inset 0 -1px 4px rgba(63,42,18,0.55),
    inset 0 1px 2px rgba(232,196,125,0.22),
    0 3px 11px -5px rgba(0,0,0,0.72);
  transform: rotate(-7deg);
  text-shadow: 0 0 6px rgba(232,196,125,0.38), 0 1px 0 rgba(0,0,0,0.75);
}
.page-nav-elite .pne-star::before {
  content: '';
  position: absolute; inset: 3px;
  border-radius: inherit;
  border: 1px solid rgba(232,196,125,0.34);
  pointer-events: none;
}
.page-nav-elite .pne-div {
  width: 1px; height: 0.9em;
  background: rgba(232,196,125,0.28);
  flex-shrink: 0;
}
.page-nav-elite .pne-word {
  font-family: 'Newsreader', 'Georgia', serif; font-style: italic; font-weight: 500;
  font-size: 1em; letter-spacing: 0.04em;
  background: linear-gradient(180deg,
    var(--foil-light) 0%, var(--foil-warm) 40%,
    var(--foil-mid) 75%, var(--foil-deep) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,0.5));
}
@media (max-width: 480px) {
  .page-nav-elite { font-size: 0.62rem; gap: 0.3rem; }
}

/* ── HERO (full-screen opener) ── */
.hero {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 20px; text-align: center;
  background: radial-gradient(ellipse at center, #1a1028 0%, #0a0a0f 70%);
}

.hero h1 {
  font-family: 'Heavyweight', 'Space Grotesk', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 400;
  background: linear-gradient(135deg, #ff6b9d, #c084fc, #60a5fa);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 16px;
}

.hero .subtitle {
  color: #a0a0b8; font-size: 1.1rem;
  max-width: 600px; margin-bottom: 40px; line-height: 1.6;
}

/* ── OPENER (clinical vignette) ── */
.opener {
  background: #15151f;
  border: 1px solid #2a2a3e;
  border-radius: 16px;
  padding: 32px;
  max-width: 600px; width: 100%;
  text-align: left;
}

.opener .patient {
  font-size: 1rem; line-height: 1.7; color: #c8c8d8; margin-bottom: 24px;
}
.opener .patient strong { color: #ff6b9d; }

.opener-choices {
  display: flex; flex-direction: column; gap: 10px;
}

.opener-choice {
  padding: 14px 18px;
  background: #1a1a2e; border: 1px solid #2a2a3e; border-radius: 10px;
  color: #c8c8d8; cursor: pointer; transition: all 0.2s; font-size: 0.95rem;
}
.opener-choice:hover { border-color: #c084fc; background: #1e1a30; }
.opener-choice.correct { border-color: #4ade80; background: #0f2a1a; color: #4ade80; }
.opener-choice.wrong { border-color: #f87171; background: #2a0f0f; color: #f87171; }

.opener-explanation {
  margin-top: 16px; padding: 16px;
  background: #1a1a2e; border-radius: 10px;
  font-size: 0.9rem; line-height: 1.6;
  display: none; color: #b8b8c8;
}
.opener-explanation.show { display: block; }
.opener-explanation .key-fact { color: #c084fc; font-weight: 600; }

/* ── SECTIONS ── */
.section {
  max-width: 900px; margin: 0 auto; padding: 60px 20px;
}
.section-title {
  font-family: 'Heavyweight', 'Space Grotesk', sans-serif;
  font-size: 1.8rem; font-weight: 400; margin-bottom: 8px;
}
.section-desc {
  color: #888; margin-bottom: 32px; font-size: 0.95rem;
}

/* ── CARDS / PANELS ── */
.card-panel {
  background: #12121c;
  border: 1px solid #2a2a3e;
  border-radius: 16px;
  padding: 28px;
}

.card-field {
  background: #1a1a28; border-radius: 10px; padding: 14px;
}
.card-field .label {
  font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.08em; color: #666;
  margin-bottom: 6px; font-weight: 600;
}
.card-field .value { font-size: 0.95rem; line-height: 1.5; }

.card-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } }

/* ── BATTLE TABS (disease/topic switcher) ── */
.battle-nav {
  display: flex; gap: 8px; margin-bottom: 14px;
  flex-wrap: wrap; justify-content: center;
}
.battle-tab {
  padding: 10px 18px; border-radius: 20px;
  border: 1px solid #333; background: #15151f;
  color: #999; cursor: pointer; transition: all 0.3s;
  font-size: 0.85rem; font-weight: 600;
  -webkit-user-select: none; user-select: none;
}
.battle-tab.active {
  border-color: var(--accent, #c084fc);
  background: #1e1a30;
  background: color-mix(in srgb, var(--accent, #c084fc) 15%, #15151f);
  color: var(--accent, #c084fc);
}

.battle-card {
  display: none; background: #12121c;
  border: 1px solid #2a2a3e; border-radius: 16px;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}
.battle-card.active { display: block; }
/* Panel-pattern pages toggle .active on a .battle-panel wrapper (not the card).
   Without this, the card stays display:none and the open panel renders empty,
   making battle tabs look dead. Card-level pages have no .battle-panel ancestor,
   so they are unaffected. */
.battle-panel .battle-card { display: block; }

/* ── QUIZ OPTIONS ── */
.quiz-option {
  padding: 14px 18px;
  background: #1a1a2e; border: 1px solid #2a2a3e; border-radius: 10px;
  color: #c8c8d8; cursor: pointer; transition: all 0.2s; font-size: 0.9rem;
  display: block; width: 100%; text-align: left;
  font-family: inherit; margin-bottom: 8px;
}
.quiz-option:hover { border-color: #c084fc; background: #1e1a30; }
.quiz-option.correct { border-color: #4ade80; background: #0f2a1a; color: #4ade80; pointer-events: none; }
.quiz-option.wrong { border-color: #f87171; background: #2a0f0f; color: #f87171; pointer-events: none; }
.quiz-option.disabled { pointer-events: none; opacity: 0.5; }

/* ── FEEDBACK ── */
.feedback {
  margin-top: 16px; padding: 16px; border-radius: 10px;
  font-size: 0.9rem; line-height: 1.6; display: none;
}
.feedback.show { display: block; }
.feedback-correct { background: #0f2a1a; border: 1px solid #22c55e33; color: #bbf7d0; }
.feedback-wrong { background: #2a0f0f; border: 1px solid #ef444433; color: #fecaca; }

/* ── KEY FACTS & BOARD TRAPS ── */
.key-fact {
  background: #1a1a28; border-left: 3px solid #c084fc;
  padding: 14px 18px; margin: 16px 0; border-radius: 0 10px 10px 0;
  font-size: 0.9rem; line-height: 1.6;
}

.board-trap {
  background: #1a1418; border-left: 3px solid #f87171;
  padding: 14px 18px; margin: 16px 0; border-radius: 0 10px 10px 0;
  font-size: 0.9rem; line-height: 1.6; color: #fecaca;
}
.board-trap strong { color: #f87171; }

/* ── HIGHLIGHTS ── */
.hl-yellow { color: #fde047; font-weight: 700; }
.hl-red { color: #f87171; font-weight: 700; }
.hl-green { color: #86efac; font-weight: 700; }
.hl-blue { color: #93c5fd; font-weight: 700; }
.hl-purple { color: #c084fc; font-weight: 700; }
.hl-pink { color: #ff6b9d; font-weight: 700; }

/* ── TOOLTIPS ── */
.tip {
  position: relative; text-decoration: underline dotted #60a5fa;
  cursor: help; color: #93c5fd;
}
.tip .tip-text {
  display: none; position: absolute; bottom: 125%; left: 50%;
  transform: translateX(-50%);
  background: #1a1a2e; color: #c8c8d8;
  padding: 10px 14px; border-radius: 10px;
  font-size: 0.8rem; width: max-content; max-width: 280px;
  z-index: 9999; border: 1px solid #2a2a3e;
  line-height: 1.5; box-shadow: 0 8px 24px #0006;
}
.tip .tip-text::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-top-color: #2a2a3e;
}
.tip.active .tip-text { display: block; }
.tip.active .tip-text[style*="fixed"] { position: fixed; }
.tip.active .tip-text[style*="fixed"]::after { display: none; }
@media (max-width: 600px) {
  .tip.active .tip-text {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    transform: none; max-width: none; width: 100%;
    border-radius: 16px 16px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    font-size: 0.85rem; z-index: 9998;
    box-shadow: 0 -8px 40px #000a;
    animation: tipSlideUp 0.2s ease;
  }
  .tip.active .tip-text::after { display: none; }
  .tip .tip-text { left: auto; right: 0; transform: none; max-width: 240px; }
  .tip .tip-text::after { left: auto; right: 1rem; }
}
@keyframes tipSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* ── LABELS / TAGS ── */
.tag {
  font-family: 'Newsreader', Georgia, serif;
  display: inline-block; font-size: 0.7rem; font-weight: 700;
  padding: 3px 10px; border-radius: 20px;
}

/* ── CANONICAL CLASSIFICATION PILLS - from Pill Redesigns.html ── */
.bw-pill-strip {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  max-width: 100%;
}
.bw-pill-lead {
  display: inline-flex; align-items: center; gap: 7px;
  margin-right: 12px; padding: 6px 12px;
  border-radius: 6px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #d8b4fe;
  background: rgba(168,85,247,0.08);
  box-shadow: inset 0 0 0 1px rgba(168,85,247,0.33);
}
.bw-pill-lead::before {
  content: '';
  width: 7px; height: 7px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
}
.bw-pill-lead.gp,
.bw-pill-lead.gram-positive { color: #fda4af; background: rgba(244,63,94,0.08); box-shadow: inset 0 0 0 1px rgba(244,63,94,0.33); }
.bw-pill-lead.gn,
.bw-pill-lead.gram-negative { color: #7dd3fc; background: rgba(56,189,248,0.08); box-shadow: inset 0 0 0 1px rgba(56,189,248,0.33); }
.bw-pill-lead.af,
.bw-pill-lead.acid-fast { color: #fb923c; background: rgba(251,146,60,0.08); box-shadow: inset 0 0 0 1px rgba(251,146,60,0.33); }
.bw-pill-attr {
  display: inline-flex; align-items: center;
  padding: 4px 2px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.82rem; font-weight: 600;
  color: #cbd5e1; letter-spacing: 0.01em;
}
.bw-pill-attr.shape,
.bw-pill-attr.morph { color: #e2e8f0; font-weight: 700; }
.bw-pill-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: #475569; margin: 0 8px; flex: 0 0 auto;
}

/* ── SILHOUETTE BULLETS (authored page-content lists; NO glowing dots) ── */
.bw-silhouette-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.bw-silhouette-list > * { position: relative; padding-left: 1.35rem; }
.bw-silhouette-list > *::before {
  content: ''; position: absolute; left: 0; top: 0.42em;
  width: 8px; height: 8px;
  background: var(--sil-color, #c4b5fd);
  -webkit-mask: url(/bw-avatar.svg) center / contain no-repeat;
  mask: url(/bw-avatar.svg) center / contain no-repeat;
}
.bw-silhouette-bullet {
  display: inline-block; width: 8px; height: 8px; vertical-align: -1px; flex: 0 0 auto;
  background: var(--sil-color, #c4b5fd);
  -webkit-mask: url(/bw-avatar.svg) center / contain no-repeat;
  mask: url(/bw-avatar.svg) center / contain no-repeat;
}

.bw-taxonomy-path,
.bw-class-path {
  display: inline-flex; align-items: stretch;
  max-width: 100%;
  border-radius: 999px;
  background: #0f0f1a;
  border: 1px solid #2a2640;
  overflow-x: auto; overflow-y: hidden;
  padding: 2px;
  vertical-align: middle;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 1px 0 rgba(0,0,0,0.55);
  scrollbar-width: none;
}
.bw-taxonomy-path::-webkit-scrollbar,
.bw-class-path::-webkit-scrollbar { display: none; }
.bw-taxonomy-path .tax-step,
.bw-class-path .tax-step {
  display: inline-flex; align-items: center; gap: 8px;
  flex: 0 0 auto;
  padding: 6px 14px;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: #cbd5e1; white-space: nowrap;
}
.bw-taxonomy-path .tax-step + .tax-step::before,
.bw-class-path .tax-step + .tax-step::before {
  content: '>';
  color: #475569; font-weight: 400; font-size: 0.8rem;
  margin-right: 8px; margin-left: -4px;
}
.bw-taxonomy-path .tax-step.root,
.bw-class-path .tax-step.root {
  border-radius: 999px;
  padding-left: 16px;
  background: rgba(168,85,247,0.08);
  color: #d8b4fe;
}
.bw-taxonomy-path .tax-step.root::after,
.bw-class-path .tax-step.root::after {
  content: '';
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 8px currentColor;
  margin-left: 4px; margin-right: -2px;
}
.bw-taxonomy-path .tax-step.root.gp,
.bw-taxonomy-path .tax-step.root.gram-positive,
.bw-class-path .tax-step.root.gp,
.bw-class-path .tax-step.root.gram-positive { color: #fda4af; background: rgba(244,63,94,0.08); }
.bw-taxonomy-path .tax-step.root.gn,
.bw-taxonomy-path .tax-step.root.gram-negative,
.bw-class-path .tax-step.root.gn,
.bw-class-path .tax-step.root.gram-negative { color: #7dd3fc; background: rgba(56,189,248,0.08); }
.bw-taxonomy-path .tax-step.root.af,
.bw-taxonomy-path .tax-step.root.acid-fast,
.bw-class-path .tax-step.root.af,
.bw-class-path .tax-step.root.acid-fast { color: #fb923c; background: rgba(251,146,60,0.08); }
.bw-taxonomy-path .tax-step.shape,
.bw-taxonomy-path .tax-step.morph,
.bw-class-path .tax-step.shape,
.bw-class-path .tax-step.morph { color: #e2e8f0; }
.bw-taxonomy-path .tax-step.attr,
.bw-taxonomy-path .tax-step.feature,
.bw-class-path .tax-step.attr,
.bw-class-path .tax-step.feature { color: #fb923c; }

.bw-free-tag {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 0.15rem 0.58rem 0.18rem;
  font-family: 'Newsreader', Georgia, serif;
  font-size: 0.86rem; font-style: italic; font-weight: 500;
  color: #e9d5ff; letter-spacing: 0.005em;
  line-height: 1;
}
.bw-free-tag::before,
.bw-free-tag::after {
  content: '';
  position: absolute; top: 0; bottom: 0;
  width: 6px;
  border: 1px solid rgba(233,213,255,0.42);
}
.bw-free-tag::before { left: 0; border-right: 0; }
.bw-free-tag::after { right: 0; border-left: 0; }

@media (max-width: 600px) {
  .bw-taxonomy-path,
  .bw-class-path { width: 100%; border-radius: 12px; }
  .bw-taxonomy-path .tax-step,
  .bw-class-path .tax-step { padding: 6px 10px; font-size: 0.6rem; letter-spacing: 0.08em; }
  .bw-pill-lead { margin-right: 9px; font-size: 0.6rem; padding: 6px 10px; }
  .bw-pill-attr { font-size: 0.78rem; }
}

/* ── ANIMATION ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── FOOTER ── */
.footer {
  text-align: center; color: #444; font-size: 0.75rem;
  padding: 40px 20px; letter-spacing: 0.05em;
}

/* ── NAV BREADCRUMB ── */
.nav {
  padding: 1rem; display: flex; gap: 0.75rem;
  align-items: center; font-size: 0.8rem;
  border-bottom: 1px solid #1a1a2e; flex-wrap: wrap;
}
.nav a { color: #888; }
.nav a:hover { color: #e0e0e8; text-decoration: none; }
.nav .sep { color: #333; }

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .hero h1 { font-size: 1.8rem; }
  .opener { padding: 20px; }
  .section { padding: 40px 16px; }
  .section-title { font-size: 1.5rem; }
  .battle-card { padding: 20px; }
  .card-grid { grid-template-columns: 1fr; }
  .quiz-option { font-size: 0.85rem; padding: 14px 16px; min-height: 44px; }
  .tip .tip-text { font-size: 0.8rem; max-width: 240px; }
  .opener-choice { min-height: 44px; font-size: 0.9rem; }
  .key-fact { font-size: 0.85rem; }
  .board-trap { font-size: 0.85rem; }
  .back-link { font-size: 0.875rem; top: 10px; left: 12px; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 12px 12px; min-height: 44px; display: inline-flex; align-items: center; }
  .subpage-section-label { display: none !important; font-size: 0.8125rem; }

  .page-section { padding: 1.1rem 1rem 1.15rem; padding-bottom: 5rem; }
  .subpage-counter { display: none; }
  .subpage-nav {
    margin-top: 1.25rem; padding-top: 0.75rem;
    position: sticky; bottom: 0; z-index: 50;
    background: #0a0a0f;
    padding-bottom: calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid rgba(255,255,255,0.06);
  }
  .card-panel { padding: 20px 16px; }
  .battle-card { padding: 20px 16px; }
  .card-field { padding: 12px; }
  .feedback { font-size: 0.85rem; padding: 14px; }
  .content-block, .teach-card { font-size: 0.9rem; line-height: 1.75; }

  .lightbox-close, .lb-close, .close-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .signin-float { min-height: 44px; min-width: 44px; padding: 12px 16px; }
  .nav-btn, .subpage-btn, .nephron-btn, .enzyme-viz-btn, .screen-tab, .pattern-tab, .scenario-btn, .organ-btn, .panel-btn, .cascade-btn, .reset-btn, .step-opt, .category-btn, .level-tab, .tremor-btn, .hook, .drag-chip, .subject-btn, .level-btn, .control-btn { min-height: 44px; padding: 10px 14px; }
  .subpage-dot { min-width: 28px; min-height: 28px; padding: 8px; position: relative; }
  .subpage-dot::after { content: ''; position: absolute; inset: -8px; }

  /* Inline tooltip triggers: keep inline layout but extend tap area via pseudo-element */
  .tip, .mem-hook { position: relative; padding: 2px 4px; }
  .tip::before, .mem-hook::before {
    content: ''; position: absolute; inset: -10px -4px; z-index: 1;
  }

  /* Mobile table stack: rows become cards, columns stack vertically.
     !important needed to override page-level inline .mini-table / .compare-table etc. */
  table thead, table th { display: none !important; }
  table tr:first-child:has(th) { display: none !important; padding: 0 !important; margin: 0 !important; border: none !important; }
  table, table tbody, table tr, table td {
    display: block !important; width: 100% !important;
  }
  table { border-collapse: separate !important; border-spacing: 0 !important; }
  table tr {
    padding: 0.75rem !important; margin-bottom: 0.75rem !important; border-radius: 10px !important;
    background: #15151f !important; border: 1px solid #1e293b !important;
  }
  table td {
    padding: 0.2rem 0 !important; border-bottom: none !important; font-size: 0.85rem !important;
  }
  table td:first-child { color: #a78bfa !important; font-weight: 700 !important; margin-bottom: 0.2rem; }
  table td:last-child { font-size: 0.8rem !important; color: #cbd5e1 !important; margin-top: 0.15rem; }
  .cs-label { font-size: 0.75rem; }
  .cs-subj { font-size: 0.65rem; }
  .hero-sub { font-size: 0.8125rem; }
  .villain-tagline { font-size: 0.8125rem; }
  .villain-facts li { font-size: 0.8125rem; }
  .villain-hint { font-size: 0.8125rem; }
  .dt-node { font-size: 0.8125rem; }
  .dt-leaf { font-size: 0.8125rem; min-height: 44px; }
  .dt-opt { font-size: 0.875rem; min-height: 44px; padding: 0.8rem 1rem; }
  .dt-terminal { font-size: 0.8125rem; }
  .quiz-num, .quiz-counter { font-size: 0.8125rem; }
  .reset-btn { font-size: 0.875rem; }
  .card-photo-label { font-size: 0.875rem; }
  .battle-tab { min-height: 44px; }
  .match-option { min-height: 44px; padding: 0.75rem 1rem; }
  .match-antibody { min-height: 44px; }

  /* Systemic mobile fixes: strip arrows, photo strip overflow, lightbox close, small text */
  .strip-arrow, .anat-arrow, .strip-btn { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .card-photo-strip, .photo-strip, .photo-strip-row { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .card-photo-strip img, .photo-strip img { max-width: none; height: auto; }
  .hero-eyebrow, [class*="eyebrow"] { font-size: max(0.8125rem, 13px) !important; }
  .section-label, .subpage-section-label { font-size: max(0.8125rem, 13px) !important; }
  .photo-strip-label, .card-photo-label { font-size: max(0.8125rem, 13px) !important; }
  .crumb-current { font-size: max(0.75rem, 12px) !important; }
  .wt-badge { font-size: max(0.75rem, 12px) !important; }
  .reveal-tag, .reveal-field-label { font-size: max(0.75rem, 12px) !important; }
}

@media (max-width: 480px) {
  .hero { min-height: auto; padding: 56px 16px 40px; }
  .hero .subtitle { font-size: 0.95rem; margin-bottom: 28px; }
  .section { padding: 32px 16px; }

  /* Battle tabs + any tab row: horizontal scroll instead of wrapping */
  .battle-nav, .pv-tabs, .scolio-tabs, .pv-tabs-wrap {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .battle-nav::-webkit-scrollbar, .pv-tabs::-webkit-scrollbar, .scolio-tabs::-webkit-scrollbar, .pv-tabs-wrap::-webkit-scrollbar { display: none; }
  .battle-tab, .pv-tab, .scolio-tab { flex-shrink: 0; }

  /* Antibody match: stack vertically on small screens */
  .match-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .match-antibody { width: 100%; min-width: 0; text-align: left; }
  .match-arrow { transform: rotate(90deg); align-self: center; }
  .match-options { width: 100%; flex-wrap: wrap; }
}

/* ── PAGE SECTIONS ── */
.page-section { display: none; padding: 1.35rem 1.25rem 1.25rem; }
.page-section.active { display: block; }

/* ── SUBPAGE NAV (chunk-to-chunk prev/next) ── */
.subpage-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: rgba(255,255,255,0.06); z-index: 200;
}
.subpage-progress-bar {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, #c084fc, #60a5fa);
  transition: width 0.4s ease;
}
.subpage-section-label {
  display: none !important;
}
.subpage-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 1rem; padding-top: 0.65rem;
  border-top: 1px solid rgba(255,255,255,0.06);
  gap: 0.75rem;
}
.subpage-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.6rem 1.1rem; border-radius: 0.6rem; border: 1px solid #333;
  background: rgba(255,255,255,0.04); color: #888;
  font-size: 0.78rem; font-weight: 600; font-family: inherit;
  cursor: pointer; min-height: 44px;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.subpage-btn:hover { border-color: #c084fc; color: #c084fc; background: rgba(192,132,252,0.06); }
.subpage-btn.sp-prev::before,
.subpage-btn.sp-next::after {
  content: '';
  width: 1.15rem;
  height: 0.72rem;
  display: inline-block;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.95), rgba(192,132,252,0.95) 58%, rgba(96,165,250,0.9));
  clip-path: polygon(0 50%, 38% 0, 38% 28%, 100% 28%, 100% 72%, 38% 72%, 38% 100%);
  filter:
    drop-shadow(0 0 4px rgba(192,132,252,0.55))
    drop-shadow(0 0 10px rgba(96,165,250,0.22));
  transform-origin: center;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.subpage-btn.sp-next::after { transform: scaleX(-1); }
.subpage-btn.sp-prev:hover::before {
  transform: translateX(-2px) scale(1.08);
  filter:
    drop-shadow(0 0 5px rgba(192,132,252,0.75))
    drop-shadow(0 0 14px rgba(96,165,250,0.3));
}
.subpage-btn.sp-next:hover::after {
  transform: translateX(2px) scaleX(-1) scale(1.08);
  filter:
    drop-shadow(0 0 5px rgba(192,132,252,0.75))
    drop-shadow(0 0 14px rgba(96,165,250,0.3));
}
.subpage-counter { display: none; }
.subpage-btn.sp-at-edge { opacity: 0.3; cursor: not-allowed; }

/* ── iOS SAFE AREA ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .footer { padding-bottom: calc(40px + env(safe-area-inset-bottom)); }
  .subpage-nav { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
}

/* ── SCROLL PROGRESS ── */
.scroll-progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, #c084fc, #60a5fa);
  z-index: 9999; pointer-events: none;
  transition: width 0.1s linear;
}

/* ── CONTINUE STUDYING ── */
.continue-studying {
  max-width: 900px; margin: 2.5rem auto 0; padding: 2rem 20px 0;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.cs-label {
  font-family: 'Heavyweight', 'Space Grotesk', sans-serif;
  font-size: 0.7rem; font-weight: 400; color: #888;
  letter-spacing: 0.25em; text-transform: uppercase; margin-bottom: 1rem;
}
.cs-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px; margin-bottom: 28px;
}
.cs-card {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px 16px; border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.06);
  background: #12121c; /* fallback */
  background: linear-gradient(160deg, #14141f 0%, #10101a 100%);
  text-decoration: none; position: relative; overflow: hidden;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-card::after {
  content: '\2192'; position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%); color: #444; font-size: 1rem;
  transition: color 0.25s, transform 0.25s;
}
.cs-card:hover {
  border-color: rgba(192,132,252,0.35);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(192,132,252,0.08);
  text-decoration: none;
}
.cs-card:hover::after { color: #c084fc; transform: translateY(-50%) translateX(3px); }
.cs-subj {
  font-family: 'Heavyweight', 'Space Grotesk', sans-serif;
  font-size: 0.6rem; font-weight: 400; letter-spacing: 0.12em;
  color: #c084fc; text-transform: uppercase;
}
.cs-title { font-size: 0.9rem; font-weight: 600; color: #e0e0e8; padding-right: 1.5rem; }
.cs-cross { border-color: rgba(96,165,250,0.12); }
.cs-cross .cs-subj { color: #60a5fa; }
.cs-cross:hover { border-color: rgba(96,165,250,0.35); box-shadow: 0 6px 24px rgba(96,165,250,0.08); }
.cs-cross:hover::after { color: #60a5fa; }
@media (max-width: 600px) {
  .cs-grid { grid-template-columns: 1fr; }
}

/* ── OVERSCROLL ── */
.photo-lightbox, .search-overlay { overscroll-behavior: contain; }

/* ── TOPNAV BRAND LOGO ── */
.topnav-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.topnav-brand:hover { text-decoration: none; }
.topnav-logo {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 1px 4px rgba(124, 58, 237, 0.45));
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  image-rendering: -webkit-optimize-contrast;
}
.topnav-brand:hover .topnav-logo { transform: rotate(-6deg) scale(1.05); }
@media (max-width: 600px) {
  .topnav-logo { width: 24px; height: 24px; }
  .topnav-brand { gap: 8px; }
}

/* ── FOOTER BRAND LOGO ── */
.footer-logo {
  width: 56px;
  height: 56px;
  display: block;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 10px rgba(124, 58, 237, 0.4));
  image-rendering: -webkit-optimize-contrast;
}

/* ── ANIMATED BLOB BACKGROUND (subject index pages) ──
   Usage: <div class="bg-blobs"><div class="blob blob-1"></div>...</div>
   Override size/color per page for accent-matched blobs. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  will-change: transform;
}
.blob-1 {
  width: 600px; height: 600px;
  top: -150px; left: -150px;
  background: radial-gradient(circle, rgba(168,85,247,0.45) 0%, transparent 70%);
  animation: bdrift1 22s ease-in-out infinite;
}
.blob-2 {
  width: 500px; height: 500px;
  bottom: -100px; right: -100px;
  background: radial-gradient(circle, rgba(236,72,153,0.35) 0%, transparent 70%);
  animation: bdrift2 28s ease-in-out infinite;
}
.blob-3 {
  width: 400px; height: 400px;
  top: 40%; left: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.25) 0%, transparent 70%);
  animation: bdrift3 18s ease-in-out infinite;
}
@keyframes bdrift1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(160px, 100px) scale(1.1); }
  66% { transform: translate(-60px, 180px) scale(0.9); }
}
@keyframes bdrift2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40% { transform: translate(-180px, -120px) scale(1.15); }
  70% { transform: translate(-40px, -240px) scale(0.88); }
}
@keyframes bdrift3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  30% { transform: translate(-140px, 80px) scale(1.08); }
  60% { transform: translate(100px, -160px) scale(0.92); }
}
@media (max-width: 600px) {
  .blob-1 { width: 380px; height: 380px; }
  .blob-2 { width: 320px; height: 320px; }
  .blob-3 { width: 260px; height: 260px; }
}

/* INTERACTIVE GAME ENGINE
   Interactive cinematic game shell used across BW deep-dive pages.
   Full reference + data format: BW interactive reference.
   JS engine: shared interaction script.

   Series theme overrides - add per-disease modifier classes:
     .sc-game.theme-furnace { --sc-accent: #fb923c; --sc-bg: #160707; ... }
   Rule: two vignettes MUST NOT share a palette. Color IS the memory hook. */
.sc-game {
  --sc-bg: #0a0612;
  --sc-accent: #f0abfc;
  --sc-accent-glow: rgba(192,132,252,0.55);
  --sc-text: #c4b5fd;
  --sc-text-bright: #e9d5ff;
  --sc-dim: #6b5b8b;
  --sc-correct: #22c55e;
  --sc-wrong: #ef4444;
  /* Bloom/stripe vars — override per theme modifier class */
  --sc-bloom1: rgba(168,85,247,0.18);
  --sc-bloom2: rgba(240,171,252,0.12);
  --sc-bloom3: rgba(168,85,247,0.10);
  --sc-bloom4: rgba(240,171,252,0.14);
  --sc-stripe: rgba(168,85,247,0.025);
  position: relative;
  max-width: 500px; width: 100%; margin: 0 auto;
  border-radius: 1rem; overflow: hidden;
  background:
    radial-gradient(ellipse 380px 280px at 50% 30%, var(--sc-bloom1) 0%, rgba(10,6,18,0.04) 50%, transparent 100%),
    repeating-linear-gradient(45deg, transparent, transparent 28px, var(--sc-stripe) 28px, var(--sc-stripe) 29px),
    var(--sc-bg);
  box-shadow: inset 60px 0 80px -20px #000, inset -60px 0 80px -20px #000, inset 0 40px 60px -30px #000;
  border: 1px solid #1e1230;
  color: var(--sc-text);
}
.sc-game::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(circle at 20% 30%, var(--sc-bloom1) 1px, transparent 2px),
    radial-gradient(circle at 70% 50%, var(--sc-bloom2) 1px, transparent 2px),
    radial-gradient(circle at 40% 70%, var(--sc-bloom3) 1px, transparent 2px),
    radial-gradient(circle at 85% 20%, var(--sc-bloom4) 1px, transparent 2px);
  background-size: 200px 200px, 280px 280px, 240px 240px, 320px 320px;
  animation: sc-drift 22s linear infinite;
  opacity: 0.6;
}
@keyframes sc-drift { from { transform: translate(0,0); } to { transform: translate(-40px,-40px); } }

.sc-inner { position: relative; z-index: 2; padding: 1.4rem 1.1rem 1.6rem; }

.sc-progress { display: flex; gap: 5px; justify-content: center; margin-bottom: 1.4rem; }
.sc-pdot { width: 22px; height: 3px; border-radius: 2px; background: rgba(168,85,247,0.16); transition: all 0.4s; }
.sc-pdot.active { background: var(--sc-text-bright); box-shadow: 0 0 12px var(--sc-accent-glow); }
.sc-pdot.done.correct { background: rgba(34,197,94,0.7); }
.sc-pdot.done.wrong { background: rgba(239,68,68,0.7); }

.sc-stage { display: none; }
.sc-stage.sc-on { display: block; animation: sc-fadein 0.5s ease; }
.sc-stage.active { display: flex; flex-direction: column; align-items: center; justify-content: center; animation: sc-fadein 0.5s ease; }
@keyframes sc-fadein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

.sc-eyebrow {
  font-family: 'Heavyweight', 'Newsreader', Georgia, serif;
  font-size: 0.6rem; letter-spacing: 0.32em; color: var(--sc-dim);
  text-transform: uppercase; text-align: center; margin-bottom: 0.75rem;
}
.sc-name {
  font-family: 'Heavyweight', 'Space Grotesk', sans-serif;
  font-size: 2rem; font-weight: 400; letter-spacing: 0.18em;
  color: var(--sc-text-bright); text-align: center;
  text-shadow: 0 0 30px var(--sc-accent-glow);
  margin-bottom: 0.3rem;
}
.sc-subline {
  text-align: center; color: var(--sc-text);
  font-family: 'Newsreader', Georgia, serif; font-size: 0.78rem;
  letter-spacing: 0.2em; margin-bottom: 1rem;
}
.sc-prose {
  text-align: center; color: var(--sc-text);
  font-size: 0.92rem; line-height: 1.55; max-width: 380px;
  margin: 0 auto 1.4rem; font-style: italic;
}
.sc-prompt {
  text-align: center;
  font-family: 'Heavyweight', 'Space Grotesk', sans-serif;
  font-size: 0.95rem; font-weight: 400; letter-spacing: 0.22em;
  color: var(--sc-text-bright); text-transform: uppercase;
  margin-bottom: 1rem;
  text-shadow: 0 0 18px var(--sc-accent-glow);
}
.sc-status {
  text-align: center; min-height: 3.4rem;
  padding: 0.75rem 0.9rem; border-radius: 0.8rem;
  background: rgba(168,85,247,0.06);
  border: 1px solid rgba(168,85,247,0.18);
  color: var(--sc-text); font-size: 0.82rem; line-height: 1.5;
  margin-top: 0.9rem;
}
.sc-status.correct { color: #86efac; background: rgba(34,197,94,0.08); border-color: rgba(34,197,94,0.32); }
.sc-status.wrong   { color: #fca5a5; background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.32); }
.sc-action {
  display: block; margin: 1.2rem auto 0;
  background: linear-gradient(180deg, #a855f7, #7c3aed);
  color: #fff; border: none;
  font-family: 'Heavyweight', 'Space Grotesk', sans-serif;
  font-size: 0.76rem; font-weight: 400; letter-spacing: 0.2em;
  text-transform: uppercase; padding: 0.85rem 1.6rem;
  border-radius: 0.65rem; cursor: pointer; min-height: 44px;
  box-shadow: 0 0 22px var(--sc-accent-glow);
  transition: all 0.2s;
}
.sc-action:hover { transform: translateY(-1px); box-shadow: 0 4px 30px var(--sc-accent-glow); }
.sc-diagram-wrap { display: flex; justify-content: center; position: relative; margin-bottom: 0.6rem; }
.sc-diagram-wrap svg { max-width: 360px; width: 100%; height: auto; }
.sc-target {
  cursor: pointer; transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
  transform-origin: center; transform-box: fill-box;
  animation: sc-idle 5s ease-in-out infinite;
}
@keyframes sc-idle { 0%,100% { opacity: 0.92; } 50% { opacity: 1; filter: drop-shadow(0 0 6px currentColor); } }
.sc-target:hover { filter: drop-shadow(0 0 14px var(--sc-accent-glow)); animation-play-state: paused; }
.sc-target.dim { opacity: 0.28; animation: none; }
.sc-target.bloom { animation: sc-bloom 1s ease forwards; }
@keyframes sc-bloom {
  0%   { transform: scale(1); filter: drop-shadow(0 0 8px currentColor); }
  35%  { transform: scale(1.35); filter: drop-shadow(0 0 35px var(--sc-correct)); }
  100% { transform: scale(1.08); filter: drop-shadow(0 0 18px var(--sc-correct)); }
}
.sc-target.repel { animation: sc-repel 0.55s ease; }
@keyframes sc-repel {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-4px); filter: drop-shadow(0 0 10px var(--sc-wrong)); }
  40% { transform: translateX(4px);  filter: drop-shadow(0 0 10px var(--sc-wrong)); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.sc-label { transition: opacity 0.4s ease; pointer-events: none; }
.sc-label.is-origin { opacity: 0; }
.sc-label.dim { opacity: 0.25; }
.sc-origin-halo, .sc-origin-ring, .sc-origin-core {
  transform-box: fill-box; transform-origin: center; pointer-events: none;
}
.sc-origin-halo { animation: sc-origin-halo 2.4s ease-in-out infinite; filter: blur(2px); }
@keyframes sc-origin-halo { 0%,100% { opacity: 0.22; transform: scale(1); } 50% { opacity: 0.42; transform: scale(1.18); } }
.sc-origin-ring { fill: none; stroke-width: 1.4; animation: sc-origin-ring 2s ease-out infinite; }
@keyframes sc-origin-ring { 0% { transform: scale(0.5); opacity: 0.95; } 100% { transform: scale(3); opacity: 0; } }
.sc-origin-core { animation: sc-origin-pulse 1.6s ease-in-out infinite; filter: drop-shadow(0 0 6px currentColor); }
@keyframes sc-origin-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.7; transform: scale(1.25); } }
.sc-origin-label {
  font-family: 'Heavyweight', 'Newsreader', Georgia, serif;
  font-size: 7.5px; letter-spacing: 0.28em;
  text-anchor: middle; text-transform: uppercase;
  pointer-events: none; font-weight: 400;
}
.sc-trail { fill: none; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 4 5; opacity: 0; }
.sc-particle { opacity: 0; }
.sc-card-frame {
  background: rgba(245,232,255,0.04);
  border: 1px solid rgba(168,85,247,0.28);
  border-radius: 0.9rem;
  padding: 1.1rem 1.1rem 1.2rem;
  max-width: 420px; margin: 0 auto;
  box-shadow: 0 0 32px rgba(168,85,247,0.12);
}
.sc-card-name {
  text-align: center;
  font-family: 'Heavyweight', 'Space Grotesk', sans-serif;
  font-size: 1.15rem; font-weight: 400; letter-spacing: 0.12em;
  color: var(--sc-text-bright); text-transform: uppercase;
  margin-bottom: 0.55rem; text-shadow: 0 0 18px var(--sc-accent-glow);
}
.sc-card-detail {
  text-align: center; font-size: 0.86rem; line-height: 1.55;
  color: var(--sc-text); margin-bottom: 1rem; font-style: italic;
}
.sc-card-row {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(168,85,247,0.14);
  gap: 0.9rem;
}
.sc-card-row:last-child { border-bottom: none; }
.sc-card-row-label {
  color: var(--sc-dim); letter-spacing: 0.18em; text-transform: uppercase;
  font-family: 'Heavyweight', 'Newsreader', Georgia, serif;
  font-size: 0.56rem; flex-shrink: 0; padding-top: 2px;
}
.sc-card-row-value {
  color: var(--sc-text-bright); text-align: right;
  font-size: 0.77rem; line-height: 1.5;
}
@media (max-width: 600px) {
  .sc-name { font-size: 1.55rem; letter-spacing: 0.14em; }
  .sc-prompt { font-size: 0.82rem; letter-spacing: 0.18em; }
  .sc-card-name { font-size: 1rem; }
  .sc-inner { padding: 1.1rem 0.85rem 1.3rem; }
  .sc-diagram-wrap svg { max-width: 280px; }
}

/* Global: hide redundant inline "Labs" span (::before handles the header) */
.wt-lab .lh { display: none; }

/* ===== DESKTOP SCALING (1024px+) ===== */
@media (min-width: 1024px) {
  .container { max-width: 1400px; padding: 0 60px 80px; }
  .hero h1 { font-size: 3.6rem; }
  .hero-desc { font-size: 1.25rem; max-width: 800px; line-height: 1.7; }
  .hero-eyebrow { font-size: 0.9rem; letter-spacing: 0.4em; }
  .scroll-cue { font-size: 0.9rem; }
  .section-title { font-size: 2.6rem; }
  .section-sub { font-size: 1.15rem; line-height: 1.75; max-width: 900px; }
  .section-label { font-size: 0.88rem; letter-spacing: 0.35em; }
  .fam-name { font-size: 2.2rem; }
  .fam-subtitle { font-size: 1.1rem; }
  .fam-section { font-size: 1.1rem; line-height: 1.8; }
  .cmp-table td { font-size: 1.05rem; padding: 1rem 0.85rem; line-height: 1.6; }
  .cmp-table th { font-size: 0.78rem; padding: 0.85rem 0.85rem; }
  .cmp-table .row-label { font-size: 0.88rem; }
  .board-clue { font-size: 1.1rem; padding: 1.4rem 1.6rem; line-height: 1.7; }
  .clue-label { font-size: 0.78rem; }
  .battle-tab { font-size: 0.95rem; padding: 12px 24px; min-height: 48px; }
  .battle-card { font-size: 1.1rem; padding: 1.75rem; line-height: 1.75; }
  .bt-snap-card { font-size: 1rem; }
  .bt-snap-label { font-size: 0.78rem; }
  .wt-stem { font-size: 1.15rem; line-height: 1.75; }
  .wt-choice { font-size: 1.05rem; padding: 16px 24px; min-height: 52px; }
  .wt-beat-q, .wt-beat-a { font-size: 1.05rem; line-height: 1.7; }
  .case-quiz-stem { font-size: 1.15rem; }
  .case-quiz-opt { font-size: 1.05rem; padding: 14px 20px; }
  .elim-card { font-size: 1rem; }
  .mem-card { font-size: 1rem; }
  .dtree-q { font-size: 1.1rem; }
  .dtree-opt { font-size: 1rem; padding: 12px 20px; }
  .photo-strip img { height: 140px; max-width: 220px; }
  .lc-chunk { font-size: 1.05rem; }
  .story-panel { font-size: 1.05rem; }
  .page-nav-crumb { font-size: 0.95rem; }
  .page-nav-crumb a, .page-nav-current { font-size: 0.95rem; }
}

/* ===== Emoji rendering safety (added 2026-05-28) =====
   Older iOS / incomplete font installs may render newer Unicode emoji
   (🩸 🩹 🫁 🫘 🫀 etc) as tofu/text. Force the strongest emoji-capable
   font chain wherever emoji appear in display contexts. */
.hero-icon, .update-icon, .topic-icon, .emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               "Twemoji Mozilla", system-ui, sans-serif;
  font-variant-emoji: emoji;
}

/* ── Floating nav (.v4): one identical shape on every page ──
   Per-page copies drifted: Newsreader's "normal" line-height renders taller than
   the fallback serif, so the pill height changed page to page. Lock the geometry
   and an explicit, font-independent line-height so the bar is pixel-stable. */
.v4-wrap { padding: calc(1.4rem + env(safe-area-inset-top, 0px)) 1rem 0 !important; }
.v4 {
  gap: 0.5rem !important;
  border-radius: 999px !important;
  padding: 0.45rem 0.55rem 0.45rem 1.4rem !important;
  align-items: center !important;
}
.v4-nav a, .v4-cta, .v4-nav-drawer a, .v4-brand .word { line-height: 1.2 !important; }
@media (max-width: 880px) {
  .v4 { padding: 0.4rem 0.5rem 0.4rem 1rem !important; }
  .v4-cta { display: none !important; }
}

/* ===== Osteopathic (OMM) adjunct layer + MD/DO toggle =====
   DO/boards users keep these callouts; MD/boards users hide them site-wide.
   Pref persists via localStorage (bw-omm), handled by /omm-pref.js. */
.osteo-layer{position:relative;border:1px solid rgba(96,165,250,0.30);border-radius:14px;background:linear-gradient(180deg,rgba(56,107,180,0.12),rgba(20,30,55,0.28));margin:1.4rem 0;overflow:hidden}
.osteo-bar{display:flex;align-items:center;justify-content:space-between;gap:0.6rem;padding:0.7rem 1rem;background:rgba(56,107,180,0.18);border-bottom:1px solid rgba(96,165,250,0.22);min-height:44px}
.osteo-bar .osteo-label{font-family:'Heavyweight','Space Grotesk',sans-serif;font-weight:400;text-transform:uppercase;letter-spacing:0.12em;font-size:0.7rem;color:#bfdbfe}
.osteo-x{appearance:none;-webkit-appearance:none;border:1px solid rgba(96,165,250,0.4);background:rgba(13,18,38,0.5);color:#dbe7ff;font:inherit;font-size:0.78rem;border-radius:999px;padding:0.4rem 0.85rem;min-height:36px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.osteo-x:hover{border-color:#60a5fa;color:#fff}
.osteo-body{padding:1rem;color:#e2e8f0}
html.omm-off .osteo-layer,html.omm-off [data-osteo]{display:none}
.omm-fab{position:fixed;right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:120;display:inline-flex;align-items:center;gap:0.4rem;border:1px solid rgba(96,165,250,0.5);background:rgba(13,18,38,0.92);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#dbe7ff;font:inherit;font-size:0.8rem;border-radius:999px;padding:0.55rem 0.95rem;min-height:44px;cursor:pointer;box-shadow:0 10px 26px -10px rgba(0,0,0,0.6)}
.omm-fab:hover{border-color:#60a5fa;color:#fff}