/* steamcommunity.report — single theme: homage to the 2002 steampowered.com site.
   Black header, olive-khaki void, gold accents, two-tone headings, flat & square. */

:root {
  --black:    #000000;
  --bg:       #4c5040;           /* olive-khaki void */
  --bg-in:    #23241c;           /* dark inset card — clearly separated from void */
  --panel:    #1a1b14;           /* deepest panel, behind dense data */
  --frame:    #6f7358;           /* thin lighter-olive border line */
  --fg:       #f5f4ec;           /* near-white body text (~13:1 on card) */
  --white:    #ffffff;
  --muted:    #d0cfba;           /* secondary text — legible (~8:1) */
  --dim:      #cbceaf;           /* heading syllable — legible (~7.5:1) */
  --gold:     #ccb766;           /* tan/gold accent + links (brightened) */
  --gold-dim: #8f7f44;
  --underline:#191a12;           /* short dark bar under headings */
  --bar:      #1b1c14;
  --maxw:     820px;
  --font:     Arial, Helvetica, Verdana, sans-serif;
  --mono:     "Courier New", Courier, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; }
.mono { font-family: var(--mono); }
.muted { color: var(--muted); }

/* padding-bottom was 40px of dead space BELOW the footer text — pure height cost
   with nothing in it. Trimmed so the homepage fits a 1080p browser window. */
.page { max-width: var(--maxw); margin: 0 auto; padding: 10px 14px 12px; }

