/* Typography is self-hosted through polish.css. */
/* === DESIGN TOKENS ===
   ============================================================================
   INVEST-A-GATOR 2.0 — TAYLOR FAMILY SOFTWARE REDESIGN (dark + gold)
   Single consolidated :root. The legacy light "--paper" theme and the mid
   "--game-*" / "--gator-readable-*" layers have been folded in here so every
   token resolves against ONE dark source of truth.
   ============================================================================ */
:root {
  color-scheme: dark;
  --tfs-bg: #0A0907;
  --tfs-bg-2: #100E0B;
  --tfs-card: #13110D;
  --tfs-card-2: #19150F;
  --tfs-cream: #F5F1E8;
  --tfs-muted: #A39C8E;
  --tfs-gold: #D4AF37;
  --tfs-gold-bright: #F4CF5E;
  --tfs-emerald: #16A34A;
  --tfs-bayou: #0F5C45;
  --tfs-blue: #315E89;
  --tfs-danger: #D66B4F;
  --tfs-border: rgba(212, 175, 55, 0.34);
  --tfs-border-strong: rgba(244, 207, 94, 0.62);
  --tfs-shadow: 0 20px 60px rgba(0, 0, 0, 0.38);
  --tfs-soft-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);

  --paper: var(--tfs-bg);
  --paper-elev-1: var(--tfs-card);
  --paper-elev-2: var(--tfs-card-2);
  --ink: var(--tfs-cream);
  --ink-soft: var(--tfs-muted);
  --forest: var(--tfs-emerald);
  --forest-deep: var(--tfs-gold);
  --terracotta: var(--tfs-danger);
  --brass: var(--tfs-gold);
  --parchment: #252015;
  --aged-line: var(--tfs-border);
  --display-font: "Cinzel", "Times New Roman", serif;
  --body-font: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --number-font: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-mono: var(--number-font); /* was referenced (with fallbacks) but never defined */
  --radius-button: 8px;
  --radius-card: 8px;
  --radius-modal: 12px;
  --shadow-tier-1: var(--tfs-soft-shadow);
  --shadow-tier-2: var(--tfs-shadow);
  --shadow-tier-3: 0 26px 80px rgba(0, 0, 0, 0.52);
  --muted: var(--tfs-muted);
  --paper-strong: var(--tfs-card-2);
  --panel: var(--tfs-card);
  --green: var(--tfs-emerald);
  --green-dark: var(--tfs-gold);
  --blue: var(--tfs-blue);
  --coral: var(--tfs-danger);
  --gold: var(--tfs-gold);
  --mint: rgba(22, 163, 74, 0.22);
  --shadow: var(--tfs-soft-shadow);
  --line: var(--tfs-border);
  --radius: var(--radius-card);

  /* Folded-in "--game-*" mid-layer (already dark; kept as aliases so existing
     references resolve here instead of a separate :root block). */
  --game-surface: #14110c;
  --game-surface-2: #1c1710;
  --game-surface-3: #0d0b08;
  --game-cream: var(--tfs-cream);
  --game-gold-text: var(--tfs-gold-bright);
  --game-muted-gold: #cdb86a;
  --game-line: rgba(244, 207, 94, 0.46);

  /* Folded-in "--gator-readable-*" readability tokens. */
  --gator-readable-gold: var(--tfs-gold-bright);
  --gator-readable-gold-on-paper: var(--tfs-gold-bright);

  /* V9: one spacing rhythm knob for topbar / stage / district-nav / event
     banner / workspace (drops to 10px in the <=720px block). */
  --section-gap: 14px;
}

html,
body {
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.10) 0%, rgba(10, 9, 7, 0) 34%),
    linear-gradient(225deg, rgba(15, 92, 69, 0.22) 0%, rgba(10, 9, 7, 0) 38%),
    repeating-linear-gradient(90deg, rgba(245, 241, 232, 0.018) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(245, 241, 232, 0.014) 0 1px, transparent 1px 72px),
    var(--tfs-bg);
  color: var(--tfs-cream);
}

body {
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent 16rem);
}

::selection {
  background: rgba(212, 175, 55, 0.30);
  color: var(--tfs-gold-bright);
}

*:focus-visible {
  outline: 2px solid var(--tfs-gold-bright);
  outline-offset: 3px;
}

.site-header,
.site-footer {
  width: min(1440px, calc(100% - 28px));
  margin: 0 auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 76px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.20);
  background: rgba(10, 9, 7, 0.88);
  backdrop-filter: blur(14px);
}

.brand-lockup {
  display: inline-flex;
  align-items: center;
  min-width: 78px;
  text-decoration: none;
}

.brand-lockup img {
  display: block;
  width: 70px;
  height: auto;
}

.site-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
}

.site-nav a,
.site-footer a {
  color: var(--tfs-cream);
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
  transition: color 140ms ease;
}

.site-nav a:hover,
.site-footer a:hover {
  color: var(--tfs-gold-bright);
}

.site-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--tfs-border-strong);
  border-radius: 8px;
  background: var(--tfs-gold);
  color: var(--tfs-bg);
  font-weight: 850;
  text-decoration: none;
  box-shadow: 0 0 24px rgba(212, 175, 55, 0.16);
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 44px;
  padding: 28px 18px 42px;
  border-top: 1px solid rgba(212, 175, 55, 0.20);
  color: var(--tfs-muted);
}

.site-footer div {
  display: grid;
  gap: 5px;
}

.site-footer strong {
  color: var(--tfs-gold);
  font-family: var(--display-font);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.site-footer span {
  font-size: 0.86rem;
}

.app-shell {
  width: min(1440px, 100%);
  padding: 18px 14px 0;
}

.start-screen {
  min-height: calc(100vh - 112px);
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.82fr);
}

.start-copy,
.poster-panel,
.panel,
.topbar,
.ticker,
.comic-card,
.travel-card,
.hiring-card,
.recovery-card,
.interview-card {
  border: 1px solid var(--tfs-border);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(25, 21, 15, 0.96), rgba(19, 17, 13, 0.96));
  color: var(--tfs-cream);
  box-shadow: var(--tfs-soft-shadow);
}

.start-copy {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  border-color: var(--tfs-border-strong);
}

.start-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(212, 175, 55, 0.08), transparent 40%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.035), transparent 26%);
}

.start-copy > * {
  position: relative;
}

.eyebrow,
.district-kicker,
.panel-heading .eyebrow,
.travel-header .eyebrow,
.hiring-header .eyebrow,
.recovery-header .eyebrow,
.interview-header .eyebrow,
.comic-copy .eyebrow {
  color: var(--tfs-gold-bright);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.18em;
}

.start-copy h1,
.topbar-title h2,
.panel-heading h3,
.scene-overlay h3,
.comic-copy h2,
.travel-header h2,
.hiring-header h2,
.recovery-header h2,
.interview-header h2 {
  color: var(--tfs-gold-bright);
  font-family: var(--display-font);
  letter-spacing: 0.02em;
}

.start-copy h1 {
  max-width: 12ch;
  font-size: clamp(3.25rem, 7vw, 7.1rem);
  line-height: 0.9;
  text-wrap: balance;
}

.title-kicker {
  margin: 14px 0 0;
  color: var(--tfs-gold-bright);
  font-family: var(--display-font);
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  letter-spacing: 0.06em;
}

.start-lede {
  color: rgba(245, 241, 232, 0.88);
}

.start-actions {
  grid-template-columns: minmax(170px, 260px) auto auto;
}

input,
select,
textarea {
  border: 1px solid var(--tfs-border);
  border-radius: 8px;
  background: rgba(245, 241, 232, 0.96);
  color: #18140E;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.primary-btn,
.secondary-btn,
.icon-btn,
.tab,
.close-btn,
.site-cta {
  border: 1px solid var(--tfs-border-strong);
  border-radius: 8px;
  box-shadow: none;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.primary-btn {
  background: linear-gradient(180deg, var(--tfs-gold-bright), var(--tfs-gold));
  color: var(--tfs-bg);
}

.secondary-btn,
.icon-btn,
.tab,
.close-btn {
  background: rgba(245, 241, 232, 0.05);
  color: var(--tfs-cream);
}

.primary-btn:hover,
.secondary-btn:hover,
.icon-btn:hover,
.tab:hover,
.close-btn:hover,
.site-cta:hover {
  transform: translateY(-1px);
  border-color: var(--tfs-gold-bright);
  box-shadow: 0 0 26px rgba(212, 175, 55, 0.14);
}

.secondary-btn:hover,
.icon-btn:hover,
.tab:hover,
.close-btn:hover {
  background: rgba(212, 175, 55, 0.12);
  color: var(--tfs-gold-bright);
}

.tab.active,
.district-btn.active {
  background: var(--tfs-gold);
  color: var(--tfs-bg);
  border-color: var(--tfs-gold-bright);
}

.mini-rules span,
.tag,
.risk-pill,
.badge,
.manager-quality,
.region-status,
.stock-chip {
  border: 1px solid rgba(212, 175, 55, 0.32);
  background: rgba(212, 175, 55, 0.09);
  color: var(--tfs-cream);
}

.poster-panel {
  background:
    linear-gradient(145deg, rgba(15, 92, 69, 0.72), rgba(10, 9, 7, 0.84) 48%, rgba(212, 175, 55, 0.12)),
    var(--tfs-card);
}

.poster-burst {
  opacity: 0.42;
  background:
    conic-gradient(from 20deg, rgba(212, 175, 55, 0.70) 0 10deg, transparent 10deg 22deg, rgba(244, 207, 94, 0.48) 22deg 32deg, transparent 32deg 44deg);
}

.poster-caption {
  inset-inline: 20px;
  bottom: 20px;
  border: 1px solid var(--tfs-border);
  border-radius: 8px;
  background: rgba(10, 9, 7, 0.84);
  color: var(--tfs-cream);
}

.poster-caption strong {
  color: var(--tfs-gold-bright);
}

.game-screen {
  display: grid;
  gap: var(--section-gap); /* V9 rhythm token */
}

/* V9: single-row topbar — the old 2-col grid (title | metrics) is gone; the
   flex row + metric wrap live in the "=== V9 UX ===" block at end of file. */
.topbar {
  gap: 16px;
  padding: 16px;
}

.topbar-title {
  gap: 8px;
}

.topbar-actions {
  gap: 8px;
}

.metrics,
.asset-stats,
.deal-stats,
.manager-stats,
.region-stats,
.stock-row,
.market-summary-grid {
  gap: 8px;
}

.metric,
.deal-card,
.asset-card,
.property-card,
.skill-card,
.class-card,
.manager-card,
.candidate-card,
.region-card,
.leaderboard-panel,
.learn-card,
.market-card,
.stock-card,
.portfolio-empty,
.log-list,
.district-btn {
  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 8px;
  background: rgba(245, 241, 232, 0.045);
  color: var(--tfs-cream);
  box-shadow: none;
}

.metric {
  min-height: 74px;
}

.metric span,
.deal-card p,
.asset-card p,
.property-card p,
.skill-card p,
.class-card p,
.learn-card p,
.leaderboard-panel p,
.loan-note,
.travel-header p,
.hiring-header p,
.recovery-header p,
.interview-header p,
.comic-copy p,
.log-list li,
.market-card p {
  color: rgba(245, 241, 232, 0.74);
}

.metric strong,
.deal-card h4,
.asset-card h4,
.property-card h4,
.skill-card h4,
.class-card h4,
.manager-card h4,
.candidate-card h4,
.region-card h4,
.leaderboard-panel h4,
.learn-card h4,
.market-card h4,
.stock-card h4 {
  color: var(--tfs-gold-bright);
}

.deal-card:hover,
.asset-card:hover,
.property-card:hover,
.skill-card:hover,
.manager-card:hover,
.candidate-card:hover,
.region-card:hover,
.learn-card:hover,
.market-card:hover,
.stock-card:hover {
  border-color: var(--tfs-border-strong);
  background: rgba(212, 175, 55, 0.075);
}

.deal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.44);
  border-color: rgba(244, 207, 94, 0.8);
}

.stage {
  border: 1px solid var(--tfs-border);
  border-radius: 8px;
  overflow: hidden;
  background: #070604;
  box-shadow: var(--tfs-soft-shadow);
}

.scene-overlay {
  background: linear-gradient(180deg, rgba(10, 9, 7, 0.86), rgba(10, 9, 7, 0.42));
}

.district-nav {
  gap: 8px;
}

.ticker {
  color: var(--tfs-cream);
}

.workspace {
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: var(--section-gap); /* V9 rhythm token */
}

.panel-heading {
  border-bottom-color: rgba(212, 175, 55, 0.16);
}

.tabs {
  gap: 6px;
}

.comic-modal,
.travel-modal,
.hiring-modal,
.recovery-modal,
.interview-modal {
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(12px);
}

.comic-card,
.travel-card,
.hiring-card,
.recovery-card,
.interview-card {
  border-color: var(--tfs-border-strong);
}

.comic-art,
.gator-portrait-wrap,
.manager-portrait,
.candidate-portrait {
  border-color: rgba(212, 175, 55, 0.28);
  background: rgba(15, 92, 69, 0.20);
}

.bank-actions {
  border-top-color: rgba(212, 175, 55, 0.16);
}

.career-status,
.corporate-status,
.cloud-code-strip {
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.08);
  color: var(--tfs-cream);
}

.positive,
.gain,
.up,
.success {
  color: #69DB92;
}

.negative,
.loss,
.down,
.danger {
  color: var(--tfs-danger);
}

.muted,
.empty-state,
.fine-print {
  color: var(--tfs-muted);
}

canvas {
  display: block;
}

@media (max-width: 1040px) {
  .site-header {
    grid-template-columns: auto auto;
  }

  .site-nav {
    display: none;
  }

  .site-cta {
    justify-self: end;
  }

  .start-screen,
  .workspace,
  .topbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .site-header,
  .site-footer {
    width: min(100%, calc(100% - 16px));
  }

  .site-header {
    min-height: 64px;
    padding: 8px 10px;
  }

  .brand-lockup img {
    width: 58px;
  }

  .site-cta {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.86rem;
  }

  .app-shell {
    padding: 8px;
  }

  .start-copy {
    min-height: 480px;
    padding: 24px;
  }

  .start-copy h1 {
    font-size: clamp(2.6rem, 13vw, 4.4rem);
  }

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

  .poster-panel {
    min-height: 420px;
  }

  :root {
    --section-gap: 10px; /* V9 spacing token, tighter on phones */
  }

  .topbar,
  .panel,
  .ticker {
    padding: 12px;
  }

  .site-footer {
    flex-direction: column;
  }
}

/* .tag.rival / .tag.watchlist colors are consolidated into the dark tag-variant
   block (search "TAG VARIANTS — dark"); the old !important overrides are gone. */

/* === Final game readability lock: keep deal/portfolio panels off the old gray UI === */
.deal-card .stat,
.property-card .stat,
.asset-card .stat,
.manager-card .stat,
.candidate-card .stat,
.team-summary .stat,
.property-asset .asset-stats .stat,
.region-stats,
.manager-stats > div,
.stock-metric {
  color: var(--game-cream);
  background:
    radial-gradient(circle at 96% 0%, rgba(244, 207, 94, 0.13), transparent 34%),
    linear-gradient(180deg, rgba(245, 241, 232, 0.045), rgba(245, 241, 232, 0.015)),
    var(--game-surface-2);
  border-color: rgba(244, 207, 94, 0.45);
  box-shadow: inset 0 1px 0 rgba(245, 241, 232, 0.06);
}

.deal-card .stat span,
.property-card .stat span,
.asset-card .stat span,
.manager-card .stat span,
.candidate-card .stat span,
.team-summary .stat span,
.property-asset .asset-stats .stat span,
.region-stats span,
.manager-stats span,
.stock-metric span {
  color: var(--game-muted-gold);
  -webkit-text-fill-color: var(--game-muted-gold);
}

.deal-card .stat strong,
.property-card .stat strong,
.asset-card .stat strong,
.manager-card .stat strong,
.candidate-card .stat strong,
.team-summary .stat strong,
.property-asset .asset-stats .stat strong,
.region-stats strong,
.manager-stats strong,
.stock-metric strong {
  color: var(--game-gold-text);
  -webkit-text-fill-color: var(--game-gold-text);
}

/* NOTE: .action-help is intentionally excluded here — it now nests inside
   .diligence-box and must inherit that panel's fill, not get its own box. */
.deal-card .diligence-box,
.asset-card .asset-growth-read,
.asset-card .property-read,
.asset-card .upgrade-row,
.asset-card .location-row,
.asset-card .synergy-hint,
.asset-card .upgrade-effect,
.property-card .property-read,
.team-member,
.empty-state,
.lesson-card,
.term-card {
  color: var(--game-cream);
  background:
    linear-gradient(180deg, rgba(245, 241, 232, 0.05), rgba(245, 241, 232, 0.018)),
    var(--game-surface-2);
  border-color: rgba(244, 207, 94, 0.45);
}

.deal-card .diligence-box *,
.deal-card .action-help,
.asset-card .asset-growth-read,
.asset-card .property-read,
.asset-card .upgrade-row *,
.asset-card .location-row *,
.asset-card .synergy-hint,
.asset-card .upgrade-effect,
.property-card .property-read,
.team-member *,
.empty-state,
.lesson-card *,
.term-card * {
  color: var(--game-cream);
}

.deal-card .diligence-box strong,
.asset-card .upgrade-row strong,
.asset-card .location-row strong,
.team-member strong,
.lesson-card h4,
.term-card strong {
  color: var(--game-gold-text);
  -webkit-text-fill-color: var(--game-gold-text);
}

.deal-card .tag,
.property-card .tag,
.asset-card .tag,
.risk-pill,
.manager-quality,
.region-status,
.stock-chip {
  color: var(--game-gold-text);
  background: rgba(12, 10, 7, 0.78);
  border-color: rgba(244, 207, 94, 0.46);
}

