/* WHBOO Killboard — "Quasar" holographic-console theme.
   Chakra Petch (display / UI) + Share Tech Mono (numeric data). */

:root {
  --void:        #06090e;
  --panel:       #0c141d;
  --panel-2:     #101c27;
  --line:        rgba(112,206,210,.14);
  --line-soft:   rgba(112,206,210,.07);
  --cyan:        #5fe6dd;
  --cyan-bright: #aaf7ef;
  --cyan-deep:   #1f4d4e;
  --cyan-glow:   rgba(95,230,221,.55);
  --text:        #b6c8ca;
  --text-dim:    #647f86;
  --head:        #e4f1f2;
  --ink:         #04100f;
  --loss:        #ff5160;
  --drop:        #5ce39a;
  --gold:        #ecba60;
  --display: 'Chakra Petch', 'Segoe UI', sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, monospace;
  --clip:    polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
  --clip-sm: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 400 14px/1.55 var(--display);
  color: var(--text);
  background:
    radial-gradient(820px 520px at 78% -8%, rgba(58,130,138,.20), transparent 72%),
    radial-gradient(680px 560px at 3% 6%, rgba(94,74,150,.17), transparent 70%),
    radial-gradient(900px 700px at 50% 122%, rgba(36,60,96,.16), transparent 72%),
    var(--void);
  background-attachment: fixed;
}

/* faint tech-grid, masked toward the edges, plus a screen vignette */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(circle at 50% 28%, #000 35%, transparent 92%);
  mask-image: radial-gradient(circle at 50% 28%, #000 35%, transparent 92%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  box-shadow: inset 0 0 240px 50px rgba(0,0,0,.7);
}
body > * { position: relative; z-index: 1; }

::selection { background: var(--cyan); color: var(--ink); }
:focus-visible { outline: 1px solid var(--cyan); outline-offset: 2px; }

a { color: var(--cyan); text-decoration: none;
    transition: color .13s, text-shadow .13s; }
a:hover { color: var(--cyan-bright); text-shadow: 0 0 10px var(--cyan-glow); }
code {
  font-family: var(--mono); font-size: .85em; color: var(--cyan);
  background: rgba(95,230,221,.08); padding: .05rem .3rem;
}

h1, h2, h3 { font-family: var(--display); color: var(--head); margin: 0 0 .6rem; }
h1 {
  font-size: 1.4rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .07em; display: flex; align-items: center; gap: .55rem;
}
h1::before {
  content: ""; width: 4px; height: 1.1em;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}
h2 { font-size: 1rem; font-weight: 600; text-transform: uppercase;
     letter-spacing: .08em; }
h3 {
  font-family: var(--mono); font-size: .72rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .16em; color: var(--cyan);
  margin: 1.1rem 0 .4rem; opacity: .85;
}
.muted { color: var(--text-dim); }
.nowrap { white-space: nowrap; }
.num { text-align: right; font-family: var(--mono); }
.isk { color: var(--gold); font-family: var(--mono); }

/* --- top bar -------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 1.6rem;
  padding: .5rem 1.4rem;
  background: linear-gradient(180deg, rgba(15,27,38,.97), rgba(7,11,17,.97));
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgba(95,230,221,.10), 0 10px 32px rgba(0,0,0,.55);
  animation: drop .55s cubic-bezier(.2,.7,.2,1) both;
}
.brand { display: flex; align-items: center; gap: .6rem; }
.brand:hover { text-decoration: none; }
.brand-logo {
  width: 36px; height: 36px; object-fit: contain;
  filter: drop-shadow(0 0 7px rgba(139,118,214,.6));
}
.brand-text {
  font-weight: 700; font-size: 1.04rem; text-transform: uppercase;
  letter-spacing: .15em; color: var(--head); white-space: nowrap;
}
.brand-text em { font-style: normal; font-weight: 300; color: var(--cyan); }
.topbar nav { display: flex; gap: .25rem; }
.topbar nav a {
  font-family: var(--mono); font-size: .75rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-dim);
  padding: .35rem .7rem; border: 1px solid transparent;
}
.topbar nav a:hover {
  color: var(--cyan-bright); border-color: var(--line);
  background: rgba(95,230,221,.05); text-shadow: none;
}
.topbar .who { margin-left: auto; display: flex; align-items: center; gap: .55rem; }
.topbar .who img {
  width: 30px; height: 30px; border: 1px solid var(--line);
  clip-path: var(--clip-sm);
}
.topbar .who span { font-size: .85rem; }
.topbar .who .ally { color: var(--cyan); font-family: var(--mono);
                     font-size: .76rem; }
.topbar .who .logout-form { display: inline; margin: 0; }
.topbar .who .logout {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-dim);
  background: none; border: none; padding: 0; cursor: pointer;
}
.topbar .who .logout:hover { color: var(--cyan); }

main { max-width: var(--page-max, 1180px); margin: 1.8rem auto; padding: 0 1.4rem; }
/* The battle report's horizontal-scroll layout benefits from every pixel
   of viewport: more sides visible without scrolling. Other pages keep
   the narrower 1180px reading width because the dense feed/detail
   layouts read worse when stretched ultra-wide. Lifted at the body level
   so the footer matches main's width and the bottom edge stays aligned. */
body:has(.br-sides) { --page-max: min(2200px, 95vw); }
main > * { animation: rise .5s cubic-bezier(.2,.7,.2,1) both; }
main > *:nth-child(1) { animation-delay: .05s; }
main > *:nth-child(2) { animation-delay: .12s; }
main > *:nth-child(3) { animation-delay: .19s; }
main > *:nth-child(4) { animation-delay: .26s; }
main > *:nth-child(5) { animation-delay: .33s; }
main > *:nth-child(6) { animation-delay: .40s; }

footer {
  max-width: var(--page-max, 1180px); margin: 3rem auto 1.6rem; padding: 1rem 1.4rem 0;
  border-top: 1px solid var(--line-soft);
  font-family: var(--mono); font-size: .72rem; letter-spacing: .03em;
  color: var(--text-dim);
}

@keyframes drop { from { opacity: 0; transform: translateY(-100%); }
                  to   { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); }
                  to   { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* --- panels --------------------------------------------------------------- */
.panel {
  position: relative;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(95,230,221,.02) 3px 4px),
    linear-gradient(168deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  clip-path: var(--clip);
  padding: 1.05rem 1.2rem;
}
.panel::before {
  content: ""; position: absolute; top: 6px; left: 6px;
  width: 13px; height: 13px;
  border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan);
  opacity: .75;
}

/* --- centered boxes (login / errors) ------------------------------------- */
.centerbox {
  position: relative; max-width: 480px; margin: 4rem auto 3rem;
  text-align: center;
  background: linear-gradient(160deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); clip-path: var(--clip);
  padding: 2.4rem 2rem;
}
.centerbox::before {
  content: ""; position: absolute; top: 7px; left: 7px;
  width: 18px; height: 18px;
  border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan);
}
.centerbox h1 { justify-content: center; }
.centerbox p { color: var(--text); }
.deny-reason { color: var(--loss); font-family: var(--mono); }
.login-logo {
  width: 152px; height: auto; margin-bottom: .5rem;
  filter: drop-shadow(0 0 30px rgba(139,118,214,.5))
          drop-shadow(0 0 14px rgba(95,230,221,.28));
}

