:root {
  --bg: #faf3e0;
  --ink: #1a1a1a;
  --terracotta: #c1462d;
  --olive: #6b8e23;
  --cream: #fff8e7;
  --navy: #1a2a4f;
  --gold: #d4a574;
  --shadow: rgba(0, 0, 0, 0.15);

  --font-heading: Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Themes ──────────────────────────────────────────────────────────────
   High-contrast theme: near-black background, bright text, saturated
   accents. White-on-black is the maximum contrast ratio (21:1). The four
   accent brights (blue/green/orange/yellow) all clear WCAG AA against the
   dark background. Toggled from Settings; never auto-detected. */
body.theme-high-contrast {
  --bg:         #000000;   /* black (was warm cream-ish) */
  --ink:        #ffffff;   /* white text (was near-black) */
  --cream:      #1a1a1a;   /* dark gray (was cream) — card/panel bg */
  --navy:       #6cb4ff;   /* bright blue (was deep navy) — links, headings */
  --olive:      #6ee06e;   /* bright green (was olive) — success/positive */
  --terracotta: #ff7a59;   /* bright orange (was terracotta) — primary CTAs */
  --gold:       #ffd54f;   /* bright yellow (was muted gold) — accents/highlights */
  --shadow:     rgba(255, 255, 255, 0.25);  /* shadows pop on dark bg */
}

/* High-contrast overrides for the most-visible rules whose colors are
   hardcoded (not var-driven) and therefore wouldn't re-theme automatically.
   Each rule is mirrored from its default counterpart with brighter/clearer
   values that read well on a black background. */
body.theme-high-contrast .achievement-progress {
  border-color: rgba(255, 213, 79, 0.6);  /* faded bright yellow */
}
body.theme-high-contrast .achievement-progress-bar {
  background: rgba(108, 180, 255, 0.25);  /* tinted bright blue */
}
body.theme-high-contrast .title-funfact {
  border-color: rgba(110, 224, 110, 0.55);  /* faded bright green */
}
body.theme-high-contrast .hero-stat {
  background: rgba(110, 224, 110, 0.18);   /* tinted bright green */
  border-color: rgba(110, 224, 110, 0.55);
}
body.theme-high-contrast .hero-stats.empty .hero-stat-empty {
  color: rgba(255, 255, 255, 0.7);  /* faded white on dark bg */
}
body.theme-high-contrast .move-log div + div {
  border-top-color: rgba(255, 255, 255, 0.18);  /* faded white divider */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* iPhone safe-area-inset (notch + home indicator). The max() pattern keeps
     a minimum padding on devices without insets, then expands on devices
     that report them. Applied at the body level so every screen + overlay
     sits inside the safe area without each component needing its own rule. */
  padding:
    max(0px, env(safe-area-inset-top))
    max(0px, env(safe-area-inset-right))
    max(0px, env(safe-area-inset-bottom))
    max(0px, env(safe-area-inset-left));
  /* Stop iOS rubber-band overscroll on the document — keeps game UI feeling
     anchored when players reach the edge of a list/log. Per-element scrollers
     (.battle-log-full, .detail-log, etc.) still scroll normally. */
  overscroll-behavior-y: none;
}

#root {
  max-width: 1000px;
  margin: 0 auto;
  padding: 32px 24px;
  min-height: 100vh;
}

h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; }
h1 { font-size: 48px; margin-bottom: 16px; }
h2 { font-size: 32px; margin-bottom: 12px; }
h3 { font-size: 22px; margin-bottom: 8px; }

button {
  font-family: var(--font-body);
  font-size: 20px;
  padding: 16px 32px;
  background: var(--terracotta);
  color: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--shadow);
  transition: transform 80ms;
  /* Eliminate iOS 300ms click delay + prevent accidental double-tap-to-zoom
     on rapid button presses during combat. `manipulation` keeps pinch-zoom
     working at the document level but disables the double-tap gesture on
     buttons specifically. Applied globally so every <button> in the game
     gets it without per-component rules. */
  touch-action: manipulation;
  /* Tame Mobile Safari's blue tap highlight — the existing :active transform
     already provides press feedback, and the highlight clashes with the
     terracotta button color. */
  -webkit-tap-highlight-color: transparent;
}
button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--shadow); }
button:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--shadow); }
button:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
button:disabled { background: #999; cursor: not-allowed; box-shadow: 4px 4px 0 var(--shadow); }

.callout {
  position: absolute;
  top: 40%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--cream);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 16px 28px;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  box-shadow: 6px 6px 0 var(--shadow);
  z-index: 10;
  animation: callout-pop 1200ms ease-out forwards;
}
@keyframes callout-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05); }
  40%  { transform: translate(-50%, -50%) scale(1); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(0.95); }
}

/* Combo callout — energetic, slightly tilted, gold/terracotta gradient.
   Fires when a player uses the same move type 2+ turns in a row. */
.callout.combo {
  background: linear-gradient(135deg, var(--gold), var(--terracotta));
  color: var(--cream);
  border: 3px solid var(--ink);
  text-shadow: 2px 2px 0 var(--ink);
  font-size: 32px;
  letter-spacing: 1px;
  animation: callout-pop-combo 1200ms ease-out forwards;
}
@keyframes callout-pop-combo {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.7)  rotate(-4deg); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(-4deg); }
  40%  {             transform: translate(-50%, -50%) scale(1)    rotate(-4deg); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1)    rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(0.95) rotate(-4deg); }
}

/* Big Hit callout — bold, impactful, terracotta. Fires when any single
   damage instance is >= 18. */
.callout.bighit {
  background: var(--terracotta);
  color: var(--cream);
  border: 3px solid var(--ink);
  text-shadow: 2px 2px 0 var(--ink);
  font-size: 36px;
  letter-spacing: 2px;
  animation: callout-pop-bighit 1200ms ease-out forwards;
}
@keyframes callout-pop-bighit {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.25); }
  40%  {             transform: translate(-50%, -50%) scale(1.1); }
  85%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -55%) scale(1.0); }
}

/* Callouts shrink on small phones so the "BIG HIT!" / "COMBO!" text doesn't
   overflow the 320px arena and collide with the HP bars or status badges. */
@media (max-width: 600px) {
  .callout         { font-size: 22px; padding: 12px 20px; }
  .callout.combo   { font-size: 24px; padding: 12px 20px; }
  .callout.bighit  { font-size: 28px; padding: 12px 20px; letter-spacing: 1px; }
}

.screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  gap: 24px;
  /* Subtle fade-in on every screen mount. The `.screen` class is on every
     section rendered by main.js's screen dispatcher (renderTitle, renderBattle,
     renderHall, etc.). When render() replaces root.innerHTML, the new .screen
     element is newly inserted into the DOM, so the animation fires once per
     screen change. The slight Y offset reads as a "rise into view" without
     interfering with nested animations (vs-intro, match-end-splash, confetti)
     or with overlays (which are .overlay siblings, not .screen descendants). */
  animation: screen-fade-in 200ms ease-out;
}
@keyframes screen-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .screen { animation: none; }
}
.screen-title h1 { font-size: 64px; color: var(--navy); }
.tagline { font-size: 20px; color: var(--ink); opacity: 0.75; }
.title-buttons { display: flex; flex-direction: column; gap: 16px; align-items: stretch; min-width: 280px; }
.title-buttons button { font-size: 22px; }
button.secondary { background: var(--cream); color: var(--ink); }

/* ── Title layout: center column flanked by side rails ──────────────────────
   Moves the "today" widgets (Daily Challenge, Quests, On This Day) and the
   stat banners into rails beside the main column, so the title fits on one
   screen without page scrolling on desktop. Collapses to a single column on
   mobile, center column first. */
.screen-title { justify-content: flex-start; padding: 28px 16px; gap: 16px; }
.title-layout {
  width: 100%;
  max-width: 1180px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "center" "left" "right";
  gap: 18px;
  align-items: start;
}
.title-center { grid-area: center; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.title-left  { grid-area: left; }
.title-right { grid-area: right; }
.title-rail { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.title-rail > * { width: 100%; max-width: 100%; margin: 0; }
.title-secondary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }

@media (min-width: 900px) {
  .title-layout {
    grid-template-columns: minmax(220px, 1fr) minmax(320px, 480px) minmax(220px, 1fr);
    grid-template-areas: "left center right";
    gap: 24px;
  }
  /* Keep the title on one screen: a tall rail scrolls within itself, not the page. */
  .title-rail { max-height: calc(100vh - 90px); overflow-y: auto; }
}
@media (max-width: 480px) {
  .title-secondary-grid { grid-template-columns: 1fr; }
}
/* Full-width title header so the h1 stays on one line instead of wrapping
   inside the narrow center column (which was forcing the page to scroll). */
.title-header { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.title-header h1 { margin: 0; }
.title-header .tagline { margin: 0; }
/* Secondary buttons are compact (the primary BEGIN / Quick Play stay large)
   so the center column fits one screen. Three across on desktop. */
.title-secondary-grid button { font-size: 15px; padding: 10px 10px; }
@media (min-width: 900px) {
  .title-secondary-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Achievement progress widget — a clickable "secondary action card" that
   sits below the main title-button stack and above the stat banners. Acts
   as a one-click shortcut to the Trophy Room and a visible progression
   hook for collection-minded players. */
.achievement-progress {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 480px;
  margin: 16px auto 0;
  padding: 10px 16px;
  background: var(--cream);
  border: 2px solid rgba(212, 165, 116, 0.5);  /* faded gold */
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink);
  transition: transform 120ms ease, border-color 120ms ease;
}
.achievement-progress:hover {
  border-color: var(--gold);
  transform: translateY(-1px);
}
.achievement-progress:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.achievement-progress-icon { font-size: 22px; line-height: 1; }
.achievement-progress-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.achievement-progress-label { font-size: 13px; color: var(--navy); }
.achievement-progress-label strong { color: var(--ink); font-size: 14px; }
.achievement-progress-bar {
  height: 6px;
  background: rgba(26, 42, 79, 0.1);
  border-radius: 3px;
  overflow: hidden;
}
.achievement-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--terracotta));
  border-radius: 3px;
  transition: width 300ms ease;
}
.achievement-progress-arrow { font-size: 16px; color: var(--navy); opacity: 0.6; }

@media (max-width: 600px) {
  .achievement-progress { max-width: 95%; padding: 8px 12px; gap: 10px; }
  .achievement-progress-icon { font-size: 18px; }
  .achievement-progress-label { font-size: 12px; }
  .achievement-progress-arrow { font-size: 14px; }
}

/* "Did You Know?" rotating fact card on the title screen. Sits below the
   achievement-progress widget and above the stat banners. Each render of
   the title picks a fresh trivia explanation; clicking opens the related
   hero's profile via the existing view-profile action handler. */
.title-funfact {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 14px auto 0;
  padding: 12px 18px;
  background: var(--cream);
  border: 2px solid rgba(107, 142, 35, 0.4);  /* faded olive */
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font-family: var(--font-body);
  color: var(--ink);
  transition: transform 120ms ease, border-color 120ms ease;
}
.title-funfact:hover {
  border-color: var(--olive);
  transform: translateY(-1px);
}
.title-funfact:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}
.title-funfact-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
  margin-bottom: 6px;
}
.title-funfact-text {
  font-size: 15px;
  line-height: 1.45;
  color: var(--ink);
  margin: 0 0 6px;
  font-style: italic;
}
.title-funfact-attribution {
  font-size: 12px;
  color: var(--navy);
  opacity: 0.7;
  margin: 0;
  text-align: right;
}

@media (max-width: 600px) {
  .title-funfact { max-width: 95%; padding: 10px 14px; }
  .title-funfact-text { font-size: 13px; }
  .title-funfact-label { font-size: 11px; }
  .title-funfact-attribution { font-size: 11px; }
}

/* "On This Day" Heritage Calendar panel — rare, date-matched bonus card.
   Sits between Did You Know? and Daily Quests on the title screen and
   only renders when src/calendar.js has at least one event for today.
   Treated visually as a small parchment fragment (gold + cream gradient)
   to distinguish it from the every-visit Did You Know card. */
.otd-panel {
  max-width: 480px;
  margin: 14px auto 0;
  padding: 12px 18px;
  background: linear-gradient(135deg, var(--cream), rgba(212, 165, 116, 0.15));
  border: 2px solid var(--gold);
  border-radius: 12px;
  font-family: var(--font-body);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(26, 42, 79, 0.1);
}
.otd-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(212, 165, 116, 0.4);
}
.otd-icon { font-size: 16px; }
.otd-event {
  padding: 8px 0;
}
.otd-event:not(:first-child) {
  border-top: 1px dashed rgba(26, 42, 79, 0.15);
  margin-top: 8px;
}
.otd-year {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--terracotta);
  font-weight: 700;
  margin-bottom: 4px;
}
.otd-event-text {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  margin-bottom: 6px;
}
.otd-hero-link {
  background: none;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 120ms ease, color 120ms ease;
  /* Touch target ≥44px on mobile (Apple HIG). */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.otd-hero-link:hover {
  background: var(--navy);
  color: var(--cream);
}

@media (max-width: 600px) {
  .otd-panel { max-width: 95%; padding: 10px 14px; }
  .otd-header { font-size: 12px; }
  .otd-year { font-size: 16px; }
  .otd-event-text { font-size: 13px; }
}

/* High-contrast theme override — keep the gold border but darken the
   parchment so the panel still feels like its own surface. */
body.theme-high-contrast .otd-panel {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gold);
}
body.theme-high-contrast .otd-event:not(:first-child) {
  border-top-color: rgba(255, 255, 255, 0.2);
}
body.theme-high-contrast .otd-header {
  border-bottom-color: rgba(255, 213, 79, 0.3);
}

/* Daily Quests panel — today's flexible goals tile, sits below the Did You
   Know card and above the Arcade/stat banners. Uses a faded terracotta
   border by default and shifts to a soft olive wash when both quests for
   the day are complete (a small "you did it" treatment). */
.daily-quests-panel {
  max-width: 480px;
  margin: 14px auto 0;
  padding: 12px 18px;
  background: var(--cream);
  border: 2px solid rgba(193, 70, 45, 0.35);  /* faded terracotta */
  border-radius: 12px;
  font-family: var(--font-body);
}
.daily-quests-panel.all-complete {
  border-color: var(--olive);
  background: linear-gradient(180deg, var(--cream) 0%, rgba(107, 142, 35, 0.08) 100%);
}
.dq-header {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
  letter-spacing: 0.5px;
}
.dq-quest {
  padding: 6px 0;
  border-top: 1px solid rgba(26, 42, 79, 0.08);
}
.dq-quest:first-of-type { border-top: none; }
.dq-quest.completed { opacity: 0.7; }
.dq-quest-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
  margin-bottom: 4px;
}
.dq-quest-label { flex: 1; }
.dq-quest-progress {
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}
.dq-quest.completed .dq-quest-progress { color: var(--olive); }
.dq-check { color: var(--olive); font-weight: 700; }
.dq-quest-bar {
  height: 4px;
  background: rgba(26, 42, 79, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.dq-quest-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--terracotta));
  border-radius: 2px;
  transition: width 300ms ease;
}
.dq-quest.completed .dq-quest-fill { background: var(--olive); }
.dq-streak {
  margin-top: 8px;
  font-size: 12px;
  color: var(--terracotta);
  text-align: right;
  font-weight: 600;
}
@media (max-width: 600px) {
  .daily-quests-panel { max-width: 95%; padding: 10px 14px; }
  .dq-header { font-size: 13px; }
  .dq-quest-header { font-size: 12px; }
}

/* High-contrast theme overrides — mirrors the title-funfact treatment so the
   panel stays legible on the black background. */
body.theme-high-contrast .daily-quests-panel {
  border-color: rgba(255, 122, 89, 0.55);  /* faded bright orange */
}
body.theme-high-contrast .daily-quests-panel.all-complete {
  border-color: rgba(110, 224, 110, 0.7);
  background: linear-gradient(180deg, var(--cream) 0%, rgba(110, 224, 110, 0.12) 100%);
}
body.theme-high-contrast .dq-quest {
  border-top-color: rgba(255, 255, 255, 0.12);
}
body.theme-high-contrast .dq-quest-bar {
  background: rgba(108, 180, 255, 0.2);
}

/* Quick Play — tertiary treatment: inviting "shortcut" button between BEGIN
   and the secondary stack. Cream base like .secondary, but with a bold
   gold left-border accent and an icon+sub-label layout so it reads as a
   distinct "just play" option. */
button.quick-play {
  background: var(--cream);
  color: var(--ink);
  border-left: 10px solid var(--gold);
  padding: 12px 24px 12px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon label"
    "icon sub";
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  text-align: left;
  line-height: 1.2;
}
button.quick-play .quick-play-icon {
  grid-area: icon;
  font-size: 32px;
  line-height: 1;
}
button.quick-play .quick-play-label {
  grid-area: label;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  align-self: end;
}
button.quick-play .quick-play-sub {
  grid-area: sub;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.7;
  font-family: var(--font-body);
  align-self: start;
}

/* Continue Last Mode — mirrors .quick-play layout but uses a terracotta
   accent so it reads as a distinct "resume" shortcut (vs Quick Play's
   gold "random" shortcut). Sits between BEGIN and Quick Play in priority. */
button.continue-last {
  background: var(--cream);
  color: var(--ink);
  border-left: 10px solid var(--terracotta);
  padding: 12px 24px 12px 18px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon label"
    "icon sub";
  column-gap: 12px;
  row-gap: 2px;
  align-items: center;
  text-align: left;
  line-height: 1.2;
}
button.continue-last .continue-last-icon {
  grid-area: icon;
  font-size: 32px;
  line-height: 1;
  color: var(--terracotta);
}
button.continue-last .continue-last-label {
  grid-area: label;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 22px;
  color: var(--navy);
  align-self: end;
}
button.continue-last .continue-last-sub {
  grid-area: sub;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
  opacity: 0.7;
  font-family: var(--font-body);
  align-self: start;
}
button.back { background: var(--cream); color: var(--ink); margin-top: 24px; font-size: 18px; padding: 10px 20px; }
.stats { font-size: 14px; color: var(--ink); opacity: 0.6; }

.mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 800px; width: 100%; }
.mode-card { display: flex; flex-direction: column; align-items: flex-start; text-align: left; padding: 28px; gap: 8px; background: var(--cream); color: var(--ink); }
.mode-card h3 { font-size: 26px; color: var(--terracotta); }
.mode-card p { font-size: 16px; }

