/* Compare page — "PLAYER COMPARE" hero + two-column stat table.
   Flat 2002-Steam theme, reusing home.css's dark palette (#0f110b/#14160d/#1a1c14,
   borders #2c2f22/#34372a, gold #ccb766). border-radius:0 everywhere, mono for
   numbers/labels, no emoji. Scoped under .cmp / .cmpt. */
.cmp{ --hmono: Consolas, "DejaVu Sans Mono", "Courier New", monospace;
  max-width:980px; margin:0 auto; background:#0f110b; border:1px solid #34372a;
  color:#d8d8c8; font-family:var(--font); }

/* header strip — matches .hero__bar */
.cmp__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; }
.cmp__brand{ display:flex; align-items:center; gap:9px; }

.cmp__head{ padding:18px 18px 0; }
.cmp__kicker{ font-family:var(--hmono); font-size:11px; color:#8a8c78; letter-spacing:1.5px; margin-bottom:11px; }
.cmp__h1{ font-family:var(--hmono); font-size:23px; color:#f5f4ec; letter-spacing:1px; line-height:1.05; margin:0; }
.cmp__sub{ font-size:12px; color:#8a8c78; line-height:1.55; margin:9px 0 0; }

/* picker form */
.cmp__form{ padding:16px 18px 18px; }
.cmp__pickers{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; }
.cmp__picker{ flex:1 1 260px; min-width:0; }
.cmp__picker-lbl{ display:block; font-family:var(--hmono); font-size:11px; color:#8a8c78;
  letter-spacing:.5px; margin-bottom:5px; }
.cmp__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; }
.cmp__input:focus{ border-color:#8f7f44; }
.cmp__vs{ font-family:var(--hmono); font-size:13px; color:#8a8c78; letter-spacing:1px;
  padding-bottom:11px; flex:0 0 auto; }
.cmp__btn{ margin-top:12px; background:#ccb766; border:1px solid #8f7f44; color:#000;
  font:700 14px var(--font); letter-spacing:.04em; padding:10px 22px; cursor:pointer; border-radius:0; }
.cmp__btn:hover{ background:#d8c479; }
.cmp__hint{ font-size:12px; color:#e6a08f; margin:0 18px 8px; min-height:1em; }

/* All-time / Synced-matches source toggle (shown when a player has tracked CS2
   matches). Segmented control matching the 2002-Steam theme. */
.cmp-toggle{ display:flex; width:max-content; max-width:calc(100% - 36px);
  border:1px solid #34372a; margin:16px 18px 0; }
.cmp-toggle__btn{ appearance:none; -webkit-appearance:none; cursor:pointer;
  font-family:var(--hmono); font-size:11px; letter-spacing:.6px; text-transform:uppercase;
  color:#8a8c78; background:#14160d; border:none; padding:8px 15px; line-height:1;
  transition:color .14s ease, background .14s ease; }
.cmp-toggle__btn + .cmp-toggle__btn{ border-left:1px solid #34372a; }
.cmp-toggle__btn:hover{ color:#ccb766; }
.cmp-toggle__btn.is-active{ color:#000; background:#ccb766; }
.cmp-toggle__note{ font-family:var(--hmono); font-size:10.5px; color:#8a8c78;
  letter-spacing:.3px; margin:7px 18px 0; line-height:1.5; }

/* results area */
.cmp__out{ border-top:1px solid #2c2f22; }
.cmp__empty{ padding:34px 16px; text-align:center; }
.cmp__empty .g{ font-family:var(--hmono); font-size:11px; color:#8a8c78; letter-spacing:1.5px; }
.cmp__empty .m{ font-size:12px; color:#8a8c78; margin-top:8px; line-height:1.5; }

/* two-column comparison table — wrapped in .cmpt-scroll so narrow phones swipe
   the second player into view instead of overflowing the whole page */
.cmpt-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cmpt{ width:100%; border-collapse:collapse; background:#2c2f22; }
.cmpt th, .cmpt td{ background:#14160d; padding:9px 12px; vertical-align:middle; }
.cmpt thead th{ background:#1a1c14; border-bottom:1px solid #2c2f22; }

/* header row: avatar + name + full-profile link, per side */
.cmpt__id{ display:flex; align-items:center; gap:10px; }
.cmpt__av{ width:38px; height:38px; flex:none; background:#0f110b; border:1px solid #6f7358;
  object-fit:cover; display:block; }
.cmpt__mono{ width:38px; height:38px; flex:none; background:#0f110b; border:1px solid #6f7358;
  display:flex; align-items:center; justify-content:center; font:700 17px var(--font); color:#ccb766; }
.cmpt__idmain{ min-width:0; text-align:left; }
.cmpt__name{ font-size:14px; color:#f5f4ec; font-weight:700; line-height:1.15;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:220px; }
.cmpt__view{ display:block; font-family:var(--hmono); font-size:10.5px; color:#ccb766;
  letter-spacing:.3px; text-decoration:none; margin-top:2px; }
.cmpt__view:hover{ color:#f5f4ec; text-decoration:underline; }

/* empty-side picker prompt (shown in place of the id block when a side has no player) */
.cmpt__prompt{ font-family:var(--hmono); font-size:11px; color:#8a8c78; letter-spacing:.5px; }

/* stat rows */
.cmpt__k{ font-family:var(--hmono); font-size:11px; color:#8a8c78; letter-spacing:1px;
  white-space:nowrap; width:1%; }
.cmpt__v{ font-family:var(--hmono); font-size:14px; color:#f5f4ec; font-weight:700; text-align:center; }
.cmpt__v .dim{ color:#8a8c78; font-weight:400; }
.cmpt__tier{ display:inline-block; font-size:10px; letter-spacing:.5px; margin-left:6px;
  padding:1px 5px; border:1px solid; vertical-align:middle; }

/* mini tier bar under the nocat/premier numbers, mirrors .dossier__bar */
.cmpt__bar-wrap{ margin-top:6px; }
.cmpt__bar{ position:relative; display:flex; height:6px; border:1px solid #2a2d20; }
.cmpt__bar > span{ display:block; }
.cmpt__mark{ position:absolute; top:-2px; bottom:-2px; width:2px; background:#f5f4ec;
  margin-left:-1px; box-shadow:0 0 0 1px rgba(0,0,0,.55); }

/* winner highlight — gold wash + inset gold outline + an up-marker (▲) so the
   higher side is obvious at a glance */
.cmpt td.cmpt__v--win{ position:relative;
  background:linear-gradient(rgba(204,183,102,.16), rgba(204,183,102,.16)), #14160d;
  box-shadow:inset 0 0 0 1px rgba(204,183,102,.5); color:#f7f0d6; }
.cmpt__up{ display:inline-block; color:#ccb766; font-size:10px; line-height:1;
  margin-right:5px; vertical-align:1px; }

@media (max-width: 640px){
  .cmpt__name{ max-width:120px; }
  .cmpt{ min-width:340px; }   /* columns stay readable; .cmpt-scroll provides the swipe */
  .cmp__pickers{ flex-direction:column; align-items:stretch; }
  /* Stacked column: reset the flex-basis (it was a 260px *width* for the desktop
     row) so each picker is content-height, not a 260px-tall box with a huge gap. */
  .cmp__picker{ flex:0 0 auto; }
  .cmp__vs{ align-self:center; padding-bottom:0; }
}

/* Head-to-head + duo synergy panel (below the comparison table). Matches the
   flat compare palette: #14160d cells, #2c2f22 grid, #34372a frame. */
.cmp-h2h{ margin-top:26px; }
.cmp-h2h__sec{ margin:0 0 6px; }
.cmp-h2h__note{ font:400 12px var(--font); color:#8a8c78; margin:0 0 14px; }
.cmp-h2h__empty{ font:400 13px var(--font); color:#8a8c78; border:1px dashed #34372a; padding:16px; background:#14160d; }
.cmp-h2h__grp{ margin-bottom:14px; }
.cmp-h2h__grp-h{ font:700 11px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:#8f7f44; margin-bottom:8px; }
.cmp-h2h__stats{ display:flex; flex-wrap:wrap; gap:1px; background:#2c2f22; border:1px solid #2c2f22; }
.cmp-h2h__stat{ flex:1 1 150px; background:#14160d; padding:11px 13px; }
.cmp-h2h__stat .k{ font:700 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; color:#8a8c78; margin-bottom:5px; }
.cmp-h2h__stat .v{ font:700 15px var(--font); color:#f5f4ec; }
.cmp-h2h__lead{ color:#ccb766; }