/* --- buttons -------------------------------------------------------------- */
.sso-button, .battleform button {
  font-family: var(--display); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--ink); background: var(--cyan); border: none;
  padding: .62rem 1.5rem; cursor: pointer; clip-path: var(--clip-sm);
  box-shadow: 0 0 18px rgba(95,230,221,.28);
  transition: background .13s, box-shadow .13s, transform .08s;
}
.sso-button { display: inline-block; margin-top: 1.2rem; }
.sso-button:hover, .battleform button:hover {
  background: var(--cyan-bright); color: var(--ink); text-decoration: none;
  box-shadow: 0 0 28px rgba(95,230,221,.55);
}
.sso-button:active, .battleform button:active { transform: translateY(1px); }

/* --- killmail list -------------------------------------------------------- */
.killlist {
  width: 100%; border-collapse: collapse; margin-top: .9rem;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); clip-path: var(--clip);
}
.killlist thead th {
  font-family: var(--mono); font-size: .67rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .14em; color: var(--cyan);
  text-align: left; padding: .55rem .7rem;
  background: rgba(95,230,221,.05); border-bottom: 1px solid var(--line);
}
.killlist th.num { text-align: right; }
.killlist td {
  padding: .4rem .7rem; border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.killlist tbody tr { cursor: pointer; transition: background .12s; }
.killlist tbody tr:hover { background: rgba(95,230,221,.06); }
.killlist tbody tr:last-child td { border-bottom: none; }
.row-kill { border-left: 2px solid var(--cyan-deep); }
.row-loss { border-left: 2px solid var(--loss); }
.row-kill:hover { box-shadow: inset 3px 0 0 var(--cyan); }
.row-loss:hover { box-shadow: inset 3px 0 0 var(--loss); }

/* clustered "Battle in X" row — spans all 8 killtable columns */
.row-battle { border-left: 2px solid var(--gold); }
.row-battle td {
  padding: .7rem 1rem;
  background:
    linear-gradient(90deg, rgba(236,186,96,.10), rgba(236,186,96,.02) 70%, transparent);
}
.row-battle:hover td { background:
  linear-gradient(90deg, rgba(236,186,96,.16), rgba(236,186,96,.04) 70%, transparent); }
.battle-row {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
}
.battle-flair {
  color: var(--gold); font-size: 1.25rem; line-height: 1;
  text-shadow: 0 0 8px rgba(236,186,96,.55);
  width: 1.6rem; text-align: center;
}
.battle-title { font-family: var(--display); font-weight: 600;
                font-size: .98rem; color: var(--head); letter-spacing: .02em; }
.battle-stats {
  display: inline-flex; gap: .55rem; align-items: baseline; flex-wrap: wrap;
  font-family: var(--mono); font-size: .82rem; color: var(--text);
}
.battle-stats .bs-count { color: var(--gold); }
.battle-stats .bs-isk   { color: var(--gold); }
.battle-stats .bs-sep   { color: var(--text-dim); }
.battle-time { margin-left: auto; font-family: var(--mono); font-size: .76rem; }
.ship-ico, .item-ico {
  width: 30px; height: 30px; vertical-align: middle;
  border: 1px solid var(--line); background: rgba(0,0,0,.35);
}

.pager {
  margin: 1.3rem 0; display: flex; gap: 1rem; align-items: center;
  font-family: var(--mono); font-size: .78rem;
}
.pager a {
  border: 1px solid var(--line); padding: .3rem .8rem;
  text-transform: uppercase; letter-spacing: .08em; clip-path: var(--clip-sm);
}
.pager a:hover { background: rgba(95,230,221,.07); }
.pager span { color: var(--text-dim); text-transform: uppercase;
              letter-spacing: .1em; }

/* --- highlights strip: four hero cards above the feed -------------------- */
.highlights {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .8rem; margin: 0 0 1.4rem;
}
.hl {
  display: block; padding: .9rem 1rem .85rem;
  background:
    linear-gradient(180deg, rgba(95,230,221,.04), rgba(95,230,221,0) 60%),
    var(--panel);
  border: 1px solid var(--line); clip-path: var(--clip-sm);
  color: inherit; transition: transform .14s, border-color .14s, box-shadow .14s;
  position: relative; overflow: hidden;
}
.hl::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent, var(--cyan-deep)),
                              transparent);
  opacity: .55;
}
.hl:hover {
  transform: translateY(-1px);
  border-color: var(--accent, var(--cyan));
  box-shadow: 0 6px 22px rgba(0,0,0,.35),
              0 0 0 1px rgba(95,230,221,.10) inset;
  text-decoration: none;
}
.hl-head {
  display: flex; align-items: baseline; gap: .55rem;
  font-family: var(--display); font-size: .72rem;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--text-dim);
}
.hl-flair {
  color: var(--accent, var(--cyan)); font-size: 1rem;
  text-shadow: 0 0 8px var(--accent-glow, var(--cyan-glow));
  letter-spacing: 0;
}
.hl-label  { color: var(--accent-label, var(--cyan)); }
.hl-sub    { margin-left: auto; font-size: .65rem; letter-spacing: .12em; }
.hl-metric {
  margin: .35rem 0 .15rem; font-family: var(--mono);
  font-size: 1.35rem; color: var(--accent-metric, var(--gold));
  letter-spacing: .02em; line-height: 1.1;
  text-shadow: 0 0 12px var(--accent-glow, rgba(236,186,96,.35));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hl-line   { font-size: .85rem; color: var(--text); line-height: 1.35; }
.hl-line.muted { color: var(--text-dim); font-size: .78rem; }

/* per-card accent tokens — set on the card root so children read them. */
.hl-kill   { --accent: var(--cyan);
             --accent-glow: var(--cyan-glow);
             --accent-label: var(--cyan); }
.hl-loss   { --accent: var(--loss);
             --accent-glow: rgba(255,81,96,.45);
             --accent-label: var(--loss);
             --accent-metric: var(--loss); }
.hl-battle { --accent: var(--gold);
             --accent-glow: rgba(236,186,96,.45);
             --accent-label: var(--gold); }
.hl-system { --accent: var(--drop);
             --accent-glow: rgba(92,227,154,.40);
             --accent-label: var(--drop);
             --accent-metric: var(--head); }
.hl-system .hl-metric { font-family: var(--display); font-weight: 600;
                        font-size: 1.45rem; letter-spacing: .02em; }

/* --- front-page top-value panels ----------------------------------------- */
.toppanels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem; margin-bottom: 1.6rem;
}
.topfive { min-width: 0; }
.topfive h2 {
  padding-bottom: .5rem; margin-bottom: .3rem;
  border-bottom: 1px solid var(--line-soft);
}
.topfive ol { list-style: none; margin: 0; padding: 0; counter-reset: tf; }
.topfive li {
  display: flex; align-items: center; gap: .55rem; cursor: pointer;
  padding: .4rem 0; border-bottom: 1px solid var(--line-soft);
  counter-increment: tf; transition: background .12s;
}
.topfive li:last-child { border-bottom: none; }
.topfive li::before {
  content: counter(tf); font-family: var(--mono); font-size: .8rem;
  color: var(--cyan); width: 1rem; text-align: center; opacity: .65;
}
.topfive li:hover { background: rgba(95,230,221,.06); }
.topfive .tf-name { flex: 1; line-height: 1.25; font-size: .9rem; }
.topfive .tf-isk { color: var(--gold); font-family: var(--mono);
                   white-space: nowrap; }

