:root {
  --bg: #07070b;
  --bg-elev: #10121b;
  --border: #1f2230;
  --border-soft: #14172180;
  --fg: #e6e8ee;
  --fg-dim: #a3a7b4;
  --fg-mute: #6b6f7f;
  --fg-faint: #3f4250;

  --accent: #c98bff;
  --accent-2: #7cc4ff;
  --green: #5ee3a5;
  --amber: #ffb86b;
  --red:   #ff6b85;
  --boss:  #ff8847;

  --mono: ui-monospace, "JetBrains Mono", "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;
  --sans: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", Inter, system-ui, sans-serif;

  --radius: 12px;
  --radius-sm: 8px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { color-scheme: dark; }
body {
  font-family: var(--sans);
  background:
    radial-gradient(1200px 700px at 15% -10%, #2a1a4014 0%, transparent 55%),
    radial-gradient(900px 600px at 110% 110%, #1a1f3a14 0%, transparent 55%),
    var(--bg);
  color: var(--fg);
  min-height: 100vh;
  font-size: 13.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--accent); color: #0a0a12; }

#app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 28px 32px 48px;
}

/* ---------- top bar ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  padding: 4px 0 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid var(--border-soft);
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  width: 22px; height: 22px;
  background: conic-gradient(from 220deg at 50% 60%, var(--accent), var(--accent-2), var(--accent));
  clip-path: polygon(50% 3%, 95% 27%, 95% 73%, 50% 97%, 5% 73%, 5% 27%);
  filter: drop-shadow(0 2px 8px rgba(201, 139, 255, 0.35));
}
.wordmark {
  font-family: var(--mono);
  font-weight: 700; font-size: 17px; letter-spacing: 0.02em;
  color: var(--fg);
}
.tag {
  font-family: var(--mono);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-mute);
  border-left: 1px solid var(--border);
  padding-left: 12px; margin-left: 4px;
}

.crumbs {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  color: var(--fg-mute);
}
.crumbs a {
  color: var(--accent-2); text-decoration: none; cursor: pointer;
  transition: color 150ms ease;
}
.crumbs a:hover { color: var(--accent); text-decoration: underline; }
.crumbs .sep { color: var(--fg-faint); }
.crumbs .here { color: var(--fg-dim); }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.util-link {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--fg-mute); text-decoration: none; white-space: nowrap;
  padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px;
  transition: color 150ms ease, border-color 150ms ease;
}
.util-link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- cooldown whitelist reference page ---------- */
.cd-head { margin-bottom: 22px; }
.cd-whitelist { display: block; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--border-soft); }
.stats-refresh {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em;
  margin-left: 10px; padding: 2px 9px; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--fg-mute);
  border: 1px solid var(--border); vertical-align: middle;
}
.stats-refresh:hover { color: var(--accent); border-color: var(--accent); }
.cd-title { font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--fg); margin: 0 0 6px; }
.cd-sub { font-family: var(--mono); font-size: 11.5px; color: var(--fg-mute); }
.cd-sub b { color: var(--fg-dim); }
.cd-legend { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.cd-class { margin-bottom: 22px; }
.cd-class-name {
  font-family: var(--mono); font-size: 14px; font-weight: 700;
  color: var(--class-color, var(--fg));
  margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid var(--border-soft);
}
.cd-class-note { color: var(--fg-mute); font-weight: 400; font-size: 12px; }
.cd-group { margin: 0 0 12px; }
.cd-group-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.cd-group-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--fg-dim); text-transform: uppercase; }
.cd-count { font-family: var(--mono); font-size: 10px; color: var(--fg-faint); }
.cd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim);
  padding: 3px 8px; border-radius: 5px;
  background: #14171f; border: 1px solid var(--border);
  border-left-width: 3px;
}
.cd-chip.legend { color: var(--fg-mute); }
.cd-id { font-size: 9.5px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }
/* category accents (left border + id-hint), one source = server category slug */
.cd-raid       { border-left-color: var(--green); }
.cd-external   { border-left-color: var(--accent-2); }
.cd-personal   { border-left-color: var(--amber); }
.cd-lust       { border-left-color: var(--accent); }
.cd-consumable { border-left-color: var(--fg-mute); }
/* role tags reuse the role-icon palette */
.role-tag {
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px; border: 1px solid var(--border);
}
.role-tag.healer { color: var(--green); }
.role-tag.tank   { color: var(--accent-2); }
.role-tag.dps    { color: var(--red); }

/* ---------- section title ---------- */
.section-title {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-dim); font-weight: 600;
}
.section-title .bar {
  width: 4px; height: 16px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 2px;
}

