:root {
  color-scheme: dark;
  --bg: #101312;
  --panel: #151917;
  --panel-soft: #1a1f1c;
  --panel-strong: #202721;
  --ink: #eef4ef;
  --muted: #9aa69f;
  --line: #252d28;
  --accent: #d64a43;
  --accent-strong: #ff6b61;
  --warn: #e0a84c;
  --bad: #ef7777;
  --good: #71d28a;
  --team-blue: #5b8cff;
  --team-blue-soft: rgba(91, 140, 255, 0.13);
  --team-red: #ff706d;
  --team-red-soft: rgba(255, 112, 109, 0.13);
  --team-map: #f4b942;
  --team-map-soft: rgba(244, 185, 66, 0.14);
  --shadow: 0 16px 38px rgba(0, 0, 0, 0.22);
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}

button,
input {
  font: inherit;
}

a {
  color: inherit;
}

button {
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: var(--accent);
  color: #160706;
  cursor: pointer;
  font-weight: 650;
  padding: 10px 14px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.shell {
  margin: 0 auto;
  max-width: 1360px;
  padding: 24px;
}

.topbar {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.topbar-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.brand {
  color: var(--accent-strong);
  font-size: 22px;
  font-weight: 760;
}

.brand-link,
.nav-link,
.button-link {
  text-decoration: none;
}

.nav-link {
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  font-weight: 650;
  padding: 8px 10px;
}

.button-link {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  display: inline-flex;
  font-weight: 650;
  padding: 10px 14px;
}

.catalog-hero {
  align-items: end;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 1fr) auto;
  margin-bottom: 14px;
  padding: 22px;
}

.catalog-hero h1 {
  font-size: 32px;
  letter-spacing: 0;
  line-height: 1.1;
  margin: 0 0 8px;
}

.catalog-hero p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
  max-width: 760px;
}

.catalog-hero-stat {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 170px;
  padding: 14px;
  text-align: right;
}

.catalog-hero-stat strong {
  color: #ffe96a;
  display: block;
  font-size: 30px;
  line-height: 1;
}

.catalog-hero-stat span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.catalog-filters {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(220px, 1.5fr) repeat(3, minmax(160px, 1fr));
  margin-bottom: 12px;
  padding: 14px;
}

.catalog-filters label {
  display: grid;
  gap: 6px;
}

.catalog-filters span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.catalog-filters input,
.catalog-filters select {
  background: #101412;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  min-width: 0;
  padding: 10px;
}

.catalog-toolbar {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  margin: 0 0 10px;
}

.catalog-grid {
  display: grid;
  gap: 10px;
}

.catalog-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.catalog-card-link {
  align-items: center;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(260px, 1fr) auto;
  padding: 16px;
  text-decoration: none;
}

.catalog-card-link:hover,
.catalog-card-link:focus {
  background: rgba(255, 255, 255, 0.025);
}

.catalog-card h2 {
  font-size: 18px;
  letter-spacing: 0;
  margin: 6px 0;
}

.catalog-guilds {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.catalog-guild {
  background: rgba(91, 140, 255, 0.13);
  border: 1px solid rgba(91, 140, 255, 0.35);
  border-radius: 999px;
  color: #dfe7ff;
  font-size: 12px;
  font-weight: 750;
  padding: 4px 8px;
}

.catalog-card-stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(72px, auto));
  text-align: right;
}

.catalog-card-stats span {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}

.catalog-card-stats strong,
.catalog-card-stats em {
  display: block;
}

.catalog-card-stats strong {
  color: #ffe96a;
  font-size: 18px;
}

.catalog-card-stats em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
}