/* --- feed toolbar: window + filter chips --------------------------------- */
.feed-toolbar {
  display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: center;
  margin: .2rem 0 .9rem; padding-bottom: .9rem;
  border-bottom: 1px solid var(--line-soft);
}
.ft-group { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.ft-label {
  font-family: var(--mono); font-size: .62rem; text-transform: uppercase;
  letter-spacing: .14em; color: var(--text-dim); margin-right: .35rem;
}
.ft-chip {
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .08em; padding: .3rem .65rem; color: var(--text-dim);
  border: 1px solid var(--line); clip-path: var(--clip-sm);
  text-decoration: none; transition: color .12s, background .12s, border-color .12s;
}
.ft-chip:hover { color: var(--cyan-bright); }
.ft-chip.on {
  background: var(--cyan); color: var(--void); border-color: var(--cyan);
}
.ft-toggle::before { content: "☐ "; opacity: .6; }
.ft-toggle.on::before { content: "☑ "; opacity: 1; }
/* "load older" link sits centred below the kill list */
.load-more {
  display: block; width: fit-content; margin: 1.4rem auto .4rem;
  padding: .65rem 1.6rem; font-family: var(--mono); font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--cyan); border: 1px solid var(--cyan);
  clip-path: var(--clip-sm); transition: background .12s, color .12s;
}
.load-more:hover { background: var(--cyan); color: var(--void); }
.feed-back {
  display: inline-block; margin: 0 0 .6rem; font-family: var(--mono);
  font-size: .75rem; color: var(--text-dim); text-decoration: none;
}
.feed-back:hover { color: var(--cyan-bright); }