/* ---------- file picker ---------- */
.log-list { display: flex; flex-direction: column; gap: 8px; }
.log-row {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left;
  background: linear-gradient(180deg, #14172380 0%, #0d0f17 100%);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  color: var(--fg); cursor: pointer; font-family: inherit;
  transition: border-color 160ms ease, transform 120ms ease, background 160ms ease;
}
.log-row:hover {
  border-color: rgba(201, 139, 255, 0.45);
  background: linear-gradient(180deg, #1a1d2e 0%, #0d0f17 100%);
}
.log-row:active { transform: translateY(1px); }
.log-icon {
  width: 30px; height: 30px; flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: rgba(201, 139, 255, 0.10);
  border: 1px solid rgba(201, 139, 255, 0.22);
  position: relative;
}
.log-icon::after {
  content: ""; position: absolute; inset: 8px 7px;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0/100% 2px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 0 5px/70% 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 10px/85% 2px no-repeat;
  opacity: 0.55;
}
.log-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.log-name {
  font-family: var(--mono); font-size: 13.5px; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.log-sub { font-size: 11.5px; color: var(--fg-mute); }
.log-size {
  font-family: var(--mono); font-size: 12px;
  color: var(--fg-dim); font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.log-chev { color: var(--fg-faint); font-size: 20px; }
.log-row:hover .log-chev { color: var(--accent); }

/* ---------- log summary banner ---------- */
.log-summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 24px;
}
.log-summary .ls-head { display: flex; flex-direction: column; gap: 2px; }
.log-summary .ls-zone {
  font-family: var(--mono); font-size: 16px; font-weight: 700;
  color: var(--fg); letter-spacing: 0.01em;
}
.log-summary .ls-time {
  font-family: var(--mono); font-size: 11px; color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}
.log-summary .ls-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.pill {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em;
  padding: 4px 9px; border-radius: 6px;
  background: #1a1d29; color: var(--fg-dim);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.pill b { color: var(--fg); font-weight: 600; }

/* M+ visibility toggle in the log-summary header. Rendered exactly like a data
   pill but with an accent-tinted border so it reads as interactive. */
.mplus-toggle {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em;
  padding: 4px 9px; border-radius: 6px; cursor: pointer;
  background: #1a1d29; color: var(--fg-dim);
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  white-space: nowrap;
}
.mplus-toggle:hover { color: var(--fg); border-color: var(--accent); }
.mplus-toggle[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* ---------- run group ---------- */
.run { margin-bottom: 26px; }
.run-head {
  display: flex; align-items: center; gap: 12px;
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 2px;
}
.run-key {
  font-family: var(--mono); font-weight: 700; font-size: 13px;
  color: #0a0a12;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  padding: 3px 9px; border-radius: 6px;
  letter-spacing: 0.02em;
}
.run-title {
  font-family: var(--mono); font-size: 13px; color: var(--fg); font-weight: 600;
}
.run-affixes { font-size: 11px; color: var(--fg-mute); font-family: var(--mono); }
.run-result {
  margin-left: auto;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; font-weight: 600;
}
.run-result.timed   { color: var(--green); }
.run-result.depleted { color: var(--amber); }
.run-time {
  font-family: var(--mono); font-size: 12px; color: var(--fg-dim);
  font-variant-numeric: tabular-nums;
}

/* ---------- encounter table ---------- */
.enc-table {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 10px;
}
.enc-row {
  display: grid;
  grid-template-columns: 38px 14px 1fr auto auto auto;
  align-items: center;
  gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--border-soft);
}
.enc-row:last-child { border-bottom: 0; }
.enc-row.head {
  background: #0c0e17;
  border-bottom: 1px solid var(--border);
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-mute); font-weight: 600;
}
.enc-row.head .enc-result-dot { visibility: hidden; }
.enc-row:not(.head):hover { background: rgba(255,255,255,0.02); }

.enc-idx {
  font-family: var(--mono); font-size: 12px; color: var(--fg-mute);
  font-variant-numeric: tabular-nums; text-align: right;
}
.enc-result-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--fg-faint);
}
.enc-result-dot.kill { background: var(--green); box-shadow: 0 0 6px rgba(94,227,165,0.5); }
.enc-result-dot.wipe { background: var(--red);   box-shadow: 0 0 6px rgba(255,107,133,0.5); }
.enc-name {
  font-family: var(--mono); font-size: 13.5px; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.enc-row.head .enc-name,
.enc-row.head .enc-idx { color: var(--fg-mute); font-family: var(--mono); font-size: 10px; }
.enc-diff {
  font-family: var(--mono); font-size: 11px; color: var(--fg-mute);
  white-space: nowrap;
}
.enc-dur {
  font-family: var(--mono); font-size: 13px; color: var(--fg-dim);
  font-variant-numeric: tabular-nums; text-align: right; min-width: 64px;
}
.enc-start {
  font-family: var(--mono); font-size: 12px; color: var(--fg-mute);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}

/* ---------- raid / multi-attempt zone group ---------- */
.zone { margin-bottom: 26px; }
.zone-head {
  display: flex; align-items: center; gap: 12px;
  padding: 0 4px 10px;
  border-bottom: 1px solid var(--border-soft);
}
.zone-key {
  width: 20px; height: 20px; flex-shrink: 0;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--amber), #ff7a6b);
  box-shadow: 0 2px 8px rgba(255, 184, 107, 0.3);
  position: relative;
}
.zone-key::after {
  content: ""; position: absolute; inset: 5px;
  border-radius: 2px;
  background: var(--bg-elev);
}
.zone-title { font-family: var(--mono); font-size: 13px; color: var(--fg); font-weight: 600; }
.zone-diff {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600;
  color: var(--amber);
  background: rgba(255, 184, 107, 0.10);
  border: 1px solid rgba(255, 184, 107, 0.25);
  padding: 2px 7px; border-radius: 5px;
}
.zone-meta {
  margin-left: auto;
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-mute);
  font-variant-numeric: tabular-nums;
}