@media (max-width: 700px) { .mode-grid { grid-template-columns: 1fr; } }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  max-width: 1000px;
  width: 100%;
}
.hero-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  background: var(--cream);
  color: var(--ink);
  padding: 16px;
  gap: 10px;
}
.hero-portrait { display: flex; justify-content: center; align-items: center; height: 160px; background: #fff; border: 2px solid var(--ink); border-radius: 6px; }
.hero-portrait svg { max-height: 100%; max-width: 100%; }
.hero-meta h3 { font-size: 20px; color: var(--navy); margin-bottom: 0; }
.hero-meta .era { display: inline-block; font-size: 12px; background: var(--gold); color: var(--ink); padding: 2px 8px; border-radius: 4px; margin-bottom: 8px; }
.hero-meta .bio { font-size: 14px; line-height: 1.4; margin-bottom: 6px; }
.hero-meta .moves { font-size: 12px; line-height: 1.5; list-style: none; }
.hero-meta .moves li { margin-bottom: 2px; }

/* Spotlight stats on each hero card (char-select) */
.hero-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  font-size: 13px;
  margin: 0 0 8px;
}
.hero-stat {
  display: inline-block;
  padding: 2px 8px;
  background: rgba(107, 142, 35, 0.15);   /* tinted olive */
  border: 1px solid rgba(107, 142, 35, 0.4);
  border-radius: 10px;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap;
}
.hero-stats.empty {
  margin: 0 0 8px;
}
.hero-stats.empty .hero-stat-empty {
  font-style: italic;
  color: rgba(26, 26, 26, 0.55);
  font-size: 12px;
}

.screen-battle { gap: 14px; }

/* ── Battle strategy hint banner ─────────────────────────────────────
   Small, friendly tactical tip shown above the HP bars on the human
   player's turn. Soft cream pill with gold border — easy to skim, easy
   to ignore. See Settings → "Battle hints" to disable. */
.battle-hint-banner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  margin: 0 auto 10px;
  background: rgba(255, 248, 231, 0.85);  /* translucent cream */
  border: 2px solid var(--gold);
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
  animation: battle-hint-fade 0.4s ease-out backwards;
  max-width: 90%;
}
.battle-hint-icon { font-size: 18px; line-height: 1; }
.battle-hint-text { line-height: 1.3; }

@keyframes battle-hint-fade {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .battle-hint-banner { animation: none; }
}

@media (max-width: 600px) {
  .battle-hint-banner { font-size: 12px; padding: 5px 10px; gap: 6px; }
  .battle-hint-banner .battle-hint-icon { font-size: 14px; }
}

/* High-contrast theme override */
body.theme-high-contrast .battle-hint-banner {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--gold);
}

.hp-bars { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; width: 100%; max-width: 900px; }
.hp-cell { display: flex; }
.hp-cell:nth-child(3) { justify-content: flex-end; }
.vs-label { font-family: var(--font-heading); font-size: 28px; font-weight: 700; color: var(--terracotta); }

.arena {
  position: relative;
  width: 100%;
  max-width: 900px;
  aspect-ratio: 8 / 3;
  border: 3px solid var(--ink);
  border-radius: 10px;
  overflow: hidden;
  background: var(--cream);
}
.stage svg { display: block; width: 100%; height: 100%; }
.fighter { position: absolute; bottom: 8%; width: 22%; }
.fighter svg { width: 100%; height: auto; }
.fighter-left { left: 4%; }
.fighter-right { right: 4%; }

.turn-banner { font-family: var(--font-heading); font-size: 22px; font-weight: 700; color: var(--navy); }

.moves-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; width: 100%; max-width: 900px; }
.moves-row button { display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; text-align: left; }
.moves-row button strong { font-size: 18px; }
.moves-row button .sub { font-size: 13px; opacity: 0.85; font-weight: normal; }

.move-log { width: 100%; max-width: 900px; min-height: 80px; padding: 10px 14px; background: var(--cream); border: 2px solid var(--ink); border-radius: 6px; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.move-log div + div { border-top: 1px dashed rgba(0,0,0,0.1); padding-top: 4px; margin-top: 4px; }

/* ── Fighter action keyframes ──────────────────────────────────── */

/* Attack lunge: forward then snap back */
@keyframes lunge-left {
  0%   { transform: translateX(0) rotate(0); }
  35%  { transform: translateX(60px) rotate(8deg); }
  100% { transform: translateX(0) rotate(0); }
}
@keyframes lunge-right {
  0%   { transform: translateX(0) rotate(0); }
  35%  { transform: translateX(-60px) rotate(-8deg); }
  100% { transform: translateX(0) rotate(0); }
}

/* Special lunge: bigger, more dramatic */
@keyframes special-lunge-left {
  0%   { transform: translateX(0) rotate(0) scale(1); }
  25%  { transform: translateX(80px) rotate(12deg) scale(1.12); }
  70%  { transform: translateX(20px) rotate(4deg) scale(1.05); }
  100% { transform: translateX(0) rotate(0) scale(1); }
}
@keyframes special-lunge-right {
  0%   { transform: translateX(0) rotate(0) scale(1); }
  25%  { transform: translateX(-80px) rotate(-12deg) scale(1.12); }
  70%  { transform: translateX(-20px) rotate(-4deg) scale(1.05); }
  100% { transform: translateX(0) rotate(0) scale(1); }
}

/* Defend brace: tilt back slightly */
@keyframes brace-left {
  0%   { transform: translateX(0) scale(1) rotate(0); }
  20%  { transform: translateX(-8px) scale(0.93) rotate(-4deg); }
  60%  { transform: translateX(-6px) scale(0.94) rotate(-3deg); }
  100% { transform: translateX(0) scale(1) rotate(0); }
}
@keyframes brace-right {
  0%   { transform: translateX(0) scale(1) rotate(0); }
  20%  { transform: translateX(8px) scale(0.93) rotate(4deg); }
  60%  { transform: translateX(6px) scale(0.94) rotate(3deg); }
  100% { transform: translateX(0) scale(1) rotate(0); }
}

/* Hit shake: target jolts when struck */
@keyframes hit-shake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20%       { transform: translateX(-6px) rotate(-2deg); }
  40%       { transform: translateX(6px)  rotate(2deg); }
  60%       { transform: translateX(-4px) rotate(-1deg); }
  80%       { transform: translateX(4px); }
}

/* Attack slash flash */
@keyframes slash-flash {
  0%   { opacity: 0; transform: scale(0.6) rotate(-15deg); }
  25%  { opacity: 1; transform: scale(1.1) rotate(-15deg); }
  60%  { opacity: 0.8; transform: scale(1) rotate(-15deg); }
  100% { opacity: 0; transform: scale(1.2) rotate(-15deg); }
}

/* Defend shield bubble */
@keyframes shield-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(0deg); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08) rotate(5deg); }
  35%  { transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  60%  { transform: translate(-50%, -50%) scale(1.02) rotate(4deg); }
  80%  { opacity: 0.85; transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.1) rotate(0deg); }
}

/* Damage number float up */
@keyframes dmg-float {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.7); }
  15%  { opacity: 1; transform: translate(-50%, -10px) scale(1.1); }
  40%  { opacity: 1; transform: translate(-50%, -25px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -55px) scale(0.9); }
}

.fighter-left.act-attack   { animation: lunge-left  430ms ease-out; }
.fighter-right.act-attack  { animation: lunge-right 430ms ease-out; }
.fighter-left.act-special  { animation: special-lunge-left  700ms ease-out; }
.fighter-right.act-special { animation: special-lunge-right 700ms ease-out; }
.fighter-left.act-defend   { animation: brace-left  600ms ease-in-out; }
.fighter-right.act-defend  { animation: brace-right 600ms ease-in-out; }
.fighter.act-hit           { animation: hit-shake 400ms ease-in-out; }

.attack-fx {
  position: absolute;
  z-index: 7;
  pointer-events: none;
  animation: slash-flash 300ms ease-out forwards;
}

.defend-shield {
  position: absolute;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(80,160,255,0.32) 50%, rgba(80,160,255,0.48) 100%);
  border: 4px solid rgba(50,120,220,0.85);
  box-shadow: 0 0 28px rgba(80,160,255,0.55), inset 0 0 18px rgba(80,160,255,0.3),
              0 0 8px rgba(255,255,255,0.4);
  z-index: 7;
  pointer-events: none;
  animation: shield-pop 1300ms ease-out forwards;
  transform: translate(-50%, -50%);
}

.damage-number {
  position: absolute;
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.4), -1px -1px 0 rgba(0,0,0,0.3);
  z-index: 8;
  pointer-events: none;
  animation: dmg-float 900ms ease-out forwards;
  transform: translate(-50%, 0);
  white-space: nowrap;
}

.screen-result h2 { font-size: 40px; color: var(--terracotta); }
.result-buttons { display: flex; gap: 16px; }
.screen-ending .ending { font-size: 22px; font-style: italic; max-width: 600px; text-align: center; color: var(--navy); }

/* ── Match Recap: Match Summary ─────────────────────────────────────────── */
.match-summary,
.did-you-know {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 20px 24px;
  width: 100%;
  max-width: 540px;
  box-sizing: border-box;
}

.match-summary h3,
.did-you-know h3 {
  color: var(--navy);
  margin: 0 0 12px;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.summary-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 15px;
  border-bottom: 1px solid rgba(26, 26, 26, 0.1);
  padding-bottom: 5px;
  /* Allow long label+value pairs to wrap to two lines on narrow phones
     (e.g. "Animation Speed     Slow"). Without this, the value can squeeze
     out of view. */
  flex-wrap: wrap;
}
.summary-row:last-child { border-bottom: none; padding-bottom: 0; }

.summary-label {
  color: var(--ink);
  opacity: 0.7;
  flex-shrink: 0;
}
.summary-value {
  color: var(--ink);
  font-weight: 700;
  text-align: right;
}

/* ── Match Recap: Did You Know? ─────────────────────────────────────────── */
.dyk-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.dyk-portrait {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  overflow: hidden;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: rgba(26, 26, 26, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dyk-portrait svg {
  width: 100%;
  height: 100%;
}

.dyk-body {
  flex: 1;
  min-width: 0;
}

.dyk-hero-name {
  font-weight: 700;
  color: var(--navy);
  font-size: 15px;
  margin: 0 0 6px;
}

.dyk-text {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}

/* ── Match Recap: HP Timeline chart ─────────────────────────────────────── */
.recap-chart-wrap {
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 14px 12px;
  margin: 0 auto 12px;
  width: 100%;
  max-width: 540px;
  box-sizing: border-box;
  text-align: center;
}
.recap-chart-title {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--navy);
  margin: 0 0 4px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.hp-chart {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
@media (max-width: 600px) {
  .recap-chart-wrap { padding: 10px 8px; max-width: 100%; }
  .recap-chart-title { font-size: 13px; }
}
body.theme-high-contrast .recap-chart-wrap {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--gold);
}
/* Attribute-selector overrides for the inline-styled SVG axis/grid colors.
 * SVG presentation attributes have low specificity, so these can re-tint
 * grid lines + tick labels on the dark high-contrast background. Hero HP
 * lines themselves use the --navy/--terracotta tokens via the helper's
 * color parameters and are already theme-aware. */
body.theme-high-contrast .hp-chart line[stroke^="rgba(0,0,0"] {
  stroke: rgba(255, 255, 255, 0.2);
}
body.theme-high-contrast .hp-chart text[fill^="rgba(0,0,0"] {
  fill: rgba(255, 255, 255, 0.65);
}

/* ── Match Recap: Personal Records ─────────────────────────────────────── */
.match-records {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 16px 20px;
  margin: 16px auto;
  max-width: 600px;
  text-align: left;
}

.match-records h3 {
  font-family: var(--font-heading);
  color: var(--terracotta);
  margin-bottom: 12px;
  text-align: center;
  font-size: 18px;
  letter-spacing: 1px;
}

.records-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.records-list li {
  padding: 8px 0;
  font-size: 15px;
  color: var(--ink);
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
}

.records-list li:last-child {
  border-bottom: none;
}

.records-list strong {
  color: var(--navy);
  font-weight: 700;
}

.overlay {
  position: fixed; inset: 0;
  background: rgba(26, 26, 26, 0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  /* Respect iPhone safe-area-inset inside fixed overlays so close buttons
     and content don't slip under the notch / home indicator. The body-level
     safe-area padding doesn't apply here because fixed-positioning uses the
     viewport as the containing block. */
  padding:
    max(8px, env(safe-area-inset-top))
    max(8px, env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
}
.overlay-card {
  background: var(--cream);
  padding: 32px;
  max-width: 480px;
  width: 90%;
  border: 3px solid var(--ink);
  border-radius: 12px;
  box-shadow: 8px 8px 0 var(--shadow);
}
.overlay-card h3 { color: var(--navy); margin-bottom: 12px; }
.overlay-card p { font-size: 16px; margin-bottom: 20px; }
.overlay-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.overlay-progress { margin-top: 16px; font-size: 13px; color: var(--ink); opacity: 0.6; text-align: center; }
.help-list { list-style: disc inside; line-height: 1.7; margin-bottom: 20px; }

/* ── "What's New" overlay ─────────────────────────────────────────────── */
.whats-new-card { max-width: 540px; }
.whats-new-header { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.whats-new-badge {
  background: var(--terracotta); color: var(--cream);
  padding: 2px 10px; border-radius: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 1px;
}
.whats-new-subtitle { color: var(--navy); opacity: 0.75; margin: 4px 0 16px; font-size: 14px; }
.whats-new-list { list-style: none; padding: 0; margin: 0 0 16px; }
.whats-new-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(26, 42, 79, 0.08);
}
.whats-new-item:last-child { border-bottom: none; }
.whats-new-icon { font-size: 24px; line-height: 1; flex-shrink: 0; }
.whats-new-text strong { display: block; font-size: 15px; color: var(--navy); margin-bottom: 2px; }
.whats-new-text p { font-size: 13px; color: var(--ink); opacity: 0.85; margin: 0; line-height: 1.4; }

@media (max-width: 600px) {
  .whats-new-card { max-width: 95%; }
  .whats-new-icon { font-size: 20px; }
  .whats-new-text strong { font-size: 14px; }
  .whats-new-text p { font-size: 12px; }
}

.help-button {
  position: fixed;
  /* Push below the iPhone notch — falls back to 16px on devices without
     safe-area-inset reporting. */
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  width: 44px; height: 44px;
  padding: 0;
  font-size: 24px;
  border-radius: 22px;
  background: var(--cream);
  color: var(--ink);
  z-index: 50;
}

/* ── Special FX overlays ─────────────────────────────────────────
   All per-hero special animations. Each has a dedicated keyframe set.
   Inline styles in screens.js set position, size, and stagger delays.
   ──────────────────────────────────────────────────────────────── */

/* ── Arena shake (shared by Moses crash + Einstein impact) ── */
@keyframes arena-shake {
  0%   { transform: translate(0, 0) rotate(0); }
  15%  { transform: translate(-5px, 2px) rotate(-0.5deg); }
  30%  { transform: translate(5px, -2px) rotate(0.5deg); }
  50%  { transform: translate(-4px, 1px) rotate(-0.3deg); }
  70%  { transform: translate(3px, -1px) rotate(0.3deg); }
  85%  { transform: translate(-2px, 0) rotate(-0.1deg); }
  100% { transform: translate(0, 0) rotate(0); }
}

/* ── MOSES: Part the Sea ────────────────────────────────────── */
/*  Left wall: slides in from left edge to ~center, holds, then out to left */
@keyframes moses-wall-left {
  0%   { transform: translateX(-100%); opacity: 0.9; }
  25%  { transform: translateX(75%);   opacity: 1; }     /* 0–325ms: flood in */
  45%  { transform: translateX(75%);   opacity: 1; }     /* hold */
  62%  { transform: translateX(-100%); opacity: 0.85; }  /* 450–806ms: part outward */
  75%  { transform: translateX(-100%); opacity: 0.85; }  /* hold open */
  100% { transform: translateX(-100%); opacity: 0; }     /* fade */
}
/*  Right wall: slides in from right edge to ~center, holds, then slams back HARDER */
@keyframes moses-wall-right {
  0%   { transform: translateX(100%);  opacity: 0.9; }
  25%  { transform: translateX(-75%);  opacity: 1; }     /* flood in */
  45%  { transform: translateX(-75%);  opacity: 1; }     /* hold */
  60%  { transform: translateX(100%);  opacity: 0.9; }   /* part outward */
  75%  { transform: translateX(100%);  opacity: 0.95; }  /* hold ready to slam */
  90%  { transform: translateX(-60%);  opacity: 1; }     /* SLAM toward opponent */
  100% { transform: translateX(-60%);  opacity: 0; }     /* fade on opponent */
}

/* ── DAVID: Sling Stone ─────────────────────────────────────── */
/* Whirl: rotate the sling wrapper so the stone orbits */
@keyframes david-whirl {
  0%   { transform: rotate(0deg); opacity: 1; }
  60%  { transform: rotate(1100deg); opacity: 1; }  /* ~3 full spins */
  100% { transform: rotate(1080deg); opacity: 0; }
}
/* Stone projectile flies left→right (David is left) */
@keyframes david-stone-fly-left {
  0%   { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateX(420px) translateY(15px) scale(1.1); }
  85%  { opacity: 0.6; transform: translateX(490px) translateY(20px) scale(0.9); }
  100% { opacity: 0; transform: translateX(510px) translateY(22px) scale(0.7); }
}
/* Stone flies right→left (David is right) */
@keyframes david-stone-fly-right {
  0%   { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
  60%  { opacity: 1; transform: translateX(-420px) translateY(15px) scale(1.1); }
  85%  { opacity: 0.6; transform: translateX(-490px) translateY(20px) scale(0.9); }
  100% { opacity: 0; transform: translateX(-510px) translateY(22px) scale(0.7); }
}
/* Impact starburst pop */
@keyframes david-impact {
  0%   { opacity: 0; transform: scale(0.3); }
  25%  { opacity: 1; transform: scale(1.2); }
  60%  { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

/* ── ESTHER: Reversal ───────────────────────────────────────── */
/* Mirror appears and holds */
@keyframes esther-mirror {
  0%   { opacity: 0; transform: scaleY(0.3); }
  18%  { opacity: 1; transform: scaleY(1.04); }
  28%  { opacity: 1; transform: scaleY(1); }
  75%  { opacity: 1; }
  95%  { opacity: 0.7; }
  100% { opacity: 0; }
}
/* Arrows flying right→left (into left-side Esther's mirror) */
@keyframes esther-arrow-rtl {
  0%   { opacity: 1; transform: translateX(0); }
  80%  { opacity: 0.9; transform: translateX(-420px); }
  100% { opacity: 0; transform: translateX(-440px); }
}
/* Arrows flying left→right (into right-side Esther's mirror) */
@keyframes esther-arrow-ltr {
  0%   { opacity: 1; transform: translateX(0); }
  80%  { opacity: 0.9; transform: translateX(420px); }
  100% { opacity: 0; transform: translateX(440px); }
}
/* Bounce-back arrows (red, reversed) */
@keyframes esther-bounce-ltr {
  0%   { opacity: 0; transform: translateX(0) scaleX(1.4); }
  20%  { opacity: 1; }
  80%  { opacity: 0.85; transform: translateX(420px) scaleX(1.4); }
  100% { opacity: 0; transform: translateX(450px) scaleX(1.4); }
}
@keyframes esther-bounce-rtl {
  0%   { opacity: 0; transform: translateX(0) scaleX(1.4); }
  20%  { opacity: 1; }
  80%  { opacity: 0.85; transform: translateX(-420px) scaleX(1.4); }
  100% { opacity: 0; transform: translateX(-450px) scaleX(1.4); }
}
/* "REVERSAL!" label */
@keyframes esther-label {
  0%   { opacity: 0; transform: scale(0.7) translateY(6px); }
  25%  { opacity: 1; transform: scale(1.05) translateY(0); }
  45%  { opacity: 1; transform: scale(1) translateY(0); }
  80%  { opacity: 0.9; }
  100% { opacity: 0; }
}

/* ── JUDAH: Menorah Flame ───────────────────────────────────── */
/* Chanukiah rises from the bottom */
@keyframes judah-menorah-rise {
  0%   { opacity: 0; transform: translateY(100%); }
  30%  { opacity: 1; transform: translateY(0); }
  80%  { opacity: 1; }
  100% { opacity: 0.7; }
}
/* Each candle flame ignites */
@keyframes judah-flame-ignite {
  0%   { opacity: 0; transform: scaleY(0) translateY(8px); }
  40%  { opacity: 1; transform: scaleY(1.1) translateY(-2px); }
  65%  { opacity: 1; transform: scaleY(1) translateY(0); }
  80%  { opacity: 0.9; transform: scaleY(1.05) translateY(-1px); }
  100% { opacity: 0; transform: scaleY(0.4) translateY(-20px); }
}
/* Fireball arcs from Judah's side to opponent (left→right) */
@keyframes judah-fireball-left {
  0%   { opacity: 0; transform: translateX(0) translateY(0) scale(0.5); }
  15%  { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
  70%  { opacity: 1; transform: translateX(430px) translateY(-20px) scale(1.2); }
  100% { opacity: 0; transform: translateX(480px) translateY(-15px) scale(0.8); }
}
/* Fireball arcs right→left */
@keyframes judah-fireball-right {
  0%   { opacity: 0; transform: translateX(0) translateY(0) scale(0.5); }
  15%  { opacity: 1; transform: translateX(0) translateY(0) scale(1); }
  70%  { opacity: 1; transform: translateX(-430px) translateY(-20px) scale(1.2); }
  100% { opacity: 0; transform: translateX(-480px) translateY(-15px) scale(0.8); }
}
/* Fireball impact burst */
@keyframes judah-fimpact {
  0%   { opacity: 0; transform: scale(0.2); }
  30%  { opacity: 1; transform: scale(1.3); }
  60%  { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8) translateY(-10px); }
}

/* ── RAMBAM: Healing Touch ──────────────────────────────────── */
/* Open book floats in and holds */
@keyframes rambam-book {
  0%   { opacity: 0; transform: translateY(-20px) scale(0.7) rotate(-4deg); }
  20%  { opacity: 1; transform: translateY(0) scale(1.03) rotate(0deg); }
  35%  { transform: scale(1) rotate(0deg); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px) scale(0.95); }
}
/* Golden particles fall from book into hero */
@keyframes rambam-particle {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  15%  { opacity: 1; transform: translateY(0) scale(1); }
  80%  { opacity: 0.8; transform: translateY(160px) scale(0.8); }
  100% { opacity: 0; transform: translateY(200px) scale(0.5); }
}
/* Green-gold healing halo */
@keyframes rambam-halo {
  0%   { opacity: 0; transform: scale(0.6); }
  30%  { opacity: 1; transform: scale(1.04); }
  55%  { opacity: 0.9; transform: scale(1); }
  85%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.08); }
}

/* ── GOLDA: Resolve ─────────────────────────────────────────── */
/* White-gold outline glow builds and fades */
@keyframes golda-glow {
  0%   { opacity: 0; transform: scale(0.9); }
  20%  { opacity: 0.9; transform: scale(1.04); }
  45%  { opacity: 1; transform: scale(1); }
  75%  { opacity: 0.7; }
  100% { opacity: 0; transform: scale(1.05); }
}
/* Armor plates snap on then shatter */
@keyframes golda-armor {
  0%   { opacity: 0; transform: scale(0.3) rotate(-8deg); }
  20%  { opacity: 1; transform: scale(1.06) rotate(0deg); }
  35%  { opacity: 1; transform: scale(1) rotate(0deg); }
  60%  { opacity: 1; transform: scale(1) rotate(0deg); }
  80%  { opacity: 0.5; transform: scale(1.2) rotate(3deg); }
  100% { opacity: 0; transform: scale(0.8) rotate(6deg); }
}
/* Shards fly upward */
@keyframes golda-shard {
  0%   { opacity: 0; transform: translateY(0) rotate(0deg); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-80px) rotate(360deg) scale(0.5); }
}
/* Fist icon pulses */
@keyframes golda-fist {
  0%   { opacity: 0; transform: scale(0.4); }
  30%  { opacity: 1; transform: scale(1.25); }
  55%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 0.9; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(0.9); }
}

/* ── EINSTEIN: E=mc² ────────────────────────────────────────── */
/* Equation materialises and pulses */
@keyframes einstein-eq {
  0%   { opacity: 0; transform: scale(0.5) translateY(8px); filter: blur(4px); }
  20%  { opacity: 1; transform: scale(1.08) translateY(0); filter: blur(0); }
  40%  { transform: scale(1) translateY(0); }
  60%  { opacity: 1; transform: scale(1.05); }    /* pulse */
  80%  { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; }
}
/* Energy beam fires (scales width from 0) */
@keyframes einstein-beam {
  0%   { opacity: 0; transform: scaleX(0); }
  20%  { opacity: 1; transform: scaleX(0.3); }
  65%  { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}
/* Explosion starburst at impact */
@keyframes einstein-explosion {
  0%   { opacity: 0; transform: scale(0.2); }
  25%  { opacity: 1; transform: scale(1.3); }
  55%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85) translateY(-10px); }
}
/* Einstein charge energy ball — pulses and glows */
@keyframes einstein-charge-ball {
  0%   { opacity: 0; transform: scale(0.4); }
  25%  { opacity: 1; transform: scale(1.12); }
  50%  { opacity: 0.9; transform: scale(1); }
  75%  { opacity: 1; transform: scale(1.08); }
  100% { opacity: 0; transform: scale(0.9); }
}

/* ════════════════════════════════════════════════════════════════
   PER-HERO ATTACK FX KEYFRAMES
   ════════════════════════════════════════════════════════════════ */

/* ── MOSES — Staff Strike ───────────────────────────────────── */
/* Staff swings in downward arc from attacker left side */
@keyframes moses-staff-swing-left {
  0%   { opacity: 0; transform: rotate(-60deg) translateX(-20px); }
  15%  { opacity: 1; transform: rotate(-50deg) translateX(0); }
  60%  { opacity: 1; transform: rotate(40deg) translateX(30px); }
  80%  { opacity: 0.7; transform: rotate(50deg) translateX(35px); }
  100% { opacity: 0; transform: rotate(55deg) translateX(38px); }
}
/* Staff swings from attacker right side */
@keyframes moses-staff-swing-right {
  0%   { opacity: 0; transform: rotate(60deg) translateX(20px); }
  15%  { opacity: 1; transform: rotate(50deg) translateX(0); }
  60%  { opacity: 1; transform: rotate(-40deg) translateX(-30px); }
  80%  { opacity: 0.7; transform: rotate(-50deg) translateX(-35px); }
  100% { opacity: 0; transform: rotate(-55deg) translateX(-38px); }
}
/* Impact starburst at target */
@keyframes moses-staff-impact {
  0%   { opacity: 0; transform: scale(0.3); }
  30%  { opacity: 1; transform: scale(1.2); }
  60%  { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.85); }
}