/* --- killmail detail ------------------------------------------------------ */
.km-hero {
  position: relative; display: flex; gap: 1.3rem; align-items: center;
  background: linear-gradient(135deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); clip-path: var(--clip);
  padding: 1.3rem; margin-bottom: 1.1rem;
}
.km-hero.row-kill { border-left: 3px solid var(--cyan); }
.km-hero.row-loss { border-left: 3px solid var(--loss); }
.ship-render {
  width: 168px; height: 168px; flex-shrink: 0;
  border: 1px solid var(--line); background: rgba(0,0,0,.4);
  clip-path: var(--clip-sm);
}
.km-hero-info { flex: 1; min-width: 0; }
.km-hero-info h1 { margin-bottom: .5rem; }
.victim-line { display: flex; align-items: center; gap: .5rem; margin: .35rem 0; }
.victim-line img { width: 30px; height: 30px; border: 1px solid var(--line); }
.isk-total {
  font-family: var(--mono); font-size: 1.5rem; color: var(--gold);
  text-shadow: 0 0 16px rgba(236,186,96,.4); margin: 0 0 .45rem;
}
/* the ISK breakdown rides the otherwise-empty right side of the hero panel */
.km-hero-value {
  flex-shrink: 0; align-self: center; text-align: right;
  padding-left: 1.3rem; border-left: 1px solid var(--line-soft);
}
.value-rows { list-style: none; margin: 0; padding: 0; }
.value-rows li {
  display: flex; justify-content: space-between; gap: 1.4rem;
  font-family: var(--mono); font-size: .82rem; color: var(--text-dim);
  padding: .16rem 0;
}
.value-rows li span:last-child { color: var(--text); }
/* two columns: fitting + items on the left, headline + attackers on the right */
.km-cols { display: flex; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.km-left, .km-right {
  display: flex; flex-direction: column; gap: 1rem; min-width: 0;
}
.km-left  {
  flex: 0 1 640px;               /* sized so the fitting wheel fills its panel */
  container-type: inline-size;   /* the fluid wheel scales off this column */
}
.km-right { flex: 1 1 360px; }
.item, .attacker {
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem .4rem; border-bottom: 1px solid var(--line-soft);
}
.item-name { flex: 1; font-size: .9rem; }
.item-val {
  font-family: var(--mono); font-size: .82rem; color: var(--gold);
  white-space: nowrap; min-width: 4.5rem; text-align: right;
}
/* qty reads to the left of the icon; a dropped group highlights the whole row
   green (an un-highlighted row is destroyed — no per-row label needed). */
.item-qty {
  font-family: var(--mono); font-size: .82rem; color: var(--text-dim);
  min-width: 3.4rem; text-align: right; white-space: nowrap;
}
.item.dropped {
  background: rgba(92,227,154,.13);
  box-shadow: inset 3px 0 0 var(--drop);
}
.item.dropped .item-qty { color: var(--drop); }

/* expandable container row — Plastic Wraps and friends. Its <summary> uses the
   same .item flex layout as a leaf row, then expands to show the children. */
details.item.container { display: block; padding: 0; }
details.item.container > summary {
  display: flex; align-items: center; gap: .55rem;
  padding: .3rem .4rem; cursor: pointer; list-style: none;
  border-bottom: 1px solid var(--line-soft);
}
details.item.container > summary::-webkit-details-marker { display: none; }
details.item.container.dropped > summary {
  background: rgba(92,227,154,.13);
  box-shadow: inset 3px 0 0 var(--drop);
}
.container-toggle {
  font-size: .7rem; color: var(--text-dim);
  width: 1rem; text-align: center;
  transition: transform .15s;
}
details[open].container .container-toggle { transform: rotate(180deg); }
.container-body {
  padding: .2rem 0 .3rem .9rem;
  border-left: 1px dashed var(--line);
  margin: .15rem 0 .25rem .9rem;
}
.item.child {
  padding: .22rem .35rem; font-size: .9em;
  border-bottom: 1px solid var(--line-soft);
}
.item.child:last-child { border-bottom: none; }

/* --- circular fitting ring (in-game fitting-wheel style) ----------------- */
.fit-panel { text-align: center; }
.fit-panel h2 { text-align: left; }
/* per-section arc tints — high/mid/low/rig/sub each read as a distinct band */
.fit-ring {
  /* the whole wheel scales off one box size — capped at 600px, otherwise it
     shrinks to whatever width its panel allows (narrow column / mobile).
     Ship is enlarged + ring pushed slightly outward so the inner empty
     gap between ship render and modules tightens up vs the older sparse look. */
  --ring-box:  min(600px, calc(100cqw - 2.7rem));
  --ring-r:    calc(var(--ring-box) * 0.42);    /* module ring radius */
  --slot:      calc(var(--ring-box) * 0.0654);  /* module / charge icon box */
  --ship:      calc(var(--ring-box) * 0.48);    /* centred ship render */
  --ring-band: calc(var(--ring-box) * 0.046);   /* half-thickness of the tint */
  --ring-label:calc(var(--ring-box) * 0.055);   /* label offset past the ring */
  --ring-high: rgba(111,200,255,.20);
  --ring-mid:  rgba(142,155,255,.18);
  --ring-low:  rgba(236,186,96,.18);
  --ring-rig:  rgba(201,139,255,.18);
  --ring-sub:  rgba(92,227,154,.16);
  position: relative; width: var(--ring-box); height: var(--ring-box);
  margin: .4rem auto;
}
/* the conic-gradient band sits behind the slots, masked to a thin ring */
.fit-ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ring-bands, none);
  -webkit-mask: radial-gradient(circle,
      transparent calc(var(--ring-r) - var(--ring-band)),
      #000 calc(var(--ring-r) - var(--ring-band)),
      #000 calc(var(--ring-r) + var(--ring-band)),
      transparent calc(var(--ring-r) + var(--ring-band)));
          mask: radial-gradient(circle,
      transparent calc(var(--ring-r) - var(--ring-band)),
      #000 calc(var(--ring-r) - var(--ring-band)),
      #000 calc(var(--ring-r) + var(--ring-band)),
      transparent calc(var(--ring-r) + var(--ring-band)));
}
.fit-ship {
  position: absolute; top: 50%; left: 50%;
  width: var(--ship); height: var(--ship); transform: translate(-50%, -50%);
  object-fit: contain; border: 1px solid var(--line);
  background: rgba(0,0,0,.4); clip-path: var(--clip-sm);
}
.fit-slot {
  position: absolute; top: 50%; left: 50%;
  width: var(--slot); height: var(--slot); margin: calc(var(--slot) / -2);
  transform: rotate(var(--a)) translateY(calc(-1 * var(--ring-r)))
             rotate(calc(-1 * var(--a)));
  border: 2px solid var(--line); background: var(--void);
}
.fit-slot > img:not(.fit-charge) { width: 100%; height: 100%; display: block; }
.fit-slot.destroyed { border-color: var(--loss);
  box-shadow: 0 0 8px rgba(255,81,96,.4); }
.fit-slot.dropped { border-color: var(--drop);
  box-shadow: 0 0 8px rgba(92,227,154,.4); }
/* an empty slot the ship has but had nothing fitted into — faint ring only. */
.fit-slot.empty { border-color: var(--line-soft);
  background: rgba(0,0,0,.20); }
/* the charge loaded in the module — same size as the module icon, offset
   radially inward (toward the ship) far enough to clear the module entirely. */
.fit-charge {
  position: absolute; top: 50%; left: 50%;
  width: var(--slot); height: var(--slot); margin: calc(var(--slot) / -2);
  display: block; border: 2px solid var(--line); background: var(--void);
  transform: translate(calc(sin(var(--a)) * -1 * (var(--slot) + 4px)),
                       calc(cos(var(--a)) * (var(--slot) + 4px)));
}
.fit-charge.destroyed { border-color: var(--loss);
  box-shadow: 0 0 8px rgba(255,81,96,.4); }
.fit-charge.dropped { border-color: var(--drop);
  box-shadow: 0 0 8px rgba(92,227,154,.4); }