.boss-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.boss {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.boss-head {
  display: flex; align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer;
  color: var(--fg); font-family: inherit;
  padding: 12px 16px;
  transition: background 120ms ease;
}
.boss-head:hover { background: rgba(255, 255, 255, 0.02); }
.boss-result-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--fg-faint); flex-shrink: 0;
}
.boss-result-dot.kill { background: var(--green); box-shadow: 0 0 6px rgba(94, 227, 165, 0.5); }
.boss-result-dot.wipe { background: var(--red);   box-shadow: 0 0 6px rgba(255, 107, 133, 0.5); }
.boss-name {
  font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.boss-summary {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em;
  white-space: nowrap;
}
.boss-summary.killed { color: var(--green); }
.boss-summary.wiping { color: var(--amber); }
.boss-bestlabel {
  margin-left: auto; flex-shrink: 0;
  font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-faint); font-family: var(--mono);
}
.boss-best {
  font-family: var(--mono); font-size: 13px; color: var(--fg-dim);
  font-variant-numeric: tabular-nums; min-width: 52px; text-align: right; flex-shrink: 0;
}
/* The boss row now navigates to its detail page — show a nav chevron. */
.boss-head::after { content: "›"; color: var(--fg-faint); font-size: 16px; flex-shrink: 0; }
.boss-head:hover::after { color: var(--fg-dim); }

/* ---------- boss detail page (cross-pull) ---------- */
.bd-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.bd-title { display: flex; align-items: center; gap: 10px; }
.bd-result-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fg-faint); flex-shrink: 0; }
.bd-result-dot.kill { background: var(--green); box-shadow: 0 0 6px rgba(94, 227, 165, 0.5); }
.bd-result-dot.wipe { background: var(--amber); box-shadow: 0 0 6px rgba(255, 107, 133, 0.5); }
.bd-name { font-family: var(--mono); font-size: 20px; font-weight: 700; color: var(--fg); margin: 0; }
.bd-diff { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); }
.bd-zone { width: 100%; font-family: var(--mono); font-size: 12px; color: var(--fg-mute); }
.bd-stats {
  display: flex; flex-wrap: wrap; gap: 14px 28px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 18px; margin: 16px 0 24px;
}
.bd-stat { display: flex; flex-direction: column; gap: 3px; }
.bd-stat-val { font-family: var(--mono); font-size: 17px; font-weight: 700; color: var(--fg); font-variant-numeric: tabular-nums; }
.bd-stat-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); }
/* Attempts on the detail page reuse the .attempt-wrap rows; give them a frame. */
.bd-attempt-list { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.section-note { font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--fg-mute); letter-spacing: 0; }

