:root {
  color-scheme: dark;

  /* Near-black with a warm cast rather than the old blue one: the whole
     palette is lit by the orange accent, and cool greys fought it. */
  --bg: #0b0a09;
  --bg-raise: #14120f;
  --bg-sunken: #060505;
  --panel: #131110;
  --panel-2: #1a1715;
  --line: #332c26;
  --line-soft: #241f1b;

  --fg: #ece7e1;
  --fg-dim: #a39a91;
  --fg-faint: #6f665f;

  --accent: #e8782c;
  --accent-hot: #ff9040;
  --accent-dim: #4a2610;

  --sev-clean: #4caf5a;
  --sev-low: #6f9fd8;
  --sev-elevated: #d5a021;
  --sev-high: #ef8232;
  --sev-very-high: #f24b3f;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Consolas, monospace;
  --radius: 4px;
  --radius-sm: 3px;

  /* Corner-bracket geometry, shared by every .hud frame. */
  --bracket: 14px;
  --bracket-w: 1.5px;
}

* { box-sizing: border-box; }

/* Any author rule that sets `display` outranks the browser's own
   `[hidden] { display: none }`, so hiding an element the app toggles - the
   upload progress box, a notice - silently stopped working. Restated here so
   the attribute wins wherever it is used. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* The artwork held still behind the scrolling page. It uses bg.jpg, a blurred
   and darkened derivative of the hero rather than the hero itself: at cover
   scale the sharp original left fragments of its lettering legible in the page
   margins, which read as a rendering fault rather than as a backdrop. Blurring
   also makes the file tiny (6 KB), since the detail is thrown away anyway.
   A blueprint grid and turbulence grain sit on top to stop the large flat
   areas from banding. */
body {
  min-height: 100vh;
  background-color: var(--bg);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E"),
    linear-gradient(rgba(232, 120, 44, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232, 120, 44, 0.025) 1px, transparent 1px),
    linear-gradient(rgba(9, 8, 8, 0.62), rgba(9, 8, 8, 0.78)),
    url("/img/bg.jpg");
  background-size: 180px 180px, 46px 46px, 46px 46px, auto, cover;
  background-position: 0 0, 0 0, 0 0, 0 0, center center;
  background-repeat: repeat, repeat, repeat, no-repeat, no-repeat;
  background-attachment: fixed;
}

h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 1.12rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; }
h2 { font-size: 1.3rem; }
h3 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.09em; font-weight: 700; }
p { margin: 0; }
code { font-family: var(--mono); font-size: 0.88em; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dim { color: var(--fg-dim); }
.faint { color: var(--fg-faint); }

/* ---------------- HUD frame ----------------
   Four corner brackets drawn as background gradients on two pseudo-elements
   (four corners each would need eight, and one element can hold four cleanly).
   Purely decorative, so it never intercepts a click. */

.hud { position: relative; }
.hud::before, .hud::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}
.hud::before {
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-size:
    var(--bracket) var(--bracket-w), var(--bracket-w) var(--bracket),
    var(--bracket) var(--bracket-w), var(--bracket-w) var(--bracket);
  background-position: 0 0, 0 0, 100% 100%, 100% 100%;
}
.hud::after {
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent));
  background-size:
    var(--bracket) var(--bracket-w), var(--bracket-w) var(--bracket),
    var(--bracket) var(--bracket-w), var(--bracket-w) var(--bracket);
  background-position: 100% 0, 100% 0, 0 100%, 0 100%;
}

/* Diagonal hazard tape, as on the mockup's section edges. */
.hazard {
  display: block; height: 6px; width: 100%;
  background: repeating-linear-gradient(
    -45deg,
    var(--accent) 0 9px,
    transparent 9px 18px
  );
  opacity: 0.42;
}

/* ---------------- top bar ---------------- */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem clamp(1rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--line-soft);
  box-shadow: 0 1px 0 rgba(232, 120, 44, 0.16);
  background: rgba(11, 10, 9, 0.86);
  backdrop-filter: blur(10px);
  position: sticky;
  top: 0;
  z-index: 20;
}