/* the section name, upright, just outside its slot cluster */
.fit-label {
  position: absolute; top: 50%; left: 50%;
  font-family: var(--mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; white-space: nowrap; pointer-events: none;
  transform: rotate(var(--a))
             translateY(calc(-1 * (var(--ring-r) + var(--ring-label))))
             rotate(calc(-1 * var(--a))) translate(-50%, -50%);
}
.fit-label.high { color: #6fc8ff; }
.fit-label.mid  { color: #8e9bff; }
.fit-label.low  { color: var(--gold); }
.fit-label.rig  { color: #c98bff; }
.fit-label.sub  { color: var(--drop); }
/* --- final-blow / top-damage headline panel ----------------------------- */
.topdmg { display: flex; padding: 0; }
.td-col {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: .3rem; padding: 1rem .7rem 1.1rem;
}
.td-col:first-child { border-right: 1px solid var(--line-soft); }
.td-head {
  font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--text-dim); margin-bottom: .15rem;
}
.td-pic {
  width: 64px; height: 64px; border: 1px solid var(--line);
  background: rgba(0,0,0,.4); clip-path: var(--clip-sm);
}
.td-name { font-size: .98rem; }
.td-sub { font-size: .76rem; color: var(--text-dim); }
.td-stat { font-family: var(--mono); font-size: .82rem; color: var(--loss); }
.td-empty { padding: 1.6rem 0; font-size: 1.4rem; }
.attacker img { width: 32px; height: 32px; border: 1px solid var(--line); }
.attacker.final {
  background: rgba(236,186,96,.06); border-left: 2px solid var(--gold);
  padding-left: .45rem;
}
.atk-info { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.atk-info .muted { font-size: .8rem; }
.fb {
  font-family: var(--mono); font-size: .6rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--gold);
  border: 1px solid rgba(236,186,96,.5); padding: 0 .3rem; margin-left: .4rem;
}
.dmg { color: var(--loss); font-family: var(--mono); }
/* --- leaderboards --------------------------------------------------------- */
.board-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem; margin-top: 1rem;
}
.big-stat {
  font-family: var(--mono); font-size: 1.85rem; color: var(--gold);
  text-shadow: 0 0 20px rgba(236,186,96,.35);
}
ol.board { list-style: none; margin: 0; padding: 0; }
ol.board li {
  display: flex; justify-content: space-between; gap: .5rem;
  padding: .35rem 0; border-bottom: 1px solid var(--line-soft);
}
ol.board li:last-child { border-bottom: none; }
/* leaderboard window switch — CSS-only radio tabs (radios, then tabs, then
   sets, so the :checked ~ sibling selectors reach both). */
.lb-radio { position: absolute; width: 0; height: 0; opacity: 0; }
.lb-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.lb-tab {
  font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--text-dim); cursor: pointer;
  padding: .35rem .75rem; border: 1px solid var(--line);
  clip-path: var(--clip-sm); transition: color .12s, background .12s;
}
.lb-tab:hover { color: var(--cyan-bright); }
.lb-radio:focus-visible ~ .lb-tabs .lb-tab { outline: 1px solid var(--cyan); }
.lb-set { display: none; }
#lbw-1d:checked   ~ .lb-set[data-w="1d"],
#lbw-7d:checked   ~ .lb-set[data-w="7d"],
#lbw-30d:checked  ~ .lb-set[data-w="30d"],
#lbw-90d:checked  ~ .lb-set[data-w="90d"],
#lbw-180d:checked ~ .lb-set[data-w="180d"],
#lbw-365d:checked ~ .lb-set[data-w="365d"] { display: block; }
#lbw-1d:checked   ~ .lb-tabs .lb-tab-1d,
#lbw-7d:checked   ~ .lb-tabs .lb-tab-7d,
#lbw-30d:checked  ~ .lb-tabs .lb-tab-30d,
#lbw-90d:checked  ~ .lb-tabs .lb-tab-90d,
#lbw-180d:checked ~ .lb-tabs .lb-tab-180d,
#lbw-365d:checked ~ .lb-tabs .lb-tab-365d {
  background: var(--cyan); color: var(--void); border-color: var(--cyan);
}

/* --- battle report -------------------------------------------------------- */
.br-head { margin-bottom: 1rem; }
.br-head h1 { margin-bottom: .25rem; }
.br-links { font-family: var(--mono); font-size: .78rem; }

/* --- many-sided layout (1–N teams, scrolls horizontally) ---------------- */
/* One column per side, summary stacked above roster. 2–3 sides distribute
   `1fr` and fit comfortably; 4+ keep their 320px floor and the container
   scrolls. A visible scrollbar + the .br-sides-hint above are the two
   "there's more this way" affordances. */
.br-sides {
  display: flex; flex-wrap: nowrap; gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  /* Force a visible scrollbar on browsers that hide them by default — the
     bar is itself the strongest "scroll exists" hint. */
  scrollbar-width: thin;
  scrollbar-color: rgba(95,230,221,.40) rgba(0,0,0,.25);
  /* leave room so the bar doesn't crowd the bottom panel border */
  padding-bottom: .4rem;
  margin-bottom: 1.6rem;
}
.br-sides::-webkit-scrollbar { height: 10px; }
.br-sides::-webkit-scrollbar-track { background: rgba(0,0,0,.25); }
.br-sides::-webkit-scrollbar-thumb {
  background: rgba(95,230,221,.40); border-radius: 0;
}
.br-sides::-webkit-scrollbar-thumb:hover { background: rgba(95,230,221,.70); }

/* Toolbar above the side panels — hint on the left, scroll nav buttons
   on the right. Wraps onto two rows on narrow viewports. */
.br-sides-toolbar {
  display: flex; align-items: center; gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: .35rem;
}
.br-sides-hint {
  font-family: var(--mono); font-size: .78rem;
  color: var(--cyan); margin: 0;
  letter-spacing: .04em;
}
.br-sides-nav { display: flex; gap: .35rem; margin-left: auto; }
.br-sides-nav-btn {
  font-family: var(--mono); font-size: .78rem; font-weight: 600;
  color: var(--cyan); background: rgba(95,230,221,.08);
  border: 1px solid var(--line);
  padding: .25rem .6rem; cursor: pointer;
  transition: background .15s, border-color .15s;
}
.br-sides-nav-btn:hover {
  background: rgba(95,230,221,.20); border-color: var(--cyan);
}
.br-sides-nav-btn:disabled {
  opacity: .35; cursor: not-allowed;
  background: rgba(95,230,221,.04);
}