/* ---------- cooldown usage timeline ---------- */
.cdt {
  position: relative; user-select: none;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-elev); padding: 4px 14px 12px; margin-bottom: 24px;
}
.cdt-hint {
  font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint);
  text-align: right; padding: 2px 0 4px;
}
.cdt-row { display: grid; grid-template-columns: 168px 1fr; align-items: center; gap: 12px; height: 28px; }
.cdt-axis { height: 56px; align-items: stretch; }
/* hover crosshair + live time readout, spanning the whole timeline */
.cdt-cursor { position: absolute; top: 20px; bottom: 8px; width: 1px; background: rgba(255, 255, 255, 0.32); pointer-events: none; z-index: 5; }
.cdt-cursor-time {
  position: absolute; top: -16px; left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: 9.5px; color: var(--fg);
  background: var(--bg); border: 1px solid var(--border); border-radius: 3px;
  padding: 1px 5px; white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* box-zoom selection rectangle while dragging a track */
.cdt-selection {
  position: absolute; top: 20px; bottom: 8px;
  background: rgba(124, 196, 255, 0.14);
  border-left: 1px solid rgba(124, 196, 255, 0.6);
  border-right: 1px solid rgba(124, 196, 255, 0.6);
  pointer-events: none; z-index: 4;
}
.cdt-axis-track { position: relative; height: 100%; border-bottom: 1px solid var(--border); }
/* full-height tick: label on top, a thin guide line dropping to the baseline */
.cdt-tick {
  position: absolute; top: 0; bottom: 0; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--mono); font-size: 10px; color: var(--fg-mute);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.cdt-tick::after { content: ""; width: 1px; flex: 1; margin-top: 3px; background: var(--border); }
/* raid-health area tape (5x a standard player track) */
.cdt-health { height: 96px; }
.cdt-hlabel { align-items: center; font-family: var(--mono); font-size: 10px; color: var(--fg-dim); }
.cdt-hval { margin-left: 6px; color: var(--green); font-variant-numeric: tabular-nums; }
.cdt-hpulls { color: var(--fg-mute); }
.cdt-htrack {
  position: relative; height: 90px;
  background: #0a0c12; border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
}
.cdt-hsvg { display: block; width: 100%; height: 100%; }
.cdt-hgrid { stroke: var(--border-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cdt-harea { fill: rgba(94, 227, 165, 0.16); stroke: none; }
.cdt-hline { fill: none; stroke: var(--green); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.cdt-rolehead {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fg-mute); margin: 10px 0 3px; padding-bottom: 3px;
  border-bottom: 1px solid var(--border-soft);
}
.cdt-rowwrap { border-bottom: 1px solid var(--border-soft); }
.cdt-rowwrap:last-child { border-bottom: 0; }
.cdt-label { display: flex; align-items: baseline; gap: 7px; min-width: 0; cursor: pointer; }
.cdt-label .player-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdt-spec { font-family: var(--mono); font-size: 9.5px; color: var(--fg-mute); white-space: nowrap; }
.cdt-count {
  margin-left: auto; flex-shrink: 0;
  font-family: var(--mono); font-size: 10px; color: var(--fg-faint);
  font-variant-numeric: tabular-nums;
}
.cdt-track {
  position: relative; height: 18px; cursor: pointer;
  background: #0c0e15; border: 1px solid var(--border); border-radius: 3px; overflow: hidden;
}
/* Idle players keep their class color (identity) — the empty track and 0 count
   are the "nothing used" signal. */
.cdt-row.idle .cdt-track { opacity: 0.5; }
.cdt-mark {
  position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px;
  background: rgba(124, 196, 255, 0.6); border-radius: 1px;
  mix-blend-mode: screen; /* overlapping uses brighten = density heat */
}
.cdt-mark:hover { background: #fff; }
/* expand: one mini-timeline per ability (ticks align with the summary track) */
.cdt-detail { display: none; padding: 5px 0 12px; }
.cdt-rowwrap.open .cdt-detail { display: block; }
.cdt-rowwrap.open .cdt-track { box-shadow: 0 0 0 1px var(--accent) inset; }
.cdt-arow { display: grid; grid-template-columns: 168px 1fr; gap: 12px; align-items: center; height: 20px; cursor: pointer; }
.cdt-awrap.open > .cdt-arow .cdt-atrack { box-shadow: 0 0 0 1px var(--accent-2) inset; }
.cdt-alabel {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  margin-left: 10px; padding-left: 8px; border-left: 3px solid var(--border);
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-dim);
  white-space: nowrap; overflow: hidden;
}
/* the name ellipsizes so the use-count is never pushed out of view */
.cdt-aname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdt-alabel.cd-raid       { border-left-color: var(--green); }
.cdt-alabel.cd-external   { border-left-color: var(--accent-2); }
.cdt-alabel.cd-personal   { border-left-color: var(--amber); }
.cdt-alabel.cd-lust       { border-left-color: var(--accent); }
.cdt-alabel.cd-consumable { border-left-color: var(--fg-mute); }
.cdt-acount { margin-left: auto; flex-shrink: 0; font-size: 9px; color: var(--fg-faint); font-variant-numeric: tabular-nums; padding-left: 6px; }
.cdt-atrack { position: relative; height: 12px; background: #0c0e15; border: 1px solid var(--border); border-radius: 3px; overflow: hidden; }
.cdt-atick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; }
.cdt-atick:hover { background: #fff !important; }
.cdt-atick.cd-raid,       .cdt-ptick.cd-raid       { background: var(--green); }
.cdt-atick.cd-external,   .cdt-ptick.cd-external   { background: var(--accent-2); }
.cdt-atick.cd-personal,   .cdt-ptick.cd-personal   { background: var(--amber); }
.cdt-atick.cd-lust,       .cdt-ptick.cd-lust       { background: var(--accent); }
.cdt-atick.cd-consumable, .cdt-ptick.cd-consumable { background: var(--fg-mute); }
.cdt-empty { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); padding: 4px 0; }
/* per-player death tape (in a player's expanded view) */
.cdt-pdrow { display: grid; grid-template-columns: 168px 1fr; gap: 12px; align-items: center; height: 20px; }
.cdt-dlabel {
  display: flex; align-items: baseline; gap: 6px; min-width: 0;
  margin-left: 10px; padding-left: 8px; border-left: 3px solid var(--red);
  font-family: var(--mono); font-size: 10.5px; color: var(--red);
  white-space: nowrap; overflow: hidden;
}
.cdt-dptick {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--red); border-radius: 1px; cursor: pointer;
}
.cdt-dptick:hover { background: #fff; }

/* level 3: per-pull rows for one ability */
.cdt-pulls { display: none; padding: 2px 0 6px; }
.cdt-awrap.open .cdt-pulls { display: block; }
.cdt-prow { display: grid; grid-template-columns: 168px 1fr; gap: 12px; align-items: center; height: 15px; }
.cdt-prow.unused { opacity: 0.4; }
.cdt-plabel {
  margin-left: 26px; font-family: var(--mono); font-size: 9px;
  letter-spacing: 0.04em; color: var(--fg-mute); white-space: nowrap;
}
.cdt-plabel.kill { color: var(--green); }
.cdt-plabel.wipe { color: var(--amber); }
.cdt-ptrack { position: relative; height: 8px; background: #0a0c12; border: 1px solid var(--border-soft); border-radius: 2px; overflow: hidden; }
.cdt-ptick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; }
.cdt-ptick:hover { background: #fff !important; }
.cdt-pcount { padding-left: 8px; font-size: 9px; color: var(--fg-faint); font-variant-numeric: tabular-nums; }

/* death tape — each death second is a faint 1s-wide clickable band (min width
   keeps it clickable when zoomed out) with a sharp line at every exact death. */
.cdt-dname { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--red); }
.cdt-dmark, .cdt-dtick {
  position: absolute; top: 0; bottom: 0; margin-left: 0; min-width: 4px;
  background: rgba(255, 107, 133, 0.16); border-radius: 1px; cursor: pointer;
}
.cdt-dmark:hover, .cdt-dtick:hover { background: rgba(255, 107, 133, 0.34) !important; }
.cdt-dline {
  position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px;
  background: var(--red); border-radius: 1px; pointer-events: none;
}
.cdt-dhintrow { height: 15px; }
.cdt-dhint { font-family: var(--mono); font-size: 9.5px; color: var(--fg-faint); text-align: right; align-self: end; }
/* flash the death row a jump lands on */
.death-flash { animation: death-flash 1.6s ease-out; }
@keyframes death-flash {
  0% { background: rgba(124, 196, 255, 0.30); }
  100% { background: transparent; }
}

/* boss-abilities tape — enemy casts across pulls, drilling summary → ability →
   pull. A dedicated warm orange so it never reads as a death (red) or a
   personal cooldown (amber). Mirrors the cooldown/death tape structure. */
.cdt-bname { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--boss); }
.cdt-bmark {
  position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px;
  /* alpha (--a) scales with the ability's raid damage; overlaps screen-brighten */
  background: rgba(255, 136, 71, var(--a, 0.6)); border-radius: 1px;
  mix-blend-mode: screen;
}
.cdt-bmark:hover { background: #fff; }
.cdt-barow {
  display: grid; grid-template-columns: 168px 1fr; gap: 12px; align-items: center;
  height: 20px; cursor: pointer;
  /* shading: orange tint scaled by this ability's share of raid damage */
  background: linear-gradient(90deg, rgba(255, 136, 71, calc(var(--dmg, 0) * 0.2)), transparent 75%);
}
.cdt-bawrap.open > .cdt-barow .cdt-atrack { box-shadow: 0 0 0 1px var(--boss) inset; }
.cdt-blabel { border-left-color: var(--boss); color: var(--amber); }
/* total raid damage for this ability, right-aligned before the cast count */
.cdt-bdmg {
  margin-left: auto; flex-shrink: 0; padding-left: 6px;
  font-family: var(--mono); font-size: 9.5px; color: var(--boss);
  font-variant-numeric: tabular-nums;
}
.cdt-bdmg + .cdt-acount { margin-left: 0; padding-left: 6px; }
.cdt-batick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--boss); }
.cdt-batick:hover { background: #fff !important; }
.cdt-bapulls { display: none; padding: 2px 0 6px; }
.cdt-bawrap.open .cdt-bapulls { display: block; }
.cdt-bptick { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--boss); }
.cdt-bptick:hover { background: #fff !important; }

.attempts { border-top: 1px solid var(--border); }
.boss.collapsed .attempts { display: none; }
.attempt-wrap { border-bottom: 1px solid var(--border-soft); }
.attempt-wrap:last-child { border-bottom: 0; }
.attempt {
  display: grid;
  grid-template-columns: 40px 12px 48px minmax(60px, 1fr) auto auto;
  align-items: center; gap: 12px;
  width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer; font-family: inherit;
  color: var(--fg);
  padding: 7px 16px 7px 20px;
  transition: background 120ms ease;
}
.attempt:hover { background: rgba(255, 255, 255, 0.02); }
.attempt-wrap.expanded .attempt { background: rgba(201, 139, 255, 0.05); }
.att-idx {
  font-family: var(--mono); font-size: 11px; color: var(--fg-mute);
  font-variant-numeric: tabular-nums; text-align: right;
}
.att-idx::before { content: "#"; color: var(--fg-faint); }
.att-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-faint); }
.att-dot.kill { background: var(--green); }
.att-dot.wipe { background: var(--red); }
.att-result {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em;
  text-transform: uppercase; font-weight: 600; color: var(--fg-mute);
}
.att-result.kill { color: var(--green); }
.att-result.wipe { color: var(--red); }
.att-bar { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.04); overflow: hidden; }
.att-bar-fill { display: block; height: 100%; background: var(--amber); opacity: 0.5; border-radius: 3px; }
.att-bar-fill.kill { background: var(--green); opacity: 0.75; }
.att-bar-fill.wipe { background: var(--red);   opacity: 0.45; }
.att-dur {
  font-family: var(--mono); font-size: 12.5px; color: var(--fg-dim);
  font-variant-numeric: tabular-nums; text-align: right; min-width: 52px;
}
.att-time {
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-mute);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap;
}
@media (max-width: 640px) {
  .attempt { grid-template-columns: 34px 10px minmax(40px, 1fr) auto; gap: 10px; }
  .att-result, .att-time { display: none; }
  .boss-bestlabel { display: none; }
}

