/* ═══════════════════════════════════════════════════════════
   DESIGN TOKENS
   Every value below is a knob you can turn once to move the
   whole game. Pull from these — do not hardcode grays/sizes
   in downstream stylesheets.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── Spacing scale (multiples of 4) ───────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ── Type scale ──────────────────────────────────────── */
  --text-xs:   11px;   /* micro labels / captions */
  --text-sm:   13px;   /* secondary body */
  --text-md:   15px;   /* body */
  --text-lg:   18px;   /* emphasized body / small stats */
  --text-xl:   22px;   /* section titles */
  --text-2xl:  28px;   /* primary stats */
  --text-3xl:  36px;   /* hero numbers */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;
  --weight-black:  800;

  /* ── Text tiers ──────────────────────────────────────── */
  --text-1: #f0f0f0;   /* primary text — near-white */
  --text-2: #cccccc;   /* secondary text — the ONLY sub-tier */

  /* ── Surface tiers (dark UI layered from bg → top) ───── */
  --surface-0: #14161a;   /* app background */
  --surface-1: #1c2027;   /* recessed / inputs */
  --surface-2: #262b34;   /* main panels */
  --surface-3: #333844;   /* raised element / hover */
  --surface-4: #3f4552;   /* buttons */

  /* ── Borders ─────────────────────────────────────────── */
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-hair:   rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* ── Panel recipe — layered surface with edge highlight ─ */
  --panel-bg: linear-gradient(180deg, #2a2f38 0%, #1e2229 100%);
  --panel-border: 1px solid var(--border-hair);
  --panel-radius: 10px;
  --panel-shadow:
    0 4px 14px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Deeper inset panel — nested sections inside a main panel */
  --inset-bg: linear-gradient(180deg, #1a1d24 0%, #14171d 100%);
  --inset-border: 1px solid rgba(0, 0, 0, 0.35);
  --inset-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);

  /* ── Rarity palette ──────────────────────────────────── */
  --rarity-common:    #b0b0b0;
  --rarity-uncommon:  #4ade80;
  --rarity-rare:      #60a5fa;
  --rarity-epic:      #c084fc;
  --rarity-legendary: #fbbf24;

  /* ── Class palette (mirrors CLASSES in data.js) ──────── */
  --class-warrior:      #a67c52;
  --class-archer:       #7ca652;
  --class-paladin:      #f5d76e;
  --class-pyromancer:   #ff5522;
  --class-cryomancer:   #5cd8ff;
  --class-stormcaller:  #ffdd00;
  --class-alchemist:    #88cc44;
  --class-shadowmancer: #8844cc;
  --class-sorcerer:     #cc44ff;

  /* ── Semantic accents ────────────────────────────────── */
  --accent-gold:     #ffd700;
  --accent-xp:       #7b9cff;
  --accent-positive: #4ade80;
  --accent-negative: #ef4444;
  --accent-warning:  #fbbf24;

  /* ── Ascension tier colors (bronze → silver → gold) ──── */
  --tier-bronze: #d4914d;
  --tier-silver: #d0e0f0;
  --tier-gold:   #ffd700;

  /* ── Slot sizes — reserve space for future art ────────── */
  --portrait-sm:  40px;
  --portrait-md:  56px;
  --portrait-lg:  80px;
  --portrait-xl: 120px;

  --icon-sm:  20px;
  --icon-md:  28px;
  --icon-lg:  40px;
  --icon-xl:  56px;

  /* ── Motion ──────────────────────────────────────────── */
  --dur-fast:   120ms;
  --dur-normal: 200ms;
  --dur-slow:   360ms;
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
}

/* ═══════════════════════════════════════════════════════════
   REUSABLE BUILDING BLOCKS
   Small utility classes for the recurring patterns: panels,
   framed slots (for portraits/icons), chips (badges).
   ═══════════════════════════════════════════════════════════ */

/* Panel — the workhorse surface. Every major content block. */
.panel {
  background: var(--panel-bg);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
}

/* Inset — nested/recessed area (e.g. equipped gear slot) */
.inset {
  background: var(--inset-bg);
  border: var(--inset-border);
  border-radius: 8px;
  box-shadow: var(--inset-shadow);
}

/* Slot — framed container for portraits/icons. Size via modifier.
   Reserves the exact pixel footprint so future art drops in flush. */
.slot {
  display: inline-flex;
  align-items: center; justify-content: center;
  background: var(--surface-1);
  border: 1px solid var(--border-hair);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}
.slot.sz-xs { width: 32px; height: 32px; border-radius: 6px; }
.slot.sz-sm { width: var(--portrait-sm); height: var(--portrait-sm); }
.slot.sz-md { width: var(--portrait-md); height: var(--portrait-md); }
.slot.sz-lg { width: var(--portrait-lg); height: var(--portrait-lg); }
.slot.sz-xl { width: var(--portrait-xl); height: var(--portrait-xl); }
.slot.sz-icon-md { width: var(--icon-md); height: var(--icon-md); border-radius: 6px; }
.slot.sz-icon-lg { width: var(--icon-lg); height: var(--icon-lg); border-radius: 6px; }
.slot.sz-icon-xl { width: var(--icon-xl); height: var(--icon-xl); border-radius: 8px; }

/* Rarity-tinted slot frame (drives the border + glow) */
.slot[data-rarity="1"] { border-color: var(--rarity-common); }
.slot[data-rarity="2"] { border-color: var(--rarity-uncommon); box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 8px rgba(74, 222, 128, 0.35); }
.slot[data-rarity="3"] { border-color: var(--rarity-rare);      box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 10px rgba(96, 165, 250, 0.4); }
.slot[data-rarity="4"] { border-color: var(--rarity-epic);      box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 12px rgba(192, 132, 252, 0.5); }
.slot[data-rarity="5"] { border-color: var(--rarity-legendary); box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 14px rgba(251, 191, 36, 0.6); }

/* ═══════════════════════════════════════════════════════════
   BOTTOM NAVIGATION RAIL — primary nav for both desktop
   and mobile. Fixed at bottom of viewport.
   ═══════════════════════════════════════════════════════════ */

.bottom-nav {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 400;
  display: flex;
  justify-content: center;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(180deg, rgba(20, 22, 28, 0.85) 0%, rgba(14, 16, 20, 0.98) 100%);
  border-top: 1px solid rgba(255, 215, 0, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.45);
}
.nav-btn {
  flex: 1;
  max-width: 130px;
  min-width: 60px;
  padding: var(--sp-2) var(--sp-1);
  background: transparent;
  color: var(--text-2);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  transition: background var(--dur-fast), color var(--dur-fast), transform var(--dur-fast);
}
.nav-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-1);
}
.nav-btn.is-active {
  background: linear-gradient(180deg, rgba(255, 215, 0, 0.15) 0%, rgba(255, 215, 0, 0.05) 100%);
  border-color: rgba(255, 215, 0, 0.4);
  color: var(--accent-gold);
}
.nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.nav-icon { font-size: 22px; line-height: 1; }
.nav-label {
  font-size: 10px;
  font-weight: var(--weight-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.nav-pip {
  display: none;
  position: absolute;
  top: 4px;
  right: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff5252 0%, #b91d1d 100%);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 0 8px rgba(255, 82, 82, 0.6);
  animation: upgrade-pulse 1.8s ease-in-out infinite;
}
.nav-btn.has-pip .nav-pip { display: flex; }

@media (max-width: 500px) {
  .nav-label { display: none; }
  .nav-btn { max-width: none; padding: var(--sp-2); }
  .nav-icon { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════
   TAKEOVER — full-page overlay for Heroes/Gear/Materials/Stats.
   ═══════════════════════════════════════════════════════════ */

.takeover {
  position: fixed;
  left: 0; right: 0;
  top: 0;
  bottom: 92px;
  z-index: 300;
  background: linear-gradient(180deg, #171a20 0%, #0f1116 100%);
  border-top: 1px solid rgba(255, 215, 0, 0.25);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(0);
  transition: transform var(--dur-slow) var(--ease-out),
              opacity var(--dur-slow) var(--ease-out);
  opacity: 1;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
}
.takeover.is-hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.takeover-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--border-hair);
  background: rgba(0, 0, 0, 0.25);
}
.takeover-title {
  margin: 0;
  font-size: var(--text-xl);
  color: var(--accent-gold);
  letter-spacing: 1px;
  text-transform: uppercase;
  font-family: 'Trajan Pro', 'Cinzel', Georgia, serif;
}
.takeover-close {
  background: var(--surface-3);
  color: var(--text-1);
  border: 1px solid var(--border-hair);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 18px;
  line-height: 1;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.takeover-close:hover {
  background: var(--surface-4);
  color: var(--accent-negative);
  border-color: var(--accent-negative);
}
.takeover-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-4) var(--sp-5);
}

/* ═══════════════════════════════════════════════════════════
   PERSISTENT CHARACTER SCROLLER — always visible when no
   takeover is open. Sits above bottom-nav.
   ═══════════════════════════════════════════════════════════ */

.char-scroller {
  position: fixed;
  left: 0; right: 0;
  bottom: 92px;   /* sits above bottom-nav */
  z-index: 380;
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: linear-gradient(180deg, rgba(20, 22, 28, 0.5) 0%, rgba(14, 16, 20, 0.75) 100%);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-height: 96px;
}

/* Body needs extra bottom padding when the scroller is present, so combat
   isn't hidden. 92px nav + 96px scroller ≈ 188px reserved. */
body:not(.no-scroller) { padding-bottom: 188px; }

/* Class filter grid — 3×3 icon-only toggles */
.scr-filters {
  flex-shrink: 0;
  display: grid;
  grid-template-columns: repeat(3, 24px);
  grid-template-rows: repeat(3, 24px);
  gap: 2px;
  padding: 2px;
}
.scr-class-tog {
  width: 24px; height: 24px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: border-color var(--dur-fast), background var(--dur-fast), opacity var(--dur-fast);
  opacity: 0.55;
}
.scr-class-tog:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
}
.scr-class-tog.is-active {
  opacity: 1;
  border-color: var(--accent-gold);
  background: rgba(255, 215, 0, 0.12);
  box-shadow: 0 0 6px rgba(255, 215, 0, 0.4);
}
.scr-class-tog > svg {
  width: 22px !important;
  height: 22px !important;
  display: block;
}

/* Card list — horizontal scroll */
.scr-cards {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 4px 6px;
  scrollbar-width: thin;
}
.scr-card {
  flex-shrink: 0;
  min-width: 128px;
  max-width: 160px;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-hair);
  border-radius: 6px;
  cursor: grab;
  transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast);
}
.scr-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.scr-card.is-fielded {
  border-color: var(--accent-positive);
  box-shadow: 0 0 4px rgba(74, 222, 128, 0.35);
}
.scr-card:active { cursor: grabbing; }
.scr-card-body {
  min-width: 0;
  flex: 1;
}
.scr-card-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--text-1);
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scr-card-meta {
  font-size: 10px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.scr-empty {
  color: var(--text-2);
  font-size: var(--text-sm);
  padding: var(--sp-2);
  align-self: center;
}

/* Takeover extends up to just above the scroller when the scroller is present */
.takeover { bottom: 92px; }  /* base — takeover ends above nav */
/* No need to shrink further; scroller hides when takeover is open */

/* Portrait wrapper — positioning shell for portrait + optional class badge.
   The badge sits at the bottom-right corner OUTSIDE the portrait's circular
   clip so it stays visible even once real character art replaces the SVG. */
.portrait-wrap {
  display: inline-block;
  position: relative;
  flex-shrink: 0;
  line-height: 0;
}

/* Portrait — circular frame for character imagery. Replaces the .slot
   square-box wrapper we used to use around portrait SVGs. Rarity ring
   is done with box-shadow so it hugs the circular clip perfectly. */
.portrait {
  display: inline-block;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.10);
}
.portrait[data-rarity="1"] { box-shadow: 0 0 0 2px var(--rarity-common); }
.portrait[data-rarity="2"] { box-shadow: 0 0 0 2px var(--rarity-uncommon), 0 0 8px rgba(74, 222, 128, 0.4); }
.portrait[data-rarity="3"] { box-shadow: 0 0 0 2px var(--rarity-rare),      0 0 10px rgba(96, 165, 250, 0.45); }
.portrait[data-rarity="4"] { box-shadow: 0 0 0 2px var(--rarity-epic),      0 0 12px rgba(192, 132, 252, 0.55); }
.portrait[data-rarity="5"] { box-shadow: 0 0 0 2px var(--rarity-legendary), 0 0 14px rgba(251, 191, 36, 0.65); }

/* Image variant fills the circle */
.portrait-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* SVG variant fills too (the class glyphs are already centered circles) */
.portrait > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Class badge — small overlay in the bottom-right corner. Circular clip
   with a dark ring so it reads distinct against any portrait behind it. */
.portrait-class-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.55),
    0 1px 3px rgba(0, 0, 0, 0.4);
  background: var(--surface-1);
  z-index: 1;
  line-height: 0;
}
.portrait-class-badge > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Upgrade "!" badge — top-right corner. Hidden by default; the .has-upgrade
   class on .portrait-wrap reveals it. Standard game "action available" cue. */
.portrait-upgrade-badge {
  position: absolute;
  top: -3px;
  right: -3px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff5252 0%, #b91d1d 100%);
  color: #fff;
  font-weight: 900;
  font-family: inherit;
  display: none;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-shadow:
    0 0 0 1.5px rgba(0, 0, 0, 0.7),
    0 0 10px rgba(255, 82, 82, 0.7);
  z-index: 2;
  cursor: help;
  font-size: 0.72em;
  padding-bottom: 1px;
  animation: upgrade-pulse 1.8s ease-in-out infinite;
}
.portrait-wrap.has-upgrade .portrait-upgrade-badge { display: flex; }

@keyframes upgrade-pulse {
  0%, 100% { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 0 8px rgba(255, 82, 82, 0.55); }
  50%      { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.7), 0 0 14px rgba(255, 82, 82, 0.9); }
}

/* Chip — compact pill for labels, categories, positional info. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px 10px;
  background: var(--surface-3);
  border: 1px solid var(--border-hair);
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-1);
  letter-spacing: 0.4px;
  white-space: nowrap;
  line-height: 1.35;
}
.chip svg { display: block; }
.chip.chip-tinted {
  background: rgba(255, 255, 255, 0.04);
  border-color: currentColor;
}

/* Tooltip — floating card driven by data-tip / data-tip-html attributes.
   Handled by src/tooltip.js — no per-element wiring required. */
.tooltip {
  position: fixed;
  z-index: 1000;
  max-width: 300px;
  padding: var(--sp-2) var(--sp-3);
  background: var(--panel-bg);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.4);
  color: var(--text-1);
  font-size: var(--text-sm);
  line-height: 1.4;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  transform: translateY(0);
}
.tooltip.is-hidden {
  opacity: 0;
  transform: translateY(-2px);
}
.tooltip.tip-flipped.is-hidden {
  transform: translateY(2px);
}
.tooltip strong,
.tooltip b {
  color: var(--accent-gold);
  font-weight: var(--weight-bold);
}
.tooltip .tip-key {
  color: var(--text-2);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 2px;
}
.tooltip .tip-value {
  color: var(--accent-xp);
  font-weight: var(--weight-bold);
}
.tooltip .tip-hint {
  display: block;
  margin-top: 4px;
  color: var(--text-2);
  font-size: var(--text-xs);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════ */

* { box-sizing: border-box; }
body {
  font-family: system-ui, -apple-system, sans-serif;
  background: #14161a; color: #eee;
  margin: 0 auto; padding: 0.75rem;
  max-width: 1600px;
}

header {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: var(--panel-bg);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  margin-bottom: var(--sp-3);
  overflow: hidden;
  min-height: 72px;
  position: relative;
}
/* Faint gold accent line along the bottom — costs nothing, feels like a title bar */
header::after {
  content: '';
  position: absolute;
  left: var(--sp-4); right: var(--sp-4); bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,215,0,0.4) 50%, transparent 100%);
  pointer-events: none;
}