/* Duplicate horizontal scrollbar above the side panels. The bottom
   scrollbar (the real one on .br-sides) sits past tall pilot rosters
   and is below the fold; this top track gives the user a scrollbar at
   eye level. JS sets the inner div's width = sides.scrollWidth so the
   thumb's size and travel mirror the real scroll perfectly. */
.br-sides-topbar {
  overflow-x: auto; overflow-y: hidden;
  height: 14px; margin-bottom: .6rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(95,230,221,.40) rgba(0,0,0,.25);
  /* Hidden by default; the JS reveals it only when sides actually overflow. */
  display: none;
}
.br-sides-topbar.is-active { display: block; }
.br-sides-topbar > div { height: 1px; }
.br-sides-topbar::-webkit-scrollbar { height: 14px; }
.br-sides-topbar::-webkit-scrollbar-track { background: rgba(0,0,0,.25); }
.br-sides-topbar::-webkit-scrollbar-thumb {
  background: rgba(95,230,221,.40); border-radius: 0;
}
.br-sides-topbar::-webkit-scrollbar-thumb:hover { background: rgba(95,230,221,.70); }

.br-side {
  /* 320px base ensures a comfortable read at 4-up; below that you would
     be packing too many fields too tight regardless. `flex: 1 0 320px`
     grows when there is spare width (so 2 sides feel full-width) and
     refuses to shrink (so 5+ sides overflow → horizontal scroll). */
  flex: 1 0 320px;
  display: flex; flex-direction: column; gap: 1rem;
  min-width: 0;
  scroll-snap-align: start;
}
.br-side > .panel { margin-bottom: 0; }