/* ── DAVID — Shepherd's Sling (basic attack) ────────────────── */
/* Quick twirl wind-up */
@keyframes attack-david-twirl {
  0%   { opacity: 1; transform: rotate(0deg); }
  70%  { opacity: 1; transform: rotate(540deg); }
  100% { opacity: 0; transform: rotate(620deg); }
}
/* Stone flies left→right (David is left attacker) */
@keyframes attack-david-stone-left {
  0%   { opacity: 1; transform: translateX(0) translateY(0); }
  55%  { opacity: 1; transform: translateX(360px) translateY(12px); }
  80%  { opacity: 0.5; transform: translateX(420px) translateY(16px); }
  100% { opacity: 0; transform: translateX(440px) translateY(18px); }
}
/* Stone flies right→left */
@keyframes attack-david-stone-right {
  0%   { opacity: 1; transform: translateX(0) translateY(0); }
  55%  { opacity: 1; transform: translateX(-360px) translateY(12px); }
  80%  { opacity: 0.5; transform: translateX(-420px) translateY(16px); }
  100% { opacity: 0; transform: translateX(-440px) translateY(18px); }
}
/* Small impact puff */
@keyframes attack-david-impact {
  0%   { opacity: 0; transform: scale(0.3); }
  30%  { opacity: 1; transform: scale(1.15); }
  65%  { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; }
}

/* ── ESTHER — Royal Decree ──────────────────────────────────── */
/* Scroll unfurls */
@keyframes esther-decree-scroll {
  0%   { opacity: 0; transform: scaleY(0.1); }
  25%  { opacity: 1; transform: scaleY(1.05); }
  40%  { opacity: 1; transform: scaleY(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scaleY(0.9) translateY(-6px); }
}
/* Gold shockwave ring expands left→right */
@keyframes esther-decree-wave-left {
  0%   { opacity: 0; transform: scaleX(0.1) translateX(0); }
  20%  { opacity: 1; transform: scaleX(0.4) translateX(0); }
  70%  { opacity: 0.85; transform: scaleX(1) translateX(0); }
  100% { opacity: 0; transform: scaleX(1.1) translateX(0); }
}
/* Shockwave right→left */
@keyframes esther-decree-wave-right {
  0%   { opacity: 0; transform: scaleX(0.1) translateX(0); }
  20%  { opacity: 1; transform: scaleX(0.4) translateX(0); }
  70%  { opacity: 0.85; transform: scaleX(1) translateX(0); }
  100% { opacity: 0; transform: scaleX(1.1) translateX(0); }
}
/* Gold flash at target */
@keyframes esther-decree-flash {
  0%   { opacity: 0; transform: scale(0.5); }
  35%  { opacity: 1; transform: scale(1.1); }
  65%  { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; }
}

/* ── JUDAH — Spear Thrust ───────────────────────────────────── */
/* Spear thrusts forward then retracts (left attacker) */
@keyframes judah-spear-thrust-left {
  0%   { opacity: 0; transform: translateX(-60px); }
  12%  { opacity: 1; transform: translateX(-20px); }
  50%  { opacity: 1; transform: translateX(140px); }   /* thrust forward */
  72%  { opacity: 1; transform: translateX(60px); }    /* retract */
  90%  { opacity: 0.5; transform: translateX(-10px); }
  100% { opacity: 0; transform: translateX(-60px); }
}
/* Spear thrust from right side */
@keyframes judah-spear-thrust-right {
  0%   { opacity: 0; transform: translateX(60px); }
  12%  { opacity: 1; transform: translateX(20px); }
  50%  { opacity: 1; transform: translateX(-140px); }
  72%  { opacity: 1; transform: translateX(-60px); }
  90%  { opacity: 0.5; transform: translateX(10px); }
  100% { opacity: 0; transform: translateX(60px); }
}
/* Spark burst at impact point */
@keyframes judah-spear-sparks {
  0%   { opacity: 0; transform: scale(0.4); }
  25%  { opacity: 1; transform: scale(1.2); }
  60%  { opacity: 0.9; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.8); }
}

/* ── RAMBAM — Wisdom Bolt ───────────────────────────────────── */
/* Gold glyph appears center */
@keyframes rambam-glyph {
  0%   { opacity: 0; transform: scale(0.4); }
  30%  { opacity: 1; transform: scale(1.08); }
  55%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 0.7; }
  100% { opacity: 0; }
}
/* Gold bolt flies left→right */
@keyframes rambam-bolt-left {
  0%   { opacity: 0; transform: scaleX(0.1) translateX(-40px); }
  20%  { opacity: 1; transform: scaleX(0.5) translateX(0); }
  70%  { opacity: 1; transform: scaleX(1) translateX(200px); }
  100% { opacity: 0; transform: scaleX(1.1) translateX(240px); }
}
/* Gold bolt flies right→left */
@keyframes rambam-bolt-right {
  0%   { opacity: 0; transform: scaleX(0.1) translateX(40px); }
  20%  { opacity: 1; transform: scaleX(0.5) translateX(0); }
  70%  { opacity: 1; transform: scaleX(1) translateX(-200px); }
  100% { opacity: 0; transform: scaleX(1.1) translateX(-240px); }
}
/* Gold ripple rings at impact */
@keyframes rambam-ripple {
  0%   { opacity: 0; transform: scale(0.3); }
  30%  { opacity: 1; transform: scale(1.15); }
  60%  { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* ── GOLDA — Iron Word ──────────────────────────────────────── */
/* "WORD!" slams left→right */
@keyframes golda-word-slam-left {
  0%   { opacity: 0; transform: translateX(-30px) scale(0.6); }
  18%  { opacity: 1; transform: translateX(0) scale(1.1); }
  40%  { opacity: 1; transform: translateX(20px) scale(1); }
  72%  { opacity: 1; transform: translateX(340px) scale(1); }
  85%  { opacity: 0.5; transform: translateX(380px) scale(0.9); }
  100% { opacity: 0; transform: translateX(410px) scale(0.8); }
}
/* "WORD!" slams right→left */
@keyframes golda-word-slam-right {
  0%   { opacity: 0; transform: translateX(30px) scale(0.6); }
  18%  { opacity: 1; transform: translateX(0) scale(1.1); }
  40%  { opacity: 1; transform: translateX(-20px) scale(1); }
  72%  { opacity: 1; transform: translateX(-340px) scale(1); }
  85%  { opacity: 0.5; transform: translateX(-380px) scale(0.9); }
  100% { opacity: 0; transform: translateX(-410px) scale(0.8); }
}
/* Gray shockwave ring expands */
@keyframes golda-shockwave {
  0%   { opacity: 0; transform: scale(0.3); }
  30%  { opacity: 1; transform: scale(1.15); }
  60%  { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}

/* ── EINSTEIN — Equation Spark ──────────────────────────────── */
/* Lightning bolt zigzag appears and fades */
@keyframes einstein-spark-bolt {
  0%   { opacity: 0; transform: scaleX(0); }
  18%  { opacity: 1; transform: scaleX(0.35); }
  55%  { opacity: 1; transform: scaleX(1); }
  80%  { opacity: 0.6; transform: scaleX(1); }
  100% { opacity: 0; }
}
/* Trailing delta symbol */
@keyframes einstein-spark-delta {
  0%   { opacity: 0; transform: scale(0.5) translateY(6px); }
  25%  { opacity: 1; transform: scale(1.1) translateY(0); }
  55%  { opacity: 1; transform: scale(1); }
  80%  { opacity: 0.6; }
  100% { opacity: 0; }
}
/* Blue-white flash at impact */
@keyframes einstein-spark-impact {
  0%   { opacity: 0; transform: scale(0.4); }
  35%  { opacity: 1; transform: scale(1.2); }
  65%  { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; }
}

/* ════════════════════════════════════════════════════════════════
   PER-HERO DEFEND FX KEYFRAMES
   ════════════════════════════════════════════════════════════════ */

/* ── MOSES — Pillar of Cloud ────────────────────────────────── */
@keyframes moses-cloud {
  0%   { opacity: 0; transform: scale(0.4) translateY(20px); }
  22%  { opacity: 1; transform: scale(1.06) translateY(-4px); }
  38%  { opacity: 1; transform: scale(1) translateY(0); }
  /* gentle drift */
  55%  { transform: scale(1.02) translateX(3px) translateY(-2px); }
  70%  { opacity: 1; transform: scale(1) translateX(0) translateY(0); }
  85%  { opacity: 0.8; }
  100% { opacity: 0; transform: scale(0.95) translateY(-10px); }
}

/* ── DAVID — Lion's Cloak ───────────────────────────────────── */
/* Wraps in from attacker left side */
@keyframes david-cloak-wrap-left {
  0%   { opacity: 0; transform: scaleX(0.05); }
  25%  { opacity: 1; transform: scaleX(1.06); }
  40%  { opacity: 1; transform: scaleX(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: scaleX(0.9) translateX(-10px); }
}
/* Wraps in from attacker right side */
@keyframes david-cloak-wrap-right {
  0%   { opacity: 0; transform: scaleX(0.05); }
  25%  { opacity: 1; transform: scaleX(1.06); }
  40%  { opacity: 1; transform: scaleX(1); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: scaleX(0.9) translateX(10px); }
}

/* ── ESTHER — Court Veil ────────────────────────────────────── */
/* Veil drops from above */
@keyframes esther-veil-drop {
  0%   { opacity: 0; transform: scaleY(0.05) translateY(-40px); }
  22%  { opacity: 0.9; transform: scaleY(1.04) translateY(0); }
  38%  { opacity: 1; transform: scaleY(1) translateY(0); }
  /* gentle sway */
  52%  { transform: scaleY(1) translateX(4px) rotate(0.5deg); }
  66%  { transform: scaleY(1) translateX(-3px) rotate(-0.3deg); }
  80%  { opacity: 1; transform: scaleY(1) translateX(0); }
  100% { opacity: 0; transform: scaleY(0.9) translateY(10px); }
}

/* ── JUDAH — Phalanx Shield ─────────────────────────────────── */
/* Shield materializes with a bracing oscillation */
@keyframes judah-phalanx {
  0%   { opacity: 0; transform: scale(0.3) rotate(-5deg); }
  20%  { opacity: 1; transform: scale(1.08) rotate(0deg); }
  32%  { opacity: 1; transform: scale(1) rotate(0deg); }
  /* bracing oscillation */
  46%  { transform: scale(1.02) rotate(2deg); }
  60%  { transform: scale(1) rotate(-1deg); }
  72%  { transform: scale(1.01) rotate(1deg); }
  84%  { opacity: 1; transform: scale(1) rotate(0deg); }
  100% { opacity: 0; transform: scale(0.9) rotate(-3deg); }
}

/* ── RAMBAM — Philosophical Calm ───────────────────────────── */
/* Ripple aura expands outward */
@keyframes rambam-calm {
  0%   { opacity: 0; transform: scale(0.4); }
  22%  { opacity: 1; transform: scale(1.06); }
  38%  { opacity: 1; transform: scale(1); }
  58%  { opacity: 0.9; transform: scale(1.03); }
  76%  { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.05); }
}
/* Orbiting Hebrew glyphs pop in and drift */
@keyframes rambam-glyph-orbit {
  0%   { opacity: 0; transform: translateX(0) translateY(0) scale(0.5); }
  20%  { opacity: 1; transform: translateX(4px) translateY(-4px) scale(1.1); }
  45%  { opacity: 1; transform: translateX(-3px) translateY(2px) scale(1); }
  70%  { opacity: 0.9; transform: translateX(5px) translateY(-2px) scale(1.05); }
  88%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateX(0) translateY(-6px) scale(0.9); }
}

/* ── GOLDA — Diplomatic Shield ─────────────────────────────── */
/* Document sheets slide in from left */
@keyframes golda-doc-slide-left {
  0%   { opacity: 0; transform: translateX(-80px); }
  25%  { opacity: 1; transform: translateX(6px); }
  38%  { opacity: 1; transform: translateX(0); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(-20px); }
}
/* Document sheets slide in from right */
@keyframes golda-doc-slide-right {
  0%   { opacity: 0; transform: translateX(80px); }
  25%  { opacity: 1; transform: translateX(-6px); }
  38%  { opacity: 1; transform: translateX(0); }
  78%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(20px); }
}

/* ── EINSTEIN — Theory Shield ───────────────────────────────── */
/* Chalkboard appears with a glow pulse */
@keyframes einstein-chalkboard {
  0%   { opacity: 0; transform: scale(0.4) translateY(8px); }
  22%  { opacity: 1; transform: scale(1.06) translateY(0); }
  38%  { opacity: 1; transform: scale(1) translateY(0); }
  /* glow pulse */
  55%  { filter: brightness(1.4); }
  65%  { filter: brightness(1); }
  80%  { opacity: 1; }
  100% { opacity: 0; transform: scale(0.95) translateY(-4px); }
}

/* ── Arcade Roadmap ───────────────────────────────────────── */
.arcade-roadmap {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--gap, 4px);
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  margin-bottom: 8px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.arcade-roadmap.full {
  gap: var(--gap, 8px);
  padding: 12px 16px;
  margin: 12px 0;
}

.roadmap-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  border-radius: 8px;
  border: 2px solid var(--ink);
  background: var(--cream);
  overflow: hidden;
  flex-shrink: 0;
  transition: transform 150ms;
}