/* === Case Board: short-term objective loop === */
.case-board {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(244, 207, 94, 0.48);
  border-radius: 8px;
  background:
    radial-gradient(circle at 90% 0%, rgba(244, 207, 94, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(15, 92, 69, 0.26), rgba(12, 10, 7, 0.96) 58%),
    var(--game-surface);
  color: var(--game-cream);
}

.case-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.case-board h4 {
  margin: 0;
  color: var(--game-gold-text);
  font-family: var(--display-font);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
}

.case-board p {
  margin: 4px 0 0;
  color: var(--game-cream);
}

.case-meter {
  min-width: 146px;
  display: grid;
  gap: 8px;
  justify-items: end;
}

.case-meter-bars {
  display: flex;
  flex-wrap: nowrap;
  gap: 4px;
}

.case-meter span {
  width: 22px;
  height: 10px;
  display: inline-block;
  border: 1px solid rgba(244, 207, 94, 0.46);
  border-radius: 999px;
  background: rgba(245, 241, 232, 0.08);
}

.case-meter span.filled {
  background: linear-gradient(180deg, var(--tfs-gold-bright), var(--tfs-gold));
  box-shadow: 0 0 14px rgba(244, 207, 94, 0.22);
}

.case-meter strong {
  color: var(--game-gold-text);
  font-family: var(--number-font);
  font-size: 0.92rem;
}

.case-objectives {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.case-objective {
  min-height: 126px;
  display: grid;
  gap: 6px;
  align-content: start;
  padding: 12px;
  border: 1px solid rgba(244, 207, 94, 0.36);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(245, 241, 232, 0.05), rgba(245, 241, 232, 0.018)),
    rgba(12, 10, 7, 0.82);
}

.case-objective strong {
  color: var(--game-gold-text);
  line-height: 1.15;
}

.case-objective p {
  color: var(--game-cream);
  font-size: 0.86rem;
  line-height: 1.38;
}

.case-objective span {
  align-self: end;
  color: var(--game-muted-gold);
  font-family: var(--number-font);
  font-size: 0.72rem;
  font-weight: 900;
}

.case-objective.ready {
  border-color: rgba(105, 219, 146, 0.58);
  background:
    linear-gradient(180deg, rgba(105, 219, 146, 0.08), transparent 58%),
    rgba(12, 10, 7, 0.82);
}

.case-objective.hot {
  border-color: rgba(244, 207, 94, 0.78);
  background:
    radial-gradient(circle at 90% 12%, rgba(244, 207, 94, 0.16), transparent 38%),
    rgba(12, 10, 7, 0.86);
}

.case-objective.watch {
  border-color: rgba(105, 219, 146, 0.58);
  background:
    radial-gradient(circle at 90% 12%, rgba(105, 219, 146, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(15, 92, 69, 0.18), rgba(12, 10, 7, 0.86));
}

.case-objective.watch strong {
  color: #d8f7e7;
}

.case-objective.intel {
  border-color: rgba(112, 207, 255, 0.58);
  background:
    radial-gradient(circle at 90% 12%, rgba(112, 207, 255, 0.14), transparent 38%),
    linear-gradient(180deg, rgba(25, 74, 98, 0.22), rgba(12, 10, 7, 0.88));
}

.case-objective.intel strong {
  color: #cdefff;
}

.case-objective.danger {
  border-color: rgba(255, 154, 130, 0.7);
  background:
    radial-gradient(circle at 92% 10%, rgba(201, 83, 58, 0.22), transparent 40%),
    linear-gradient(180deg, rgba(91, 33, 25, 0.32), rgba(12, 10, 7, 0.9));
}

.case-objective.danger strong {
  color: #ffd879;
}

@media (max-width: 1040px) {
  .case-objectives {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .case-board-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .case-meter {
    width: 100%;
    justify-items: start;
  }

  .case-objectives {
    grid-template-columns: 1fr;
  }
}

/* Readability pass: any remaining pale paper-style panels use gold text.
   (--gator-readable-* tokens are now defined once in the consolidated :root.) */
:is(
  .start-copy,
  .poster-panel,
  .panel,
  .metric,
  .deal-card,
  .asset-card,
  .property-card,
  .skill-card,
  .class-card,
  .manager-card,
  .candidate-card,
  .region-card,
  .leaderboard-panel,
  .leaderboard-submit,
  .learn-card,
  .lesson-card,
  .term-card,
  .market-card,
  .stock-card,
  .synergy-card,
  .comic-card,
  .travel-card,
  .hiring-card,
  .recovery-card,
  .interview-card
) {
  color: var(--gator-readable-gold);
}

:is(
  .start-copy,
  .poster-panel,
  .panel,
  .metric,
  .deal-card,
  .asset-card,
  .property-card,
  .skill-card,
  .class-card,
  .manager-card,
  .candidate-card,
  .region-card,
  .leaderboard-panel,
  .leaderboard-submit,
  .learn-card,
  .lesson-card,
  .term-card,
  .market-card,
  .stock-card,
  .synergy-card,
  .comic-card,
  .travel-card,
  .hiring-card,
  .recovery-card,
  .interview-card
) :is(p, span, small, li, td, th, label, summary, strong, em, output, figcaption, .muted, .muted-cell, .leaderboard-note, .score-message) {
  color: var(--gator-readable-gold);
}

:is(
  .start-copy,
  .poster-panel,
  .panel,
  .metric,
  .deal-card,
  .asset-card,
  .property-card,
  .skill-card,
  .class-card,
  .manager-card,
  .candidate-card,
  .region-card,
  .leaderboard-panel,
  .leaderboard-submit,
  .learn-card,
  .lesson-card,
  .term-card,
  .market-card,
  .stock-card,
  .synergy-card,
  .comic-card,
  .travel-card,
  .hiring-card,
  .recovery-card,
  .interview-card
) :is(h1, h2, h3, h4, h5, h6, .eyebrow, .title-kicker, .tag) {
  color: var(--gator-readable-gold);
}

input,
select,
textarea {
  color: var(--gator-readable-gold-on-paper);
  -webkit-text-fill-color: var(--gator-readable-gold-on-paper);
}

/* === GENERATED GAME ASSET LAYER === */
.ai-art {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(15, 92, 69, 0.20)),
    var(--tfs-card);
}

.ai-art > * {
  grid-area: 1 / 1;
}

.ai-art-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 160ms ease;
}

.ai-art.loaded .ai-art-img {
  opacity: 1;
}

.ai-art.loaded .ai-art-fallback,
.warren-art-wrap.loaded .warren-fallback,
.advisor-art-wrap.loaded .advisor-fallback {
  display: none;
}

.ai-art-fallback {
  width: 100%;
  height: 100%;
}

.deal-art {
  min-height: 154px;
  background: var(--tfs-card-2);
}

.deal-art .ai-art {
  min-height: 154px;
}

.deal-art svg {
  width: 100%;
  height: 100%;
  min-height: 154px;
  display: block;
}

.region-card-art .ai-art {
  min-height: 180px;
}

.region-card-art .ai-art-img {
  object-position: 50% 50%;
}

.region-card.locked .ai-art-img {
  filter: grayscale(0.55) brightness(0.72);
}

.warren-fallback,
.advisor-legacy-stack {
  display: grid;
  place-items: center;
}

.warren-fallback > *,
.advisor-legacy-stack > * {
  grid-area: 1 / 1;
}

.warren-panel.generated,
.advisor-panel.generated,
.warren-panel.legacy,
.advisor-panel.legacy {
  background: radial-gradient(circle at 50% 18%, rgba(244, 207, 94, 0.14), rgba(10, 9, 7, 0.90));
  border-color: rgba(212, 175, 55, 0.34);
  box-shadow: inset 0 0 0 1px rgba(245, 241, 232, 0.05);
}

.warren-art-wrap.loaded .warren-panel.generated,
.advisor-art-wrap.loaded .advisor-panel.generated {
  object-fit: cover;
}

.poster-warren .warren-art-wrap.loaded .warren-panel.generated {
  object-fit: cover;
  mix-blend-mode: normal;
}

.cast-art-wrap,
.cast-art-wrap .ai-art {
  width: 100%;
  height: 100%;
}

.cast-art-wrap .ai-art-img {
  object-fit: cover;
  object-position: 50% 36%;
}

.manager-ai-wrap {
  background: var(--tfs-card-2);
}

.manager-ai-wrap .ai-art,
.manager-ai-wrap .ai-art-fallback,
.manager-ai-wrap .gator-portrait {
  min-height: 0;
  height: 100%;
}

.manager-ai-wrap .ai-art-img {
  object-position: 50% 30%;
}

.property-team .advisor-art-wrap,
.team-avatar .advisor-art-wrap {
  min-height: 0;
}

.property-team .advisor-panel.generated,
.team-avatar .advisor-panel.generated {
  object-fit: cover;
  object-position: 50% 30%;
}

@media (max-width: 720px) {
  .deal-art,
  .deal-art .ai-art {
    min-height: 132px;
  }

  .region-card-art .ai-art {
    min-height: 140px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .primary-btn,
  .secondary-btn,
  .icon-btn,
  .tab,
  .close-btn,
  .site-cta,
  .deal-card,
  .asset-card {
    transition: none !important;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at 18% 8%, rgba(212, 175, 55, 0.14), transparent 28%),
    linear-gradient(135deg, rgba(15, 92, 69, 0.18) 0%, rgba(10, 9, 7, 0) 44%),
    var(--tfs-bg);
  color: var(--ink);
}

body {
  min-height: 100vh;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

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

.hidden {
  display: none !important;
}

.eyebrow {
  margin: 0 0 6px;
  color: var(--green-dark);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.start-screen {
  min-height: calc(100vh - 36px);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.75fr);
  gap: 18px;
  align-items: stretch;
}

.start-copy,
.poster-panel,
.panel,
.topbar,
/* .ticker skin (border/radius/background) is defined once in the final dark
   panel layer near end-of-file; this layer only keeps its shadow token. */
.ticker {
  box-shadow: var(--shadow);
}

.start-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 5vw, 70px);
  min-height: 520px;
}

.start-copy h1 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(3.4rem, 9vw, 8rem);
  line-height: 0.87;
  letter-spacing: 0.01em;
}

.start-lede {
  max-width: 760px;
  margin: 24px 0 0;
  color: var(--tfs-muted);
  font-size: clamp(1.08rem, 2vw, 1.45rem);
  line-height: 1.45;
}

.start-actions {
  display: grid;
  grid-template-columns: minmax(190px, 280px) minmax(140px, 200px);
  gap: 10px;
  align-items: end;
  margin-top: 34px;
}

.seed-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.seed-label-visible {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  color: var(--tfs-muted);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
  padding: 0 14px;
  color: var(--ink);
  font-weight: 750;
}

/* Button sizing/state only — visual skin (border, radius, gradient, hover) is
   defined once in the final dark button layer near the end of the file. */
.primary-btn,
.secondary-btn,
.icon-btn,
.tab,
.close-btn {
  min-height: 44px;
  font-weight: 900;
}

.primary-btn {
  padding: 0 18px;
}

.secondary-btn {
  padding: 0 16px;
}

.primary-btn:disabled,
.secondary-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none;
}

.compact {
  min-height: 38px;
  padding: 0 12px;
  font-size: 0.9rem;
}

.mini-rules {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.mini-rules span,
.tag,
.risk-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.08);
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 850;
}

.poster-panel {
  position: relative;
  overflow: hidden;
  min-height: 520px;
  background:
    radial-gradient(circle at 68% 24%, rgba(212, 175, 55, 0.22), transparent 30%),
    linear-gradient(145deg, rgba(15, 92, 69, 0.72), rgba(10, 9, 7, 0.84) 48%, rgba(212, 175, 55, 0.12)),
    var(--tfs-card);
}

.poster-burst {
  position: absolute;
  inset: 8% -25% auto auto;
  width: 520px;
  height: 520px;
  background: conic-gradient(from 8deg, rgba(242, 184, 75, 0.62) 0 10deg, rgba(255, 248, 230, 0.48) 10deg 20deg, rgba(233, 95, 69, 0.42) 20deg 30deg, rgba(255, 248, 230, 0.48) 30deg 40deg);
  border: 0;
  transform: rotate(-7deg);
}

.poster-warren {
  position: absolute;
  inset: 18px 18px 96px;
  display: grid;
  place-items: center;
}

.poster-warren svg,
.comic-art svg,
.avatar svg,
.poster-warren img,
.comic-art img,
.warren-art-wrap {
  width: 100%;
  height: 100%;
  display: block;
}

.poster-warren img {
  object-fit: contain;
  object-position: 50% 100%;
  mix-blend-mode: multiply;
  filter: drop-shadow(12px 12px 0 rgba(23, 33, 28, 0.2));
}

.poster-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--tfs-card);
  padding: 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  line-height: 1.25;
}

.panel h3,
.topbar h2,
#districtTitle {
  margin: 0;
  font-family: var(--display-font);
  letter-spacing: 0.01em;
}

.game-screen {
  display: grid;
  gap: var(--section-gap); /* V9 rhythm token */
}

.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 16px;
}

/* V9: .topbar h2 sizing (one-line ellipsis clamp) lives in the "=== V9 UX ==="
   block at end of file — the old clamp(1.6rem,3vw,2.7rem) rule was removed. */

.topbar-title {
  display: grid;
  gap: 8px;
  align-items: start;
}

.topbar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-menu {
  position: relative;
}

.settings-menu summary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  list-style: none;
}

.settings-menu summary::-webkit-details-marker {
  display: none;
}

.settings-option {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 12;
  width: max-content;
  max-width: min(300px, calc(100vw - 24px));
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--tfs-card-2);
  box-shadow: 4px 4px 0 var(--line);
  padding: 10px 12px;
  font-size: 0.86rem;
  font-weight: 900;
}

.settings-option input {
  width: 18px;
  min-height: 18px;
  accent-color: var(--green);
}

.topbar-title .secondary-btn {
  width: fit-content;
}

/* Single canonical .metrics container. Two tiers: a 3-chip PRIMARY row
   (Cash / Net worth / Week, larger + bolder) and a compact SECONDARY strip
   for the remaining status chips. This replaces the old flat 10-12 chip wall. */
.metrics {
  display: grid;
  gap: 8px;
  min-width: min(600px, 100%);
}

.metrics-primary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.metrics-secondary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: 6px;
}

/* .metric skin (border/radius/background) is defined once in the final dark
   metric layer; this layer keeps only padding + the active-license accent. */
.metric {
  padding: 10px;
}

/* Primary chips: bigger, bolder, with a gold-tinted lift so the money/time
   stats read as the top of the topbar hierarchy. */
.metrics-primary .metric {
  padding: 12px 14px;
  background: rgba(212, 175, 55, 0.09);
  border-color: var(--tfs-border-strong);
}

.metrics-primary .metric span {
  font-size: 0.74rem;
  color: var(--tfs-gold-bright);
}

.metrics-primary .metric strong {
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  color: var(--tfs-cream);
}

/* Secondary chips: quieter, denser. */
.metrics-secondary .metric {
  padding: 7px 9px;
}

.metrics-secondary .metric span {
  font-size: 0.66rem;
}

.metrics-secondary .metric strong {
  font-size: clamp(0.86rem, 1.1vw, 1.02rem);
}

.metric.license-active {
  background: rgba(212, 175, 55, 0.10);
  box-shadow: inset 0 -4px 0 rgba(15, 129, 127, 0.16);
}

.metric span {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
}

.metric strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(0.96rem, 1.3vw, 1.22rem);
  white-space: nowrap;
}

.corporate-status,
.career-status {
  flex: 1 1 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: rgba(212, 175, 55, 0.10);
  padding: 8px;
  box-shadow: inset 0 -4px 0 rgba(15, 129, 127, 0.16);
}

.corporate-status strong,
.corporate-status span,
.career-status strong,
.career-status span,
.corporate-benefit-list span {
  border: 1px solid var(--tfs-border);
  border-radius: 999px;
  background: var(--tfs-card);
  padding: 5px 8px;
  color: var(--tfs-cream);
  font-size: 0.72rem;
  font-weight: 900;
  line-height: 1.15;
}

.corporate-status strong,
.career-status strong {
  border-color: var(--line);
  background: var(--mint);
  text-transform: uppercase;
}

.stage {
  position: relative;
  overflow: hidden;
  min-height: 190px; /* V9: stage down ~25% on desktop */
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(49, 94, 137, 0.14);
  box-shadow: var(--shadow);
}

#sceneCanvas {
  width: 100%;
  height: clamp(190px, 22vw, 285px); /* V9: was clamp(250px, 30vw, 380px) */
  display: block;
}

.scene-overlay {
  position: absolute;
  inset: auto 14px 14px 14px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
  pointer-events: none;
}

.scene-overlay > * {
  pointer-events: auto;
}

.district-kicker {
  margin: 0 0 4px;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--tfs-card-2);
  padding: 5px 10px;
  color: var(--green-dark);
  font-size: 0.8rem;
  font-weight: 900;
}

#districtTitle {
  width: fit-content;
  max-width: min(640px, calc(100vw - 84px));
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card-2);
  padding: 8px 12px;
  font-size: clamp(1.7rem, 4vw, 3.6rem);
}

.icon-btn {
  width: 48px;
  min-width: 48px;
  background: var(--paper-strong);
}

.district-nav {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
}

.district-btn {
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card-2);
  padding: 10px;
  text-align: left;
  font-weight: 900;
  box-shadow: 4px 4px 0 var(--line);
}

.district-btn small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-weight: 800;
}

.district-btn.active {
  background: var(--gold);
}

/* V9: the ticker is now a one-line event banner (headline + impact chips +
   "?"); banner internals live in the "=== V9 UX ===" block at end of file.
   The old .ticker-title / .ticker p rules were removed — renderTicker no
   longer emits either element. The container keeps its shared panel skin. */
.ticker {
  display: block;
  padding: 10px 14px;
}

.text-link {
  border: 0;
  background: transparent;
  color: var(--green-dark);
  padding: 0;
  font-weight: 950;
  text-decoration: underline;
  box-shadow: none;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.42fr);
  gap: var(--section-gap); /* V9 rhythm token */
  align-items: start;
}

.panel {
  min-width: 0;
  padding: 14px;
}

.panel-heading {
  min-width: 0;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}

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

.deal-card,
.asset-card,
.log-entry {
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
}

.deal-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-height: 420px;
  overflow: hidden;
}

.deal-art {
  min-height: 116px;
  border-bottom: 1px solid var(--line);
  background: rgba(22, 163, 74, 0.10);
}

.deal-body {
  padding: 12px;
}

.deal-body h4,
.asset-card h4 {
  margin: 0;
  font-size: 1.12rem;
  line-height: 1.15;
}

.pitch {
  margin: 9px 0 12px;
  color: var(--tfs-muted);
  line-height: 1.4;
}

.diligence-box {
  margin: 10px 0 12px;
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-card);
  background: rgba(212, 175, 55, 0.06);
  padding: 10px;
}

.diligence-box strong {
  display: block;
  margin-bottom: 5px;
}

.diligence-box p,
.asset-thesis,
.action-help {
  margin: 0;
  color: var(--tfs-muted);
  line-height: 1.38;
}

.diligence-box .deal-shape {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--tfs-border);
  font-size: 0.84rem;
}

/* action-help now lives inside the diligence-box as a .deal-shape row, so it
   inherits the box's border-top separation rather than being its own panel. */
.diligence-box .action-help {
  font-size: 0.84rem;
  color: var(--tfs-muted);
}

/* V9: the only standalone action-help left in a deal body is the conditional
   .action-help.warn chip (override buy / rival clock), whose skin lives in the
   "=== V9 UX ===" block and wins the cascade over this base spacing. */
.deal-body > .action-help {
  margin: 10px 0 0;
  font-size: 0.84rem;
}

.deal-stats,
.asset-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.stat {
  padding: 8px;
}

.stat span {
  display: block;
  color: var(--muted);
  font-size: 0.7rem;
  font-weight: 850;
  text-transform: uppercase;
}

.stat strong {
  display: block;
  margin-top: 3px;
}

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

.tag {
  padding: 4px 8px;
  font-size: 0.74rem;
}
/* Tag variant colors are defined once in the dark layer after the base .tag
   (search "TAG VARIANTS — dark"). The old light-on-light variants were removed. */

.risk-pill {
  display: inline-flex;
  background: rgba(212, 175, 55, 0.10);
}

.deal-actions,
.asset-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 10px;
}

.deal-actions .primary-btn {
  grid-column: span 1;
}