.br-team { min-width: 0; }
.br-team-0 { border-left: 3px solid var(--loss); }
.br-team-1 { border-left: 3px solid #5b9cff; }
.br-team-2 { border-left: 3px solid var(--drop); }
.br-team-3 { border-left: 3px solid var(--gold); }
/* Higher-index colours — kept distinct so a 5–6-side report still reads
   at a glance. Picks step around the colour wheel from the first four. */
.br-team-4 { border-left: 3px solid #b07cf2; }   /* lilac */
.br-team-5 { border-left: 3px solid #f29ab0; }   /* coral */
.br-team-6 { border-left: 3px solid #6cd3ff; }   /* sky */
.br-team-7 { border-left: 3px solid #cf6b3a; }   /* rust */
.br-team h2 { display: flex; align-items: center; gap: .5rem; }
.br-letter {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; font-family: var(--mono); font-size: .85rem;
  background: rgba(95,230,221,.1); border: 1px solid var(--line);
  color: var(--cyan);
}
.br-stat {
  display: flex; gap: 1.1rem; flex-wrap: wrap; margin: .4rem 0 .9rem;
  font-family: var(--mono); font-size: .82rem;
}
.br-entities { list-style: none; margin: 0 0 .6rem; padding: 0; }
.br-entity-li { border-bottom: 1px solid var(--line-soft); }
.br-ent-name { flex: 1; font-size: .9rem; min-width: 0;
               overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.br-flag { color: var(--gold); cursor: help; }
.br-moves { display: flex; gap: .25rem; }
.br-move {
  min-width: 1.3rem; text-align: center; font-family: var(--mono);
  font-size: .78rem; padding: .05rem .35rem;
  border: 1px solid var(--line); color: var(--cyan);
}
.br-move:hover { background: rgba(95,230,221,.1); }
.br-move-new { color: var(--drop); }
.br-row-0 { border-left: 2px solid var(--loss); }
.br-row-1 { border-left: 2px solid #5b9cff; }
.br-row-2 { border-left: 2px solid var(--drop); }
.br-row-3 { border-left: 2px solid var(--gold); }
.br-row-x { border-left: 2px solid var(--cyan-deep); }

/* --- expandable entity rows (per-side, with nested fleet comp) ----------- */
.br-entity { display: block; }
.br-entity > summary {
  display: flex; align-items: center; gap: .5rem;
  padding: .28rem 0; cursor: pointer;
  list-style: none;
}
.br-entity > summary::-webkit-details-marker { display: none; }
.br-entity > summary:hover { background: rgba(95,230,221,.04); }
.br-ent-stat { font-family: var(--mono); font-size: .76rem; white-space: nowrap; }
/* Button-styled chevron — borrowed look from the move pills so users read
   the row as expandable. Same treatment on the multi-ship pilot toggle. */
.br-entity-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem;
  font-family: var(--mono); font-size: .85rem; font-weight: 700;
  color: var(--cyan); background: rgba(95,230,221,.08);
  border: 1px solid var(--line);
  transition: transform .15s, background .15s, border-color .15s;
}
.br-entity > summary:hover .br-entity-toggle {
  background: rgba(95,230,221,.20);
  border-color: var(--cyan);
}
details[open].br-entity .br-entity-toggle { transform: rotate(180deg); }

/* --- fleet composition table -------------------------------------------- */
.br-fleet { list-style: none; margin: 0 0 .9rem; padding: 0; }
.br-fleet-row {
  display: grid;
  grid-template-columns: 26px 1fr auto auto;
  align-items: center; gap: .55rem;
  padding: .22rem .15rem;
  font-size: .85rem;
  border-bottom: 1px solid var(--line-soft);
}
.br-fleet-row:last-child { border-bottom: 0; }
.br-fleet-ico {
  width: 24px; height: 24px;
  border: 1px solid var(--line); background: rgba(0,0,0,.35);
}
.br-fleet-name { min-width: 0; overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; }
.br-fleet-count {
  font-family: var(--mono); font-weight: 700; color: var(--cyan);
  min-width: 2.2rem; text-align: right;
}
.br-fleet-lost {
  font-family: var(--mono); font-size: .76rem; color: var(--loss);
  min-width: 2.4rem; text-align: right;
}
.br-fleet-row.fleet-wipe .br-fleet-name { color: var(--loss); }
.br-fleet-nested {
  margin: .35rem 0 .35rem 1.4rem;
  border-left: 1px dashed var(--line-soft);
  padding-left: .55rem;
}
.br-fleet-empty { margin: .35rem 0 .35rem 1.4rem; font-size: .8rem; }

/* --- per-side pilot roster panel (lives inside the per-side column) ------ */
.br-roster { min-width: 0; }
.br-roster h2 {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding-bottom: .5rem; margin-bottom: .55rem;
  border-bottom: 1px solid var(--line-soft);
}

/* --- per-side pilot roster ------------------------------------------------ */
.br-pilots {
  display: flex; flex-direction: column; gap: .2rem;
  margin: 0 0 .8rem;
}

/* Container styling — shared between the single-row <div> and the
   multi-ship <details>. Row-flex lives on the visible row itself
   (the div, or the <summary> inside <details>). */
.br-pilot {
  border-left: 2px solid transparent;
  border-radius: 1px;
  background: rgba(0,0,0,.18);
}
details.br-pilot-multi { display: block; padding: 0; }
.br-pilot-single,
.br-pilot-multi > summary {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  padding: .3rem .5rem;
  font-size: .85rem; line-height: 1.2;
}
.br-pilot-multi > summary { cursor: pointer; list-style: none; }
.br-pilot-multi > summary::-webkit-details-marker { display: none; }
.br-pilot-multi:hover { background: rgba(0,0,0,.28); }

.br-pilot-portrait {
  width: 26px; height: 26px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(0,0,0,.35);
}
/* Natural-width name — packs left so trailing items (affiliation, ship pill,
   metrics) fill the row before forcing a wrap. The previous `flex: 1` made
   the name a greedy spacer, which pushed the right-side cluster past the
   row edge and triggered a wrap even when there was free space available. */
.br-pilot-name {
  flex: 0 1 auto; min-width: 0; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.br-pilot-aff { font-size: .72rem; letter-spacing: .03em; }

/* Right-anchored cluster — ship pill + dmg/kills + skull. `margin-left:
   auto` collapses every spare pixel into a single gap between affiliation
   and ship, so the numeric columns stay scannable on the right edge.
   `flex-wrap: wrap` lets the cluster itself wrap on very narrow screens
   without crashing into the name. */
.br-pilot-right {
  display: inline-flex; align-items: center; flex-wrap: wrap;
  gap: .55rem; margin-left: auto;
}

/* "Primary ship" pill — last hull seen on the field, with +N badge if
   the pilot flew more than one. Red-tinted when that pill is a loss. */
.br-pilot-ship {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .08rem .4rem .08rem .15rem;
  background: rgba(95,230,221,.06);
  border: 1px solid var(--line);
  font-size: .8rem;
  max-width: 11rem; min-width: 0;
}
.br-pilot-ship-ico {
  width: 22px; height: 22px; flex-shrink: 0;
  background: rgba(0,0,0,.35);
}
.br-pilot-ship-name {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.br-pilot-ship.lost {
  background: rgba(255,81,96,.10);
  border-color: rgba(255,81,96,.45);
}
.br-pilot-ship-more {
  font-family: var(--mono); font-size: .7rem;
  color: var(--cyan); padding: 0 .25rem;
  border-left: 1px solid var(--line);
}

/* Damage / kills — compact mono cluster on the right of the row. */
.br-pilot-metrics {
  display: inline-flex; align-items: baseline; gap: .65rem;
  font-family: var(--mono); font-size: .78rem;
}
.br-pilot-dmg { color: var(--text); white-space: nowrap; }
.br-pilot-kills { color: var(--cyan); white-space: nowrap; }
.br-pilot-metrics .lbl {
  font-size: .62rem; color: var(--text-dim); margin-left: .2rem;
  text-transform: uppercase; letter-spacing: .06em;
}
/* Top performer on each side — green phosphor + slight glow. Applied to
   .br-pilot-dmg.top (top damage dealer) and .br-pilot-kills.top (top kill
   participation). Label inside stays dim for legibility. */
.br-pilot-dmg.top,
.br-pilot-kills.top {
  color: #74e88a; font-weight: 600;
  text-shadow: 0 0 6px rgba(116, 232, 138, .55);
}
.br-pilot-dmg.top .lbl,
.br-pilot-kills.top .lbl { color: var(--text-dim); text-shadow: none; }

/* Death state modifiers — applied to .br-pilot-single / .br-pilot-multi.
   `all-dead` paints the whole row red (the pilot lost everything they
   were in). `partial` keeps the row legible but flags it with a thin
   left border + the skull on the row itself. */
.br-pilot-alive { color: var(--text); }
.br-pilot-alive .br-pilot-name a { color: var(--text); }
.br-pilot-alive .br-pilot-name a:hover { color: var(--cyan); }

.br-pilot-partial { border-left-color: rgba(255,81,96,.45); }

.br-pilot-all-dead {
  border-left-color: var(--loss);
  background: rgba(255,81,96,.06);
}
.br-pilot-all-dead .br-pilot-name,
.br-pilot-all-dead .br-pilot-name a { color: var(--loss); }
.br-pilot-all-dead:hover { background: rgba(255,81,96,.10); }
details.br-pilot-all-dead.br-pilot-multi:hover { background: rgba(255,81,96,.10); }

.br-pilot-deaths {
  font-family: var(--mono); font-size: .76rem; color: var(--loss);
  white-space: nowrap;
}
.br-pilot-deaths-multi {
  padding: .05rem .35rem;
  border: 1px solid var(--loss); background: rgba(255,81,96,.10);
  font-weight: 700;
}
.br-pilot-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem;
  font-family: var(--mono); font-size: .85rem; font-weight: 700;
  color: var(--cyan); background: rgba(95,230,221,.08);
  border: 1px solid var(--line);
  transition: transform .15s, background .15s, border-color .15s;
}
.br-pilot-multi > summary:hover .br-pilot-toggle {
  background: rgba(95,230,221,.20);
  border-color: var(--cyan);
}
details[open].br-pilot-multi .br-pilot-toggle { transform: rotate(180deg); }

/* Per-ship dropdown rows inside a multi-ship pilot */
.br-pilot-ships {
  list-style: none; margin: 0 0 .35rem 2.8rem;
  padding: .15rem 0 .25rem;
  border-left: 1px dashed var(--line-soft);
}
.br-ship-row {
  padding: .15rem .25rem .15rem .55rem;
}
.br-ship-row.lost {
  border-left: 2px solid var(--loss);
  background: rgba(255,81,96,.06);
}
.br-ship-row.alive {
  border-left: 2px solid rgba(95,230,221,.30);
}
.br-ship-row-link {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--mono); font-size: .78rem; color: var(--text);
}
a.br-ship-row-link:hover { color: var(--cyan); text-decoration: none; }
.br-ship-row-ico {
  width: 22px; height: 22px; flex-shrink: 0;
  border: 1px solid var(--line); background: rgba(0,0,0,.35);
}
.br-ship-row-name { flex: 1; min-width: 0; overflow: hidden;
                    text-overflow: ellipsis; white-space: nowrap; }
.br-ship-row-tag {
  font-size: .65rem; text-transform: uppercase; letter-spacing: .1em;
  color: var(--loss);
}
.br-ship-row.alive .br-ship-row-tag { color: var(--text-dim); }
.br-ship-row-isk { color: var(--gold); white-space: nowrap;
                   min-width: 4rem; text-align: right; }

.battleform {
  display: flex; flex-direction: column; gap: .9rem;
  margin-top: 1.2rem; text-align: left;
}
.battleform label {
  display: flex; flex-direction: column; gap: .25rem;
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--cyan);
}
.battleform input {
  font-family: var(--mono); font-size: .9rem; color: var(--text);
  background: var(--void); border: 1px solid var(--line); padding: .5rem .6rem;
}
.battleform input:focus { border-color: var(--cyan); outline: none; }
.battleform button { align-self: flex-start; }

@media (max-width: 620px) {
  .topbar { gap: .9rem; padding: .5rem .9rem; }
  .brand-text { font-size: .9rem; letter-spacing: .1em; }
  main { padding: 0 .9rem; }
  .km-hero { flex-direction: column; align-items: flex-start; }
  .km-hero-value {
    text-align: left; border-left: none; padding-left: 0;
    border-top: 1px solid var(--line-soft); padding-top: .7rem;
    align-self: stretch;
  }
  .value-rows li { justify-content: flex-start; gap: .8rem; }
  .entity-head { flex-wrap: wrap; }
}

/* --- entity links --------------------------------------------------------- */
/* Names link everywhere; they inherit their context colour so tables stay
   readable, and light up on hover to reveal they are interactive. */
.elink { color: inherit; }
.elink:hover { color: var(--cyan-bright); text-shadow: 0 0 10px var(--cyan-glow); }
.dotlan { font-family: var(--mono); font-size: .76rem; white-space: nowrap; }
/* security status — colour is set inline per the EVE security scale */
.sec { font-family: var(--mono); font-weight: 700; }

/* "NPC" markers — killmails with no player attackers (the killer was an NPC).
   .npc-tag: compact, sits beside the final-blow killer in the feed.
   .npc-banner: prominent, on the killmail detail page. */
.npc-tag {
  font-family: var(--mono); font-size: .6rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em;
  color: var(--ink); background: var(--gold);
  padding: .1rem .4rem; vertical-align: middle; white-space: nowrap;
}
.npc-banner {
  display: inline-block; margin: 0 0 .6rem;
  font-family: var(--mono); font-size: .82rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--ink); background: var(--gold);
  padding: .32rem .9rem; clip-path: var(--clip-sm);
  box-shadow: 0 0 18px rgba(236,186,96,.45);
}

/* --- alliance stats panel (home page) ------------------------------------- */
.allystats { margin-bottom: 1.6rem; }
.allystats h2 {
  padding-bottom: .5rem; margin-bottom: .8rem;
  border-bottom: 1px solid var(--line-soft);
}
.as-toggle { position: relative; }
.as-toggle input {
  position: absolute; opacity: 0; width: 0; height: 0; margin: 0;
}
.as-toggle label {
  display: inline-block; font-family: var(--mono); font-size: .68rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--text-dim);
  border: 1px solid var(--line); padding: .32rem .85rem;
  margin: 0 .3rem .85rem 0; cursor: pointer; clip-path: var(--clip-sm);
  transition: color .12s, background .12s;
}
.as-toggle label:hover { color: var(--cyan-bright); }
#asw-alltime:checked ~ label[for="asw-alltime"],
#asw-d90:checked     ~ label[for="asw-d90"],
#asw-d7:checked      ~ label[for="asw-d7"] {
  color: var(--ink); background: var(--cyan); border-color: var(--cyan);
}
.as-toggle input:focus-visible ~ label[for="asw-alltime"],
.as-toggle input:focus-visible ~ label[for="asw-d90"],
.as-toggle input:focus-visible ~ label[for="asw-d7"] { outline: 1px solid var(--cyan); }
.as-grid {
  display: none;
  grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: .7rem;
}
#asw-alltime:checked ~ .as-grid[data-w="alltime"],
#asw-d90:checked     ~ .as-grid[data-w="d90"],
#asw-d7:checked      ~ .as-grid[data-w="d7"] { display: grid; }
.as-cell {
  display: flex; flex-direction: column; gap: .25rem;
  border: 1px solid var(--line-soft); background: rgba(95,230,221,.03);
  padding: .6rem .8rem; clip-path: var(--clip-sm);
}
.as-k {
  font-family: var(--mono); font-size: .61rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-dim);
}
.as-v { font-family: var(--mono); font-size: 1.32rem; line-height: 1.1; }
.as-v.win  { color: var(--drop); }
.as-v.loss { color: var(--loss); }

/* --- entity page header --------------------------------------------------- */
.entity-head {
  display: flex; align-items: center; gap: 1.2rem; margin-bottom: 1.1rem;
}
.entity-img {
  width: 88px; height: 88px; flex-shrink: 0; object-fit: contain;
  border: 1px solid var(--line); background: rgba(0,0,0,.4);
  clip-path: var(--clip-sm);
}
.entity-kind {
  font-family: var(--mono); font-size: .66rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--cyan); margin: 0 0 .15rem;
}
.entity-meta h1 { margin: 0 0 .25rem; }
.entity-aff { margin: 0 0 .3rem; font-size: .92rem; }
.entity-aff .sep { color: var(--text-dim); }
.entity-sub { margin: 0; font-family: var(--mono); font-size: .8rem; }