/* ── Game brand (left) ──────────────────────────────────── */

.game-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  border-right: 1px solid var(--border-hair);
  background: linear-gradient(90deg, rgba(255,215,0,0.04) 0%, transparent 100%);
  flex-shrink: 0;
}
.brand-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(255, 176, 32, 0.35));
}
.brand-title {
  display: flex;
  flex-direction: column;
  line-height: 1;
  font-family: 'Trajan Pro', 'Cinzel', Georgia, serif;
  letter-spacing: 1.5px;
}
.brand-line-1 {
  font-size: var(--text-sm);
  color: var(--text-2);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}
.brand-line-2 {
  font-size: var(--text-xl);
  color: var(--accent-gold);
  text-transform: uppercase;
  font-weight: var(--weight-bold);
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
  margin-top: 4px;
}

/* ── Stats cluster (right) ──────────────────────────────── */

/* Push stats right by taking all leftover flex space on the brand block. */
.game-brand { margin-right: auto; }

.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  border-right: 1px solid var(--border-hair);
  min-width: 0;
  position: relative;
}
.stat:last-of-type { border-right: none; }
.stat-lbl {
  color: var(--text-2);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1px;
  font-weight: var(--weight-medium);
  line-height: 1;
}
.stat > span:not(.stat-lbl):not(.dim) {
  /* Base number style: bold, tabular, sized down from the old shouty version */
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--text-1);
  line-height: 1.1;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}

/* Per-stat color coding via IDs — visual variety, matches semantic meaning:
   Zone = gold (progression), Gold = gold (currency),
   DPS = red (combat), Gold/hr = warm amber, XP/hr = blue (matches XP bar). */
#zone       { color: var(--accent-gold); }
#gold       { color: var(--accent-gold); }
#dps        { color: #ff8080; }
#gold-per-hour { color: var(--accent-warning); }
#xp-per-hour { color: var(--accent-xp); }

.dim {
  color: var(--text-2) !important;
  font-weight: var(--weight-normal) !important;
  font-size: 0.75em;
  letter-spacing: 0.3px;
}

/* ── Settings / header buttons ──────────────────────────── */

.header-btns {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  border-left: 1px solid var(--border-hair);
  flex-shrink: 0;
}
.header-btn {
  background: var(--surface-3);
  color: var(--text-1);
  border: 1px solid var(--border-hair);
  border-radius: 6px;
  padding: var(--sp-2) var(--sp-3);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-md);
  min-width: 40px;
  transition: background var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
}
.header-btn:hover {
  background: var(--surface-4);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
.header-btn:active { transform: translateY(0); }

/* ── Compact header on narrower screens ─────────────────── */
@media (max-width: 900px) {
  .brand-line-1 { font-size: 10px; }
  .brand-line-2 { font-size: var(--text-md); }
  .brand-icon { width: 36px; height: 36px; }
  .stat { padding: var(--sp-1) var(--sp-2); }
  .stat > span:not(.stat-lbl):not(.dim) { font-size: var(--text-md); }
}

.portrait { display: block; vertical-align: middle; }

/* ==== Main layout: header → zone bar → arena → (bottom nav pinned) ==== */
body {
  /* Reserve room at the bottom for the fixed nav rail so content isn't hidden */
  padding-bottom: 92px;
}
#game-main {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

#arena {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: start;
  position: relative;
}
#detail-sidebar {
  background: var(--panel-bg);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  box-shadow: var(--panel-shadow);
  padding: var(--sp-3);
  position: sticky;
  top: 0.75rem;
  /* Safety cap so a tiny viewport doesn't let the sidebar exceed the
     screen. The champion-grid inside has its own tighter max-height that
     usually clamps first — so this only kicks in on very small screens. */
  max-height: calc(100vh - 100px);
  overflow: hidden;
}

/* Narrow screens: stack vertically */
@media (max-width: 1150px) {
  #game-main { grid-template-columns: 1fr; }
  #arena { grid-template-columns: 1fr; }
  #detail-sidebar { position: static; max-height: none; }
}