.deal-actions {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* "More actions & diligence" disclosure — keeps the resting card calm.
   Only Buy + Question Owner show at rest; secondary actions live here. */
.deal-more {
  border-top: 1px solid var(--line);
}

.deal-more > summary {
  list-style: none;
  cursor: pointer;
  padding: 9px 12px;
  color: var(--tfs-gold-bright);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  user-select: none;
  transition: background 0.15s ease;
}

.deal-more > summary::-webkit-details-marker {
  display: none;
}

.deal-more > summary::after {
  content: "▾";
  float: right;
  font-size: 0.9em;
  opacity: 0.7;
  transition: transform 0.15s ease;
}

.deal-more[open] > summary::after {
  transform: rotate(180deg);
}

.deal-more > summary:hover {
  background: rgba(212, 175, 55, 0.07);
}

.deal-more-body {
  padding: 0 12px 12px;
}

/* Inside the disclosure the secondary action grid and the diligence row no
   longer need their own top hairline — the summary already separates them. */
.deal-more-body .deal-actions-secondary {
  border-top: 0;
  padding: 0 0 8px;
}

.deal-more-body .diligence-actions {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

/* .tab skin (background/active) is defined once in the final dark button
   layer; this keeps only sizing + type. */
.tab {
  min-height: 34px;
  padding: 0 9px;
  font-size: 0.82rem;
}

.asset-list,
.log-list {
  display: grid;
  gap: 10px;
}

.leaderboard-shell {
  display: grid;
  gap: 10px;
}

.market-shell {
  display: grid;
  gap: 10px;
}

.market-summary,
.holdings-panel,
.watchlist-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
  padding: 10px;
}

.market-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.market-heading,
.holding-row,
.stock-row {
  display: grid;
  gap: 8px;
  align-items: center;
}

.market-heading {
  grid-template-columns: 1fr auto;
  margin-bottom: 10px;
}

.market-heading h4,
.market-heading p {
  margin: 0;
}

.holdings-list,
.watchlist-list {
  display: grid;
  gap: 8px;
}

.holding-row {
  grid-template-columns: 0.8fr 0.7fr 1fr 0.8fr;
  border-top: 1px solid rgba(23, 33, 28, 0.14);
  padding-top: 8px;
  font-size: 0.88rem;
}

.stock-row {
  grid-template-columns: minmax(140px, 1.4fr) minmax(72px, 0.7fr) minmax(68px, 0.6fr) minmax(260px, 1.7fr);
  border: 1px solid rgba(23, 33, 28, 0.16);
  border-radius: var(--radius-button);
  padding: 8px;
}

.stock-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.stock-identity span {
  color: var(--tfs-muted);
  font-size: 0.78rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stock-held-note {
  display: inline-block;
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(44, 122, 82, 0.12);
  color: var(--forest, #2C7A52);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.02em;
}

.stock-price,
.stock-change {
  font-weight: 800;
}

.stock-actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

/* === Custom-share trade panel inside each stock row === */
.stock-trade {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.stock-mode-row {
  display: flex;
  justify-content: flex-end;
}
.stock-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: var(--tfs-card);
}
.stock-mode-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 3px 12px;
  font: inherit;
  font-weight: 700;
  font-size: 0.74rem;
  cursor: pointer;
  color: var(--ink, #1B2520);
  line-height: 1.4;
}
.stock-mode-toggle button + button {
  border-left: 1px solid var(--line);
}
.stock-mode-toggle button.active {
  background: var(--forest, #2C7A52);
  color: #fff;
}
.stock-mode-toggle button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.stock-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
}
.stock-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.stock-input-prefix {
  position: absolute;
  left: 8px;
  font-weight: 800;
  color: var(--tfs-muted);
  pointer-events: none;
}
.stock-input-wrap.is-dollars .stock-shares-input {
  padding-left: 18px;
}
.stock-shares-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  padding: 6px 8px;
  font: inherit;
  font-size: 0.92rem;
  background: var(--tfs-card);
  color: var(--ink, #1B2520);
  -moz-appearance: textfield;
}
.stock-shares-input::-webkit-outer-spin-button,
.stock-shares-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.stock-shares-input:focus {
  outline: 2px solid var(--forest, #2C7A52);
  outline-offset: 1px;
}
.stock-quick-chips {
  display: inline-flex;
  gap: 4px;
}
.stock-quick-chips .chip {
  appearance: none;
  border: 1.5px solid var(--line);
  background: var(--tfs-card);
  border-radius: 999px;
  padding: 3px 9px;
  font: inherit;
  font-weight: 700;
  font-size: 0.72rem;
  cursor: pointer;
  color: var(--ink, #1B2520);
  line-height: 1.2;
}
.stock-quick-chips .chip:hover:not(:disabled) {
  background: var(--paper, #F5EDD8);
}
.stock-quick-chips .chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.stock-trade-meta {
  font-size: 0.74rem;
  color: var(--tfs-muted);
  min-height: 1em;
}
.stock-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.stock-actions-row > button:only-child {
  grid-column: 1 / -1;
}

/* Mobile: stack identity / price / change / trade vertically */
@media (max-width: 720px) {
  .stock-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .stock-row .stock-price,
  .stock-row .stock-change {
    text-align: left;
  }
  .stock-input-row {
    grid-template-columns: 1fr;
  }
  .stock-quick-chips {
    justify-self: start;
  }
}

/* === S&P 500 Market controls: search + sector + view-mode toggle === */
.market-controls {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 8px;
  align-items: center;
  margin: 6px 0 12px;
}

.market-view-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  overflow: hidden;
  background: var(--tfs-card);
}
.market-view-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--ink, #1B2520);
}
.market-view-toggle button + button {
  border-left: 1px solid var(--line);
}
.market-view-toggle button.active {
  background: var(--forest, #2C7A52);
  color: #fff;
}

.market-search,
.market-sector {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.market-search input,
.market-sector select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  padding: 6px 10px;
  font: inherit;
  font-size: 0.88rem;
  background: var(--tfs-card);
  color: var(--ink, #1B2520);
}
.market-search input:focus,
.market-sector select:focus {
  outline: 2px solid var(--forest, #2C7A52);
  outline-offset: 1px;
}

.market-truncated-note {
  margin: 4px 0 8px;
  font-size: 0.78rem;
  color: var(--tfs-muted);
  font-style: italic;
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Make the watchlist scroll when 100+ rows are shown */
.watchlist-list {
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 2px;
}

/* Mobile: stack the market controls */
@media (max-width: 720px) {
  .market-controls {
    grid-template-columns: 1fr 1fr;
  }
  .market-view-toggle {
    grid-column: 1 / -1;
  }
  .market-search {
    grid-column: 1 / -1;
  }
  .market-sector {
    grid-column: 1 / 2;
  }
  .market-controls > .secondary-btn.compact {
    grid-column: 2 / 3;
    justify-self: end;
  }
  .watchlist-list {
    max-height: 70vh;
  }
}

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

.leaderboard-header h4,
.leaderboard-submit h4 {
  margin: 0;
}

.period-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.leaderboard-note {
  margin: 0;
  color: var(--tfs-muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.leaderboard-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
  font-size: 0.88rem;
}

.leaderboard-table th,
.leaderboard-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(23, 33, 28, 0.18);
  text-align: left;
  vertical-align: top;
}

.leaderboard-table th {
  background: rgba(22, 163, 74, 0.08);
  color: var(--green-dark);
  font-size: 0.72rem;
  text-transform: uppercase;
}

.leaderboard-table tr:last-child td {
  border-bottom: 0;
}

.leaderboard-table td span {
  display: block;
  margin-top: 2px;
  color: #68766f;
  font-size: 0.72rem;
  font-weight: 800;
}

.muted-cell {
  color: #68766f;
  line-height: 1.35;
}

.leaderboard-submit {
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: rgba(212, 175, 55, 0.08);
  padding: 12px;
}

.leaderboard-submit p {
  margin: 6px 0 0;
  color: var(--tfs-muted);
  line-height: 1.36;
}

.score-form {
  display: grid;
  gap: 9px;
  margin-top: 10px;
}

.score-form label {
  display: grid;
  gap: 4px;
  color: var(--tfs-muted);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.score-form input[type="text"],
.score-form input[type="email"],
.score-form input:not([type]) {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 0 10px;
  background: var(--tfs-card);
  color: var(--ink);
  font: inherit;
  text-transform: none;
}

.score-form .check-label {
  align-items: start;
  grid-template-columns: auto 1fr;
  font-size: 0.76rem;
  line-height: 1.3;
  text-transform: none;
}

.score-form .check-label input {
  margin-top: 2px;
}

.score-message {
  margin-top: 10px;
  border: 1px dashed var(--tfs-border);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
  padding: 8px;
  color: var(--tfs-muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.score-message.good {
  border-style: solid;
  background: rgba(22, 163, 74, 0.08);
  color: var(--green-dark);
  font-weight: 900;
}

.synergy-board {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.synergy-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: rgba(49, 94, 137, 0.12);
  padding: 10px;
}

.synergy-card strong,
.synergy-card span {
  display: block;
}

.synergy-card span {
  margin-top: 3px;
  color: var(--green-dark);
  font-size: 0.78rem;
  font-weight: 900;
  text-transform: uppercase;
}

.synergy-card p {
  margin: 6px 0 0;
  color: var(--tfs-muted);
  line-height: 1.35;
}

.asset-card {
  padding: 12px;
}

.asset-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 0;
}

.asset-actions {
  grid-template-columns: 1fr 1fr;
  margin: 10px -12px -12px;
}

.asset-actions.single-action {
  grid-template-columns: 1fr;
}

.asset-actions.property-actions {
  grid-template-columns: 1fr;
}

.asset-actions.business-actions {
  grid-template-columns: 1fr;
}

.asset-growth-read {
  margin-top: 10px;
  background: rgba(212, 175, 55, 0.08);
}

.upgrade-grid {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.upgrade-hint {
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--ink-soft);
  background: rgba(196, 155, 74, 0.08);
  border: 1px solid rgba(196, 155, 74, 0.28);
  border-radius: 8px;
  padding: 8px 10px;
  margin: 0;
}
.upgrade-hint strong { color: var(--ink); }

.upgrade-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(110px, 0.34fr);
  gap: 8px;
  align-items: start;
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
  padding: 8px;
}

.upgrade-row strong,
.upgrade-row span {
  display: block;
}

.upgrade-row p {
  margin: 3px 0 0;
  color: var(--tfs-muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.upgrade-effect {
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-button);
  background: rgba(22, 163, 74, 0.08);
  padding: 7px;
  color: var(--green-dark);
  font-size: 0.76rem;
  font-weight: 900;
  line-height: 1.22;
}

.synergy-hint {
  margin: 10px 0 0;
  background: rgba(212, 175, 55, 0.10);
}

.location-list {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

.location-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-button);
  background: rgba(22, 163, 74, 0.06);
  padding: 7px;
  font-size: 0.8rem;
}

.location-row strong,
.location-row span {
  min-width: 0;
}

.property-board {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.property-board-heading {
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.property-board-heading h4 {
  margin: 0;
  font-family: var(--display-font);
  font-size: 1.2rem;
}

.property-card .deal-art {
  background: rgba(22, 163, 74, 0.08);
}

.property-card .deal-actions {
  grid-template-columns: 1fr 1fr;
}

.property-read {
  background: rgba(22, 163, 74, 0.08);
}

.property-asset {
  background: rgba(22, 163, 74, 0.06);
}

.property-team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0;
}

.team-member {
  min-width: 0;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-button);
  background: var(--tfs-card-2);
  padding: 7px;
}

.team-avatar {
  width: 54px;
  height: 54px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: rgba(22, 163, 74, 0.08);
}

.team-member strong,
.team-member span {
  display: block;
}

.team-member strong {
  font-size: 0.86rem;
  line-height: 1.08;
}

.team-member span {
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.22;
}

.compact-team {
  grid-template-columns: 1fr;
}

.empty-state {
  border: 1px dashed var(--tfs-border);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
  padding: 16px;
  color: var(--muted);
  line-height: 1.45;
}

.bank-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}

.loan-note {
  margin: 12px 0 0;
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-button);
  background: rgba(212, 175, 55, 0.08);
  padding: 9px;
  color: var(--tfs-muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.log-entry {
  padding: 10px;
  color: var(--tfs-muted);
  line-height: 1.35;
}

.log-entry strong {
  color: var(--ink);
}

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

.school-shell {
  display: grid;
  gap: 10px;
}

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

.skill-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
  padding: 12px;
  overflow: hidden;
}

.skill-card h4 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.15;
}

.skill-card p {
  margin: 0;
  color: var(--tfs-muted);
  line-height: 1.36;
}

.skill-card .secondary-btn {
  width: 100%;
  margin-top: auto;
}

.skill-progress {
  display: grid;
  gap: 6px;
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-button);
  background: rgba(22, 163, 74, 0.06);
  padding: 8px;
}

.skill-progress-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: var(--green-dark);
  font-size: 0.74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.skill-progress-meta span,
.skill-progress-meta strong {
  min-width: 0;
}

.skill-progress-meta strong {
  text-align: right;
}

.skill-segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

.skill-segments span {
  min-height: 14px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(212, 175, 55, 0.08);
}

.skill-segments span.filled {
  background: var(--mint);
}

.skill-segments span.next {
  background: rgba(212, 175, 55, 0.10);
}

.skill-callout {
  margin: 0;
}

.lesson-card,
.term-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
  padding: 12px;
}

.lesson-card {
  display: grid;
  gap: 8px;
}

.lesson-card h4,
.term-card strong {
  display: block;
  margin: 0;
  color: var(--ink);
}

.lesson-card p,
.term-card p {
  margin: 0;
  color: var(--tfs-muted);
  line-height: 1.38;
}

.corporate-benefit-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lesson-card ol {
  margin: 0;
  padding-left: 20px;
  color: var(--tfs-muted);
  line-height: 1.45;
}

.term-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 8px;
}

.term-card {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 7px;
}

.comic-modal {
  position: fixed;
  inset: 0;
  /* Above the site header (z-index 60) so the nav can't paint over the modal's
     title/close on tall content. Travel/hiring/recovery already sit at 90+. */
  z-index: 70;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(23, 33, 28, 0.54);
}

.interview-modal {
  position: fixed;
  inset: 0;
  /* Above the site header (z-index 60) — the header was clipping the interview
     title and close button at the top of the viewport. */
  z-index: 72;
  display: grid;
  place-items: start center;
  overflow: auto;
  padding: 18px;
  background: rgba(23, 33, 28, 0.54);
}

.comic-card {
  position: relative;
  width: min(960px, 100%);
  min-height: 460px;
  display: grid;
  grid-template-columns: minmax(270px, 0.42fr) 1fr;
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius);
  background:
    radial-gradient(circle, rgba(245, 241, 232, 0.05) 1px, transparent 1px),
    var(--tfs-card);
  background-size: 10px 10px;
  box-shadow: var(--tfs-shadow);
  overflow: hidden;
}

.comic-toast-stack {
  position: fixed;
  left: 50%;
  right: auto;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 32;
  width: min(520px, calc(100vw - 24px));
  display: grid;
  gap: 8px;
  pointer-events: none;
  transform: translateX(-50%);
}

.comic-toast {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--tfs-card);
  box-shadow: 4px 4px 0 var(--line);
  padding: 10px 12px;
  color: var(--ink);
  animation: comic-toast-in 160ms ease-out;
}

.comic-toast strong,
.comic-toast span {
  display: block;
}

.comic-toast strong {
  font-size: 0.88rem;
  font-weight: 950;
}

.comic-toast span {
  margin-top: 3px;
  color: var(--tfs-muted);
  font-size: 0.82rem;
  font-weight: 750;
  line-height: 1.25;
}

@keyframes comic-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.interview-card {
  width: min(1120px, 100%);
  max-height: calc(100vh - 36px);
  overflow: auto;
  border: 4px solid var(--line);
  border-radius: var(--radius);
  background: var(--tfs-card-2);
  box-shadow: 12px 12px 0 var(--line);
}

.interview-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
  border-bottom: 1px solid var(--line);
  background: var(--tfs-card-2);
  padding: 16px;
}

.interview-header h2 {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(1.6rem, 4vw, 3.4rem);
  line-height: 0.98;
}

.interview-header p:not(.eyebrow) {
  margin: 8px 0 0;
  color: var(--muted);
  font-weight: 800;
}

.interview-header .close-btn {
  position: static;
  flex: 0 0 auto;
  /* Labeled exit pill — a tiny "x" wasn't reading as "leave the interview".
     Auto width fits the "Close ✕" label set in index.html. */
  width: auto;
  min-width: 0;
  padding: 0 16px;
  min-height: 40px;
  white-space: nowrap;
  font-weight: 850;
  font-size: 0.92rem;
  letter-spacing: 0.01em;
  /* High contrast on the LIGHT cream interview header. The inherited
     near-transparent cream-on-cream `.close-btn` made it nearly invisible.
     Explicit dark hex (NOT var(--forest-deep) — that's remapped to gold in the
     dark theme, which gave gold-on-gold) so the dark gold-bordered pill always
     reads clearly as the exit. */
  background: #14241b;
  color: var(--tfs-gold-bright, #F4CF5E);
  border: 1px solid var(--tfs-gold, #D4AF37);
  box-shadow: 2px 2px 0 rgba(10, 20, 15, 0.35);
}

.interview-header .close-btn:hover {
  background: #0c1812;
  color: #ffffff;
  border-color: var(--tfs-gold-bright, #F4CF5E);
}

/* Freeze the page behind any open dialog so the background can't scroll out
   from under the player. The modal's own scroll container owns the scroll. */
body.modal-open {
  overflow: hidden;
}

.interview-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.3fr) minmax(0, 1fr) minmax(210px, 0.28fr);
  gap: 14px;
  align-items: start;
  padding: 16px;
}

.interview-question-list {
  display: grid;
  align-content: start;
  gap: 8px;
}

.question-btn {
  min-height: 58px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
  padding: 9px;
  text-align: left;
  font-weight: 900;
}

.question-btn span,
.question-btn small {
  display: block;
}

.question-btn small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
}

.question-btn.active {
  background: var(--gold);
}

.question-btn.good {
  background: rgba(22, 163, 74, 0.10);
}

.question-btn.bad {
  background: rgba(214, 107, 79, 0.12);
}

.interview-main {
  display: grid;
  gap: 12px;
}

.interview-visual {
  position: sticky;
  top: 96px;
}

.interview-scene {
  height: min(44vh, 380px);
  min-height: 240px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background:
    radial-gradient(circle at 50% 36%, rgba(255, 244, 205, 0.96), rgba(244, 191, 73, 0.42) 45%, rgba(23, 33, 28, 0.88) 86%),
    #17211c;
  overflow: hidden;
}

.interview-scene img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center bottom;
}

.owner-answer,
.interview-transcript,
.advisor-read,
.owner-profile {
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
  padding: 14px;
}

.owner-profile {
  display: grid;
  gap: 4px;
  background: rgba(212, 175, 55, 0.08);
}

.owner-profile strong,
.owner-profile span {
  display: block;
}

.owner-profile span {
  color: var(--tfs-muted);
  line-height: 1.35;
}

.owner-answer h3 {
  margin: 0;
  font-size: 1.25rem;
}

.answer-line {
  margin: 14px 0;
  color: var(--tfs-muted);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
  line-height: 1.35;
}

.tell-line,
.evidence-note {
  margin: 0;
  color: var(--tfs-muted);
  line-height: 1.4;
}

.advisor-read {
  background: rgba(22, 163, 74, 0.08);
}

.advisor-read.good {
  background: rgba(22, 163, 74, 0.08);
}

.advisor-read.bad {
  background: rgba(214, 107, 79, 0.10);
}

.advisor-read p:not(.eyebrow) {
  margin: 0;
  color: var(--tfs-muted);
  line-height: 1.42;
}

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

.challenge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.interview-transcript {
  display: grid;
  gap: 8px;
}

.interview-transcript-item {
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-button);
  padding: 9px;
}

.interview-transcript-item strong,
.interview-transcript-item span {
  display: block;
}

.interview-transcript-item span {
  margin-top: 3px;
  color: var(--tfs-muted);
}

.interview-transcript-item.good {
  background: rgba(22, 163, 74, 0.08);
}

.interview-transcript-item.bad {
  background: rgba(214, 107, 79, 0.10);
}

.close-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  width: 38px;
  min-height: 38px;
  background: var(--tfs-card);
  box-shadow: 2px 2px 0 var(--line);
}

.comic-art {
  min-height: 420px;
  border-right: 4px solid var(--line);
  background:
    conic-gradient(from 20deg, rgba(242, 184, 75, 0.75) 0 12deg, transparent 12deg 24deg),
    #bfe7d4;
  display: grid;
  place-items: center;
  padding: 12px;
  overflow: hidden;
}

.warren-art-wrap,
.advisor-art-wrap {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}

.warren-art-wrap > *,
.advisor-art-wrap > * {
  grid-area: 1 / 1;
}

.warren-fallback,
.advisor-fallback {
  width: 100%;
  height: 100%;
}

.warren-fallback[hidden],
.advisor-fallback[hidden] {
  display: none;
}

.warren-panel,
.advisor-panel {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  image-rendering: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card-2);
}

.warren-art-wrap > .warren-panel {
  grid-area: 1 / 1;
}

.warren-panel.generated {
  z-index: 3;
}

.warren-panel.legacy {
  z-index: 2;
}

.warren-fallback {
  z-index: 1;
}

.poster-warren .warren-art-wrap {
  overflow: hidden;
}

.poster-warren .warren-fallback {
  display: none;
}

.poster-burst {
  display: none;
}

.poster-panel {
  background:
    radial-gradient(circle at 65% 22%, rgba(212, 175, 55, 0.20), transparent 34%),
    linear-gradient(145deg, rgba(12, 42, 31, 0.95), rgba(10, 9, 7, 0.98) 62%, rgba(29, 23, 12, 0.96));
}

.advisor-panel.badge,
.property-team .advisor-panel {
  object-fit: cover;
}

#comicSpeaker {
  text-transform: none;
  font-size: 0.84rem;
}

.warren-panel.questioning {
  object-position: 59% 45%;
}

.warren-panel.calculating {
  object-position: 54% 38%;
}

.warren-panel.working {
  object-position: 49% 50%;
}

.warren-panel.worried {
  object-position: 48% 43%;
}

.warren-panel.celebrate {
  object-position: 54% 42%;
}

/* === 2026-05-14 readability and premium-art cleanup ===
   (--game-* tokens are now defined once in the consolidated :root.) */
.premium-art-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: end start;
  padding: 12px;
  color: rgba(255, 226, 122, 0.76);
  background:
    radial-gradient(circle at 70% 24%, rgba(244, 207, 94, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(15, 92, 69, 0.62), rgba(13, 11, 8, 0.96) 68%);
  border: 1px solid rgba(244, 207, 94, 0.24);
  font-family: var(--number-font);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.ai-art.loaded .premium-art-fallback,
.warren-art-wrap.loaded .premium-art-fallback,
.advisor-art-wrap.loaded .premium-art-fallback {
  display: none;
}

.ai-art-fallback,
.warren-fallback,
.advisor-fallback {
  display: none;
}

.deal-card,
.asset-card,
.property-card,
.log-entry,
.lesson-card,
.term-card {
  color: var(--game-cream);
  background:
    linear-gradient(180deg, rgba(244, 207, 94, 0.055), transparent 32%),
    linear-gradient(135deg, rgba(15, 92, 69, 0.18), transparent 46%),
    var(--game-surface);
  border-color: var(--game-line);
}

.deal-card h4,
.asset-card h4,
.property-card h4,
.lesson-card h4,
.term-card strong {
  color: var(--tfs-gold-bright);
}

.pitch,
.deal-card p,
.asset-card p,
.property-card p,
.lesson-card p,
.term-card p,
.asset-thesis {
  color: var(--game-cream);
}

/* .action-help excluded — it nests in .diligence-box and inherits that fill. */
.diligence-box,
.asset-growth-read,
.property-read,
.property-asset,
.upgrade-row,
.location-row,
.empty-state,
.team-member {
  color: var(--game-cream);
  background:
    linear-gradient(180deg, rgba(245, 241, 232, 0.045), transparent 48%),
    var(--game-surface-2);
  border-color: var(--game-line);
}

.diligence-box strong,
.diligence-box .deal-shape strong,
.property-board-heading h4,
.team-member strong,
.owned-eyebrow {
  color: var(--game-gold-text);
}

.diligence-box p,
.diligence-box .deal-shape,
.action-help,
.team-member span,
.upgrade-row p,
.empty-state,
.last-improvement-line {
  color: var(--game-cream);
}

/* .stat visual skin is defined once in the consolidated .stat rule below;
   this layer only keeps the text color for bare stats. */
.stat {
  color: var(--tfs-cream);
}

.stat span {
  color: var(--game-muted-gold);
}

.stat strong,
.metric strong,
.positive {
  color: var(--game-gold-text);
}

.negative {
  color: #ff9a82;
}

.upgrade-effect,
.synergy-hint,
.location-row,
.asset-meta .tag,
.tags .tag,
.risk-pill {
  color: var(--game-gold-text);
  background: rgba(12, 10, 7, 0.74);
  border-color: rgba(244, 207, 94, 0.42);
}

/* Tag variant colors consolidated into the dark tag layer below
   ("TAG VARIANTS — dark"). */

.deal-art,
.property-card .deal-art,
.team-avatar {
  background: var(--game-surface-3);
  border-color: var(--game-line);
}

.primary-btn:disabled,
.secondary-btn:disabled,
button:disabled {
  color: rgba(247, 240, 223, 0.66);
  -webkit-text-fill-color: rgba(247, 240, 223, 0.66);
  background: rgba(46, 38, 23, 0.72);
  border-color: rgba(244, 207, 94, 0.26);
}

.advisor-gator {
  width: 100%;
  height: 100%;
  display: block;
}

.comic-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(24px, 5vw, 54px);
}