.muted {
  color: var(--muted);
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.stat-icon {
  align-items: center;
  background: rgba(85, 214, 199, 0.12);
  border: 1px solid rgba(85, 214, 199, 0.32);
  border-radius: 5px;
  color: var(--accent-strong);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 850;
  height: 22px;
  justify-content: center;
  line-height: 1;
  position: relative;
  width: 22px;
}

.stat-icon::before {
  content: "i";
}

.stat-icon-map::before {
  content: "M";
}

.stat-icon-players::before {
  content: "P";
}

.stat-icon-damage::before {
  background: currentColor;
  border-radius: 2px;
  box-shadow: 5px -3px 0 -1px currentColor, 9px 2px 0 -1px currentColor;
  content: "";
  height: 9px;
  width: 3px;
}

.stat-icon-healing::before {
  content: "+";
}

.stat-icon-regen::before {
  content: "R";
}

.stat-icon-degen::before {
  content: "-";
}

.stat-icon-death::before {
  border: 1.5px solid currentColor;
  border-radius: 50% 50% 42% 42%;
  content: "";
  height: 13px;
  width: 13px;
}

.stat-icon-death::after {
  background: currentColor;
  border-radius: 50%;
  box-shadow: 5px 0 0 currentColor;
  content: "";
  height: 2px;
  position: absolute;
  transform: translate(-3px, -2px);
  width: 2px;
}

.stat-icon-interrupt::before {
  content: "!";
}

.stat-icon-skills::before {
  content: "S";
}

.stat-icon-effects::before {
  content: "E";
}

.stat-icon-flag::before {
  background: currentColor;
  content: "";
  height: 14px;
  transform: translateX(-4px);
  width: 2px;
}

.stat-icon-flag::after {
  background: currentColor;
  clip-path: polygon(0 0, 100% 24%, 0 58%);
  content: "";
  height: 11px;
  position: absolute;
  transform: translate(3px, -3px);
  width: 10px;
}

.stat-icon-morale::before {
  background: currentColor;
  border-radius: 999px;
  content: "";
  height: 2px;
  transform: rotate(-24deg);
  width: 14px;
}

.stat-icon-clock::before {
  content: "T";
}

.stat-icon-health::before {
  content: "H";
}

.stat-icon-warning::before,
.stat-icon-quality::before {
  content: "?";
}

.upload {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(280px, 1fr) 340px;
  padding: 22px;
}

.upload h1 {
  font-size: 28px;
  letter-spacing: 0;
  line-height: 1.12;
  margin: 0 0 10px;
}

.upload p {
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

.dropzone {
  align-items: center;
  background: var(--panel-soft);
  border: 1px dashed #94aaa1;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
  min-height: 210px;
  padding: 18px;
  text-align: center;
}

.dropzone input {
  max-width: 100%;
}

.option-row {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.option-row input {
  height: 18px;
  width: 18px;
}

.status {
  border-radius: 6px;
  color: var(--muted);
  min-height: 24px;
}

.error {
  color: var(--bad);
  font-weight: 650;
}

.report-header {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(260px, 1fr) auto;
  margin-bottom: 18px;
  padding-bottom: 14px;
}

.report-title h1 {
  font-size: 28px;
  letter-spacing: 0;
  margin: 0 0 6px;
}

.toolbar {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.grid {
  display: grid;
  gap: 14px;
}

.metrics {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.metric,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.metric {
  padding: 14px;
}

.metric .label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.metric .value {
  font-size: 26px;
  font-weight: 780;
  margin-top: 4px;
}

.report-tabs {
  background: rgba(25, 29, 27, 0.94);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 0;
  overflow-x: visible;
  padding: 8px;
  position: sticky;
  top: 0;
  z-index: 3;
}

.tab-group {
  align-items: stretch;
  display: grid;
  flex: 1 1 auto;
  gap: 5px;
  min-width: min-content;
}

.tab-group-label {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  padding: 0 3px;
  text-transform: uppercase;
}

.tab-group-buttons {
  display: flex;
  gap: 5px;
}

.tab-button {
  align-items: center;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  display: inline-flex;
  flex: 0 0 auto;
  gap: 0;
  padding: 7px 10px;
}

.tab-button:hover,
.tab-button.active {
  background: var(--panel-soft);
  border-color: var(--line);
  color: var(--ink);
}

.tab-button.active {
  box-shadow: inset 0 -2px 0 var(--accent);
}

.tab-panel {
  margin-top: 14px;
}

.dashboard-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 14px;
}

.combat-dashboard {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.combat-column,
.combat-table-panel,
.combat-detail-card,
.player-summary-subtabs-panel {
  background: rgba(17, 20, 19, 0.78);
  border: 1px solid rgba(214, 74, 67, 0.08);
  border-radius: 6px;
  box-shadow: none;
  min-width: 0;
  overflow: hidden;
}

.combat-column {
  display: grid;
  gap: 0;
}

.combat-column-head {
  align-items: baseline;
  border-bottom: 1px solid rgba(214, 74, 67, 0.08);
  display: flex;
  justify-content: space-between;
  padding: 13px 14px;
}

.combat-column-head span {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 850;
  text-transform: uppercase;
}

.combat-column-head strong {
  color: var(--ink);
  font-size: 22px;
  font-variant-numeric: tabular-nums;
}

.combat-block {
  border-bottom: 1px solid rgba(214, 74, 67, 0.06);
  padding: 12px 14px;
}

.combat-block:last-child {
  border-bottom: 0;
}

.combat-block h3 {
  color: #dce4de;
  font-size: 13px;
  margin: 0 0 9px;
}

.combat-stat-line {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
}

.combat-stat-line span {
  min-width: 0;
}

.combat-stat-line strong,
.combat-stat-line em,
.combat-stat-line small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combat-stat-line strong {
  color: var(--ink);
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.combat-stat-line em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.combat-stat-line small {
  color: rgba(154, 166, 159, 0.72);
  font-size: 10px;
}

.combat-table-panel,
.player-summary-subtabs-panel {
  margin-top: 12px;
}

.segmented-control {
  align-items: stretch;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.segmented-control button {
  background: rgba(20, 24, 22, 0.92);
  border: 1px solid rgba(154, 166, 159, 0.16);
  border-radius: 4px;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 850;
  min-height: 28px;
  padding: 6px 10px;
  text-transform: uppercase;
}

.segmented-control button:hover,
.segmented-control button.active {
  border-color: rgba(255, 231, 105, 0.5);
  color: var(--ink);
}

.combat-table-wrap {
  max-height: none;
  overflow-x: auto;
}

.combat-filter-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}

.combat-filter-row .damage-filter-button {
  align-items: center;
  border-radius: 3px;
  column-gap: 7px;
  display: inline-flex;
  font-size: 10px;
  justify-content: space-between;
  min-height: 22px;
  min-width: 0;
  padding: 3px 7px;
}

.combat-filter-row .player-summary-filter-share {
  color: var(--accent-2);
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.combat-filter-row .damage-filter-button.active .player-summary-filter-share {
  color: var(--accent);
}

.combat-detail-card .panel-head {
  border-bottom: 1px solid rgba(214, 74, 67, 0.08);
}

.player-summary-subtabs-panel {
  padding: 8px;
}

.player-summary-view-tabs {
  justify-content: flex-start;
}

.special-stat-chip {
  border: 1px solid rgba(214, 74, 67, 0.24);
  border-radius: 4px;
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  margin: 1px 3px 1px 0;
  padding: 3px 5px;
  white-space: nowrap;
}

.skill-special-cell {
  text-align: left;
}

.combat-lines-card {
  margin-top: 0;
}

.combat-lines-head {
  background: rgba(13, 16, 15, 0.42);
  border-bottom: 1px solid rgba(214, 74, 67, 0.08);
}

.combat-lines-head h2 {
  font-size: 18px;
}

.combat-main-tabs {
  justify-content: flex-end;
}

.combat-head-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.general-stats-team-tabs {
  justify-content: flex-end;
}

.effect-uptime-scope-tabs {
  justify-content: flex-end;
}

.combat-lines-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 1040px;
  width: 100%;
}

.combat-lines-table th,
.combat-lines-table td {
  border-bottom: 1px solid rgba(214, 74, 67, 0.07);
  padding: 0;
}

.combat-lines-table th {
  background: rgba(26, 31, 28, 0.74);
  color: rgba(154, 166, 159, 0.9);
  font-size: 10px;
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
}

.combat-lines-table tbody tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.012);
}

.combat-lines-table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.035);
}

.combat-lines-table td {
  color: #e7eee8;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  padding: 7px 10px;
  white-space: nowrap;
}

.combat-lines-table td:first-child,
.combat-lines-table th:first-child {
  left: 0;
  min-width: 245px;
  position: sticky;
  text-align: left;
  z-index: 2;
}

.combat-lines-table th:first-child {
  background: rgba(26, 31, 28, 0.96);
  z-index: 3;
}

.combat-lines-table td:first-child {
  background: rgba(17, 20, 19, 0.98);
  box-shadow: 1px 0 0 rgba(214, 74, 67, 0.08);
}

.combat-lines-table td:first-child:has(.skill-token:hover),
.combat-lines-table td:first-child:has(.skill-token:focus),
.combat-lines-table td:first-child:has(.skill-token.is-open) {
  z-index: 5;
}

.combat-lines-table tfoot td {
  background: rgba(214, 74, 67, 0.075);
  border-bottom: 0;
  border-top: 1px solid rgba(214, 74, 67, 0.22);
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  padding: 7px 10px;
}

.combat-lines-table tfoot td:first-child {
  background: rgba(34, 22, 21, 0.98);
  color: var(--accent-strong);
  text-transform: uppercase;
}

.combat-lines-table tr.team-blue td:first-child {
  box-shadow: inset 2px 0 0 var(--team-blue), 1px 0 0 rgba(214, 74, 67, 0.08);
}

.combat-lines-table tr.team-red td:first-child {
  box-shadow: inset 2px 0 0 var(--team-red), 1px 0 0 rgba(214, 74, 67, 0.08);
}

.combat-player-cell {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.combat-player-cell .overview-professions {
  gap: 3px;
}

.combat-player-cell .overview-profession-icon {
  height: 22px;
  width: 22px;
}

.combat-player-cell .map-gadget-skill-token.skill-token.icon-only,
.player-tab-professions .map-gadget-skill-token.skill-token.icon-only,
.overview-professions .map-gadget-skill-token.skill-token.icon-only {
  border-color: rgba(209, 189, 126, 0.56);
  height: 30px;
  padding: 2px;
  width: 30px;
}

.combat-player-cell .map-gadget-skill-token.skill-token.icon-only .skill-token-icon,
.player-tab-professions .map-gadget-skill-token.skill-token.icon-only .skill-token-icon,
.overview-professions .map-gadget-skill-token.skill-token.icon-only .skill-token-icon {
  height: 24px;
  width: 24px;
}

.npc-combatant-badge {
  align-items: center;
  background: rgba(180, 164, 104, 0.12);
  border: 1px solid rgba(209, 189, 126, 0.44);
  border-radius: 4px;
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 10px;
  font-weight: 800;
  height: 24px;
  justify-content: center;
  letter-spacing: 0;
  line-height: 1;
  min-width: 30px;
  padding: 0 5px;
  text-transform: uppercase;
}

.npc-combatant-badge.tab {
  font-size: 9px;
  height: 20px;
  min-width: 27px;
}

.loadout-icon.profession-placeholder {
  visibility: hidden;
}

.combat-player-cell > div > strong,
.combat-player-cell > div > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combat-player-cell > div > strong {
  color: var(--ink);
  font-size: 13px;
}

.combat-player-cell > div > span {
  color: rgba(154, 166, 159, 0.72);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.combat-sort {
  border: 0;
  border-radius: 0;
  color: inherit;
  justify-content: flex-end;
  min-height: 28px;
  padding: 7px 10px;
}

.combat-sort:hover,
.combat-sort.active {
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
}

.combat-sort em {
  color: var(--accent-strong);
  font-size: 9px;
}

.team-summary {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.team-card .muted {
  font-size: 13px;
  margin-top: 6px;
}

.overview-band,
.team-matchup,
.overview-teams-grid {
  margin-top: 14px;
}

.match-summary-band,
.roster-band,
.story-band {
  background: rgba(17, 20, 19, 0.78);
  border: 1px solid rgba(214, 74, 67, 0.08);
  border-radius: 6px;
  box-shadow: none;
  min-width: 0;
  overflow: hidden;
}

.match-summary-band {
  align-items: stretch;
  display: flex;
  gap: 1px;
  padding: 0;
}

.match-summary-stat {
  align-items: center;
  background: rgba(20, 24, 22, 0.62);
  display: grid;
  flex: 1 1 0;
  gap: 3px;
  min-width: 0;
  padding: 10px 14px;
}

.match-summary-stat span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
}

.match-summary-stat strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.section-kicker {
  align-items: center;
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  gap: 7px;
  text-transform: uppercase;
}

.overview-section-head h2,
.team-match-head h2 {
  font-size: 17px;
  letter-spacing: 0;
  margin: 0;
}

.overview-metrics {
  margin-top: 14px;
}

.overview-metric {
  min-height: 106px;
}

.metric-icon-line {
  align-items: center;
  display: flex;
  gap: 8px;
}

.team-matchup {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.team-match-card,
.overview-team-panel {
  background: rgba(17, 20, 19, 0.78);
  border: 1px solid rgba(214, 74, 67, 0.08);
  border-radius: 6px;
  box-shadow: none;
  overflow: hidden;
  padding: 12px;
}

.team-match-card.team-blue,
.overview-team-panel.team-blue {
  border-color: rgba(91, 140, 255, 0.3);
}

.team-match-card.team-red,
.overview-team-panel.team-red {
  border-color: rgba(255, 112, 109, 0.3);
}

.overview-team-panel.winner {
  border-color: rgba(255, 107, 97, 0.58);
}

.overview-teams-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-team-panel {
  align-content: start;
  display: grid;
  gap: 12px;
}

.overview-team-panel .overview-roster-list {
  border-top: 1px solid rgba(214, 74, 67, 0.08);
  gap: 7px;
  padding-top: 12px;
}

.team-match-head {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.team-color-label {
  border: 1px solid currentColor;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 850;
  padding: 4px 6px;
  text-transform: uppercase;
}

.team-blue .team-color-label {
  color: var(--team-blue);
}

.team-red .team-color-label {
  color: var(--team-red);
}

.team-match-title {
  min-width: 0;
}

.team-match-title h2,
.team-match-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-match-title span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-top: 2px;
}

.team-rating {
  background: transparent;
  border: 1px solid rgba(214, 74, 67, 0.2);
  border-radius: 4px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 850;
  padding: 5px 8px;
  white-space: nowrap;
}

.team-match-badges {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.team-winner-badge {
  background: rgba(214, 74, 67, 0.14);
  border: 1px solid rgba(255, 107, 97, 0.5);
  border-radius: 4px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 850;
  padding: 5px 8px;
  text-transform: uppercase;
  white-space: nowrap;
}

.team-match-stats {
  display: grid;
  border-top: 1px solid rgba(214, 74, 67, 0.08);
  gap: 14px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 12px;
  padding-top: 11px;
}

.team-match-stats span,
.overview-player-role,
.skill-detail-metrics span {
  min-width: 0;
}

.team-match-stats span {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 4px;
  padding: 0;
}

.team-match-stats strong,
.team-match-stats em,
.overview-player-name strong,
.overview-player-name span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-match-stats strong {
  font-size: 16px;
}

.team-match-stats em,
.overview-player-role em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 750;
  text-transform: uppercase;
}

.overview-section-head {
  align-items: center;
  border-bottom: 1px solid rgba(214, 74, 67, 0.08);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 12px 14px;
}

.overview-roster-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.overview-roster-team {
  border-right: 1px solid rgba(214, 74, 67, 0.08);
  min-width: 0;
  padding: 12px;
}

.overview-roster-team:last-child {
  border-right: 0;
}

.overview-roster-team h3 {
  font-size: 14px;
  margin: 0 0 10px;
}

.overview-roster-list {
  display: grid;
  gap: 8px;
}

.overview-player {
  background: rgba(13, 16, 15, 0.66);
  border: 1px solid transparent;
  border-radius: 3px;
  display: grid;
  gap: 8px;
  padding: 8px 9px 10px;
}

.overview-player.team-blue:hover {
  border-color: rgba(91, 140, 255, 0.28);
}

.overview-player.team-red:hover {
  border-color: rgba(255, 112, 109, 0.28);
}

.overview-player-main {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.overview-player-name {
  display: grid;
  min-width: 0;
}

.overview-player-name strong,
.overview-player-name span {
  min-width: 0;
  white-space: nowrap;
}

.overview-player-name span {
  display: none;
}

.overview-player-role {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  justify-self: end;
}

.overview-player-role span {
  align-items: baseline;
  background: transparent;
  display: inline-flex;
  gap: 4px;
  min-width: 0;
  padding: 0;
}

.overview-player-role strong {
  color: var(--accent-strong);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.overview-player-role em {
  color: rgba(154, 166, 159, 0.82);
}

.overview-professions {
  align-items: center;
  display: flex;
  gap: 4px;
}

.overview-profession-icon {
  border-color: rgba(214, 74, 67, 0.24);
  height: 24px;
  width: 24px;
}

.story-strip {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  max-width: 100%;
  min-width: 0;
  padding: 14px 16px;
}

.story-event {
  background: rgba(34, 40, 36, 0.72);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 6px;
  display: grid;
  gap: 5px;
  padding: 9px;
}

.story-event.team-blue {
  border-left-color: var(--team-blue);
}

.story-event.team-red {
  border-left-color: var(--team-red);
}

.story-time {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.story-icon {
  display: inline-flex;
}

.story-event strong,
.story-event em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.story-event strong {
  font-size: 13px;
  white-space: nowrap;
}

.story-event em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  white-space: nowrap;
}

.overview-leaders {
  margin-top: 14px;
}

.team-card.team-blue,
.team-panel.team-blue {
  border-color: rgba(91, 140, 255, 0.38);
}

.team-card.team-red,
.team-panel.team-red {
  border-color: rgba(255, 112, 109, 0.38);
}

.team-badge {
  align-items: center;
  color: var(--ink);
  display: inline-flex;
  gap: 7px;
  min-width: 0;
  vertical-align: middle;
}

.team-badge em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 650;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-dot {
  border-radius: 999px;
  display: inline-block;
  flex: 0 0 auto;
  height: 9px;
  width: 9px;
}

.team-badge.team-blue .team-dot {
  background: var(--team-blue);
  box-shadow: 0 0 0 3px var(--team-blue-soft);
}

.team-badge.team-red .team-dot {
  background: var(--team-red);
  box-shadow: 0 0 0 3px var(--team-red-soft);
}

.team-badge.team-map .team-dot {
  background: var(--team-map);
  box-shadow: 0 0 0 3px var(--team-map-soft);
}

.team-badge.team-blue {
  color: #b8caff;
}

.team-badge.team-red {
  color: #ffc0bd;
}

.team-badge.team-map {
  color: #f7d58b;
}

.panel {
  margin-top: 14px;
  overflow: hidden;
}

.panel-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.panel h2 {
  font-size: 16px;
  margin: 0;
}

.table-wrap {
  overflow-x: auto;
}

.condition-uptime-table {
  min-width: 900px;
}

.effect-tabs-panel {
  margin-bottom: 0;
}

.condition-tabs-panel {
  margin-bottom: 0;
  margin-top: 10px;
}

.condition-player-tabs-panel {
  margin-bottom: 0;
  margin-top: 10px;
}

.effect-view-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
}

.condition-view-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
}

.condition-player-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 14px;
}

.effect-view-button,
.condition-view-button,
.condition-player-button {
  align-items: center;
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  display: inline-flex;
  gap: 7px;
  padding: 7px 10px;
}

.effect-view-button:hover,
.effect-view-button.active,
.condition-view-button:hover,
.condition-view-button.active,
.condition-player-button:hover,
.condition-player-button.active {
  background: var(--panel-soft);
  color: var(--ink);
}

.effect-view-button.active,
.condition-view-button.active,
.condition-player-button.active {
  border-color: var(--accent);
}

.effect-view-button em,
.condition-view-button em {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 11px;
  font-style: normal;
  min-width: 22px;
  padding: 2px 6px;
}

.condition-uptime-matrix {
  min-width: 1040px;
}

.condition-matrix-head {
  min-width: 50px;
  text-align: center;
}

.condition-matrix-head .effect-uptime-sort {
  gap: 3px;
  justify-content: center;
  min-height: 52px;
  padding: 5px 4px;
}

.condition-matrix-head .sort-arrow {
  height: 14px;
  width: 14px;
}

.condition-column-head {
  align-items: center;
  display: inline-grid;
  gap: 3px;
  justify-items: center;
}

.condition-column-head .condition-icon-stack,
.condition-column-head .condition-icon-fallback {
  transform: scale(0.78);
  transform-origin: center;
}

.condition-column-head > span:last-child {
  color: var(--muted);
  font-size: 9px;
  font-weight: 750;
  max-width: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.condition-uptime-cell {
  color: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  min-width: 42px;
  text-align: center;
}

.condition-uptime-cell.has-uptime {
  color: var(--accent-strong);
}

.condition-event-table {
  min-width: 1120px;
}

.condition-fold-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.condition-fold-item {
  align-items: center;
  display: inline-flex;
  gap: 3px;
}

.condition-fold-item > em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.condition-uptime {
  align-items: end;
  display: grid;
  gap: 4px;
  justify-items: end;
  min-width: 105px;
}

.condition-uptime span {
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
}

.condition-uptime b {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  display: block;
  height: 5px;
  overflow: hidden;
  position: relative;
  width: 84px;
}

.condition-uptime b::after {
  background: var(--accent);
  border-radius: inherit;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: calc(var(--uptime) * 100%);
}

.condition-uptime em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}

.condition-removal-details {
  max-width: 320px;
}

.condition-removal-details summary {
  color: var(--accent-strong);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}

.condition-removal-breakdown {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.condition-removal-breakdown-row {
  align-items: center;
  background: rgba(25, 29, 27, 0.52);
  border: 1px solid var(--line);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(110px, 1fr) minmax(120px, 1fr) 62px 26px;
  padding: 6px 8px;
}

.condition-removal-breakdown-row.team-blue {
  background: linear-gradient(90deg, var(--team-blue-soft), rgba(25, 29, 27, 0.52) 35%);
}

.condition-removal-breakdown-row.team-red {
  background: linear-gradient(90deg, var(--team-red-soft), rgba(25, 29, 27, 0.52) 35%);
}

.condition-removal-breakdown-row strong,
.condition-removal-breakdown-row span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.condition-removal-breakdown-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.condition-removal-breakdown-row b {
  color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.damage-table-head {
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 14px;
}

.damage-view-tabs {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
}

.damage-view-button {
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  padding: 7px 10px;
}

.damage-view-button.active,
.damage-view-button:hover {
  background: var(--panel-soft);
  color: var(--ink);
}

.damage-view-button.active {
  border-color: var(--accent);
}

.damage-team-key {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 14px;
}

.damage-summary-cards {
  margin-top: 14px;
}

.damage-player-filter {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 14px;
}

.damage-filter-button {
  align-items: flex-start;
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  display: grid;
  gap: 2px;
  min-width: 88px;
  padding: 7px 9px;
  text-align: left;
}

.damage-filter-button strong,
.damage-filter-button span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.damage-filter-button span {
  font-size: 10px;
}

.damage-filter-button.active,
.damage-filter-button:hover {
  background: var(--panel-soft);
  color: var(--ink);
}

.damage-filter-button.active {
  border-color: var(--accent);
}

.damage-graph-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(360px, 1.2fr) repeat(2, minmax(260px, 0.9fr));
  padding: 14px;
}

.damage-graph-card {
  background: rgba(34, 40, 36, 0.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  min-width: 0;
  padding: 12px;
}

.damage-graph-card h3 {
  font-size: 13px;
  margin: 0 0 10px;
}

.damage-graph-list {
  display: grid;
  gap: 8px;
}

.damage-graph-pair {
  border-left: 3px solid var(--line);
  display: grid;
  gap: 5px;
  padding-left: 8px;
}

.damage-graph-pair.team-blue {
  border-left-color: var(--team-blue);
}

.damage-graph-pair.team-red {
  border-left-color: var(--team-red);
}

.damage-graph-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(90px, 0.75fr) minmax(120px, 1fr) 72px;
}

.damage-graph-row span,
.damage-graph-row strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.damage-graph-row span {
  color: var(--muted);
  font-size: 12px;
}

.damage-graph-row strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.damage-graph-row b {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  display: block;
  height: 8px;
  overflow: hidden;
  position: relative;
}

.damage-graph-row b::after {
  background: var(--accent);
  border-radius: inherit;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: calc(var(--share) * 100%);
}

.damage-graph-row.incoming b::after {
  background: var(--bad);
}

.damage-table-wrap {
  max-height: none;
}

.damage-table {
  min-width: 880px;
}

.damage-table th {
  padding: 0;
}

.damage-table td {
  background: rgba(25, 29, 27, 0.32);
}

.damage-table tr.team-blue td {
  background: linear-gradient(90deg, var(--team-blue-soft), rgba(25, 29, 27, 0.32) 18%);
}

.damage-table tr.team-red td {
  background: linear-gradient(90deg, var(--team-red-soft), rgba(25, 29, 27, 0.32) 18%);
}

.damage-table tr.team-map td {
  background: linear-gradient(90deg, var(--team-map-soft), rgba(25, 29, 27, 0.32) 18%);
}

.damage-player {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.damage-player strong,
.damage-player span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.table-sort {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--muted);
  display: flex;
  gap: 6px;
  justify-content: flex-start;
  min-height: 38px;
  padding: 9px 12px;
  width: 100%;
}

.num .table-sort,
th.num .table-sort {
  justify-content: flex-end;
}

.table-sort:hover,
.table-sort.active {
  background: rgba(255, 255, 255, 0.035);
  color: var(--ink);
}

.sort-arrow {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  height: 16px;
  justify-content: center;
  line-height: 1;
  width: 16px;
}

.sort-arrow.asc {
  color: #92e6a7;
}

.sort-arrow.desc {
  color: #ff8b8b;
}

.table-sort-label {
  align-items: center;
  display: inline-flex;
  gap: 5px;
  min-width: 0;
}

.table-sort-label > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.column-hint {
  align-items: center;
  border: 1px solid rgba(154, 166, 159, 0.34);
  border-radius: 50%;
  color: rgba(220, 228, 222, 0.82);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 9px;
  font-style: normal;
  font-weight: 850;
  height: 14px;
  justify-content: center;
  line-height: 1;
  opacity: 0.78;
  width: 14px;
}

.table-sort:hover .column-hint,
.table-sort:focus-visible .column-hint {
  border-color: currentColor;
  opacity: 1;
}

.damage-col-true {
  color: #ffe06e;
}

.damage-col-physical {
  color: #dce4de;
}

.damage-col-elemental {
  color: #8fc8ff;
}

.damage-col-fire {
  color: #ff9d63;
}

.damage-col-cold {
  color: #8ddaff;
}

.damage-col-air {
  color: #c9b8ff;
}

.damage-col-earth {
  color: #d8c982;
}

.damage-col-degen {
  color: #9ddc84;
}

.healing-col-total {
  color: #8fc8ff;
}

.healing-col-effective {
  color: #92e6a7;
}

.healing-col-overheal {
  color: #ff8b8b;
}

.table-sort-label.damage-col-fire::before,
.table-sort-label.damage-col-cold::before,
.table-sort-label.damage-col-air::before,
.table-sort-label.damage-col-earth::before,
.table-sort-label.healing-col-total::before,
.table-sort-label.healing-col-effective::before,
.table-sort-label.healing-col-overheal::before {
  background: currentColor;
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 13%, transparent);
  content: "";
  flex: 0 0 auto;
  height: 5px;
  opacity: 0.9;
  width: 5px;
}

.table-sort-label.damage-col-fire,
.table-sort-label.damage-col-cold,
.table-sort-label.damage-col-air,
.table-sort-label.damage-col-earth,
.table-sort-label.healing-col-total,
.table-sort-label.healing-col-effective,
.table-sort-label.healing-col-overheal {
  padding-left: 4px;
}

.team-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.team-panel {
  margin-top: 0;
}

.team-list {
  display: grid;
}

.player-row {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(210px, 1fr) auto;
  padding: 12px 14px;
}

.player-row:last-child {
  border-bottom: 0;
}

.player-main {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
}

.player-main strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.weapon-line,
.weapon-set-cell {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.weapon-line > span:first-child,
.weapon-set-cell > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enchanting-mod-chip {
  background: rgba(204, 180, 92, 0.14);
  border: 1px solid rgba(226, 200, 108, 0.5);
  border-radius: 999px;
  color: #f2d984;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  white-space: nowrap;
}

.enchanting-mod-chip.confirmed {
  background: rgba(98, 173, 128, 0.16);
  border-color: rgba(118, 207, 153, 0.58);
  color: #a7ebb9;
}

.enchanting-mod-chip.likely {
  background: rgba(204, 180, 92, 0.14);
  border-color: rgba(226, 200, 108, 0.5);
  color: #f2d984;
}

.enchanting-mod-chip.candidate {
  background: rgba(125, 140, 145, 0.14);
  border-color: rgba(166, 180, 183, 0.42);
  color: #d5dddd;
}

.hct-mod-chip {
  background: rgba(105, 152, 202, 0.14);
  border: 1px solid rgba(122, 177, 230, 0.5);
  border-radius: 999px;
  color: #a9d6ff;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  white-space: nowrap;
}

.hct-mod-chip.confirmed {
  background: rgba(98, 173, 128, 0.16);
  border-color: rgba(118, 207, 153, 0.58);
  color: #a7ebb9;
}

.hct-mod-chip.likely {
  background: rgba(105, 152, 202, 0.14);
  border-color: rgba(122, 177, 230, 0.5);
  color: #a9d6ff;
}

.hct-mod-chip.candidate,
.hct-mod-chip.neutral {
  background: rgba(125, 140, 145, 0.14);
  border-color: rgba(166, 180, 183, 0.42);
  color: #d5dddd;
}

.vampiric-mod-chip {
  background: rgba(190, 77, 96, 0.16);
  border: 1px solid rgba(226, 104, 126, 0.5);
  border-radius: 999px;
  color: #ffb2bf;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  padding: 3px 6px;
  white-space: nowrap;
}

.player-skills {
  align-items: center;
  display: flex;
  gap: 8px;
  grid-column: 1 / -1;
}

.skill-source {
  font-size: 12px;
  white-space: nowrap;
}

.player-stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(5, minmax(62px, 1fr));
}

.player-stats span {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
}

.player-stats strong,
.player-stats em {
  display: block;
  font-style: normal;
}

.player-stats strong {
  font-size: 15px;
}

.player-stats em {
  color: var(--muted);
  font-size: 11px;
}

.player-health {
  grid-column: 1 / -1;
  min-width: 0;
}

.mini-health {
  background: rgba(34, 40, 36, 0.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.health-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px;
}

.skill-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 14px;
}

.skill-player-tabs-panel {
  background: #151817;
  border-color: rgba(214, 74, 67, 0.18);
  margin-top: 14px;
  overflow: hidden;
}

.player-tab-strip {
  display: grid;
  column-gap: 26px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 8px;
  position: relative;
  row-gap: 14px;
}

.player-tab-strip::before {
  background: linear-gradient(180deg, transparent, rgba(214, 74, 67, 0.38), transparent);
  content: "";
  inset: 8px auto 8px 50%;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: 1px;
  z-index: 1;
}

.player-tab-team {
  min-width: 0;
  position: relative;
  z-index: 2;
}

.player-tab-team-head {
  align-items: center;
  border-bottom: 1px solid rgba(214, 74, 67, 0.12);
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 5px;
  min-height: 24px;
  padding: 0 4px 5px;
}

.player-tab-team-head strong {
  color: var(--accent-strong);
  font-size: 11px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.player-tab-team-head span {
  color: var(--muted);
  font-size: 10px;
}

.player-tab-team-list {
  display: grid;
  column-gap: 18px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  position: relative;
  row-gap: 3px;
}

.player-tab-team-list::before {
  background: linear-gradient(180deg, transparent, rgba(214, 74, 67, 0.3), transparent);
  content: "";
  inset: 1px auto 1px 50%;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  width: 1px;
  z-index: 1;
}

.player-tab-button {
  align-items: center;
  background: #151a17;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--ink);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-height: 34px;
  min-width: 0;
  padding: 5px 7px;
  text-align: left;
  position: relative;
  z-index: 2;
}

.player-tab-button strong,
.player-tab-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-tab-button strong {
  font-size: 12px;
  line-height: 1.1;
  min-width: 0;
}

.player-tab-professions {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 3px;
}

.player-tab-professions .player-tab-profession-icon {
  border-color: rgba(214, 74, 67, 0.22);
  height: 20px;
  width: 20px;
}

.player-tab-button:hover,
.player-tab-button.active {
  background: rgba(214, 74, 67, 0.1);
  border-color: var(--accent);
}

.player-tab-button.active {
  box-shadow: inset 2px 0 0 var(--accent-strong);
}

.skill-player-view {
  margin-top: 14px;
}

.player-profile-view {
  margin-top: 14px;
}

.player-profile-card {
  overflow: hidden;
}

.player-profile-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 14px;
}

.loadout-profile-grid {
  align-items: start;
  grid-template-columns: 1fr;
}

.loadout-skillbar-section,
.loadout-attribute-section,
.loadout-equipment-section {
  grid-column: 1 / -1;
}

.profile-section {
  min-width: 0;
}

.loadout-section {
  background: rgba(34, 40, 36, 0.45);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.loadout-skillbar-section {
  background: linear-gradient(180deg, rgba(37, 45, 41, 0.78), rgba(22, 27, 25, 0.72));
}

.loadout-equipment-section {
  background: rgba(25, 29, 27, 0.36);
}

.loadout-equipment-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
}

.loadout-equipment-panel {
  background: rgba(34, 40, 36, 0.42);
  border: 1px solid rgba(151, 190, 164, 0.16);
  border-radius: 7px;
  min-width: 0;
  padding: 10px;
}

.profile-section-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
  margin-bottom: 10px;
}

.profile-section-head h3 {
  margin: 0;
}

.profile-section h3 {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
}

.profile-stats {
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
}

.profile-skillbar {
  display: grid;
  gap: 10px;
}

.loadout-skillbar {
  justify-content: center;
  gap: 12px;
}

.loadout-skillbar .skill-token.icon-only {
  border-color: rgba(209, 189, 126, 0.54);
  border-radius: 9px;
  height: 104px;
  padding: 5px;
  width: 104px;
}

.loadout-skillbar .skill-token.icon-only .skill-token-icon {
  border-radius: 7px;
  height: 92px;
  width: 92px;
}

.loadout-icon {
  align-items: center;
  background: rgba(17, 20, 19, 0.88);
  border: 1px solid rgba(209, 189, 126, 0.48);
  border-radius: 5px;
  color: #f1cf79;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 850;
  height: 42px;
  justify-content: center;
  overflow: hidden;
  width: 42px;
}

.loadout-icon img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.armor-loadout-grid,
.weapon-loadout-grid,
.loadout-attribute-grid {
  display: grid;
  gap: 8px;
}

.armor-loadout-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.weapon-loadout-grid {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.armor-slot,
.weapon-loadout-card {
  background: rgba(25, 29, 27, 0.72);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 7px;
  min-width: 0;
  padding: 8px;
}

.armor-slot {
  align-items: start;
  display: grid;
  gap: 9px;
  grid-template-columns: 64px minmax(0, 1fr);
  min-height: 104px;
  padding: 10px;
}

.armor-slot.observed,
.loadout-attribute.observed {
  border-left-color: var(--good);
}

.armor-slot.assumed,
.loadout-attribute.assumed {
  border-left-color: var(--warn);
}

.armor-slot.survivor {
  border-left-color: #6ed0ff;
}

.armor-slot.empty {
  border-left-color: var(--line);
}

.armor-slot.missing {
  border-left-color: var(--bad);
}

.armor-slot strong,
.armor-slot span,
.armor-slot em,
.weapon-loadout-main strong,
.weapon-loadout-main em {
  overflow: hidden;
  text-overflow: ellipsis;
}

.armor-slot strong,
.armor-slot span,
.armor-slot em {
  display: block;
}

.armor-slot span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.armor-slot em,
.weapon-loadout-main em {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-style: normal;
}

.weapon-loadout-card {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.weapon-loadout-icons {
  display: flex;
  gap: 5px;
  min-width: 93px;
}

.weapon-piece-icon {
  height: 44px;
  width: 44px;
}

.weapon-loadout-main {
  min-width: 0;
}

.weapon-loadout-main strong {
  display: block;
  white-space: nowrap;
}

.weapon-loadout-hp {
  color: var(--accent-strong);
  display: block;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  line-height: 1.05;
  margin-top: 4px;
  white-space: nowrap;
}

.weapon-loadout-mods {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: flex-end;
}

.loadout-attribute-grid {
  grid-template-columns: repeat(auto-fit, minmax(128px, max-content));
}

.loadout-attribute {
  background: rgba(25, 29, 27, 0.72);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 7px;
  display: flex;
  gap: 8px;
  padding: 7px 9px;
}

.loadout-attribute strong,
.loadout-attribute em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.loadout-attribute em {
  color: var(--accent-strong);
  font-style: normal;
  font-weight: 850;
}

.player-profile-card.loadout-armory {
  background: #111513;
  border: 1px solid rgba(214, 74, 67, 0.18);
  box-shadow: none;
  overflow: hidden;
}

.loadout-armory-head {
  align-items: center;
  background: #111513;
  border-bottom: 1px solid rgba(214, 74, 67, 0.14);
  display: flex;
  gap: 14px;
  justify-content: space-between;
  padding: 18px 20px 14px;
}

.loadout-armory-title {
  min-width: 0;
}

.loadout-armory-head h2 {
  align-items: baseline;
  color: var(--text);
  display: flex;
  flex-wrap: wrap;
  font-size: 20px;
  gap: 9px;
  line-height: 1.1;
  margin: 4px 0 3px;
}

.loadout-armory-head h2 em {
  color: var(--accent-strong);
  font-size: 13px;
  font-style: normal;
  font-weight: 850;
}

.loadout-professions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.loadout-base-hp {
  align-items: flex-end;
  background: #151a17;
  border: 1px solid rgba(214, 74, 67, 0.18);
  border-radius: 4px;
  display: grid;
  gap: 2px;
  justify-items: end;
  min-width: 112px;
  padding: 8px 10px;
}

.loadout-base-hp span,
.loadout-base-hp em {
  color: #a9b6ae;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.loadout-base-hp strong {
  color: var(--accent-strong);
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.loadout-base-hp em {
  color: var(--muted);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: none;
  white-space: nowrap;
}

.profession-piece-icon {
  border-color: rgba(214, 74, 67, 0.28);
  height: 30px;
  width: 30px;
}

.loadout-armory .loadout-armory-body {
  background: #111513;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  padding: 18px 20px 22px;
}

.loadout-armory-main {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.loadout-armory .loadout-skillbar-section,
.loadout-armory .loadout-attribute-section {
  background: transparent;
  border: 0;
  padding: 0;
}

.loadout-armory .loadout-skillbar {
  gap: 10px;
  justify-content: flex-start;
}

.loadout-armory .loadout-skillbar .skill-token.icon-only {
  background: #151a17;
  border-color: rgba(209, 189, 126, 0.36);
  border-radius: 7px;
  height: 92px;
  padding: 4px;
  width: 92px;
}

.loadout-armory .loadout-skillbar .skill-token.icon-only .skill-token-icon {
  border-radius: 5px;
  height: 82px;
  width: 82px;
}

.loadout-armory .loadout-attribute-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.loadout-armory .loadout-attribute {
  align-items: baseline;
  background: #151a17;
  border: 1px solid rgba(214, 74, 67, 0.18);
  border-radius: 4px;
  display: inline-flex;
  gap: 8px;
  padding: 6px 8px;
}

.loadout-armory .armor-slot.observed,
.loadout-armory .armor-slot.assumed,
.loadout-armory .armor-slot.empty,
.loadout-armory .loadout-attribute.observed,
.loadout-armory .loadout-attribute.assumed {
  border-color: rgba(214, 74, 67, 0.18);
}

.loadout-armory .armor-slot.missing {
  border-color: rgba(255, 96, 96, 0.5);
}

.loadout-armory .armor-slot.survivor {
  border-color: rgba(110, 208, 255, 0.42);
}

.loadout-armory .loadout-attribute strong {
  color: #d8dfd9;
  font-size: 12px;
}

.loadout-armory .loadout-attribute em {
  color: var(--accent-strong);
  font-size: 13px;
}

.loadout-armory .attribute-build-candidates {
  margin-top: 10px;
  padding-top: 0;
}

.loadout-armory .loadout-primary-build {
  background: #151a17;
  border: 1px solid rgba(214, 74, 67, 0.18);
  border-radius: 4px;
  padding: 10px;
}

.loadout-armory .loadout-primary-build .loadout-block-label {
  margin-bottom: 8px;
}

.loadout-armory .loadout-primary-build small {
  color: #a9b6ae;
  display: block;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 6px;
}

.loadout-armory .attribute-build-candidates h4 {
  color: rgba(173, 185, 178, 0.72);
  font-size: 10px;
}

.loadout-armory .attribute-build-candidates li {
  border-top: 0;
  grid-template-columns: 22px minmax(0, 1fr);
  padding-top: 2px;
}

.loadout-armory .attribute-build.candidate span {
  background: transparent;
  border-color: rgba(214, 74, 67, 0.16);
  color: #cbd6cf;
}

.loadout-armory .attribute-build.primary span {
  background: rgba(214, 74, 67, 0.08);
  border-color: rgba(214, 74, 67, 0.28);
}

.loadout-armory .attribute-build.primary em {
  color: var(--accent-strong);
}

.loadout-armory .loadout-equipment-grid {
  gap: 18px;
  grid-template-columns: 1fr;
}

.loadout-armory-block {
  border-top: 1px solid rgba(214, 74, 67, 0.14);
  padding-top: 13px;
}

.loadout-armory .loadout-armor-block {
  border-top: 0;
  padding-top: 0;
}

.loadout-block-label {
  align-items: baseline;
  display: flex;
  gap: 10px;
  margin-bottom: 9px;
}

.loadout-block-label strong {
  color: #dce4de;
  font-size: 12px;
  text-transform: uppercase;
}

.loadout-block-label span {
  color: var(--muted);
  font-size: 12px;
}

.loadout-armory .armor-loadout-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}

.loadout-armory .armor-slot {
  background: #151a17;
  border: 1px solid rgba(214, 74, 67, 0.16);
  border-radius: 4px;
  display: grid;
  gap: 8px;
  grid-template-columns: 48px minmax(0, 1fr);
  min-height: 78px;
  padding: 8px;
}

.loadout-armory .armor-slot .armor-piece-icon {
  height: 48px;
  width: 48px;
}

.loadout-armory .armor-slot strong {
  color: rgba(173, 185, 178, 0.78);
  font-size: 10px;
  text-transform: uppercase;
}

.loadout-armory .armor-slot span {
  color: #f0f4f1;
  font-size: 13px;
  line-height: 1.2;
}

.loadout-armory .armor-slot em {
  color: #a9b6ae;
  font-size: 11px;
  line-height: 1.25;
}

.loadout-armory .weapon-loadout-grid {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
}

.loadout-armory .weapon-loadout-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(240px, 1fr) minmax(116px, 150px) minmax(150px, 1fr);
  padding: 8px 0;
}

.loadout-armory .weapon-loadout-identity {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.loadout-armory .weapon-loadout-icons {
  min-width: 96px;
}

.loadout-armory .weapon-piece-icon {
  height: 42px;
  width: 42px;
}

.loadout-armory .weapon-loadout-main strong {
  color: #edf2ee;
  font-size: 13px;
}

.loadout-armory .weapon-loadout-hp {
  color: var(--accent-strong);
  font-size: 24px;
  justify-self: center;
  margin: 0;
  text-align: center;
  white-space: nowrap;
}

.loadout-armory .weapon-loadout-mods {
  justify-content: flex-end;
  min-width: 0;
}

.attribute-build {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.attribute-build span {
  background: rgba(34, 40, 36, 0.72);
  border: 1px solid rgba(151, 190, 164, 0.22);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  line-height: 1.25;
  padding: 4px 6px;
}

.attribute-build em {
  color: var(--muted);
  font-style: normal;
}

.attribute-build .budget-fill {
  border-color: rgba(209, 189, 126, 0.36);
}

.attribute-build.compact {
  gap: 4px;
  margin-top: 6px;
}

.attribute-build.compact span {
  font-size: 11px;
  padding: 3px 5px;
}

.attribute-build-candidates {
  margin-top: 10px;
}

.attribute-build-candidates h4 {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 6px;
  text-transform: uppercase;
}

.attribute-build-candidates ol {
  display: grid;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.attribute-build-candidates li {
  align-items: start;
  border-top: 1px solid rgba(151, 190, 164, 0.14);
  display: grid;
  gap: 8px;
  grid-template-columns: 28px minmax(0, 1fr);
  padding-top: 7px;
}

.attribute-build-candidates b {
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.7;
}

.attribute-build.candidate {
  gap: 4px;
  margin-top: 0;
}

.attribute-build.candidate span {
  font-size: 11px;
  padding: 3px 5px;
}

.attribute-build-candidates small {
  color: var(--muted);
  display: block;
  font-size: 11px;
  line-height: 1.35;
  margin-top: 4px;
}

.embedded-health {
  background: rgba(34, 40, 36, 0.55);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.profile-section .attribute-inference {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.player-health-card {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.player-received-skills-card {
  margin-top: 14px;
}

.received-totals {
  border-bottom: 1px solid var(--line);
}

.received-view-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
}

.received-view-button {
  align-items: center;
  background: transparent;
  border-color: var(--line);
  color: var(--muted);
  display: inline-flex;
  gap: 7px;
  padding: 7px 10px;
}

.received-view-button:hover,
.received-view-button.active {
  background: var(--panel-soft);
  color: var(--ink);
}

.received-view-button.active {
  border-color: var(--accent);
}

.received-view-button em {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--accent-strong);
  font-size: 11px;
  font-style: normal;
  min-width: 22px;
  padding: 2px 6px;
}

.received-skill-grid {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.received-section {
  min-width: 0;
}

.received-section h3 {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 8px;
}

.received-skill-table {
  min-width: 980px;
}

.received-source-table {
  min-width: 900px;
}

.received-skill-table td,
.received-source-table td {
  background: rgba(25, 29, 27, 0.32);
}

.received-skill-table tr.team-blue td,
.received-source-table tr.team-blue td {
  background: linear-gradient(90deg, var(--team-blue-soft), rgba(25, 29, 27, 0.32) 22%);
}

.received-skill-table tr.team-red td,
.received-source-table tr.team-red td {
  background: linear-gradient(90deg, var(--team-red-soft), rgba(25, 29, 27, 0.32) 22%);
}

.received-skill-table tr.team-map td,
.received-source-table tr.team-map td {
  background: linear-gradient(90deg, var(--team-map-soft), rgba(25, 29, 27, 0.32) 22%);
}

.category-row td {
  background: rgba(17, 20, 19, 0.9) !important;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 7px 10px;
  text-transform: uppercase;
}

.received-source {
  align-items: flex-start;
  display: grid;
  gap: 5px;
  justify-items: start;
  min-width: 0;
}

.received-source strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.relation-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  justify-content: center;
  min-width: 58px;
  padding: 4px 7px;
}

.relation-enemy {
  background: rgba(239, 119, 119, 0.11);
  border-color: rgba(239, 119, 119, 0.3);
  color: #ffaaa7;
}

.relation-ally {
  background: rgba(91, 140, 255, 0.11);
  border-color: rgba(91, 140, 255, 0.3);
  color: #b8caff;
}

.relation-self {
  background: rgba(113, 210, 138, 0.11);
  border-color: rgba(113, 210, 138, 0.3);
  color: var(--good);
}

.received-share {
  align-items: center;
  display: grid;
  gap: 5px;
  justify-items: end;
  min-width: 86px;
}

.received-share span {
  font-variant-numeric: tabular-nums;
}

.received-share b {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  display: block;
  height: 5px;
  overflow: hidden;
  position: relative;
  width: 74px;
}

.received-share b::after {
  background: var(--accent);
  border-radius: inherit;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: calc(var(--share) * 100%);
}

.skill-card {
  margin-top: 0;
}

.skill-totals {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  padding: 10px 14px;
}

.skill-totals span {
  background: rgba(34, 40, 36, 0.55);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px;
}

.skill-totals strong,
.skill-totals em {
  display: block;
  font-style: normal;
}

.skill-totals em {
  color: var(--muted);
  font-size: 11px;
}

.attribute-inference {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 14px;
}

.attribute-inference span {
  background: rgba(33, 43, 48, 0.55);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 10px;
}

.attribute-inference strong,
.attribute-inference em {
  display: block;
  font-style: normal;
}

.attribute-inference em {
  color: var(--muted);
  font-size: 11px;
}

.skill-table-stack {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.skill-section h3 {
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 6px;
}

.skill-row-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.skill-list-head,
.skill-row-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: var(--skill-summary-columns);
  min-width: 880px;
}

.skill-list-head {
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  padding: 9px 12px;
  text-transform: uppercase;
}

.skill-row-detail {
  border-top: 1px solid var(--line);
}

.skill-row-detail:first-of-type {
  border-top: 0;
}

.skill-row-summary {
  align-items: center;
  cursor: pointer;
  font-size: 12px;
  list-style: none;
  padding: 9px 12px 9px 28px;
  position: relative;
}

.skill-row-summary::-webkit-details-marker {
  display: none;
}

.skill-row-summary::before {
  color: var(--muted);
  content: "+";
  font-weight: 800;
  left: 12px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.skill-row-detail[open] .skill-row-summary::before {
  content: "-";
}

.skill-row-flat .skill-row-summary {
  cursor: default;
  padding-left: 12px;
}

.skill-row-flat .skill-row-summary::before {
  content: none;
}

.player-summary-card {
  overflow: visible;
  padding: 0;
}

.player-summary-table-wrap {
  border-top: 1px solid rgba(214, 74, 67, 0.08);
  overflow: visible;
}

.player-summary-skill-table {
  min-width: 1040px;
  table-layout: fixed;
  width: 100%;
}

.player-summary-skill-table th,
.player-summary-skill-table td {
  border-bottom-color: rgba(214, 74, 67, 0.07);
  padding-bottom: 5px;
  padding-top: 5px;
}

.player-summary-skill-table th:first-child,
.player-summary-skill-table td:first-child {
  left: 0;
  min-width: 0;
  position: sticky;
  width: 166px;
  z-index: 2;
}

.player-summary-skill-table th:first-child {
  z-index: 3;
}

.player-summary-skill-table td:first-child {
  background: rgba(12, 14, 13, 0.98);
  box-shadow: 1px 0 0 rgba(214, 74, 67, 0.08);
}

.player-summary-skill-table td:first-child:has(.skill-token:hover),
.player-summary-skill-table td:first-child:has(.skill-token:focus),
.player-summary-skill-table td:first-child:has(.skill-token.is-open) {
  z-index: 5;
}

.player-summary-skill-table .skill-token.compact {
  gap: 5px;
  min-height: 27px;
  padding: 2px 6px 2px 2px;
}

.player-summary-skill-table .skill-token.compact .skill-token-icon {
  height: 24px;
  width: 24px;
}

.player-summary-skill-table .skill-token.compact .skill-token-label {
  font-size: 12px;
  max-width: 108px;
}

.player-summary-skill-table .skill-popover {
  bottom: calc(100% + 7px);
  top: auto;
  z-index: 200;
}

.player-summary-skill-table .skill-popover::before {
  border-bottom: 0;
  border-top: 7px solid rgba(151, 190, 164, 0.72);
  bottom: -7px;
  top: auto;
}

.class-modifier-grid {
  display: grid;
  gap: 12px;
  padding: 14px;
}

.class-modifier-card {
  background: rgba(12, 15, 14, 0.72);
  border: 1px solid rgba(214, 74, 67, 0.14);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.class-modifier-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.class-modifier-head h3 {
  font-size: 15px;
  margin: 0 0 4px;
}

.class-modifier-metrics {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.class-modifier-metrics div {
  background: rgba(214, 74, 67, 0.08);
  border: 1px solid rgba(214, 74, 67, 0.12);
  border-radius: 6px;
  display: grid;
  gap: 3px;
  padding: 10px;
}

.class-modifier-metrics strong {
  color: var(--ink);
  font-size: 21px;
}

.class-modifier-metrics span,
.class-modifier-foot span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.class-modifier-foot {
  border-top: 1px solid rgba(214, 74, 67, 0.1);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 10px;
}

.class-modifier-foot strong {
  color: var(--ink);
}

.class-modifier-empty {
  display: grid;
  gap: 5px;
  padding: 16px;
}

.death-recap-top {
  align-items: start;
  display: grid;
  gap: 12px;
}

.death-recap-title h1 {
  font-size: 24px;
  margin: 0 0 4px;
}

.death-recap-picker {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  padding-bottom: 2px;
}

.death-recap-tab {
  align-items: start;
  background: rgba(13, 16, 15, 0.74);
  border: 1px solid rgba(154, 166, 159, 0.18);
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: grid;
  gap: 2px;
  min-height: 62px;
  min-width: 0;
  padding: 7px 9px;
  position: relative;
  text-align: left;
}

.death-recap-tab.team-blue {
  box-shadow: inset 2px 0 0 var(--team-blue);
}

.death-recap-tab.team-red {
  box-shadow: inset 2px 0 0 var(--team-red);
}

.death-recap-tab.active {
  background: rgba(214, 74, 67, 0.1);
  border-color: rgba(255, 224, 110, 0.42);
}

.death-recap-tab-time,
.death-recap-tab em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.death-recap-tab strong {
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  padding-right: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.death-pact-kill-badge {
  position: absolute;
  right: 7px;
  top: 7px;
  z-index: 4;
}

.death-pact-kill-icon {
  align-items: center;
  background: rgba(214, 74, 67, 0.16);
  border: 1px solid rgba(255, 224, 110, 0.36);
  border-radius: 4px;
  box-shadow: 0 0 0 2px rgba(214, 74, 67, 0.1);
  display: inline-flex;
  height: 20px;
  justify-content: center;
  overflow: hidden;
  width: 20px;
}

.death-pact-kill-icon img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.death-pact-kill-icon span {
  color: var(--ink);
  font-size: 10px;
  font-weight: 900;
}

.death-pact-kill-popover {
  background: rgba(7, 9, 8, 0.98);
  border: 1px solid rgba(255, 224, 110, 0.34);
  border-radius: 6px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.42);
  color: var(--ink);
  display: none;
  min-width: 220px;
  padding: 9px;
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 40;
}

.death-pact-kill-badge:hover .death-pact-kill-popover {
  display: grid;
  gap: 7px;
}

.death-pact-kill-head {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: auto 1fr;
}

.death-pact-kill-head strong,
.death-pact-kill-head em,
.death-pact-kill-row {
  display: block;
}

.death-pact-kill-head strong {
  font-size: 12px;
  min-width: 0;
  overflow: visible;
  padding-right: 0;
  text-overflow: clip;
  white-space: normal;
}

.death-pact-kill-head em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.death-pact-kill-row {
  color: #f1f4ef;
  font-size: 12px;
  line-height: 1.35;
}

.death-recap-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.death-recap-card {
  background: rgba(13, 16, 15, 0.86);
  border: 1px solid rgba(214, 74, 67, 0.1);
  border-radius: 6px;
  overflow: hidden;
}

.death-recap-card.team-blue {
  border-left: 2px solid var(--team-blue);
}

.death-recap-card.team-red {
  border-left: 2px solid var(--team-red);
}

.death-recap-head {
  align-items: center;
  border-bottom: 1px solid rgba(214, 74, 67, 0.08);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(260px, 1fr) minmax(300px, 0.85fr) auto;
  padding: 12px 14px;
}

.death-recap-identity {
  align-items: center;
  display: flex;
  gap: 12px;
  min-width: 0;
}

.death-recap-identity h2 {
  font-size: 18px;
  margin: 0;
}

.death-recap-professions {
  align-items: center;
  color: var(--muted);
  display: flex;
  font-size: 12px;
  gap: 7px;
  margin-top: 3px;
}

.death-recap-professions .loadout-professions {
  gap: 3px;
}

.death-recap-professions .loadout-icon {
  height: 20px;
  width: 20px;
}

.death-weapon-set {
  align-items: baseline;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 5px;
  margin-top: 5px;
  min-width: 0;
}

.death-weapon-set span {
  font-weight: 850;
  text-transform: uppercase;
}

.death-weapon-set strong {
  color: var(--ink);
  min-width: 0;
}

.death-weapon-set em {
  color: rgba(154, 166, 159, 0.78);
  font-style: normal;
}

.death-recap-statline {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(58px, auto));
}

.death-recap-statline strong,
.death-recap-statline em {
  display: block;
  text-align: right;
}

.death-recap-statline strong {
  color: #ffe06e;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
}

.death-recap-statline em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.death-disciple-chip {
  background: linear-gradient(180deg, rgba(246, 248, 240, 0.12), rgba(126, 171, 130, 0.08));
  border: 1px solid rgba(232, 237, 214, 0.24);
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  padding: 6px 8px;
}

.death-disciple-chip.active {
  border-color: rgba(255, 224, 110, 0.45);
}

.death-damage-mix {
  align-items: stretch;
  border-bottom: 1px solid rgba(214, 74, 67, 0.08);
  border-radius: 6px;
  display: grid;
  gap: 1px;
  grid-template-columns: minmax(120px, 1.15fr) repeat(3, minmax(92px, 1fr));
  overflow: hidden;
}

.death-recap-card .death-damage-mix {
  align-self: stretch;
  border: 1px solid rgba(154, 166, 159, 0.14);
  border-radius: 6px;
  grid-template-columns: repeat(4, minmax(58px, 1fr));
  min-width: 0;
}

.death-damage-mix-total,
.death-damage-mix-item {
  background: rgba(255, 255, 255, 0.014);
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
}

.death-recap-head .death-damage-mix-total,
.death-recap-head .death-damage-mix-item {
  align-content: center;
  padding: 8px 10px;
}

.death-damage-mix-total strong,
.death-damage-mix-item strong {
  color: #ffe06e;
  font-size: 20px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.death-damage-mix-total em,
.death-damage-mix-item em,
.death-damage-mix-item small {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase;
}

.death-damage-mix-item small {
  color: rgba(220, 228, 222, 0.84);
  font-variant-numeric: tabular-nums;
}

.death-damage-mix-item.true strong,
.death-damage-mix-item.ai strong {
  color: #ffe06e;
}

.death-damage-mix-item.physical strong,
.death-damage-mix-item.ar strong {
  color: #dce4de;
}

.death-damage-mix-item.elemental strong {
  color: #8fc8ff;
}

.death-replay-panel {
  background: rgba(8, 11, 10, 0.9);
  border-top: 1px solid rgba(214, 74, 67, 0.08);
  display: grid;
  gap: 8px;
  padding: 12px 14px 14px;
}

.death-replay-head {
  align-items: center;
  display: flex;
  gap: 12px;
  justify-content: space-between;
}

.death-replay-head h3 {
  font-size: 13px;
  margin: 0 0 2px;
  text-transform: uppercase;
}

.death-replay-controls {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(84px, auto) minmax(54px, auto) minmax(180px, 260px) 44px;
}

.death-replay-controls .map-play-button {
  min-width: 84px;
  padding-left: 14px;
  padding-right: 14px;
}

.death-replay-controls .death-replay-speed-button {
  min-width: 54px;
  padding-left: 10px;
  padding-right: 10px;
}

.death-replay-controls input {
  accent-color: #ffe06e;
  width: 100%;
}

.death-replay-controls output {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  text-align: right;
  text-transform: uppercase;
}

.death-replay-stage {
  aspect-ratio: 980 / 420;
  background: #070908;
  border: 1px solid rgba(154, 166, 159, 0.14);
  border-radius: 6px;
  min-height: 260px;
  overflow: hidden;
  position: relative;
}

.death-replay-svg {
  height: 100%;
  width: 100%;
}

.death-replay-svg .map-bg {
  fill: #070908;
}

.death-replay-svg .map-pathing-plane {
  fill: rgba(154, 166, 159, 0.055);
  stroke: none;
}

.death-replay-svg .map-pathing-plane:nth-child(even) {
  fill: rgba(154, 166, 159, 0.038);
}

.death-replay-svg .map-trail {
  opacity: 0.55;
}

.death-replay-svg .map-trail.selected {
  opacity: 0.95;
  stroke-width: 3.5;
}

.death-replay-svg .map-agent-marker.death-target circle {
  filter: drop-shadow(0 0 7px rgba(255, 224, 110, 0.76));
  stroke: #ffe06e;
  stroke-width: 3;
}

.death-replay-line {
  opacity: 0.95;
  stroke-width: 2.5;
}

.death-replay-timeline {
  background: linear-gradient(90deg, rgba(4, 6, 5, 0.28), rgba(4, 6, 5, 0.86));
  border: 1px solid rgba(255, 224, 110, 0.12);
  border-radius: 6px;
  bottom: 16px;
  box-shadow: -16px 0 32px rgba(0, 0, 0, 0.24);
  display: grid;
  grid-template-rows: auto auto;
  min-height: 0;
  overflow: hidden;
  position: absolute;
  right: 12px;
  width: min(360px, 36%);
  z-index: 6;
}

.death-replay-timeline-head {
  align-items: center;
  border-bottom: 1px solid rgba(154, 166, 159, 0.12);
  display: flex;
  justify-content: space-between;
  padding: 8px 9px;
}

.death-replay-timeline-head strong {
  color: #f2efe0;
  font-size: 12px;
  text-transform: uppercase;
}

.death-replay-timeline-head span {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.death-replay-timeline-list {
  display: grid;
  align-content: end;
  gap: 1px;
  max-height: 224px;
  min-height: 0;
  overflow: hidden;
  padding: 1px;
}

.death-replay-timeline-row {
  align-items: center;
  border-left: 3px solid rgba(154, 166, 159, 0.2);
  display: grid;
  gap: 7px;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  min-height: 54px;
  opacity: var(--event-opacity, 0.62);
  padding: 7px 8px 7px 7px;
  transform: translateY(0);
  transition: opacity 140ms ease, transform 140ms ease;
}

.death-replay-timeline-row.age-2,
.death-replay-timeline-row.age-3 {
  filter: saturate(0.78);
}

.death-replay-timeline-row.active {
  background: rgba(255, 224, 110, 0.1);
  box-shadow: inset 0 0 0 1px rgba(255, 224, 110, 0.18);
  filter: none;
  opacity: 1;
}

.death-replay-timeline-empty {
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  padding: 14px 10px;
  text-align: right;
  text-transform: uppercase;
}

.death-replay-timeline-row.event-damage {
  border-left-color: #d64a43;
}

.death-replay-timeline-row.event-healing {
  border-left-color: #78c68c;
}

.death-replay-timeline-row.event-prevention {
  border-left-color: #ffe06e;
}

.death-replay-timeline-row.event-control {
  border-left-color: #c69cff;
}

.death-replay-timeline-row.event-skill {
  border-left-color: #8fc8ff;
}

.death-replay-timeline-time {
  color: var(--muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
}

.death-replay-timeline-body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.death-replay-timeline-body .skill-table-token {
  min-width: 0;
}

.death-replay-timeline-body .skill-token.compact {
  min-height: 28px;
}

.death-replay-timeline-body .skill-token.compact .skill-token-icon {
  height: 24px;
  width: 24px;
}

.death-replay-timeline-body .skill-token.compact .skill-token-label {
  max-width: 150px;
}

.death-replay-timeline-body em {
  color: var(--muted);
  display: block;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  padding-left: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.death-replay-timeline-row > strong {
  color: #ffe06e;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.death-replay-event-strip {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 999px;
  height: 10px;
  position: relative;
}

.death-replay-event-dot {
  border-radius: 999px;
  cursor: help;
  height: 8px;
  position: absolute;
  top: 1px;
  transform: translateX(-50%);
  width: 8px;
  z-index: 3;
}

.death-replay-event-dot.event-damage {
  background: #d64a43;
}

.death-replay-event-dot.event-healing {
  background: #78c68c;
}

.death-replay-event-dot.event-prevention {
  background: #ffe06e;
}

.death-replay-event-dot.event-control {
  background: #c69cff;
}

.death-replay-event-dot.event-skill {
  background: #8fc8ff;
}

.death-replay-event-dot.active {
  box-shadow: 0 0 0 4px rgba(255, 224, 110, 0.24);
}

.death-replay-packet-tooltip {
  background: rgba(6, 8, 7, 0.96);
  border: 1px solid rgba(255, 224, 110, 0.32);
  border-radius: 6px;
  bottom: 16px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.48);
  color: var(--ink);
  display: grid;
  gap: 4px;
  left: 50%;
  min-width: 220px;
  opacity: 0;
  padding: 8px 9px;
  pointer-events: none;
  position: absolute;
  transform: translateX(-50%);
  transition: opacity 0s;
  visibility: hidden;
  z-index: 40;
}

.death-replay-event-dot:hover .death-replay-packet-tooltip,
.death-replay-event-dot:focus-visible .death-replay-packet-tooltip {
  opacity: 1;
  visibility: visible;
}

.death-replay-packet-tooltip-main {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.death-replay-packet-tooltip-main .skill-table-token {
  min-width: 0;
}

.death-replay-packet-tooltip-main strong {
  color: #ffe06e;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.death-replay-packet-fallback {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850;
}

.death-replay-packet-tooltip-source,
.death-replay-packet-tooltip-meta {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.death-replay-packet-tooltip-source {
  color: #dce4de;
}

.death-replay-healthbar {
  background: rgba(4, 5, 5, 0.82);
  border: 1px solid rgba(255, 236, 180, 0.28);
  border-radius: 4px;
  bottom: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.36);
  display: grid;
  gap: 6px;
  left: 14px;
  min-width: 310px;
  padding: 10px 11px;
  position: absolute;
}

.death-replay-healthbar-label {
  align-items: baseline;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.death-replay-healthbar-label strong {
  color: #f7f2dc;
  font-size: 14px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.death-replay-healthbar-label span {
  color: #ffd8c6;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  white-space: nowrap;
}

.death-replay-healthbar-track {
  background: linear-gradient(#2b1011, #170708);
  border: 1px solid rgba(255, 224, 190, 0.22);
  border-radius: 2px;
  height: 20px;
  overflow: hidden;
  position: relative;
}

.death-replay-healthbar-fill {
  background: linear-gradient(#d5342e 0%, #9e1515 52%, #5f090a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 190, 0.26);
  display: block;
  height: 100%;
}

.death-replay-healthbar-deep-wound {
  background: linear-gradient(#fffdfa 0%, #d8d1c8 58%, #918a82 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), -1px 0 4px rgba(0, 0, 0, 0.36);
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
}

.death-replay-healthbar-weapon {
  align-items: baseline;
  display: flex;
  gap: 8px;
  justify-content: space-between;
  min-width: 0;
}

.death-replay-healthbar-weapon span,
.death-replay-healthbar-weapon em {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.death-replay-healthbar-weapon span {
  color: #dce4de;
}

.death-recap-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.death-recap-block {
  background: rgba(255, 255, 255, 0.012);
  min-width: 0;
  padding: 11px 12px;
}

.death-recap-block-head {
  align-items: baseline;
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.death-recap-block-head h3 {
  color: #dce4de;
  font-size: 12px;
  margin: 0;
  text-transform: uppercase;
}

.death-recap-block-head span {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}

.death-recap-mini-table,
.death-effect-list,
.death-control-list,
.death-timeline-list {
  display: grid;
  gap: 5px;
}

.death-recap-mini-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(86px, 0.8fr) minmax(0, 1fr) minmax(42px, auto) minmax(24px, auto);
  min-width: 0;
}

.death-recap-mini-row.team-blue {
  box-shadow: inset 2px 0 0 var(--team-blue);
  padding-left: 6px;
}

.death-recap-mini-row.team-red {
  box-shadow: inset 2px 0 0 var(--team-red);
  padding-left: 6px;
}

.death-recap-source,
.death-recap-source strong,
.death-recap-source em {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.death-recap-source strong {
  color: var(--ink);
  font-size: 12px;
}

.death-recap-source em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.death-recap-skill {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.death-recap-skill-line {
  align-items: center;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.death-recap-skill-line .skill-table-token {
  min-width: 0;
}

.death-damage-traits {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  min-width: 0;
}

.death-damage-trait {
  align-items: baseline;
  background: rgba(154, 166, 159, 0.08);
  border: 1px solid rgba(154, 166, 159, 0.14);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 9px;
  font-weight: 850;
  gap: 4px;
  line-height: 1;
  padding: 3px 5px;
  text-transform: uppercase;
  white-space: nowrap;
}

.death-damage-trait.true,
.death-damage-trait.ai {
  border-color: rgba(255, 224, 110, 0.28);
  color: #ffe06e;
}

.death-damage-trait.physical,
.death-damage-trait.ar {
  border-color: rgba(154, 166, 159, 0.22);
  color: #dce4de;
}

.death-damage-trait.elemental {
  border-color: rgba(92, 177, 255, 0.28);
  color: #8fc8ff;
}

.death-damage-trait strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.death-recap-empty {
  color: rgba(154, 166, 159, 0.74);
  font-size: 12px;
  padding: 4px 0;
}

.death-effect-chip {
  align-items: center;
  border: 1px solid rgba(214, 74, 67, 0.08);
  border-radius: 4px;
  display: grid;
  gap: 4px;
  grid-template-columns: minmax(0, 1fr);
  padding: 5px 6px;
}

.death-effect-chip.degen {
  border-color: rgba(239, 119, 119, 0.24);
}

.death-effect-chip.regen {
  border-color: rgba(113, 210, 138, 0.24);
}

.death-effect-chip em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
}

.death-control-row,
.death-timeline-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 48px minmax(0, 1fr) minmax(96px, max-content);
  min-width: 0;
}

.death-control-row {
  grid-template-columns: 48px minmax(0, 1fr);
}

.death-control-row > span:last-child,
.death-timeline-detail > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.death-control-label {
  align-items: center;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.death-control-label > span:last-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.death-timeline-detail {
  align-items: center;
  display: flex;
  gap: 6px;
  min-width: 0;
}

.death-timeline-row .skill-table-token {
  justify-self: end;
  max-width: min(220px, 100%);
  min-width: 0;
}

.death-timeline {
  border-top: 1px solid rgba(214, 74, 67, 0.08);
  padding: 10px 14px 12px;
}

.death-timeline summary {
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 850;
  text-transform: uppercase;
}

.death-timeline summary span {
  color: var(--accent-strong);
  margin-left: 6px;
}

.skill-name-cell {
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-row-expanded {
  background: rgba(24, 29, 27, 0.62);
  border-top: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding: 12px;
}

.skill-detail-group {
  min-width: 0;
}

.skill-detail-group-wide {
  grid-column: 1 / -1;
}

.skill-detail-group h4 {
  color: var(--text);
  font-size: 12px;
  margin: 0 0 8px;
}

.skill-detail-metrics {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
}

.skill-detail-metrics span {
  background: rgba(33, 43, 48, 0.48);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 8px;
}

.skill-detail-metrics strong,
.skill-detail-metrics em {
  display: block;
  font-style: normal;
}

.skill-detail-metrics strong {
  color: var(--text);
  font-size: 13px;
}

.skill-detail-metrics em {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.skill-target-table-wrap {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow-x: auto;
}

.skill-target-table {
  min-width: 760px;
}

.skill-target-table td {
  background: rgba(25, 29, 27, 0.32);
}

.skill-target-table tr.team-blue td {
  background: linear-gradient(90deg, var(--team-blue-soft), rgba(25, 29, 27, 0.32) 22%);
}

.skill-target-table tr.team-red td {
  background: linear-gradient(90deg, var(--team-red-soft), rgba(25, 29, 27, 0.32) 22%);
}

.skill-target-table tr.team-map td {
  background: linear-gradient(90deg, var(--team-map-soft), rgba(25, 29, 27, 0.32) 22%);
}

.skill-target-cell {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.skill-target-cell strong {
  color: var(--text);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.skill-split-share {
  align-items: center;
  display: inline-grid;
  gap: 5px;
  justify-items: end;
  min-width: 76px;
}

.skill-split-share span {
  font-variant-numeric: tabular-nums;
}

.skill-split-share b {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  display: block;
  height: 5px;
  overflow: hidden;
  position: relative;
  width: 70px;
}

.skill-split-share b::after {
  background: var(--accent);
  border-radius: inherit;
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: calc(var(--share) * 100%);
}

.empty-note {
  margin: 0;
}

.movement-map-panel {
  overflow: hidden;
}

.movement-map-controls {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  padding: 12px 14px;
}

.map-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.map-field span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.map-field input,
.map-field select {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  min-width: 0;
  padding: 8px 9px;
  width: 100%;
}

.map-time-field {
  grid-column: 1 / -1;
  grid-template-columns: 1fr;
}

.map-time-control {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 76px minmax(0, 1fr) 74px;
}

.map-play-button {
  min-height: 42px;
  padding: 9px 0;
}

.map-play-button[aria-pressed="true"] {
  border-color: rgba(85, 214, 199, 0.55);
  color: var(--accent-strong);
}

.map-time-control input {
  min-height: 42px;
  padding: 0;
}

.map-time-field output {
  color: var(--accent-strong);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
  text-align: right;
}

.map-zoom-control {
  align-items: center;
  display: grid;
  gap: 6px;
  grid-template-columns: 34px minmax(100px, 1fr) 34px 48px;
}

.map-zoom-control button {
  min-height: 35px;
  padding: 7px 0;
}

.map-zoom-control input {
  min-height: 35px;
  padding: 0;
}

.map-zoom-control output {
  color: var(--accent-strong);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  font-weight: 750;
}

.map-toggle-row {
  align-content: end;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.map-range-control {
  border-top: 1px solid rgba(255, 255, 255, 0.055);
  display: grid;
  gap: 8px;
  grid-column: 1 / -1;
  padding-top: 2px;
}

.map-range-control > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.map-range-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.map-toggle {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  display: inline-flex;
  gap: 7px;
  min-height: 35px;
  padding: 7px 9px;
}

.map-toggle input {
  height: 16px;
  width: 16px;
}

.map-range-toggle {
  min-height: 32px;
  padding: 6px 8px;
}

.map-range-toggle span {
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
  text-transform: none;
}

.map-range-toggle em {
  color: var(--muted);
  font-style: normal;
  font-variant-numeric: tabular-nums;
  margin-left: 3px;
}

.movement-map-layout {
  align-items: start;
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr) 340px;
}

.movement-map-stage {
  align-self: start;
  background: #0d100f;
  border-right: 1px solid var(--line);
  cursor: zoom-in;
  height: 640px;
  overflow: hidden;
  position: sticky;
  touch-action: none;
  top: 58px;
  user-select: none;
}

.movement-map-stage.is-zoomed {
  cursor: grab;
}

.movement-map-stage.is-panning {
  cursor: grabbing;
}

.movement-map-svg {
  display: block;
  height: 100%;
  width: 100%;
}

.map-bg {
  fill: #0f1211;
}

.map-pathing-plane {
  fill: rgba(77, 103, 88, 0.36);
  shape-rendering: geometricPrecision;
  stroke: none;
}

.map-pathing-plane:nth-child(even) {
  fill: rgba(67, 92, 82, 0.3);
}

.map-grid line {
  stroke: rgba(255, 255, 255, 0.045);
  stroke-width: 1;
}

.map-heatmap {
  filter: blur(3px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.map-heat-cell {
  opacity: 0.82;
  stroke: none;
}

.map-trail {
  fill: none;
  opacity: 0.34;
  stroke: var(--muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.4;
}

.map-trail.selected {
  opacity: 0.9;
  stroke-width: 4;
}

.map-trail.team-blue {
  stroke: var(--team-blue);
}

.map-trail.team-red {
  stroke: var(--team-red);
}

.map-trail.team-map {
  stroke: var(--team-map);
}

.map-range-ring {
  fill: none;
  opacity: 0.55;
  stroke-dasharray: 7 8;
  stroke-width: 1.4;
}

.range-adjacent {
  stroke: var(--good);
}

.range-touch {
  stroke: #c8ff9a;
}

.range-nearby {
  stroke: var(--warn);
}

.range-area {
  stroke: var(--accent-strong);
}

.range-short-projectile {
  stroke: rgba(91, 140, 255, 0.72);
}

.range-earshot {
  stroke: rgba(255, 255, 255, 0.78);
}

.range-spell {
  stroke: #e2a8ff;
}

.range-longbow {
  stroke: #7ed7ff;
}

.range-medium-projectile {
  stroke: #b9c4ff;
}

.range-spirit {
  stroke: #6fe08a;
}

.range-spirit-extended {
  stroke: #98ffbd;
}

.range-compass {
  stroke: #f1e57f;
}

.map-ruler-line {
  stroke: #f2e6a5;
  stroke-dasharray: 4 6;
  stroke-width: 2;
}

.map-event-line {
  opacity: 0.48;
  stroke-width: 2;
}

.map-event-line.selected {
  opacity: 0.9;
  stroke-width: 3;
}

.map-event-marker {
  opacity: 0.78;
  stroke: rgba(255, 255, 255, 0.72);
  stroke-width: 1;
}

.map-event-marker.selected {
  opacity: 1;
  stroke-width: 2;
}

.event-damage {
  fill: var(--bad);
  stroke: var(--bad);
}

.event-healing {
  fill: var(--good);
  stroke: var(--good);
}

.event-skill {
  fill: var(--warn);
  stroke: var(--warn);
}

.event-effect {
  fill: var(--accent-strong);
  stroke: var(--accent-strong);
}

.map-agent-marker {
  cursor: pointer;
}

.map-agent-marker circle {
  fill: var(--muted);
  stroke: #111312;
  stroke-width: 2;
}

.map-agent-marker.team-blue circle {
  fill: var(--team-blue);
}

.map-agent-marker.team-red circle {
  fill: var(--team-red);
}

.map-agent-marker.team-map circle {
  fill: var(--team-map);
}

.map-agent-marker.selected circle {
  filter: drop-shadow(0 0 7px rgba(85, 214, 199, 0.72));
  stroke: var(--accent-strong);
  stroke-width: 3;
}

.map-agent-marker.measured circle {
  stroke: #f2e6a5;
  stroke-width: 3;
}

.map-agent-marker text {
  fill: var(--ink);
  font-size: 12px;
  font-weight: 700;
  paint-order: stroke;
  stroke: #0f1211;
  stroke-width: 4px;
}

.movement-map-sidebar {
  background: rgba(17, 20, 19, 0.82);
  display: grid;
  gap: 0;
  grid-auto-rows: min-content;
  max-height: 640px;
  min-width: 0;
  overflow-y: auto;
}

.movement-side-card {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding: 12px 14px;
}

.movement-side-card h3 {
  font-size: 14px;
  margin: 0;
}

.movement-snapshot-time {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.map-stat-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.map-stat-skill strong {
  align-items: center;
  display: flex;
  min-height: 30px;
}

.movement-current-skill-token {
  max-width: 100%;
}

.movement-current-skill-token .skill-token-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-stat-grid span,
.map-effect-placeholder,
.map-ruler-readout {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
  padding: 8px;
}

.map-stat-grid strong,
.map-stat-grid em,
.map-effect-placeholder strong,
.map-effect-placeholder > span,
.map-ruler-readout strong,
.map-ruler-readout span,
.map-ruler-readout em {
  display: block;
  font-style: normal;
  min-width: 0;
}

.map-stat-grid strong,
.map-effect-placeholder strong,
.map-ruler-readout strong {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.map-stat-grid em,
.map-effect-placeholder > span,
.map-ruler-readout em {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.movement-map-detail-table {
  border-top: 1px solid var(--line);
}

.movement-map-detail-table:empty {
  display: none;
}

.movement-morale-table-wrap {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.movement-morale-head {
  align-items: center;
  display: flex;
  gap: 10px;
  justify-content: space-between;
}

.movement-morale-head strong {
  color: var(--ink);
  font-size: 14px;
}

.movement-morale-head span {
  color: var(--muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.movement-morale-teams {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.movement-morale-team {
  min-width: 0;
}

.movement-morale-team-head {
  align-items: center;
  background: rgba(255, 255, 255, 0.035);
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 8px;
  min-height: 31px;
  padding: 6px 10px;
}

.movement-morale-team-head strong {
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.movement-morale-table {
  border-collapse: collapse;
  width: 100%;
}

.movement-morale-table th,
.movement-morale-table td {
  border-bottom: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
}

.movement-morale-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.movement-morale-table td {
  color: var(--ink);
  font-size: 13px;
}

.movement-morale-table td:first-child {
  align-items: center;
  display: flex;
  gap: 8px;
  min-width: 0;
}

.morale-value {
  background: color-mix(in srgb, var(--morale-color) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--morale-color) 65%, transparent);
  border-radius: 999px;
  color: var(--morale-color);
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  min-width: 54px;
  padding: 3px 8px;
  justify-content: center;
}

.team-dot {
  border-radius: 50%;
  display: inline-block;
  height: 9px;
  width: 9px;
}

.team-dot.team-blue {
  background: var(--team-blue);
}

.team-dot.team-red {
  background: var(--team-red);
}

.team-dot.team-map {
  background: var(--team-map);
}

.condition-token-list {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
}

.condition-token {
  align-items: center;
  appearance: none;
  background: rgba(32, 25, 16, 0.92);
  border: 1px solid rgba(214, 169, 82, 0.58);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 226, 150, 0.08);
  color: var(--ink);
  cursor: help;
  display: inline-flex;
  font: inherit;
  gap: 6px;
  line-height: 1;
  max-width: 100%;
  min-height: 30px;
  min-width: 0;
  padding: 3px 7px 3px 3px;
  position: relative;
  text-align: left;
  vertical-align: middle;
  z-index: 1;
}

.condition-token.is-candidate {
  border-color: rgba(214, 169, 82, 0.42);
}

.condition-token.is-ambiguous {
  border-color: rgba(229, 119, 102, 0.58);
}

.condition-token.is-enchantment {
  background: rgba(20, 35, 42, 0.94);
  border-color: rgba(103, 190, 209, 0.58);
  box-shadow: inset 0 0 0 1px rgba(161, 229, 238, 0.08);
}

.condition-token.is-enchantment .condition-icon-fallback {
  background: #122a32;
  border-color: #68c1d4;
  color: #a9ecf4;
}

.condition-token.is-hex {
  background: rgba(36, 25, 44, 0.94);
  border-color: rgba(170, 125, 217, 0.58);
}

.condition-token.is-hex .condition-icon-fallback {
  background: #271832;
  border-color: #ad85d8;
  color: #dec7ff;
}

.condition-token.is-weapon-spell {
  background: rgba(24, 38, 29, 0.94);
  border-color: rgba(115, 190, 137, 0.58);
}

.condition-token.is-weapon-spell .condition-icon-fallback {
  background: #172a1d;
  border-color: #78c98e;
  color: #c5f4cd;
}

.condition-token.is-spirit {
  background: rgba(42, 33, 20, 0.94);
  border-color: rgba(222, 176, 88, 0.62);
}

.condition-token.is-spirit .condition-icon-fallback {
  background: #2c2111;
  border-color: #d9ad58;
  color: #f6dd9b;
}

.condition-token:focus-visible,
.condition-token:focus,
.condition-token.is-open,
.condition-token:hover {
  border-color: rgba(255, 220, 132, 0.9);
  outline: none;
  z-index: 30;
}

.condition-icon-stack {
  display: inline-grid;
  flex: 0 0 auto;
  height: 24px;
  place-items: center;
  position: relative;
  width: 24px;
}

.condition-icon-stack.multi {
  width: 34px;
}

.condition-icon-stack img,
.condition-icon-fallback {
  border: 1px solid #d3a94c;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  display: block;
  height: 24px;
  object-fit: cover;
  width: 24px;
}

.condition-icon-stack.multi img {
  left: calc(var(--icon-index) * 10px);
  position: absolute;
  top: 0;
}

.condition-icon-fallback {
  align-items: center;
  background: #2c2111;
  color: #f1cf79;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  text-transform: uppercase;
}

.condition-token-label {
  color: var(--ink);
  font-size: 11px;
  font-weight: 750;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.condition-popover {
  background: linear-gradient(180deg, rgba(32, 28, 20, 0.98), rgba(17, 18, 16, 0.98));
  border: 1px solid rgba(214, 169, 82, 0.72);
  border-radius: 6px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.56);
  color: var(--ink);
  display: none;
  gap: 8px;
  left: 0;
  max-height: min(300px, calc(100vh - 28px));
  min-width: 250px;
  overflow-y: auto;
  padding: 10px;
  position: absolute;
  top: calc(100% + 7px);
  white-space: normal;
  z-index: 60;
}

.condition-token.is-enchantment .condition-popover {
  background: linear-gradient(180deg, rgba(20, 34, 40, 0.98), rgba(15, 18, 20, 0.98));
  border-color: rgba(103, 190, 209, 0.72);
}

.condition-token.is-hex .condition-popover {
  background: linear-gradient(180deg, rgba(36, 25, 44, 0.98), rgba(17, 16, 20, 0.98));
  border-color: rgba(170, 125, 217, 0.72);
}

.condition-token.is-weapon-spell .condition-popover {
  background: linear-gradient(180deg, rgba(24, 38, 29, 0.98), rgba(15, 19, 16, 0.98));
  border-color: rgba(115, 190, 137, 0.72);
}

.condition-token.is-spirit .condition-popover {
  background: linear-gradient(180deg, rgba(42, 33, 20, 0.98), rgba(18, 17, 14, 0.98));
  border-color: rgba(222, 176, 88, 0.72);
}

.condition-token:focus-visible .condition-popover,
.condition-token:focus .condition-popover,
.condition-token.is-open .condition-popover,
.condition-token:hover .condition-popover {
  display: grid;
}

.condition-popover::before {
  border-bottom: 7px solid rgba(214, 169, 82, 0.72);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  content: "";
  left: 12px;
  position: absolute;
  top: -7px;
}

.condition-token.is-enchantment .condition-popover::before {
  border-bottom-color: rgba(103, 190, 209, 0.72);
}

.condition-token.is-hex .condition-popover::before {
  border-bottom-color: rgba(170, 125, 217, 0.72);
}

.condition-token.is-weapon-spell .condition-popover::before {
  border-bottom-color: rgba(115, 190, 137, 0.72);
}

.condition-token.is-spirit .condition-popover::before {
  border-bottom-color: rgba(222, 176, 88, 0.72);
}

.condition-popover-head {
  align-items: center;
  color: var(--ink);
  display: flex;
  gap: 9px;
}

.condition-popover-head strong,
.condition-popover-head em,
.condition-popover-body,
.condition-popover-meta {
  display: block;
  font-style: normal;
}

.condition-popover-head strong {
  font-size: 13px;
}

.condition-popover-head em,
.condition-popover-meta {
  color: var(--muted);
  font-size: 11px;
}

.condition-popover-body {
  color: #d9d2bd;
  font-size: 12px;
  line-height: 1.4;
}

.condition-popover-meta {
  line-height: 1.35;
}

.condition-popover-meta strong {
  color: #f1cf79;
  display: block;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.skill-token {
  align-items: center;
  appearance: none;
  background: rgba(24, 29, 27, 0.94);
  border: 1px solid rgba(151, 190, 164, 0.34);
  border-radius: 4px;
  color: var(--ink);
  cursor: help;
  display: inline-flex;
  font: inherit;
  gap: 7px;
  line-height: 1;
  max-width: 100%;
  min-width: 0;
  padding: 3px 7px 3px 3px;
  position: relative;
  text-align: left;
  vertical-align: middle;
  z-index: 1;
}

.skill-token:hover,
.skill-token:focus,
.skill-token:focus-visible,
.skill-token.is-open {
  border-color: rgba(151, 219, 185, 0.82);
  outline: none;
  z-index: 36;
}

.skill-token-icon,
.skill-popover-icon {
  align-items: center;
  background: rgba(17, 20, 19, 0.86);
  border: 1px solid rgba(209, 189, 126, 0.58);
  border-radius: 3px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.48);
  color: #f1cf79;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 800;
  height: 28px;
  justify-content: center;
  overflow: hidden;
  text-transform: uppercase;
  width: 28px;
}

.skill-token-icon img,
.skill-popover-icon img {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.skill-token-label {
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill-token.icon-only {
  height: 34px;
  justify-content: center;
  padding: 2px;
  width: 34px;
}

.skill-token.icon-only .skill-token-icon {
  height: 28px;
  width: 28px;
}

.overview-skillbar .skill-token.icon-only {
  border-color: rgba(209, 189, 126, 0.48);
  border-radius: 6px;
  height: 56px;
  padding: 4px;
  width: 56px;
}

.overview-skillbar .skill-token.icon-only .skill-token-icon {
  border-radius: 5px;
  height: 48px;
  width: 48px;
}

.skill-token.compact {
  min-height: 30px;
}

.skill-token.compact .skill-token-label {
  max-width: 180px;
}

.skill-token-empty {
  align-items: center;
  color: var(--muted);
  display: inline-flex;
  min-height: 30px;
}

.skill-popover {
  background: linear-gradient(180deg, rgba(25, 29, 27, 0.98), rgba(13, 15, 14, 0.98));
  border: 1px solid rgba(151, 190, 164, 0.72);
  border-radius: 6px;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.56);
  color: var(--ink);
  display: none;
  gap: 8px;
  left: 0;
  max-height: min(360px, calc(100vh - 28px));
  min-width: 290px;
  overflow-y: auto;
  padding: 10px;
  position: absolute;
  top: calc(100% + 7px);
  white-space: normal;
  z-index: 68;
}

.skill-token:hover .skill-popover,
.skill-token:focus .skill-popover,
.skill-token:focus-visible .skill-popover,
.skill-token.is-open .skill-popover {
  display: grid;
}

.skill-popover::before {
  border-bottom: 7px solid rgba(151, 190, 164, 0.72);
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  content: "";
  left: 12px;
  position: absolute;
  top: -7px;
}

.skill-popover-head {
  align-items: center;
  color: var(--ink);
  display: flex;
  gap: 9px;
  min-width: 0;
}

.skill-popover-head > span:last-child {
  min-width: 0;
}

.skill-popover-head strong,
.skill-popover-head em,
.skill-popover-cost,
.skill-popover-body,
.skill-popover-meta {
  display: block;
  font-style: normal;
}

.skill-popover-head strong {
  font-size: 14px;
  line-height: 1.2;
}

.skill-popover-head em,
.skill-popover-cost,
.skill-popover-meta {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.skill-popover-cost {
  color: #f1cf79;
}

.skill-popover-body {
  color: #d9d2bd;
  font-size: 12px;
  line-height: 1.42;
}

.skill-popover-meta {
  display: grid;
  gap: 2px 7px;
  grid-template-columns: max-content minmax(0, 1fr);
}

.skill-popover-meta strong {
  color: #f1cf79;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.skill-popover-attribute-samples {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 7px;
}

.skill-popover-sample {
  color: var(--ink);
  display: block;
  font-size: 11px;
  line-height: 1.35;
}

.skill-popover-sample em {
  color: var(--muted);
  display: block;
  font-style: normal;
}

.skill-cell-stack {
  align-items: flex-start;
  display: grid;
  gap: 4px;
  justify-items: start;
  min-width: 0;
}

.skill-table-token,
.skill-row-skill {
  max-width: 100%;
}

.map-ruler-readout span {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 750;
}

.map-nearest-list,
.map-event-list {
  display: grid;
  gap: 7px;
}

.map-nearest-row {
  align-items: center;
  background: var(--panel-soft);
  border-color: var(--line);
  color: var(--ink);
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr) 58px 72px;
  padding: 7px 8px;
  text-align: left;
}

.map-nearest-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.map-nearest-row strong {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.map-nearest-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.map-event-row {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 6px;
  display: grid;
  gap: 4px;
  padding: 7px 8px;
}

.map-event-row.selected {
  background: rgba(72, 94, 81, 0.42);
  border-color: rgba(85, 214, 199, 0.38);
}

.map-event-row.event-damage {
  border-left-color: var(--bad);
}

.map-event-row.event-healing {
  border-left-color: var(--good);
}

.map-event-row.event-skill {
  border-left-color: var(--warn);
}

.map-event-row.event-effect {
  border-left-color: var(--accent-strong);
}

.map-event-row strong {
  font-size: 12px;
  line-height: 1.3;
}

.map-event-title {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.skill-event-token {
  max-width: 210px;
}

.map-event-row em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.inline-head {
  background: rgba(25, 29, 27, 0.55);
}

.compact-table th,
.compact-table td {
  font-size: 12px;
  padding: 7px 8px;
}

.interrupt-hero {
  align-items: stretch;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1.3fr);
  padding: 14px;
}

.interrupt-hero-copy {
  align-content: center;
  display: grid;
  gap: 7px;
}

.interrupt-hero-copy h1 {
  font-size: 28px;
  letter-spacing: 0;
  margin: 0;
}

.interrupt-score-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.interrupt-score-card {
  background: rgba(26, 31, 28, 0.82);
  border: 1px solid rgba(166, 180, 183, 0.18);
  border-radius: 6px;
  display: grid;
  gap: 4px;
  min-height: 94px;
  min-width: 0;
  padding: 11px 12px;
}

.interrupt-score-card.primary {
  border-color: rgba(255, 111, 105, 0.36);
}

.interrupt-score-card.accent {
  border-color: rgba(85, 214, 199, 0.32);
}

.interrupt-score-card span,
.interrupt-score-card em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 760;
  overflow: hidden;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.interrupt-score-card strong {
  color: var(--ink);
  font-size: 23px;
  line-height: 1.05;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.interrupt-score-card.primary strong {
  color: #ffd0cd;
}

.interrupt-score-card.accent strong {
  color: #abfff2;
}

.interrupt-dashboard-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.interrupt-dashboard-grid.single {
  grid-template-columns: minmax(0, 1fr);
}

.interrupt-rank-panel .panel-head {
  min-height: 48px;
}

.interrupt-rank-list,
.interrupt-attempt-list {
  display: grid;
  gap: 1px;
  padding: 8px;
}

.interrupt-rank-row {
  align-items: center;
  background: rgba(26, 31, 28, 0.66);
  border: 1px solid rgba(166, 180, 183, 0.11);
  border-radius: 6px;
  display: grid;
  gap: 9px;
  grid-template-columns: 26px minmax(0, 1fr) minmax(58px, auto);
  min-height: 39px;
  padding: 7px 8px;
}

.interrupt-missed-target {
  background: rgba(26, 31, 28, 0.66);
  border: 1px solid rgba(166, 180, 183, 0.11);
  border-radius: 6px;
  overflow: hidden;
}

.interrupt-missed-target summary {
  align-items: center;
  cursor: pointer;
  display: grid;
  gap: 9px;
  grid-template-columns: 14px 26px minmax(0, 1fr) minmax(58px, auto);
  list-style: none;
  min-height: 39px;
  padding: 7px 8px;
}

.interrupt-missed-target summary::-webkit-details-marker {
  display: none;
}

.interrupt-expand-arrow {
  border-bottom: 5px solid transparent;
  border-left: 7px solid var(--muted);
  border-top: 5px solid transparent;
  height: 0;
  transition: transform 120ms ease, border-left-color 120ms ease;
  width: 0;
}

.interrupt-missed-target[open] .interrupt-expand-arrow {
  border-left-color: var(--accent-strong);
  transform: rotate(90deg);
}

.interrupt-missed-target[open] {
  border-color: rgba(85, 214, 199, 0.28);
}

.interrupt-missed-attempts {
  border-top: 1px solid rgba(166, 180, 183, 0.11);
  display: grid;
  gap: 6px;
  padding: 8px;
}

.interrupt-missed-attempt {
  align-items: start;
  background: rgba(12, 15, 14, 0.42);
  border: 1px solid rgba(166, 180, 183, 0.1);
  border-radius: 6px;
  display: grid;
  gap: 7px;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  padding: 6px;
}

.interrupt-missed-cast {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.interrupt-missed-cast > span:last-of-type {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
}

.interrupt-missed-cast em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  line-height: 1.3;
}

.interrupt-missed-cast.cancel {
  color: #ffe96a;
}

.interrupt-missed-cast.finished {
  color: var(--accent-strong);
}

.interrupt-empty-inline {
  color: var(--muted);
  font-size: 12px;
}

.interrupt-rank-index {
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  text-align: center;
}

.interrupt-rank-main {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.interrupt-rank-main strong {
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interrupt-rank-main em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 740;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interrupt-rank-bar {
  background: rgba(255, 255, 255, 0.07);
  border-radius: 999px;
  height: 4px;
  overflow: hidden;
}

.interrupt-rank-bar i {
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  display: block;
  height: 100%;
}

.interrupt-rank-value {
  color: var(--ink);
  font-size: 13px;
  font-weight: 850;
  text-align: right;
}

.interrupt-rank-value em {
  color: var(--muted);
  display: block;
  font-size: 10px;
  font-style: normal;
  font-weight: 740;
  text-transform: uppercase;
}

.interrupt-attempt-row {
  align-items: center;
  background: rgba(26, 31, 28, 0.66);
  border: 1px solid rgba(166, 180, 183, 0.11);
  border-radius: 6px;
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) auto auto 54px;
  min-height: 39px;
  padding: 7px 8px;
}

.interrupt-attempt-row strong {
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interrupt-attempt-row span {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
}

.interrupt-attempt-row b {
  color: var(--ink);
}

.interrupt-attempt-row em {
  color: var(--accent-strong);
  font-size: 12px;
  font-style: normal;
  font-weight: 850;
  text-align: right;
}

.interrupt-feed-head {
  align-items: flex-start;
  gap: 12px;
}

.interrupt-filter-row,
.interrupt-team-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  justify-content: flex-end;
}

.interrupt-team-filters {
  border-bottom: 1px solid var(--line);
  justify-content: flex-start;
  padding: 9px 14px;
}

.interrupt-filter-button {
  align-items: center;
  background: transparent;
  border-color: rgba(166, 180, 183, 0.2);
  color: var(--muted);
  display: inline-flex;
  gap: 7px;
  min-height: 31px;
  padding: 6px 9px;
}

.interrupt-filter-button strong {
  font-size: 11px;
  line-height: 1;
}

.interrupt-filter-button span {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 850;
  min-width: 20px;
  padding: 2px 5px;
  text-align: center;
}

.interrupt-filter-button:hover,
.interrupt-filter-button.active {
  background: var(--panel-soft);
  border-color: rgba(85, 214, 199, 0.34);
  color: var(--ink);
}

.interrupt-event-feed {
  display: grid;
  gap: 8px;
  max-height: 560px;
  overflow: auto;
  padding: 10px;
}

.interrupt-event-card {
  background: rgba(26, 31, 28, 0.7);
  border: 1px solid rgba(166, 180, 183, 0.12);
  border-left: 3px solid rgba(166, 180, 183, 0.35);
  border-radius: 7px;
  display: grid;
  gap: 10px;
  grid-template-columns: 78px minmax(0, 1fr);
  padding: 9px 10px;
}

.interrupt-event-card.known {
  border-left-color: var(--accent-strong);
}

.interrupt-event-card.area {
  border-left-color: var(--warn);
}

.interrupt-event-card.knockdown {
  border-left-color: #c79bff;
}

.interrupt-event-card.unknown {
  border-left-color: var(--muted);
}

.interrupt-event-time {
  align-content: start;
  display: grid;
  gap: 5px;
  justify-items: start;
}

.interrupt-event-time em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
}

.interrupt-event-body {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.interrupt-event-line {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  min-width: 0;
}

.interrupt-agent {
  align-items: baseline;
  border: 1px solid rgba(166, 180, 183, 0.16);
  border-radius: 999px;
  display: inline-flex;
  gap: 6px;
  max-width: 230px;
  min-width: 0;
  padding: 4px 8px;
}

.interrupt-agent strong {
  font-size: 12px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.interrupt-agent em {
  color: var(--muted);
  flex: 0 0 auto;
  font-size: 10px;
  font-style: normal;
  font-weight: 800;
  text-transform: uppercase;
}

.interrupt-agent.team-blue {
  border-color: rgba(107, 140, 255, 0.34);
  color: #c5d2ff;
}

.interrupt-agent.team-red {
  border-color: rgba(255, 111, 105, 0.34);
  color: #ffd0cd;
}

.interrupt-arrow {
  color: var(--muted);
  font-size: 11px;
  font-weight: 820;
  text-transform: uppercase;
}

.interrupt-event-meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font-size: 11px;
  gap: 7px;
}

.interrupt-basis {
  border: 1px solid rgba(166, 180, 183, 0.22);
  border-radius: 999px;
  color: var(--ink);
  font-weight: 820;
  padding: 3px 7px;
}

.interrupt-basis.known {
  color: var(--accent-strong);
}

.interrupt-basis.area {
  color: var(--warn);
}

.interrupt-basis.knockdown {
  color: #d9c0ff;
}

.interrupt-basis.unknown {
  color: var(--muted);
}

.interrupt-empty {
  color: var(--muted);
  font-size: 12px;
  padding: 12px;
}

.flag-note {
  border-top: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.4;
  padding: 8px;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
}

th,
td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

th {
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

tbody tr:hover td {
  background-color: rgba(255, 255, 255, 0.035);
}

tr:last-child td {
  border-bottom: 0;
}

.num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.damage-table th:first-child,
.damage-table td:first-child,
.received-skill-table th:first-child,
.received-skill-table td:first-child,
.received-source-table th:first-child,
.received-source-table td:first-child,
.skill-target-table th:first-child,
.skill-target-table td:first-child,
.condition-event-table th:first-child,
.condition-event-table td:first-child {
  left: 0;
  position: sticky;
  z-index: 2;
}

.damage-table th:first-child,
.received-skill-table th:first-child,
.received-source-table th:first-child,
.skill-target-table th:first-child,
.condition-event-table th:first-child {
  z-index: 3;
}

.damage-table td:first-child,
.received-skill-table td:first-child,
.received-source-table td:first-child,
.skill-target-table td:first-child,
.condition-event-table td:first-child {
  background: rgba(25, 29, 27, 0.96);
  box-shadow: 1px 0 0 var(--line);
}

.skillbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  overflow: visible;
}

.overview-skillbar {
  gap: 8px;
}

.skill {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  display: flex;
  font-size: 11px;
  font-weight: 650;
  height: 24px;
  justify-content: flex-start;
  min-width: 0;
  overflow: hidden;
  padding: 0 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.skill.empty {
  color: #98a39e;
}

.timeline {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
}

.timeline-row {
  align-items: center;
  display: grid;
  gap: 12px;
  grid-template-columns: 72px 170px minmax(220px, 1fr);
}

.objective-row {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: 6px;
  grid-template-columns: 72px minmax(260px, 1fr) minmax(180px, 0.72fr);
  padding: 9px 10px;
}

.objective-row.capture {
  border-left-color: var(--accent-strong);
}

.objective-row.return {
  border-left-color: var(--good);
}

.objective-row.pickup {
  border-left-color: #8fa7ff;
}

.objective-row.drop {
  border-left-color: var(--warn);
}

.objective-row.repair {
  border-left-color: #6dcfc2;
}

.objective-row.catapult {
  border-left-color: #d4a847;
}

.objective-row strong {
  min-width: 0;
}

.match-timeline-panel {
  overflow: hidden;
}

.objective-subtabs-panel {
  margin-bottom: 12px;
}

.objective-subtabs {
  justify-content: flex-start;
  margin-bottom: 0;
}

.guild-lord-intro-panel {
  display: grid;
  gap: 14px;
}

.guild-lord-rules {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.guild-lord-rules span,
.guild-lord-defenders span {
  background: rgba(255, 231, 105, 0.08);
  border: 1px solid rgba(255, 231, 105, 0.18);
  border-radius: 4px;
  color: #f1f4ef;
  font-size: 10px;
  font-weight: 850;
  padding: 4px 7px;
  text-transform: uppercase;
}

.guild-lord-score-grid,
.guild-lord-lord-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.guild-lord-score-card,
.guild-lord-lord-card {
  background: rgba(17, 20, 19, 0.78);
  border: 1px solid rgba(214, 74, 67, 0.08);
  border-radius: 6px;
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 13px 14px;
}

.guild-lord-score-card.team-blue,
.guild-lord-lord-card.team-blue {
  border-left: 3px solid var(--team-blue);
}

.guild-lord-score-card.team-red,
.guild-lord-lord-card.team-red {
  border-left: 3px solid var(--team-red);
}

.guild-lord-score-card h3,
.guild-lord-lord-card h3 {
  color: var(--ink);
  font-size: 15px;
  margin: 2px 0 0;
}

.guild-lord-defenders {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.guild-lord-table-panel {
  margin-top: 12px;
}

.guild-lord-chart-panel {
  display: grid;
  gap: 0;
  margin-top: 12px;
  overflow: hidden;
}

.guild-lord-chart-legend {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.guild-lord-chart-legend span {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  display: inline-flex;
  font-size: 11px;
  font-weight: 800;
  gap: 6px;
  min-height: 26px;
  padding: 4px 7px;
  text-transform: uppercase;
}

.guild-lord-chart-legend i {
  border-radius: 999px;
  display: inline-block;
  height: 8px;
  width: 8px;
}

.guild-lord-chart-legend strong {
  color: var(--ink);
  font-size: 12px;
}

.guild-lord-chart-legend .team-blue i {
  background: var(--team-blue);
  box-shadow: 0 0 0 3px var(--team-blue-soft);
}

.guild-lord-chart-legend .team-red i {
  background: var(--team-red);
  box-shadow: 0 0 0 3px var(--team-red-soft);
}

.guild-lord-damage-chart {
  border-top: 1px solid var(--line);
}

.guild-lord-damage-line {
  stroke-width: 3.5;
}

.guild-lord-source-table {
  min-width: 940px;
}

.guild-lord-leader-table {
  min-width: 820px;
}

.guild-lord-packet-table {
  min-width: 1120px;
}

.guild-lord-leader-table td small,
.guild-lord-source-table td small,
.guild-lord-packet-table td small {
  color: rgba(154, 166, 159, 0.72);
  display: block;
  font-size: 10px;
  margin-top: 2px;
}

.guild-lord-heal-row td {
  color: #d7f5de;
}

.match-timeline-controls {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(210px, auto) minmax(280px, auto) minmax(280px, 1fr) auto;
  padding: 12px 14px;
}

.match-timeline-layer-controls,
.match-timeline-zoom-buttons,
.match-timeline-range,
.match-timeline-window {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.match-timeline-layer-controls label {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  gap: 6px;
  min-height: 30px;
  padding: 5px 8px;
}

.match-timeline-layer-controls label.active {
  background: rgba(85, 214, 199, 0.11);
  border-color: rgba(85, 214, 199, 0.32);
  color: var(--text);
}

.match-timeline-layer-controls input {
  accent-color: var(--accent-strong);
}

.match-timeline-layer-controls em {
  color: var(--muted);
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
}

.match-timeline-help {
  align-items: center;
  border: 1px solid rgba(154, 166, 159, 0.34);
  border-radius: 50%;
  color: rgba(220, 228, 222, 0.82);
  cursor: help;
  display: inline-flex;
  font-size: 10px;
  font-style: normal;
  font-weight: 850;
  height: 22px;
  justify-content: center;
  justify-self: end;
  line-height: 1;
  width: 22px;
}

.match-timeline-zoom-buttons button {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 750;
  min-height: 30px;
  padding: 5px 9px;
}

.match-timeline-range {
  display: grid;
  grid-template-columns: 42px minmax(80px, 1fr) minmax(80px, 1fr) 42px;
  justify-self: stretch;
}

.match-timeline-range span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

.match-timeline-range input {
  min-width: 0;
}

.match-timeline-window {
  display: grid;
  grid-template-columns: 48px minmax(120px, 1fr) 48px;
  justify-self: stretch;
}

.match-timeline-window div {
  background: linear-gradient(90deg, rgba(255, 112, 109, 0.55), rgba(91, 140, 255, 0.55));
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 8px;
}

.match-timeline-window span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-align: center;
}

.match-timeline-chart {
  background: rgba(9, 13, 12, 0.42);
  border-bottom: 1px solid var(--line);
  cursor: crosshair;
  min-height: 330px;
  position: relative;
  user-select: none;
}

.match-timeline-chart svg {
  display: block;
  height: auto;
  width: 100%;
}

.match-timeline-axis,
.match-timeline-grid {
  stroke: rgba(224, 241, 236, 0.14);
  stroke-width: 1;
}

.match-timeline-grid.strong {
  stroke: rgba(224, 241, 236, 0.22);
}

.match-timeline-axis-label,
.match-timeline-lane-label,
.match-timeline-event-label,
.match-timeline-y-label {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.match-timeline-axis-label.end {
  text-anchor: end;
}

.match-timeline-y-label {
  text-anchor: end;
}

.match-timeline-lane-label {
  fill: rgba(238, 244, 239, 0.82);
  text-anchor: start;
}

.match-timeline-line {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3;
}

.match-timeline-line.morale {
  stroke-width: 3;
}

.match-timeline-hover-target {
  pointer-events: stroke;
  stroke: rgba(255, 255, 255, 0);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 28;
}

.match-timeline-chart-hover-target {
  cursor: crosshair;
  fill: rgba(255, 255, 255, 0);
  pointer-events: all;
}

.match-timeline-hover-target:hover {
  stroke: rgba(255, 255, 255, 0.12);
}

.match-timeline-tooltip {
  background: rgba(15, 18, 17, 0.96);
  border: 1px solid rgba(224, 241, 236, 0.24);
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.42);
  color: var(--ink);
  font-size: 12px;
  left: 0;
  line-height: 1.35;
  max-width: min(320px, calc(100% - 16px));
  min-width: 190px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateZ(0);
  transition: opacity 60ms linear;
  z-index: 4;
}

.match-timeline-tooltip.visible {
  opacity: 1;
}

.match-timeline-tooltip-body {
  display: grid;
  gap: 5px;
}

.match-timeline-tooltip-body b {
  color: var(--ink);
  font-weight: 800;
}

.match-timeline-tooltip-body span {
  color: var(--muted);
  line-height: 1.35;
}

.match-timeline-tooltip-head {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 8px;
  padding-bottom: 7px;
}

.match-timeline-tooltip-head span,
.match-timeline-tooltip-grid span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.match-timeline-tooltip-head strong {
  color: #ffe96a;
  font-size: 20px;
  line-height: 1;
}

.match-timeline-tooltip-grid {
  display: grid;
  gap: 5px 12px;
  grid-template-columns: auto minmax(0, 1fr);
}

.match-timeline-tooltip-grid b {
  color: var(--ink);
  font-weight: 750;
  min-width: 0;
  overflow-wrap: anywhere;
}

.match-timeline-tooltip-deaths {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 3px 8px;
  grid-template-columns: auto minmax(0, 1fr);
  margin-top: 8px;
  padding-top: 8px;
}

.match-timeline-tooltip-deaths > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  grid-column: 1 / -1;
  text-transform: uppercase;
}

.match-timeline-tooltip-deaths b {
  color: #ffe96a;
  font-weight: 850;
}

.match-timeline-tooltip-deaths strong {
  color: var(--ink);
  font-weight: 800;
  min-width: 0;
  overflow-wrap: anywhere;
}

.match-timeline-tooltip-deaths em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  grid-column: 2;
  min-width: 0;
  overflow-wrap: anywhere;
}

.match-timeline-selection {
  background: rgba(255, 233, 106, 0.12);
  border: 1px solid rgba(255, 233, 106, 0.62);
  border-radius: 4px;
  bottom: 46px;
  display: none;
  position: absolute;
  top: 40px;
  z-index: 3;
}

.match-timeline-selection.visible {
  display: block;
}

.match-timeline-line.team-blue,
.match-timeline-event-marker.team-blue,
.match-timeline-event-dot.team-blue,
.match-timeline-death-marker.team-blue {
  stroke: var(--team-blue);
}

.match-timeline-line.team-red,
.match-timeline-event-marker.team-red,
.match-timeline-event-dot.team-red,
.match-timeline-death-marker.team-red {
  stroke: var(--team-red);
}

.match-timeline-event-marker {
  opacity: 0.26;
  stroke-width: 1;
}

.match-timeline-event-dot {
  fill: var(--bg);
  stroke-width: 2;
}

.match-timeline-death-marker {
  opacity: 0.32;
  stroke-dasharray: 4 4;
  stroke-width: 1.5;
}

.match-timeline-flag-icon line,
.match-timeline-flag-icon path,
.match-timeline-flag-icon circle,
.match-timeline-death-icon circle,
.match-timeline-death-icon path {
  vector-effect: non-scaling-stroke;
}

.match-timeline-flag-icon line,
.match-timeline-flag-icon circle {
  fill: none;
  stroke: #f1f4ef;
  stroke-linecap: round;
  stroke-width: 2;
}

.match-timeline-flag-icon path {
  fill: #f1f4ef;
  stroke: #f1f4ef;
  stroke-linejoin: round;
  stroke-width: 1;
}

.match-timeline-flag-icon.team-blue line,
.match-timeline-flag-icon.team-blue circle {
  stroke: var(--team-blue);
}

.match-timeline-flag-icon.team-blue path {
  fill: var(--team-blue);
  stroke: var(--team-blue);
}

.match-timeline-flag-icon.team-red line,
.match-timeline-flag-icon.team-red circle {
  stroke: var(--team-red);
}

.match-timeline-flag-icon.team-red path {
  fill: var(--team-red);
  stroke: var(--team-red);
}

.match-timeline-death-icon circle {
  fill: #101413;
  stroke: #f36a64;
  stroke-width: 2;
}

.match-timeline-death-icon path {
  fill: none;
  stroke: #f36a64;
  stroke-linecap: round;
  stroke-width: 1.5;
}

.match-timeline-death-icon.team-blue circle,
.match-timeline-death-icon.team-blue path {
  stroke: var(--team-blue);
}

.match-timeline-death-icon.team-red circle,
.match-timeline-death-icon.team-red path {
  stroke: var(--team-red);
}

.match-timeline-objective-hover-target {
  cursor: pointer;
  fill: rgba(255, 255, 255, 0);
  pointer-events: all;
  stroke: rgba(255, 255, 255, 0);
}

.match-timeline-death-hover-target {
  cursor: pointer;
  fill: rgba(255, 255, 255, 0);
  pointer-events: all;
  stroke: rgba(255, 255, 255, 0);
}

.match-timeline-objective-hover-target:hover,
.match-timeline-death-hover-target:hover {
  fill: rgba(255, 255, 255, 0.12);
}

.match-timeline-event-label,
.match-timeline-death-label {
  text-anchor: middle;
}

.match-timeline-death-label {
  fill: rgba(255, 210, 208, 0.82);
  font-size: 11px;
  font-weight: 800;
}

.match-timeline-events {
  max-height: 360px;
  overflow: auto;
}

.pill {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  justify-content: center;
  padding: 4px 8px;
}

.pill.ok {
  color: var(--good);
}

.pill.warn {
  color: var(--warn);
}

.pill.info {
  color: var(--accent-strong);
}

.rank-list {
  display: grid;
}

.rank-row {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 10px;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  padding: 10px 12px;
}

.rank-row:last-child {
  border-bottom: 0;
}

.rank {
  align-items: center;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  height: 26px;
  justify-content: center;
  width: 26px;
}

.rank-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quality {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 750;
  padding: 4px 8px;
}

.quality.known,
.quality.assumed,
.quality.same_timestamp_gv42,
.quality.weapon_context_baseline,
.quality.weapon_context_effective,
.quality.static_npc_hp,
.quality.spirit_level_hp {
  background: rgba(24, 169, 153, 0.12);
  border-color: rgba(85, 214, 199, 0.42);
  color: var(--accent-strong);
}

.quality.weapon_family_assumption {
  background: rgba(108, 130, 255, 0.14);
  border-color: rgba(137, 153, 255, 0.44);
  color: #b8c1ff;
}

.quality.flag_bundle_assumption,
.quality.spirit_spawning_power_assumption {
  background: rgba(108, 130, 255, 0.12);
  border-color: rgba(137, 153, 255, 0.38);
  color: #c7cdfd;
}

.quality.shield_plus_30_assumption {
  background: rgba(91, 127, 255, 0.16);
  border-color: rgba(124, 151, 255, 0.48);
  color: #ccd5ff;
}

.quality.divine_favor_inferred,
.quality.skill_table_inferred {
  background: rgba(24, 169, 153, 0.16);
  border-color: rgba(85, 214, 199, 0.5);
  color: #a8fff3;
}

.quality.reconciled_assumption {
  background: rgba(24, 169, 153, 0.14);
  border-color: rgba(85, 214, 199, 0.42);
  color: #d8f0ff;
}

.quality.snapshot_max_hp_context {
  background: rgba(108, 130, 255, 0.1);
  border-color: rgba(137, 153, 255, 0.34);
  color: #c7cdfd;
}

.quality.default_estimate,
.quality.spirit_spawning_power_unknown,
.quality.unresolved,
.quality.warn {
  background: rgba(224, 168, 76, 0.13);
  border-color: rgba(224, 168, 76, 0.42);
  color: var(--warn);
}

.quality-diagnostics-panel .panel-head {
  background: rgba(7, 9, 8, 0.42);
}

.quality-metric-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.quality-metric {
  background: rgba(7, 9, 8, 0.34);
  min-width: 0;
  padding: 12px 14px;
}

.quality-metric strong,
.quality-metric span {
  display: block;
  overflow-wrap: anywhere;
}

.quality-metric strong {
  color: #f1f4ef;
  font-size: 18px;
}

.quality-metric span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0;
  margin-top: 3px;
  text-transform: uppercase;
}

.notice {
  background: rgba(108, 130, 255, 0.1);
  border-bottom: 1px solid var(--line);
  color: #c7cdfd;
  font-size: 13px;
  line-height: 1.45;
  padding: 10px 14px;
}

.unresolved-list {
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
}

.embedded-table {
  border-top: 1px solid var(--line);
}

.footer {
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
  margin-top: 18px;
  padding: 12px 0;
}

.ehp-shell {
  max-width: 1180px;
}

.ehp-hero {
  align-items: end;
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(260px, 1fr) auto;
  margin-bottom: 14px;
  padding-bottom: 16px;
}

.ehp-hero h1 {
  font-size: 34px;
  letter-spacing: 0;
  line-height: 1.08;
  margin: 0 0 8px;
}

.ehp-hero p {
  line-height: 1.45;
  margin: 0 0 12px;
}

.ehp-hero code {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--accent-strong);
  display: inline-block;
  max-width: 100%;
  overflow-x: auto;
  padding: 8px 10px;
}

.ehp-main-controls {
  margin-top: 0;
}

.ehp-fields {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  padding: 14px;
}

.ehp-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ehp-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  text-transform: uppercase;
}

.ehp-field input {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
  min-width: 0;
  padding: 10px 11px;
  width: 100%;
}

.ehp-compare-grid,
.ehp-results {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ehp-input-panel {
  margin-top: 14px;
}

.ehp-results {
  margin-top: 14px;
}

.ehp-result {
  background: var(--panel);
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.ehp-result.survive {
  border-left-color: var(--good);
}

.ehp-result.exact {
  border-left-color: var(--warn);
}

.ehp-result.die {
  border-left-color: var(--bad);
}

.ehp-result-head {
  align-items: start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding: 14px;
}

.ehp-result h3 {
  font-size: 18px;
  margin: 0 0 4px;
}

.ehp-result-head strong {
  color: var(--ink);
  text-align: right;
}

.ehp-meter {
  background: rgba(255, 255, 255, 0.06);
  height: 12px;
  margin: 0 14px 14px;
  overflow: hidden;
}

.ehp-meter span,
.ehp-chart-track span {
  background: linear-gradient(90deg, var(--accent), var(--good));
  display: block;
  height: 100%;
}

.ehp-stat-grid {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 12px 14px 14px;
}

.ehp-stat-grid span {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  min-width: 0;
  padding: 8px;
}

.ehp-stat-grid strong,
.ehp-stat-grid em,
.ehp-optimizer-summary strong,
.ehp-optimizer-summary em {
  display: block;
  font-style: normal;
}

.ehp-stat-grid strong {
  font-size: 17px;
}

.ehp-stat-grid em,
.ehp-optimizer-summary em {
  color: var(--muted);
  font-size: 12px;
}

.ehp-chart {
  display: grid;
  gap: 8px;
  padding: 14px;
}

.ehp-chart-row {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: 76px minmax(160px, 1fr) 92px 70px;
}

.ehp-axis,
.ehp-chart-row em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.ehp-chart-row strong {
  text-align: right;
}

.ehp-chart-track {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 14px;
  overflow: hidden;
}

.optimizer-fields {
  border-bottom: 1px solid var(--line);
}

.ehp-optimizer {
  display: grid;
  gap: 14px;
  padding: 14px;
}

.ehp-optimizer-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ehp-ai-breakpoint .ehp-optimizer-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 14px;
}

.ehp-optimizer-summary > div {
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px;
}

.ehp-optimizer-summary .label {
  color: var(--muted);
  display: block;
  font-size: 12px;
  font-weight: 750;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.ehp-ai-breakpoint-meter {
  background: rgba(34, 40, 36, 0.55);
  border: 1px solid var(--line);
  border-radius: 999px;
  height: 14px;
  margin: 0 14px 10px;
  overflow: hidden;
}

.ehp-ai-breakpoint-meter span {
  background: linear-gradient(90deg, var(--accent), var(--accent-strong));
  display: block;
  height: 100%;
}

.ehp-ai-breakpoint p {
  margin: 0 14px 14px;
}

.ehp-optimizer-bars {
  align-items: end;
  background: rgba(34, 40, 36, 0.45);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 2px;
  height: 160px;
  padding: 10px;
}

.ehp-optimizer-bar {
  background: var(--bad);
  border-radius: 4px 4px 0 0;
  flex: 1 1 4px;
  min-width: 3px;
  opacity: 0.68;
}

.ehp-optimizer-bar.survive {
  background: var(--good);
}

.ehp-optimizer-bar.best {
  background: var(--accent-strong);
  box-shadow: 0 0 0 2px rgba(85, 214, 199, 0.28);
  opacity: 1;
}

@media (max-width: 820px) {
  .shell {
    padding: 16px;
  }

  .upload,
  .catalog-hero,
  .catalog-filters,
  .catalog-card-link,
  .report-header,
  .match-summary-band,
  .match-summary-grid,
  .team-matchup,
  .overview-teams-grid,
  .overview-roster-grid,
  .ehp-hero,
  .ehp-compare-grid,
  .ehp-results,
  .ehp-optimizer-summary,
  .ehp-ai-breakpoint .ehp-optimizer-summary,
  .metrics,
  .combat-dashboard,
  .dashboard-grid,
  .health-grid,
  .skill-grid,
  .player-profile-grid,
  .team-grid,
  .movement-map-controls,
  .movement-map-layout,
  .damage-graph-layout,
  .interrupt-hero,
  .interrupt-score-grid,
  .interrupt-dashboard-grid,
  .movement-morale-teams,
  .match-timeline-controls {
    grid-template-columns: 1fr;
  }

  .guild-lord-score-grid,
  .guild-lord-lord-grid {
    grid-template-columns: 1fr;
  }

  .guild-lord-rules {
    justify-content: flex-start;
  }

  .toolbar {
    justify-content: flex-start;
  }

  .catalog-hero-stat,
  .catalog-card-stats {
    text-align: left;
  }

  .catalog-card-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .report-tabs {
    align-items: stretch;
    flex-direction: column;
    overflow-x: visible;
    position: static;
  }

  .tab-group-buttons {
    flex-wrap: wrap;
  }

  .tab-button {
    flex: 1 1 118px;
    justify-content: flex-start;
  }

  .player-tab-strip,
  .player-tab-team-list {
    grid-template-columns: 1fr;
  }

  .player-tab-strip::before,
  .player-tab-team-list::before {
    display: none;
  }

  .damage-table-head {
    align-items: stretch;
  }

  .damage-view-tabs,
  .damage-view-button {
    flex: 1 1 auto;
  }

  .interrupt-feed-head {
    align-items: stretch;
    flex-direction: column;
  }

  .interrupt-filter-row,
  .interrupt-team-filters {
    justify-content: flex-start;
  }

  .interrupt-filter-button {
    flex: 1 1 96px;
    justify-content: center;
  }

  .interrupt-event-card,
  .interrupt-missed-attempt {
    grid-template-columns: 1fr;
  }

  .interrupt-event-line {
    align-items: flex-start;
    flex-direction: column;
  }

  .team-match-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .match-summary-band {
    flex-direction: column;
  }

  .overview-roster-team {
    border-bottom: 1px solid var(--line);
    border-right: 0;
  }

  .overview-roster-team:last-child {
    border-bottom: 0;
  }

  .overview-player-main {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .overview-player-role {
    grid-column: 1 / -1;
  }

  .overview-player-role span {
    min-width: calc(50% - 3px);
  }

  .timeline-row {
    grid-template-columns: 1fr;
  }

  .match-timeline-range {
    grid-template-columns: 44px minmax(0, 1fr) minmax(0, 1fr) 44px;
  }

  .match-timeline-window {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
  }

  .player-row {
    grid-template-columns: 1fr;
  }

  .player-skills {
    align-items: flex-start;
    flex-direction: column;
  }

  .ehp-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ehp-chart-row {
    grid-template-columns: 70px minmax(120px, 1fr);
  }

  .ehp-chart-row strong,
  .ehp-chart-row em {
    text-align: left;
  }

  .death-replay-head {
    align-items: stretch;
    display: grid;
  }

  .death-replay-controls {
    grid-template-columns: minmax(84px, auto) minmax(54px, auto) minmax(0, 1fr) 44px;
  }

  .death-replay-stage {
    min-height: 220px;
  }

  .death-replay-timeline {
    width: min(280px, 48%);
  }

  .movement-map-stage {
    border-bottom: 1px solid var(--line);
    border-right: 0;
    height: 460px;
    position: static;
  }

  .movement-map-svg {
    height: 460px;
  }

  .movement-map-layout {
    min-height: 0;
  }

  .movement-map-sidebar {
    max-height: none;
  }

  .player-summary-table-wrap {
    overflow-x: auto;
  }

  .loadout-armory .loadout-armory-body {
    grid-template-columns: 1fr;
  }

  .loadout-armory-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .loadout-base-hp {
    align-items: flex-start;
    justify-items: start;
  }

  .loadout-armory .loadout-skillbar .skill-token.icon-only {
    height: 78px;
    width: 78px;
  }

  .loadout-armory .loadout-skillbar .skill-token.icon-only .skill-token-icon {
    height: 68px;
    width: 68px;
  }

  .loadout-equipment-grid {
    grid-template-columns: 1fr;
  }

  .armor-loadout-grid,
  .loadout-armory .armor-loadout-grid {
    grid-template-columns: 1fr;
  }

  .loadout-skillbar {
    justify-content: flex-start;
  }

  .loadout-skillbar .skill-token.icon-only {
    height: 78px;
    width: 78px;
  }

  .loadout-skillbar .skill-token.icon-only .skill-token-icon {
    height: 68px;
    width: 68px;
  }

  .weapon-loadout-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .loadout-armory .weapon-loadout-card {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .weapon-loadout-mods {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .loadout-armory .weapon-loadout-mods {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }

  .weapon-loadout-hp {
    font-size: 21px;
  }

  .damage-graph-row {
    grid-template-columns: minmax(74px, 0.75fr) minmax(100px, 1fr) 64px;
  }

  .death-recap-head,
  .death-recap-grid,
  .death-recap-mini-row,
  .death-timeline-row {
    grid-template-columns: 1fr;
  }

  .death-recap-card .death-damage-mix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .death-recap-statline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .death-recap-statline strong,
  .death-recap-statline em {
    text-align: left;
  }

  .death-damage-mix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .death-timeline-row .pill,
  .death-timeline-row .skill-table-token {
    justify-self: start;
  }

  .death-timeline-detail {
    align-items: flex-start;
    flex-direction: column;
  }
}