.brand { display: flex; align-items: center; gap: 0.85rem; }

.brand-mark {
  width: 32px; height: 32px; flex: none;
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 8px rgba(232, 120, 44, 0.45));
}
.brand-mark .pip { fill: var(--accent); stroke: none; }

.brand-cs2 {
  color: var(--accent);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.brand-sub { color: var(--fg-dim); font-size: 0.78rem; }

.topbar-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.chip {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--fg-dim);
  white-space: nowrap;
}
.chip.on { color: var(--accent); border-color: var(--accent-dim); background: #1d1109; }
.chip.off { color: var(--fg-faint); }

/* ---------------- hero ---------------- */

/* The artwork already carries the slogan, so the hero is the image itself
   rather than text over it. Its bottom edge is faded into the page so the
   banner reads as part of the background instead of a pasted-in rectangle. */
.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  line-height: 0;
}
.hero-img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: cover;
  object-position: center 42%;
}
.hero::before {
  /* The .hud brackets sit on ::before/::after; the fade needs its own layer,
     so it rides along with the bracket layer's background stack. */
  background-image:
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(var(--accent), var(--accent)),
    linear-gradient(to bottom, transparent 62%, rgba(11, 10, 9, 0.55) 84%, var(--bg) 100%);
  background-size:
    var(--bracket) var(--bracket-w), var(--bracket-w) var(--bracket),
    var(--bracket) var(--bracket-w), var(--bracket-w) var(--bracket),
    100% 100%;
  background-position: 0 0, 0 0, 100% 100%, 100% 100%, 0 0;
  z-index: 1;
}

/* ---------------- layout ---------------- */

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(1.25rem, 4vw, 2.75rem) clamp(1rem, 4vw, 2rem) 5rem;
}

.view { display: flex; flex-direction: column; gap: 1.5rem; }
.view[hidden] { display: none; }
/* A column flex container stretches its children, which turned the lone back
   button into a full-width bar. */
.view > .btn { align-self: flex-start; }

.panel {
  background:
    linear-gradient(180deg, rgba(26, 23, 21, 0.92) 0%, rgba(15, 13, 12, 0.92) 100%);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.35rem 1.5rem;
}

.panel-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}

/* ---------------- dropzone ---------------- */

.dropzone {
  border: 1.5px dashed var(--line);
  border-radius: var(--radius);
  padding: clamp(2.4rem, 7vw, 4rem) 1.5rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(26,23,21,0.75), rgba(11,10,9,0.45));
  transition: border-color 0.18s, background 0.18s, transform 0.18s;
  cursor: pointer;
  outline: none;
}
.dropzone:hover, .dropzone:focus-visible {
  border-color: var(--accent);
  background: rgba(74, 38, 16, 0.22);
}
.dropzone.dragging {
  border-color: var(--accent-hot);
  background: rgba(74, 38, 16, 0.38);
  transform: scale(1.006);
}
.dropzone.busy { opacity: 0.55; pointer-events: none; }
.dropzone h2 { text-transform: uppercase; letter-spacing: 0.04em; }

.dz-icon {
  width: 46px; height: 46px; margin-bottom: 0.9rem;
  fill: none; stroke: var(--accent); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.dropzone h2 { margin-bottom: 0.3rem; }
.dropzone p { color: var(--fg-dim); }
.dz-hint { font-size: 0.83rem; color: var(--fg-faint); margin-top: 0.75rem; }

.linklike {
  background: none; border: none; padding: 0;
  color: var(--accent); font: inherit; cursor: pointer; text-decoration: underline;
}

/* ---------------- share code ---------------- */

.sharecode { display: flex; flex-direction: column; gap: 0.5rem; }
.sharecode-label {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-faint);
}
.sharecode-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.sharecode-row input {
  flex: 1 1 22rem; min-width: 0;
  font: inherit; font-family: var(--mono); font-size: 0.83rem;
  padding: 0.6rem 0.85rem;
  color: var(--fg); background: var(--bg-sunken);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.sharecode-row input::placeholder { color: var(--fg-faint); }
.sharecode-row input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 120, 44, 0.12);
}
.sharecode-hint { font-size: 0.78rem; color: var(--fg-faint); }