.comic-copy h2 {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(2rem, 5vw, 4.8rem);
  line-height: 0.92;
}

.comic-copy p:not(.eyebrow) {
  margin: 20px 0 24px;
  color: var(--tfs-muted);
  font-size: clamp(1rem, 2vw, 1.34rem);
  line-height: 1.45;
}

.comic-choices {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.story-choice {
  height: auto;
  min-height: 70px;
  display: grid;
  gap: 3px;
  align-content: center;
  text-align: left;
  padding: 10px 12px;
}

.story-choice strong,
.story-choice span {
  display: block;
}

.story-choice span {
  color: var(--tfs-muted);
  font-size: 0.86rem;
  font-weight: 750;
  line-height: 1.3;
}

.negative {
  color: var(--tfs-danger);
}

.positive {
  color: #4ade80;
}

.mono {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 1180px) {
  .deal-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .metrics-secondary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .workspace,
  .start-screen {
    grid-template-columns: 1fr;
  }

  /* iPad portrait fix: 6-col district nav (~624px min) overflows. Drop to 3-col. */
  .district-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }

  /* iPad portrait fix: panel headings stack vertically. V9: .topbar removed
     from this selector — the title row must stay one line; metrics stack under
     it naturally via flex-wrap (.topbar-title / .metrics are flex: 1 1 100%). */
  .panel-heading {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 10px;
  }

  .start-copy {
    min-height: auto;
    padding: 24px;
  }

  /* V9: .ticker removed from this list — the event banner is flex and wraps
     naturally. */
  .start-actions,
  .district-nav,
  .deal-grid,
  .school-grid,
  .comic-card,
  .interview-layout,
  .tactic-grid,
  .challenge-grid {
    grid-template-columns: 1fr;
  }

  /* Keep the ledger metrics compact on phones — a 1-col stack pushed the deal
     desk ~7 screen-heights below the fold. Primary stays 3-up, secondary 2-up. */
  .metrics-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* V9: .topbar removed (title row stays one line; metrics wrap below it).
     The old full-width .topbar-title .secondary-btn rule died with it. */
  .panel-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .poster-panel {
    min-height: 430px;
  }

  .poster-warren {
    inset: 12px 12px 86px;
  }

  .workspace {
    grid-template-columns: 1fr;
  }

  .interview-card {
    max-height: calc(100vh - 20px);
  }

  .interview-header h2 {
    font-size: 2.15rem;
  }

  .interview-question-list {
    max-height: 210px;
    overflow: auto;
  }

  .interview-visual {
    position: static;
  }

  .interview-scene {
    height: 140px;
    min-height: 140px;
  }

  .comic-art {
    min-height: 250px;
    border-right: 0;
    border-bottom: 4px solid var(--line);
  }
}

/* === Mobile (≤480px) — added 2026-05-08 per codex review ============== */
@media (max-width: 760px) {
  html, body {
    overflow-x: hidden;
  }

  .app-shell {
    width: 100%;
    max-width: 100vw;
    padding: 10px;
    overflow-x: hidden;
  }

  .topbar {
    gap: 8px;
    padding: 8px;
    align-items: center;
  }

  .topbar-title {
    min-width: 0;
    font-size: 0.95rem;
    line-height: 1.1;
  }

  .topbar-actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin-left: auto;
  }

  .topbar-actions .primary-btn,
  .topbar-actions .secondary-btn,
  .topbar-actions .icon-btn {
    min-height: 36px;
    padding: 6px 9px;
    font-size: 0.78rem;
    white-space: nowrap;
  }

  .settings-option {
    right: auto;
    left: 0;
  }

  /* Metrics: secondary chips become a 2-column grid (~360px instead of ~720px);
     the primary money row keeps its own 3-up layout. */
  .metrics-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .metric {
    min-width: 0;
    padding: 8px;
  }

  .metric span {
    font-size: 0.62rem;
    line-height: 1.1;
  }

  .metric strong {
    font-size: clamp(0.9rem, 4vw, 1.05rem);
    overflow-wrap: anywhere;
    white-space: normal;
  }

  .stage {
    min-width: 0;
    overflow: hidden;
  }

  #sceneCanvas {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .scene-overlay {
    left: 8px;
    right: 8px;
    max-width: calc(100vw - 36px);
  }

  /* District nav: 2 columns instead of 6 vertical rows */
  .district-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .district-btn {
    min-width: 0;
    min-height: 48px;
    padding: 8px;
    font-size: 0.82rem;
    line-height: 1.1;
  }

  .district-btn small {
    font-size: 0.7rem;
    line-height: 1.15;
  }

  .ticker {
    max-width: 100%;
    overflow: hidden;
  }

  .workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    min-width: 0;
  }

  .panel {
    min-width: 0;
    padding: 10px;
  }

  .panel-heading {
    gap: 8px;
  }

  .deal-grid,
  .school-grid,
  .tactic-grid,
  .challenge-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .deal-card,
  .asset-card {
    min-width: 0;
    overflow: hidden;
  }

  .deal-art {
    min-height: 120px;
  }

  .deal-body {
    padding: 10px;
  }

  .deal-body h4,
  .asset-card h4 {
    font-size: 1rem;
    line-height: 1.15;
  }

  .deal-stats,
  .asset-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .upgrade-row {
    grid-template-columns: 1fr;
  }

  .location-row {
    grid-template-columns: 1fr;
  }

  /* Deal/asset action buttons: 1 column, ≥48px tap targets.
     .property-card .deal-actions has 0,2,0 specificity → must match it
     to override at the same specificity (mine wins via cascade order). */
  .deal-actions,
  .asset-actions,
  .property-card .deal-actions,
  .property-card .asset-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
  }

  .deal-actions .primary-btn,
  .deal-actions .secondary-btn,
  .asset-actions .primary-btn,
  .asset-actions .secondary-btn,
  .property-card .deal-actions .primary-btn,
  .property-card .deal-actions .secondary-btn {
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    font-size: 0.9rem;
    line-height: 1.1;
    white-space: normal;
  }

  /* Modals must fit the iPhone visible area MINUS Safari's toolbar.
     dvh = dynamic viewport height (excludes UI chrome). */
  .comic-modal,
  .interview-modal {
    /* Bump horizontal padding from 8px → 14px and honor the landscape
       safe-area insets so notched iPhones don't push the card right to
       the screen edge. */
    padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
    align-items: start;
  }

  .comic-card,
  .interview-card {
    width: 100%;
    /* Was 100vw - 16px which looked slightly too wide on iPhone. New gutter
       totals 28px (14px each side from modal padding) plus a touch more
       from the card cap — comfortable margin on a 390px viewport. */
    max-width: calc(100vw - 28px);
    max-height: calc(100vh - 24px);
    min-height: 0;
    padding: 12px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
  }

  .comic-card {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .comic-card > .close-btn {
    position: sticky;
    top: 0;
    justify-self: end;
    margin: 0 0 -38px;
    z-index: 4;
  }

  .comic-art {
    min-height: 0;
    max-height: 38vh;
  }

  .comic-copy {
    font-size: 0.92rem;
  }

  /* Interview heading: was 2.15rem → wrapped to 4 lines on phones */
  .interview-header {
    gap: 10px;
    padding: 12px;
  }

  .interview-header h2 {
    font-size: clamp(1.25rem, 6.5vw, 1.5rem);
    line-height: 1.1;
  }

  .interview-layout {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .interview-question-list {
    max-height: 200px;
    overflow-y: auto;
  }

  .start-screen {
    padding: 12px;
  }

  .start-copy {
    font-size: 0.95rem;
  }

  .start-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .poster-panel {
    min-width: 0;
    padding: 10px;
  }

  .primary-btn,
  .secondary-btn,
  .icon-btn {
    max-width: 100%;
  }

  /* Score-submit form: must be tappable. min-height 38px is below Apple HIG. */
  .score-form input[type="text"],
  .score-form input[type="email"],
  .score-form input:not([type]) {
    min-height: 48px;
    font-size: 16px; /* ≥16px prevents iOS auto-zoom on focus */
    padding: 8px 12px;
  }

  .score-form .check-label {
    grid-template-columns: auto 1fr;
    font-size: 0.85rem;
    align-items: center;
  }

  .score-form .check-label input[type="checkbox"] {
    min-width: 22px;
    min-height: 22px;
  }
}

/* === TYPOGRAPHY === */
h1,
h2,
h3,
h4,
.panel h3,
.topbar h2,
#districtTitle,
.leaderboard-table td:first-child {
  font-family: var(--display-font);
  font-weight: 600;
}

.eyebrow,
.metric span,
.stat span,
.score-form label,
.skill-progress-meta,
.district-kicker {
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.metric strong,
.metric em,
.stat strong,
.leaderboard-table td:nth-child(3),
.leaderboard-table td:nth-child(4),
.leaderboard-table td:nth-child(5),
.location-row span,
.tag.basis-note {
  font-family: var(--number-font);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* === ELEVATION === */
.start-copy,
.poster-panel,
.panel,
.topbar,
.ticker,
.stage,
.deal-card,
.asset-card,
.lesson-card,
.term-card,
.skill-card,
.leaderboard-submit,
.synergy-card,
.corporate-status {
  border-color: var(--aged-line);
  box-shadow: var(--shadow-tier-1);
}

.deal-card,
.asset-card,
.lesson-card,
.term-card,
.skill-card,
.synergy-card {
  transition: transform 200ms ease-out, box-shadow 200ms ease-out, background 200ms ease-out;
}

.deal-card:hover,
.asset-card:hover,
.lesson-card:hover,
.term-card:hover,
.skill-card:hover,
.synergy-card:hover {
  background: var(--paper-elev-2);
  box-shadow: var(--shadow-tier-2);
  transform: translateY(-2px);
}

.comic-card,
.interview-card {
  box-shadow: var(--shadow-tier-3);
}

/* === MOTION === */
@keyframes metricFloat {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  20%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px);
  }
}

@keyframes closedDealPulse {
  0% {
    box-shadow: var(--shadow-tier-1), 0 0 0 rgba(196, 155, 74, 0);
    transform: scale(1);
  }
  45% {
    box-shadow: var(--shadow-tier-2), 0 0 0 8px rgba(196, 155, 74, 0.2);
    transform: scale(1.012);
  }
  100% {
    box-shadow: var(--shadow-tier-1), 0 0 0 rgba(196, 155, 74, 0);
    transform: scale(1);
  }
}

@keyframes seasonConfetti {
  0% {
    opacity: 0;
    background-position: 0 -40px, 24px -80px, 64px -120px;
  }
  12%,
  72% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-position: 0 360px, 24px 320px, 64px 300px;
  }
}

/* V5 juice: snappier close — deeper scale, slight tilt+drop, and a gold
   box-shadow bloom at 30% so a buy reads as a "stamp" not a shrug. */
@keyframes dealCardClosing {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg) translateY(0);
  }
  30% {
    opacity: 1;
    box-shadow: 0 0 0 3px rgba(244, 207, 94, 0.55), 0 0 34px rgba(244, 207, 94, 0.4);
  }
  100% {
    opacity: 0;
    transform: scale(0.92) rotate(-1deg) translateY(6px);
  }
}

.deal-card.closing {
  animation: dealCardClosing 260ms ease-in both;
  pointer-events: none;
}

@keyframes diligenceReveal {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.diligence-box.just-revealed {
  animation: diligenceReveal 180ms ease-out both;
}

.metric em {
  display: inline-block;
  margin-top: 4px;
  color: var(--forest-deep);
  font-size: 0.72rem;
  font-style: normal;
  animation: metricFloat 1600ms ease-out both;
}

.metric[data-trend="down"] em {
  color: var(--terracotta);
}

.asset-card.closed-deal {
  animation: closedDealPulse 600ms ease-out both;
}

.season-ended .game-screen {
  position: relative;
}

.season-ended .game-screen::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 18;
  pointer-events: none;
  background:
    radial-gradient(circle, rgba(196, 155, 74, 0.95) 0 3px, transparent 4px),
    radial-gradient(circle, rgba(44, 122, 82, 0.9) 0 2px, transparent 3px),
    radial-gradient(circle, rgba(201, 83, 58, 0.78) 0 2px, transparent 3px);
  /* V5 juice: ~30% denser confetti, two gentle loops ('both' fill — keyframe
     starts and ends at opacity 0, so the loop seam and the finish are clean). */
  background-size: 62px 64px, 78px 81px, 95px 87px;
  animation: seasonConfetti 1400ms ease-out 2 both;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}

/* === SHELL AND SURFACES === */
html,
body {
  background:
    linear-gradient(90deg, rgba(245, 241, 232, 0.018) 1px, transparent 1px),
    linear-gradient(180deg, rgba(245, 241, 232, 0.014) 1px, transparent 1px),
    linear-gradient(135deg, rgba(212, 175, 55, 0.10) 0%, rgba(10, 9, 7, 0) 40%),
    var(--tfs-bg);
  background-size: 72px 72px, 72px 72px, auto, auto;
  color: var(--ink);
}

.app-shell {
  padding: 24px;
}

.game-screen,
.workspace {
  gap: var(--section-gap); /* V9 rhythm token */
}

.start-copy,
.poster-panel,
.panel,
.topbar,
.ticker {
  border: 1px solid var(--aged-line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(135deg, rgba(255, 255, 250, 0.72), rgba(255, 252, 241, 0.88)),
    var(--paper-elev-1);
}

.panel {
  padding: 16px;
}

.panel-heading {
  gap: 16px;
  margin-bottom: 16px;
}

.panel h3,
.leaderboard-header h4,
.leaderboard-submit h4,
.lesson-card h4,
.skill-card h4,
.property-board-heading h4 {
  color: var(--tfs-gold-bright);
}

/* === BUTTONS AND INPUTS === */
input,
.score-form input[type="text"],
.score-form input[type="email"],
.score-form input:not([type]) {
  border: 1px solid var(--aged-line);
  border-radius: var(--radius-button);
  background: var(--paper-elev-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 1px 0 rgba(27, 37, 32, 0.08);
  color: var(--ink);
  font-weight: 500;
}

/* Shared button chrome (also covers .district-btn / .question-btn, which the
   final dark button layer near end-of-file does not re-list). Primary/secondary
   fills come from that final dark layer; this block only sets the hairline
   border, radius token, and shared motion. */
.primary-btn,
.secondary-btn,
.icon-btn,
.tab,
.close-btn,
.district-btn,
.question-btn {
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-button);
  color: var(--tfs-cream);
  font-weight: 800;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out, background 160ms ease-out, color 160ms ease-out;
}

.district-btn,
.question-btn {
  background: rgba(245, 241, 232, 0.05);
}

.primary-btn:hover,
.secondary-btn:hover,
.icon-btn:hover,
.tab:hover,
.close-btn:hover,
.district-btn:hover,
.question-btn:hover {
  transform: translateY(-2px);
}

.primary-btn:active,
.secondary-btn:active,
.icon-btn:active,
.tab:active,
.close-btn:active,
.district-btn:active,
.question-btn:active {
  transform: translateY(1px);
}

.primary-btn:disabled,
.secondary-btn:disabled,
.question-btn:disabled {
  box-shadow: none;
  opacity: 0.48;
}

/* === TOPBAR AND METRICS === */
.topbar {
  align-items: stretch;
  gap: 16px;
  padding: 16px;
}

.topbar-title {
  gap: 8px;
  min-width: min(100%, 320px);
}

.topbar h2 {
  color: var(--forest-deep);
  line-height: 1;
}

.topbar-actions {
  gap: 8px;
}

/* .metrics grid is defined once above (canonical). */

/* .metric skin (border/radius/background/shadow) comes from the final dark
   card+metric layer near end-of-file; this keeps only layout + trend marker. */
.metric {
  position: relative;
  min-height: 72px;
  overflow: hidden;
  padding: 12px;
}

.metric::after {
  content: "—";
  position: absolute;
  top: 10px;
  right: 12px;
  color: var(--ink-soft);
  font-family: var(--number-font);
  font-size: 0.8rem;
  font-weight: 700;
}

.metric[data-trend="up"]::after {
  content: "▲";
  color: var(--forest);
}

.metric[data-trend="down"]::after {
  content: "▼";
  color: var(--terracotta);
}

.metric span {
  color: var(--ink-soft);
}

.metric strong {
  margin-top: 8px;
  color: var(--ink);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.05;
}

.metric.license-active,
.metric.career-active {
  background: rgba(212, 175, 55, 0.14);
  box-shadow: inset 0 -3px 0 rgba(212, 175, 55, 0.55);
}

.corporate-status,
.career-status {
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-card);
  background: rgba(212, 175, 55, 0.08);
  padding: 8px;
}

.corporate-status strong,
.corporate-status span,
.career-status strong,
.career-status span,
.corporate-benefit-list span {
  border: 1px solid var(--tfs-border);
  border-radius: 999px;
  background: var(--paper-elev-1);
  color: var(--ink);
}

.corporate-status strong,
.career-status strong {
  background: var(--forest-deep);
  color: var(--paper-elev-1);
}

/* === DISTRICTS AND TABS === */
.district-nav {
  gap: 8px;
}

.district-btn {
  min-height: 72px;
  background:
    linear-gradient(135deg, rgba(255, 255, 250, 0.66), rgba(232, 221, 181, 0.9)),
    var(--parchment);
  padding: 12px;
}

.district-btn small {
  color: var(--ink-soft);
  font-weight: 600;
}

.district-btn.active {
  background: linear-gradient(180deg, var(--forest), var(--forest-deep));
  color: var(--paper-elev-1);
}

.district-btn.active small {
  color: rgba(255, 252, 241, 0.78);
}

.tabs,
.period-tabs {
  gap: 8px;
}

.tab {
  min-height: 36px;
  position: relative;
  padding: 0 12px;
  font-size: 0.82rem;
}

.tab.active {
  transform: translateY(1px);
}

/* === TAGS AND BADGES ===
   Base shape only; fills/text-color live once in the dark tag layer
   ("TAG VARIANTS — dark", after the base .tag). The old light-on-light
   variant fills were removed to fix the invisible-tag bug. */
.mini-rules span,
.tag,
.risk-pill {
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0;
}

/* === DEAL AND ASSET CARDS === */
.deal-grid {
  gap: 16px;
}

/* Card surface (border/radius/background) is defined once in the final dark
   card layer; this layer keeps only structural sizing/padding below. */
.deal-card,
.asset-card,
.log-entry {
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-card);
}

.deal-card {
  min-height: 420px;
}

.deal-art {
  min-height: 128px;
  border-bottom: 1px solid var(--tfs-border);
  background:
    linear-gradient(135deg, rgba(15, 92, 69, 0.55), rgba(212, 175, 55, 0.18)),
    var(--tfs-card-2);
}

.deal-body,
.asset-card {
  padding: 16px;
}

.deal-body h4,
.asset-card h4 {
  color: var(--forest-deep);
  font-size: 1.24rem;
  line-height: 1.12;
}

.pitch,
.diligence-box p,
.asset-thesis,
.action-help,
.lesson-card p,
.leaderboard-note {
  color: var(--ink-soft);
}

.diligence-box,
.asset-growth-read,
.property-read {
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-card);
  background: rgba(212, 175, 55, 0.06);
  padding: 12px;
}

.diligence-box strong,
.asset-growth-read strong {
  color: var(--tfs-gold-bright);
}

.deal-stats,
.asset-stats {
  gap: 8px;
  margin: 12px 0;
}

.stat {
  border: 1px solid rgba(212, 175, 55, 0.32);
  border-radius: 10px;
  background: rgba(244, 207, 94, 0.07);
  padding: 8px;
}

.stat span {
  color: var(--ink-soft);
}

.stat strong {
  margin-top: 4px;
  color: var(--ink);
}

.stat-hero {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.32);
  background: rgba(244, 207, 94, 0.07);
}

.stat-hero span {
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.stat-hero strong {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ink);
}

.stat-hero.positive strong {
  color: var(--game-gold-text);
}

.stat-hero.negative strong {
  color: #ff9a82;
}

.stat-hero.neutral strong {
  color: var(--ink-soft);
}

.diligence-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--tfs-border);
}

.diligence-actions-label {
  font-family: var(--body-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-right: 2px;
}

.deal-actions,
.asset-actions {
  gap: 8px;
  border-top: 1px solid var(--aged-line);
  padding: 12px;
}

.owned-eyebrow {
  margin: 12px 0 4px;
  color: var(--ink-soft);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.asset-meta {
  gap: 8px;
  margin-top: 12px;
}

.asset-actions {
  margin: 12px -16px -16px;
}

.upgrade-grid {
  gap: 8px;
  margin-top: 12px;
}

.upgrade-row {
  grid-template-columns: minmax(0, 1fr) minmax(136px, 0.36fr);
  border: 1px solid var(--tfs-border);
  border-radius: 12px;
  background: var(--paper-elev-1);
  padding: 12px;
}

.upgrade-copy strong {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--forest-deep);
}

.upgrade-copy strong span {
  font-family: var(--number-font);
  font-size: 0.86rem;
}

.upgrade-meter,
.skill-segments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--tfs-border);
  border-radius: 999px;
  background: var(--paper);
}

.upgrade-meter {
  max-width: 180px;
  margin-top: 8px;
}

.upgrade-meter span,
.skill-segments span {
  min-height: 12px;
  border: 0;
  border-right: 1px solid var(--tfs-border);
  border-radius: 0;
  background: var(--tfs-card);
}

.upgrade-meter span:last-child,
.skill-segments span:last-child {
  border-right: 0;
}

.upgrade-meter span.filled,
.skill-segments span.filled {
  background: linear-gradient(180deg, #4D9D70, var(--forest));
}

.skill-segments span.next {
  background: linear-gradient(180deg, #E0BF67, var(--brass));
}

.upgrade-effect {
  border: 1px solid var(--tfs-border);
  border-radius: 10px;
  background: rgba(44, 122, 82, 0.1);
  color: var(--forest-deep);
}

.location-row {
  border: 1px solid var(--tfs-border);
  border-radius: 10px;
  background: var(--paper-elev-1);
}

/* === REAL ESTATE LEDGER === */
.property-board {
  gap: 12px;
  margin-top: 16px;
}

.property-board-heading {
  border-top: 1px solid var(--aged-line);
  padding-top: 16px;
}

.property-card .deal-art,
.property-asset {
  background:
    linear-gradient(180deg, rgba(255, 255, 250, 0.72), rgba(232, 221, 181, 0.32)),
    var(--paper-elev-1);
}

.property-team {
  gap: 8px;
}

.team-member {
  border: 1px solid var(--tfs-border);
  border-radius: 12px;
  background: var(--tfs-card);
  padding: 8px;
}

.team-avatar {
  border: 1px solid var(--aged-line);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(44, 122, 82, 0.12), rgba(196, 155, 74, 0.16)),
    var(--paper);
  box-shadow: inset 0 0 0 3px rgba(255, 252, 241, 0.72);
}

.advisor-panel.badge,
.property-team .advisor-panel {
  border: 0;
  border-radius: 9px;
}

.property-asset .asset-stats {
  display: grid;
  gap: 0;
  border: 1px solid var(--tfs-border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--tfs-card);
}

.property-asset .asset-stats .stat {
  border: 0;
  border-bottom: 1px solid var(--tfs-border);
  border-radius: 0;
  background: transparent;
}

.property-asset .asset-stats .stat:nth-child(odd) {
  border-right: 1px solid var(--tfs-border);
}

.property-asset .asset-stats .stat:nth-last-child(-n+1) {
  border-bottom: 0;
}

.property-asset .asset-stats .stat:nth-child(2) {
  background: rgba(196, 155, 74, 0.16);
}

.property-asset .tag.feature {
  background: linear-gradient(180deg, #E2C573, var(--brass));
  color: #32240F;
}

.last-improvement-line {
  margin-top: 8px;
  border-top: 1px solid var(--tfs-border);
  padding-top: 8px;
  color: var(--forest-deep);
  font-family: var(--number-font);
  font-size: 0.82rem;
  font-weight: 700;
}

/* === CLASSES FIELD GUIDE === */
.school-shell,
.learn-list,
.leaderboard-shell,
.market-shell {
  gap: 12px;
}

.school-grid {
  gap: 12px;
}

.skill-card {
  position: relative;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--aged-line);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(255, 255, 250, 0.76), rgba(255, 252, 241, 0.96)),
    var(--paper-elev-1);
  padding: 16px;
}

.skill-card::before {
  content: none;
}

.skill-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.skill-card-top h4 {
  min-width: 0;
  color: var(--forest-deep);
  font-size: 1.16rem;
  line-height: 1.12;
}

.skill-card-top .tag {
  flex: 0 0 auto;
  padding: 5px 8px;
  white-space: nowrap;
}

.skill-description {
  display: -webkit-box;
  min-height: 2.72em;
  overflow: hidden;
  color: var(--ink-soft);
  line-height: 1.36;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.skill-progress {
  border: 1px solid var(--tfs-border);
  border-radius: 10px;
  background: rgba(245, 237, 216, 0.62);
  padding: 7px;
}

.skill-card .skill-segments span {
  min-height: 10px;
}

.skill-callout {
  min-height: 3.1em;
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.3;
}

.skill-card-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin-top: auto;
  border-top: 1px solid var(--tfs-border);
  padding-top: 10px;
}

.skill-price {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 7px;
  align-items: baseline;
}

.skill-price span {
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 850;
  text-transform: uppercase;
}

.skill-price strong {
  color: var(--forest-deep);
  font-family: var(--number-font);
  font-size: 1rem;
}

.skill-price .price-badge {
  border: 1px solid rgba(44, 122, 82, 0.32);
  border-radius: 999px;
  background: rgba(44, 122, 82, 0.12);
  color: var(--forest-deep);
  padding: 2px 6px;
}

.was-price {
  color: var(--ink-soft);
  font-family: var(--number-font);
  font-size: 0.78rem;
}

.skill-card .secondary-btn {
  width: auto;
  min-width: 112px;
  background: linear-gradient(180deg, #D7B661, var(--brass));
  color: #241B0D;
}

.corporate-license-card {
  border-color: rgba(196, 155, 74, 0.78);
  background:
    linear-gradient(135deg, rgba(196, 155, 74, 0.18), rgba(255, 252, 241, 0.78)),
    var(--paper-elev-1);
}

/* === LEADERBOARD AND SCORE SUBMIT === */
.leaderboard-header {
  gap: 12px;
}

.leaderboard-table {
  border: 1px solid var(--aged-line);
  border-radius: 12px;
  background: var(--paper-elev-1);
  box-shadow: var(--shadow-tier-1);
}

.leaderboard-table th {
  background: var(--parchment);
  color: var(--forest-deep);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.leaderboard-table tbody tr:nth-child(odd) td {
  background: var(--paper);
}

.leaderboard-table tbody tr:nth-child(even) td {
  background: var(--paper-elev-1);
}

.leaderboard-table tbody tr:nth-child(-n+3) td:first-child {
  border-left: 4px solid var(--brass);
}

.leaderboard-table td:first-child {
  color: var(--forest-deep);
  font-size: 1.12rem;
  font-variant-numeric: lining-nums;
}

.leaderboard-submit {
  border: 1px solid var(--aged-line);
  border-radius: var(--radius-card);
  background: var(--paper-elev-1);
  padding: 16px;
}

.score-form {
  gap: 12px;
  margin-top: 12px;
}

.score-form .primary-btn {
  justify-self: start;
  min-width: 156px;
}

.season-end-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.career-summary {
  background:
    linear-gradient(135deg, rgba(44, 122, 82, 0.12), rgba(196, 155, 74, 0.18)),
    var(--paper-elev-1);
}

.score-message {
  border: 1px dashed var(--aged-line);
  border-radius: 12px;
  background: var(--paper-elev-1);
}

.score-message.good {
  background: rgba(44, 122, 82, 0.12);
  color: var(--forest-deep);
}

/* === LEARN INDEX CARDS === */
.lesson-card,
.term-card,
.log-entry,
.empty-state,
.loan-note {
  border: 1px solid var(--aged-line);
  border-radius: var(--radius-card);
  background: var(--paper-elev-1);
}

.lesson-card {
  gap: 8px;
  padding: 16px;
}

.term-grid {
  gap: 8px;
}

.term-card {
  position: relative;
  gap: 8px;
  padding: 16px;
  background:
    linear-gradient(180deg, transparent 31px, rgba(27, 37, 32, 0.12) 32px, transparent 33px),
    var(--paper-elev-2);
}

.term-card strong {
  color: var(--forest-deep);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.term-card p {
  color: var(--ink);
  font-family: var(--number-font);
  font-size: 0.82rem;
  font-weight: 500;
}

/* === START SCREEN AND STAGE === */
.start-screen {
  gap: 16px;
}

.start-copy {
  padding: clamp(32px, 5vw, 72px);
}

.start-copy h1 {
  color: var(--forest-deep);
  text-wrap: balance;
}

.start-lede {
  color: var(--ink-soft);
}

.start-actions {
  gap: 12px;
  margin-top: 32px;
}

.poster-panel {
  background:
    linear-gradient(90deg, rgba(245, 241, 232, 0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(245, 241, 232, 0.03) 1px, transparent 1px),
    linear-gradient(145deg, rgba(15, 92, 69, 0.55), rgba(10, 9, 7, 0.9) 56%, rgba(212, 175, 55, 0.12));
  background-size: 16px 16px, 16px 16px, auto;
}

.poster-burst {
  opacity: 0.62;
  filter: saturate(0.86);
}

.poster-caption {
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-card);
  background: rgba(10, 9, 7, 0.84);
  box-shadow: var(--shadow-tier-1);
  color: var(--tfs-cream);
  font-family: var(--display-font);
}

.stage {
  border: 1px solid var(--tfs-border);
  border-radius: 16px;
  background: var(--tfs-card-2);
  box-shadow: var(--shadow-tier-1);
}

.district-kicker {
  border: 1px solid var(--tfs-border);
  background: var(--parchment);
  color: var(--forest-deep);
}

#districtTitle {
  border: 1px solid var(--tfs-border);
  border-radius: 12px;
  background: rgba(212, 175, 55, 0.08);
  box-shadow: var(--shadow-tier-1);
  color: var(--tfs-gold-bright);
  line-height: 1;
}

/* V9: old .ticker two-column grid + .ticker-title skin removed — the ticker
   is a one-line event banner now (see "=== V9 UX ===" block, end of file). */

.text-link {
  color: var(--forest-deep);
}

/* === MODALS AND INTERVIEWS === */
.comic-modal,
.interview-modal {
  background: rgba(27, 37, 32, 0.58);
  backdrop-filter: blur(2px);
}

.comic-card,
.interview-card {
  border: 1px solid var(--aged-line);
  border-radius: var(--radius-modal);
  background:
    radial-gradient(circle, rgba(27, 37, 32, 0.08) 1px, transparent 1px),
    var(--paper-elev-1);
  background-size: 12px 12px;
  overflow: hidden;
}

.comic-art {
  position: relative;
  border-right: 6px solid var(--aged-line);
  background:
    linear-gradient(90deg, rgba(255, 252, 241, 0.12) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255, 252, 241, 0.12) 1px, transparent 1px),
    radial-gradient(circle at 52% 36%, rgba(196, 155, 74, 0.42), transparent 42%),
    #BFD8C5;
  background-size: 18px 18px, 18px 18px, auto, auto;
  box-shadow: inset 0 0 0 10px rgba(255, 252, 241, 0.36);
}

.comic-art::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid var(--tfs-border);
  border-radius: 14px;
  pointer-events: none;
}

.warren-panel,
.advisor-panel {
  border: 1px solid var(--tfs-border);
  border-radius: 12px;
  background: var(--paper-elev-1);
  filter: drop-shadow(0 10px 18px rgba(27, 37, 32, 0.14));
}

.comic-copy {
  padding: clamp(28px, 5vw, 56px);
}

.comic-copy h2,
.interview-header h2 {
  color: var(--tfs-gold-bright);
}

.comic-copy p:not(.eyebrow),
.answer-line {
  color: var(--ink);
}

.interview-card {
  border-radius: var(--radius-modal);
  /* Desktop scroll fix: the shared `.comic-card, .interview-card` rule above
     forces `overflow: hidden`, which on wide viewports clipped tall interviews
     and pushed the sticky-header close button off-screen — making the panel
     impossible to scroll OR exit (the <=720px block already scrolls on mobile).
     Restore ONLY the internal scroll the renderer assumes (renderInterview()
     resets card.scrollTop on open) and contain overscroll so the page behind
     the modal stays put. max-height is intentionally left to the existing
     desktop (~line 2992) and mobile (~line 3902) rules so this doesn't disturb
     their geometry. */
  overflow-y: auto;
  overscroll-behavior: contain;
}

.interview-header {
  border-bottom: 1px solid var(--aged-line);
  background: var(--tfs-card);
}

.interview-layout {
  gap: 16px;
  padding: 16px;
}

.question-btn.active {
  background: linear-gradient(180deg, #D7B661, var(--brass));
}

/* The active topic sits on a light gold gradient, but its title/subtitle were
   still inheriting the cream/muted colors meant for the dark card background
   (var(--ink), var(--muted)) — light-on-light, reading as muddy "gold-on-gold"
   (same bug class already called out above re: .interview-header .close-btn).
   Force dark, high-contrast text — matches the dark-on-gold convention used
   by .primary-btn (#241B0D). */
.question-btn.active span {
  color: #241B0D;
}

.question-btn.active small {
  color: #4A3814;
}

/* Owner-profile tag/intro, the "Tell:" line, and the evidence-note caption
   use the muted cream token so they read clearly against the dark card
   background (they previously carried a near-black light-theme text color). */
.owner-profile span,
.tell-line,
.evidence-note {
  color: var(--ink-soft);
}

/* Same leftover-hardcoded-color bug for Warren's takeaway body text. */
.advisor-read p:not(.eyebrow) {
  color: var(--ink);
}

.question-btn.good,
.advisor-read.good,
.interview-transcript-item.good {
  background: rgba(44, 122, 82, 0.12);
}

.question-btn.bad,
.advisor-read.bad,
.interview-transcript-item.bad {
  background: rgba(201, 83, 58, 0.12);
}

.owner-answer,
.interview-transcript,
.advisor-read,
.owner-profile,
.interview-transcript-item {
  border: 1px solid var(--tfs-border);
  border-radius: 12px;
  background: var(--paper-elev-1);
}

.interview-scene {
  border: 6px solid var(--aged-line);
  border-radius: 16px;
  box-shadow: inset 0 0 0 8px rgba(255, 252, 241, 0.24), var(--shadow-tier-1);
}

.story-choice {
  border-radius: 12px;
  text-align: left;
}

/* === VIEW TRANSITIONS === */
@keyframes tabFade {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#portfolioView:not(.hidden),
#schoolView:not(.hidden),
#leaderboardView:not(.hidden),
#logView:not(.hidden),
#learnView:not(.hidden),
#marketView:not(.hidden) {
  animation: tabFade 150ms ease-out both;
}

/* === MOBILE REFINEMENTS === */
@media (max-width: 1180px) {
  .metrics {
    min-width: 0;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 12px;
  }

  .start-screen {
    padding: 0;
  }

  .start-copy,
  .panel,
  .topbar,
  .ticker {
    padding: 12px;
  }

  .start-copy h1 {
    font-size: clamp(3rem, 16vw, 4.5rem);
  }

  .metrics-secondary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .metric {
    min-height: 68px;
    padding: 8px;
  }

  .metric strong {
    font-size: clamp(0.9rem, 4vw, 1.05rem);
    white-space: normal;
  }

  .district-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* V9: the .ticker { grid-template-columns: 1fr } override is gone — the
     event banner is flex and wraps naturally. */

  .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }

  .tab {
    flex: 0 0 auto;
  }

  .deal-body,
  .asset-card,
  .lesson-card,
  .leaderboard-submit {
    padding: 12px;
  }

  .market-summary,
  .holding-row,
  .stock-row {
    grid-template-columns: 1fr;
  }

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

  .asset-actions {
    margin: 12px -12px -12px;
  }

  .upgrade-row,
  .skill-card {
    grid-template-columns: 1fr;
  }

  .skill-card::before {
    grid-row: auto;
    width: 44px;
    height: 44px;
  }

  .skill-card > * {
    grid-column: 1;
  }

  .leaderboard-table {
    font-size: 0.78rem;
  }

  .leaderboard-table th,
  .leaderboard-table td {
    padding: 8px 6px;
  }

  .comic-card,
  .interview-card {
    border-radius: 16px;
    padding: 0;
  }

  .comic-card {
    max-height: calc(100vh - 24px);
    overflow-y: auto;
  }

  .comic-card > .close-btn {
    position: sticky;
    top: 0;
    justify-self: end;
    margin: 0 0 -38px;
    z-index: 4;
  }

  .comic-art {
    border-right: 0;
    border-bottom: 6px solid var(--aged-line);
  }

  .comic-copy {
    padding: 20px;
  }

  .comic-copy h2 {
    font-size: clamp(1.7rem, 12vw, 2.8rem);
  }

  .interview-layout {
    padding: 12px;
  }

  .interview-scene {
    border-width: 4px;
  }
}

/* === Cloud sync strip on the start screen === */
.cloud-code-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.cloud-code-strip .link-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--forest, #2C7A52);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.cloud-code-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--tfs-card);
  font-size: 0.85rem;
}
.cloud-code-pill .cloud-code-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tfs-muted);
}
.cloud-code-status {
  font-size: 0.78rem;
  color: var(--tfs-muted);
  font-style: italic;
}

/* === Recovery modal === */
.recovery-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 25, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 90;
}
.recovery-modal.hidden { display: none; }
.recovery-card {
  background: var(--tfs-card);
  border: 1px solid var(--tfs-border);
  border-radius: 10px;
  max-width: 560px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.recovery-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.recovery-header h2 { margin: 4px 0; }
.recovery-header p { margin: 0; font-size: 0.88rem; color: var(--tfs-muted); }
.recovery-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.recovery-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  color: var(--tfs-muted);
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.recovery-tab.active {
  color: var(--ink, #1B2520);
  border-bottom-color: var(--forest, #2C7A52);
}
.recovery-section {
  display: grid;
  gap: 10px;
  font-size: 0.92rem;
}
.recovery-section hr {
  border: 0;
  border-top: 1px solid rgba(23, 33, 28, 0.16);
  margin: 8px 0;
}
.recovery-field {
  display: grid;
  gap: 4px;
}
.recovery-field span {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--tfs-muted);
}
.recovery-field input {
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  padding: 8px 10px;
  font: inherit;
  font-size: 0.95rem;
}
.recovery-field input:focus {
  outline: 2px solid var(--forest, #2C7A52);
  outline-offset: 1px;
}
.cloud-code-big {
  font-size: 1.5rem;
  letter-spacing: 0.06em;
}
.backup-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0;
  display: grid;
  gap: 6px;
}
.backup-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(23, 33, 28, 0.16);
  border-radius: var(--radius-button);
  background: rgba(245, 237, 216, 0.5);
}
.backup-list strong { display: block; font-size: 0.92rem; }
.backup-list small { color: var(--tfs-muted); font-size: 0.78rem; }
.recovery-status {
  margin-top: 12px;
  min-height: 1.2em;
  font-size: 0.88rem;
  color: var(--forest, #2C7A52);
  font-weight: 600;
}

/* Sign-in / sign-up auth panel inside recovery modal */
.auth-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  overflow: hidden;
  margin-bottom: 12px;
}
.auth-mode-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font: inherit;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ink, #1B2520);
}
.auth-mode-toggle button + button {
  border-left: 1px solid var(--line);
}
.auth-mode-toggle button.active {
  background: var(--forest, #2C7A52);
  color: #fff;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

.auth-hint {
  font-size: 0.78rem;
  color: var(--tfs-muted);
  margin: 6px 0 0;
}

.link-btn.primary {
  font-size: 0.95rem;
  font-weight: 800;
}

@media (max-width: 540px) {
  .recovery-card { padding: 16px; max-height: 95vh; }
  .recovery-tabs { flex-wrap: wrap; }
  .auth-actions { flex-direction: column; align-items: stretch; }
}

/* ============================================================================
   MANAGER SYSTEM — Team tab + Hiring modal
   ============================================================================ */
.team-shell {
  display: grid;
  gap: 14px;
}
.team-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
}
.team-summary .stat {
  display: grid;
  gap: 2px;
}
.team-summary .stat span {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tfs-muted);
}
.team-summary .stat strong {
  font-size: 1.05rem;
  font-weight: 800;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}
.team-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
  padding: 12px;
}
.team-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}
.team-heading h4 { margin: 4px 0; }
.team-heading p, .team-heading .eyebrow { margin: 0; }
.team-tip {
  font-size: 0.8rem;
  color: var(--tfs-muted);
  font-style: italic;
  margin: -4px 0 12px;
}
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

