/* Custom CSS layered on Tailwind. Keep small — Tailwind does most of the work. */

:root {
  --bg-deep:    #0A0A0D;
  --bg-card:    #14141A;
  --bg-card-2:  #1B1B23;
  --border-1:   #26262F;
  --border-2:   #33333F;
  --text-1:     #E8E8EE;
  --text-2:     #A8A8B5;
  --text-3:     #6E6E80;
  --accent:     #7C5CFF;
  --accent-2:   #5B8CFF;
}

/* Make the document the canonical scroll container so vertical scroll
   never gets routed to inner elements at small viewport sizes. */
html { height: 100%; overflow-y: auto; overflow-x: hidden; }
body {
  background: var(--bg-deep);
  color: var(--text-1);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: "cv11", "ss01";
  min-height: 100%;
  margin: 0;
  overflow-anchor: none;  /* prevent jump-back when content shifts (Chart.js paint) */
}

.font-mono { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace; }

.card {
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: 8px;
}

.card-tight { background: var(--bg-card); border: 1px solid var(--border-1); border-radius: 6px; }

.subcard {
  background: var(--bg-card-2);
  border: 1px solid var(--border-2);
  border-radius: 6px;
}

/* Pill / badge */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 500;
  border: 1px solid transparent;
  letter-spacing: 0.02em; text-transform: uppercase;
}
.pill-kill   { background: rgba(34,197,94,.10);  color: #4ADE80; border-color: rgba(34,197,94,.30); }
.pill-wipe   { background: rgba(239,68,68,.10);  color: #F87171; border-color: rgba(239,68,68,.30); }
.pill-prog   { background: rgba(251,146,60,.10); color: #FB923C; border-color: rgba(251,146,60,.30); }
.pill-farm   { background: rgba(124,92,255,.10); color: #A78BFA; border-color: rgba(124,92,255,.30); }
.pill-tight  { background: rgba(234,179,8,.10);  color: #FACC15; border-color: rgba(234,179,8,.30); }
.pill-locked { background: rgba(148,163,184,.10);color: #94A3B8; border-color: rgba(148,163,184,.30); }
.pill-flex   { background: rgba(56,189,248,.10); color: #38BDF8; border-color: rgba(56,189,248,.30); }
.pill-absent { background: rgba(120,113,108,.10);color: #A8A29E; border-color: rgba(120,113,108,.30); }
.pill-bench  { background: rgba(51,65,85,.20);   color: #94A3B8; border-color: rgba(71,85,105,.40); }
.pill-played { background: rgba(34,197,94,.06);  color: #86EFAC; border-color: rgba(34,197,94,.20); }
.pill-info   { background: rgba(99,102,241,.10); color: #A5B4FC; border-color: rgba(99,102,241,.30); }

/* Player chip with class color */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  background: rgba(255,255,255,.03);
  border: 1px solid var(--border-1);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
}
.chip-grayed { opacity: .55; }
.chip .role-tag {
  font-size: 9px; font-weight: 700; letter-spacing: .04em;
  padding: 1px 4px; border-radius: 3px;
  background: rgba(255,255,255,.06); color: var(--text-2);
}

/* Mechanic callout (archon-style) */
.callout {
  border-left: 3px solid var(--border-2);
  padding: 10px 14px;
  background: var(--bg-card-2);
  border-radius: 0 6px 6px 0;
}
.callout-wipe     { border-left-color: #EF4444; }
.callout-priority { border-left-color: #F59E0B; }
.callout-tracking { border-left-color: #6366F1; }

/* Sev badge inside callout */
.sev {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 3px;
}
.sev-wipe     { background: rgba(239,68,68,.15); color: #FCA5A5; }
.sev-priority { background: rgba(245,158,11,.15);color: #FCD34D; }
.sev-tracking { background: rgba(99,102,241,.15);color: #A5B4FC; }

.divider { border-top: 1px solid var(--border-1); }

/* Scrollbar — visible enough on Mac with auto-hiding bars. Only the document
   scrollbar is styled; inner scrollable areas inherit defaults. */
html { scrollbar-color: #4A4A5C #14141A; scrollbar-width: auto; }
html::-webkit-scrollbar { width: 12px; height: 12px; }
html::-webkit-scrollbar-track { background: #14141A; }
html::-webkit-scrollbar-thumb { background: #4A4A5C; border-radius: 6px; border: 2px solid #14141A; }
html::-webkit-scrollbar-thumb:hover { background: #5E5E78; }

/* Stat tile */
.stat-tile {
  background: linear-gradient(160deg, rgba(124,92,255,.06) 0%, rgba(124,92,255,0) 70%), var(--bg-card);
  border: 1px solid var(--border-1);
  border-radius: 8px;
  padding: 16px 18px;
}
.stat-tile .label { font-size: 11px; color: var(--text-3); text-transform: uppercase; letter-spacing: .08em; }
.stat-tile .value { font-size: 28px; font-weight: 600; color: var(--text-1); margin-top: 4px; }
.stat-tile .delta { font-size: 12px; color: var(--text-2); margin-top: 4px; }

/* Role bucket label (e.g., "TANKS · 2") — child-level, sits inside a bench/played container */
.role-bucket {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}
.role-bucket .count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; font-weight: 500;
  color: var(--text-1);
  letter-spacing: 0;
}

/* Section-level header for "Bench" / "Killing Roster" — umbrella over role-buckets.
   Visually dominant over .role-bucket child labels. */
.bench-header, .roster-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 600;
  color: var(--text-1);
  text-transform: uppercase; letter-spacing: .06em;
  padding-bottom: 8px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border-1);
}
.bench-header .count, .roster-header .count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px; font-weight: 500;
  color: var(--text-2);
  background: rgba(255,255,255,.06);
  border: 1px solid var(--border-2);
  border-radius: 4px;
  padding: 1px 8px;
  letter-spacing: 0;
}

/* Section header */
.section-h {
  display: flex; align-items: baseline; justify-content: space-between;
  border-bottom: 1px solid var(--border-1);
  padding-bottom: 8px; margin-bottom: 14px;
}
.section-h h2 { font-size: 14px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); }
.section-h .meta { font-size: 12px; color: var(--text-3); }

/* Class color text utility */
.class-text { font-weight: 500; }

/* Boss row in a kill list */
.boss-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto auto;
  gap: 12px; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-1);
}
.boss-row:hover { background: rgba(124,92,255,.04); }
.boss-row .order { color: var(--text-3); font-family: 'JetBrains Mono', monospace; font-size: 12px; }
.boss-row .title { font-size: 14px; }
.boss-row .meta { font-size: 12px; color: var(--text-2); font-family: 'JetBrains Mono', monospace; }

a { color: var(--accent-2); text-decoration: none; }
a:hover { color: #93C5FD; }

/* Stub link: visually inert, indicates the target page isn't built yet */
a.stub, .stub a {
  color: inherit;
  cursor: default;
  pointer-events: none;
}
.stub-row { cursor: default; }
.stub-row:hover { background: transparent !important; }

/* ---------------------------------------------------------------------------
 * Boss-night page (boss-night.html)
 * ------------------------------------------------------------------------- */

.pull-row {
  border-bottom: 1px solid var(--border-1);
  background: transparent;
  cursor: pointer;
  transition: background 60ms ease;
}
.pull-row:last-of-type { border-bottom: none; }
.pull-row.is-expanded { background: rgba(124,92,255,.04); }

.bn-expanded {
  /* Background tint hint at the top of the expanded panel */
}

.bn-subsection {
  padding: 8px 0;
  border-bottom: 1px dashed var(--border-1);
}
.bn-subsection:last-child { border-bottom: none; }
.bn-sub-label {
  display: flex; align-items: baseline; gap: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-2);
  font-weight: 600;
  margin-bottom: 8px;
}

.death-card { background: rgba(255,255,255,.015); }
.death-toggle.is-open { background: rgba(255,255,255,.025); }

/* HP-impact filter — hides rows whose adjacent HP delta < 5 */
.event-rows tr.hp-low-impact { display: none; }

/* Filter checkbox */
.filter-5pct {
  accent-color: var(--accent);
  width: 11px; height: 11px;
  margin: 0;
}

/* ---------------------------------------------------------------------------
 * Boss-night Phase 2.1 polish — ranking bars + death recap timeline
 * ------------------------------------------------------------------------- */

.rank-bars { display: flex; flex-direction: column; gap: 4px; }
.rank-bar {
  display: grid;
  grid-template-columns: 110px 1fr 90px;
  gap: 8px;
  align-items: center;
  font-size: 12px;
}
.rank-bar-name { font-weight: 500; }
.rank-bar-track {
  height: 14px;
  background: rgba(255,255,255,.04);
  border-radius: 3px;
  overflow: hidden;
  border: 1px solid var(--border-1);
}
.rank-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 200ms ease;
  opacity: 0.7;
}
.rank-bar-value { color: var(--text-2); font-size: 11px; text-align: right; }

/* Section description (subtle subtitle under each bn-sub-label) */
.bn-sub-label { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.bn-sub-desc {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-3);
  line-height: 1.4;
  max-width: 64ch;
}

/* Death recap event timeline */
.death-events {
  display: flex; flex-direction: column;
  border-left: 2px solid var(--border-1);
  padding-left: 8px;
  margin-left: 16px;
}
.death-event {
  display: grid;
  grid-template-columns: 50px 1fr 80px 70px;
  gap: 10px;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
}
.death-event-time { color: var(--text-3); font-size: 11px; }
.death-event-ability { color: var(--text-1); }
.death-event-bar {
  height: 10px;
  background: rgba(255,255,255,.03);
  border-radius: 2px;
  overflow: hidden;
}
.death-event-fill { height: 100%; border-radius: 2px; opacity: 0.65; }
.death-event.is-dmg .death-event-fill { background: #F87171; }
.death-event.is-heal .death-event-fill { background: #4ADE80; }
.death-event-amount { font-size: 11px; text-align: right; }
.death-event.is-dmg .death-event-amount { color: #F87171; }
.death-event.is-heal .death-event-amount { color: #4ADE80; }