.roadmap-node.beaten {
  opacity: 0.4;
}

.roadmap-node.current {
  opacity: 1;
  border-color: var(--gold);
  border-width: 3px;
  box-shadow: 0 0 0 2px var(--gold), 0 2px 8px rgba(212, 165, 116, 0.5);
  transform: scale(1.08);
  animation: roadmap-pulse 1.8s ease-in-out infinite;
}

.roadmap-node.upcoming {
  opacity: 0.7;
}

.roadmap-node.boss {
  border-color: #c8a000;
  border-width: 3px;
}

.roadmap-node.boss.current {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px #c8a000, 0 2px 10px rgba(200, 160, 0, 0.6);
}

@keyframes roadmap-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--gold), 0 2px 8px rgba(212, 165, 116, 0.4); }
  50%       { box-shadow: 0 0 0 4px var(--gold), 0 4px 14px rgba(212, 165, 116, 0.7); }
}

.roadmap-portrait {
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

/* Compact: portrait takes most of card height */
.arcade-roadmap.compact .roadmap-portrait {
  height: 46px;
}
.arcade-roadmap.compact .roadmap-portrait svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Full: portrait takes upper portion, name below */
.arcade-roadmap.full .roadmap-portrait {
  height: 75px;
}
.arcade-roadmap.full .roadmap-portrait svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.roadmap-name {
  font-size: 9px;
  font-weight: 600;
  text-align: center;
  padding: 2px 2px 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  color: var(--ink);
}

.roadmap-check {
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: 14px;
  color: #22aa44;
  font-weight: 900;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  line-height: 1;
}

.roadmap-boss-indicator,
.roadmap-crown {
  position: absolute;
  top: 1px;
  left: 3px;
  font-size: 11px;
  line-height: 1;
}

/* ── Arcade quit warning ─────────────────────────────────── */
.arcade-warning {
  background: #fde8e8;
  border: 2px solid #c1462d;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: 15px;
  color: #7a1010;
  line-height: 1.4;
}

/* ── Hard mode unlock celebration ───────────────────────── */
.unlock-celebration {
  background: linear-gradient(135deg, #1a2a4f, #3a5a9f);
  color: #ffd700;
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  padding: 16px 20px;
  border-radius: 10px;
  border: 3px solid #ffd700;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4), 4px 4px 0 rgba(0,0,0,0.3);
  margin: 16px 0;
  animation: unlock-pop 600ms ease-out forwards;
}

@keyframes unlock-pop {
  0%   { opacity: 0; transform: scale(0.75); }
  60%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── Hard mode card in difficulty select ─────────────────── */
.hard-mode-card {
  border-color: #c8a000;
  background: linear-gradient(135deg, #1a2a4f 0%, #2a4a8f 100%);
  color: #ffd700;
}
.hard-mode-card h3 { color: #ffd700; }
.hard-mode-card p  { color: #d4c080; }

/* ── Trivia unlock system ────────────────────────────────── */

/* Locked Special button */
.moves-row button.locked {
  border-color: var(--gold);
  background: #d4a574;
  color: var(--ink);
}

/* Trivia overlay card — wider than the default overlay-card */
.trivia-card {
  max-width: 560px;
}

/* Question text */
.trivia-question {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: var(--navy);
  line-height: 1.4;
}

/* 2×2 grid of answer buttons */
.trivia-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.trivia-option-btn {
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  font-size: 16px;
  line-height: 1.3;
}

/* Result color classes */
.trivia-correct {
  color: #1e8e3e;
}
.trivia-wrong {
  color: #c1462d;
}

/* Explanation shown after answering */
.trivia-explanation {
  font-size: 15px;
  font-style: italic;
  color: var(--navy);
  background: var(--bg);
  border-left: 4px solid var(--gold);
  padding: 10px 14px;
  margin: 12px 0 16px;
  border-radius: 4px;
  line-height: 1.5;
}

/* ── Mode grid: 3 cards (Study Mode added) ──────────────────── */
.mode-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 700px) { .mode-grid { grid-template-columns: 1fr; } }

/* ── Title screen mastery lines ────────────────────────────── */
.mastered-count {
  font-size: 15px;
  color: var(--navy);
  opacity: 0.85;
}

.scholar-banner {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  background: linear-gradient(135deg, #fff3b0 0%, #ffe066 50%, #d4a574 100%);
  color: var(--navy);
  border: 3px solid var(--gold);
  border-radius: 10px;
  padding: 12px 28px;
  text-align: center;
  box-shadow: 4px 4px 0 var(--shadow);
}

/* ── Study session screen ───────────────────────────────────── */
.screen-study { gap: 20px; max-width: 760px; margin: 0 auto; width: 100%; }
.screen-study h2 { font-size: 26px; color: var(--navy); text-align: center; }

.study-progress {
  width: 100%;
  height: 14px;
  background: #ddd;
  border: 2px solid var(--ink);
  border-radius: 8px;
  overflow: hidden;
}
.study-progress-fill {
  height: 100%;
  background: var(--olive);
  border-radius: 6px;
  transition: width 250ms ease;
}

.study-question {
  font-family: var(--font-heading);
  font-size: 22px;
  text-align: center;
  color: var(--ink);
  line-height: 1.4;
  max-width: 680px;
}

.study-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 680px;
}

.study-option {
  font-size: 18px;
  padding: 20px 16px;
  text-align: left;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.3;
  min-height: 64px;
}
.study-option:disabled { cursor: not-allowed; opacity: 0.7; }
.study-option.correct-answer { background: #d4edda; border-color: #28a745; color: #155724; }
.study-option.wrong-answer   { background: #f8d7da; border-color: #dc3545; color: #721c24; }

.study-feedback {
  width: 100%;
  max-width: 680px;
  border-left: 6px solid #888;
  border-radius: 6px;
  padding: 16px 20px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.study-feedback.correct { border-color: #28a745; }
.study-feedback.wrong   { border-color: #dc3545; }

.study-feedback-result {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
}
.study-feedback.correct .study-feedback-result { color: #155724; }
.study-feedback.wrong   .study-feedback-result { color: #721c24; }

.study-explanation {
  font-size: 15px;
  font-style: italic;
  color: var(--navy);
  border-left: 4px solid var(--gold);
  padding: 8px 12px;
  border-radius: 4px;
  line-height: 1.5;
}

.study-next-btn { align-self: flex-end; font-size: 18px; padding: 12px 24px; }

.study-quit { font-size: 16px; padding: 10px 20px; }

@media (max-width: 560px) {
  .study-options { grid-template-columns: 1fr; }
}

/* ── Study result screen ────────────────────────────────────── */
.screen-study-result { gap: 20px; max-width: 760px; margin: 0 auto; width: 100%; }
.screen-study-result h2 { font-size: 34px; color: var(--terracotta); text-align: center; }

.mastery-banner {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  background: linear-gradient(135deg, #fff3b0 0%, #ffe066 50%, #d4a574 100%);
  color: var(--navy);
  border: 3px solid var(--gold);
  border-radius: 10px;
  padding: 16px 32px;
  text-align: center;
  box-shadow: 4px 4px 0 var(--shadow);
}

.study-retry-line {
  font-size: 18px;
  color: var(--ink);
  opacity: 0.8;
  text-align: center;
}

.scholar-achievement {
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  background: #fff8d6;
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 10px 20px;
  text-align: center;
}

.study-result-grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 10px;
  background: var(--cream);
}

.study-result-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 4px;
}
.study-result-item.correct { background: #f0fff4; }
.study-result-item.wrong   { background: #fff5f5; }

.study-result-icon {
  font-size: 16px;
  font-weight: 700;
  flex-shrink: 0;
}
.study-result-item.correct .study-result-icon { color: #28a745; }
.study-result-item.wrong   .study-result-icon { color: #dc3545; }

.study-result-q { flex: 1; }

.study-result-answer {
  font-style: italic;
  color: var(--navy);
  font-size: 13px;
  flex-shrink: 0;
}

/* ── Heritage Quiz screen ───────────────────────────────────────────── */
.screen-quiz { gap: 18px; max-width: 760px; margin: 0 auto; width: 100%; }

.quiz-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 760px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 4px 4px 0 var(--shadow);
}
.quiz-portrait {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
}
.quiz-portrait svg { width: 100%; height: 100%; display: block; }
.quiz-header-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quiz-hero-name {
  font-family: var(--font-heading);
  font-size: 24px;
  color: var(--navy);
  margin: 0;
}
.quiz-question-meta {
  font-size: 13px;
  color: var(--ink);
  opacity: 0.7;
  margin: 0;
}

.quiz-streak {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--terracotta);
}
.quiz-streak-flame { font-size: 28px; }
.quiz-streak-num   { min-width: 1.5ch; text-align: right; }

.quiz-question {
  font-family: var(--font-heading);
  font-size: 22px;
  text-align: center;
  color: var(--ink);
  line-height: 1.4;
  max-width: 680px;
}

.quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 680px;
}

.quiz-option {
  font-size: 18px;
  padding: 20px 16px;
  text-align: left;
  background: var(--cream);
  color: var(--ink);
  line-height: 1.3;
  min-height: 64px;
}
.quiz-option:disabled { cursor: not-allowed; opacity: 0.7; }
.quiz-option.correct-answer { background: #d4edda; border-color: #28a745; color: #155724; }
.quiz-option.wrong-answer   { background: #f8d7da; border-color: #dc3545; color: #721c24; }

.quiz-feedback {
  width: 100%;
  max-width: 680px;
  border-left: 6px solid #888;
  border-radius: 6px;
  padding: 16px 20px;
  background: var(--cream);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.quiz-feedback.correct { border-color: #28a745; }
.quiz-feedback.wrong   { border-color: #dc3545; }

.quiz-feedback-result {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
}
.quiz-feedback.correct .quiz-feedback-result { color: #155724; }
.quiz-feedback.wrong   .quiz-feedback-result { color: #721c24; }

.quiz-explanation {
  font-size: 15px;
  font-style: italic;
  color: var(--navy);
  border-left: 4px solid var(--gold);
  padding: 8px 12px;
  border-radius: 4px;
  line-height: 1.5;
}

.quiz-next-btn { align-self: flex-end; font-size: 18px; padding: 12px 24px; }

.quiz-quit { font-size: 16px; padding: 10px 20px; }

/* ── Heritage Quiz result screen ────────────────────────────────────── */
.screen-quiz-result { gap: 20px; max-width: 760px; margin: 0 auto; width: 100%; position: relative; }
.screen-quiz-result h2 { font-size: 30px; color: var(--navy); text-align: center; margin: 0; }

.quiz-result-banner {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  color: var(--terracotta);
  text-align: center;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 16px 24px;
  box-shadow: 4px 4px 0 var(--shadow);
}
.quiz-result-banner.perfect {
  color: #fff;
  background: linear-gradient(135deg, var(--terracotta), var(--gold));
  border-color: var(--gold);
  text-shadow: 1px 1px 0 var(--ink);
  animation: quiz-perfect-pulse 1.6s ease-in-out infinite;
}
@keyframes quiz-perfect-pulse {
  0%, 100% { box-shadow: 4px 4px 0 var(--shadow); }
  50%      { box-shadow: 6px 6px 0 var(--gold); }
}

.quiz-new-best {
  font-family: var(--font-heading);
  font-size: 20px;
  text-align: center;
  background: #fff5d9;
  border: 2px solid var(--gold);
  color: var(--navy);
  padding: 10px 18px;
  border-radius: 10px;
}

.quiz-best-line {
  text-align: center;
  color: var(--ink);
  font-size: 15px;
}

.quiz-recap-label {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 4px;
  align-self: flex-start;
}

.quiz-recap-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: 760px;
}

.quiz-recap-item {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  background: var(--cream);
  border-left: 4px solid #888;
  font-size: 14px;
}
.quiz-recap-item.correct { border-left-color: #28a745; background: #f0fff4; }
.quiz-recap-item.wrong   { border-left-color: #dc3545; background: #fff5f5; }

.quiz-recap-icon { font-size: 18px; font-weight: 700; flex-shrink: 0; min-width: 18px; text-align: center; }
.quiz-recap-item.correct .quiz-recap-icon { color: #28a745; }
.quiz-recap-item.wrong   .quiz-recap-icon { color: #dc3545; }

.quiz-recap-hero {
  font-family: var(--font-heading);
  font-size: 13px;
  color: var(--navy);
  background: rgba(0, 0, 0, 0.05);
  padding: 2px 8px;
  border-radius: 4px;
  flex-shrink: 0;
}

.quiz-recap-q { flex: 1; line-height: 1.35; }

.quiz-recap-answer {
  font-style: italic;
  color: var(--navy);
  font-size: 12px;
  flex-shrink: 0;
}

/* Title screen — Heritage Quiz best-streak banner */
.quiz-title-best {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--navy);
  text-align: center;
  margin: 4px auto;
}

@media (max-width: 600px) {
  .quiz-header {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 10px;
    padding: 10px 14px;
  }
  .quiz-portrait { width: 56px; height: 56px; }
  .quiz-hero-name { font-size: 20px; }
  .quiz-streak {
    grid-column: 1 / -1;
    justify-content: center;
    font-size: 28px;
  }
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-question { font-size: 18px; }
  .quiz-option { font-size: 16px; padding: 16px 12px; min-height: 56px; }
  .quiz-result-banner { font-size: 22px; padding: 12px 16px; }
  .quiz-recap-item { flex-wrap: wrap; }
  .quiz-recap-q { width: 100%; }
}

/* ── Achievement toast ──────────────────────────────────────────────── */
@keyframes toast-slide-up {
  from { transform: translateY(120px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@keyframes toast-slide-down {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(120px); opacity: 0; }
}

.achievement-toast {
  position: fixed;
  /* Sit above the iPhone home-indicator on devices that report it. */
  bottom: max(32px, env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  width: 320px;
  background: var(--cream);
  border: 3px solid var(--gold);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--shadow);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  z-index: 200;
  opacity: 0;
  transition: transform 380ms cubic-bezier(0.22,1,0.36,1), opacity 380ms ease;
  pointer-events: none;
}
.achievement-toast.toast-visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-icon { font-size: 28px; flex-shrink: 0; }
.toast-body { display: flex; flex-direction: column; gap: 2px; }
.toast-title { font-family: var(--font-heading); font-size: 14px; font-weight: 700; color: var(--navy); }
.toast-desc  { font-size: 12px; color: var(--ink); opacity: 0.75; }

/* ── Stats screen ───────────────────────────────────────────────────── */
.stats-screen {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
  align-items: stretch;
  gap: 32px;
}
.stats-screen h2 { text-align: center; color: var(--navy); }

.stats-section {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.stats-section h3 { color: var(--navy); border-bottom: 1px solid rgba(0,0,0,0.1); padding-bottom: 8px; margin-bottom: 4px; }

.stats-overall { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; font-size: 16px; }
.stats-overall div strong { color: var(--terracotta); }

.stats-table { display: flex; flex-direction: column; gap: 10px; }

.stats-hero-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg);
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 8px 12px;
}
.stats-hero-portrait {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  background: #fff;
  border: 1px solid var(--ink);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stats-hero-portrait svg { width: 100%; height: auto; }

.stats-hero-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--navy);
  min-width: 140px;
}
.stats-hero-nums {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.85;
}

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

.achievement-card {
  background: var(--bg);
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  position: relative;
}
.achievement-card.locked {
  opacity: 0.4;
  filter: grayscale(1);
}
.achievement-icon { font-size: 28px; }
.achievement-title { font-family: var(--font-heading); font-weight: 700; font-size: 14px; color: var(--navy); line-height: 1.2; }
.achievement-desc  { font-size: 12px; color: var(--ink); opacity: 0.75; line-height: 1.3; }
.achievement-lock {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 14px;
  opacity: 0.7;
}

.danger-zone { border-color: #cc2200; }
.danger-zone h3 { color: #cc2200; }
.danger-zone p   { font-size: 14px; opacity: 0.75; }

@media (max-width: 600px) {
  .stats-overall { grid-template-columns: 1fr; }
  .achievement-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-hero-row { flex-wrap: wrap; }
}

/* ── Status badges above each fighter ──────────────────────────────────────── */

.status-badges {
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
  z-index: 3;
  pointer-events: none;
  flex-wrap: nowrap;
  max-width: 200%;
}

.status-badge {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 12px;
  padding: 3px 8px;
  white-space: nowrap;
  box-shadow: 2px 2px 0 var(--shadow);
  pointer-events: auto;
}

.status-badge.status-boss {
  background: var(--gold);
  color: var(--ink);
  border-color: var(--ink);
}
.status-badge.status-defend {
  background: #6ba8e0;
  color: #fff;
  border-color: var(--navy);
}
.status-badge.status-reversal {
  background: var(--gold);
  color: var(--ink);
}
.status-badge.status-burn {
  background: #ff7040;
  color: #fff;
  border-color: var(--terracotta);
}
.status-badge.status-empowered {
  background: var(--terracotta);
  color: var(--cream);
}
.status-badge.status-charging {
  background: var(--navy);
  color: var(--cream);
}

@media (max-width: 600px) {
  .status-badges { top: -34px; gap: 4px; }
  .status-badge { font-size: 11px; padding: 2px 6px; }
}

/* ── Boss encounter styles ─────────────────────────────────────────────────── */

/* Gold glow on the boss fighter in the arena */
.fighter.is-boss {
  filter: drop-shadow(0 0 8px #d4a574) drop-shadow(0 0 16px rgba(212, 165, 116, 0.5));
}

/* Boss intro screen */
.screen-boss-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  text-align: center;
}

.boss-intro-header {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 4px;
  color: #d4a574;
  text-shadow: 0 0 12px rgba(212, 165, 116, 0.7), 1px 1px 0 #000;
  animation: boss-header-pulse 1.6s ease-in-out infinite;
}

@keyframes boss-header-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.7; }
}

.boss-intro-portrait {
  width: 180px;
  filter: drop-shadow(0 0 14px #d4a574) drop-shadow(0 0 28px rgba(212, 165, 116, 0.4));
}

.boss-intro-portrait svg { width: 100%; height: auto; }

.boss-intro-name {
  font-family: var(--font-heading);
  font-size: 32px;
  color: var(--navy);
  margin: 0;
}

.boss-intro-flavor {
  font-size: 16px;
  color: var(--ink);
  opacity: 0.8;
  margin: 0;
}

.boss-buffs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: rgba(212, 165, 116, 0.12);
  border: 2px solid #d4a574;
  border-radius: 10px;
  padding: 14px 20px;
  text-align: left;
  font-size: 15px;
  color: var(--ink);
}

.boss-buffs li::before {
  content: "⚠ ";
  color: #d4a574;
  font-weight: 700;
}

.boss-begin-btn {
  font-size: 20px;
  padding: 14px 40px;
  background: linear-gradient(135deg, #c1462d 0%, #8b1a0a 100%);
  color: #fff;
  border: 3px solid #d4a574;
  border-radius: 8px;
  font-family: var(--font-heading);
  letter-spacing: 2px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(212, 165, 116, 0.4);
}

/* ── VS Intro screen ──────────────────────────────────────────────────── */
/* Pre-battle "fighter intro" — fighters slide in, big VS text pops, stage
   name announced. Auto-advances; clicking anywhere skips. */
.screen-vs-intro {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 24px 16px;
  text-align: center;
  background: linear-gradient(135deg, #1a2a4f 0%, #0a1428 100%);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  color: var(--cream);
}

.vs-intro-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.18;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: blur(2px) saturate(0.6);
}
.vs-intro-bg svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vs-intro-stage-name {
  position: relative;
  z-index: 2;
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(212, 165, 116, 0.6), 2px 2px 0 #000;
  opacity: 0;
  animation: vs-intro-stage-drop 400ms ease-out 500ms forwards;
}

.vs-intro-fighters {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 32px;
  width: 100%;
}

.vs-intro-fighter {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0;
}
.vs-intro-fighter.left {
  animation: vs-intro-slide-left 400ms ease-out forwards;
}
.vs-intro-fighter.right {
  animation: vs-intro-slide-right 400ms ease-out forwards;
}

.vs-intro-portrait {
  width: 180px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6));
}
.vs-intro-portrait svg {
  width: 100%;
  height: 100%;
}

.vs-intro-name {
  font-family: var(--font-heading);
  font-size: 26px;
  font-weight: 700;
  color: var(--cream);
  text-shadow: 2px 2px 0 #000;
  margin: 0;
}

.vs-intro-era {
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gold);
  opacity: 0.9;
}

.vs-intro-vs {
  font-family: var(--font-heading);
  font-size: 120px;
  font-weight: 900;
  line-height: 1;
  color: var(--terracotta);
  text-shadow:
    0 0 18px rgba(193, 70, 45, 0.7),
    3px 3px 0 #000,
    -2px -2px 0 #000;
  opacity: 0;
  transform: scale(0.3);
  animation: vs-intro-vs-pop 400ms cubic-bezier(0.34, 1.56, 0.64, 1) 300ms forwards;
}

.vs-intro-skip-hint {
  position: relative;
  z-index: 2;
  font-size: 14px;
  font-style: italic;
  color: var(--cream);
  opacity: 0;
  margin: 0;
  animation: vs-intro-skip-fade 400ms ease-out 1200ms forwards;
}

@keyframes vs-intro-slide-left {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes vs-intro-slide-right {
  from { opacity: 0; transform: translateX(100%); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes vs-intro-vs-pop {
  0%   { opacity: 0; transform: scale(0.3); }
  60%  { opacity: 1; transform: scale(1.2); }
  100% { opacity: 1; transform: scale(1.0); }
}
@keyframes vs-intro-stage-drop {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vs-intro-skip-fade {
  from { opacity: 0; }
  to   { opacity: 0.65; }
}

@media (prefers-reduced-motion: reduce) {
  .vs-intro-fighter.left,
  .vs-intro-fighter.right,
  .vs-intro-vs,
  .vs-intro-stage-name,
  .vs-intro-skip-hint {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
  }
}

@media (max-width: 600px) {
  .screen-vs-intro {
    min-height: 60vh;
    gap: 18px;
  }
  .vs-intro-fighters {
    gap: 12px;
  }
  .vs-intro-portrait {
    width: 110px;
    height: 110px;
  }
  .vs-intro-name {
    font-size: 18px;
  }
  .vs-intro-era {
    font-size: 11px;
  }
  .vs-intro-vs {
    font-size: 72px;
  }
  .vs-intro-stage-name {
    font-size: 20px;
    letter-spacing: 2px;
  }
  .vs-intro-skip-hint {
    font-size: 12px;
  }
}

/* Tightest phones (iPhone SE 320px). Shrink portrait + VS so the 2-fighter
   row doesn't blow past the viewport edge — important because the layout is
   `[fighter] [VS] [fighter]` and the giant VS text was sized for ≥600px. */
@media (max-width: 360px) {
  .vs-intro-portrait { width: 88px; height: 88px; }
  .vs-intro-vs { font-size: 56px; }
  .vs-intro-name { font-size: 16px; }
  .vs-intro-fighters { gap: 8px; }
  .vs-intro-stage-name { font-size: 16px; letter-spacing: 1px; }
}

/* ── VS Intro: matchup prediction badge ──────────────────────────────────
   Small chip that surfaces the player's personal W/L vs this opponent.
   Only shown for "you vs AI" matches outside Tournament. Fades in after
   the stage name has settled (~700ms delay) so it feels like a follow-up
   beat, not a competing focal point. */
.vs-intro-matchup-prediction {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: rgba(255, 248, 231, 0.85);  /* cream, slightly translucent */
  border: 2px solid var(--gold);
  border-radius: 16px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink);
  font-weight: 600;
  margin: 6px auto 0;
  animation: vs-intro-matchup-fade 0.6s ease-out 0.7s backwards;
}
.vs-intro-matchup-icon { font-size: 16px; line-height: 1; }
.vs-intro-matchup-text { line-height: 1.2; }
@keyframes vs-intro-matchup-fade {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .vs-intro-matchup-prediction { animation: none; }
}
@media (max-width: 600px) {
  .vs-intro-matchup-prediction { font-size: 12px; padding: 5px 10px; gap: 6px; }
  .vs-intro-matchup-icon { font-size: 14px; }
}

/* ── VS Intro: rivalry flavor badge ─────────────────────────────────────
   Thematic tag for canonical hero pairings ("Warriors of Israel",
   "Giants of Jewish thought", etc.). Only fires on specific pairs in
   the RIVALRIES map in screens.js — most matchups get no badge. The
   0.6s delay places it after the stage name has dropped (500ms+400ms)
   but slightly before the matchup-prediction chip (0.7s delay). */
.vs-intro-rivalry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px;
  margin: 4px auto;
  background: linear-gradient(135deg, rgba(193, 70, 45, 0.15), rgba(212, 165, 116, 0.15));
  border: 2px solid var(--terracotta);
  border-radius: 16px;
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--terracotta);
  text-transform: uppercase;
  letter-spacing: 1px;
  animation: vs-intro-rivalry-pop 0.5s ease-out 0.6s backwards;
  z-index: 2;
  position: relative;
}
.vs-intro-rivalry-icon { font-size: 16px; line-height: 1; }
.vs-intro-rivalry-tag { line-height: 1.2; }

@keyframes vs-intro-rivalry-pop {
  0%   { opacity: 0; transform: scale(0.7) rotate(-2deg); }
  60%  { opacity: 1; transform: scale(1.1) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
  .vs-intro-rivalry { animation: none; }
}

@media (max-width: 600px) {
  .vs-intro-rivalry { font-size: 12px; padding: 4px 10px; }
  .vs-intro-rivalry-icon { font-size: 14px; }
}

body.theme-high-contrast .vs-intro-rivalry {
  background: rgba(255, 122, 89, 0.15);
  border-color: var(--terracotta);
  color: var(--terracotta);
}

/* ── Match-End VICTORY / DEFEAT splash ──────────────────────────────────
   Symmetric bookend to the VS Intro shown briefly between the final
   combat tick and the result screen. Auto-advances on a timer (driven
   by animSpeed) and is click-anywhere skippable. */
.screen-match-end-splash {
  position: relative;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 40px 20px;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

.match-end-splash-bg {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  opacity: 0.25;
  pointer-events: none;
}
.match-end-splash-bg svg { width: 100%; height: 100%; object-fit: cover; }

.match-end-splash-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.match-end-splash-winner-portrait {
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: match-end-portrait-rise 0.6s ease-out backwards;
}
.match-end-splash-winner-portrait svg { width: 100%; height: 100%; }

.match-end-splash-title {
  font-family: var(--font-heading);
  font-size: 84px;
  letter-spacing: 4px;
  margin: 0;
  text-shadow: 4px 4px 0 var(--ink);
  animation: match-end-title-pop 0.7s ease-out 0.3s backwards;
}
.match-end-splash-title.victory { color: var(--gold); }
.match-end-splash-title.defeat  { color: var(--terracotta); }
.match-end-splash-title.neutral { color: var(--navy); font-size: 56px; }

.match-end-splash-name {
  font-family: var(--font-heading);
  font-size: 28px;
  color: var(--navy);
  margin: 0;
  animation: match-end-fade-up 0.5s ease-out 0.6s backwards;
}

.match-end-splash-flavor {
  font-family: var(--font-body);
  font-size: 16px;
  font-style: italic;
  color: var(--ink);
  opacity: 0.85;
  margin: 0;
  animation: match-end-fade-up 0.5s ease-out 0.8s backwards;
}

.match-end-splash-skip-hint {
  position: absolute;
  bottom: 20px;
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--ink);
  opacity: 0;
  animation: match-end-skip-fade 0.5s ease-out 1.4s forwards;
  z-index: 3;
}

@keyframes match-end-portrait-rise {
  0%   { opacity: 0; transform: translateY(40px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes match-end-title-pop {
  0%   { opacity: 0; transform: scale(0.3) rotate(-3deg); }
  60%  { opacity: 1; transform: scale(1.15) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes match-end-fade-up {
  0%   { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes match-end-skip-fade {
  0%   { opacity: 0; }
  100% { opacity: 0.6; }
}

@media (prefers-reduced-motion: reduce) {
  .match-end-splash-winner-portrait,
  .match-end-splash-title,
  .match-end-splash-name,
  .match-end-splash-flavor,
  .match-end-splash-skip-hint {
    animation: none;
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .screen-match-end-splash { min-height: 360px; padding: 24px 12px; }
  .match-end-splash-winner-portrait { width: 160px; height: 160px; }
  .match-end-splash-title { font-size: 56px; letter-spacing: 2px; }
  .match-end-splash-title.neutral { font-size: 38px; }
  .match-end-splash-name { font-size: 22px; }
  .match-end-splash-flavor { font-size: 13px; }
}

/* iPhone SE width — splash title at 56px+letter-spacing can still bump into
   320px viewport edges. Trim one more notch. */
@media (max-width: 360px) {
  .match-end-splash-winner-portrait { width: 128px; height: 128px; }
  .match-end-splash-title { font-size: 44px; letter-spacing: 1px; }
  .match-end-splash-title.neutral { font-size: 32px; }
  .match-end-splash-name { font-size: 18px; }
}

/* High-contrast theme — bright accent colors */
body.theme-high-contrast .match-end-splash-title.victory { color: var(--gold); }
body.theme-high-contrast .match-end-splash-title.defeat  { color: var(--terracotta); }

/* ============================================================
   TITLE SCREEN POLISH — Featured Hero, Sparkles, Pulse
   ============================================================ */

/* ── Title h1 pulse ─────────────────────────────────────── */
.screen-title h1 {
  animation: title-pulse 4s ease-in-out infinite;
}
@keyframes title-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.02); }
}

/* ── Title sparkles container + keyframe ────────────────── */
.screen-title {
  position: relative;
  overflow: hidden;
}

.title-sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.sparkle {
  position: absolute;
  left: var(--x);
  bottom: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0;
  box-shadow: 0 0 6px var(--gold), 0 0 12px var(--gold);
  animation: sparkle-rise var(--dur) linear var(--delay) infinite;
}

@keyframes sparkle-rise {
  0%   { opacity: 0;   transform: translate(0, 0) scale(0.5); }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.6; transform: translate(40px, -90vh) scale(1); }
  100% { opacity: 0;   transform: translate(60px, -100vh) scale(0.5); }
}

/* ── Featured Hero panel ────────────────────────────────── */
.featured-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 14px;
  box-shadow: 6px 6px 0 var(--shadow);
  padding: 18px 22px;
  max-width: 520px;
  width: 100%;
  cursor: pointer;
  text-align: left;
  position: relative;
  z-index: 1;
  animation: featured-fade-in 400ms ease-out;
  transition: transform 80ms, box-shadow 80ms;
}
.featured-hero:hover {
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--shadow);
}

@keyframes featured-fade-in {
  from { opacity: 0; transform: scale(0.97) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.featured-portrait {
  flex-shrink: 0;
  width: 110px;
  height: 110px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.featured-portrait svg {
  width: 100%;
  height: 100%;
}

.featured-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.featured-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: uppercase;
  margin: 0;
}

.featured-name {
  font-family: var(--font-heading);
  font-size: 22px;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
}

.featured-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.featured-dates {
  font-size: 12px;
  color: var(--ink);
  opacity: 0.65;
}

.featured-quote {
  font-size: 13px;
  font-style: italic;
  color: var(--navy);
  opacity: 0.85;
  margin: 2px 0 0;
  line-height: 1.4;
  border-left: 3px solid var(--gold);
  padding-left: 8px;
}

.featured-cta {
  font-size: 13px;
  font-weight: 700;
  color: var(--terracotta);
  margin: 4px 0 0;
}

/* ── Featured Hero responsive: stack on mobile ──────────── */
@media (max-width: 560px) {
  .featured-hero {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 16px;
    gap: 12px;
  }
  .featured-quote {
    border-left: none;
    padding-left: 0;
    border-top: 2px solid var(--gold);
    padding-top: 6px;
  }
  .featured-meta {
    justify-content: center;
  }
}

/* ============================================================
   IDLE HERO BREATHING — Battle fighters + Character select
   ============================================================ */

/* ── Battle screen: subtle bob on idle fighters ─────────── */
/* Breathing is on the SVG only — badges inside .fighter won't bob */
.fighter > svg {
  display: block;
  animation: hero-breathing 3s ease-in-out infinite;
}
@keyframes hero-breathing {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-3px); }
}

/* Pause breathing during action animations so it doesn't fight the lunge */
.fighter.act-attack > svg,
.fighter.act-defend > svg,
.fighter.act-special > svg,
.fighter.act-hit > svg {
  animation-play-state: paused;
}

/* Action classes on .fighter itself still take precedence for the lunge/shake. */

/* ── Character select / Hall portraits: slight idle bob ─── */
.hero-portrait svg {
  animation: portrait-idle 4s ease-in-out infinite;
}
@keyframes portrait-idle {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2px); }
}

/* Stagger so all cards don't bob in sync */
.hero-grid .hero-card:nth-child(odd) .hero-portrait svg  { animation-delay: -1.5s; }
.hero-grid .hero-card:nth-child(3n)  .hero-portrait svg  { animation-delay: -0.8s; }

/* Hall of Heroes portrait idle bob */
.hall-portrait svg {
  animation: portrait-idle 4s ease-in-out infinite;
}
.hall-grid .hall-hero-card:nth-child(odd) .hall-portrait svg  { animation-delay: -1.5s; }
.hall-grid .hall-hero-card:nth-child(3n)  .hall-portrait svg  { animation-delay: -0.8s; }

/* ============================================================
   RESPONSIVE — Mobile + Tablet
   ============================================================ */

/* ── HP bar SVG: always scale fluidly inside its container ── */
.hp-cell svg {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

/* ============================================================
   TABLET  (≤ 900 px)
   ============================================================ */
@media (max-width: 900px) {

  /* Root padding tighter */
  #root {
    padding: 20px 16px;
  }

  /* Heading scale */
  h1 { font-size: 36px; }
  h2 { font-size: 26px; }

  /* Title screen */
  .screen-title h1 { font-size: 52px; }

  /* Title buttons: full-width stack, but capped */
  .title-buttons {
    width: 100%;
    max-width: 400px;
    min-width: 0;
  }

  /* Mode / opponent / difficulty grids — lower min column size */
  .mode-grid {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  /* Hero grid: tighten minimum so cards can be 2-up on narrow tablets */
  .hero-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  /* Battle: allow HP bar cells to shrink */
  .hp-bars {
    gap: 8px;
  }

  /* Move buttons: 3-across on tablet (already default at ≥900) */
  .moves-row {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Result buttons — keep row but allow wrapping */
  .result-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Boss intro: ensure vertical scrollability */
  .screen-boss-intro {
    max-height: 90vh;
    overflow-y: auto;
  }
}

/* ============================================================
   PHONE  (≤ 600 px)
   ============================================================ */
@media (max-width: 600px) {

  /* Root: minimal side padding */
  #root {
    padding: 16px 12px;
  }

  /* Screen padding */
  .screen {
    padding: 24px 12px;
    gap: 16px;
  }

  /* Base headings */
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }

  /* ── Base button: ensure touch target + legible font ── */
  button {
    font-size: 18px;
    padding: 14px 20px;
    min-height: 44px;
  }

  /* ── Title screen ─────────────────────────────────── */
  .screen-title h1 {
    font-size: 44px;
  }

  .title-buttons {
    width: 100%;
    max-width: 320px;
    min-width: 0;
  }

  .title-buttons button {
    width: 100%;
    font-size: 20px;
  }

  /* Quick Play mobile: scale label and icon proportionally */
  button.quick-play {
    padding: 10px 16px 10px 14px;
    border-left-width: 8px;
  }
  button.quick-play .quick-play-icon { font-size: 26px; }
  button.quick-play .quick-play-label { font-size: 20px; }
  button.quick-play .quick-play-sub   { font-size: 12px; }

  /* Continue Last mobile: match Quick Play scaling */
  button.continue-last {
    padding: 10px 16px 10px 14px;
    border-left-width: 8px;
  }
  button.continue-last .continue-last-icon  { font-size: 26px; }
  button.continue-last .continue-last-label { font-size: 20px; }
  button.continue-last .continue-last-sub   { font-size: 12px; }

  /* ── Mode / Opponent / Difficulty grids ───────────── */
  .mode-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* ── Character select ─────────────────────────────── */
  .hero-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
  }

  .hero-portrait {
    height: 120px;
  }

  .hero-meta .bio {
    font-size: 12px;
  }

  .hero-meta .moves {
    font-size: 11px;
  }

  .hero-stats {
    font-size: 11px;
    gap: 4px 6px;
    margin: 0 0 6px;
  }
  .hero-stat {
    padding: 1px 6px;
  }

  /* ── Battle screen ─────────────────────────────────── */

  /* HP bar cells shrink */
  .hp-cell svg {
    max-width: 220px;
  }

  .vs-label {
    font-size: 20px;
  }

  /* Arena: taller aspect on phone so fighters are more visible */
  .arena {
    aspect-ratio: 4 / 3;
  }

  /* Move buttons: single column on phone */
  .moves-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .moves-row button {
    padding: 12px 16px;
  }

  .moves-row button strong {
    font-size: 16px;
  }

  .turn-banner {
    font-size: 18px;
  }

  /* Arcade roadmap compact: horizontal scroll on phone */
  .arcade-roadmap.compact {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Result screen ─────────────────────────────────── */
  .screen-result h2 {
    font-size: 30px;
  }

  .result-buttons {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .result-buttons button {
    width: 100%;
  }

  /* Match recap cards: full width on phone */
  .match-summary,
  .did-you-know {
    max-width: 100%;
    padding: 16px;
  }

  /* Personal Records: full width on phone */
  .match-records {
    padding: 12px 14px;
  }
  .records-list li {
    font-size: 13px;
  }

  /* Did You Know? portrait stacks above text on phone */
  .dyk-card {
    flex-direction: column;
    align-items: center;
  }

  .dyk-body {
    text-align: center;
  }

  /* Arcade roadmap full variant: allow horizontal scroll */
  .arcade-roadmap.full {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Trivia overlay ────────────────────────────────── */
  .trivia-options {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .trivia-option-btn {
    font-size: 15px;
    padding: 12px 14px;
  }

  .trivia-question {
    font-size: 16px;
  }

  /* ── Stats screen ─────────────────────────────────── */
  /* Already has @media(max-width:600px) above — extend here */
  .stats-hero-row {
    flex-wrap: wrap;
  }

  .stats-hero-portrait {
    /* keep portrait but allow row to wrap naturally */
    flex-shrink: 0;
  }

  .stats-hero-name {
    min-width: 0;
    width: 100%;
  }

  .stats-overall {
    grid-template-columns: 1fr;
  }

  /* ── Study mode ────────────────────────────────────── */
  .study-options {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .study-question {
    font-size: 18px;
  }

  .study-option {
    font-size: 16px;
    padding: 14px 12px;
  }

  /* ── Achievement toast ─────────────────────────────── */
  .achievement-toast {
    width: 90%;
    max-width: 320px;
  }

  /* ── Overlays ──────────────────────────────────────── */
  .overlay-card {
    padding: 20px 16px;
  }

  /* Boss intro overlay: vertically scrollable */
  .screen-boss-intro {
    max-height: 90vh;
    overflow-y: auto;
    padding: 16px 12px;
    gap: 12px;
  }

  .boss-intro-portrait {
    width: 130px;
  }

  .boss-intro-name {
    font-size: 24px;
  }

  .boss-intro-header {
    font-size: 22px;
  }

  .boss-begin-btn {
    font-size: 18px;
    padding: 12px 28px;
  }

  /* ── Help button: keep it accessible ──────────────── */
  .help-button {
    width: 44px;
    height: 44px;
    /* max() preserves the 8px floor on phones without a notch but pushes
       below the safe-area-inset when present (e.g. iPhone X+). */
    top: max(8px, env(safe-area-inset-top));
    right: max(8px, env(safe-area-inset-right));
  }
}

/* ── Hero card wrap (char-select + info pill) ───────────────────────────── */
.hero-card-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}

.info-pill {
  font-size: 13px;
  padding: 6px 12px;
  background: var(--gold);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 20px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  transition: transform 80ms;
  align-self: center;
  white-space: nowrap;
  /* Touch target: ensure ≥44px tap height on mobile (Apple HIG min). The
     visible pill stays compact via padding, but min-height pads the hit-area. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.info-pill:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shadow); }

/* ── Hall of Heroes screen ──────────────────────────────────────────────── */
.hall-screen {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 16px;
  margin: 8px 0;
}

.hall-hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 8px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--shadow);
  transition: transform 80ms;
  text-align: center;
}
.hall-hero-card:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--shadow); }

.hall-portrait {
  width: 120px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.hall-portrait svg { width: 100%; height: 100%; }

.hall-hero-name {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}

.hall-learn-btn {
  font-size: 12px;
  padding: 5px 10px;
  background: var(--terracotta);
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 2px 2px 0 var(--shadow);
  margin-top: 2px;
  /* Touch target ≥44px on mobile (Apple HIG). */
  min-height: 44px;
  min-width: 44px;
}
.hall-learn-btn:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--shadow); }

/* ── Hero Profile modal ──────────────────────────────────────────────────── */
.profile-overlay {
  align-items: flex-start;
  overflow-y: auto;
  padding: 16px;
}

.profile-card {
  max-width: 600px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px 28px;
}

.profile-portrait {
  display: flex;
  justify-content: center;
}
.profile-portrait svg {
  width: 160px;
  height: 160px;
}

.profile-name {
  text-align: center;
  font-size: 28px;
  margin-bottom: 4px;
}

.profile-meta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 14px;
}
.profile-dates {
  color: #555;
}

.profile-bio {
  font-size: 15px;
  line-height: 1.65;
  text-align: left;
}

.profile-quote {
  font-style: italic;
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--navy);
  padding: 10px 16px;
  border-left: 4px solid var(--gold);
  margin: 4px 0;
}

.profile-section {
  border-top: 2px solid var(--ink);
  padding-top: 12px;
}
.profile-section-title {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
  margin-bottom: 8px;
  font-family: var(--font-body);
}

.profile-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 15px;
}

.profile-mastery-earned {
  color: var(--olive);
  font-weight: 700;
}
.profile-mastery-hint {
  color: #777;
  font-size: 13px;
}

@media (max-width: 600px) {
  .hall-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .hall-portrait {
    width: 90px;
    height: 90px;
  }

  .profile-card {
    padding: 16px 14px;
    max-height: 85vh;
  }

  .profile-portrait svg {
    width: 120px;
    height: 120px;
  }

  .profile-name {
    font-size: 22px;
  }
}

/* ── Endless Survival screens ─────────────────────────────────────────────── */

.screen-endless-continue,
.screen-endless-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 40px 20px;
  text-align: center;
  position: relative;
}

.screen-endless-continue h1,
.screen-endless-result h1 {
  font-size: 48px;
  color: var(--navy);
}

.streak-indicator {
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--terracotta);
  background: var(--cream);
  border: 3px solid var(--terracotta);
  border-radius: 12px;
  padding: 10px 28px;
}

.final-streak {
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 700;
  color: var(--terracotta);
}

.endless-heal {
  background: var(--cream);
  border: 2px solid var(--olive);
  border-radius: 10px;
  padding: 12px 24px;
  font-size: 18px;
  color: var(--olive);
  font-weight: 600;
}

.endless-next h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: var(--navy);
}

.next-opponent-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 16px 24px;
  box-shadow: 4px 4px 0 var(--shadow);
  gap: 8px;
  min-width: 160px;
}

.next-opponent-portrait {
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.next-opponent-portrait svg {
  max-width: 100%;
  max-height: 100%;
}

.next-name {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
}

.next-ready {
  font-size: 14px;
  color: var(--terracotta);
  font-style: italic;
}

.endless-actions,
.endless-result-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.new-best-banner {
  background: linear-gradient(135deg, #d4a017 0%, #f5c842 50%, #d4a017 100%);
  color: var(--ink);
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 700;
  padding: 16px 32px;
  border-radius: 12px;
  border: 3px solid #a07010;
  box-shadow: 4px 4px 0 rgba(0,0,0,0.25);
  animation: new-best-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes new-best-pulse {
  from { transform: scale(1); box-shadow: 4px 4px 0 rgba(0,0,0,0.25); }
  to   { transform: scale(1.03); box-shadow: 6px 6px 0 rgba(0,0,0,0.3); }
}

.previous-best {
  font-size: 18px;
  color: var(--ink);
  opacity: 0.75;
}

.endless-title-best {
  font-size: 16px;
  color: var(--gold);
  font-weight: 600;
}

@media (max-width: 600px) {
  .endless-actions,
  .endless-result-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .endless-actions button,
  .endless-result-actions button {
    width: 100%;
  }

  .final-streak {
    font-size: 40px;
  }

  .new-best-banner {
    font-size: 22px;
    padding: 12px 20px;
  }

  .streak-indicator {
    font-size: 26px;
  }
}

/* ── Settings page ─────────────────────────────────────────────────────── */
.screen-settings {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 600px;
  margin: 0 auto;
  gap: 24px;
  padding: 24px 16px;
}

.screen-settings h2 {
  font-size: 32px;
  color: var(--ink);
  margin: 0;
}

.settings-group {
  width: 100%;
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-group h3 {
  margin: 0;
  font-size: 18px;
  color: var(--terracotta, #c0440a);
  text-align: left;
}

.settings-help {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.65;
  line-height: 1.4;
}

/* Sound toggle button */
.settings-toggle {
  align-self: flex-start;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 28px;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.settings-toggle.on {
  background: #4a7c4e;
  color: #fff;
  border-color: #2e5c32;
}

.settings-toggle.off {
  background: #888;
  color: #fff;
  border-color: #666;
}

/* Animation speed radio group */
.settings-radio-group {
  display: flex;
  flex-direction: row;
  gap: 10px;
}

.settings-radio {
  flex: 1;
  font-size: 16px;
  font-weight: 600;
  padding: 10px 0;
  border-radius: 8px;
  border: 2px solid var(--gold);
  background: var(--cream);
  color: var(--ink);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.settings-radio.selected {
  background: var(--terracotta, #c0440a);
  color: #fff;
  border-color: var(--terracotta, #c0440a);
}

/* Danger zone for reset */
.settings-danger {
  border-color: #cc2200;
}

.settings-danger h3 {
  color: #cc2200;
}

.settings-reset {
  align-self: flex-start;
  font-size: 16px;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 8px;
  border: 2px solid #991a00;
  background: #cc2200;
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.settings-reset:hover {
  background: #991a00;
}

/* Generic settings action button — secondary-style for non-toggle actions
   like "Replay Tutorial". Used in the Settings "Help" group. */
.settings-action-btn {
  align-self: flex-start;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 8px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, transform 120ms ease;
}
.settings-action-btn:hover { background: var(--gold); transform: translateY(-1px); }

body.theme-high-contrast .settings-action-btn {
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  border-color: var(--gold);
}
body.theme-high-contrast .settings-action-btn:hover { background: rgba(255, 213, 79, 0.2); }

/* Generic danger button (used in confirm overlay) */
button.danger {
  background: #cc2200;
  color: #fff;
  border: 2px solid #991a00;
}

button.danger:hover {
  background: #991a00;
}

@media (max-width: 480px) {
  .settings-radio-group {
    flex-direction: column;
  }
  .settings-radio {
    width: 100%;
  }
}

/* ── Volume sliders (Master / Music / SFX) ───────────────────────────────── */

.settings-volume-row {
  display: grid;
  grid-template-columns: 80px 1fr 50px;
  align-items: center;
  gap: 12px;
  padding: 4px 0;
}
.settings-volume-label {
  font-size: 14px;
  color: var(--ink);
  font-weight: 500;
}
.settings-volume-slider {
  width: 100%;
  /* Slimmer track stays visible; vertical padding on the row gives the slider
     a generous tap area. The thumb is enlarged on mobile via the breakpoint
     below so it's actually grabbable with a finger. */
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: rgba(26, 42, 79, 0.15);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  /* Eliminate iOS double-tap zoom / click delay when dragging. */
  touch-action: manipulation;
}
.settings-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--terracotta);
  border: 2px solid var(--cream);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.settings-volume-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--terracotta);
  border: 2px solid var(--cream);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.settings-volume-slider:focus { outline: 2px solid var(--navy); outline-offset: 2px; }
.settings-volume-value {
  font-size: 13px;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  text-align: right;
}

body.theme-high-contrast .settings-volume-slider {
  background: rgba(255, 255, 255, 0.15);
}
body.theme-high-contrast .settings-volume-slider::-webkit-slider-thumb {
  background: var(--terracotta);
  border-color: var(--ink);
}
body.theme-high-contrast .settings-volume-slider::-moz-range-thumb {
  background: var(--terracotta);
  border-color: var(--ink);
}

@media (max-width: 600px) {
  .settings-volume-row { grid-template-columns: 60px 1fr 44px; gap: 8px; padding: 8px 0; }
  .settings-volume-label { font-size: 12px; }
  .settings-volume-value { font-size: 11px; }
  /* Finger-friendly slider thumb on touch devices — 28px is comfortable to
     drag without obscuring the track. */
  .settings-volume-slider::-webkit-slider-thumb { width: 28px; height: 28px; }
  .settings-volume-slider::-moz-range-thumb { width: 28px; height: 28px; }
}

/* ── Match History ─────────────────────────────────────────────────────────── */

.screen-history {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px 40px;
}

.screen-history h2 {
  margin: 0;
}

.screen-history .subtitle {
  margin: 0;
  opacity: 0.7;
  font-size: 15px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 900px;
}

.history-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 12px 16px;
  background: #fdf6e3;
  border: 2px solid #c8a96a;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
}

.history-row:hover {
  background: #fef8e8;
  border-color: #a07840;
}

.history-row-portraits {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.history-portrait {
  width: 70px;
  height: 80px;
  overflow: hidden;
  border-radius: 6px;
  border: 2px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}

.history-portrait svg {
  width: 100%;
  height: 100%;
}

.history-portrait.winner {
  border-color: #c8a100;
  box-shadow: 0 0 6px rgba(200, 161, 0, 0.5);
  opacity: 1;
}

.history-portrait.loser {
  opacity: 0.5;
  border-color: transparent;
}

.history-vs {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #b05030;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}

.history-row-info {
  flex: 1;
  min-width: 0;
}

.history-result {
  font-size: 17px;
  font-weight: 700;
  color: #2c1a0e;
  margin: 0 0 4px;
}

.history-meta {
  font-size: 13px;
  color: #2c1a0e;
  opacity: 0.7;
  margin: 0;
}

/* ── Match Detail overlay ──────────────────────────────────────────────────── */

.overlay-card-wide {
  max-width: 720px;
  width: 95vw;
}

.detail-mode {
  margin: 4px 0 16px;
  font-size: 14px;
  opacity: 0.7;
}

.detail-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  background: rgba(200, 169, 106, 0.12);
  border: 1px solid #c8a96a;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 16px;
  font-size: 14px;
}

.detail-stats div {
  color: #2c1a0e;
}

.overlay-card-wide h4 {
  margin: 0 0 8px;
  font-size: 15px;
  color: #2c1a0e;
}

.detail-log {
  border: 1px solid #c8a96a;
  background: #fdf6e3;
  border-radius: 8px;
  max-height: 320px;
  overflow-y: auto;
  font-size: 14px;
  line-height: 1.6;
  padding: 8px 12px;
  margin-bottom: 16px;
  /* Prevent a single long combat-log line ("Esther reverses Judah's Spear
     Thrust for 18 damage…") from forcing horizontal scroll on narrow phones. */
  overflow-wrap: anywhere;
}

.detail-log-line {
  border-bottom: 1px dashed #e0d0a0;
  padding: 3px 0;
  color: #2c1a0e;
}

.detail-log-line:last-child {
  border-bottom: none;
}

.log-num {
  color: #999;
  font-size: 12px;
  padding-right: 6px;
  display: inline-block;
  min-width: 24px;
  text-align: right;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .history-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .history-portrait {
    width: 54px;
    height: 62px;
  }

  .detail-stats {
    grid-template-columns: 1fr;
  }
}

/* ── Daily Challenge styles ──────────────────────────────────── */

/* Title screen banner */
.daily-banner {
  display: inline-block;
  font-size: 15px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 20px;
  border: 2px solid currentColor;
  margin-top: 6px;
}
.daily-banner.available {
  background: var(--terracotta);
  color: var(--cream);
  border-color: var(--terracotta);
}
.daily-banner.claimed {
  background: var(--olive);
  color: var(--cream);
  border-color: var(--olive);
}
/* Daily Challenge is now a clickable button (wired to start-daily). */
button.daily-banner {
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: center;
  transition: transform 120ms ease, filter 120ms ease;
}
button.daily-banner:hover { filter: brightness(1.06); }
button.daily-banner:active { transform: translateY(1px); }
button.daily-banner:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }

/* Overlay and result stats block */
.daily-stats-mini {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--bg);
  border: 2px solid var(--gold);
  border-radius: 8px;
  padding: 12px 20px;
  margin: 14px 0;
  font-size: 16px;
}
.daily-stats-mini strong {
  color: var(--terracotta);
}

/* Result screen daily info block */
.daily-result-info {
  background: var(--cream);
  border: 2px solid var(--olive);
  border-radius: 10px;
  padding: 16px 24px;
  margin: 12px 0;
  text-align: center;
}
.daily-result-cleared {
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: var(--olive);
  margin-bottom: 8px;
}
.daily-result-failed {
  font-size: 17px;
  color: var(--terracotta);
  margin: 12px 0;
  font-style: italic;
}

/* ── Daily streak calendar (Stats screen) ─────────────────────────────────── */
.daily-calendar {
  margin-top: 16px;
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 10px;
  padding: 14px 16px;
}
.daily-calendar-caption {
  font-family: var(--font-heading);
  font-size: 14px;
  color: var(--navy);
  margin-bottom: 10px;
  text-align: center;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  opacity: 0.75;
}
.daily-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  max-width: 360px;
  margin: 0 auto;
}
.daily-calendar-header {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  padding-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.7;
}
.daily-calendar-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  background: var(--bg);
  border: 1.5px dashed rgba(26, 42, 79, 0.25);
  color: rgba(26, 26, 26, 0.45);
  min-height: 36px;
}
.daily-calendar-cell.pad {
  background: transparent;
  border: none;
  min-height: 0;
}
.daily-calendar-cell.completed {
  background: var(--olive);
  color: var(--cream);
  border: 1.5px solid var(--olive);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.daily-calendar-cell.today {
  outline: 3px solid var(--terracotta);
  outline-offset: 1px;
  color: var(--ink);
}
.daily-calendar-cell.today.completed {
  color: var(--cream);
}
.daily-calendar-cell.future {
  visibility: hidden;
}
.daily-calendar-legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink);
  flex-wrap: wrap;
}
.daily-calendar-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.daily-calendar-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--bg);
  border: 1.5px dashed rgba(26, 42, 79, 0.35);
  vertical-align: middle;
}
.daily-calendar-swatch.completed {
  background: var(--olive);
  border: 1.5px solid var(--olive);
}
.daily-calendar-swatch.today {
  background: var(--bg);
  border: 1.5px solid var(--terracotta);
  outline: 1.5px solid var(--terracotta);
  outline-offset: -3px;
}

@media (max-width: 600px) {
  .daily-calendar { padding: 10px 8px; }
  .daily-calendar-grid { gap: 4px; max-width: 320px; }
  .daily-calendar-cell { font-size: 12px; min-height: 32px; }
  .daily-calendar-legend { font-size: 11px; gap: 10px; }
}

/* ── Daily streak compact strip (Title screen) ────────────────────────────── */
.daily-strip {
  display: inline-flex;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: var(--cream);
  border: 1.5px solid var(--gold);
  border-radius: 14px;
  align-items: center;
}
.daily-strip-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--bg);
  border: 1.5px dashed rgba(26, 42, 79, 0.35);
}
.daily-strip-dot.completed {
  background: var(--olive);
  border: 1.5px solid var(--olive);
}
.daily-strip-dot.today {
  outline: 2px solid var(--terracotta);
  outline-offset: 1px;
}

@media (max-width: 600px) {
  .daily-strip { gap: 5px; padding: 5px 8px; }
  .daily-strip-dot { width: 12px; height: 12px; }
}

/* ── Heritage Timeline screen ─────────────────────────────────────────────── */
.screen-timeline {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
}

.screen-timeline .subtitle {
  text-align: center;
  font-style: italic;
  opacity: 0.85;
  margin-bottom: 24px;
}

.timeline-track {
  position: relative;
  padding-left: 24px;
  border-left: 3px solid var(--ink);
  margin: 24px 0;
}

.timeline-era {
  margin-bottom: 24px;
}

.era-label {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--terracotta);
  margin: 20px 0 12px -36px;
  background: var(--bg);
  padding-left: 8px;
  letter-spacing: 1px;
}

.timeline-hero {
  display: grid;
  grid-template-columns: 120px 100px 1fr;
  gap: 16px;
  align-items: center;
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 16px;
  margin: 12px 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  position: relative;
}

.timeline-hero::before {
  content: "";
  position: absolute;
  left: -32px;
  top: 50%;
  width: 14px;
  height: 14px;
  background: var(--terracotta);
  border: 3px solid var(--ink);
  border-radius: 50%;
  transform: translateY(-50%);
}

.timeline-hero:hover {
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-2px, -2px);
}

.timeline-date {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  text-align: right;
  line-height: 1.3;
}

.timeline-portrait {
  width: 100px;
  height: 100px;
}

.timeline-portrait svg {
  width: 100%;
  height: auto;
}

.timeline-info .timeline-name {
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 4px;
}

.timeline-info .era {
  display: inline-block;
  font-size: 11px;
  background: var(--gold);
  color: var(--ink);
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}

.timeline-info .timeline-bio {
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  opacity: 0.85;
}

@media (max-width: 600px) {
  .timeline-track {
    padding-left: 16px;
  }
  .timeline-hero {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .timeline-date {
    text-align: center;
  }
  .timeline-portrait {
    margin: 0 auto;
  }
  .timeline-hero::before {
    left: -24px;
    top: 24px;
    transform: none;
  }
  .era-label {
    margin-left: -28px;
    text-align: center;
  }
}

/* ── Pause / Battle-log new styles ──────────────────────────────────────────── */

.battle-bottom-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.battle-log-full {
  max-height: 50vh;
  overflow-y: auto;
  background: var(--cream, #fdf6e3);
  border: 2px solid var(--ink, #2c1a0e);
  border-radius: 6px;
  padding: 12px 16px;
  text-align: left;
  font-size: 14px;
  line-height: 1.6;
  margin: 16px 0;
  /* Long combat-log lines wrap inside the panel instead of triggering
     horizontal scroll on narrow phones. */
  overflow-wrap: anywhere;
}

.battle-log-full .log-line {
  padding: 4px 0;
  border-bottom: 1px dashed rgba(0,0,0,0.08);
}

.battle-log-full .log-line:last-child {
  border-bottom: none;
}

.battle-log-full .log-num {
  display: inline-block;
  width: 30px;
  color: var(--ink, #2c1a0e);
  opacity: 0.5;
  font-family: monospace;
}

/* ── Tournament Mode ──────────────────────────────────────────────────── */

.screen-tournament-setup {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.setup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 24px 0;
}

.setup-card {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 24px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: box-shadow 0.12s, transform 0.12s;
}

.setup-card:hover {
  box-shadow: 4px 4px 0 var(--ink);
  transform: translate(-2px, -2px);
}

.setup-card h3 {
  font-size: 22px;
  color: var(--terracotta);
  margin-bottom: 8px;
}

.setup-card p {
  font-size: 14px;
  color: var(--ink);
  opacity: 0.85;
  margin: 0;
}

@media (max-width: 600px) {
  .setup-grid { grid-template-columns: 1fr; }
}

.screen-tournament-bracket {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
}

.bracket {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin: 24px 0;
}

.bracket-match {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 16px;
  position: relative;
}

.bracket-match h3 {
  font-family: var(--font-heading);
  font-size: 16px;
  color: var(--terracotta);
  margin-bottom: 12px;
  text-align: center;
  letter-spacing: 1px;
}

.bracket-final h3 {
  color: var(--gold);
  font-size: 20px;
}

.bracket-pair {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  gap: 16px;
}

.bracket-slot {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px;
  border: 2px solid transparent;
  border-radius: 8px;
  background: white;
  min-width: 120px;
}

.bracket-slot.winner {
  border-color: var(--gold);
  background: #fffbe6;
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.3);
}

.bracket-slot.loser {
  opacity: 0.45;
}

.bracket-slot.pending {
  border-style: dashed;
  border-color: var(--ink);
  opacity: 0.7;
}

.bracket-hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.bracket-portrait svg {
  width: 90px;
  height: 90px;
}

.bracket-hero-name {
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  color: var(--navy);
}

.bracket-slot-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--terracotta);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.bracket-vs {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  color: var(--terracotta);
  flex-shrink: 0;
}

.bracket-slot-tbd {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  opacity: 0.4;
  font-size: 14px;
  font-style: italic;
}

.bracket-sim-note {
  text-align: center;
  font-size: 13px;
  color: var(--ink);
  opacity: 0.7;
  font-style: italic;
  margin-top: 8px;
}

.champion-banner {
  font-family: var(--font-heading);
  font-size: 28px;
  font-weight: 900;
  color: var(--gold);
  text-align: center;
  text-shadow: 2px 2px 0 var(--ink);
  animation: champion-pulse 1.5s ease-in-out infinite;
  margin: 32px 0 16px;
}

@keyframes champion-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.champion-portrait {
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.champion-portrait svg {
  width: 100%;
  height: auto;
}

.champion-name {
  text-align: center;
  font-size: 32px;
  color: var(--navy);
  margin-top: 8px;
}

.champion-flavor {
  text-align: center;
  font-size: 18px;
  font-style: italic;
  color: var(--ink);
  opacity: 0.8;
  margin: 4px 0;
}

.champion-record {
  text-align: center;
  font-size: 16px;
  margin: 16px 0;
}

.bracket-recap {
  text-align: center;
  margin: 24px auto;
  padding: 16px;
  background: var(--cream);
  border-radius: 8px;
  border: 2px solid var(--ink);
  max-width: 340px;
}

.bracket-recap p {
  margin: 4px 0;
  font-size: 15px;
}

.big-btn {
  font-size: 20px;
  padding: 14px 28px;
  display: block;
  margin: 16px auto;
}

.screen-tournament-result {
  max-width: 600px;
  margin: 0 auto;
  padding: 24px 16px;
  text-align: center;
  position: relative;
}

.screen-tournament-result h2 {
  font-size: 28px;
  margin-bottom: 12px;
}

.screen-tournament-result .sub {
  font-size: 15px;
  font-style: italic;
  opacity: 0.75;
  margin: 8px 0;
}

@media (max-width: 600px) {
  .bracket-pair {
    flex-direction: column;
    gap: 8px;
  }
  .bracket-slot {
    width: 100%;
    max-width: 240px;
  }
  .bracket-vs {
    font-size: 18px;
  }
  .champion-banner {
    font-size: 22px;
  }
  .champion-name {
    font-size: 26px;
  }
}

/* ── Share-via-URL toast ─────────────────────────────────────────────────── */
.share-toast {
  position: fixed;
  /* Float above iPhone home indicator + above the typical 80px slot it
     wants. max() keeps the existing 80px on desktop, lifts on devices
     that report a bottom safe-area-inset. */
  bottom: max(80px, calc(env(safe-area-inset-bottom) + 32px));
  left: 50%;
  transform: translateX(-50%);
  background: var(--gold);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  box-shadow: 4px 4px 0 var(--shadow);
  z-index: 1000;
  animation: share-toast-in 350ms ease-out;
}
.share-toast-out {
  animation: share-toast-out 400ms ease-out forwards;
}
@keyframes share-toast-in {
  from { opacity: 0; transform: translate(-50%, 20px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes share-toast-out {
  from { opacity: 1; transform: translate(-50%, 0); }
  to   { opacity: 0; transform: translate(-50%, 20px); }
}

/* ── Incoming-challenge banner on title ──────────────────────────────────── */
.challenge-banner {
  background: var(--cream);
  border: 3px solid var(--gold);
  border-radius: 12px;
  padding: 16px 20px;
  max-width: 600px;
  width: 90%;
  margin: 0 auto 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 4px 4px 0 var(--shadow);
  animation: challenge-banner-in 500ms ease-out;
}
@keyframes challenge-banner-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
.challenge-banner-icon {
  font-size: 36px;
}
.challenge-banner-text {
  flex: 1;
  text-align: left;
}
.challenge-from {
  font-weight: 700;
  color: var(--terracotta);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.challenge-desc {
  font-size: 17px;
  color: var(--ink);
}
.challenge-banner-buttons {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.challenge-accept {
  background: var(--terracotta);
  color: var(--cream);
}

/* ── Share button on result screens ─────────────────────────────────────── */
.share-btn {
  background: var(--cream);
  color: var(--ink);
  border-color: var(--gold);
  font-size: 16px;
  padding: 10px 18px;
}
.share-btn:hover {
  background: #fffbe6;
}

/* Mobile adjustments for challenge banner */
@media (max-width: 600px) {
  .challenge-banner {
    flex-direction: column;
    text-align: center;
  }
  .challenge-banner-text { text-align: center; }
  .challenge-banner-buttons { flex-direction: row; }
}

/* ── Hero Matchup section in Stats screen ────────────────────────── */
.stats-matchups {
  margin-top: 24px;
}

.stats-section-subtitle {
  font-size: 14px;
  color: var(--ink);
  opacity: 0.7;
  margin: 0 0 12px;
}

.matchup-highlights {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.matchup-highlight {
  font-size: 16px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 8px;
  padding: 10px 14px;
}

.matchup-highlight-icon {
  font-size: 18px;
  margin-right: 8px;
}

.matchup-highlight-label {
  color: var(--terracotta);
  font-weight: 700;
  margin-right: 8px;
}

.matchup-top-label {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: var(--terracotta);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 16px 0 8px;
}

.matchup-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.matchup-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 16px;
  align-items: center;
  padding: 10px 14px;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 8px;
}

.matchup-portraits {
  display: flex;
  align-items: center;
  gap: 8px;
}

.matchup-portrait {
  width: 70px;
  height: 70px;
}

.matchup-portrait svg {
  width: 100%;
  height: auto;
}

.matchup-vs {
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--terracotta);
  font-weight: 700;
}

.matchup-info {
  display: flex;
  flex-direction: column;
}

.matchup-names {
  font-size: 14px;
  color: var(--ink);
  opacity: 0.85;
}

.matchup-record {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
  font-family: var(--font-heading);
}

.matchup-empty {
  font-style: italic;
  color: var(--ink);
  opacity: 0.7;
  text-align: center;
  padding: 16px;
}

@media (max-width: 600px) {
  .matchup-row {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .matchup-portraits { justify-content: center; }
}

/* ── Trophy Room ─────────────────────────────────────────────────────────── */

.screen-trophy-room {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 16px;
}

.trophy-filters, .trophy-sorts {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  flex-wrap: wrap;
}

.trophy-filter-label {
  font-weight: 700;
  color: var(--ink);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.trophy-chip {
  background: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  /* Touch target ≥44px on mobile. min-height keeps the chip compact-looking
     while padding-out the hit area. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.trophy-chip.active {
  background: var(--terracotta);
  color: var(--cream);
}

.trophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.trophy-card {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
}

.trophy-card.locked {
  opacity: 0.6;
  filter: grayscale(0.6);
}

.trophy-icon {
  font-size: 56px;
  margin-bottom: 8px;
}

.trophy-title {
  font-size: 18px;
  color: var(--navy);
  margin-bottom: 4px;
}

.trophy-desc {
  font-size: 13px;
  opacity: 0.85;
  margin-bottom: 12px;
  flex: 1;
}

.trophy-status {
  font-weight: 700;
  color: var(--olive);
  font-size: 13px;
}

.trophy-locked-status {
  font-weight: 700;
  opacity: 0.7;
  font-size: 13px;
}

.trophy-progress {
  width: 100%;
  margin-top: 8px;
}

.trophy-progress-bar {
  height: 10px;
  background: rgba(0,0,0,0.1);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--ink);
}

.trophy-progress-fill {
  height: 100%;
  background: var(--terracotta);
  transition: width 300ms ease;
}

.trophy-progress-text {
  font-size: 12px;
  margin-top: 4px;
  color: var(--ink);
  opacity: 0.7;
}

.trophy-category {
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--gold);
  color: var(--ink);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--ink);
}

.stats-trophy-summary {
  text-align: center;
}

.trophy-summary-count {
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 700;
  color: var(--navy);
}

/* ── Spectator Mode ──────────────────────────────────────────────────────── */
.spectator-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--cream);
  border: 3px dashed var(--ink);
  border-radius: 12px;
  padding: 16px 24px;
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--ink);
  max-width: 600px;
  margin: 0 auto;
}

.spectator-icon {
  font-size: 24px;
}

@media (max-width: 600px) {
  .spectator-indicator {
    font-size: 14px;
    padding: 12px 16px;
  }
}

/* ── Stage Select screen ─────────────────────────────────────────────────── */

.screen-stage-select {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 16px;
  text-align: center;
}

.stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.stage-card {
  background: var(--cream);
  border: 3px solid var(--ink);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  position: relative;
  transition: transform 80ms;
}

.stage-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 4px 4px 0 var(--ink);
}

.stage-card.recommended {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 165, 116, 0.3);
}

.stage-thumbnail {
  width: 100%;
  aspect-ratio: 8 / 3;
  overflow: hidden;
  border-radius: 6px;
  border: 2px solid var(--ink);
  margin-bottom: 8px;
}

.stage-thumbnail svg {
  width: 100%;
  height: 100%;
  display: block;
}

.stage-name {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
}

.stage-recommended-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--gold);
  color: var(--ink);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--ink);
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 600px) {
  .stage-grid { grid-template-columns: 1fr 1fr; }
  .stage-name { font-size: 13px; }
}

/* ── Stage-info: subtitle + info button + descriptive overlay ──────────── */
/* The stage-card-wrap is a tiny positioning container so the info button
   (sibling of .stage-card) can be absolutely positioned over the card
   without becoming a nested button (which would be invalid HTML). */
.stage-card-wrap {
  position: relative;
  display: block;
}

.stage-subtitle {
  font-size: 11px;
  color: var(--ink);
  opacity: 0.65;
  text-align: center;
  margin: 2px 0 0;
  font-style: italic;
  line-height: 1.3;
}

.stage-info-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--gold);
  background: rgba(255, 248, 231, 0.9);
  color: var(--navy);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 2;
}
.stage-info-btn:hover { background: var(--gold); color: var(--cream); }
/* The visible info pip stays small (22×22) so it doesn't dominate the stage
   card. Use a touch-only pseudo-element to extend the hit target to ≥44px
   without changing the visual layout — sits centered behind the button. */
.stage-info-btn::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 50%;
}

.stage-info-card {
  max-width: 560px;
}
.stage-info-backdrop {
  width: 100%;
  max-height: 160px;
  overflow: hidden;
  border-radius: 8px;
  margin: 0 0 12px;
  border: 2px solid var(--gold);
}
.stage-info-backdrop svg { width: 100%; height: auto; display: block; }
.stage-info-name {
  font-family: var(--font-heading);
  font-size: 26px;
  color: var(--navy);
  margin: 0 0 4px;
  text-align: center;
}
.stage-info-subtitle {
  font-style: italic;
  font-size: 14px;
  color: var(--terracotta);
  text-align: center;
  margin: 0 0 12px;
  font-weight: 600;
}
.stage-info-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
}

/* Heritage Timeline stage line — small location-y hint under each era. */
.timeline-stage {
  font-size: 12px;
  color: var(--ink);
  opacity: 0.7;
  margin: 4px 0 0;
  font-style: italic;
}

@media (max-width: 600px) {
  .stage-subtitle { font-size: 10px; }
  .stage-info-card { max-width: 95%; }
  .stage-info-backdrop { max-height: 100px; }
  .stage-info-name { font-size: 22px; }
  .stage-info-desc { font-size: 13px; }
  .timeline-stage { font-size: 11px; }
}

body.theme-high-contrast .stage-info-btn {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--gold);
  color: var(--cream);
}
body.theme-high-contrast .stage-info-btn:hover {
  background: var(--gold);
  color: var(--ink);
}

/* ── Confetti celebration (personal-best / champion moments) ────────────── */
.confetti {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 5;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: 10px;
  height: 14px;
  background: hsl(var(--hue), 75%, 55%);
  border-radius: 2px;
  transform-origin: center;
  animation: confetti-fall var(--dur) linear var(--delay) forwards;
  will-change: transform, opacity;
}
/* Tint about a third of the pieces with on-palette hues so they don't all
   feel like random HSL noise: gold, terracotta, olive. */
.confetti-piece:nth-child(4n)   { background: var(--gold); }
.confetti-piece:nth-child(4n+1) { background: var(--terracotta); }
.confetti-piece:nth-child(7n)   { background: var(--olive); }
.confetti-piece:nth-child(11n)  { background: var(--cream); border: 1px solid var(--ink); }
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg);     opacity: 1; }
  90%  {                                            opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti,
  .confetti-piece { animation: none; display: none; }
}

/* ── Text size (accessibility) ──────────────────────────────────────── */
/* "normal" is the default — no overrides needed.
   "large" and "xlarge" scale UP key text-heavy elements that grandpa needs
   to actually read. Doesn't try to scale every px font-size in the codebase
   (that would be whack-a-mole); focuses on the elements where reading
   matters most. Selectors here all map to real class names in src/screens.js
   (see e.g. .bio, .moves, .trivia-question, .moves-row button strong, etc.). */

/* Large */
body.text-large .hero-meta .bio                  { font-size: 15px; }
body.text-large .hero-meta .moves                { font-size: 14px; }
body.text-large .hero-meta h3                    { font-size: 18px; }

body.text-large .trivia-question,
body.text-large .study-question,
body.text-large .quiz-question                   { font-size: 18px; }
body.text-large .trivia-options button,
body.text-large .study-options button,
body.text-large .quiz-options button             { font-size: 16px; }
body.text-large .trivia-explanation,
body.text-large .study-explanation,
body.text-large .quiz-explanation                { font-size: 15px; }
body.text-large .study-feedback-result,
body.text-large .quiz-feedback-result            { font-size: 16px; }

body.text-large .battle-log-full .log-line,
body.text-large .move-log                        { font-size: 15px; }

body.text-large .moves-row button strong         { font-size: 20px; }
body.text-large .moves-row button .sub           { font-size: 14px; }

body.text-large .profile-card .profile-bio,
body.text-large .profile-card .profile-dates,
body.text-large .profile-card .profile-quote     { font-size: 15px; }

body.text-large .title-funfact-text,
body.text-large .featured-quote                  { font-size: 16px; }

body.text-large .match-summary .summary-row,
body.text-large .match-records .records-list li,
body.text-large .dyk-text                        { font-size: 15px; }
body.text-large .tagline                         { font-size: 21px; }

body.text-large .achievement-toast .toast-title  { font-size: 15px; }
body.text-large .achievement-toast .toast-desc   { font-size: 13px; }
body.text-large .overlay-card p                  { font-size: 15px; }

/* Extra Large */
body.text-xlarge .hero-meta .bio                 { font-size: 17px; }
body.text-xlarge .hero-meta .moves               { font-size: 16px; }
body.text-xlarge .hero-meta h3                   { font-size: 20px; }

body.text-xlarge .trivia-question,
body.text-xlarge .study-question,
body.text-xlarge .quiz-question                  { font-size: 21px; }
body.text-xlarge .trivia-options button,
body.text-xlarge .study-options button,
body.text-xlarge .quiz-options button            { font-size: 18px; }
body.text-xlarge .trivia-explanation,
body.text-xlarge .study-explanation,
body.text-xlarge .quiz-explanation               { font-size: 17px; }
body.text-xlarge .study-feedback-result,
body.text-xlarge .quiz-feedback-result           { font-size: 18px; }

body.text-xlarge .battle-log-full .log-line,
body.text-xlarge .move-log                       { font-size: 17px; }

body.text-xlarge .moves-row button strong        { font-size: 22px; }
body.text-xlarge .moves-row button .sub          { font-size: 16px; }

body.text-xlarge .profile-card .profile-bio,
body.text-xlarge .profile-card .profile-dates,
body.text-xlarge .profile-card .profile-quote    { font-size: 17px; }

body.text-xlarge .title-funfact-text,
body.text-xlarge .featured-quote                 { font-size: 18px; }

body.text-xlarge .match-summary .summary-row,
body.text-xlarge .match-records .records-list li,
body.text-xlarge .dyk-text                       { font-size: 17px; }
body.text-xlarge .tagline                        { font-size: 23px; }

body.text-xlarge .achievement-toast .toast-title { font-size: 17px; }
body.text-xlarge .achievement-toast .toast-desc  { font-size: 15px; }
body.text-xlarge .overlay-card p                 { font-size: 17px; }

/* ── Practice Mode ─────────────────────────────────────────────────────────
   Battle-screen chip + result-screen note. Practice is a consequence-free
   sandbox; these surfaces remind the player nothing is being recorded. */
.practice-badge {
  display: inline-block;
  margin: 0 auto 10px;
  padding: 4px 12px;
  background: rgba(193, 70, 45, 0.15);
  border: 2px solid var(--terracotta);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--terracotta);
  text-transform: uppercase;
}

.practice-note {
  font-style: italic;
  font-size: 14px;
  color: var(--ink);
  opacity: 0.7;
  margin: 8px 0 16px;
}

body.theme-high-contrast .practice-badge {
  background: rgba(255, 122, 89, 0.15);
  border-color: var(--terracotta);
  color: var(--terracotta);
}

/* ── Battle HUD ────────────────────────────────────────────────────────────
   Small persistent strip near the top of the battle screen showing the
   current turn number and the match elapsed time. Sits below the arcade
   roadmap (when present) and above the HP bars. The timer is render-driven:
   it updates whenever the battle screen re-renders (every player move).
   Frozen to the final value once matchStats.endedAt is set. */
.battle-hud {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin: 0 auto 8px;
  padding: 4px 14px;
  background: rgba(26, 42, 79, 0.06);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--navy);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.battle-hud-turn,
.battle-hud-timer {
  letter-spacing: 0.5px;
}
.battle-hud-timer {
  color: var(--ink);
  opacity: 0.7;
}

body.theme-high-contrast .battle-hud {
  background: rgba(255, 255, 255, 0.08);
  color: var(--cream);
}
body.theme-high-contrast .battle-hud-timer {
  color: var(--cream);
  opacity: 0.7;
}

@media (max-width: 600px) {
  .battle-hud { font-size: 11px; gap: 10px; padding: 3px 10px; flex-wrap: wrap; }
}

/* ── Hero Comparison Tool ────────────────────────────────────────────────── */

/* Hall of Heroes -> Compare CTA */
.compare-cta {
  display: block;
  margin: 0 auto 16px;
  padding: 10px 24px;
  background: var(--navy);
  color: var(--cream);
  border: 2px solid var(--ink);
  border-radius: 12px;
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: 1px;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
}
.compare-cta:hover { background: var(--terracotta); transform: translateY(-1px); }

/* Compare pick screen */
.screen-compare-pick { gap: 16px; }
.compare-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 800px;
}
.compare-pick-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-body);
}
.compare-pick-card:hover { border-color: var(--terracotta); transform: translateY(-1px); }
.compare-pick-portrait { width: 90px; height: 90px; }
.compare-pick-portrait svg { width: 100%; height: 100%; }
.compare-pick-name { font-weight: 700; color: var(--navy); font-size: 14px; }
.compare-pick-era { color: var(--ink); font-size: 11px; opacity: 0.75; text-align: center; }

/* Compare screen */
.screen-compare { gap: 16px; max-width: 900px; margin: 0 auto; width: 100%; }
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.compare-col {
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.compare-portrait { width: 140px; height: 140px; margin: 0 auto 8px; }
.compare-portrait svg { width: 100%; height: 100%; }
.compare-name { font-size: 22px; color: var(--navy); margin: 4px 0; font-family: var(--font-heading); }
.compare-era { font-size: 13px; color: var(--ink); opacity: 0.85; margin: 0 0 4px; }
.compare-dates { font-size: 12px; color: var(--terracotta); font-style: italic; margin: 0 0 8px; }
.compare-bio { font-size: 13px; line-height: 1.4; color: var(--ink); margin: 0; }

.compare-table-wrap { width: 100%; overflow-x: auto; }
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--cream);
  border: 2px solid var(--gold);
  border-radius: 8px;
  overflow: hidden;
  font-size: 13px;
}
.compare-table th,
.compare-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(212, 165, 116, 0.3);
  vertical-align: top;
}
.compare-table tr:last-child th,
.compare-table tr:last-child td { border-bottom: none; }
.compare-table th {
  background: rgba(26, 42, 79, 0.08);
  font-weight: 700;
  color: var(--navy);
  font-family: var(--font-body);
  width: 110px;
}
.compare-table td { color: var(--ink); }