/* ---- Header (black bar, pipe logo, gold nav) --------------------------- */
.shead { background: var(--black); padding: 9px 20px 13px; }
.shead__bar { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 26px; }
.shead__url { color: var(--white); font-size: 13px; letter-spacing: .3px; display: inline-flex; align-items: center; gap: 8px; }
.shead__url .flower { width: 13px; height: 13px; filter: invert(1); flex-shrink: 0; }
.shead__rule { height: 1px; background: #ffffff; opacity: .85; margin: 12px 0; }
.shead__row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.slogo { display: inline-flex; align-items: center; gap: 13px; }
.slogo:hover { text-decoration: none; }
.slogo svg { display: block; }
.slogo__img {
  display: block; width: 44px; height: 44px;
  object-fit: contain; flex-shrink: 0;
  /* Pop a little against the black header */
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.slogo__wm { color: var(--white); font-size: 21px; font-weight: 700; letter-spacing: .01em; line-height: 1; white-space: nowrap; }
.slogo__tm { color: var(--gold); letter-spacing: .01em; }
.snav { color: var(--gold); font-size: 13px; text-align: right; line-height: 1.4; }
.snav a { font-weight: 700; }
/* Current page: gold underline so the header shows where you are (header.js adds
   .is-active + aria-current). Square underline offset to match the flat theme. */
.snav a.is-active { color: var(--white); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; text-decoration-thickness: 2px; }
.snav span { color: #888a6f; margin: 0 6px; }
/* Unified header right group: nav + the "Another profile…" mini search. Wraps
   the search below the nav when the row gets tight (keeps the 820px header from
   overflowing) and stacks fully on mobile via the breakpoint block. */
.shead__actions { display: flex; align-items: center; justify-content: flex-end; gap: 9px 18px; flex-wrap: wrap; min-width: 0; }
.shead__actions .search--mini { max-width: 250px; margin: 0; }

/* ---- Auth widget (header top-right) ------------------------------------ */
.auth { display: flex; align-items: center; flex-shrink: 0; }
.auth-signin {
  display: inline-flex; align-items: center; gap: 7px;
  background: #16170f; border: 1px solid #3a3d2e; color: var(--fg);
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
  padding: 6px 12px; line-height: 1; white-space: nowrap;
}
.auth-signin:hover { border-color: var(--gold); color: var(--gold); text-decoration: none; }
.auth-signin__ico { color: #9fb6cc; flex-shrink: 0; }
.auth-signin:hover .auth-signin__ico { color: var(--gold); }

.auth-user { position: relative; }
.auth-user__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: #16170f; border: 1px solid #34372a; color: var(--white);
  font: inherit; font-size: 12px; padding: 4px 9px 4px 4px; cursor: pointer;
}
.auth-user__btn:hover { border-color: var(--gold-dim); }
.auth-user__av { display: block; object-fit: cover; border: 1px solid #34372a; }
.auth-user__name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-user__caret { color: var(--muted); font-size: 10px; }

.auth-menu {
  position: absolute; right: 0; top: calc(100% + 5px); min-width: 162px;
  background: #14160d; border: 1px solid #34372a; z-index: 60;
  box-shadow: 0 6px 18px rgba(0,0,0,.55);
}
.auth-menu a { display: block; padding: 9px 13px; color: var(--fg); font-size: 13px; border-bottom: 1px solid #23251a; }
.auth-menu a:last-child { border-bottom: none; }
.auth-menu a:hover { background: #1e2015; color: var(--gold); text-decoration: none; }
.auth-menu__out { color: var(--muted); }

/* ---- Content frame ----------------------------------------------------- */
.frame {
  border: 1px solid var(--frame);
  background: var(--bg-in);
  margin-top: 5px;
  padding: 18px 30px 20px;
  /* subtle inset so the darker panel reads as a recessed "screen" */
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 1px 10px rgba(0,0,0,.30);
}

/* ---- Two-tone section headings + dark underline bar -------------------- */
.sec { font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 26px 0 12px; color: var(--white); }
.sec:first-child { margin-top: 0; }
.sec .a { color: var(--dim); }
.sec .b { color: var(--white); }
.sec::after { content: ""; display: block; width: 38px; height: 4px; background: var(--bar); margin-top: 7px; }

p { margin: 0 0 14px; }
code { font-family: var(--mono); color: var(--gold); }
.lead { max-width: 70ch; }

/* ---- Landing search ---------------------------------------------------- */
.search { display: flex; gap: 8px; max-width: 560px; margin: 6px 0 8px; }
.search--mini { max-width: 300px; margin: 0; }
.search__input {
  flex: 1; font: inherit; padding: 9px 11px; color: var(--white);
  background: #3c4032; border: 1px solid #2a2d20; border-top-color: #20231a;
}
.search__input::placeholder { color: #9a9a83; }
.search__input:focus { outline: 1px solid var(--gold); }
.search__btn {
  font: 700 14px var(--font); cursor: pointer; padding: 9px 18px;
  color: var(--black); background: var(--gold); border: 1px solid var(--gold-dim);
}
.search__btn:hover { background: #cdb96f; }
.search--mini .search__input,
.search--mini .search__btn { padding: 6px 10px; font-size: 13px; }
.hint { min-height: 16px; color: var(--gold); font-size: 13px; margin: 0 0 10px; }
.examples { color: var(--muted); font-size: 13px; margin: 4px 0 0; }

/* ---- Profile identity — scouting card ---------------------------------- */
/* Outer section wrapper */
.id {
  margin-bottom: 6px;
}
/* Scouting card: pins panel (left) + body (right), side-by-side */
.id__card {
  display: flex; flex-direction: row; gap: 0; align-items: stretch;
  border: 1px solid var(--frame); background: rgba(0,0,0,.12);
}

/* ---- Pins/medals side panel -------------------------------------------- */
/* CS2 collectibles box — compact block, wide enough for ~6 icons per row.
   order: 1 puts it on the RIGHT of the identity body (order: 0 default). */
/* Right-hand column: pins box on top, party-size box beneath. The column owns
   the width + left border now (the pins box used to), so its children can be
   separate bordered panels — the pins box is height-capped and scrolls, so a
   nested panel would be trapped inside that scroll. */
.id__rightcol {
  flex: 0 0 auto;
  order: 1;
  /* 6 cols × 42px + 5 gaps × 5px + 2 × 10px h-padding = 297px */
  width: 297px;
  border-left: 1px solid var(--frame);
  display: flex; flex-direction: column; align-items: stretch;
}
.id__rightcol[hidden] { display: none; }
.id__badges-box {
  flex: 0 0 auto;
  padding: 10px 10px 12px;
  display: flex; flex-direction: column; align-items: stretch;
  /* Safety valve: if someone has an extreme number of pins, cap the height
     so the box never towers way past the identity column */
  max-height: 520px;
  overflow: hidden;
}
/* When pins overflow the cap, show a scroll rather than clipping silently */
.id__badges-box.is-overflow {
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--frame) rgba(0,0,0,.15);
}
.id__badges-box.is-overflow::-webkit-scrollbar { width: 6px; }
.id__badges-box.is-overflow::-webkit-scrollbar-track { background: rgba(0,0,0,.15); }
.id__badges-box.is-overflow::-webkit-scrollbar-thumb { background: var(--frame); }
.id__badges-label {
  display: block; font-size: 9px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 7px;
  padding-bottom: 5px; border-bottom: 1px solid var(--frame);
  line-height: 1.4; white-space: normal;
}
/* Collectible medals — 6-column compact grid */
.id__medals {
  display: grid;
  grid-template-columns: repeat(6, 42px);
  gap: 5px;
  align-content: start;
}

/* ---- Main identity + score body ---------------------------------------- */
/* order: 0 keeps this on the LEFT; .id__badges-box uses order: 1 for RIGHT. */
.id__body {
  flex: 1 1 0; min-width: 0;
  order: 0;
  display: flex; flex-direction: column; gap: 0;
  padding: 12px 14px 10px;
}

/* Top row: avatar column on the left, then everything else stacked to its right.
   The right block (name+bans, then the meta line) is a flex column so the meta
   sits DIRECTLY under the name with no gap, while spanning the full width right
   of the avatar — a long realname + Steam level + Member since all fit on it. */
.id__top { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 10px; }
.id__top-main { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.id__top-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.id__bans { flex-shrink: 0; }
.id__info { display: flex; flex-direction: column; gap: 0; min-width: 0; flex: 1 1 auto; }
/* Avatar column: the picture, plus a tidy actions box beneath it. The box and
   the (square) avatar share the same 96px width so they read as one clean block. */
.id__avatar-col { display: flex; flex-direction: column; gap: 6px; width: 100px; flex-shrink: 0; }
.id__avatar { width: 100px; height: 100px; display: block; border: 1px solid #2a2d20; object-fit: cover; background: #3c4032; flex-shrink: 0; }
.id__avatar--ph { display: grid; place-items: center; font-size: 42px; font-weight: 700; color: var(--gold); }
.id__acts { display: flex; flex-direction: column; gap: 5px; }
.id__act,
.id__acts .trade-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; box-sizing: border-box; margin: 0;
  height: 24px; padding: 0 6px; border-radius: 0;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1;
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.id__act {
  color: var(--gold-dim); border: 1px solid var(--frame); background: #14160d;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.id__act:hover { color: var(--gold); border-color: var(--gold-dim); background: #1b1d12; text-decoration: none; }
/* Scouting snapshot — glance stats (CS2 hours · inventory · pins) stacked under
   the avatar actions, filling the left column beside the taller info panel.
   Explicit [hidden] rules are needed because display:flex overrides the UA
   [hidden]{display:none}. */
.id__snap { display: flex; flex-direction: column; border: 1px solid var(--frame); background: rgba(0,0,0,.18); margin-top: 1px; }
.id__snap[hidden] { display: none; }
.id__snap-row { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; }
.id__snap-row[hidden] { display: none; }
.id__snap-row + .id__snap-row { border-top: 1px solid var(--frame); }
.id__snap-val { font: 700 14px var(--font); color: var(--fg); line-height: 1.05; letter-spacing: -.3px; }
.id__snap-row--inv .id__snap-val { color: var(--gold); }
.id__snap-lbl { font: 700 8px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.id__name-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; min-width: 0; }
/* Name stays on ONE line: nowrap + ellipsis so a long persona never wraps to a
   second line; min-width:0 lets it shrink inside the flex row so the ellipsis can
   engage instead of overflowing. Trust + commends moved to their own signals row,
   so the name now has the full width right of the avatar. */
.id__name { margin: 0; font-size: 24px; color: var(--white); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; max-width: 100%; }
/* Per-player card FLAIR (profile.js gates it to specific id64s): the neon text
   family of that player's Steam special profile. COLOUR + GLOW ONLY (fonts,
   weights and sizes untouched). One rule set driven by two custom properties, so
   adding a player is just another modifier class below — not another copy.
   Excluded, per the owner's picks (these keep their ORIGINAL colours): the
   equipped tag, the Premier pill, the trust pill, commends, the nocat score
   number + tier chip, and the LVL box + rank chip. The name is excluded here
   because its own stronger bloom rule styles it. */
.id__card--flair :not(.badge):not(.badge *):not(.id__name--flair):not(#rank-slot):not(#rank-slot *):not(#trust-slot):not(#trust-slot *):not(#commends-slot):not(#commends-slot *):not(.id-score-numwrap):not(.id-score-numwrap *):not(.id-score-tier):not(.lvl__chip):not(.lvl__chip *):not(.lvlrank):not(.lvlrank *) {
  color: var(--flair-txt) !important;
  text-shadow: 0 0 6px var(--flair-soft);
}
/* The name's stronger neon bloom, same palette. */
.id__name--flair {
  color: var(--flair-txt);
  text-shadow: 0 0 1px rgba(255,255,255,.6), 0 0 8px var(--flair-glow),
               0 0 18px var(--flair-mid), 0 0 32px var(--flair-soft);
}
/* Pookie — Steam-Deck pink. */
.id__card--maple, .id__card--maple .id__name--flair {
  --flair-txt: #ffb3dd;
  --flair-glow: rgba(229,53,171,.85);
  --flair-mid:  rgba(229,53,171,.55);
  --flair-soft: rgba(229,53,171,.38);
}
/* reap — readable violet: light lavender text so it stays legible on the dark
   card, with a deeper violet bloom behind it. */
.id__card--violet, .id__card--violet .id__name--flair {
  --flair-txt: #cdb4ff;
  --flair-glow: rgba(150,86,255,.85);
  --flair-mid:  rgba(150,86,255,.55);
  --flair-soft: rgba(150,86,255,.38);
}
.id__meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-bottom: 0; }
.id__since { font-size: 12px; color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.id__since:empty { display: none; }
.id__sid { color: var(--muted); font-weight: 400; font-family: var(--mono); font-size: .92em; }
.id__sid::before { content: '\00B7'; margin: 0 6px; color: var(--frame); }
/* Meta items keep the Steam level badge from being split off its row, and empty
   spans never leave a phantom gap. The realname shows in full (it has the whole
   width right of the avatar to use, and wraps before it would clip). */
.id__meta #realname { min-width: 0; }
.id__meta #steam-level-slot { flex-shrink: 0; }
.id__meta #country { flex-shrink: 0; white-space: nowrap; }
.id__meta #realname:empty, .id__meta #country:empty, .id__meta #steam-level-slot:empty { display: none; }
/* Country flag image (proxied via /api/flag/<cc>) — sized to the meta text. */
.id__flag {
  height: 13px; width: auto; display: inline-block; vertical-align: -2px;
  border-radius: 0; margin: 0 1px;
  border: 1px solid rgba(255, 255, 255, .14);   /* edge so white/pale flags read on dark */
  background: #2a2d20;                            /* fills before load / for transparency */
}
.id__bans { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; flex-shrink: 0; }

/* (Legacy) top-right column — no longer used; bans/trust/commends moved to the
   signals row so the name gets the full width. Kept harmless if referenced. */
.id__top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex-shrink: 0; }

/* Signals row — ban status + trust factor + commends on their own line beneath the
   name. A wrap row so on a narrow card they stack instead of colliding; spaced from
   the name/meta by .id__top-main's column gap. Hidden only when truly empty. */
.id__signals { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.id__signals:not(:has(.trust-card, .cmnd, .id__bans > *)) { display: none; }
/* Left-aligned row: bans + commends read left-to-right, not flush-right. */
.id__signals .id__bans { align-items: flex-start; }
.id__signals .cmnd { align-items: flex-start; }

/* CS2 commends widget (Friendly / Teacher / Leader) */
.id__commends:empty { display: none; }
.cmnd {
  display: inline-flex; flex-direction: column; align-items: flex-end; gap: 3px;
  padding: 5px 9px; border: 1px solid var(--frame); background: var(--bg-in); border-radius: 0;
}
.cmnd__lbl { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.cmnd__row { display: inline-flex; align-items: center; gap: 11px; }
.cmnd__it { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--fg); line-height: 1; }
.cmnd__it svg { width: 14px; height: 14px; display: block; }
.cmnd__it--friendly svg { color: #9ccf6f; }
.cmnd__it--teacher  svg { color: #6fb7e0; }
.cmnd__it--leader   svg { color: #e8c84a; }

/* Steam level badge */
.id__steam-lvl {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--gold); border: 1px solid var(--gold-dim);
  background: rgba(204,183,102,.08); padding: 1px 7px; line-height: 1.7;
  white-space: nowrap;
}
.id__steam-lvl__lbl { color: var(--muted); font-weight: 400; font-size: 10px; letter-spacing: .10em; text-transform: uppercase; }

/* Score hero row — prominent, between avatar row and quick-stats */
.id__score-hero {
  margin-bottom: 8px;
}
.id__score-hero:empty { display: none; }

/* Dossier-style score card (mirrors home.css .dossier__score) */
.id-score-card {
  border: 1px solid var(--frame); background: #0f110b;
  box-shadow: inset 1px 1px 0 #14160d; border-top: 2px solid var(--gold-dim);
  padding: 10px 13px; margin-bottom: 8px;
}
.id-score-label {
  font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: 1px;
}
.id-score-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 3px;
}
.id-score-numwrap {
  font-family: var(--mono); line-height: 1.02; min-width: 0;
}

/* Compact score display inside the header */
.id-score-num {
  font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1;
}
.id-score-max {
  font-size: 16px; color: #6b6d5e; font-weight: 400;
}
.id-score-footnote {
  font-size: 11px; color: var(--muted); vertical-align: super;
  text-decoration: none; border-bottom: none;
  margin-left: 2px; line-height: 1;
}
.id-score-footnote:hover, .id-score-footnote:focus { color: var(--gold); text-decoration: none; }
.id-score-tier {
  font-family: var(--mono); font-size: 11px; padding: 2px 8px; letter-spacing: 1px;
  border: 1px solid; white-space: nowrap; align-self: center; background: rgba(0,0,0,.2);
  text-transform: uppercase; flex: none;
}
.id-score-tier[hidden] { display: none; }
/* Tiny bare up/down trend arrow, floated above the last "0" of /1000 (no box). */
.id-score-max { position: relative; }
.id-score-trend {
  position: absolute; left: 94%; top: -0.95em; transform: translateX(-50%);
  font-size: 9px; line-height: 1; pointer-events: none;
}
.id-score-trend--up   { color: #9fdba0; }
.id-score-trend--down { color: #e08070; }

/* nocat band bar under the identity-card score — mirrors the homepage dossier
   bar (fixed rainbow segments, current band ringed, white marker at score/10). */
.id-score-bar-wrap { margin: 9px 0 0; position: relative; }
.id-score-bar-wrap:empty { display: none; }
.id-score-bar { position: relative; display: flex; height: 13px; border: 1px solid #2a2d20; }
.id-score-bar > span { display: block; }
.id-score-mark {
  position: absolute; top: -4px; bottom: -4px; width: 3px; background: #f5f4ec;
  margin-left: -1.5px; box-shadow: 0 0 0 1px rgba(0,0,0,.55);
}

/* ---- Window-swap animation (ALL TIME <-> SYNCED etc.) --------------------
   Colours cross-fade, the marker slides to the new score, the active band ring
   fades across, and the number glows as it counts up/down to the new value. */
.id-score-num  { transition: color .5s ease; }
.id-score-tier { transition: color .5s ease, border-color .5s ease; }
.id-score-card { transition: border-top-color .5s ease; }
.id-score-mark { transition: left .6s cubic-bezier(.5, .02, .2, 1); }
.id-score-seg  { transition: box-shadow .4s ease; }
.id-score-seg.is-hi { box-shadow: inset 0 0 0 1px #f5f4ec; }
@keyframes id-score-pulse {
  0%   { text-shadow: 0 0 0 transparent; }
  35%  { text-shadow: 0 0 16px currentColor; }
  100% { text-shadow: 0 0 0 transparent; }
}
.id-score-num--pulse { animation: id-score-pulse .6s ease; }
.id-score-ticks {
  position: relative; height: 12px; font-family: var(--mono);
  font-size: 11px; color: var(--muted); margin-top: 6px;
}
/* Pin each tick to its true value position so the labels line up with the band
   boundaries (250 under the grey->cyan edge, etc.). flex/space-between drifts
   them because the labels are different widths. Ends stay flush; middles centred. */
.id-score-ticks > span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.id-score-ticks > span:nth-child(1) { left: 0;    transform: none; }
.id-score-ticks > span:nth-child(2) { left: 25%; }
.id-score-ticks > span:nth-child(3) { left: 50%; }
.id-score-ticks > span:nth-child(4) { left: 75%; }
.id-score-ticks > span:nth-child(5) { left: 100%; transform: translateX(-100%); }

/* Quick-stats strip: K/D · HS% · Win Rate */
.id__quickstats {
  display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 10px;
  padding: 7px 10px; background: rgba(0,0,0,.18); border: 1px solid var(--frame);
}
.id__quickstats:empty { display: none; }
.id-qs__item {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 40px;
}
.id-qs__val {
  font-size: 17px; font-weight: 700; color: var(--fg); line-height: 1.1;
  font-family: var(--mono);
}
.id-qs__lbl {
  font-size: 9px; text-transform: uppercase; letter-spacing: .10em; color: var(--muted);
}

/* Footer row — links + ID */
.id__foot { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.id__links { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; margin-bottom: 2px; }
/* SteamID / vanity URL row — labeled, monospace, subtle */
.id__id-row {
  display: flex; align-items: center; gap: 7px; font-size: 12px;
}
.id__id-label {
  font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: rgba(0,0,0,.18); border: 1px solid var(--frame);
  padding: 1px 6px; flex-shrink: 0; line-height: 1.6;
}
.id__id-val { color: var(--muted); font-family: var(--mono); font-size: 12px; word-break: break-all; cursor: default; }

.badge { display: inline-block; font-size: 12px; padding: 2px 8px; border: 1px solid var(--frame); color: var(--fg); }
.badge--state { color: var(--white); }
.badge--clean { color: #cde0a0; border-color: #6f7d3f; }
.badge--ban { color: #f0b0a0; border-color: #8a4a3a; font-weight: 700; }

/* ---- Custom per-SteamID badges (driven by assets/js/badges.js) --------- */
.badge--gold, .badge--purple, .badge--cyan, .badge--red, .badge--green {
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 10px; position: relative;
}

.badge--gold {
  color: #ffe07a;
  border-color: #ffd34a;
  background: linear-gradient(180deg, rgba(255, 215, 0, .15), rgba(255, 180, 0, .25));
  box-shadow:
    0 0 6px  rgba(255, 215, 0, .55),
    0 0 14px rgba(255, 200, 0, .30),
    inset 0 0 4px rgba(255, 220, 100, .25);
  text-shadow: 0 0 5px rgba(255, 220, 100, .70);
  animation: badgeGoldPulse 3.5s ease-in-out infinite;
}
@keyframes badgeGoldPulse {
  0%, 100% { box-shadow: 0 0 6px rgba(255,215,0,.55), 0 0 14px rgba(255,200,0,.30), inset 0 0 4px rgba(255,220,100,.25); }
  50%      { box-shadow: 0 0 10px rgba(255,215,0,.85), 0 0 22px rgba(255,200,0,.50), inset 0 0 5px rgba(255,220,100,.35); }
}

.badge--purple {
  color: #e9d5ff;
  border-color: #c084fc;
  background: linear-gradient(180deg, rgba(168, 85, 247, .18), rgba(126, 34, 206, .30));
  box-shadow:
    0 0 8px  rgba(192, 132, 252, .65),
    0 0 18px rgba(168,  85, 247, .35),
    inset 0 0 4px rgba(216, 180, 254, .25);
  text-shadow: 0 0 6px rgba(216, 180, 254, .75);
  animation: badgePurplePulse 3.5s ease-in-out infinite;
}
@keyframes badgePurplePulse {
  0%, 100% { box-shadow: 0 0 8px rgba(192,132,252,.65), 0 0 18px rgba(168,85,247,.35), inset 0 0 4px rgba(216,180,254,.25); }
  50%      { box-shadow: 0 0 12px rgba(192,132,252,.95), 0 0 26px rgba(168,85,247,.55), inset 0 0 5px rgba(216,180,254,.35); }
}

/* Future badge slots — solid base styles, no animation by default */
.badge--cyan  { color: #a5f3fc; border-color: #22d3ee; background: rgba(34, 211, 238, .12); box-shadow: 0 0 8px rgba(34, 211, 238, .55); text-shadow: 0 0 5px rgba(165, 243, 252, .7); }
.badge--red   { color: #fecaca; border-color: #ef4444; background: rgba(239,  68,  68, .12); box-shadow: 0 0 8px rgba(239,  68,  68, .55); text-shadow: 0 0 5px rgba(254, 202, 202, .7); }
.badge--green { color: #bbf7d0; border-color: #22c55e; background: rgba( 34, 197,  94, .12); box-shadow: 0 0 8px rgba( 34, 197,  94, .55); text-shadow: 0 0 5px rgba(187, 247, 208, .7); }

/* ---- Tag as a NAME PREFIX (variant D, 2026-07-16) ----------------------
   Next to a name a tag renders as just the coloured WORD followed by a "·"
   separator — no box. Opt in per render site with data-tagprefix="1" on the
   badge element (badges.js re-adds .badge--prefix every time it rewrites
   className). Standalone swatches (badge picker, tag builder) deliberately do
   NOT opt in — there they're a chooseable chip, not a prefix.
   The box channels need !important because applyBadge composes background /
   border / box-shadow INLINE (so any effect combo can stack); overriding here
   keeps that whole paint pipeline untouched. Box-targeted effects (gradient /
   metal / rainbow fills) simply have no box left to paint — text-targeted ones
   (glow, text shadows, clipped fills) still read. No separator glyph — the gap
   from the parent row (.id__name-row gap / .lb-tag--sm margin) does the spacing. */
.badge--prefix {
  border: 0 !important; background: none !important; box-shadow: none !important;
  padding: 0 !important; overflow: visible !important;
  display: inline-flex !important; align-items: center;
  font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1;
}
/* BASELINE-align the prefix tag with the name. Centring is geometrically correct
   but reads as "floating": the 13px tag and the 24px name have different
   line-heights, so a centred tag hangs above the name's baseline (worse still on
   a name with no descenders). Flexbox baseline alignment only groups the items
   that OPT IN, so both the tag and the name are set here — the rest of the row
   (Premier badge, Edit Tag button) keeps the row's align-items:center. */
.id__name-row > .badge--prefix,
.id__name-row > .id__name { align-self: baseline; }
/* Plain preset tags (no colour) read as muted text, not white like the name. */
.badge--prefix.badge--state { color: #c9c9b4; text-transform: uppercase; }
/* Keep the coloured word legible without its box backing it. */
.badge--prefix.badge--custom { color: var(--bc-text, #ffe07a); text-shadow: 0 0 7px var(--bc-glow, rgba(255,211,74,.5)); }

/* ---- Dynamic per-user tag (driven by badges.js applyBadge) ------------- */
/* Colour comes from inline CSS vars (--bc, --bc-glow, ...) so any hex works;
   effect classes (.badge--fx-*) layer glow / gradient / animations on top. */
.badge--custom {
  font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  padding: 3px 10px; position: relative; overflow: hidden; isolation: isolate;
  color: var(--bc-text, #ffe07a);
  border: 1px solid var(--bc, #ffd34a);
}
/* ===== Per-user tag EFFECTS — PER-EFFECT targeting =====
   Every chosen effect carries its OWN target. badges.js emits a class
   .badge--fx-<effect>--<target> (target = text | badge | both) for each active
   effect, and composes the pulse / chroma / rainbow ANIMATIONS inline (box for
   badge/both, span for text) so several animated effects can still combine.
   BADGE part = the box (border, bg, box-shadow, ::before/::after);
   TEXT part = the .badge__txt span (a text-shadow or a background-clipped fill).
   This lets e.g. holo live on the text while neon lives on the badge. */

/* The label span sits ABOVE holo's ::before foil and shine's ::after sweep. */
.badge__txt { position: relative; z-index: 2; display: inline-block; }

/* Registered animatable knobs. --fx-p = pulse "breath" (the composed shadow
   radii are calc'd against it), --fx-a = spin angle (rainbow's conic border,
   rainbow/holo text fills). @property registration makes them interpolate
   smoothly; without support pulse/spin degrade to discrete steps. Both are
   inherits:false on purpose — the box and the text span each animate their own. */
@property --fx-p { syntax: '<number>'; inherits: false; initial-value: 1; }
@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

/* HOW EFFECTS COMPOSE: every conflicting paint channel — box-shadow,
   text-shadow, background layers, the text fill, border, and both animation
   lists — is composed INLINE by badges.js applyBadge(), so ANY combination of
   effects stacks instead of last-class-wins clobbering (gradient used to kill
   the neon halo; pulse's keyframed box-shadow used to replace neon/glow while
   running; metal/rainbow/gradient fought over the box fill; the text fills all
   fought over the glyphs). The look definitions therefore live in badges.js.
   The classes below only keep what CANNOT collide: shine's ::after sweep and
   holo's ::before foil (each effect owns its own pseudo-element). */

/* SHINE (box): a sweeping light streak across the box (::after). */
.badge--fx-shine--badge::after,
.badge--fx-shine--both::after {
  content: ''; position: absolute; top: -25%; height: 150%; width: 16%; left: -40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  transform: skewX(-22deg); filter: blur(.4px); mix-blend-mode: screen;
  animation: badgeShine calc(2.8s / var(--fx-s, 1)) cubic-bezier(.45,0,.15,1) infinite; pointer-events: none; z-index: 3;
}
@keyframes badgeShine { 0%, 14% { left: -40%; } 50%, 100% { left: 135%; } }
/* SHINE (text): composed by badges.js as an OVERLAY background layer above the
   picked text fill. Only the shine layer carries an explicit background-size,
   so this position sweep moves nothing else. */
@keyframes badgeShineTxt { 0%, 14% { background-position: 140% 0; } 50%, 100% { background-position: -40% 0; } }

/* HOLO (box): a vibrant iridescent foil BEHIND the text (::before, z-index:-1).
   The dark legibility text-shadow is composed inline by badges.js. */
.badge--fx-holo--badge::before,
.badge--fx-holo--both::before {
  /* Foil must cover the badge across the full -290px slide. Width is sized to the
     badge PLUS the slide distance (not a bare %), so small badges (picker / profile)
     never expose the dark background mid-animation. */
  content: ''; position: absolute; top: 0; bottom: 0; left: -25px; width: calc(100% + 380px); z-index: -1;
  background: repeating-linear-gradient(115deg,
    #ff3bb0 0, #8a6bff 58px, #2fd9e0 116px, #6bff8a 174px, #ffd23f 232px, #ff3bb0 290px);
  opacity: .92; pointer-events: none;
  animation: badgeHolo calc(6s / var(--fx-s, 1)) linear infinite;
}
@keyframes badgeHolo { from { transform: translateX(0); } to { transform: translateX(-290px); } }

/* PULSE: breathes --fx-p; composed shadows scale with it instead of being
   replaced (the old keyframes animated box-shadow directly and clobbered
   whatever glow/neon had painted). */
@keyframes badgeCustomPulse { 0%, 100% { --fx-p: 0.62; } 50% { --fx-p: 1.35; } }
/* SPIN: drives rainbow's conic border and the rainbow/holo text fill angles. */
@keyframes badgeSpin { to { --fx-a: 360deg; } }
/* CHROMA: hue-rotates the whole element (composed inline by badges.js). */
@keyframes badgeChroma { to { filter: hue-rotate(360deg); } }

/* FIRE (text fill): flame licks (layer 1, 300% tall) sweep upward through the
   ember ramp (layer 2, 240% tall) — layer positions animate in lockstep. */
@keyframes badgeFire {
  0%   { background-position: 0 100%, 0 62%; }
  50%  { background-position: 0 40%,  0 48%; }
  100% { background-position: 0 -100%, 0 62%; }
}
/* GLITCH (text): the resting RGB fringe + main-text jolt are composed inline
   by badges.js; the red/cyan GHOST copies + slice tears live here as pseudos
   reading data-glitch. De-synced periods (7.2s red / 10.4s cyan) so the
   combined pattern repeats only every ~94s; --fx-s scales both. */
.badge--fx-glitch--text { position: relative; z-index: 0; }
.badge--fx-glitch--text .badge__txt { display: inline-block; }
.badge--fx-glitch--text::before,
.badge--fx-glitch--text::after {
  content: attr(data-glitch); position: absolute; left: 0; top: 0; width: 100%;
  opacity: 0; z-index: -1; pointer-events: none; text-shadow: none;
}
.badge--fx-glitch--text::before { color: #ff2d6a; animation: badgeGlitchA calc(7.2s / var(--fx-s, 1)) steps(1) infinite; }
.badge--fx-glitch--text::after  { color: #00e5ff; animation: badgeGlitchB calc(10.4s / var(--fx-s, 1)) steps(1) infinite; }
@keyframes badgeGlitchA {
  0%, 89.5%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  90%  { opacity: .95; transform: translate(-3px, -1px);  clip-path: inset(0 0 62% 0); }
  91%  { opacity: .95; transform: translate(3px, 1px);    clip-path: inset(58% 0 0 0); }
  92%  { opacity: .9;  transform: translate(-2px, 0);     clip-path: inset(28% 0 30% 0); }
  93%  { opacity: .95; transform: translate(1.5px, -1px); clip-path: inset(8% 0 72% 0); }
  94%  { opacity: 0; }
}
@keyframes badgeGlitchB {
  0%, 45.5%, 100% { opacity: 0; transform: none; clip-path: inset(0); }
  46%   { opacity: .9;  transform: translate(2.5px, 1px); clip-path: inset(48% 0 0 0); }
  47.2% { opacity: .9;  transform: translate(-2px, -1px); clip-path: inset(0 0 52% 0); }
  48.4% { opacity: 0; }
  90.5% { opacity: .9;  transform: translate(-3px, 0);    clip-path: inset(30% 0 30% 0); }
  91.7% { opacity: .95; transform: translate(2px, 1px);   clip-path: inset(60% 0 5% 0); }
  93%   { opacity: 0; }
}
@keyframes badgeGlitchTxt {
  0%, 89.5%, 100% { transform: none; opacity: 1; }
  90.3% { transform: translate(1.5px, -.5px) skewX(2.5deg); }
  91.5% { transform: translate(-1.5px, .5px) skewX(-2.5deg); opacity: .55; }
  92%   { opacity: 1; }
  93%   { transform: translate(.7px, 0); }
  94.5% { transform: none; }
}

/* SCANLINES (text fill): the CRT refresh bar (layer 1, 340% tall) rolls down
   over the static line grid + phosphor ramp; rare phosphor flicker dips. */
@keyframes badgeScan {
  0%    { background-position: 0 -60%, 0 0, 0 0; opacity: 1; }
  91%   { opacity: 1; }
  93%   { opacity: .84; }
  94.5% { opacity: 1; }
  97%   { opacity: .92; }
  100%  { background-position: 0 160%, 0 0, 0 0; opacity: 1; }
}

/* ---- Party-size split (profile.js renderStacks) ------------------------- */
/* Its OWN panel in the right column, beneath the pins box (never inside it —
   that box scrolls). margin-top:auto parks it at the bottom so it fills the
   column's leftover height instead of floating mid-column. */
.id__stacks { margin-top: auto; padding: 8px 10px 9px; border-top: 1px solid var(--frame); }
.id__stacks[hidden] { display: none; }
.stk__head { display: flex; align-items: center; gap: 6px; font: 700 9px var(--font);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.stk__tag { font: 700 8px var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-dim); border: 1px solid var(--frame); padding: 1px 4px; cursor: help; }
/* Plain-language key for the SHARE / WIN columns. Right-aligned in the header
   row so it explains the numbers without adding a line of height. */
.stk__key { margin-left: auto; font: 8px var(--mono); letter-spacing: .02em;
  text-transform: none; color: #6f7358; white-space: nowrap; }
/* ONE grid shared by the size rows, their header, and the played-with rows, so
   every number in the panel lines up in the same two right-hand columns.
   tabular-nums keeps the digits from jittering column to column. */
.stk__cols, .stk__row, .stkm__row {
  display: grid; grid-template-columns: 46px 1fr 32px 36px;
  align-items: center; gap: 6px;
  font-variant-numeric: tabular-nums;
}
.stk__cols { font: 700 8px var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: #6f7358; margin-bottom: 2px; }
.stk__cols span:nth-child(2), .stk__cols span:nth-child(3) { text-align: right; }
.stk__row { padding: 1px 0; font: 10px var(--mono); }
.stk__lbl { color: var(--fg); font-weight: 700; letter-spacing: .02em; }
.stk__bar { height: 5px; background: rgba(255,255,255,.07); border-radius: 0; overflow: hidden; }
.stk__bar i { display: block; height: 100%; background: var(--gold-dim); }
/* share = plain; win = its own cell, divided off so the two percentages can't
   be misread as one number (that was the "hard to read" part). */
.stk__pct, .stkm__pct { color: var(--fg); text-align: right; font-weight: 700; }
.stk__wr, .stkm__wr {
  color: var(--muted); text-align: right;
  border-left: 1px solid rgba(255,255,255,.10); padding-left: 5px;
}
.stk__wr.is-good, .stkm__wr.is-good { color: #8fbf5e; }
/* Header labels sit over their own columns (share above share, win above win). */
.stk__cols span:nth-child(3) { border-left: 1px solid transparent; padding-left: 5px; }
.stk__foot { font: 8.5px var(--mono); color: #6f7358; margin-top: 4px; letter-spacing: .04em; }
/* "Played with" — exact roster data (names/avatars), each row links to that
   player's profile. Same right-aligned share/win columns as the size rows. */
.stk__sub { font: 700 9px var(--font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 7px 0 3px; padding-top: 5px; border-top: 1px solid rgba(255,255,255,.06); }
.stkm { display: flex; flex-direction: column; }
/* Narrower first column (avatar) than the size rows, but the SAME fixed right
   columns + gap, so both sections' percentages line up on the same edges. */
.stkm__row { grid-template-columns: 14px 1fr 32px 36px;
  padding: 1px 0; font: 10px var(--mono); text-decoration: none; }
.stkm__row:hover { background: rgba(255,255,255,.04); }
.stkm__av { display: block; width: 14px; height: 14px; object-fit: cover; background: #14160d; border: 1px solid var(--frame); }
.stkm__av--ph { background: #20230f; }
.stkm__nm { color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stkm__row:hover .stkm__nm { color: var(--gold); }

/* ---- Tag editor (tageditor.js) ----------------------------------------- */
/* A fill effect outranked by a higher one (or shine under fire/scanlines):
   dimmed but still clickable — tooltip on the row says why it's hidden. */
.tagedit__fxrow.is-outranked { opacity: .4; }

.tagedit-entry {
  margin-left: 8px; font-size: 11px; padding: 2px 8px; cursor: pointer; vertical-align: middle;
  background: #15170d; color: var(--muted); border: 1px solid var(--frame);
  text-transform: uppercase; letter-spacing: .08em;
}
.tagedit-entry:hover { color: var(--gold); border-color: var(--gold-dim); }
/* flex (not grid place-items) so the dialog's max-width:100% resolves against the viewport (grid overflowed phones). */
.tagedit-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .66); padding: 16px; }
.tagedit { width: 600px; max-width: 100%; background: #0f110a; border: 1px solid var(--frame); padding: 18px; box-shadow: 0 10px 40px rgba(0, 0, 0, .6); color: var(--fg); max-height: 92vh; overflow-y: auto; }
.tagedit__head { font-size: 16px; font-weight: 700; color: var(--white); margin-bottom: 12px; }
/* Two-column body so the whole form fits without scrolling (stacks on mobile). */
.tagedit__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
.tagedit__col { min-width: 0; }
.tagedit__col > .tagedit__lbl:first-child { margin-top: 0; }
@media (max-width: 620px) { .tagedit__cols { grid-template-columns: 1fr; gap: 0; } }
/* Preview shows the tag AS A NAME PREFIX beside a mock name — the real look. */
.tagedit__preview-wrap { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 16px; margin-bottom: 12px; background: #0b0c06; border: 1px solid #20231a; }
.tagedit__prevname { font: 700 19px var(--font); color: #f5f4ec; letter-spacing: .02em; }
.tagedit__lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); margin: 10px 0 5px; }
.tagedit__input { width: 100%; box-sizing: border-box; background: #15170d; border: 1px solid var(--frame); color: var(--fg); padding: 7px 9px; font-size: 14px; }
.tagedit__input:focus { outline: none; border-color: var(--gold-dim); }
/* Colour swatch rows: badge colour + text colour share the same chip style */
.tagedit__sw { display: flex; flex-wrap: wrap; gap: 6px; }
.tagedit__chip { width: 26px; height: 26px; border: 1px solid rgba(255, 255, 255, .25); cursor: pointer; padding: 0; }
.tagedit__chip:hover { border-color: #fff; }
/* "Auto" text-colour chip — a text label rather than a colour swatch */
.tagedit__chip--auto {
  width: auto; padding: 0 8px; font-size: 11px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted);
  background: #15170d;
}
.tagedit__chip--auto.is-active { color: var(--gold); border-color: var(--gold-dim); }
.tagedit__chip--auto:hover { color: var(--fg); border-color: var(--frame); }
/* Steam-palette label */
.tagedit__steam-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 8px 0 4px; opacity: .7; }
.tagedit__hexrow { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.tagedit__hexrow input[type=color] { width: 40px; height: 32px; padding: 0; background: none; border: 1px solid var(--frame); cursor: pointer; }
.tagedit__hexin { flex: 1; }
/* Effects: each effect is a row — a checkbox label + its own Text/Badge/Both
   target control. The control is dimmed/locked until the effect is checked. */
.tagedit__fx { display: flex; flex-direction: column; gap: 3px; }
.tagedit__fxrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.tagedit__fxitem { font-size: 13px; color: var(--fg); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
/* clickable even while the effect is off — clicking a target adds the effect there */
.tagedit__fxtgt { display: flex; gap: 3px; flex-shrink: 0; opacity: .45; transition: opacity .12s; }
.tagedit__fxrow.is-on .tagedit__fxtgt { opacity: 1; }
.tagedit__tbtn {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 7px; cursor: pointer; background: #15170d; color: var(--muted); border: 1px solid var(--frame);
}
.tagedit__tbtn:hover { color: var(--fg); }
.tagedit__tbtn.is-active { color: var(--gold); border-color: var(--gold-dim); background: #1b1d12; }
/* Advanced: custom-gradient builder + intensity/speed sliders (tageditor.js) */
.tagedit__grad { display: flex; align-items: center; gap: 8px; }
.tagedit__grad input[type=checkbox] { cursor: pointer; }
.tagedit__grad input[type=color] { width: 34px; height: 28px; padding: 0; background: none; border: 1px solid var(--frame); cursor: pointer; }
.tagedit__grad input[type=range] { flex: 1; }
.tagedit__grad .tagedit__angv { font: 11px var(--mono); color: var(--muted); min-width: 38px; text-align: right; }
.tagedit__grad.is-off input[type=color],
.tagedit__grad.is-off input[type=range],
.tagedit__grad.is-off .tagedit__angv { opacity: .4; pointer-events: none; }
.tagedit__range { width: 100%; box-sizing: border-box; margin: 2px 0; cursor: pointer; }
.tagedit__rangerow { display: flex; align-items: center; gap: 8px; }
.tagedit__rangerow .tagedit__angv { font: 11px var(--mono); color: var(--muted); min-width: 30px; text-align: right; }
.tagedit__msg { min-height: 16px; font-size: 12px; color: #d8a0a0; margin: 10px 0 4px; }
.tagedit__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.tagedit__save { color: var(--gold); border-color: var(--gold-dim); }
.tagedit__danger:hover { color: #f0a0a0; border-color: #8a4a3a; }

/* ---- Search typeahead (search.js) -------------------------------------- */
.ac-box { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: #0f110a;
  border: 1px solid var(--frame); border-top: none; max-height: 340px; overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .55); text-align: left; }
.ac-item { display: flex; align-items: center; gap: 9px; padding: 7px 10px; text-decoration: none;
  color: var(--fg); border-bottom: 1px solid rgba(111, 115, 88, .12); }
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.is-active { background: #1b1d12; }
.ac-av { width: 26px; height: 26px; flex-shrink: 0; background: #23261a; object-fit: cover; border: 1px solid #2a2d20; }
.ac-name { flex: 1 1 auto; min-width: 0; font-size: 14px; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-score { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--gold); font-family: var(--mono); }

/* ---- Recent-form chips (used by faceitCard for W/L history) ------------ */
.form { display: flex; gap: 4px; margin: 12px 0; flex-wrap: wrap; }
.form-chip { width: 22px; height: 22px; display: grid; place-items: center; font-size: 12px; font-weight: 700; border: 1px solid #2a2d20; color: #11140c; cursor: default; }
.form-chip--win  { background: #a9bf63; }
.form-chip--loss { background: #b06a55; color: #1a0f0a; }
.form-chip--tie  { background: #8a8d70; }

/* ---- FACEIT level badge (used by faceitCard) --------------------------- */
.faceit-lvl { width: 38px; height: 38px; display: grid; place-items: center; font-weight: 700; font-size: 18px; color: #fff; background: #1f1f1f; border: 2px solid #ff5500; }
.faceit-lvl--1, .faceit-lvl--2, .faceit-lvl--3 { border-color: #4a9b4a; }
.faceit-lvl--4, .faceit-lvl--5, .faceit-lvl--6, .faceit-lvl--7 { border-color: #e0b400; }
.faceit-lvl--8, .faceit-lvl--9 { border-color: #ff7b00; }
.faceit-lvl--10 { border-color: #ff2a00; }

.src-link { margin: 12px 0 4px; font-size: 13px; }

/* ---- States ------------------------------------------------------------ */
.state { padding: 40px 10px; color: var(--muted); }
.state--error { color: #f0b0a0; }
/* Error state is a real page now — message + a way forward (lookup + examples). */
.err-msg  { font-size: 15px; font-weight: 700; }
.err-hint { margin-top: 14px; color: var(--muted); font: 12px var(--mono, "Courier New", monospace); }
.err-search { margin-top: 9px; max-width: 430px; }
.err-try  { margin-top: 10px; color: var(--muted); font: 12px var(--mono, "Courier New", monospace); }
.err-try a { color: var(--gold); text-decoration: none; }
.err-try a:hover { text-decoration: underline; }
.source { margin-top: 10px; color: var(--gold-dim); font-size: 12px; }

/* Global safety net: the `hidden` attribute must always win over any class that
   sets `display` (the loading modal sets display:flex). Without this, an element
   that JS hides via .hidden=true could stay visible — which is exactly what left
   the loading panel stuck on top of the rendered profile. */
[hidden] { display: none !important; }

/* Loading MODAL — full-screen dim + a centered card. Only ever shows on a FRESH
   load; a cached profile paints instantly and hides this before first paint. */
.state--loading {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(8, 10, 6, .86);
}
.ldg__card {
  display: flex; flex-direction: column; align-items: center; gap: 13px;
  text-align: center; padding: 32px 36px; max-width: 430px;
  background: var(--bg-in, #23241c); border: 1px solid var(--frame, #6f7358);
  box-shadow: 0 14px 48px rgba(0, 0, 0, .55);
}
.ldg__spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--frame, #6f7358); border-top-color: var(--gold);
  animation: ldg-spin .8s linear infinite;
}
@keyframes ldg-spin { to { transform: rotate(360deg); } }
.ldg__msg { font: 700 15px var(--font); letter-spacing: .04em; color: var(--gold); }
.ldg__sub { max-width: 380px; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* "Refreshing in background" toast — shown when the page painted instantly from
   the client cache and is silently revalidating. Fades out when the fetch lands. */
.scr-refresh {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--frame, #3a3f2c);
  background: rgba(20, 22, 16, .92); color: var(--gold-dim);
  font: 600 11px var(--font); letter-spacing: .05em; border-radius: 0;
  opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.scr-refresh.is-on { opacity: 1; transform: translateY(0); }
.scr-refresh__dot {
  width: 9px; height: 9px; border-radius: 50%;
  border: 2px solid var(--frame, #3a3f2c); border-top-color: var(--gold);
  animation: ldg-spin .8s linear infinite;
}

/* ---- Footer (Valve-style box) ------------------------------------------ */
.sfoot { text-align: center; padding: 14px 14px 10px; }
.sfoot__nav { margin: 10px 0 6px; color: var(--gold); font-size: 13px; }
.sfoot__nav a { font-weight: 700; }
.sfoot__nav span { color: #888a6f; margin: 0 4px; }
.sfoot__copy { color: #b4b39c; font-size: 11px; margin: 0; }

/* ---- Pookie Form Score ------------------------------------------------- */
.form-score-block {
  background: rgba(0,0,0,.15); border: 1px solid var(--frame);
  padding: 20px 22px; margin: 0 0 16px;
}
.form-score-hero { display: flex; align-items: center; gap: 22px; margin-bottom: 14px; }
.form-score-number {
  font-size: 72px; font-weight: 700; font-family: var(--font);
  line-height: 1; letter-spacing: -2px; flex-shrink: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,.4);
}
.form-score-meta { display: flex; flex-direction: column; gap: 6px; }
.form-score-tier { font-size: 22px; font-weight: 700; letter-spacing: .04em; }
.form-trend { font-size: 14px; color: var(--muted); }
.form-trend--up   { color: #b8d080; }
.form-trend--down { color: #c08070; }
.form-streak { font-size: 13px; color: var(--gold); margin-top: 2px; }

.form-split {
  display: flex; align-items: center; gap: 16px;
  border-top: 1px dashed var(--frame); padding-top: 12px; margin-bottom: 12px;
}
.form-split__item { display: flex; flex-direction: column; align-items: center; }
.form-split__item--right { margin-left: auto; }
.form-split__val  { font-size: 22px; font-weight: 700; color: var(--fg); font-family: var(--font); }
.form-split__lbl  { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 2px; }
.form-split__sep  { color: var(--muted); font-size: 13px; padding: 0 4px; }

.form-score-max { font-size: 28px; color: var(--muted); font-weight: 400; margin-left: 4px; }

/* Tiny footnote link next to /1000 that opens ToS section 3 (nocat. Score) */
.form-score-footnote {
  font-size: 13px; vertical-align: super; line-height: 1;
  color: var(--gold-dim); margin-left: 4px; text-decoration: none;
  font-weight: 600; letter-spacing: 0; font-family: var(--font);
  transition: color .15s ease;
}
.form-score-footnote:hover, .form-score-footnote:focus { color: var(--gold); text-decoration: none; }

/* Lifetime matches inline in the hero row, pushed to the right */
.form-score-matches { margin-left: auto; text-align: right; padding-right: 4px; }
.form-score-matches__val { font-size: 34px; font-weight: 700; color: var(--fg); font-family: var(--font); line-height: 1; }
.form-score-matches__lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin-top: 6px; }

/* Time-window label below tier inside form-score-meta */
.form-score-window-lbl {
  font-size: 12px; color: var(--muted); letter-spacing: .04em; margin-top: -2px;
}

/* Window selector pill row — lives inside .form-score-block */
.form-window-selector {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 0 0 14px; padding-top: 10px;
  border-top: 1px dashed var(--frame);
}
.form-window-btn {
  background: rgba(0,0,0,.18); border: 1px solid var(--frame);
  color: var(--muted); font-size: 11px; font-weight: 600; font-family: var(--font);
  text-transform: uppercase; letter-spacing: .09em;
  padding: 4px 10px; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
  outline: none;
}
.form-window-btn:hover, .form-window-btn:focus {
  background: rgba(188,168,94,.15); border-color: var(--gold-dim); color: var(--fg);
}
.form-window-btn--active {
  background: rgba(188,168,94,.22); border-color: var(--gold); color: var(--gold);
}

/* nocat tracking-score explainer + Steam-lifetime comparison */
.form-track-note {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 12px;
  margin: -8px 0 14px; font-size: 11px; color: var(--muted); line-height: 1.45;
}
.form-track-note__txt  { flex: 1 1 220px; }
.form-track-note__base { color: var(--gold-dim); white-space: nowrap; }
.form-track-note__base b { color: var(--fg); font-weight: 700; }
.form-track-diff { font-weight: 700; }
.form-track-diff--up   { color: #7ed957; }
.form-track-diff--down { color: #e07a7a; }
.form-track-diff--flat { color: var(--muted); }

/* Compact window selector inside the identity-card header (#id-score-hero) */
.id-window-selector {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-top: 6px; width: 100%;
}
.id-window-btn {
  background: rgba(0,0,0,.22); border: 1px solid var(--frame);
  color: var(--muted); font-size: 10px; font-weight: 600; font-family: var(--font);
  text-transform: uppercase; letter-spacing: .08em;
  padding: 2px 8px; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
  outline: none;
}
.id-window-btn:hover, .id-window-btn:focus {
  background: rgba(188,168,94,.15); border-color: var(--gold-dim); color: var(--fg);
}
.id-window-btn--active {
  background: rgba(188,168,94,.22); border-color: var(--gold); color: var(--gold);
}

/* Top 4 weapons strip — horizontal, lives inside the score block */
.form-top-weapons {
  margin: 12px 0 4px;
  padding-top: 12px;
  border-top: 1px dashed var(--frame);
}
.form-top-weapons__label {
  font-size: 10px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin-bottom: 8px;
}
.form-top-weapons__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
.form-top-weapons__cell {
  background: rgba(0,0,0,.15); border: 1px solid var(--frame);
  padding: 8px 10px; text-align: center;
}
.form-top-weapons__kills {
  font-size: 18px; font-weight: 700; color: var(--gold);
  font-family: var(--font); line-height: 1;
}
.form-top-weapons__name {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--muted); margin-top: 4px;
}

.form-section-title {
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--muted); margin: 14px 0 8px;
  border-bottom: 1px solid var(--frame); padding-bottom: 5px;
}

/* ---- Collectible medal icons ------------------------------------------- */
.medal-icon {
  width: 42px; height: 42px; object-fit: contain;
  display: inline-block; vertical-align: middle;
  transition: transform .15s ease; cursor: default;
}
.medal-icon:hover { transform: scale(1.25); }

/* Score breakdown bars */
.breakdown-rows { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
.breakdown-row { display: grid; grid-template-columns: 110px 1fr 130px 38px; gap: 10px; align-items: center; font-size: 13px; }
.breakdown-label { color: var(--fg); }
.breakdown-bar-wrap { background: rgba(0,0,0,.18); height: 9px; border: 1px solid var(--frame); position: relative; }
.breakdown-bar-fill { display: block; height: 100%; background: var(--gold); min-width: 2px; }
.breakdown-score { text-align: right; font-family: var(--mono); color: var(--white); font-size: 12px; white-space: nowrap; }
.breakdown-weight { text-align: right; color: var(--muted); font-size: 11px; }

/* Career bonus rows */
.bonus-rows { display: flex; flex-direction: column; gap: 7px; margin-bottom: 4px; }
.bonus-row { display: grid; grid-template-columns: 110px 1fr 46px 1fr; gap: 10px; align-items: center; font-size: 13px; }
.bonus-label { color: var(--fg); }
.bonus-rate { font-family: var(--mono); color: var(--muted); font-size: 12px; }
.bonus-pts { color: var(--gold); font-weight: 700; text-align: right; }
.bonus-cap { color: var(--muted); font-size: 11px; font-style: italic; }

.form-note { font-size: 11px; color: var(--muted); margin: 12px 0 0; font-family: var(--mono); }

/* ---- Source cards (small, bottom of page) ------------------------------ */
.source-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 12px; margin: 16px 0; }
.src-card { background: rgba(0,0,0,.1); border: 1px solid var(--frame); padding: 12px 14px; }
.src-card__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.src-card__name { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.src-card__badge { font-size: 12px; font-weight: 700; color: var(--gold); }
.src-card__row { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.src-card__row b { color: var(--fg); font-weight: 700; }
.src-card__row--small { font-size: 11px; }

/* ---- Per-map table ----------------------------------------------------- */
.map-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 16px; }
.map-table th {
  text-align: left; padding: 6px 10px; font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--frame);
  cursor: pointer; user-select: none; white-space: nowrap;
}
.map-table th:hover { color: var(--gold); }
.map-table th.sort-asc::after  { content: " ▲"; color: var(--gold); }
.map-table th.sort-desc::after { content: " ▼"; color: var(--gold); }
.map-table td { padding: 7px 10px; border-bottom: 1px solid rgba(111,115,88,.25); font-family: var(--mono); }
.map-table tr:last-child td { border-bottom: none; }
.map-table tr:hover td { background: rgba(0,0,0,.12); }
.map-cell { display: flex; align-items: center; gap: 9px; font-family: var(--font); }
.map-thumb { display: block; width: 44px; height: 44px; object-fit: cover; object-position: center; flex-shrink: 0; }
.map-name { color: var(--fg); text-transform: uppercase; letter-spacing: .06em; font-size: 12px; }
.map-table td.good { color: #b8d080; }
.map-table td.bad  { color: #c08070; }
.map-table td.mid  { color: var(--fg); }
.map-table .wr-bar { display: block; height: 4px; background: var(--gold); margin-top: 3px; min-width: 2px; max-width: 100%; }

/* ---- Collapsible section (looks like a clickable bar) ------------------ */
.collapse { margin: 22px 0 0; }
.sec--collapse {
  cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 11px 14px;
  background: #1b1c14; border: 1px solid #3a3d2e;
  transition: border-color .15s ease, background .15s ease;
}
/* drop the heading underline bar for the bar style */
.sec--collapse::after { display: none; }
.sec--collapse:hover { background: #21231a; border-color: var(--gold-dim); }
.sec--collapse:hover .b,
.sec--collapse:hover .a { color: var(--gold); }
.sec--collapse:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
/* "click to expand/collapse" hint after the title */
.sec--collapse .collapse__hint {
  font-size: 10px; font-weight: 400; letter-spacing: .04em;
  text-transform: none; color: var(--muted); margin-left: 4px;
}
.collapse.is-open .sec--collapse .collapse__hint::before { content: "click to collapse"; }
.collapse:not(.is-open) .sec--collapse .collapse__hint::before { content: "click to expand"; }
/* caret in a little boxed chevron on the right */
.collapse__caret {
  margin-left: auto; font-size: 12px; line-height: 1; color: var(--gold);
  border: 1px solid #3a3d2e; background: #0f100a;
  padding: 3px 7px; border-radius: 0;
  transition: transform .18s ease, color .18s ease, border-color .15s ease;
  font-family: var(--font);
}
.sec--collapse:hover .collapse__caret { color: var(--gold); border-color: var(--gold-dim); }
.collapse:not(.is-open) .collapse__caret { transform: rotate(-90deg); }
/* the open body sits flush under the bar like a connected panel */
.collapse.is-open .collapse__body { border: 1px solid #3a3d2e; border-top: none; padding: 14px; background: var(--panel); }

/* Smooth open/close via grid row trick */
.collapse__body {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .25s ease, margin .25s ease, opacity .15s ease .05s;
}
.collapse__body > * { min-height: 0; overflow: hidden; }
.collapse:not(.is-open) .collapse__body {
  grid-template-rows: 0fr; margin: 0; opacity: 0;
  transition: grid-template-rows .25s ease, margin .25s ease, opacity .12s ease;
}

/* When collapsed, tighten the heading bottom border bar */
.collapse:not(.is-open) .sec::after { background: var(--frame); }

/* ---- Weapon breakdown — compact scrollable table, no bars ------------ */
.weapons-scroll {
  max-height: 360px; overflow-y: auto; margin: 8px 0 6px;
  border: 1px solid var(--frame); background: rgba(0,0,0,.10);
}
.weapons-scroll::-webkit-scrollbar { width: 8px; }
.weapons-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,.15); }
.weapons-scroll::-webkit-scrollbar-thumb { background: var(--frame); }
.weapons-scroll::-webkit-scrollbar-thumb:hover { background: var(--gold-dim); }
.weapons-scroll { scrollbar-width: thin; scrollbar-color: var(--frame) rgba(0,0,0,.15); }

.weapons { width: 100%; border-collapse: collapse; font-size: 13px; }
.weapons thead th {
  position: sticky; top: 0;
  background: #3a3d2f; color: var(--muted);
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; text-align: left;
  padding: 8px 12px; border-bottom: 1px solid var(--frame);
  z-index: 1;
}
/* Right-align numeric column headers so they line up with the values */
.weapons thead th.weapons__num { text-align: right; }
.weapons tbody tr { border-bottom: 1px solid rgba(111,115,88,.18); }
.weapons tbody tr:last-child { border-bottom: none; }
.weapons tbody tr:hover { background: rgba(0,0,0,.12); }
.weapons td { padding: 6px 12px; }
.weapons__name { color: var(--fg); font-weight: 600; }
.weapons__num  { text-align: right; font-family: var(--mono); color: var(--white); }
.weapons__acc   { color: var(--muted); font-size: 12px; }
.weapons__share { color: var(--gold-dim); font-size: 12px; }
.weapons__note  { font-size: 11px; color: var(--muted); font-family: var(--mono); margin: 10px 0 0; font-style: italic; }

/* ---- Per-map no-data note --------------------------------------------- */
.map-note { color: var(--muted); font-size: 13px; margin: 4px 0 16px; font-style: italic; }

/* ---- Map breakdown table (per-map wins / played / WR%) ----------------- */
.map-table-v2 { width: 100%; border-collapse: collapse; font-size: 13px; margin: 8px 0 6px; }
.map-table-v2 thead th {
  font-size: 10px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--muted); font-weight: 700; text-align: left;
  padding: 8px 10px; border-bottom: 1px solid var(--frame);
}
.map-table-v2 thead th.map-table-v2__num { text-align: right; }
.map-table-v2 tbody tr { border-bottom: 1px solid rgba(111,115,88,.18); }
.map-table-v2 tbody tr:last-child { border-bottom: none; }
.map-table-v2 tbody tr:hover { background: rgba(0,0,0,.10); }
.map-table-v2 td { padding: 6px 10px; vertical-align: middle; }
.map-table-v2__icon { width: 40px; padding-left: 4px; padding-right: 0; }
.map-table-v2__icon img { width: 32px; height: 32px; object-fit: cover; display: block; }
.map-table-v2__name {
  color: var(--fg); text-transform: uppercase; letter-spacing: .06em;
  font-size: 12px; font-weight: 600;
}
.map-table-v2__num { font-family: var(--mono); color: var(--white); text-align: right; font-size: 12px; }
.map-table-v2__wr  { position: relative; min-width: 70px; }
.map-table-v2__wr.good { color: #b8d080; }
.map-table-v2__wr.bad  { color: #c08070; }
.map-table-v2__wr.mid  { color: var(--white); }
.map-table-v2__wrbar {
  display: block; position: absolute; left: 10px; right: 10px; bottom: 2px;
  height: 2px; background: var(--gold); max-width: calc(100% - 20px);
  pointer-events: none; opacity: .7;
}

.map-rounds__note { font-size: 11px; color: var(--muted); font-family: var(--mono); margin: 10px 0 0; font-style: italic; }

/* ====================================================================== */
/* LIMINAL LAYER                                                          */
/* Empty olive void + cool fluorescent light + faint surveillance-feed     */
/* compression noise. Tuned subtle: reads as an old monitor in an empty    */
/* room, not a costume. Disabled for reduced-motion users.                 */
/* ====================================================================== */

/* Vignette + faint scanlines over everything (static, click-through). */
html::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 3px),
    radial-gradient(125% 100% at 50% 42%, transparent 52%, rgba(18,20,10,.55) 100%);
}

/* Barely-there animated film/compression grain. */
body::after {
  content: ""; position: fixed; inset: -50%; pointer-events: none; z-index: 59;
  opacity: .05; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .6s steps(2) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 50% { transform: translate(-7px,5px); } 100% { transform: translate(4px,-6px); }
}

/* The header "fluorescent tube" rule buzzes and occasionally drops out. */
.shead__rule { animation: tube 7s ease-in-out infinite; }
@keyframes tube {
  0%, 100% { opacity: .85; }
  41% { opacity: .85; } 42% { opacity: .25; } 43% { opacity: .8; }
  72% { opacity: .85; } 72.6% { opacity: .15; } 73.2% { opacity: .8; }
}

@media (prefers-reduced-motion: reduce) {
  body::after { animation: none; }
  .shead__rule { animation: none; }
}

/* ---- Legal modal (ToS / Privacy Policy) -------------------------------- */
.legal-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.legal-modal[hidden] { display: none; }
.legal-modal__backdrop {
  position: absolute; inset: 0; background: rgba(0,0,0,.75);
  backdrop-filter: blur(2px);
}
.legal-modal__panel {
  position: relative; z-index: 1;
  background: var(--bg-in); border: 1px solid var(--frame);
  max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: 24px 28px 28px;
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  scrollbar-width: thin; scrollbar-color: var(--frame) rgba(0,0,0,.15);
}
.legal-modal__panel::-webkit-scrollbar { width: 8px; }
.legal-modal__panel::-webkit-scrollbar-track { background: rgba(0,0,0,.15); }
.legal-modal__panel::-webkit-scrollbar-thumb { background: var(--frame); }
.legal-modal__close {
  position: absolute; top: 8px; right: 12px;
  width: 32px; height: 32px;
  background: none; border: none; color: var(--muted);
  font-size: 24px; line-height: 1; cursor: pointer; font-family: var(--font);
}
.legal-modal__close:hover { color: var(--gold); }
.legal-modal__close:focus-visible { outline: 1px dashed var(--gold); outline-offset: 2px; }
.legal-modal__body  { color: var(--fg); font-size: 13px; line-height: 1.6; }
.legal-modal__body .legal__h2 {
  margin: 0 0 6px; font-size: 22px; color: var(--white); letter-spacing: .02em;
}
.legal-modal__body .legal__meta {
  color: var(--gold-dim); font-size: 11px; font-family: var(--mono);
  margin: 0 0 18px;
}
.legal-modal__body h3 {
  margin: 18px 0 6px; font-size: 13px;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
  border-bottom: 1px solid var(--frame); padding-bottom: 4px;
  scroll-margin-top: 16px; /* leave breathing room when scrolled-to */
  transition: color .3s ease, background .3s ease;
}
.legal-modal__body h3.legal__h3--flash {
  color: var(--gold);
  background: linear-gradient(90deg, rgba(188,168,94,.18), transparent 80%);
  padding-left: 6px; margin-left: -6px;
}
.legal-modal__body p { margin: 0 0 10px; }
.legal-modal__body ul { margin: 0 0 10px 18px; padding: 0; }
.legal-modal__body li { margin: 4px 0; }
.legal-modal__body a { color: var(--gold); }
.legal-modal__body b { color: var(--white); }
.legal-modal__body code { background: rgba(0,0,0,.18); padding: 1px 4px; }

/* Footer legal links. These used to be their own line under the copyright; they
   now sit inline at the end of the footer nav, which removes a whole row from
   every page (the homepage has to clear a 1080p fold). Inherits the nav's size
   and weight so it reads as part of the same list. */
.sfoot__lb {
  background: none; border: none; padding: 0;
  color: var(--gold-dim); font: inherit; cursor: pointer;
  text-decoration: underline; text-decoration-color: rgba(143, 127, 68, .3);
}
.sfoot__lb:hover { color: var(--gold); text-decoration-color: var(--gold); }
.sfoot__lb:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }
/* Inside the footer nav they must read as plain gold links, identical to Compare /
   Leaderboard / Steam beside them — same weight, same colour, no underline until
   hover. Mirrors what .tut-link already does for the Tutorial button in this row
   (tutorial.css: .sfoot__nav .tut-link). */
.sfoot__nav .sfoot__lb {
  font-weight: 700; color: var(--gold); text-decoration: none;
  font-size: inherit; font-family: inherit; line-height: inherit; vertical-align: baseline;
}
.sfoot__nav .sfoot__lb:hover { text-decoration: underline; }

/* Liminal footer microcopy + an old visitor counter. */


/* ====================================================================== */
/* MOBILE                                                                 */
/* Tighten margins, stack layouts, shrink the score number, and keep the   */
/* breakdown rows readable when the viewport is narrow.                    */
/* ====================================================================== */

@media (max-width: 720px) {
  .page  { padding: 8px 8px 30px; }
  .frame { padding: 18px 14px 22px; }

  /* Header */
  .shead { padding: 11px 13px 14px; }
  .shead__bar { gap: 10px 12px; flex-wrap: wrap; min-height: 0; }
  .shead__url { font-size: 12px; }
  .shead__rule { margin: 10px 0; }
  .shead__row { flex-direction: column; align-items: stretch; gap: 11px; }
  .slogo { gap: 11px; }
  .slogo__img { width: 38px; height: 38px; }
  .slogo__wm  { font-size: 17px; letter-spacing: .01em; }
  .slogo__tm  { font-size: inherit; }
  .snav { text-align: left; }
  .shead__actions { flex-direction: column; align-items: stretch; gap: 11px; width: 100%; }
  .shead__actions .search--mini,
  .search--mini { max-width: 100%; width: 100%; }

  /* Identity scouting card — stack vertically on narrow screens.
     On mobile the body stacks on TOP (order: 0) and pins below (order: 1). */
  .id__card { flex-direction: column; }
  /* Width + the divider live on the column now; it becomes a full-width block
     under the body, with the divider flipped from left edge to top edge. */
  .id__rightcol {
    width: 100%;
    border-left: none; border-top: 1px solid var(--frame);
  }
  .id__badges-box {
    width: 100%; max-height: none; overflow: hidden;
    border-left: none; border-top: none;
    padding: 8px 10px 10px;
  }
  /* On mobile medals revert to horizontal wrap */
  .id__medals { grid-template-columns: repeat(auto-fill, 38px); gap: 5px; }
  .id__body { padding: 10px 12px 10px; }
  .id__top { gap: 12px; }
  .id__avatar-col { width: 92px; }
  .id__avatar { width: 92px; height: 92px; }
  .id__act, .id__acts .trade-pill { font-size: 9.5px; height: 22px; }
  .id__name { font-size: 20px; }
  .id__meta { font-size: 12px; gap: 6px; }
  .id__links { font-size: 12px; gap: 10px; }
  .id__bans { align-items: flex-end; }
  .id-score-card { padding: 8px 10px; }
  .id-score-num { font-size: 34px; }
  .id-score-max { font-size: 14px; }
  .id-score-tier { font-size: 10px; }
  .id__quickstats { gap: 5px 14px; padding: 6px 8px; }
  .id-qs__val { font-size: 15px; }

  /* Medals on mobile */
  .medal-icon { width: 38px; height: 38px; }

  /* Score hero — keep number + label + matches in one row but shrink them */
  .form-score-block { padding: 14px 12px; }
  .form-score-hero { gap: 14px; }
  .form-score-number { font-size: 52px; letter-spacing: -1px; }
  .form-score-max    { font-size: 20px; }
  .form-score-tier   { font-size: 17px; }
  .form-trend        { font-size: 12px; }
  .form-score-matches__val { font-size: 26px; }
  .form-score-matches__lbl { font-size: 10px; }

  /* Top weapons strip — tighter on mobile */
  .form-top-weapons__grid { gap: 6px; }
  .form-top-weapons__cell { padding: 6px 4px; }
  .form-top-weapons__kills { font-size: 15px; }
  .form-top-weapons__name  { font-size: 9px; }

  /* Score breakdown rows — compress columns so the bar still has room.
     The raw value column shrinks since we dropped "of rounds" suffix. */
  .breakdown-row {
    grid-template-columns: 78px 1fr 72px 26px;
    gap: 6px; font-size: 12px;
  }
  .breakdown-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .breakdown-score { font-size: 11px; }
  .breakdown-weight { font-size: 10px; }

  /* Map table — narrower paddings on mobile */
  .map-table-v2 thead th { padding: 6px 6px; font-size: 9px; }
  .map-table-v2 td { padding: 4px 6px; font-size: 11px; }
  .map-table-v2__icon { width: 32px; }
  .map-table-v2__icon img { width: 26px; height: 26px; }
  .map-table-v2__name { font-size: 10px; }
  .map-table-v2__num { font-size: 10px; }

  /* Weapons table compaction */
  .weapons-scroll { max-height: 320px; }
  .weapons thead th { padding: 6px 8px; font-size: 9px; }
  .weapons td { padding: 4px 8px; font-size: 11px; }
  .weapons__acc, .weapons__share { font-size: 10px; }
  .form-section-title { font-size: 10px; margin: 12px 0 6px; }

  /* Career bonus rows */
  .bonus-row {
    grid-template-columns: 90px 1fr 38px 1fr;
    gap: 6px; font-size: 12px;
  }
  .bonus-rate { font-size: 10px; }
  .bonus-cap  { font-size: 10px; }

  /* Map breakdown table — make cells narrower */
  .map-table { font-size: 11px; }
  .map-table th, .map-table td { padding: 5px 6px; }
  .map-thumb { width: 32px; height: 32px; }
  .map-name { font-size: 10px; letter-spacing: .04em; }

  /* Source cards side-by-side, full width */
  .source-cards { grid-template-columns: 1fr; }

  /* Footer */
  .sfoot__copy { font-size: 10px; padding: 0 6px; }
}

/* Phones — the identity head stacks so the name + badges get the FULL width to
   the right of the avatar, and the bans + commends drop onto their own row
   beneath, instead of being crammed into a tiny column beside a 150px widget. */
@media (max-width: 560px) {
  .id__top-head  { flex-direction: column; align-items: stretch; gap: 8px; }
  .id__top-right { flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 8px 14px; }
  .id__bans      { align-items: flex-start; }
}

/* Very narrow phones (< 380px) — drop the weight column entirely to free up bar room */
@media (max-width: 380px) {
  .breakdown-row    { grid-template-columns: 70px 1fr 60px; }
  .breakdown-weight { display: none; }
  .bonus-row        { grid-template-columns: 78px 1fr 34px; }
  .bonus-cap        { display: none; }
  .form-score-number { font-size: 44px; }
  .form-score-matches__val { font-size: 22px; }
  /* Map table — drop the WR column entirely on very narrow phones */
  .map-table-v2 thead th:nth-child(4), .map-table-v2 td:nth-child(5) { display: none; }

  /* Weapons: drop the share% column on very narrow phones */
  .weapons th:nth-child(4), .weapons td:nth-child(4) { display: none; }
}

/* ── Inventory value pill (identity card) ─────────────────────────────────── */
.inv-pill {
  display: inline-flex; align-items: center; gap: 8px; vertical-align: middle;
  margin: 8px 0 0; padding: 4px 10px; line-height: 1;
  background: #14160d; border: 1px solid #34372a; border-radius: 0;
}
.inv-pill__lbl  { color: var(--muted); text-transform: uppercase; font-size: 9px; letter-spacing: .12em; font-weight: 700; }
.inv-pill__val  { color: var(--gold); font-weight: 700; font-size: 13px; font-family: var(--mono); }
.inv-pill__src  { color: var(--muted); font-size: 10px; }
/* Friends-only inventory + our bot isn't a friend yet: an actionable note in
   place of the value (tooltip explains the fix). Not an error — dimmed, not red. */
.inv-pill__note { color: var(--gold-dim); font-size: 10px; letter-spacing: .02em; cursor: help; }
.inv-pill__link { color: var(--gold-dim); font-size: 10px; text-decoration: none; border-bottom: 1px dotted var(--gold-dim); }
.inv-pill__link:hover { color: var(--gold); }

/* Recheck-price button — re-fetches the inventory total on demand. */
.inv-pill__refresh {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;   /* don't let the flex row shrink it below 18px on the main axis */
  width: 18px; height: 18px; padding: 0; margin-left: -2px;
  border: 1px solid #34372a; border-radius: 0;
  background: #1b1d12; color: var(--muted); cursor: pointer;
  line-height: 1; transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.inv-pill__refresh:hover { color: var(--gold); border-color: var(--gold-dim); background: #20230f; }
.inv-pill__refresh-ico { font-size: 12px; display: inline-block; }
.inv-pill__refresh.is-spinning { color: var(--gold); cursor: default; }
.inv-pill__refresh.is-spinning .inv-pill__refresh-ico { animation: inv-spin .7s linear infinite; }
@keyframes inv-spin { to { transform: rotate(360deg); } }

/* Cooldown (2 min between manual rechecks): dim + inert, no hover highlight. */
.inv-pill__refresh.is-cooldown { opacity: .35; cursor: default; }
.inv-pill__refresh.is-cooldown:hover { color: var(--muted); border-color: #34372a; background: #1b1d12; }
/* Nudge when clicked too soon. */
.inv-pill__refresh.is-nudge { animation: inv-nudge .32s ease; }
@keyframes inv-nudge {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-2px); }
  75% { transform: translateX(2px); }
}

/* "updated ✓" confirmation + value flash — makes a refresh obvious even when the
   number didn't change. Toggled on for ~1.9s by profile.js (flashInvUpdated). */
.inv-pill__done {
  display: inline-flex; align-items: center;
  max-width: 0; overflow: hidden; opacity: 0;
  color: #9ccf6f; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  white-space: nowrap; transition: opacity .2s ease, max-width .2s ease;
}
.inv-pill.is-updated .inv-pill__done { max-width: 90px; opacity: 1; margin-left: -2px; }
.inv-pill.is-updated .inv-pill__val { animation: inv-flash 1s ease; }
.inv-pill.is-updated .inv-pill__refresh { color: #9ccf6f; border-color: #4f7a33; }
@keyframes inv-flash {
  0% { color: #9ccf6f; text-shadow: 0 0 8px rgba(156,207,111,.8); }
  100% { color: var(--gold); text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .inv-pill__refresh.is-spinning .inv-pill__refresh-ico { animation: none; opacity: .6; }
  .inv-pill__refresh.is-nudge { animation: none; }
  .inv-pill.is-updated .inv-pill__val { animation: none; }
  /* the "updated ✓" label still shows (opacity transition) so it stays obvious */
}

/* ---- Whole-profile refresh button — top-right of the identity name row ----- */
/* Injected by profile.js into .id__top-head (the empty right slot beside the name). */
.id__refresh {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  /* Reserve a constant width so the label swap (Refresh / cooldown timer) never
     changes the button's size (a wider label used to squeeze the name row + wrap
     the tag). Sized just to fit "Refresh" — the refreshing state only spins the
     icon (no longer swaps in the wider "Refreshing…" text), keeping it compact. */
  min-width: 84px; box-sizing: border-box;
  font: 700 10px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold-dim); background: #14160d; border: 1px solid var(--frame);
  padding: 5px 9px; cursor: pointer; white-space: nowrap;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.id__refresh:hover { color: var(--gold); border-color: var(--gold-dim); background: #1b1d12; }
.id__refresh .id__refresh-ico { font-size: 13px; line-height: 1; }
.id__refresh.is-spinning { color: var(--gold); cursor: default; }
.id__refresh.is-spinning .id__refresh-ico { animation: inv-spin .7s linear infinite; }
.id__refresh.is-cooldown { opacity: .5; cursor: default; }
.id__refresh.is-cooldown:hover { color: var(--gold-dim); border-color: var(--frame); background: #14160d; }
.id__refresh.is-nudge { animation: inv-nudge .32s ease; }
/* Disabled while a refresh is in flight: kill the hover affordance, but keep the
   spinning state at full strength so it reads as "working", not "greyed out". */
.id__refresh:disabled { cursor: default; }
.id__refresh:disabled:hover { color: var(--gold-dim); border-color: var(--frame); background: #14160d; }
.id__refresh.is-spinning:disabled { color: var(--gold); opacity: 1; }
.id__refresh.is-spinning:disabled:hover { color: var(--gold); }
.id__refresh.is-error { color: #f0b0a0; border-color: #f0b0a0; }
.id__refresh.is-error:hover { color: #f0b0a0; border-color: #f0b0a0; background: #14160d; }
.id__refresh:focus-visible { outline: 1px solid var(--gold); outline-offset: 2px; }

/* ---- Skeleton shimmer: async tiles show this until their data lands -------- */
.skel { color: transparent !important; border-color: #2a2d20 !important;
  background: linear-gradient(90deg, #181a11 25%, #24271a 38%, #181a11 60%) !important;
  background-size: 300% 100% !important; animation: skel-shimmer 1.25s ease infinite; pointer-events: none; }
.skel * { visibility: hidden; }
@keyframes skel-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .id__refresh.is-spinning .id__refresh-ico { animation: none; opacity: .6; }
  .skel { animation: none; }
  /* The toast dot now rides the manual refresh path too, so it needs the same
     static-opacity substitution the button icon already had. */
  .scr-refresh__dot { animation: none; opacity: .7; }
}