/*
  Hero's Hour Build Calculator — mobile-first, overlay-driven styles.
  Palette sampled from the game UI art (parchment/leather surfaces, gold frames,
  cream text, blue action buttons, overworld-green positives).
  Base styles target a ~360px phone; scale up in the min-width blocks.
*/
:root {
  --bg: #211812;          /* dark leather/wood page       */
  --surface: #33261a;     /* parchment-brown panel        */
  --surface2: #2a1e14;    /* headers / footers            */
  --border: #5a442c;      /* muted wood divider           */
  --border-hi: #d9a441;   /* HoMM gold frame              */
  --accent: #3f6f9e;      /* blue action buttons          */
  --gold: #e8c05a;        /* selection / highlight        */
  --text: #f3e7d0;        /* parchment cream              */
  --text-muted: #c9b48f;
  --text-dim: #9a866a;
  --pos: #6fca6a;         /* positive delta (overworld green) */
  --neg: #d15a4a;         /* negative delta               */
  --conflict: #c0392b;
  --slot-size: 60px;
  /* light aged-paper parchment for the faction landing tiles */
  --parchment: #e7d7b0;
  --parchment-hi: #f2e6c6;
  --parchment-edge: #b79a63;
  --ink: #3a2a16;
  --display-font: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif;
}

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

body {
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.4;
  overflow-x: hidden;
}
img { image-rendering: pixelated; }

button {
  font: inherit; cursor: pointer; color: var(--text);
  background: var(--accent); border: none; border-radius: 6px; padding: 0.45rem 0.9rem;
}
button.ghost { background: transparent; border: 1px solid var(--border); }
button:hover { filter: brightness(1.1); }
.muted { color: var(--text-dim); }

/* ═══════════ BUILD VIEW (build-first home screen) ═══════════ */
.app-header {
  display: flex; align-items: center; justify-content: space-between; gap: 0.75rem;
  padding: 0.75rem 1rem; border-bottom: 2px solid var(--border-hi); background: var(--surface2);
}
.app-header h1 { font-size: clamp(1.05rem, 3.5vw, 1.55rem); color: var(--border-hi); font-family: var(--display-font); letter-spacing: 0.02em; }

.planning-main { padding: 1rem; height: calc(100dvh - 3.4rem); overflow-y: auto; }

/* ═══════════ LANDING VIEW — vertical parchment faction tiles ═══════════ */
.landing-header { justify-content: center; }
.landing-header h1 { text-align: center; }
.landing-main { padding: 1rem; height: calc(100dvh - 3.4rem); overflow-y: auto; }
.landing-lead {
  font-family: var(--display-font); text-align: center; color: var(--border-hi);
  font-size: clamp(1rem, 4vw, 1.35rem); letter-spacing: 0.04em; margin: 0.25rem 0 1rem;
}
.faction-list {
  display: flex; flex-direction: column; gap: 0.6rem;
  max-width: 560px; margin: 0 auto;
}
.faction-tile {
  display: flex; align-items: center; gap: 0.85rem; width: 100%; text-align: left;
  padding: 0.7rem 0.9rem; border-radius: 10px; cursor: pointer;
  color: var(--ink);
  background: linear-gradient(180deg, var(--parchment-hi), var(--parchment));
  border: 2px solid var(--parchment-edge);
  border-left: 6px solid var(--fac-color);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 2px 5px rgba(0,0,0,0.45);
  transition: transform 0.06s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.faction-tile:hover {
  border-color: var(--border-hi); border-left-color: var(--fac-color);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 0 0 1px var(--border-hi), 0 3px 8px rgba(0,0,0,0.5);
  filter: none; transform: translateY(-1px);
}
.faction-tile:active { transform: translateY(0); }
.faction-sigil {
  width: 46px; height: 46px; flex-shrink: 0;
  background-color: var(--fac-color);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35));
}
.faction-tile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.faction-name {
  font-family: var(--display-font); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); letter-spacing: 0.03em; line-height: 1.1;
}
/* tiny faction unit roster, in order — each sprite sits in a FIXED square cell (object-fit
   contain) so every row is exactly the same height regardless of native sprite dimensions */