.compare-eragap {
  text-align: center;
  font-size: 14px;
  color: var(--terracotta);
  font-weight: 700;
  margin: 8px 0 0;
}

.compare-rivalry {
  text-align: center;
  font-size: 14px;
  color: var(--terracotta);
  font-weight: 700;
  font-family: var(--font-heading);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 4px 0 0;
}

.compare-h2h {
  background: linear-gradient(135deg, var(--cream), rgba(212, 165, 116, 0.15));
  border: 2px solid var(--gold);
  border-radius: 12px;
  padding: 12px 16px;
  text-align: center;
}
.compare-h2h-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--navy);
  font-weight: 700;
  margin: 0 0 8px;
}
.compare-h2h-records {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14px;
  color: var(--ink);
  margin: 0;
}
.compare-h2h-empty {
  text-align: center;
  font-style: italic;
  color: var(--ink);
  opacity: 0.75;
  margin: 8px 0 0;
  font-size: 13px;
}

.compare-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}

@media (max-width: 600px) {
  .compare-grid { grid-template-columns: 1fr; }
  .compare-pick-portrait { width: 70px; height: 70px; }
  .compare-portrait { width: 110px; height: 110px; }
  .compare-table { font-size: 12px; }
  .compare-table th, .compare-table td { padding: 6px 8px; }
  .compare-table th { width: 90px; }
  .compare-cta { font-size: 16px; padding: 8px 18px; }
}