/* ---------------- analysis hero ---------------- */

/* Shorter than the landing banner: it is company while the parse runs, not
   the thing being looked at. */
.analysis-hero .hero-img { max-height: 30vh; object-position: center 38%; }

/* A sweep across the artwork, so the wait reads as work in progress. Anyone
   who asked not to see motion gets the still image instead. */
.scanline {
  position: absolute; left: 0; right: 0; top: 0; height: 22%;
  pointer-events: none; z-index: 2;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(232, 120, 44, 0.13) 45%,
    rgba(255, 144, 64, 0.5) 50%,
    rgba(232, 120, 44, 0.13) 55%,
    transparent 100%
  );
  animation: sweep 2.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}
@keyframes sweep {
  0%   { transform: translateY(-120%); }
  100% { transform: translateY(560%); }
}
@media (prefers-reduced-motion: reduce) {
  .scanline { animation: none; opacity: 0.25; }
}

/* ---------------- watch link ---------------- */

.watch-btn {
  display: inline-flex; align-items: center; gap: 0.45rem;
  text-decoration: none;
}
.watch-btn svg { width: 1em; height: 1em; fill: currentColor; flex: none; }

.sample-line {
  font-size: 0.84rem;
  color: var(--fg-faint);
  text-align: center;
  max-width: 62ch;
  margin: -0.4rem auto 0;
}

/* ---------------- bars ---------------- */

.bar {
  height: 6px; border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.bar.tall { height: 10px; }
.bar-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--accent-dim), var(--accent), var(--accent-hot));
  box-shadow: 0 0 12px -2px var(--accent);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.upload-progress { display: flex; flex-direction: column; gap: 0.5rem; }
.upload-progress p { font-size: 0.83rem; color: var(--fg-dim); }

.progress-panel { display: flex; flex-direction: column; gap: 0.85rem; }
.progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
.progress-foot { display: flex; justify-content: space-between; font-size: 0.8rem; }

/* ---------------- notices ---------------- */

.notice {
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  border: 1px solid;
}
.notice.error { background: #26100f; border-color: #5c2320; color: #ffb0a8; }
.notice.warn  { background: #241c0c; border-color: #4d3c14; color: #efd189; }
.notice.info  { background: #1d1109; border-color: var(--accent-dim); color: #f0bb8e; }
.notice ul { margin: 0.4rem 0 0; padding-left: 1.1rem; }

/* ---------------- explainer ---------------- */

.explainer { margin-top: 0.5rem; }
.explainer h3 { margin-bottom: 0.9rem; color: var(--fg-dim); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.08em; }
.explainer-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(255px, 1fr));
}
.explainer-grid li {
  background: var(--panel); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 0.8rem 0.95rem;
  display: flex; flex-direction: column; gap: 0.25rem;
}
.explainer-grid strong { font-size: 0.9rem; }
.explainer-grid span { font-size: 0.82rem; color: var(--fg-dim); }

/* ---------------- reputation grid ---------------- */

.rep-grid {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(238px, 1fr));
}