/* ---------- attempt drill-down: player deaths ---------- */
.attempt-detail {
  background: #0c0e17;
  border-top: 1px solid var(--border);
  padding: 12px 16px 14px 20px;
}
.death-head {
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--fg-mute); font-weight: 600; font-family: var(--mono);
  margin-bottom: 10px;
}
.death-head .death-count { color: var(--red); }
/* encounter-level wipe verdict */
.verdict {
  border-radius: var(--radius);
  border: 1px solid var(--border);
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--bg-elev);
  border-left-width: 3px;
}
.verdict.high   { border-left-color: var(--red);   background: rgba(255,107,133,0.06); }
.verdict.medium { border-left-color: var(--amber); background: rgba(255,184,107,0.06); }
.verdict.low    { border-left-color: var(--fg-mute); }
.verdict-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.verdict-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; font-weight: 700; color: var(--fg-mute);
}
.verdict-headline {
  font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--fg);
}
.verdict-conf {
  margin-left: auto;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap;
}
.verdict-conf.high   { color: var(--red);   background: rgba(255,107,133,0.12); }
.verdict-conf.medium { color: var(--amber); background: rgba(255,184,107,0.12); }
.verdict-conf.low    { color: var(--fg-mute); background: rgba(255,255,255,0.04); }
.verdict-detail {
  font-family: var(--mono); font-size: 12px; color: var(--fg-dim);
  margin-top: 5px;
}