body.theme-high-contrast .compare-cta {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--ink);
}
body.theme-high-contrast .compare-table th {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Profile overlay: Head-to-Head + Era Timeline ─────────────────────────
   Added to the hero-profile overlay below the existing "Your Progress" block.
   Both sections degrade to nothing when there is no data — see renderProfile
   in src/screens.js. */
.profile-h2h-list { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.profile-h2h-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: var(--cream);
  border-radius: 8px;
  border-left: 3px solid var(--gold);
  font-size: 13px;
}
.profile-h2h-row.h2h-winning { border-left-color: var(--olive); }
.profile-h2h-row.h2h-losing  { border-left-color: var(--terracotta); }
.profile-h2h-row.h2h-even    { border-left-color: var(--gold); }
.profile-h2h-opp { color: var(--ink); font-weight: 500; }
.profile-h2h-record { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.profile-h2h-pct { color: var(--navy); opacity: 0.75; font-size: 12px; font-variant-numeric: tabular-nums; min-width: 36px; text-align: right; }

.era-timeline { margin-top: 8px; padding: 8px 4px 6px; }
.era-timeline-axis {
  position: relative;
  height: 24px;
  background: linear-gradient(90deg, var(--cream), rgba(212, 165, 116, 0.3), var(--cream));
  border: 1px solid rgba(212, 165, 116, 0.4);
  border-radius: 12px;
  margin-bottom: 6px;
}
.era-timeline-marker {
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  background: var(--navy);
  border: 2px solid var(--cream);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  cursor: help;
  transition: transform 120ms ease;
}
.era-timeline-marker:hover { transform: translate(-50%, -50%) scale(1.3); }
.era-timeline-marker.active {
  width: 16px;
  height: 16px;
  background: var(--terracotta);
  border-color: var(--gold);
  z-index: 2;
  box-shadow: 0 0 0 3px rgba(193, 70, 45, 0.3);
}
.era-timeline-labels {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink);
  opacity: 0.65;
  padding: 0 2px;
}

body.theme-high-contrast .profile-h2h-row { background: rgba(255, 255, 255, 0.08); }
body.theme-high-contrast .era-timeline-axis {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.05), rgba(255, 213, 79, 0.2), rgba(255, 255, 255, 0.05));
  border-color: rgba(255, 213, 79, 0.4);
}

@media (max-width: 600px) {
  .profile-h2h-row { font-size: 12px; padding: 5px 10px; gap: 8px; }
  .era-timeline-axis { height: 20px; }
  .era-timeline-marker { width: 8px; height: 8px; }
  .era-timeline-marker.active { width: 14px; height: 14px; }
  .era-timeline-labels { font-size: 9px; }
}

/* ── Player name input (Settings) ───────────────────────────────────────── */
.settings-name-input {
  width: 100%;
  max-width: 320px;
  padding: 10px 12px;
  font-family: var(--font-body);
  /* 16px is the iOS Safari threshold below which a focused input triggers
     an automatic zoom. Keep this >=16px across all breakpoints so iPhone
     users don't get jarringly zoomed when editing their name. */
  font-size: 16px;
  border: 2px solid var(--gold);
  border-radius: 8px;
  background: var(--cream);
  color: var(--ink);
  outline: none;
  /* Touch target ≥44px on mobile (Apple HIG). */
  min-height: 44px;
}
.settings-name-input:focus {
  border-color: var(--terracotta);
  box-shadow: 0 0 0 3px rgba(193, 70, 45, 0.15);
}
.settings-name-input::placeholder {
  color: rgba(26, 26, 26, 0.4);
  font-style: italic;
}

body.theme-high-contrast .settings-name-input {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
  border-color: var(--gold);
}
body.theme-high-contrast .settings-name-input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 600px) {
  /* Keep font-size at 16px to avoid iOS focus-zoom; only relax padding. */
  .settings-name-input { padding: 9px 10px; }
}