/* --- Manager card --- */
.manager-card {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(245, 237, 216, 0.45);
}
.manager-card.hired {
  background: rgba(44, 122, 82, 0.06);
  border-color: rgba(44, 122, 82, 0.4);
}
.manager-card.candidate {
  background: rgba(212, 175, 55, 0.06);
}
.manager-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}
.manager-body header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
}
.manager-body header strong {
  font-size: 0.98rem;
  line-height: 1.2;
}
.manager-body .tag {
  font-size: 0.68rem;
  padding: 2px 8px;
}
.manager-bio {
  font-size: 0.78rem;
  color: var(--tfs-muted);
  font-style: italic;
  margin: 0;
  line-height: 1.35;
}
.manager-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px;
  font-size: 0.74rem;
}
.manager-stats > div {
  display: grid;
  gap: 1px;
}
.manager-stats span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tfs-muted);
}
.manager-stats strong {
  font-weight: 800;
  font-size: 0.85rem;
}
.manager-stats strong.positive { color: var(--forest, #2C7A52); }
.manager-stats strong.negative { color: #B3382F; }
.manager-action-row {
  display: flex;
  gap: 6px;
  margin-top: 4px;
}

/* --- Gator portrait SVG --- */
.gator-portrait-wrap {
  width: 100px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-button);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--paper, #F5EDD8);
}
.gator-portrait {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- Hiring modal --- */
.hiring-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 25, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 95;
}
.hiring-modal.hidden { display: none; }
.hiring-card {
  background: var(--tfs-card);
  border: 1px solid var(--tfs-border);
  border-radius: 10px;
  max-width: 720px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.hiring-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.hiring-header h2 { margin: 4px 0; }
.hiring-header p { margin: 0; font-size: 0.88rem; color: var(--tfs-muted); }
.hiring-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 18px;
}
.hiring-portrait {
  display: grid;
  gap: 8px;
  text-align: center;
}
.hiring-portrait .gator-portrait-wrap {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}
.hiring-portrait strong {
  font-size: 1.05rem;
}
.hiring-portrait .tag {
  align-self: center;
  font-size: 0.74rem;
}
.hiring-quality-bar {
  width: 100%;
  height: 8px;
  background: rgba(23, 33, 28, 0.12);
  border-radius: 4px;
  overflow: hidden;
}
.hiring-quality-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #B3382F 0%, #C49B4A 50%, #2C7A52 100%);
}
.hiring-meta {
  display: grid;
  gap: 4px;
  font-size: 0.82rem;
  text-align: left;
  padding: 8px;
  background: rgba(245, 237, 216, 0.6);
  border-radius: var(--radius-button);
}
.hiring-main {
  display: grid;
  gap: 12px;
}
.hiring-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.hiring-step {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  background: var(--tfs-card);
  padding: 8px 10px;
  font: inherit;
  font-size: 0.78rem;
  text-align: left;
  cursor: pointer;
  display: grid;
  gap: 2px;
}
.hiring-step .step-label { font-weight: 800; font-size: 0.78rem; line-height: 1.2; }
.hiring-step .step-cost { font-size: 0.7rem; color: var(--tfs-muted); font-family: var(--font-mono, monospace); }
.hiring-step:hover:not(:disabled) { background: var(--paper, #F5EDD8); }
.hiring-step.active { border-color: var(--forest, #2C7A52); background: rgba(44, 122, 82, 0.08); }
.hiring-step.done { background: rgba(44, 122, 82, 0.15); }
.hiring-step.done .step-cost { color: var(--forest, #2C7A52); }
.hiring-step:disabled { opacity: 0.5; cursor: not-allowed; }
.hiring-step-content {
  border: 1px solid var(--line);
  border-radius: var(--radius-button);
  padding: 12px;
  background: rgba(245, 237, 216, 0.5);
  min-height: 100px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.hiring-step-content h4 { margin: 0 0 6px; }
.hiring-step-content p { margin: 6px 0; }
.hiring-claims, .hiring-flags {
  margin: 6px 0;
  padding-left: 20px;
}
.hiring-claims li { margin: 4px 0; font-size: 0.86rem; }
.hiring-flags li {
  margin: 4px 0;
  font-size: 0.86rem;
  color: #B3382F;
  font-weight: 600;
}
.hiring-note {
  font-size: 0.78rem;
  color: var(--tfs-muted);
  font-style: italic;
  margin: 8px 0 0;
}
.hiring-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}
.hiring-warn {
  margin: 0;
  font-size: 0.82rem;
  color: #B3382F;
  font-weight: 600;
  text-align: right;
}

@media (max-width: 720px) {
  .hiring-layout { grid-template-columns: 1fr; }
  .hiring-portrait .gator-portrait-wrap { max-width: 140px; }
  .hiring-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manager-card { grid-template-columns: 80px 1fr; }
  .manager-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gator-portrait-wrap { width: 80px; }
}
@media (max-width: 540px) {
  .hiring-card { padding: 16px; max-height: 95vh; }
  .team-summary { grid-template-columns: 1fr 1fr; }
}

/* ============================================================================
   COLLAPSED LOCATIONS LIST (perf win)
   ============================================================================ */
.location-summary-row {
  background: rgba(212, 175, 55, 0.10);
  font-weight: 700;
  border-radius: 4px;
}
.location-toggle {
  margin-top: 6px;
  font-size: 0.78rem;
  color: var(--forest, #2C7A52);
  text-decoration: underline;
}
.location-list.collapsed .location-row + .location-row { border-top: 1px solid rgba(23,33,28,0.08); }

/* ============================================================================
   REGION TRAVEL — modal + cards + topbar badge
   ============================================================================ */
.travel-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 25, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 96;
}
.travel-modal.hidden { display: none; }
.travel-card {
  background: var(--tfs-card);
  border: 1px solid var(--tfs-border);
  border-radius: 10px;
  max-width: 880px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 22px 24px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}
.travel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.travel-header h2 { margin: 4px 0; }
.travel-header p { margin: 0; font-size: 0.88rem; color: var(--tfs-muted); }
.travel-meta {
  margin: 0 0 14px;
  font-size: 0.92rem;
}
.region-list {
  display: grid;
  gap: 14px;
}
.region-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--tfs-card);
  overflow: hidden;
  align-items: stretch;
}
.region-card.current {
  border-color: var(--forest, #2C7A52);
  background: rgba(44, 122, 82, 0.06);
}
.region-card.locked {
  opacity: 0.65;
}
.region-card-art {
  display: block;
  background: var(--paper, #F5EDD8);
  border-right: 1px solid var(--line);
}
.region-card.locked .region-card-art {
  filter: grayscale(0.55) brightness(0.94);
}
.region-card-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
}
.region-card-body {
  padding: 14px 16px 14px 0;
  display: grid;
  gap: 8px;
  align-content: start;
}
.region-card-body header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}
.region-card-body header strong {
  font-size: 1.1rem;
  line-height: 1.2;
}
.region-card-body header .eyebrow {
  margin: 2px 0 0;
  font-size: 0.72rem;
  font-weight: 600;
}
.region-desc {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}
.region-flavor {
  margin: 0;
  font-size: 0.82rem;
  color: var(--tfs-muted);
  font-style: italic;
}
.region-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 12px;
  margin-top: 4px;
  font-size: 0.78rem;
}
.region-stats > div {
  display: grid;
  gap: 1px;
}
.region-stats span {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tfs-muted);
}
.region-stats strong {
  font-weight: 800;
  font-size: 0.88rem;
  font-family: var(--font-mono, "JetBrains Mono", monospace);
}
.region-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 4px;
}

@media (max-width: 720px) {
  .region-card { grid-template-columns: 1fr; }
  .region-card-art { border-right: 0; border-bottom: 1px solid var(--line); }
  .region-card-svg { min-height: 140px; }
  .region-card-body { padding: 14px 16px; }
  .region-stats { grid-template-columns: 1fr 1fr; }
}

/* Warren backstory card in Learn tab */
.warren-backstory-card {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.10), rgba(44, 122, 82, 0.06));
  border-left: 4px solid var(--forest, #2C7A52);
}
.warren-backstory-body p {
  margin: 0 0 10px;
  line-height: 1.55;
  font-size: 0.95rem;
}
.warren-backstory-body p:last-child {
  margin-bottom: 0;
  font-style: italic;
  color: var(--tfs-muted);
}

/* ============================================================================
   MOBILE PASS — comprehensive tune for phones (≤ 720px, with ≤ 480px tweaks)
   ============================================================================
   Goals:
     * 44px minimum touch targets on every action button
     * Tabs scroll horizontally + sticky-stay visible while scrolling
     * All modals respect safe-area-inset and don't push past viewport
     * Stat / chip / button grids reflow gracefully at small widths
     * Stock trade row + manager cards + region cards work below 400px
   ============================================================================ */
@media (max-width: 720px) {
  /* --- Touch targets: 44px is the iOS Human Interface min --- */
  .primary-btn,
  .secondary-btn,
  .secondary-btn.compact,
  .primary-btn.compact,
  /* .carousel-arrow is exempt: it's a fixed 44px circle (40px on coarse
     pointers) — min-height would stretch it into an oval. Dots keep the rule;
     their visible pip is a centered ::before, so min-height only grows the
     invisible hit area. */
  button[data-action]:not(.tab):not(.chip):not(.close-btn):not(.link-btn):not(.carousel-arrow) {
    min-height: 44px;
  }
  /* Tabs in the right-side sidebar (Assets/Team/Classes/etc.) — keep them
     scrollable horizontally so all 7 fit on any viewport, but make them
     touch-friendly. */
  .panel-heading .tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
  }
  .panel-heading .tab {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 0 12px;
    font-size: 0.84rem;
    white-space: nowrap;
  }

  /* --- Topbar actions: allow wrap if there's no room (Travel button added recently) --- */
  .topbar-actions {
    flex-wrap: wrap !important;
    row-gap: 6px;
  }

  /* --- Manager card on phone: 2-col stat grid instead of 3 --- */
  .manager-stats {
    grid-template-columns: 1fr 1fr;
  }
  .manager-card {
    grid-template-columns: 90px 1fr;
    gap: 10px;
    padding: 10px;
  }
  .manager-card .gator-portrait-wrap {
    width: 90px;
  }

  /* --- Stock trade row tweaks: chips stay one row, input grows --- */
  .stock-input-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .stock-quick-chips {
    flex-wrap: wrap;
    gap: 6px;
  }
  .stock-quick-chips .chip {
    min-height: 36px;
    padding: 4px 12px;
    font-size: 0.78rem;
  }
  .stock-shares-input {
    min-height: 42px;
    font-size: 1rem; /* 16px = no iOS zoom-on-focus */
  }
  .stock-actions-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .stock-row {
    padding: 10px;
  }
  .stock-mode-toggle button {
    min-height: 32px;
    padding: 4px 14px;
  }

  /* --- Travel modal: tighter padding, region cards stack vertically --- */
  .travel-modal {
    padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  }
  .travel-card {
    padding: 16px;
    max-height: 95vh;
  }
  .region-card-svg {
    min-height: 120px;
    max-height: 160px;
  }
  .region-actions .primary-btn,
  .region-actions .secondary-btn {
    width: 100%;
  }

  /* --- Hiring modal: layout already stacks; tighten step buttons --- */
  .hiring-modal {
    padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  }
  .hiring-card {
    padding: 16px;
    max-height: 95vh;
  }
  .hiring-portrait .gator-portrait-wrap {
    max-width: 160px;
  }
  .hiring-steps {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .hiring-step {
    min-height: 56px;
  }
  .hiring-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .hiring-actions .primary-btn,
  .hiring-actions .secondary-btn {
    width: 100%;
  }

  /* --- Recovery modal --- */
  .recovery-modal {
    padding: 10px max(14px, env(safe-area-inset-right)) 10px max(14px, env(safe-area-inset-left));
  }
  .recovery-card {
    padding: 16px;
    max-height: 95vh;
  }
  .recovery-field input {
    min-height: 44px;
    font-size: 1rem; /* prevent iOS zoom-on-focus */
  }
  .recovery-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .recovery-tab {
    flex: 0 0 auto;
    white-space: nowrap;
  }
  .auth-actions {
    flex-direction: column;
    align-items: stretch;
  }

  /* --- Cloud code strip + sign-in button on start screen --- */
  .cloud-code-strip {
    flex-wrap: wrap;
  }
  .cloud-code-pill {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* --- District nav buttons: full width when wrapped --- */
  .district-btn {
    min-height: 56px;
    flex: 1 1 calc(50% - 6px);
  }

  /* --- Asset cards: full width + larger touch targets --- */
  .deal-actions,
  .asset-actions,
  .property-card .deal-actions,
  .property-card .asset-actions {
    grid-template-columns: 1fr 1fr;
  }
  .asset-stats,
  .deal-stats {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  /* --- Loan/Borrow buttons in side panel --- */
  .bank-actions {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  /* --- Forms: prevent iOS auto-zoom by ensuring font-size ≥ 16px --- */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px;
  }

  /* --- Header / metrics: tighter spacing --- */
  .topbar {
    padding: 10px 12px;
  }
  .metrics {
    gap: 6px;
  }
  .metrics-secondary {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .metric {
    padding: 8px 10px;
  }
}

/* ============================================================================
   ULTRA-SMALL PHONES (≤ 480px — iPhone SE / iPhone Mini)
   ============================================================================ */
@media (max-width: 480px) {
  /* Manager card stack — portrait on top, body below */
  .manager-card {
    grid-template-columns: 1fr;
  }
  .manager-card .gator-portrait-wrap {
    width: 100%;
    max-width: 140px;
    margin: 0 auto;
  }
  .manager-stats {
    grid-template-columns: 1fr 1fr;
  }

  /* Hiring steps: 1 column at <480 */
  .hiring-steps {
    grid-template-columns: 1fr;
  }

  /* Team summary: 1 column */
  .team-summary {
    grid-template-columns: 1fr;
  }

  /* Region stats: 1 column */
  .region-stats {
    grid-template-columns: 1fr;
  }

  /* Stock actions: stack buy and sell */
  .stock-actions-row {
    grid-template-columns: 1fr;
  }

  /* Asset / metric grids: 1 column (secondary chips stack; the primary money
     row stays 3-up since its values are short). */
  .metrics-secondary,
  .asset-stats,
  .deal-stats {
    grid-template-columns: 1fr;
  }

  /* District nav: 1 column */
  .district-btn {
    flex-basis: 100%;
  }

  /* Tighter h1/h2 on tiny screens */
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.1rem; }

  /* Warren backstory: tighter line height */
.warren-backstory-body p {
    font-size: 0.88rem;
    line-height: 1.45;
  }
}

/* Final cascade anchors for the Taylor Family Software 2.0 skin. */
html,
body {
  background:
    linear-gradient(135deg, rgba(212, 175, 55, 0.10) 0%, rgba(10, 9, 7, 0) 34%),
    linear-gradient(225deg, rgba(15, 92, 69, 0.22) 0%, rgba(10, 9, 7, 0) 38%),
    repeating-linear-gradient(90deg, rgba(245, 241, 232, 0.018) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(0deg, rgba(245, 241, 232, 0.014) 0 1px, transparent 1px 72px),
    var(--tfs-bg) !important;
  color: var(--tfs-cream);
}

.site-header,
.site-footer {
  width: min(1440px, calc(100% - 28px));
  margin-inline: auto;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  min-height: 76px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(212, 175, 55, 0.20);
  background: rgba(10, 9, 7, 0.88);
  backdrop-filter: blur(14px);
}

.brand-lockup img {
  display: block;
  width: 70px;
  height: auto;
}

.site-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(14px, 3vw, 34px);
}

.site-nav a,
.site-footer a {
  color: var(--tfs-cream);
  font-size: 0.92rem;
  font-weight: 650;
  text-decoration: none;
}

.site-nav a:hover,
.site-footer a:hover {
  color: var(--tfs-gold-bright);
}

.site-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--tfs-border-strong);
  border-radius: 8px;
  background: var(--tfs-gold);
  color: var(--tfs-bg);
  font-weight: 850;
  text-decoration: none;
}

.site-footer {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 44px;
  padding: 28px 18px 42px;
  border-top: 1px solid rgba(212, 175, 55, 0.20);
  color: var(--tfs-muted);
}

.site-footer div {
  display: grid;
  gap: 5px;
}

.site-footer strong {
  color: var(--tfs-gold);
  font-family: var(--display-font);
  font-size: 1rem;
  letter-spacing: 0.04em;
}

.app-shell {
  width: min(1440px, 100%);
  padding: 18px 14px 0;
}

.start-screen {
  min-height: calc(100vh - 112px);
  grid-template-columns: minmax(0, 1.02fr) minmax(320px, 0.82fr);
}

.start-copy,
.poster-panel,
.panel,
.topbar,
.ticker,
.comic-card,
.travel-card,
.hiring-card,
.recovery-card,
.interview-card {
  border: 1px solid var(--tfs-border);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(25, 21, 15, 0.96), rgba(19, 17, 13, 0.96));
  color: var(--tfs-cream);
  box-shadow: var(--tfs-soft-shadow);
}

.start-copy {
  min-height: 560px;
  justify-content: center;
  padding-block: clamp(34px, 5vw, 64px);
  border-color: var(--tfs-border-strong);
}

.eyebrow,
.district-kicker,
.panel-heading .eyebrow,
.travel-header .eyebrow,
.hiring-header .eyebrow,
.recovery-header .eyebrow,
.interview-header .eyebrow,
.comic-copy .eyebrow {
  color: var(--tfs-gold-bright);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.18em;
}

.start-copy h1,
.topbar-title h2,
.panel-heading h3,
.scene-overlay h3,
.comic-copy h2,
.travel-header h2,
.hiring-header h2,
.recovery-header h2,
.interview-header h2 {
  color: var(--tfs-gold-bright);
  font-family: var(--display-font);
  letter-spacing: 0.02em;
}

.start-copy h1 {
  max-width: 12ch;
  font-size: clamp(3rem, 6vw, 5.9rem);
  line-height: 1.02;
  text-wrap: balance;
}

.title-kicker {
  margin: 14px 0 0;
  color: var(--tfs-gold-bright);
  font-family: var(--display-font);
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  letter-spacing: 0.06em;
}

.start-lede,
.metric span,
.deal-card p,
.asset-card p,
.property-card p,
.skill-card p,
.class-card p,
.learn-card p,
.leaderboard-panel p,
.loan-note,
.travel-header p,
.hiring-header p,
.recovery-header p,
.interview-header p,
.comic-copy p,
.log-list li,
.market-card p {
  color: rgba(245, 241, 232, 0.74);
}

input,
select,
textarea {
  border: 1px solid var(--tfs-border);
  border-radius: 8px;
  background: rgba(245, 241, 232, 0.96);
  color: #18140E;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.primary-btn,
.secondary-btn,
.icon-btn,
.tab,
.close-btn,
.site-cta {
  border: 1px solid var(--tfs-border-strong);
  border-radius: 8px;
  box-shadow: none;
}

.primary-btn {
  background: linear-gradient(180deg, var(--tfs-gold-bright), var(--tfs-gold));
  color: var(--tfs-bg);
}

.secondary-btn,
.icon-btn,
.tab,
.close-btn {
  background: rgba(245, 241, 232, 0.05);
  color: var(--tfs-cream);
}

.primary-btn:hover,
.secondary-btn:hover,
.icon-btn:hover,
.tab:hover,
.close-btn:hover,
.site-cta:hover {
  transform: translateY(-1px);
  border-color: var(--tfs-gold-bright);
  box-shadow: 0 0 26px rgba(212, 175, 55, 0.14);
}

.tab.active,
.district-btn.active {
  background: var(--tfs-gold);
  color: var(--tfs-bg);
  border-color: var(--tfs-gold-bright);
}

.mini-rules span,
.tag,
.risk-pill,
.badge,
.manager-quality,
.region-status,
.stock-chip {
  border: 1px solid rgba(212, 175, 55, 0.32);
  background: rgba(212, 175, 55, 0.09);
  color: var(--tfs-cream);
}

/* === TAG VARIANTS — dark ===
   Single source of truth for deal-card tag colors. Defined AFTER the base .tag
   so these win on the cascade with the same specificity, replacing the old
   light-on-light variants that rendered nearly invisible. Each is a dark tint
   + cream/gold/terracotta text + a 1px hairline border. */
.tag.accepted,
.tag.property-tag {
  background: rgba(22, 163, 74, 0.16);
  border-color: rgba(22, 163, 74, 0.5);
  color: var(--tfs-cream);
}

.tag.feature {
  background: rgba(212, 175, 55, 0.16);
  border-color: rgba(212, 175, 55, 0.55);
  color: var(--tfs-gold-bright);
}

.tag.owner-tag {
  background: rgba(212, 175, 55, 0.12);
  border-color: rgba(212, 175, 55, 0.42);
  color: var(--tfs-gold-bright);
}

.tag.rival {
  background: rgba(214, 107, 79, 0.18);
  border-color: rgba(214, 107, 79, 0.55);
  color: #ffcdb8;
}

.tag.watchlist {
  background: rgba(15, 92, 69, 0.32);
  border-color: rgba(105, 219, 146, 0.55);
  color: #d8f7e7;
}

.tag.basis-note {
  background: rgba(49, 94, 137, 0.18);
  border-color: rgba(49, 94, 137, 0.5);
  color: var(--tfs-cream);
}

.poster-panel {
  background:
    linear-gradient(145deg, rgba(15, 92, 69, 0.72), rgba(10, 9, 7, 0.84) 48%, rgba(212, 175, 55, 0.12)),
    var(--tfs-card);
}

.poster-caption {
  inset-inline: 20px;
  bottom: 20px;
  border: 1px solid var(--tfs-border);
  border-radius: 8px;
  background: rgba(10, 9, 7, 0.84);
  color: var(--tfs-cream);
}

.game-screen {
  display: grid;
  gap: var(--section-gap); /* V9 rhythm token */
}

/* V9: single-row topbar — the old 2-col grid (title | metrics) is gone; the
   flex row + metric wrap live in the "=== V9 UX ===" block at end of file. */
.topbar {
  gap: 16px;
  padding: 16px;
}

.metric,
.deal-card,
.asset-card,
.property-card,
.skill-card,
.class-card,
.manager-card,
.candidate-card,
.region-card,
.leaderboard-panel,
.learn-card,
.market-card,
.stock-card,
.portfolio-empty,
.log-list,
.district-btn {
  border: 1px solid rgba(212, 175, 55, 0.24);
  border-radius: 8px;
  background: rgba(245, 241, 232, 0.045);
  color: var(--tfs-cream);
  box-shadow: none;
}

.metric strong,
.deal-card h4,
.asset-card h4,
.property-card h4,
.skill-card h4,
.class-card h4,
.manager-card h4,
.candidate-card h4,
.region-card h4,
.leaderboard-panel h4,
.learn-card h4,
.market-card h4,
.stock-card h4 {
  color: var(--tfs-gold-bright);
}

.deal-card:hover,
.asset-card:hover,
.property-card:hover,
.skill-card:hover,
.manager-card:hover,
.candidate-card:hover,
.region-card:hover,
.learn-card:hover,
.market-card:hover,
.stock-card:hover {
  border-color: var(--tfs-border-strong);
  background: rgba(212, 175, 55, 0.075);
}

.deal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.44);
  border-color: rgba(244, 207, 94, 0.8);
}