/* heuristic #2: death clusters */
.cluster { margin-bottom: 12px; }
.cluster:last-child { margin-bottom: 0; }
.cluster-head {
  display: flex; align-items: baseline; gap: 10px;
  padding: 6px 10px; border-radius: var(--radius-sm);
  margin-bottom: 4px;
}
.cluster.group > .cluster-head {
  background: rgba(255, 107, 133, 0.07);
  border-left: 2px solid var(--red);
}
.cluster.isolated > .cluster-head { padding: 4px 10px; opacity: 0.7; }
.cluster-badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
  padding: 2px 7px; border-radius: 5px; white-space: nowrap; flex-shrink: 0;
}
.cluster-badge.group { color: var(--red); background: rgba(255,107,133,0.12); border: 1px solid rgba(255,107,133,0.35); }
.cluster-badge.isolated { color: var(--fg-mute); background: rgba(255,255,255,0.04); border: 1px solid var(--border); }
.cluster-summary { font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim); }
.cluster.group .cluster-summary { color: var(--fg); }
.cluster .death-list { padding-left: 10px; }

.death-list { display: flex; flex-direction: column; gap: 2px; }
.death {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: baseline; gap: 14px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border-soft);
}
.death:last-child { border-bottom: 0; }
.death-when { display: flex; flex-direction: column; gap: 4px; }
.death-time {
  font-family: var(--mono); font-size: 12px; color: var(--fg-mute);
  font-variant-numeric: tabular-nums; text-align: right;
}
/* subtle fight-progress minimap under the timestamp: a faint full-width track
   with a small red marker at the death's position in the pull */
.death-mini {
  position: relative; height: 3px; border-radius: 2px;
  background: var(--border); overflow: hidden;
}
.death-mini-dot {
  position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px;
  background: var(--red); border-radius: 2px;
}
.death-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.death-line1 { display: flex; align-items: center; gap: 8px; }
.player-name { font-family: var(--mono); font-size: 13px; color: var(--class-color, var(--fg)); font-weight: 600; }
.role-icon { display: inline-flex; width: 13px; height: 13px; flex-shrink: 0; }
.role-icon svg { width: 100%; height: 100%; }
.role-icon path { fill: currentColor; }
.role-icon.tank   { color: var(--accent-2); }
.role-icon.healer { color: var(--green); }
.role-icon.dps    { color: var(--red); }
.death-spec {
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-mute);
  letter-spacing: 0.02em;
}

/* WoW class colors as a CSS variable, reused by names and raid-frame bars.
   (Priest white nudged off pure #FFF for dark-bg legibility.) */