.rep-card {
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 0.8rem 0.9rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  min-height: 104px;
}
.rep-card.team-2 { border-left: 3px solid #d29922; }
.rep-card.team-3 { border-left: 3px solid #58a6ff; }

.rep-top { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; }
.rep-name { font-weight: 600; font-size: 0.93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rep-id { font-size: 0.72rem; color: var(--fg-faint); }

.rep-status {
  font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: var(--radius-sm);
  border: 1px solid var(--line); color: var(--fg-dim); white-space: nowrap; flex: none;
}
.rep-status.ok { color: var(--sev-clean); border-color: #1c4527; }
.rep-status.pending { color: var(--accent); border-color: var(--accent-dim); }
.rep-status.blocked, .rep-status.unavailable { color: var(--sev-elevated); border-color: #4d3d16; }
.rep-status.error, .rep-status.not_found { color: var(--fg-faint); }

.rep-fields { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.rep-field {
  font-family: var(--mono); font-size: 0.72rem;
  background: var(--bg-sunken); border: 1px solid var(--line-soft);
  border-radius: 5px; padding: 0.12rem 0.4rem; color: var(--fg-dim);
}
.rep-field b { color: var(--fg); font-weight: 600; }

.rep-msg { font-size: 0.76rem; color: var(--fg-faint); }
.rep-link { font-size: 0.78rem; color: var(--accent); text-decoration: none; margin-top: auto; }
.rep-link:hover { text-decoration: underline; }

/* Ban status, shown next to the player's name wherever they appear. */

/* A banned account gets the mark, not a wordy chip: the icon reads instantly
   in a dense table, and the kinds and counts live in the tooltip. */
.ban-mark {
  display: inline-flex; align-items: center; gap: 0.25rem;
  margin-left: 0.55rem; vertical-align: middle;
  color: var(--sev-very-high); white-space: nowrap; cursor: help;
}
.ban-icon {
  width: 0.95em; height: 0.95em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2.1;
  stroke-linecap: round;
}
.ban-days { font-size: 0.72rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.ban-badge {
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.1rem 0.42rem; border-radius: 4px; white-space: nowrap;
  border: 1px solid; vertical-align: middle;
  margin-left: 0.55rem;
}
.ban-clean { color: var(--fg-faint); border-color: var(--line); background: transparent; }

/* Inside a flex row the gap already spaces them; the margin would double it. */
.rep-name-row .ban-mark,
.rep-name-row .ban-badge,
.player-name .ban-mark,
.player-name .ban-badge { margin-left: 0; }

.rep-name-row { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.rep-name-row .rep-name { overflow: hidden; text-overflow: ellipsis; }

/* Steam + csrep, shown together wherever a player is listed. */
.profile-links { display: inline-flex; gap: 0.5rem; flex-wrap: wrap; }
.ext-link {
  font-size: 0.76rem; color: var(--accent); text-decoration: none;
  white-space: nowrap; border-bottom: 1px solid transparent;
}
.ext-link:hover { border-bottom-color: currentColor; }
.rep-link-row { margin-top: auto; padding-top: 0.35rem; }
.player-links { display: inline-flex; margin-top: 1rem; gap: 0.9rem; }
.stat-table .profile-links { gap: 0.6rem; }

.skeleton {
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 50%, var(--line-soft) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: 4px; height: 0.72rem; width: 60%;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------------- global stats ---------------- */

.stat-tiles {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
}
.stat-tile {
  background: var(--bg-sunken); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 0.7rem 0.85rem;
  display: flex; flex-direction: column; gap: 0.1rem;
}
.stat-value { font-family: var(--mono); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.stat-label { font-size: 0.72rem; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.06em; }

.verdict-bar {
  display: flex; height: 12px; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--line-soft); background: var(--bg-sunken);
}
.verdict-seg { height: 100%; }
.verdict-seg + .verdict-seg { border-left: 1px solid rgba(0, 0, 0, 0.35); }

.verdict-legend { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.55rem; }
.legend-item {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.76rem; color: var(--fg-dim);
}

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.table-scroll { overflow-x: auto; }
.stat-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; white-space: nowrap; }
.stat-table th {
  text-align: left; font-weight: 600; font-size: 0.71rem;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-faint);
  padding: 0.35rem 0.7rem 0.35rem 0; border-bottom: 1px solid var(--line-soft);
}
.stat-table td {
  padding: 0.42rem 0.7rem 0.42rem 0;
  border-bottom: 1px solid var(--line-soft); color: var(--fg-dim);
}
.stat-table td:first-child { color: var(--fg); font-weight: 550; }
.stat-table td.num, .stat-table th:nth-child(n+2) { font-family: var(--mono); }
.stat-table tr:last-child td { border-bottom: none; }

/* ---------------- match panel ---------------- */

.match-panel { display: flex; flex-wrap: wrap; gap: 1.4rem 2.2rem; align-items: flex-start; }
.match-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.match-stat .k { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--fg-faint); }
.match-stat .v { font-family: var(--mono); font-size: 1.05rem; }

/* ---------------- player cards ---------------- */

.player-list { display: flex; flex-direction: column; gap: 0.85rem; }

.player {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg-raise) 100%);
  overflow: hidden;
}
.player[data-verdict="very-high"] { border-color: #5c2126; }
.player[data-verdict="high"] { border-color: #5a3517; }
.player[data-verdict="elevated"] { border-color: #4d3d16; }

.player-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 1rem 1.25rem;
  cursor: pointer;
  user-select: none;
}
.player-head:hover { background: rgba(255,255,255,0.02); }

.gauge { position: relative; width: 66px; height: 66px; flex: none; }
.gauge svg { transform: rotate(-90deg); }
.gauge circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.gauge .track { stroke: var(--bg-sunken); }
.gauge .value { transition: stroke-dashoffset 0.7s cubic-bezier(0.4,0,0.2,1); }
.gauge .num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 0.92rem; font-weight: 600;
}

.player-id { min-width: 0; }
.player-name { font-size: 1.05rem; font-weight: 620; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.player-sub { font-size: 0.8rem; color: var(--fg-dim); margin-top: 0.1rem; }
.drivers { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.45rem; }
.driver {
  font-size: 0.72rem; padding: 0.13rem 0.5rem; border-radius: var(--radius-sm);
  background: var(--bg-sunken); border: 1px solid var(--line); color: var(--fg-dim);
}

.verdict-badge {
  font-size: 0.7rem; font-weight: 700; padding: 0.3rem 0.7rem;
  text-transform: uppercase; letter-spacing: 0.05em;
  border-radius: var(--radius-sm); white-space: nowrap; border: 1px solid;
}
.badge-clean { color: var(--sev-clean); border-color: #1f4526; background: #0e1f12; }
.badge-low { color: var(--sev-low); border-color: #24384f; background: #101821; }
.badge-elevated { color: var(--sev-elevated); border-color: #4d3d16; background: #221b0c; }
.badge-high { color: var(--sev-high); border-color: #5d3616; background: #26170c; }
.badge-very-high { color: var(--sev-very-high); border-color: #5e2320; background: #26100f; }

.player-body { padding: 0 1.25rem 1.25rem; display: none; }
.player.open .player-body { display: block; }
.chevron { transition: transform 0.2s; color: var(--fg-faint); font-size: 0.8rem; }
.player.open .chevron { transform: rotate(90deg); }

.section-title {
  font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-faint); margin: 1.25rem 0 0.65rem;
}

/* highlights */
.highlight {
  display: grid; grid-template-columns: auto 1fr auto; gap: 0.9rem;
  align-items: start;
  padding: 0.7rem 0.85rem;
  background: var(--panel-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); margin-bottom: 0.5rem;
}
.hl-time { display: flex; flex-direction: column; gap: 0.1rem; min-width: 74px; }
.hl-clock { font-family: var(--mono); font-size: 0.92rem; }
.hl-round { font-size: 0.7rem; color: var(--fg-faint); }
.hl-title { font-weight: 600; font-size: 0.9rem; }
.hl-detail { font-size: 0.83rem; color: var(--fg-dim); margin-top: 0.15rem; }
.hl-side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.sev-dot { width: 8px; height: 8px; border-radius: 50%; }

.copy-btn {
  font-family: var(--mono); font-size: 0.68rem;
  background: var(--bg-sunken); border: 1px solid var(--line);
  color: var(--fg-dim); border-radius: 5px; padding: 0.18rem 0.45rem; cursor: pointer;
  white-space: nowrap;
}
.copy-btn:hover { color: var(--accent); border-color: var(--accent-dim); }
.copy-btn.done { color: var(--sev-clean); border-color: #1c4527; }

/* detectors */
.detector {
  border-top: 1px solid var(--line-soft);
  padding: 0.7rem 0;
}
.detector:first-of-type { border-top: none; }
.det-head { display: grid; grid-template-columns: 1fr 130px 46px; gap: 0.8rem; align-items: center; }
.det-label { font-size: 0.9rem; font-weight: 560; }
.det-summary { font-size: 0.82rem; color: var(--fg-dim); margin-top: 0.2rem; }
.det-score { font-family: var(--mono); font-size: 0.82rem; text-align: right; }
.det-bar { height: 5px; border-radius: var(--radius-sm); background: var(--bg-sunken); overflow: hidden; }
.det-bar > div { height: 100%; border-radius: var(--radius-sm); }
.detector.skipped { opacity: 0.5; }
.det-metrics { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.5rem; }
.metric {
  font-family: var(--mono); font-size: 0.71rem;
  background: var(--bg-sunken); border: 1px solid var(--line-soft);
  border-radius: 5px; padding: 0.12rem 0.42rem; color: var(--fg-faint);
}
.metric b { color: var(--fg-dim); font-weight: 600; }

/* ---------------- misc ---------------- */

.disclaimer {
  font-size: 0.82rem; color: var(--fg-faint);
  border-left: 2px solid var(--line); padding-left: 0.9rem;
}

.report-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; }

.btn {
  font: inherit; font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  padding: 0.6rem 1.2rem; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent); color: #14100c;
  cursor: pointer; transition: filter 0.15s, box-shadow 0.15s;
}
.btn:hover { filter: brightness(1.12); box-shadow: 0 0 18px -4px var(--accent); }
.btn.ghost {
  background: transparent; border-color: var(--line); color: var(--fg-dim);
}
.btn.ghost:hover { border-color: var(--accent); color: var(--accent); box-shadow: none; }
.btn:disabled { opacity: 0.5; cursor: default; filter: none; box-shadow: none; }

.empty { color: var(--fg-faint); font-size: 0.85rem; font-style: italic; }

/* ---------------- players: search + paging ---------------- */

.players-section { display: flex; flex-direction: column; }

.player-search {
  font: inherit; font-size: 0.86rem;
  width: 100%;
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.75rem;
  color: var(--fg);
  background: var(--bg-sunken);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.player-search::placeholder { color: var(--fg-faint); }
.player-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(232, 120, 44, 0.12);
}

.search-status {
  font-size: 0.78rem; color: var(--fg-dim);
  margin-bottom: 0.6rem;
}

.players-foot {
  display: flex; align-items: center; gap: 0.9rem;
  margin-top: 0.9rem;
}
#player-count { font-size: 0.74rem; }

/* A name the player has since dropped, shown when a search matched it. */
.alias {
  margin-left: 0.55rem;
  font-size: 0.72rem; font-weight: 500;
  color: var(--accent);
  opacity: 0.85;
}

/* ---------------- footer ---------------- */

.sitefoot {
  margin-top: 3rem;
  padding: 0 clamp(1rem, 4vw, 2.5rem) 2.5rem;
  display: flex; flex-direction: column; gap: 0.55rem;
  font-size: 0.76rem; color: var(--fg-faint);
}
.sitefoot .hazard { margin-bottom: 1.2rem; }
.foot-slogan {
  font-family: var(--mono);
  text-transform: uppercase; letter-spacing: 0.24em;
  color: var(--accent); opacity: 0.72;
}

@media (max-width: 640px) {
  .player-head { grid-template-columns: auto 1fr; }
  .verdict-badge { grid-column: 2; justify-self: start; }
  .det-head { grid-template-columns: 1fr 70px; }
  .det-bar { grid-column: 1 / -1; }
  .highlight { grid-template-columns: 1fr; }
  .hl-side { flex-direction: row; align-items: center; }
}