.stage {
  border: 1px solid var(--tfs-border);
  border-radius: 8px;
  overflow: hidden;
  background: #070604;
  box-shadow: var(--tfs-soft-shadow);
}

.scene-overlay {
  background: linear-gradient(180deg, rgba(10, 9, 7, 0.86), rgba(10, 9, 7, 0.42));
}

.workspace {
  grid-template-columns: minmax(0, 1.18fr) minmax(360px, 0.82fr);
  gap: var(--section-gap); /* V9 rhythm token */
}

.comic-modal,
.travel-modal,
.hiring-modal,
.recovery-modal,
.interview-modal {
  background: rgba(0, 0, 0, 0.70);
  backdrop-filter: blur(12px);
}

.comic-modal {
  place-items: center;
  overflow: auto;
  padding: 18px;
}

.comic-card {
  min-height: 0;
  max-height: calc(100vh - 36px);
  grid-template-columns: minmax(220px, 0.34fr) minmax(0, 1fr);
}

.comic-art {
  min-height: 0;
}

.comic-copy {
  justify-content: flex-start;
  max-height: calc(100vh - 36px);
  overflow: auto;
}

.comic-copy p:not(.eyebrow) {
  max-height: min(44vh, 360px);
  overflow: auto;
  padding-right: 8px;
}

.comic-copy .primary-btn {
  flex: 0 0 auto;
  margin-top: auto;
}

.comic-art,
.gator-portrait-wrap,
.manager-portrait,
.candidate-portrait {
  border-color: rgba(212, 175, 55, 0.28);
  background: rgba(15, 92, 69, 0.20);
}

.career-status,
.corporate-status,
.cloud-code-strip {
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 8px;
  background: rgba(212, 175, 55, 0.08);
  color: var(--tfs-cream);
}

@media (max-width: 1040px) {
  .site-header {
    grid-template-columns: auto auto;
  }

  .site-nav {
    display: none;
  }

  .site-cta {
    justify-self: end;
  }

  .start-screen,
  .workspace,
  .topbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .site-header,
  .site-footer {
    width: min(100%, calc(100% - 16px));
  }

  .site-header {
    min-height: 64px;
    padding: 8px 10px;
  }

  .brand-lockup img {
    width: 58px;
  }

  .site-cta {
    min-height: 36px;
    padding: 0 12px;
    font-size: 0.86rem;
  }

  .app-shell {
    padding: 8px;
  }

  .start-copy {
    min-height: 480px;
    padding: 24px;
  }

  .start-copy h1 {
    font-size: clamp(2.6rem, 13vw, 4.4rem);
  }

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

  .poster-panel {
    min-height: 420px;
  }

  .comic-card {
    grid-template-columns: 1fr;
  }

  .comic-art {
    min-height: 220px;
    max-height: 34vh;
    border-right: 0;
    border-bottom: 1px solid var(--tfs-border);
  }

  .comic-copy {
    max-height: 54vh;
  }

  .site-footer {
    flex-direction: column;
  }
}

/* ===========================================================================
   Scripted example run (onboarding overlay)
   =========================================================================== */
.example-cta {
  margin-top: 14px;
  width: 100%;
  border: 1px dashed var(--tfs-border-strong);
  border-radius: 10px;
  background: rgba(212, 175, 55, 0.08);
  color: var(--tfs-gold-bright);
  font-weight: 850;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.example-cta:hover {
  background: rgba(212, 175, 55, 0.16);
  border-color: var(--tfs-gold);
  transform: translateY(-1px);
}

.start-advanced {
  margin-top: 12px;
  max-width: 480px;
  color: var(--tfs-muted);
}

.start-advanced summary {
  width: fit-content;
  cursor: pointer;
  color: var(--tfs-muted);
  font-size: 0.84rem;
  font-weight: 750;
}

.start-advanced[open] {
  display: grid;
  gap: 8px;
}

.start-advanced input {
  max-width: 320px;
}

.first-move-guide {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border: 1px solid var(--tfs-border-strong);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(15, 92, 69, 0.28), rgba(212, 175, 55, 0.08));
  box-shadow: var(--shadow-tier-1);
}

.first-move-guide h4 {
  margin: 0;
  color: var(--tfs-cream);
  font-family: var(--display-font);
  font-size: 1.2rem;
}

.first-move-guide ol {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 1.25rem;
  color: var(--tfs-muted);
  line-height: 1.45;
}

.first-move-guide strong {
  color: var(--tfs-gold-bright);
}

.first-move-guide .primary-btn {
  width: fit-content;
  margin-top: 2px;
}

.secondary-btn.danger {
  border-color: rgba(214, 107, 79, 0.52);
  color: #f3a08b;
}

.example-modal {
  position: fixed;
  inset: 0;
  /* Top of the stack — the onboarding overlay covers the site header and every
     other modal. */
  z-index: 98;
  display: grid;
  place-items: start center;
  overflow: auto;
  padding: 18px;
  background: rgba(0, 0, 0, 0.74);
  backdrop-filter: blur(12px);
}
.example-modal.hidden { display: none; }

.example-card {
  width: min(620px, 100%);
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--tfs-border-strong);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(26, 22, 15, 0.98), rgba(17, 15, 11, 0.99));
  color: var(--tfs-cream);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
}

.example-header {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--tfs-border);
  background: linear-gradient(180deg, rgba(26, 22, 15, 0.99), rgba(22, 19, 13, 0.97));
}
.example-header h2 {
  margin: 2px 0 0;
  font-family: var(--display-font);
  font-size: 1.5rem;
  color: var(--tfs-gold);
  letter-spacing: 0.01em;
}
.example-header .eyebrow {
  color: var(--tfs-gold-bright);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.example-header .close-btn {
  position: static;
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  min-height: 38px;
  padding: 0 14px;
  white-space: nowrap;
  font-weight: 850;
  font-size: 0.9rem;
  background: rgba(245, 241, 232, 0.06);
  color: var(--tfs-cream);
  box-shadow: none;
}

.example-body { padding: 18px; }

.example-stage {
  min-height: 150px;
  display: grid;
  align-content: center;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--tfs-border);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
}

.example-speech {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
}
.example-warren {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  border-radius: 50%;
  border: 1px solid var(--tfs-border-strong);
  background: rgba(15, 92, 69, 0.35);
}
.example-speech p {
  margin: 4px 0 0;
  font-size: 1.02rem;
  font-weight: 650;
  line-height: 1.45;
  color: var(--tfs-cream);
}

.example-footer {
  position: sticky;
  bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 18px;
  border-top: 1px solid var(--tfs-border);
  background: linear-gradient(0deg, rgba(26, 22, 15, 0.99), rgba(22, 19, 13, 0.95));
}
.example-dots { display: flex; gap: 7px; justify-content: center; }
.example-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(245, 241, 232, 0.22);
  transition: background 160ms ease, transform 160ms ease;
}
.example-dot.done { background: rgba(212, 175, 55, 0.5); }
.example-dot.active { background: var(--tfs-gold-bright); transform: scale(1.3); }

.example-nav { display: flex; gap: 10px; justify-content: flex-end; align-items: center; }
.example-nav .secondary-btn[disabled] { opacity: 0.4; cursor: default; }

/* example stage element styles */
.exrun-ledger { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.exrun-ledger > div {
  display: grid; gap: 2px; padding: 10px; text-align: center;
  border: 1px solid var(--tfs-border); border-radius: 10px; background: rgba(212, 175, 55, 0.06);
}
.exrun-ledger span { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tfs-gold-bright); }
.exrun-ledger strong { font-size: 1.12rem; color: var(--tfs-cream); }

.exrun-deal h3 { margin: 4px 0 8px; font-family: var(--display-font); font-size: 1.5rem; color: var(--tfs-gold); }
.exrun-deal-row { display: flex; justify-content: space-between; padding: 8px 0; border-top: 1px solid rgba(212, 175, 55, 0.2); }
.exrun-deal-row strong { color: var(--tfs-cream); }
.exrun-muted { margin-top: 8px; color: rgba(243, 234, 212, 0.7); font-style: italic; }

.exrun-tight { margin: 0; }
.exrun-tight h3 { margin: 4px 0; color: var(--tfs-gold); }
.exrun-tactics { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.exrun-tactics .compact { flex: 1 1 auto; }
.exrun-pick { box-shadow: 0 0 0 2px var(--tfs-gold-bright); }
.exrun-tactics .secondary-btn[disabled] { opacity: 0.55; }

.exrun-files { display: grid; gap: 10px; }
.exrun-file { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(212, 175, 55, 0.22); background: rgba(0, 0, 0, 0.25); }
.exrun-file .eyebrow { color: var(--tfs-gold-bright); font-size: 0.68rem; letter-spacing: 0.14em; }
.exrun-file strong { color: var(--tfs-cream); }
.exrun-file em { color: rgba(243, 234, 212, 0.6); font-size: 0.85rem; font-style: normal; }

.exrun-value-row { display: flex; justify-content: space-between; padding: 6px 0; }
.exrun-value-row strong { color: var(--tfs-cream); }
.exrun-bar { height: 14px; border-radius: 8px; background: rgba(245, 241, 232, 0.12); overflow: hidden; margin: 10px 0; }
.exrun-bar-fill { height: 100%; background: linear-gradient(90deg, #D7B661, var(--tfs-gold)); }
.exrun-mos { margin: 6px 0 0; text-align: center; color: var(--tfs-gold-bright); font-weight: 750; }
.exrun-mos strong { color: #fff; }

.exrun-result { margin: 12px 0 0; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(44, 122, 82, 0.5); background: rgba(44, 122, 82, 0.16); color: var(--tfs-cream); font-weight: 700; }

.exrun-loop { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.exrun-loop span { padding: 8px 12px; border-radius: 999px; border: 1px solid var(--tfs-border-strong); background: rgba(212, 175, 55, 0.1); color: var(--tfs-gold-bright); font-weight: 800; }
.exrun-loop i { color: rgba(243, 234, 212, 0.5); font-style: normal; }

@media (max-width: 560px) {
  .example-nav { flex-wrap: wrap; }
  .example-nav .compact { flex: 1 1 auto; }
  .exrun-ledger { grid-template-columns: 1fr; }
}

/* === BUSINESS OPERATIONS PANEL (Phase 2 business-sim controls) ===
   Per-business "manage this business" control cluster emitted by
   renderBusinessOps(): pricing / marketing / staffing / inventory /
   product-lines / renovation. Rendered as a coherent cluster of small
   segmented button rows (tier selectors) with a clear gold-fill .active
   state, an eyebrow-style .ops-label, and a muted-gold .ops-effect readout.
   Appended last so it wins the cascade in the consolidated --tfs-* system. */
.business-ops {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-card);
  background:
    linear-gradient(180deg, rgba(212, 175, 55, 0.06), rgba(212, 175, 55, 0.02)),
    var(--tfs-card-2);
}

.business-ops > strong {
  display: block;
  margin: 0;
  color: var(--tfs-gold-bright);
  font-family: var(--display-font);
  font-size: 1.02rem;
  letter-spacing: 0.02em;
}

/* Seasonal forecast line at the top of the cluster reads as a hint, not a box. */
.business-ops > .synergy-hint {
  margin: 0;
  padding: 8px 12px;
  border: 1px dashed var(--tfs-border);
  border-radius: var(--radius-button);
  background: rgba(212, 175, 55, 0.05);
  color: var(--tfs-cream);
  font-size: 0.86rem;
}

/* Each labeled control row: eyebrow label, a wrapping segmented button row,
   then the effect readout on its own line. */
.ops-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(212, 175, 55, 0.14);
}

.ops-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

/* Eyebrow-style section label — fixed-width so the button rows align. */
.ops-label {
  flex: 0 0 92px;
  color: var(--tfs-gold-bright);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Segmented tier buttons inside the ops cluster: tight, equal-height chips
   that share the secondary-btn surface but read as one control group. */
.ops-section .secondary-btn.compact {
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--radius-button);
  font-size: 0.82rem;
  font-weight: 700;
}

/* Active tier — gold fill, dark text (the segmented "selected" state). */
.ops-section .secondary-btn.compact.active,
.business-ops .secondary-btn.compact.active {
  background: linear-gradient(180deg, var(--tfs-gold-bright), var(--tfs-gold));
  border-color: var(--tfs-gold-bright);
  color: var(--tfs-bg);
  box-shadow: 0 0 16px rgba(212, 175, 55, 0.18);
}

.ops-section .secondary-btn.compact.active:hover,
.business-ops .secondary-btn.compact.active:hover {
  color: var(--tfs-bg);
}

/* Disabled ops button (can't afford / not applicable) — dim but legible. */
.ops-section .secondary-btn.compact.disabled,
.business-ops .secondary-btn.compact.disabled,
.business-ops .secondary-btn.compact:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Muted-gold readout — always breaks to its own full-width line. */
.ops-effect {
  flex: 1 0 100%;
  margin: 2px 0 0;
  color: rgba(243, 234, 212, 0.62);
  font-size: 0.8rem;
  line-height: 1.4;
}

@media (max-width: 560px) {
  .business-ops { padding: 14px; }
  .ops-label { flex-basis: 100%; }
  .ops-section .secondary-btn.compact { flex: 1 1 auto; }
}

/* ============================================================================
   === V5 JUICE ===
   Bigger, celebratory game-feel motion. Every rule here is transform/opacity
   (plus paint-only box-shadow/text-shadow glows) — no layout properties.
   All animations are auto-neutralized by the prefers-reduced-motion wildcard
   above; the JS entry points (spawnGoldBurst, pulseCashMetric,
   triggerCatastropheFx, dealing-in stagger) additionally gate on
   prefersReducedMotion() so decorative nodes are never even created.
   ========================================================================= */

/* --- Buy celebration: gold coin/spark burst (spawned by spawnGoldBurst) ---- */
.gold-burst-dot {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff3c4, var(--tfs-gold-bright) 45%, var(--tfs-gold) 78%);
  box-shadow: 0 0 8px rgba(244, 207, 94, 0.75);
  animation: goldBurstArc 600ms cubic-bezier(0.22, 0.9, 0.32, 1) both;
}

/* Rise to (--gb-x, --gb-y), then drop a touch and fade — a cheap arc. The
   leading translate(-50%, -50%) centers the dot on its spawn point. */
@keyframes goldBurstArc {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) translate(0, 0) scale(1);
  }
  55% {
    opacity: 1;
  }
  62% {
    transform: translate(-50%, -50%) translate(var(--gb-x), var(--gb-y)) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) translate(var(--gb-x), calc(var(--gb-y) + 38px)) scale(0.35);
  }
}

/* --- Buy celebration: Cash chip pulse (added/removed by pulseCashMetric) --- */
.metric.metric-pulse {
  animation: metricPulse 700ms ease-out both;
}

@keyframes metricPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 207, 94, 0);
  }
  40% {
    transform: scale(1.07);
    box-shadow: 0 0 0 6px rgba(244, 207, 94, 0.22), 0 0 24px rgba(244, 207, 94, 0.45);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(244, 207, 94, 0);
  }
}

/* --- Week advance: fresh deal cards stagger in (renderDeals sets the
       per-card animation-delay inline and removes the class on animationend
       so the 'both' fill can't pin the transform and eat the hover lift). --- */
.deal-card.dealing-in {
  animation: dealCardDealIn 240ms ease-out both;
}

@keyframes dealCardDealIn {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- Metric count-up flare (class managed by animateMetricValue) ---------- */
.metric strong.counting {
  color: var(--tfs-gold-bright);
  text-shadow: 0 0 14px rgba(244, 207, 94, 0.4);
}

/* --- Catastrophe feedback (triggerCatastropheFx) --------------------------- */
.game-screen.screen-shake {
  animation: screenShake 380ms ease-in-out both;
}

@keyframes screenShake {
  0%,
  100% {
    transform: translateX(0);
  }
  15% {
    transform: translateX(-4px);
  }
  30% {
    transform: translateX(4px);
  }
  45% {
    transform: translateX(-3px);
  }
  60% {
    transform: translateX(3px);
  }
  75% {
    transform: translateX(-2px);
  }
  90% {
    transform: translateX(2px);
  }
}

.catastrophe-vignette {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(120, 16, 16, 0) 42%, rgba(110, 12, 12, 0.5) 78%, rgba(70, 6, 6, 0.72) 100%);
  animation: vignetteFlash 500ms ease-out both;
}