/* ── Hero Mastery Tiers ───────────────────────────────────────────────────
   Five ranked tiers: apprentice → adept → scholar → sage → master.
   Master is reserved for the existing "perfect study session" flag, so it
   only appears in the Profile + Hall (the char-select MASTERED chip already
   covers it). Colors map to the palette tokens for tonal continuity. */

/* Mastery tier chips on char-select hero cards */
.hero-stat-tier-apprentice { border-color: rgba(107, 142, 35, 0.7); background: rgba(107, 142, 35, 0.1); }
.hero-stat-tier-adept      { border-color: rgba(193, 70, 45, 0.7); background: rgba(193, 70, 45, 0.1); }
.hero-stat-tier-scholar    { border-color: rgba(26, 42, 79, 0.7); background: rgba(26, 42, 79, 0.1); }
.hero-stat-tier-sage       { border-color: rgba(212, 165, 116, 0.9); background: rgba(212, 165, 116, 0.15); }
.hero-stat-tier-master     { border-color: var(--gold); background: rgba(212, 165, 116, 0.25); font-weight: 700; }

/* Profile overlay tier display */
.profile-tier-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 2px 0;
}
.profile-tier-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-weight: 700;
  font-size: 14px;
  border: 2px solid;
}
.profile-tier-badge.profile-tier-apprentice { border-color: var(--olive); color: var(--olive); background: rgba(107, 142, 35, 0.1); }
.profile-tier-badge.profile-tier-adept      { border-color: var(--terracotta); color: var(--terracotta); background: rgba(193, 70, 45, 0.1); }
.profile-tier-badge.profile-tier-scholar    { border-color: var(--navy); color: var(--navy); background: rgba(26, 42, 79, 0.1); }
.profile-tier-badge.profile-tier-sage       { border-color: var(--gold); color: var(--gold); background: rgba(212, 165, 116, 0.15); }
.profile-tier-badge.profile-tier-master {
  border-color: var(--gold);
  color: var(--navy);
  background: linear-gradient(135deg, rgba(212, 165, 116, 0.3), rgba(193, 70, 45, 0.2));
  font-size: 16px;
}
.profile-tier-hint {
  font-size: 11px;
  color: var(--ink);
  opacity: 0.7;
  font-style: italic;
}
.profile-tier-none {
  padding: 3px 12px;
  border-radius: 12px;
  border: 2px solid rgba(26, 26, 26, 0.2);
  color: var(--ink);
  opacity: 0.6;
  font-style: italic;
}

/* Hall of Heroes hero name + tier badge */
.hall-tier-badge {
  font-size: 14px;
  margin-left: 4px;
  vertical-align: baseline;
}
.hall-tier-master { font-size: 18px; }

body.theme-high-contrast .hero-stat-tier-apprentice,
body.theme-high-contrast .hero-stat-tier-adept,
body.theme-high-contrast .hero-stat-tier-scholar,
body.theme-high-contrast .hero-stat-tier-sage,
body.theme-high-contrast .hero-stat-tier-master {
  background: rgba(255, 255, 255, 0.08);
}

body.theme-high-contrast .profile-tier-badge {
  background: rgba(255, 255, 255, 0.08);
}

/* ── Match Replay ────────────────────────────────────────────────────────
   Banner sits at the top of the battle screen when state.mode === "replay".
   Controls mirror a media player: Play/Pause toggle, Step advances one
   move, End tears down the replay. When the recorded match ends the
   controls swap to Restart/End. */
.replay-banner {
  background: linear-gradient(135deg, var(--navy), var(--terracotta));
  color: var(--cream);
  padding: 10px 16px;
  border-radius: 8px;
  margin: 0 auto 12px;
  text-align: center;
  max-width: 600px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.replay-banner-title {
  font-family: var(--font-heading);
  font-size: 14px;
  letter-spacing: 1px;
  margin-bottom: 8px;
  font-weight: 700;
}
.replay-banner-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.replay-btn {
  padding: 8px 14px;
  background: var(--cream);
  color: var(--ink);
  border: 2px solid var(--gold);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 100ms ease, transform 100ms ease;
  /* Touch target ≥44px on mobile. min-height pads the hit area without
     stretching the visual button much beyond its current ~32px height. */
  min-height: 44px;
}
.replay-btn:hover { background: var(--gold); transform: translateY(-1px); }
.replay-btn.secondary {
  background: rgba(255, 255, 255, 0.15);
  color: var(--cream);
  border-color: rgba(255, 255, 255, 0.4);
}
.replay-btn.secondary:hover { background: rgba(255, 255, 255, 0.25); }

.match-detail-replay-btn {
  background: var(--terracotta);
  color: var(--cream);
  border: 2px solid var(--ink);
  padding: 10px 16px;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  margin-right: 8px;
  /* Touch target ≥44px on mobile (Apple HIG). */
  min-height: 44px;
}
.match-detail-replay-btn:hover { background: var(--gold); color: var(--navy); }

body.theme-high-contrast .replay-banner {
  background: linear-gradient(135deg, var(--navy), var(--terracotta));
}

@media (max-width: 600px) {
  .replay-banner { padding: 8px 12px; }
  .replay-banner-title { font-size: 13px; margin-bottom: 6px; }
  .replay-banner-controls { gap: 6px; }
  /* Keep min-height 44px from base rule for tap target; relax other padding
     so 4 buttons (Play/Pause + Step + End + Restart) all fit on a 320px row. */
  .replay-btn { font-size: 12px; padding: 5px 10px; min-height: 44px; }
}
/* Ultra-narrow phones (iPhone SE / older Androids in landscape-blocked) */
@media (max-width: 360px) {
  .replay-btn { font-size: 11px; padding: 5px 8px; }
  .replay-banner-controls { gap: 4px; }
}