.cc-death-knight { --class-color: #C41E3A; }
.cc-demon-hunter { --class-color: #A330C9; }
.cc-druid        { --class-color: #FF7C0A; }
.cc-evoker       { --class-color: #33937F; }
.cc-hunter       { --class-color: #AAD372; }
.cc-mage         { --class-color: #3FC7EB; }
.cc-monk         { --class-color: #00FF98; }
.cc-paladin      { --class-color: #F48CBA; }
.cc-priest       { --class-color: #E6E8EE; }
.cc-rogue        { --class-color: #FFF468; }
.cc-shaman       { --class-color: #0070DD; }
.cc-warlock      { --class-color: #8788EE; }
.cc-warrior      { --class-color: #C69B6D; }

/* ---------- raid-frame snapshot at death ---------- */
.death { cursor: pointer; }
/* Enclose an expanded row in a subtle card so its nested raid frame / detail
   reads as belonging to that row. Collapsed rows are untouched (clean list). */
.death-wrap.rf-shown {
  margin: 8px 0;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  background: #0a0c14;
}
.death-wrap.rf-shown > .death {
  border-bottom: 0;
  padding: 8px 14px;
  background: rgba(124,196,255,0.05);
}
.rf-panel {
  background: #0a0c14;
  border-top: 1px solid var(--border-soft);
  padding: 12px 14px 14px;
}
.rf-head {
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim);
  margin-bottom: 10px;
}
.rf-head b { color: var(--fg); }
.rf-head .rf-alive { color: var(--green); }
.rf-head .rf-dead { color: var(--red); }
.raidframe { display: flex; gap: 8px; flex-wrap: wrap; }
.rf-col { display: flex; flex-direction: column; gap: 4px; }
.rf-cell {
  position: relative;
  width: 132px; height: 28px;
  border-radius: 4px; overflow: hidden;
  background: #14171f;
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 7px;
}
.rf-fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: var(--class-color, var(--green));
  opacity: 0.5;
}
/* healers get a thin mana strip along the bottom; lift the health fill off it */
.rf-cell.has-mana .rf-fill { bottom: 4px; }
.rf-mana {
  position: absolute; left: 0; bottom: 0; height: 3px; width: 0;
  background: #2e6fd6;
}
.rf-left {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 4px; min-width: 0;
}
.rf-cell .role-icon {
  width: 11px; height: 11px; flex-shrink: 0;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.8));
}
.rf-cell .rf-name, .rf-cell .rf-hp {
  position: relative; z-index: 1;
  font-family: var(--mono); font-size: 11px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rf-cell .rf-name { color: #fff; font-weight: 600; }
.rf-cell .rf-hp { color: rgba(255,255,255,0.75); flex-shrink: 0; padding-left: 4px; font-variant-numeric: tabular-nums; }
.rf-cell.dead { border-color: rgba(255,107,133,0.3); }
.rf-cell.dead .rf-name { color: var(--fg-mute); text-decoration: line-through; }
.rf-cell.dead .rf-hp { color: var(--red); }
.rf-cell.unknown .rf-name { color: var(--fg-mute); }
.rf-cell.subject { outline: 2px solid var(--accent-2); outline-offset: 0; }
.rf-cell.low:not(.dead) .rf-fill { opacity: 0.7; }
.rf-cell { cursor: pointer; }
.rf-cell:hover { border-color: var(--fg-mute); }
.rf-cell.rf-selected { outline: 2px solid var(--accent); outline-offset: 0; }

/* aura (buff/debuff) panel */
.aura-panel { margin-top: 12px; }
.aura-hint { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); }
.aura-head { font-family: var(--mono); font-size: 11.5px; color: var(--fg-dim); margin-bottom: 8px; }
.aura-head b { color: var(--fg); }
.aura-groups { display: flex; gap: 18px; flex-wrap: wrap; }
.aura-col { flex: 1; min-width: 240px; }
.aura-col-title {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; margin-bottom: 6px;
}
.aura-col-title.debuff { color: var(--red); }
.aura-col-title.buff { color: var(--green); }
.aura-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.aura-empty { font-family: var(--mono); font-size: 11px; color: var(--fg-faint); }
.aura-chip {
  font-family: var(--mono); font-size: 11px;
  padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--border); background: #14171f; color: var(--fg-dim);
  white-space: nowrap;
}
.aura-chip.debuff { color: #ff9bac; border-color: rgba(255,107,133,0.3); background: rgba(255,107,133,0.07); }
.aura-chip.buff { color: #9be3c0; border-color: rgba(94,227,165,0.25); background: rgba(94,227,165,0.06); }
/* raid-wide buffs (everyone has them) de-emphasized so targeted externals pop */
.aura-chip.raidwide { color: var(--fg-mute); background: #14171f; border-color: var(--border); opacity: 0.7; }

/* incoming friendly casts on the player */
/* Incoming (left) + outgoing (right) casts, side by side under the auras.
   Wraps to a stack when the panel is too narrow. */
.io-cols {
  display: flex; flex-wrap: wrap; gap: 18px 24px;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-soft);
}
.io-cols > .incoming, .io-cols > .outgoing {
  flex: 1 1 240px; min-width: 0; margin-top: 0; padding-top: 0; border-top: 0;
}
.incoming { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.inc-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; color: var(--accent-2);
  margin-bottom: 6px;
}
.inc-list { display: flex; flex-direction: column; gap: 2px; }
.inc-row {
  display: grid; grid-template-columns: 52px 1fr auto; align-items: baseline; gap: 12px;
  padding: 3px 0; font-family: var(--mono); font-size: 12px;
}
.inc-time { color: var(--fg-mute); font-variant-numeric: tabular-nums; text-align: right; }
.inc-spell { color: var(--green); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inc-src { color: var(--fg-dim); }
.inc-src.self { color: var(--fg-faint); font-style: italic; }
.inc-arrow { color: var(--fg-faint); }
/* Heal amount is a secondary annotation — dim green so it stays readable but
   reads as subordinate to the brighter green spell name. */
.inc-heal { color: var(--green); opacity: 0.6; font-size: 11px; font-variant-numeric: tabular-nums; margin-left: 2px; }
/* Outgoing column — mirrors incoming, amber-accented so the two read distinctly
   (incoming = blue head / green heals; outgoing = the player's own actions). */
.out-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; color: var(--amber);
  margin-bottom: 6px;
}
.out-list { display: flex; flex-direction: column; gap: 2px; }
.out-row {
  display: grid; grid-template-columns: 52px 1fr; align-items: baseline; gap: 12px;
  padding: 3px 0; font-family: var(--mono); font-size: 12px;
}
.out-time { color: var(--fg-mute); font-variant-numeric: tabular-nums; text-align: right; }
.out-cast { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.out-spell { color: var(--amber); }
.out-arrow { color: var(--fg-faint); }
.out-target { color: var(--fg-dim); }
.out-target.self { color: var(--fg-faint); font-style: italic; }

/* HP area plot — the dying player's last-10s HP, event annotations + a hover
   cursor riding the line. Full width, sits above the casts columns. */
.hpp { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.hpp-head {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; color: var(--fg-dim); margin-bottom: 8px;
}
.hpp-plot {
  position: relative; height: 120px; cursor: crosshair;
  border: 1px solid var(--border); border-radius: 4px;
  /* overflow visible so edge event-labels aren't clipped by the plot box */
}
/* clips only the area/line to the rounded corners; labels (outside it) overflow */
.hpp-clip {
  position: absolute; inset: 0; overflow: hidden; border-radius: 4px;
  background: #0a0c12;
}
.hpp-svg { display: block; width: 100%; height: 100%; }
.hpp-grid { stroke: var(--border-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.hpp-grid.mid { stroke: var(--border); }
.hpp-area { fill: rgba(124, 196, 255, 0.12); stroke: none; }
.hpp-line { fill: none; stroke: var(--accent-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.hpp-marks { position: absolute; inset: 0; pointer-events: none; }
.hpp-mark {
  position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  border: 1px solid #0a0c12; pointer-events: auto; cursor: help;
}
.hpp-mark.dmg { background: var(--red); }
.hpp-mark.heal { background: var(--green); }
.hpp-mark.big { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; box-shadow: 0 0 0 2px rgba(255, 107, 133, 0.25); }
.hpp-label {
  position: absolute; left: 50%; bottom: 9px; transform: translateX(-50%);
  white-space: nowrap; font-family: var(--mono); font-size: 9.5px; color: var(--red);
  background: rgba(10, 12, 18, 0.85); padding: 0 3px; border-radius: 2px; pointer-events: none;
}
/* edge markers: anchor the label's near side to the marker so it extends inward */
.hpp-mark.edge-r .hpp-label { left: auto; right: 50%; transform: none; }
.hpp-mark.edge-l .hpp-label { left: 50%; right: auto; transform: none; }
.hpp-cursor { position: absolute; inset: 0; pointer-events: none; }
.hpp-cursor-line { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(230, 232, 238, 0.4); }
.hpp-cursor-dot {
  position: absolute; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 2px var(--accent-2);
}
.hpp-cursor-read {
  position: absolute; top: 4px; transform: translateX(-50%);
  font-family: var(--mono); font-size: 10.5px; color: var(--fg); white-space: nowrap;
  background: rgba(10, 12, 18, 0.9); border: 1px solid var(--border); border-radius: 3px;
  padding: 1px 6px; font-variant-numeric: tabular-nums;
}
.hpp-cursor-read.flip { transform: translateX(-100%); }
.hpp-cursor-read.flip-l { transform: translateX(0); }

/* raid position minimap — top-down dot plot of the raid at the death instant */
.pp { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border-soft); }
.pp-head {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 600; color: var(--fg-dim); margin-bottom: 8px;
}
.pp-legend { font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 9.5px; color: var(--fg-mute); }
.pp-key { margin-right: 8px; }
.pp-key.sel { color: #fff; }
.pp-key.heal { color: var(--green); }
.pp-wrap { position: relative; display: inline-block; max-width: 100%; }
.pp-svg {
  display: block; width: 220px; height: 220px; max-width: 100%;
  background: #0a0c12; border: 1px solid var(--border); border-radius: 4px;
}
.pp-ring {
  fill: rgba(124, 196, 255, 0.05); stroke: rgba(124, 196, 255, 0.32); stroke-width: 0.6;
}
.pp-dot.other { fill: var(--fg-mute); }
/* on top (paint order) but semi-transparent so overlapped dots stay visible */
.pp-dot.heal { fill: var(--green); fill-opacity: 0.8; }
.pp-dot.sel { fill: #fff; fill-opacity: 0.85; stroke: var(--accent-2); stroke-width: 0.5; }
/* players beyond the 40yd ring are subtly de-emphasised */
.pp-dot.out { opacity: 0.4; }
.pp-x line { stroke: var(--red); stroke-width: 0.9; }
.pp-tip {
  position: absolute; transform: translate(-50%, calc(-100% - 9px));
  pointer-events: none; white-space: nowrap; z-index: 5;
  font-family: var(--mono); font-size: 10.5px; color: var(--fg);
  background: rgba(10, 12, 18, 0.95); border: 1px solid var(--border);
  border-radius: 3px; padding: 2px 6px;
}
.cause-badge {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; font-weight: 700;
  padding: 2px 7px; border-radius: 5px;
  border: 1px solid transparent;
}
.cause-badge.big_hit  { color: var(--red);   background: rgba(255,107,133,0.10); border-color: rgba(255,107,133,0.3); }
.cause-badge.burst    { color: var(--amber); background: rgba(255,184,107,0.10); border-color: rgba(255,184,107,0.3); }
.cause-badge.sustained{ color: #d9b3ff; background: rgba(201,139,255,0.10); border-color: rgba(201,139,255,0.3); }
.cause-badge.attrition{ color: var(--accent-2); background: rgba(124,196,255,0.10); border-color: rgba(124,196,255,0.3); }
.cause-badge.unknown  { color: var(--fg-mute); background: rgba(255,255,255,0.04); border-color: var(--border); }
.death-cause { font-family: var(--mono); font-size: 12px; color: var(--fg-dim); }
.death-lead {
  font-family: var(--mono); font-size: 10.5px; color: var(--fg-faint);
  margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.death-lead b { color: var(--fg-dim); font-weight: 600; }

.att-loading, .att-empty {
  font-family: var(--mono); font-size: 11.5px; color: var(--fg-mute);
  letter-spacing: 0.04em; padding: 4px 0;
}
.att-empty { color: var(--fg-faint); }

/* ---------- states ---------- */
.empty, .loading {
  padding: 40px 16px; text-align: center;
  color: var(--fg-faint); font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--mono);
}
.error {
  padding: 18px; border-radius: var(--radius);
  border: 1px solid rgba(255,107,133,0.4);
  background: rgba(255,107,133,0.06);
  color: var(--red); font-family: var(--mono); font-size: 12.5px;
}
.spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--fg-faint); border-top-color: var(--accent);
  border-radius: 50%; animation: spin 700ms linear infinite;
  vertical-align: -2px; margin-right: 8px;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  #app { padding: 20px 16px 40px; }
  .enc-row { grid-template-columns: 30px 12px 1fr auto; gap: 10px; }
  .enc-diff, .enc-start { display: none; }
}