@keyframes vignetteFlash {
  0% {
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* --- Toast entrance: slide + overshoot, then one gold shimmer sweep.
       Overrides the older 160ms comic-toast-in (same specificity, later in
       file). overflow:hidden clips the shimmer to the toast. ---------------- */
.comic-toast {
  position: relative;
  overflow: hidden;
  animation: comicToastInJuiced 340ms cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.comic-toast::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(244, 207, 94, 0.22) 47%, rgba(244, 207, 94, 0.4) 52%, transparent 68%);
  transform: translateX(-130%);
  animation: toastShimmer 650ms ease-out 200ms both;
}

@keyframes comicToastInJuiced {
  from {
    opacity: 0;
    transform: translateY(26px) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toastShimmer {
  from {
    transform: translateX(-130%);
  }
  to {
    transform: translateX(130%);
  }
}
/* === end V5 JUICE ========================================================= */

/* ============================================================================
   === V6 CAROUSEL ===
   Portfolio asset carousels (businesses + rentals). Track transform + arrows +
   dots + counter + neighbor peek/scale depth + pointer-drag swipe.
   The old vertical .asset-list grid wrappers were removed from
   renderPortfolio() (replaced by .asset-carousel), so no grid/gap
   neutralization is needed; slides keep the full .asset-card skin untouched.
   JS contract (game.js): tracks are painted WITH .no-transition and an inline
   centered-transform (carouselTrackTransform) so a full render() lands
   pre-positioned (no slide-from-0 flash); armCarouselTransitions() strips the
   class post-paint so only subsequent navigation animates.
   repositionCarousel() updates transform, .is-active/aria-hidden/inert slide
   states, dots, counter, and arrow disabled state directly — no full render.
   Slide sizing: --carousel-slide-basis (below) is read by BOTH this CSS and
   the JS transform calc, so peeking neighbors stay centered at every
   breakpoint. Swipe (initCarouselGestures) toggles .dragging on the track.
   Everything animates transform/opacity only — no layout thrash.
   Reduced motion: the global prefers-reduced-motion wildcard flattens all of
   these transitions/animations automatically (duration 0.01ms).
   ============================================================================ */

.asset-carousel {
  /* Active-slide width; neighbors peek in the remaining gutter. The JS track
     transform reads this same var, so keep them in lockstep via the var only. */
  --carousel-slide-basis: 88%;
  position: relative;
  overflow: hidden;
  /* Seal the internal stacking order (track z1 < fades z2 < arrows z30) into
     the carousel's own context: nothing outside the subtree can interleave
     with the arrows, and the arrows' z30 can never float over page overlays. */
  isolation: isolate;
}

@media (min-width: 980px) {
  .asset-carousel {
    --carousel-slide-basis: 72%;
  }
}

/* A lone card fills the row — no peek gutter to show. */
.asset-carousel.single-slide {
  --carousel-slide-basis: 100%;
}

/* Positioning frame for the arrows + edge fades: wraps ONLY the track (the
   .carousel-nav row sits outside it), so the arrows' top:50% centers on the
   cards instead of cards + dots + counter. It spans the full carousel width
   and adds no padding/border, so the track's %-based transform math and
   clientWidth reads in game.js are unchanged. The overflow clip stays on
   .asset-carousel above. */
.carousel-viewport {
  position: relative;
}

/* Edge-fade affordance (multi-slide only): the peeking neighbor visibly
   "continues" under a soft page-color fade at each side of the viewport.
   Stacking: track z1 < fades z2 < arrows z30; pointer-events:none keeps
   drags and taps working straight through them. */
.asset-carousel:not(.single-slide) .carousel-viewport::before,
.asset-carousel:not(.single-slide) .carousel-viewport::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 28px;
  z-index: 2;
  pointer-events: none;
}

.asset-carousel:not(.single-slide) .carousel-viewport::before {
  left: 0;
  background: linear-gradient(90deg, rgba(10, 9, 7, 0.8), rgba(10, 9, 7, 0));
}

.asset-carousel:not(.single-slide) .carousel-viewport::after {
  right: 0;
  background: linear-gradient(270deg, rgba(10, 9, 7, 0.8), rgba(10, 9, 7, 0));
}

.asset-carousel-track {
  display: flex;
  align-items: flex-start;
  will-change: transform;
  /* Explicit stacking baseline: the transformed track (and its scaled slides)
     paint at z1, under the edge fades (z2) and arrows (z30) — no reliance on
     auto stacking-context paint order. */
  position: relative;
  z-index: 1;
  /* Browser keeps vertical page-scroll; horizontal pointer moves are ours. */
  touch-action: pan-y;
  cursor: grab;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Finger-follow mode (initCarouselGestures): the JS drives transform in px
   every pointermove, so the spring transition must be off; neighbors relax
   toward full presence so the swipe reads as pulling the next card in. */
.asset-carousel-track.dragging {
  transition: none !important;
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;
}

/* Initial-paint guard: applied at render time, removed on the next frame by
   armCarouselTransitions() so rebuilds never animate into position. */
.no-transition {
  transition: none !important;
}

.carousel-slide {
  flex: 0 0 var(--carousel-slide-basis);
  min-width: 0;
  /* Tiny inset so card borders/shadows aren't shaved by the overflow clip. */
  padding: 0 2px;
  /* Depth: non-active slides sit back (scale/fade/drop) and are inert —
     repositionCarousel also sets aria-hidden + inert; pointer-events is the
     no-inert-support fallback so peeking buttons can never be mis-tapped. */
  opacity: 0.55;
  transform: scale(0.94) translateY(6px);
  pointer-events: none;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

.carousel-slide.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* Active card gets a subtle gold border-glow lift over the flat card skin. */
.carousel-slide.is-active > .asset-card {
  border-color: var(--tfs-border-strong);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), 0 0 22px rgba(244, 207, 94, 0.14);
}

/* Cheap drag interpolation (transform/opacity only, no per-frame JS): while
   the finger drives the track, neighbors ease up to 0.75 as a "coming in"
   cue; the active card stays full. */
.asset-carousel-track.dragging .carousel-slide {
  transition: transform 180ms ease, opacity 180ms ease;
  opacity: 0.75;
}

.asset-carousel-track.dragging .carousel-slide.is-active {
  opacity: 1;
}

/* Arrows: solid near-black circles with a gold ring + gold SVG chevron and a
   real drop shadow, so they read against BOTH dark surfaces they can sit on
   (the dimmed peeking neighbor and the page background). z30 clears the
   track/slide stacking baseline (z1) and the edge fades (z2). They live in
   .carousel-viewport, so top:50% is the card midline. */
.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 44px;
  height: 44px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--tfs-border-strong);
  border-radius: 50%;
  background: rgba(10, 9, 7, 0.85);
  color: var(--tfs-gold-bright);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.35);
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.carousel-arrow svg {
  display: block;
}

/* Straddle the ACTIVE card's edge: the peek gutter is (100% - basis)/2 wide,
   so gutter minus half the button centers each circle on the card border at
   every breakpoint — same var the slide sizing and the JS transform read. */
.carousel-arrow-prev {
  left: calc((100% - var(--carousel-slide-basis, 100%)) / 2 - 22px);
}

.carousel-arrow-next {
  right: calc((100% - var(--carousel-slide-basis, 100%)) / 2 - 22px);
}

.carousel-arrow:hover:not(:disabled),
.carousel-arrow:focus-visible {
  background: var(--tfs-gold-bright);
  border-color: var(--tfs-gold-bright);
  color: #0A0907;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 16px rgba(244, 207, 94, 0.35);
  transform: translateY(-50%) scale(1.08);
}

.carousel-arrow:active:not(:disabled) {
  transform: translateY(-50%) scale(0.98);
}

.carousel-arrow:disabled {
  /* Re-assert the skin: the global button:disabled rule (~line 3552,
     specificity 0-1-1) would otherwise swap in its muddy brown fill and
     near-invisible border UNDER the opacity fade. This selector (0-2-0)
     outranks it for every property it sets. */
  background: rgba(10, 9, 7, 0.85);
  border-color: var(--tfs-border-strong);
  color: var(--tfs-gold-bright);
  /* Visible-but-dim: ~22%-alpha effective gold ring + chevron. Dim enough to
     read as "no more cards this way", bright enough to never vanish (the
     original bug's failure mode was an ~8%-alpha disabled ring). */
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
  transform: translateY(-50%);
}

/* Touch: arrows STAY visible (they're the discoverability affordance for the
   swipe), just slightly smaller so they crowd the card edge less. Offsets are
   recentered for the 40px circle. */
@media (pointer: coarse) {
  .carousel-arrow {
    width: 40px;
    height: 40px;
  }

  .carousel-arrow-prev {
    left: calc((100% - var(--carousel-slide-basis, 100%)) / 2 - 20px);
  }

  .carousel-arrow-next {
    right: calc((100% - var(--carousel-slide-basis, 100%)) / 2 - 20px);
  }
}

.carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.carousel-dots {
  display: flex;
  align-items: center;
}

/* Each dot is a 24px invisible hit target; the visible dot is the ::before.
   Fixed-width buttons mean the active pill never reflows the row (and the
   mobile 44px min-height touch rule only enlarges the invisible hit area). */
.carousel-dot {
  position: relative;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.carousel-dot::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.35);
  transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1), background 160ms ease;
}

.carousel-dot:hover::before {
  background: rgba(244, 207, 94, 0.6);
}

.carousel-dot.active::before {
  width: 22px;
  background: var(--tfs-gold-bright);
}

.carousel-counter {
  color: var(--tfs-muted);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* Counter cross-fade: repositionCarousel retriggers this on an actual index
   change (class removal + reflow + re-add). */
.carousel-counter.counter-tick {
  animation: carouselCounterTick 240ms ease-out both;
}

@keyframes carouselCounterTick {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Portfolio-tab entrance: cards cascade in with a 60ms stagger. Same contract
   as .deal-card.dealing-in — renderPortfolio sets animation-delay inline on
   the slide's card and removes the class on animationend, so the fill can't
   pin the card transform under the slide's peek/scale styling. Applied to the
   card INSIDE the slide (not the slide) so it never fights the slide's own
   is-active transform. */
.carousel-cascade-in {
  animation: carouselCascadeIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes carouselCascadeIn {
  from {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
/* === end V6 CAROUSEL ====================================================== */

/* ============================================================================
   === V7 DEAL DESK CAROUSEL ===
   The deal desk (#dealGrid) now renders the case board followed by two
   .deal-section blocks (Rental properties / Businesses for sale), each a
   compact header row + one shared .asset-carousel ("deals-prop"/"deals-biz").
   All carousel internals (viewport, arrows, dots, peek, gestures) come from
   the V6 block above unchanged — this layer only (1) neutralizes the old
   multi-column grid so it can't fight the carousels, (2) styles the section
   header, and (3) gives .deal-card slide parity with .asset-card.
   ============================================================================ */

/* Single column: the 2-col base rule (~line 1815) and the 1180px media query
   both lose to this later-in-source rule at equal specificity, at every
   viewport. The container stays display:grid (and keeps the #dealGrid hook)
   so .case-board's grid-column: 1 / -1 remains valid. */
.deal-grid {
  grid-template-columns: 1fr;
}

/* Header + carousel travel as one grid child so the .deal-grid gap separates
   SECTIONS, not the header from its own carousel. */
.deal-section {
  display: grid;
  gap: 10px;
  min-width: 0; /* carousels clip via overflow:hidden; never widen the panel */
}

/* Compact gold eyebrow row: section title left, muted listing count right. */
.deal-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 2px 2px 0;
}

.deal-section-head h4 {
  margin: 0;
  color: var(--tfs-gold-bright);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.deal-section-head span {
  color: var(--tfs-muted);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

/* Slide parity with the portfolio: deal cards fill their slide (the flex-basis
   peek sizing lives on .carousel-slide) and the active one gets the same gold
   border-glow lift .asset-card gets in the V6 block. Deal cards are taller
   than portfolio cards, but the arrows still center on the card body: they sit
   at top:50% of .carousel-viewport, whose height IS the tallest card (the nav
   row is outside the viewport), so min-height:420px needs no override. */
.carousel-slide > .deal-card {
  min-width: 0;
  width: 100%;
}

.carousel-slide.is-active > .deal-card {
  border-color: var(--tfs-border-strong);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.4), 0 0 22px rgba(244, 207, 94, 0.14);
}
/* === end V7 DEAL DESK CAROUSEL ============================================ */

/* ============================================================================
   === V8 ASSET PANELS ===
   Owned-asset card compaction: the card keeps a short always-visible header
   (tags, name, key stats) and every management area lives in ONE panel of a
   horizontally scroll-snapping strip (.asset-panels) reached via small gold
   tab chips (.asset-panel-tab).
   JS contract (game.js): the strip is a NATIVE CSS scroller — the browser
   owns swipe physics; the outer carousel's pointer gestures early-return for
   drags starting inside .asset-panels. Chip clicks scroll via scrollTo
   ("asset-panel-goto" in handleAction); a delegated capture-phase scroll
   listener keeps .active/aria-selected synced and remembers the panel key in
   _assetPanelState; restoreAssetPanelScroll() re-snaps after every rebuild
   with a plain scrollLeft write, so NO scroll-behavior may be set here (it
   would turn that instant restore into an animated one).
   Sizing contract: panels are flex 0 0 100% and the strip has NO horizontal
   padding or gap, so panel index == round(scrollLeft / clientWidth) in the JS.
   Height parity: .asset-card.paneled is a flex column pinned near deal-card
   height; the strip flexes inside it and each panel scrolls vertically on its
   own (thin gold scrollbar) only when its content overflows.
   Reduced motion: chip-driven scrolling is JS smooth-scroll, flattened in
   assetPanelGoto via prefersReducedMotion(); native drags are user-driven.
   ============================================================================ */

/* The compacted owned card: header stacks naturally, the panel shell absorbs
   the rest. min-height keeps it a sibling of .deal-card (min-height 420px +
   content) so the portfolio and deal desk read as one card system. */
.asset-card.paneled {
  display: flex;
  flex-direction: column;
  min-height: 460px;
}

.asset-card.paneled > .asset-stats {
  margin: 10px 0 0;
}

/* Chip bar + strip travel together and soak up the card's remaining height. */
.asset-panels-shell {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 10px;
}

/* Tab chip bar: small gold segmented chips; scrolls horizontally (hidden
   scrollbar) when crowded. position:relative so the JS offsetLeft nudge that
   keeps the active chip visible resolves against the bar itself. */
.asset-panel-tabs {
  position: relative;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px;
  scroll-padding-inline: 8px;
  cursor: grab;
}

.asset-panel-tabs:active {
  cursor: grabbing;
}

.asset-panel-tabs::-webkit-scrollbar {
  display: none;
}

.asset-panel-tab {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 12px;
  border: 1px solid var(--tfs-border);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.06);
  color: var(--tfs-gold-bright);
  font-size: 0.68rem;
  font-weight: 850;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.asset-panel-tab:hover {
  border-color: var(--tfs-border-strong);
  background: rgba(212, 175, 55, 0.14);
  color: var(--tfs-gold-bright);
}

/* Active chip: gold fill, dark text — same selected language as the ops tier
   buttons and the carousel's active dot. */
.asset-panel-tab.active,
.asset-panel-tab.active:hover {
  background: linear-gradient(180deg, var(--tfs-gold-bright), var(--tfs-gold));
  border-color: var(--tfs-gold-bright);
  color: var(--tfs-bg);
  box-shadow: 0 0 14px rgba(212, 175, 55, 0.2);
}

/* The native horizontal scroller. NOT the custom gesture engine: overflow-x
   + mandatory snap gives browser-owned swipe physics, and vertical page
   scrolling keeps working because the browser arbitrates the axes natively.
   position:relative makes the strip the offsetParent of its panels. */
.asset-panels {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 230px;
  max-height: 300px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-top: 1px solid rgba(212, 175, 55, 0.14);
}

.asset-panels::-webkit-scrollbar {
  display: none;
}

/* One management area per panel. Vertical overflow scrolls INSIDE the panel
   only when its content is taller than the strip — thin gold scrollbar so
   the affordance is visible without shouting. */
.asset-panel {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow-y: auto;
  padding: 10px 4px 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(212, 175, 55, 0.55) transparent;
}

.asset-panel::-webkit-scrollbar {
  width: 6px;
}

.asset-panel::-webkit-scrollbar-thumb {
  background: rgba(212, 175, 55, 0.5);
  border-radius: 999px;
}

.asset-panel::-webkit-scrollbar-track {
  background: transparent;
}

/* Gold eyebrow title + one-line plain-language helper at the top of every
   panel. Element+class selectors so they outrank the generic .asset-card p
   color rule. */
.asset-panel p.asset-panel-eyebrow {
  margin: 0;
  color: var(--tfs-gold-bright);
  font-size: 0.66rem;
  font-weight: 850;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.asset-panel p.asset-panel-help {
  margin: 2px 0 10px;
  color: var(--tfs-muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* Re-parented pieces: neutralize spacing that assumed the old full-card
   stack. .asset-actions bled edge-to-edge with negative margins (the card
   footer look); inside a panel it is just a button group. */
.asset-panel .asset-actions {
  margin: 10px 0 0;
  padding: 10px 0 0;
}

.asset-panel .asset-stats {
  margin: 0 0 10px;
}

.asset-panel .diligence-box {
  margin: 10px 0;
}

.asset-panel .ops-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

/* Stacked ops rows inside one merged panel (Pricing & Ads, Staff & Stock)
   keep their hairline divider between rows. */
.asset-panel .ops-section + .ops-section {
  margin-top: 10px;
}

@media (max-width: 720px) {
  /* Phones: give the strip a little more room so ops rows with wrapped
     buttons still fit before the inner scrollbar appears. */
  .asset-panels {
    min-height: 250px;
    max-height: 340px;
  }
}
/* === end V8 ASSET PANELS ================================================== */

/* ===========================================================================
   === V9 UX ===
   Structural pass: single-row topbar + Menu, 5-primary tab bar with icons,
   season-log drawer, event banner (ticker diet), case-board strip, stage
   height reduction, metrics mobile collapse. Appended last so these rules
   win the cascade over the legacy layers above. All animations/transitions
   here are neutralized by the global prefers-reduced-motion wildcard.
   =========================================================================== */

/* --- Topbar: one row, one menu (spec 4.1) ---------------------------------- */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  padding: 12px 16px;
}

.topbar-title {
  display: flex;
  flex: 1 1 100%;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.topbar-ident {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.topbar-ident .eyebrow {
  margin: 0;
  white-space: nowrap;
}

.topbar h2 {
  font-size: clamp(1.15rem, 2vw, 1.6rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Metrics stack full-width under the one-line title row at every breakpoint
   (replaces the old .topbar { flex-direction: column } media overrides). */
.metrics {
  flex: 1 1 100%;
}

.topbar-actions {
  flex-wrap: nowrap;
  align-items: center;
}

.topbar-actions .icon-only {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
}

/* --- Topbar Menu (details.settings-menu.topbar-menu) ----------------------- */
.topbar-menu summary {
  gap: 6px;
}

.topbar-menu .menu-sheet {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 30;
  display: grid;
  gap: 6px;
  min-width: 230px;
  max-width: min(300px, calc(100vw - 24px));
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--tfs-card-2);
  box-shadow: var(--shadow-tier-2);
  padding: 10px;
}

.menu-item {
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--tfs-border);
  border-radius: var(--radius-button);
  background: rgba(245, 241, 232, 0.05);
  color: var(--tfs-cream);
  font-size: 0.9rem;
  font-weight: 800;
  text-align: left;
}

.menu-item:hover {
  background: rgba(212, 175, 55, 0.12);
  color: var(--tfs-gold-bright);
}

.menu-item.danger {
  border-color: rgba(214, 107, 79, 0.55);
  color: #F0997F;
}

/* The old dropdown positioned each .settings-option absolutely; inside the
   Menu sheet they are plain grid rows. */
.topbar-menu .settings-option {
  position: static;
  width: auto;
  max-width: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 4px 2px;
}

/* --- Primary tab bar: 5 destinations with icons (spec 1.2/1.3) ------------- */
.tabs-primary .tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
}

.tabs-primary .tab svg {
  flex: 0 0 auto;
}

.tab-label {
  white-space: nowrap;
}

/* Learn (Help destination) exit chip back to Assets. */
.learn-close {
  width: fit-content;
}

/* --- Season log drawer (spec 1.4) ------------------------------------------ */
.log-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  width: min(420px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-left: 1px solid var(--tfs-border-strong);
  background: linear-gradient(180deg, rgba(25, 21, 15, 0.98), rgba(19, 17, 13, 0.98));
  box-shadow: var(--shadow-tier-3);
  transform: translateX(102%);
  /* visibility gate: the closed drawer is aria-hidden, so its close button
     must not stay tab-focusable off-screen. The delay lets the slide-out
     finish before the drawer vanishes. */
  visibility: hidden;
  transition: transform 240ms ease, visibility 0s linear 240ms;
  overflow-y: auto;
}

.log-drawer.open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 240ms ease;
}

.log-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 10px;
}

.log-drawer-head h3 {
  margin: 0;
  color: var(--tfs-gold-bright);
  font-family: var(--display-font);
}

.log-drawer-head .eyebrow {
  margin: 0 0 4px;
}

.log-unread {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  border-radius: 999px;
  /* darkened --tfs-danger: #D66B4F is only 3.5:1 against white at this tiny
     size; #A8482D keeps the danger hue at 5.8:1 with #fff. */
  background: #A8482D;
  color: #fff;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
}

#logBellBtn {
  position: relative;
}

/* --- Event banner (spec 2.2) ------------------------------------------------ */
.event-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.event-headline {
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tfs-gold-bright);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(46ch, 100%);
}

.event-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.impact-chip {
  border: 1px solid var(--tfs-border);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 850;
  background: var(--tfs-card-2);
  color: var(--tfs-cream);
}

.impact-chip.up {
  border-color: rgba(22, 163, 74, 0.55);
  color: #7BE9A4;
}

.impact-chip.down {
  border-color: rgba(214, 107, 79, 0.55);
  color: #F0997F;
}

.impact-chip.scenario,
.impact-chip.target {
  color: var(--tfs-gold-bright);
}

.event-why {
  margin-left: auto;
  width: 30px;
  height: 30px;
  min-width: 30px;
  padding: 0; /* kill the UA button padding so the "?" centers in the circle */
  border: 1px solid var(--tfs-border);
  border-radius: 999px;
  background: var(--tfs-card-2);
  color: var(--tfs-gold-bright);
  font-weight: 950;
  box-shadow: none;
}

/* --- Case board strip (spec 6.3): demoted below the deals ------------------- */
.case-board-strip {
  padding: 10px 14px;
}

.case-board-strip summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  list-style: none;
}

.case-board-strip summary::-webkit-details-marker {
  display: none;
}

.case-board-strip summary .eyebrow {
  margin: 0;
}

.case-board-strip summary > strong {
  color: var(--game-gold-text);
  font-family: var(--display-font);
  font-size: 1.05rem;
}

/* The meter container is a <span> inside the summary now; keep it from
   inheriting the .case-meter span "bar" skin. */
.case-board-strip .case-meter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-left: auto;
}

.case-board-strip .case-meter-bars {
  display: flex;
  gap: 4px;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.case-board-strip .case-objectives {
  margin-top: 10px;
}

/* --- Deal card resting face (spec 3.1-3.3) ---------------------------------- */
/* Resting chip row never wraps: exactly 3 chips + the "+N" overflow button. */
.deal-card .tags-resting {
  flex-wrap: nowrap;
  overflow: hidden;
}

.tag-more {
  cursor: pointer;
  border-style: dashed;
  color: var(--tfs-gold-bright);
  background: transparent;
}

.tags-overflow {
  margin-top: 4px;
}

.deal-stats-resting {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Pitch stays as the deal's identity but clamps to 2 lines; the full text
   survives in the paragraph's title attribute. */
.deal-card .pitch {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Conditional decision warnings (override buy / rival clock) — the only
   .action-help left on the resting face (spec rule 5d). */
.action-help.warn {
  border: 1px solid rgba(214, 107, 79, 0.55);
  border-radius: var(--radius-button);
  background: rgba(214, 107, 79, 0.12);
  padding: 6px 10px;
  color: var(--tfs-cream);
  font-size: 0.8rem;
  margin: 0 0 8px;
}

.deal-more summary {
  font-weight: 850;
}

/* --- Metrics: desktop always shows all chips; mobile collapses (spec 4.2) --- */
.metrics-toggle {
  display: none;
}

/* --- Mobile treatment (spec 4.2 + 6.2) -------------------------------------- */
@media (max-width: 720px) {
  /* The V9 base .topbar rule outranks the legacy <=760px padding tighteners
     (they sit earlier in the file), so re-tighten here. */
  .topbar {
    gap: 8px 10px;
    padding: 8px 10px;
  }

  .metrics-toggle {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    width: fit-content;
  }

  .metrics-secondary.collapsed {
    display: none;
  }

  .stage {
    min-height: 120px;
  }

  #sceneCanvas {
    height: 120px;
  }

  .scene-overlay {
    inset: auto 8px 8px 8px;
  }

  .district-kicker {
    display: none;
  }

  #districtTitle {
    padding: 4px 8px;
    font-size: 1.05rem;
  }
}
/* === end V9 UX ============================================================= */