/* Homepage "CS2 PLAYER DOSSIER" hero + live result tile.
   Matches the approved tactical mockup. Flat 2002-Steam: border-radius:0,
   mono for numbers/labels, no emoji. Scoped under .hero. */
/* The homepage uses the site-wide --maxw (820px) like every other page, so the
   dossier lines up with the profile instead of sitting wider than it. The two-
   column dossier is tuned to sit cleanly at this width: meta bits are nowrap so
   they break at separators (never orphan a lone "2003"), and the badges wrap.
   home.css only loads on the homepage, so these rules never touch other pages. */
.hero{ --hmono: Consolas, "DejaVu Sans Mono", "Courier New", monospace;
  max-width:100%; margin:0 auto; background:#0f110b; border:1px solid #34372a;
  color:#d8d8c8; font-family:var(--font); }

/* header strip */
.hero__bar{ display:flex; align-items:center; justify-content:space-between; gap:8px;
  flex-wrap:wrap; background:#1a1c14; border-bottom:1px solid #34372a; padding:9px 14px; }
.hero__brand{ display:flex; align-items:center; gap:9px; }
.hero__shield{ display:block; width:24px; height:24px; object-fit:contain; }
.hero__wm{ font-family:var(--hmono); font-size:13px; letter-spacing:1px; color:#f5f4ec; }
.hero__wm b{ font-weight:700; }
.hero__wm .sub{ color:#8a8c78; font-weight:400; }
.hero__tag{ font-family:var(--hmono); font-size:11px; letter-spacing:.5px; color:#8a8c78; }
.hero__tag .dim{ color:#4a4d3e; }

/* two-column body */
.hero__body{ display:flex; gap:1px; background:#0f110b; padding:1px; flex-wrap:wrap; align-items:stretch; }
.hero__col{ flex:1 1 300px; min-width:0; background:#14160d; }

/* left: search panel */
.hero__search{ padding:18px; }
.hero__kicker{ font-family:var(--hmono); font-size:11px; color:#8a8c78; letter-spacing:1.5px; margin-bottom:11px; }
.hero__h1{ font-family:var(--hmono); font-size:23px; color:#f5f4ec; letter-spacing:1px; line-height:1.05; margin:0; }
.hero__sub{ font-size:12px; color:#8a8c78; line-height:1.55; margin:9px 0 16px; }
.hero__sub b{ color:#ccb766; font-weight:400; }
.hero__label{ font-family:var(--hmono); font-size:11px; color:#8a8c78; letter-spacing:.5px; margin-bottom:5px; }
.hero__form{ margin:0; }
.hero__field{ position:relative; }
.hero__input{ width:100%; box-sizing:border-box; background:#0f110b; border:1px solid #34372a;
  box-shadow:inset 1px 1px 0 #14160d; outline:none; color:#f5f4ec; font-family:var(--hmono);
  font-size:13px; padding:10px 11px; border-radius:0; }
.hero__input:focus{ border-color:#8f7f44; }
.hero__btn{ width:100%; margin-top:9px; background:#ccb766; border:1px solid #8f7f44; color:#000;
  font:700 14px var(--font); letter-spacing:.04em; padding:10px 0; cursor:pointer; border-radius:0;
  /* Pressed-in highlight + press-down on :active, so the primary action feels like
     a physical 2002-Steam button instead of a flat slab with no feedback. */
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.22);
  transition:background .12s ease, border-color .12s ease; }
.hero__btn:hover{ background:#dbc77c; border-color:#a8934f; }
.hero__btn:active{ background:#c0ab5c; box-shadow:inset 0 1px 2px rgba(0,0,0,.35); transform:translateY(1px); }
.hero__btn:focus-visible{ outline:2px solid #f5f4ec; outline-offset:2px; }
@media (prefers-reduced-motion: reduce){ .hero__btn{ transition:none; } .hero__btn:active{ transform:none; } }
.hero__try{ font-size:12px; color:#8a8c78; margin-top:10px; }
.hero__try a{ color:#ccb766; text-decoration:none; }
.hero__try a:hover{ text-decoration:underline; }
.hero__trick{ font-family:var(--hmono); font-size:11px; color:#8a8c78; letter-spacing:.3px; line-height:1.5; margin-top:6px; }
.hero__trick .dom{ color:#8a8c78; }
.hero__trick s{ color:#8a8c78; }
.hero__trick .arr{ color:#8a8c78; padding:0 2px; }
.hero__trick .rep{ color:#ccb766; }
.hero__hint{ font-size:12px; color:#e6a08f; margin:8px 0 0; min-height:1em; }

/* Compact "how it works" block — sits in the left search column to fill the space
   beside the taller dossier (replaces the old full-width .hero__foot strip). */
.hero__how{ margin-top:22px; border-top:1px solid #2c2f22; padding-top:16px; }
.hero__how-hd{ font-family:var(--hmono); font-size:11px; color:#8a8c78; letter-spacing:1.5px; margin-bottom:13px; }
.hfc2{ margin-bottom:14px; }
.hfc2:last-child{ margin-bottom:0; }
.hfc2__h{ font-family:var(--hmono); font-size:11px; color:#ccb766; letter-spacing:.5px; margin-bottom:4px; }
.hfc2__b{ font-size:12px; color:#a8a897; line-height:1.55; }
.hfc2__b b{ color:#ccb766; font-weight:400; }
.hfc2__b .mut{ color:#8a8c78; }

/* right: dossier / report tile. Reserves a fixed min-height (set below) so the
   card stays the SAME size whether empty or populated — searching a player never
   grows the page. Flex column so the empty/loading prompt centers in that space. */
.dossier{ background:#1a1c14; border-left:1px solid #2c2f22; min-height:var(--dossier-h,504px);
  display:flex; flex-direction:column; }
.dossier__head{ background:#14160d; border-bottom:1px solid #2c2f22; padding:7px 12px;
  font-family:var(--hmono); font-size:11px; color:#8a8c78; letter-spacing:1px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:none; }
.dossier__head span{ color:#8a8c78; }
.dossier__pad{ padding:11px 13px 12px; }

/* empty / loading / error states — centered in the reserved height */
.dossier__empty{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:20px 16px; text-align:center; }
.dossier__empty .g{ font-family:var(--hmono); font-size:11px; color:#8a8c78; letter-spacing:1.5px; }
.dossier__empty .m{ font-size:12px; color:#8a8c78; margin-top:8px; line-height:1.5; }
.dossier__spin{ display:inline-block; width:16px; height:16px; border:2px solid #34372a;
  border-top-color:#ccb766; border-radius:50%; animation:dspin .7s linear infinite; }
@keyframes dspin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .dossier__spin{ animation:none; } }
/* On mobile the columns stack: an idle 500px-tall "[ NO TARGET ]" placeholder just
   pushes real content down. Collapse the whole dossier while idle (only the idle
   marker — the loading spinner and [ NOT FOUND ] feedback still show). Populated
   dossiers use .dossier__pad, so :has() stops matching and the tile reappears. */
@media (max-width:620px){
  .dossier:has(.dossier__empty--idle){ display:none; }
}

/* identity row */
/* position:relative so the "Full profile" button can float out of the flex flow
   (below), giving the name / VAC / hours lines the full card width at 820px so the
   hours line stays on one row instead of wrapping. */
.dossier__id{ display:flex; align-items:flex-start; gap:11px; margin-bottom:10px; position:relative; }
.dossier__av{ width:42px; height:42px; flex:none; background:#0f110b; border:1px solid #6f7358;
  box-shadow:inset 0 0 0 1px #14160d; object-fit:cover; display:block; }
.dossier__mono{ width:42px; height:42px; flex:none; background:#0f110b; border:1px solid #6f7358;
  display:flex; align-items:center; justify-content:center; font:700 20px var(--font); color:#ccb766; }
.dossier__idmain{ min-width:0; flex:1 1 auto; }
.dossier__name{ font-size:15px; color:#f5f4ec; font-weight:700; line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; padding-right:96px; }
.dossier__meta{ font-family:var(--hmono); font-size:11px; color:#8a8c78; margin-top:3px; }
.dossier__meta .ok{ color:#9fdba0; }
.dossier__meta .bad{ color:#e6796a; }
/* CS2 hours + account age, e.g. "1,342h CS2 · Steam since 2013" */
.dossier__meta2{ font-family:var(--hmono); font-size:11px; color:#8a8c78; margin-top:2px; }
/* Each bit ("5,847h CS2", "Steam since 2003") stays intact; only the separator
   between them may break, so the line never orphans a lone year at 820px width. */
.dossier__meta2 .nw{ white-space:nowrap; }
.dossier__view{ position:absolute; top:0; right:0; display:inline-block; background:#0f110b;
  border:1px solid #8f7f44; color:#ccb766; font-family:var(--hmono); font-size:11px;
  letter-spacing:.5px; padding:6px 9px; text-decoration:none; white-space:nowrap; }
.dossier__view:hover{ background:#1e2015; color:#f5f4ec; }

/* score box */
.dossier__score{ border:1px solid #34372a; background:#0f110b; box-shadow:inset 1px 1px 0 #14160d;
  border-top:2px solid #8FA0AB; padding:9px 12px; }
.dossier__slabel{ font-family:var(--hmono); font-size:11px; color:#8a8c78; letter-spacing:1px; }
.dossier__srow{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-top:3px; }
.dossier__snum{ font-family:var(--hmono); line-height:1.02; }
.dossier__snum .v{ font-size:36px; font-weight:700; letter-spacing:1px; }
.dossier__snum .d{ font-size:15px; color:#8a8c78; }
.dossier__snum .t{ font-size:14px; }
.dossier__tier{ font-family:var(--hmono); font-size:11px; padding:2px 7px; letter-spacing:1px;
  border:1px solid; white-space:nowrap; }
.dossier__bar-wrap{ margin-top:9px; position:relative; }
.dossier__bar{ position:relative; display:flex; height:13px; border:1px solid #2a2d20; }
.dossier__bar > span{ display:block; }
.dossier__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); }
.dossier__ticks{ position:relative; height:12px; font-family:var(--hmono);
  font-size:11px; color:#8a8c78; margin-top:6px; }
/* Pin ticks to true value positions so 250/500/750 line up with the band edges
   (flex/space-between drifts them by label width). */
.dossier__ticks > span{ position:absolute; transform:translateX(-50%); white-space:nowrap; }
.dossier__ticks > span:nth-child(1){ left:0; transform:none; }
.dossier__ticks > span:nth-child(2){ left:25%; }
.dossier__ticks > span:nth-child(3){ left:50%; }
.dossier__ticks > span:nth-child(4){ left:75%; }
.dossier__ticks > span:nth-child(5){ left:100%; transform:translateX(-100%); }

/* badges */
.dossier__badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:9px; }
.dossier__badge{ display:inline-flex; align-items:center; gap:6px; border:1px solid #2c2f22;
  background:#14160d; padding:3px 8px; font-family:var(--hmono); font-size:11px; letter-spacing:.5px; color:#8a8c78; }
.dossier__lvl{ width:17px; height:17px; color:#1a1c14; font:700 11px var(--hmono);
  display:flex; align-items:center; justify-content:center; }
.dossier__badge .big{ font-weight:700; font-size:13px; }

/* reputation cluster: CS2 commends + trust pill (both null-guarded, hidden
   entirely when neither has data — see #dossier-rep in home.js render()). */
.dossier__rep{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin-top:9px; }
.dossier__trust{ display:inline-flex; align-items:center; gap:6px; border:1px solid #2c2f22;
  background:#14160d; padding:3px 8px; font-family:var(--hmono); font-size:11px;
  letter-spacing:.5px; font-weight:700; border-radius:0; }
.dossier__trust-n{ font-weight:400; color:#8a8c78; letter-spacing:0; }

/* 2x2 stats */
.dossier__stats{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:#2c2f22;
  border:1px solid #2c2f22; margin-top:9px; }
.dossier__stat{ background:#14160d; padding:6px 10px; }
.dossier__stat .k{ font-family:var(--hmono); font-size:11px; color:#8a8c78; letter-spacing:1px; }
/* tabular-nums so digits are equal-width and the values line up down the columns
   (proportional figures made 1.05 / 35.8% / 66,326 wobble); right-aligned so both
   grid columns share a clean right edge. */
.dossier__stat .v{ font-family:var(--hmono); font-size:16px; font-weight:700; color:#f5f4ec;
  font-variant-numeric:tabular-nums; text-align:right; }
.dossier__snum .v, .dossier__snum .d{ font-variant-numeric:tabular-nums; }

/* ---- Steam / Synced source tabs ---------------------------------------- */
/* Shown only when BOTH a lifetime (Steam API) and a synced (parsed demos) view
   exist for this player. Synced needs 5+ scored matches, which the API signals
   with building:false — below that there is no synced tab at all. */
.dossier__tabs{ display:flex; gap:1px; background:#2c2f22; border:1px solid #2c2f22; margin-top:9px; }
.dossier__tab{ flex:1 1 0; min-width:0; background:#14160d; color:#8a8c78; cursor:pointer;
  font-family:var(--hmono); font-size:11px; letter-spacing:1px; text-transform:uppercase;
  padding:6px 8px; border:0; border-radius:0; text-align:center; white-space:nowrap;
  transition:color .12s ease, background .12s ease; }
.dossier__tab:hover{ color:#ccb766; background:#191c11; }
.dossier__tab.is-on{ background:#1f2215; color:#f5f4ec; box-shadow:inset 0 -2px 0 #ccb766; }
.dossier__tab .n{ color:#6f7358; margin-left:5px; }
.dossier__tab.is-on .n{ color:#8a8c78; }
.dossier__tab:focus-visible{ outline:1px solid #ccb766; outline-offset:-2px; }
.dossier__pane[hidden]{ display:none; }
@media (prefers-reduced-motion: reduce){ .dossier__tab{ transition:none; } }

/* footer how-it-works cards */
.hero__foot{ display:flex; gap:1px; background:#2c2f22; border-top:1px solid #2c2f22; flex-wrap:wrap; }
.hfc{ flex:1 1 200px; min-width:0; background:#14160d; }
.hfc__h{ background:#1a1c14; border-bottom:1px solid #2c2f22; padding:7px 11px;
  font-family:var(--hmono); font-size:11px; color:#ccb766; letter-spacing:1px; }
.hfc__b{ padding:12px 11px; font-size:12px; color:#d8d8c8; line-height:1.5; }
.hfc__b b{ color:#ccb766; font-weight:400; }
.hfc__b .mut{ color:#8a8c78; }
.hfc__b .lines{ font-family:var(--hmono); font-size:11px; color:#8a8c78; margin-top:7px; line-height:1.6; }

/* Community pulse — standout-moments feed (opt-in players only). Flat and square
   to match the theme; avatars stay round. Hidden until it has events.
   pulse.js caps the viewport at 10 rows and, when there are more, duplicates the
   track once and loops it (translateY by one set-height = seamless wrap). Hover
   pauses the loop so rows stay clickable; reduced-motion gets a manual scroll. */
.pulse{ margin-top:14px; background:#0f110b; border:1px solid #34372a; }
.pulse__head{ background:#1a1c14; border-bottom:1px solid #34372a; padding:8px 14px;
  font-family:var(--hmono); font-size:11px; letter-spacing:1.5px; color:#f5f4ec; }
.pulse__head span{ color:#8a8c78; letter-spacing:.5px; }
.pulse__list{ position:relative; overflow:hidden; }
.pulse__track{ display:flex; flex-direction:column; }
.pulse__row{ display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid #191b12; text-decoration:none; color:#d8d8c8; font-size:13px; }
.pulse__row:last-child{ border-bottom:0; }
a.pulse__row:hover{ background:#14160d; }
.pulse__av{ width:26px; height:26px; flex:none; border-radius:50%; object-fit:cover; background:#14160d; border:1px solid #34372a; }
.pulse__av--mono{ display:flex; align-items:center; justify-content:center; font-family:var(--hmono); font-size:12px; color:#ccb766; }
.pulse__body{ flex:1 1 auto; min-width:0; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pulse__body b{ color:#f5f4ec; font-weight:700; }
.pulse__map{ color:#ccb766; }
.pulse__kind{ flex:none; font-family:var(--hmono); font-size:9px; letter-spacing:1.2px;
  color:#8a8c78; background:#12140c; border:1px solid #2a2c20; padding:2px 7px; }
.pulse__kind--hot{ color:#ccb766; border-color:#5a5433; }
.pulse__when{ flex:none; min-width:56px; text-align:right; font-family:var(--hmono); font-size:11px; color:#8a8c78; }
/* Mobile: drop the chip, tighten the row, and let the sentence WRAP — a 375px
   screen can't fit "got 5 kills through smoke on Dust2" on one ellipsized line
   without cutting the map off mid-sentence. */
@media (max-width:560px){
  .pulse__kind{ display:none; }
  .pulse__when{ min-width:0; }
  .pulse__row{ padding:9px 10px; gap:8px; font-size:12.5px; }
  .pulse__body{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35; }
}

/* Auto-scroll loop. The motion itself is driven by pulse.js via the Web Animations
   API (element.animate) — NOT CSS keyframes — so touch devices can pause it
   programmatically (no :hover on touch) and mobile-Safari var()-in-@keyframes
   quirks never apply. This class only styles the rolling state: edge fades + the
   seam border between the duplicated sets. */
.pulse__list--roll .pulse__track{ will-change:transform; }
.pulse__list--roll .pulse__row:last-child{ border-bottom:1px solid #191b12; } /* seam between the two sets */
/* Edge fades while rolling — polish, and they signal "this list moves". */
.pulse__list--roll::before, .pulse__list--roll::after{ content:""; position:absolute; left:0; right:0;
  height:12px; z-index:1; pointer-events:none; }
.pulse__list--roll::before{ top:0; background:linear-gradient(#0f110b, transparent); }
.pulse__list--roll::after{ bottom:0; background:linear-gradient(transparent, #0f110b); }
/* Reduced motion: same 10-row cap, user scrolls it themselves. */
.pulse__list--manual{ overflow-y:auto; }