.faction-units { display: flex; align-items: center; gap: 2px; margin-top: 0.35rem; flex-wrap: nowrap; }
.faction-unit {
  width: 26px; height: 26px; flex: 0 0 26px; object-fit: contain; object-position: center bottom;
  image-rendering: pixelated; filter: drop-shadow(0 1px 0 rgba(0,0,0,0.28));
}
.faction-chevron { font-size: 1.6rem; color: var(--fac-color); flex-shrink: 0; opacity: 0.8; align-self: center; }

@media (min-width: 640px) {
  .faction-unit { width: 30px; height: 30px; flex-basis: 30px; }
}

/* ═══════════ GROUPED HERO MENU (rows by class) ═══════════ */
.ovl-grid.hero-groups { display: flex; flex-direction: column; gap: 0.8rem; grid-template-columns: none; }
.hero-group { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--surface2); }
.hero-group-head {
  display: flex; align-items: baseline; gap: 0.5rem; padding: 0.4rem 0.6rem;
  background: linear-gradient(180deg, #3a2c1c, var(--surface2)); border-bottom: 1px solid var(--border);
}
.hg-title { font-family: var(--display-font); font-weight: 600; color: var(--border-hi); font-size: 0.98rem; }
.hg-type { font-size: 0.72rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.hg-count { margin-left: auto; font-size: 0.75rem; color: var(--text-dim); }
.hero-group-body {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.4rem; padding: 0.5rem;
}
.hero-row {
  display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.6rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 6px; background: var(--surface);
}
.hero-row:hover { background: rgba(217,164,65,0.10); border-color: var(--border-hi); }
.hero-row.selected { background: rgba(217,164,65,0.20); border-color: var(--border-hi); box-shadow: inset 3px 0 0 var(--border-hi); }
.hero-row-portrait {
  width: 40px; height: 40px; flex: 0 0 40px; border: 1px solid var(--border-hi); border-radius: 6px;
  background: var(--bg); overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.hero-row-portrait img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.hero-row-id { flex: 1; min-width: 0; }
.hero-row-name { font-weight: 600; color: var(--text); }
.hero-row-icons { display: flex; align-items: center; gap: 0.3rem; flex: 0 0 auto; }
.hero-mini {
  width: 34px; height: 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.hero-mini img { width: 30px; height: 26px; object-fit: contain; object-position: center; image-rendering: pixelated; }
.hero-mini.mini-skill img { image-rendering: auto; }
.hero-mini-label { font-size: 0.5rem; line-height: 1; color: var(--text-dim); max-width: 34px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.hero-mini.mini-empty { justify-content: center; }
.hero-mini.mini-empty::before {
  content: ""; width: 22px; height: 22px; border: 1px dashed var(--border); border-radius: 4px; opacity: 0.6;
}
@media (min-width: 640px) {
  .hero-mini { width: 44px; }
  .hero-mini-label { font-size: 0.6rem; max-width: 44px; }
}

/* hero header action row (realm toggle + skill tree) */
.hero-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; }
.skilltree-open { background: var(--accent); font-size: 0.85rem; padding: 0.35rem 0.7rem; border-radius: 6px; }

/* ═══════════ SKILL TREE OVERLAY ═══════════ */
.skilltree-panel { max-width: 720px; }
.tk-bar {
  display: flex; align-items: center; gap: 0.8rem; padding: 0.5rem 0.9rem;
  background: var(--surface2); border-bottom: 1px solid var(--border);
}
.tk-level { display: flex; align-items: baseline; gap: 0.3rem; }
.tk-level-num { font-family: var(--display-font); font-size: 1.7rem; font-weight: 700; color: var(--border-hi); line-height: 1; }
.tk-level-lbl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.tk-points { font-size: 0.85rem; color: var(--text-muted); }
.tk-bar .ghost { margin-left: auto; }
.tk-scroll { padding: 0.8rem 0.6rem; max-height: calc(90dvh - 9rem); overflow-y: auto; }

.tk-row { display: flex; gap: 0.5rem; align-items: flex-start; margin-bottom: 0.9rem; }
.tk-row-tier {
  flex: 0 0 40px; display: flex; flex-direction: column; align-items: center; padding-top: 0.5rem;
  font-family: var(--display-font); color: var(--border-hi); font-size: 0.9rem;
}
.tk-row-lvl { font-family: system-ui, sans-serif; font-size: 0.58rem; color: var(--text-dim); margin-top: 2px; }
.tk-row-nodes { flex: 1; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem; }

.tk-node {
  width: 74px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 0.35rem 0.2rem; border-radius: 8px; background: var(--surface);
  border: 1px solid var(--border); position: relative;
}
.tk-node.tk-empty { visibility: hidden; }
.tk-node.allocated { border-color: var(--border-hi); box-shadow: 0 0 0 1px var(--border-hi), 0 0 8px rgba(217,164,65,0.25); }
.tk-node.spec { background: linear-gradient(180deg, #3a2f42, var(--surface)); }
.tk-node.spec::after { content: "★"; position: absolute; top: 2px; right: 4px; font-size: 0.6rem; color: var(--gold); }
.tk-node.locked { opacity: 0.5; }
.tk-icon { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; }
.tk-icon img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }
.tk-ico-fallback { font-family: var(--display-font); color: var(--text-dim); }
.tk-name { font-size: 0.6rem; text-align: center; line-height: 1.05; color: var(--text); min-height: 1.6em; }
.tk-pips { display: flex; gap: 2px; }
.tk-pip { width: 6px; height: 6px; border-radius: 50%; background: var(--border); }
.tk-pip.on { background: var(--gold); box-shadow: 0 0 3px var(--gold); }
.tk-ctrl { display: flex; align-items: center; gap: 3px; }
.tk-btn {
  width: 20px; height: 20px; padding: 0; border-radius: 4px; background: var(--accent);
  font-size: 0.9rem; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.tk-btn:disabled { background: var(--surface2); color: var(--text-dim); cursor: default; filter: none; }
.tk-rank { font-size: 0.65rem; color: var(--text-muted); min-width: 22px; text-align: center; }
.tk-req { font-size: 0.55rem; padding: 1px 4px; border-radius: 3px; }
.tk-req.ok { color: var(--pos); }
.tk-req.no { color: var(--text-dim); }
.tk-req.max { color: var(--gold); }

.tk-mastery {
  display: flex; align-items: center; gap: 0.6rem; justify-content: center; margin: 0.4rem auto 0;
  max-width: 260px; padding: 0.5rem 0.8rem; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border-hi);
}
.tk-mastery-icon { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; }
.tk-mastery-icon img { width: 40px; height: 40px; object-fit: contain; image-rendering: pixelated; }
.tk-mastery-txt { display: flex; flex-direction: column; }
.tk-note { font-size: 0.72rem; margin-top: 0.8rem; text-align: center; }

/* 6-node skill tree (current model): each node = a major-skill ROW + its sub-skill rows.
   Rows show the skill's effect text; a fixed-width badge shows the rank, the level/major-rank gate,
   or MAX — so every row is the same shape regardless of state. */
.tk-nodegroup { border: 1px solid var(--border); border-radius: 10px; background: var(--surface2); padding: 0.4rem; margin-bottom: 0.6rem; }
.tk-nodegroup-subs { display: flex; flex-direction: column; gap: 0.3rem; margin-top: 0.3rem; }
.tk-row { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0.4rem 0.5rem; border-radius: 8px; background: var(--surface); border: 1px solid transparent; }
.tk-row.is-major { border-color: var(--border-hi); background: linear-gradient(180deg, #3a2c1c, var(--surface)); }
.tk-row.allocated { box-shadow: inset 3px 0 0 var(--gold); }
.tk-row.allocated:not(.is-major) { border-color: var(--border); }
.tk-row.locked { opacity: 0.72; }
.tk-row-ico { width: 40px; height: 40px; flex: 0 0 40px; display: flex; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; }
.tk-row-ico img { width: 88%; height: 88%; object-fit: contain; image-rendering: pixelated; }
.tk-row.is-major .tk-row-ico { border-color: var(--border-hi); }
.tk-row-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tk-row-name { font-weight: 600; color: var(--text); font-size: 0.9rem; }
.tk-row.is-major .tk-row-name { color: var(--border-hi); }
.tk-row-desc { font-size: 0.74rem; color: var(--text-dim); line-height: 1.35; }
.tk-row-desc .tk-per { color: var(--text-muted); }
.tk-row-desc .tk-scaled { color: var(--pos); font-weight: 700; white-space: nowrap; }
.tk-row-side { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; }
.tk-badge { width: 48px; flex: 0 0 48px; text-align: center; font-size: 0.66rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 3px 0; border-radius: 5px; white-space: nowrap; }
.tk-badge.rank { color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); }
.tk-badge.lock { color: var(--neg); background: rgba(209, 90, 74, 0.12); border: 1px solid rgba(209, 90, 74, 0.35); }
.tk-badge.max { color: var(--gold); background: rgba(232, 192, 90, 0.12); border: 1px solid rgba(232, 192, 90, 0.35); }

@media (min-width: 640px) {
  .tk-node { width: 84px; }
  .tk-name { font-size: 0.66rem; }
}
/* narrow phones: shrink nodes so the widest row (5) fits without horizontal scroll */
@media (max-width: 440px) {
  .tk-row { gap: 0.25rem; }
  .tk-row-tier { flex-basis: 26px; font-size: 0.75rem; }
  .tk-row-nodes { gap: 0.25rem; }
  .tk-node { width: 60px; padding: 0.3rem 0.1rem; }
  .tk-name { font-size: 0.54rem; }
  .tk-icon, .tk-icon img { width: 28px; height: 28px; }
  .tk-btn { width: 18px; height: 18px; }
  .tk-rank { min-width: 18px; font-size: 0.6rem; }
}

@media (min-width: 640px) {
  .faction-tile { padding: 0.85rem 1.1rem; gap: 1rem; }
  .faction-sigil { width: 54px; height: 54px; }
  .faction-name { font-size: 1.3rem; }
}

/* --- hero header (click to open the hero selector) --- */
.hero-header {
  display: flex; align-items: center; gap: 0.9rem;
  background: var(--surface); border: 1px solid var(--border-hi); border-radius: 10px;
  padding: 0.75rem 0.9rem; max-width: 680px; cursor: pointer;
}
.hero-header:hover { border-color: var(--gold); }
.hero-portrait {
  width: 72px; height: 72px; flex-shrink: 0;
  border: 2px solid var(--border-hi); border-radius: 8px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.hero-portrait img { width: 100%; height: 100%; object-fit: contain; }
.hero-id { flex: 1; min-width: 0; }
.hero-id h2 { font-size: 1.2rem; color: var(--text); }
.hero-id .hero-sub { font-size: 0.85rem; color: var(--text-muted); }
.hero-id .hero-meta { font-size: 0.78rem; color: var(--text-dim); margin-top: 0.15rem; }
.hero-empty { color: var(--text-dim); font-style: italic; }

/* realm toggle (HH / RR) — stopPropagation so it doesn't open the hero selector */
.realm-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-top: 0.35rem; }
.realm-toggle button { background: transparent; border: none; border-radius: 0; padding: 0.2rem 0.6rem; font-size: 0.75rem; color: var(--text-dim); }
.realm-toggle button.on { background: var(--accent); color: var(--text); }

/* --- build body: paperdoll + stat panel --- */
.build-body { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1rem; max-width: 680px; }

/* paperdoll mirrors the in-game layout: class silhouette centered, 5 artifact slots per side */
.paperdoll {
  display: flex; align-items: stretch; justify-content: center; gap: 1.4rem;
  background: radial-gradient(120% 95% at 50% 42%, #241a12, var(--bg));
  border: 1px solid var(--border); border-radius: 10px;
  padding: 0.75rem 1rem; flex: 0 0 auto;
}
.paperdoll-col { display: flex; flex-direction: column; gap: 0.55rem; }
.paperdoll-mid {
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto; padding: 0 0.5rem;
  background: radial-gradient(ellipse 62% 78% at 50% 46%, rgba(217, 164, 65, 0.16), transparent 72%);
}
.paperdoll-mid img { height: 100%; max-height: calc(5 * var(--slot-size) + 4 * 0.55rem); width: auto; max-width: 120px; object-fit: contain; image-rendering: pixelated; opacity: 0.9; }
.slot {
  position: relative; width: var(--slot-size); aspect-ratio: 1; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: rgba(33, 24, 18, 0.72); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer;
}
.slot:hover { border-color: var(--accent); }
.slot.filled { border-color: var(--border-hi); }
/* sprite dominates the slot (~68%); aspect-ratio keeps mixed sizes uniform */
.slot img { width: 72%; height: 72%; aspect-ratio: 1; object-fit: contain; }
.slot .slot-empty { font-size: 1.1rem; color: var(--text-dim); }
/* quality tint ring (1–5) via inline --q-color */
.slot.filled { box-shadow: inset 0 0 0 2px var(--q-color, var(--border-hi)); }

/* --- stat panel --- */
.stat-panel { flex: 1 1 260px; min-width: 240px; display: flex; flex-direction: column; gap: 0.9rem; }
.panel-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.75rem 0.9rem; }
.panel-box h2 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 0.6rem; }

/* primary-stat steppers */
.stat-steppers { display: grid; grid-template-columns: 1fr auto; gap: 0.3rem 0.5rem; align-items: center; }
.stat-steppers .st-label { font-size: 0.85rem; color: var(--text-muted); }
.stat-steppers .st-ctrl { display: inline-flex; align-items: center; gap: 0.4rem; }
.stat-steppers .st-ctrl button { padding: 0.1rem 0.5rem; background: var(--surface2); border: 1px solid var(--border); }
.stat-steppers .st-val { min-width: 1.6rem; text-align: center; font-weight: 700; }

/* army-buff readout (derived: +3%/pt) */
.army-buffs { display: flex; flex-direction: column; gap: 0.3rem; }
.army-buff { display: flex; justify-content: space-between; font-size: 0.86rem; }
.army-buff .ab-val { font-weight: 700; color: var(--pos); }

/* set-progress lines */
.set-progress { display: flex; flex-direction: column; gap: 0.25rem; }
.set-row { display: flex; justify-content: space-between; font-size: 0.84rem; align-items: center; gap: 0.5rem; }
.set-row .set-count { color: var(--text-dim); font-variant-numeric: tabular-nums; }
.set-row.active .set-count { color: var(--gold); font-weight: 700; }
.set-row.active .trait-banner-label { box-shadow: 0 0 0 1px var(--gold); }

/* ═══════════ OVERLAY SYSTEM ═══════════ */
#overlay-root, #detail-overlay-root {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  padding: 2vh 2vw; background: rgba(0, 0, 0, 0.62);
}
#overlay-root { z-index: 100; }
#detail-overlay-root { z-index: 200; }
#overlay-root.hidden, #detail-overlay-root.hidden { display: none; }

.overlay-panel {
  background: var(--surface); border: 1px solid var(--border-hi); border-radius: 12px;
  width: 88vw; max-width: 1380px;
  height: 85vh; max-height: 85vh;   /* FIXED height — never collapse to hug a filtered grid */
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, .8);
}
#detail-overlay-root .overlay-panel { width: 94vw; max-width: 1600px; height: 92vh; max-height: 92vh; }

.overlay-header, .overlay-footer { flex-shrink: 0; }
.overlay-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface2);
}
.overlay-header h2 { font-size: 1.05rem; color: var(--border-hi); }
.overlay-close { background: transparent; font-size: 1.3rem; line-height: 1; padding: 0 0.3rem; }
.overlay-footer {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem;
  padding: 0.6rem 1rem; border-top: 1px solid var(--border); background: var(--surface2);
}

.overlay-body { display: flex; flex: 1; overflow: hidden; }
.ovl-info { display: contents; }
/* List is the primary focus: the info panels only appear once something is picked. */
.overlay-body:not(.has-selection) .ovl-left,
.overlay-body:not(.has-selection) .ovl-right { display: none; }
.ovl-left { order: 1; } .ovl-center { order: 2; } .ovl-right { order: 3; }
.ovl-center-scroll, .ovl-left, .ovl-right-body, .ovl-info { overscroll-behavior: contain; }

.ovl-left { width: 280px; flex-shrink: 0; border-right: 1px solid var(--border); overflow-y: auto; padding: 0.75rem; }
.ovl-left h3, .ovl-right h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 0.5rem; }
.ovl-center { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.ovl-center-search { flex-shrink: 0; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
.ovl-search { width: 100%; padding: 0.4rem 0.6rem; background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 6px; }
.ovl-center-scroll { flex: 1; overflow-y: auto; padding: 0.75rem; }

.ovl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 0.5rem; }
.ovl-card {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; position: relative;
}
.ovl-card img { width: 74%; height: 74%; aspect-ratio: 1; object-fit: contain; }
.ovl-card .ovl-card-fallback { font-size: 0.7rem; color: var(--text-dim); text-align: center; padding: 2px; }
.ovl-card:hover { border-color: var(--accent); }
.ovl-card.selected { box-shadow: inset 0 0 0 2px var(--gold); }
.ovl-card.selected img { filter: brightness(1.15) saturate(1.1); }
.ovl-card .ovl-card-name { position: absolute; bottom: 1px; left: 0; right: 0; font-size: 0.55rem; color: var(--text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }

.ovl-right { width: 300px; flex-shrink: 0; border-left: 1px solid var(--border); display: flex; flex-direction: column; overflow: hidden; }
.ovl-right-top { flex-shrink: 0; padding: 0.75rem; border-bottom: 1px solid var(--border); }
.ovl-right-body { flex: 1; overflow-y: auto; padding: 0.75rem; }
.ovl-right-top h3 { font-size: 1rem; color: var(--text); }

/* consolidated single info panel (hero selector): centered portrait + context blocks */
.overlay-body.solo-info .ovl-left { display: none; }
.overlay-body.solo-info .ovl-right { width: 340px; border-left: 2px solid var(--border-hi); background: var(--surface2); }
.detail-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem; }
.detail-icon {
  width: 88px; height: 88px; border: 2px solid var(--border-hi); border-radius: 10px;
  background: var(--bg); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.detail-icon img { width: 100%; height: 100%; object-fit: contain; }
.detail-head h3 { font-size: 1.1rem; color: var(--text); }
.detail-sub { font-size: 0.8rem; }
.info-block { border: 1px solid var(--border); border-radius: 8px; background: var(--surface2); padding: 0.5rem 0.6rem; margin-top: 0.5rem; }
.info-block-head { display: flex; align-items: center; gap: 0.5rem; }
.info-ico {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 6px; background: var(--bg);
  border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.info-ico img { width: 88%; height: 88%; object-fit: contain; image-rendering: pixelated; }
.info-ico-empty { border-style: dashed; opacity: 0.55; }
.info-block-id { display: flex; flex-direction: column; min-width: 0; }
.info-kind { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); }
.info-name { font-weight: 600; color: var(--text); }
.info-tag { font-size: 0.66rem; padding: 1px 5px; border-radius: 4px; background: var(--surface); border: 1px solid var(--border); color: var(--text-muted); }
.info-chips { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.info-chip {
  font-size: 0.68rem; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  background: var(--bg); border: 1px solid var(--border); color: var(--text-muted); font-variant-numeric: tabular-nums;
}
.info-desc { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.4rem; line-height: 1.4; }
.skill-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.5rem; }
.skill-row { display: flex; align-items: center; gap: 0.5rem; }
.skill-row-txt { display: flex; flex-direction: column; min-width: 0; }
.skill-row-desc { font-size: 0.72rem; color: var(--text-dim); line-height: 1.3; margin-top: 1px; }
.detail-meta { font-size: 0.75rem; margin-top: 0.6rem; text-align: center; }

/* ═══════════ TRAIT ASSOCIATIONS ═══════════ */
.trait-banner { display: flex; align-items: center; gap: 6px; cursor: pointer; margin-bottom: 4px; }
.trait-banner-icon { width: 20px; height: 20px; flex-shrink: 0; }
.trait-banner-icon img { width: 100%; height: 100%; object-fit: contain; }
.trait-banner-label {
  flex: 1; min-width: 0; padding: 3px 9px; border-radius: 4px;
  background: var(--aff-color, var(--surface2)); color: var(--aff-text, #fff);
  font-size: .82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trait-banner:hover .trait-banner-label { filter: brightness(1.12); }
.primary-traits { border: 1px solid var(--border-hi); border-radius: 8px; background: rgba(217, 164, 65, .07); padding: 5px 7px; margin-bottom: 6px; }
.primary-traits > :last-child { margin-bottom: 0; }
.primary-traits.conflict-traits { border-color: var(--conflict); background: rgba(192, 16, 32, .13); }
.trait-users { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .3rem; }
.trait-users li { cursor: pointer; padding: .15rem .5rem; border-radius: 4px; background: var(--surface2); border: 1px solid var(--border); font-size: .85rem; }
.trait-users li:hover { border-color: var(--accent); }

/* ═══════════ STAT TABLE ═══════════ */
.stat-grid { display: flex; flex-direction: column; gap: 1px; }
.stat-header, .stat-row { display: grid; grid-template-columns: 1fr 3.2rem 3.8rem 3.8rem; align-items: center; }
.stat-header { font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; color: var(--text-dim); padding: 0 4px 3px; border-bottom: 1px solid var(--border); margin-bottom: 2px; }
.stat-header span { text-align: right; } .stat-header span:first-child { text-align: left; }
.stat-row { font-size: .86rem; padding: 2px 4px; border-radius: 3px; }
.stat-key { color: var(--text-muted); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-base { text-align: right; color: var(--text-dim); }
.stat-src { text-align: right; font-weight: 600; }
.stat-total { text-align: right; font-weight: 700; color: var(--text); }
.stat-val.pos { color: var(--pos); } .stat-val.neg { color: var(--neg); }
.stat-row.capped .stat-total { color: var(--gold); }
.stat-row.hl-med { background: rgba(232, 192, 90, .10); }

/* ═══════════ CROSS-REFERENCE MATRIX ═══════════ */
.xref-section { margin-top: 1.25rem; max-width: 680px; }
.xref-section h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin-bottom: 0.5rem; }
.xref-wrap { overflow: auto; max-width: 100%; border: 1px solid var(--border); border-radius: 8px; }
table.player-xref { border-collapse: collapse; font-size: .9rem; }
.player-xref th, .player-xref td { border: 1px solid var(--border); text-align: center; padding: 3px 6px; }
.player-xref thead th { position: sticky; top: 0; z-index: 2; }
.xref-corner { position: sticky; left: 0; top: 0; z-index: 4; background: var(--surface2); }
.xref-rowhead { position: sticky; left: 0; z-index: 1; background: var(--surface2); text-align: left; white-space: nowrap; cursor: pointer; max-width: 200px; overflow: hidden; }
.xref-rowhead:hover { color: var(--border-hi); }
.xref-colhead { padding: 0; height: 118px; vertical-align: bottom; }
.xref-col { display: flex; flex-direction: column-reverse; align-items: center; gap: 5px; height: 100%; padding: 7px 3px; min-width: 30px; cursor: pointer; background: var(--aff-color); color: var(--aff-text); }
.xref-col:hover { filter: brightness(1.12); }
.xref-col-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.xref-col-name { writing-mode: vertical-rl; font-size: .76rem; font-weight: 600; white-space: nowrap; }
.player-xref td.xref-on { color: var(--gold); }
.xref-shared th, .xref-shared td { position: sticky; bottom: 0; z-index: 1; background: var(--surface2); font-weight: 700; }
.xref-shared td { color: var(--text-muted); }
.xref-shared td.xref-sh { color: var(--gold); }
.xref-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: .4rem; font-size: .78rem; color: var(--text-dim); }
.xref-legend b { margin-right: .25rem; } .xref-legend .xref-on, .xref-legend .xref-sh { color: var(--gold); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 700px) { .ovl-left, .ovl-right { width: 200px; } }

@media (max-width: 600px) {
  #overlay-root, #detail-overlay-root { padding: 0; }
  .overlay-panel, #detail-overlay-root .overlay-panel {
    width: 100vw; max-width: none; height: 100dvh; max-height: 100dvh; border: none; border-radius: 0;
  }
  .overlay-body { flex-direction: column; }
  /* List on TOP (the focus), info panel docked at the BOTTOM. The list is a touch shorter so the
     info panel gets more room; a gold border + darker fill separates the two so they don't blend. */
  .ovl-center { flex: none; height: 44vh; order: 0; }
  .ovl-center-scroll { -webkit-overflow-scrolling: touch; }
  .ovl-info {
    display: flex; flex-direction: column; flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; order: 1;
    background: var(--surface2); border-top: 3px solid var(--border-hi);
  }
  .ovl-left, .ovl-right, .ovl-right-body { overflow: visible; width: auto; border: none; }
  .ovl-right { order: 0; } .ovl-left { order: 1; }
  /* Consolidated info panel: centered column, larger on mobile. The separation comes from the
     .ovl-info top border/fill above, so drop the panel's own border/background here. */
  .overlay-body.solo-info .ovl-right { width: auto; margin: 0 auto; max-width: 480px; border: none; background: transparent; }
  .overlay-body.solo-info .ovl-right-top,
  .overlay-body.solo-info .ovl-right-body { width: 100%; max-width: 480px; margin: 0 auto; }
  .detail-icon { width: 120px; height: 120px; }
  .detail-head h3 { font-size: 1.35rem; }
  .detail-sub { font-size: 0.9rem; }
  .info-block { padding: 0.65rem 0.75rem; margin-top: 0.6rem; }
  .info-ico { width: 48px; height: 48px; flex-basis: 48px; }
  .info-name { font-size: 1rem; }
  .info-desc { font-size: 0.88rem; }
  .overlay-body:not(.has-selection) .ovl-center { height: 100%; }
  .overlay-body:not(.has-selection) .ovl-info { display: none; }
  .build-body { flex-direction: column; }
  /* Fill the width on phones: stretch the paperdoll, push slot columns to the edges, and let the
     centered silhouette grow into the freed middle space. */
  .paperdoll { align-self: stretch; width: 100%; justify-content: space-between; gap: 0.5rem; }
  .paperdoll-mid { flex: 1 1 auto; }
  .paperdoll-mid img { max-width: min(220px, 46vw); }
  /* Two hero tiles per row on phones; icons wrap under the name so the narrow
     tile still fits (auto-fill minmax can't get 2 columns at phone widths). */
  .hero-group-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-row { flex-wrap: wrap; }
  .hero-row-icons { flex-basis: 100%; justify-content: flex-start; margin-top: 2px; }
}
@media (max-width: 380px) { :root { --slot-size: 52px; } }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }