/* Compare — "Classic Steam client", same look as the profile and leaderboard
   (profile-classic.css, leaderboard-classic.css). One olive "PLAYER COMPARE" window:
   title bar, heading, two sunken player fields with a raised gold Compare button,
   the All time / Synced matches toggles, the side-by-side table as a sunken list
   (winning cells washed gold), and the head-to-head panel as a group box of wells.
   Loaded only by compare.html; every rule is scoped under body.cmp-classic and
   overrides compare.css / home.css (both still load). Square corners. No emoji. */

.cmp-classic{
  --desk:   #333929;
  --win:    #4C5844;
  --win-dk: #3E4637;
  --well:   #22271C;
  --hi:     #8C9284;
  --lo:     #282E22;
  --edge:   #171B13;
  --etch:   #66705B;
  --tx:     #D8DED3;
  --tx-hi:  #F2F5EE;
  --tx-2:   #B7C0AC;
  --tx-3:   #A0AA95;
  --hc-gold:#C4B550;
  --gold-hi:#D6C866;
  --sel:    #958831;
  --ok:     #9fdba0;
  --bad:    #e6796a;
  --ui:   Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
  --num:  Verdana, Tahoma, Geneva, sans-serif;
  background:var(--desk); color:var(--tx); font:13px/1.45 var(--ui);
}
.cmp-classic *, .cmp-classic *::before, .cmp-classic *::after{ box-sizing:border-box; }
.cmp-classic .frame{ border:0; background:none; box-shadow:none; padding:0; margin:12px 0 0; }
.cmp-classic .frame::before, .cmp-classic .frame::after{ display:none; }

/* ---- the window ------------------------------------------------------------ */
.cmp-classic .cmp{ max-width:960px; background:var(--win); color:var(--tx); font-family:var(--ui);
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:0 0 0 1px var(--edge), 5px 5px 0 rgba(0,0,0,.22); }
.cmp-classic .cmp__bar{ height:26px; padding:0 8px 0 9px; background:var(--win-dk); flex-wrap:nowrap;
  border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch); }
.cmp-classic .cmp__bar .hero__wm{ font:700 12px var(--ui); color:var(--tx-hi); letter-spacing:.04em; white-space:nowrap; }
.cmp-classic .cmp__bar .hero__wm .sub{ color:var(--gold-hi); letter-spacing:.04em; }
.cmp-classic .cmp__bar .hero__tag{ font:11px var(--ui); color:var(--tx-2); letter-spacing:.03em; }
.cmp-classic .cmp__bar .hero__tag .dim{ color:var(--gold-hi); }

.cmp-classic .cmp__head{ padding:14px 14px 0; }
.cmp-classic .cmp__kicker{ font:700 10px var(--ui); letter-spacing:.1em; color:var(--gold-hi); margin-bottom:4px; }
.cmp-classic .cmp__h1{ font:700 20px var(--ui); letter-spacing:.06em; color:var(--tx-hi); }
.cmp-classic .cmp__sub{ font:12px/1.5 var(--ui); color:var(--tx-2); margin-top:6px; }

/* player fields: sunken text boxes; VS between; raised gold button */
.cmp-classic .cmp__form{ padding:12px 14px 14px; }
.cmp-classic .cmp__picker-lbl{ font:700 10px var(--ui); letter-spacing:.08em; color:var(--tx-2); margin-bottom:4px; }
.cmp-classic .cmp__input{ height:26px; padding:0 8px; background:var(--win-dk); color:var(--tx-hi); font:12px var(--num);
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); box-shadow:inset 1px 1px 0 var(--edge); }
.cmp-classic .cmp__input:focus{ border-color:var(--lo) var(--hi) var(--hi) var(--lo); outline:1px dotted var(--gold-hi); outline-offset:1px; }
.cmp-classic .cmp__input::placeholder{ color:var(--tx-3); }
.cmp-classic .cmp__vs{ font:700 12px var(--ui); letter-spacing:.08em; color:var(--gold-hi); padding-bottom:5px; }
.cmp-classic .cmp__btn{ margin-top:10px; height:26px; padding:0 18px; background:var(--hc-gold); color:#1C2014;
  border:1px solid; border-color:#E6DC96 #5F5620 #5F5620 #E6DC96; box-shadow:0 0 0 1px var(--edge);
  font:700 12px var(--ui); letter-spacing:.04em; }
.cmp-classic .cmp__btn:hover{ background:#D2C35C; }
.cmp-classic .cmp__btn:active{ background:#B8A948; border-color:#5F5620 #E6DC96 #E6DC96 #5F5620; }
.cmp-classic .cmp__hint{ margin:0 14px 8px; color:var(--bad); }

/* All time / Synced matches: raised toggles, the chosen one pressed in */
.cmp-classic .cmp-toggle{ gap:3px; border:0; margin:12px 0 0; max-width:100%; }
.cmp-classic .cmp-toggle__btn{ height:23px; padding:0 12px; background:var(--win); color:var(--tx);
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); box-shadow:0 0 0 1px var(--edge);
  font:700 11px var(--ui); letter-spacing:.06em; }
.cmp-classic .cmp-toggle__btn + .cmp-toggle__btn{ border-left:1px solid var(--hi); }
.cmp-classic .cmp-toggle__btn:hover{ color:var(--gold-hi); }
.cmp-classic .cmp-toggle__btn.is-active{ background:var(--sel); color:#fff; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cmp-classic .cmp-toggle__note{ margin:6px 0 0; font:11px var(--ui); color:var(--tx-3); letter-spacing:0; }

/* ---- the comparison: a sunken list ----------------------------------------- */
.cmp-classic .cmp__out{ border-top:0; padding:0 14px 14px; }
.cmp-classic .cmp__empty{ margin-top:12px; background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cmp-classic .cmp__empty .g{ font:700 11px var(--ui); letter-spacing:.08em; color:var(--gold-hi); }
.cmp-classic .cmp__empty .m{ color:var(--tx-2); }
.cmp-classic .cmpt-scroll{ margin-top:12px; border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cmp-classic .cmpt{ background:#353c2f; border-collapse:collapse; }
.cmp-classic .cmpt th, .cmp-classic .cmpt td{ background:var(--win-dk); padding:7px 10px; border-bottom:1px solid #353c2f; }
.cmp-classic .cmpt tbody tr:nth-child(even) th, .cmp-classic .cmpt tbody tr:nth-child(even) td{ background:#434C3C; }
/* header row: the two players on a raised band */
.cmp-classic .cmpt thead th{ background:var(--win); border-bottom:1px solid var(--lo); box-shadow:inset 1px 1px 0 var(--hi); }
.cmp-classic .cmpt__av, .cmp-classic .cmpt__mono{ background:var(--well); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cmp-classic .cmpt__mono{ font:700 17px var(--ui); color:var(--gold-hi); }
.cmp-classic .cmpt__name{ font:700 13px var(--ui); color:var(--tx-hi); }
.cmp-classic .cmpt__view{ font:11px var(--ui); color:var(--gold-hi); letter-spacing:0; }
.cmp-classic .cmpt__view:hover{ color:var(--tx-hi); }
.cmp-classic .cmpt__prompt{ font:11px var(--ui); color:var(--tx-3); letter-spacing:0; }
/* row labels: small caps on the left */
.cmp-classic .cmpt__k{ font:700 10px var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-2);
  border-right:1px solid var(--lo); }
.cmp-classic .cmpt__v{ font:700 13px var(--num); color:var(--tx-hi); }
.cmp-classic .cmpt__v .dim{ color:var(--tx-3); }
.cmp-classic .cmpt__tier{ background:var(--well); }
.cmp-classic .cmpt__bar{ border-color:var(--lo); background:#15180f; }
/* the better value: gold wash + gold frame + up-marker */
.cmp-classic .cmpt td.cmpt__v--win{ background:#5A5A36; box-shadow:inset 0 0 0 1px var(--hc-gold); color:#fff; }
.cmp-classic .cmpt tbody tr:nth-child(even) td.cmpt__v--win{ background:#5A5A36; }
.cmp-classic .cmpt__up{ color:var(--gold-hi); }

/* ---- head to head: etched section title + wells ----------------------------- */
.cmp-classic .cmp-h2h{ margin-top:16px; }
.cmp-classic .cmp-h2h__sec{ margin:0 0 4px; font:700 12px var(--ui); letter-spacing:.08em; color:var(--gold-hi); }
.cmp-classic .cmp-h2h__sec .a, .cmp-classic .cmp-h2h__sec .b{ color:var(--gold-hi); }
.cmp-classic .cmp-h2h__sec::after{ width:100%; height:0; margin-top:4px; border-top:1px solid var(--lo); box-shadow:0 1px 0 var(--etch); background:none; }
.cmp-classic .cmp-h2h__note{ font:12px var(--ui); color:var(--tx-2); margin:0 0 10px; }
.cmp-classic .cmp-h2h__empty{ font:12px var(--ui); color:var(--tx-2); background:var(--win-dk);
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cmp-classic .cmp-h2h__grp-h{ font:700 10px var(--ui); letter-spacing:.08em; color:var(--tx-2); margin-bottom:5px; }
.cmp-classic .cmp-h2h__stats{ gap:4px; background:none; border:0; }
.cmp-classic .cmp-h2h__stat{ padding:8px 10px; background:var(--well); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cmp-classic .cmp-h2h__stat .k{ font:700 10px var(--ui); letter-spacing:.06em; color:var(--tx-2); }
.cmp-classic .cmp-h2h__stat .v{ font:700 16px var(--num); color:var(--tx-hi); }
.cmp-classic .cmp-h2h__lead{ color:var(--gold-hi); }

@media (max-width:640px){
  .cmp-classic .cmp__bar .hero__tag{ display:none; }
  .cmp-classic .cmp__head{ padding:12px 10px 0; }
  .cmp-classic .cmp__form{ padding:10px 10px 12px; }
  .cmp-classic .cmp__out{ padding:0 10px 12px; }
  .cmp-classic .cmp__vs{ padding-bottom:0; }
  .cmp-classic .cmpt th, .cmp-classic .cmpt td{ padding:6px 6px; }
  .cmp-classic .cmpt__k{ letter-spacing:.02em; }
  .cmp-classic .cmpt{ min-width:0; }
  .cmp-classic .cmpt__tier{ font-size:9px; letter-spacing:.02em; padding:1px 3px; margin-left:3px; }
}

/* ---- comparison layout (compare.js compareBody): face-off, at a glance, rows --- */
.cmp-classic{ --pa:#D6C866; --pb:#7FB3E0; }
.cmp-classic .cmx{ margin-top:12px; }
.cmp-classic .cmx-a{ color:var(--pa); }
.cmp-classic .cmx-b{ color:var(--pb); }
/* face-off: the two players either side of the verdict */
.cmp-classic .cmx-face{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:14px; padding:12px;
  background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cmp-classic .cmx-pl{ display:flex; align-items:center; gap:12px; min-width:0; }
.cmp-classic .cmx-pl--b{ flex-direction:row-reverse; text-align:right; }
.cmp-classic .cmx-av{ width:64px; height:64px; flex:none; object-fit:cover; }
.cmp-classic .cmx-pl__main{ min-width:0; }
.cmp-classic .cmx-pl__name{ font:700 17px var(--ui); color:var(--tx-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmp-classic .cmx-pl__rate{ margin-top:4px; font:700 22px var(--num); line-height:1; }
.cmp-classic .cmx-pl__rate span{ display:block; margin-top:2px; font:700 9px var(--ui); letter-spacing:.08em; color:var(--tx-3); text-transform:uppercase; }
.cmp-classic .cmx-pl__sub{ margin-top:3px; font:11px var(--ui); color:var(--tx-2); }
.cmp-classic .cmx-verdict{ min-width:120px; padding:8px 14px; text-align:center; background:var(--well);
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cmp-classic .cmx-verdict__n{ font:700 26px var(--num); line-height:1.1; }
.cmp-classic .cmx-verdict__n i{ font-style:normal; font-size:16px; color:var(--tx-3); margin:0 6px; }
.cmp-classic .cmx-verdict__l{ margin-top:2px; font:700 10px var(--ui); letter-spacing:.08em; color:var(--tx-2); }
.cmp-classic .cmx-verdict__w{ margin-top:5px; font:700 12px var(--ui); color:var(--gold-hi); }
/* at a glance: radar + biggest gaps */
.cmp-classic .cmx-glance{ display:grid; grid-template-columns:minmax(0,372px) minmax(0,1fr); gap:10px; margin-top:10px; align-items:stretch; }
.cmp-classic .cmx-radar, .cmp-classic .cmx-gaps{ background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cmp-classic .cmx-box__h{ padding:5px 10px; font:700 10px var(--ui); letter-spacing:.08em; color:var(--gold-hi); background:var(--win);
  border-bottom:1px solid var(--lo); box-shadow:inset 1px 1px 0 var(--hi); }
.cmp-classic .cmx-radar__svg{ display:block; width:100%; max-width:356px; height:auto; margin:4px auto 0; }
.cmp-classic .cmx-rl{ fill:var(--tx); font:700 11px var(--ui); letter-spacing:.04em; }
.cmp-classic .cmx-rl.is-na{ fill:var(--tx-3); }
.cmp-classic .cmx-ra{ fill:rgba(214,200,102,.25); stroke:var(--pa); stroke-width:2; }
.cmp-classic .cmx-rb{ fill:rgba(127,179,224,.25); stroke:var(--pb); stroke-width:2; }
.cmp-classic .cmx-legend{ display:flex; justify-content:center; gap:14px; padding:0 8px 8px; font:700 11px var(--ui); }
.cmp-classic .cmx-legend span::before{ content:""; display:inline-block; width:10px; height:10px; margin-right:5px; vertical-align:-1px; }
.cmp-classic .cmx-legend--a::before{ background:var(--pa); }
.cmp-classic .cmx-legend--b::before{ background:var(--pb); }
.cmp-classic .cmx-gaps{ display:flex; flex-direction:column; }
.cmp-classic .cmx-gap{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:7px 10px; border-bottom:1px solid #353c2f; }
.cmp-classic .cmx-gap:last-child{ border-bottom:0; }
.cmp-classic .cmx-gap b{ font:700 12px var(--ui); color:var(--tx-hi); }
.cmp-classic .cmx-gap small{ display:block; margin-top:1px; font:11px var(--num); color:var(--tx-3); }
.cmp-classic .cmx-gap small .cmpt__tier, .cmp-classic .cmx-gap small .dim{ display:none; }
.cmp-classic .cmx-gap__d{ flex:none; font:700 12px var(--num); }
.cmp-classic .cmx-gap__d--a{ color:var(--pa); }
.cmp-classic .cmx-gap__d--b{ color:var(--pb); }
.cmp-classic .cmx-none{ padding:14px 10px; font:12px var(--ui); color:var(--tx-2); }
/* stat groups: header with the group score, then compact centred rows */
.cmp-classic .cmx-grp{ max-width:740px; margin:12px auto 0; }
.cmp-classic .cmx-grp__h{ display:flex; justify-content:space-between; margin-bottom:4px; font:700 10px var(--ui); letter-spacing:.1em; color:var(--gold-hi); }
.cmp-classic .cmx-grp__h > span{ font:700 11px var(--num); letter-spacing:0; }
.cmp-classic .cmx-rows{ background:var(--win-dk); border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cmp-classic .cmx-row{ display:grid; grid-template-columns:minmax(0,1fr) 170px minmax(0,1fr); align-items:center; gap:14px; padding:7px 10px;
  border-bottom:1px solid #353c2f; }
.cmp-classic .cmx-row:nth-child(even){ background:#434C3C; }
.cmp-classic .cmx-row:last-child{ border-bottom:0; }
.cmp-classic .cmx-v{ font:700 15px var(--num); color:var(--tx-3); min-width:0; }
.cmp-classic .cmx-v--a{ text-align:right; }
.cmp-classic .cmx-v--a.is-win{ color:var(--pa); }
.cmp-classic .cmx-v--b.is-win{ color:var(--pb); }
.cmp-classic .cmx-v .cmpt__tier{ font-size:9px; margin-left:5px; padding:0 4px; background:var(--well); vertical-align:2px; }
.cmp-classic .cmx-v .dim{ font-size:11px; font-weight:400; color:var(--tx-3); }
.cmp-classic .cmx-mid{ text-align:center; }
.cmp-classic .cmx-k{ display:block; font:700 10px var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--tx-2); }
.cmp-classic .cmx-chip{ display:inline-block; margin-top:3px; padding:0 6px; font:700 10px/16px var(--num); border:1px solid; background:var(--well);
  max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmp-classic .cmx-chip--a{ color:var(--pa); border-color:var(--pa); }
.cmp-classic .cmx-chip--b{ color:var(--pb); border-color:var(--pb); }
.cmp-classic .cmx-chip--t{ color:var(--tx-3); border-color:var(--tx-3); }

@media (max-width:900px){
  .cmp-classic .cmx-glance{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:640px){
  .cmp-classic .cmx-face{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-areas:"v v" "a b"; gap:10px; padding:10px; }
  .cmp-classic .cmx-verdict{ grid-area:v; }
  .cmp-classic .cmx-pl--a{ grid-area:a; flex-direction:column; align-items:flex-start; text-align:left; }
  .cmp-classic .cmx-pl--b{ grid-area:b; flex-direction:column; align-items:flex-end; text-align:right; }
  .cmp-classic .cmx-av{ width:48px; height:48px; }
  .cmp-classic .cmx-pl__name{ font-size:14px; max-width:100%; }
  .cmp-classic .cmx-row{ grid-template-columns:minmax(0,1fr) 118px minmax(0,1fr); gap:8px; padding:7px 6px; }
  .cmp-classic .cmx-v{ font-size:13px; }
  .cmp-classic .cmx-v .cmpt__tier{ display:none; }
}

/* small-sample flag under a player's name (fewer than 30 demo matches) */
.cmp-classic .cmx-small{ display:inline-block; margin-top:4px; padding:0 6px; font:700 9px/15px var(--ui); letter-spacing:.08em; text-transform:uppercase;
  color:#E8B266; border:1px solid #8A6A44; background:var(--well); }
/* "lower is better" hint under a stat name */
.cmp-classic .cmx-k em{ display:block; font:400 9px var(--ui); font-style:normal; letter-spacing:.02em; text-transform:none; color:var(--tx-3); }
/* Totals: a collapsed group box; the summary is the group header with a disclosure arrow */
.cmp-classic .cmx-grp--extra > summary{ list-style:none; cursor:pointer; align-items:center; padding:4px 8px; margin-bottom:0;
  background:var(--win); border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); }
.cmp-classic .cmx-grp--extra > summary::-webkit-details-marker{ display:none; }
.cmp-classic .cmx-grp--extra > summary .cmx-grp__t::before{ content:"\25B8"; display:inline-block; width:12px; color:var(--gold-hi); }
.cmp-classic .cmx-grp--extra[open] > summary .cmx-grp__t::before{ content:"\25BE"; }
.cmp-classic .cmx-grp--extra > summary em{ font:400 10px var(--ui); font-style:normal; letter-spacing:0; text-transform:none; color:var(--tx-3); margin-left:6px; }
.cmp-classic .cmx-grp--extra > summary:hover{ color:var(--tx-hi); }
.cmp-classic .cmx-grp--extra[open] > .cmx-rows{ margin-top:4px; }
@media (max-width:640px){
  .cmp-classic .cmx-grp--extra > summary em{ display:block; margin:2px 0 0 12px; }
}

/* ---- Player A = you, Player B = a player or the site average ---------------------- */
.cmp-classic .cmp__picker-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:20px; margin-bottom:4px; }
.cmp-classic .cmp__picker-top .cmp__picker-lbl{ margin:0; }
.cmp-classic .cmp__you{ margin-right:auto; padding:0 5px; font:700 9px/14px var(--ui); letter-spacing:.1em; color:#1d2016; background:var(--gold-hi);
  border:1px solid; border-color:#E6DC96 #6E6524 #6E6524 #E6DC96; }
.cmp-classic .cmp__you[hidden]{ display:none; }
.cmp-classic .cmp__btabs{ display:inline-flex; }
.cmp-classic .cmp__btab{ height:20px; padding:0 9px; margin-left:-1px; cursor:pointer; border-radius:0; font:700 10px var(--ui); letter-spacing:.06em; text-transform:uppercase;
  color:var(--tx); background:var(--win); border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); }
.cmp-classic .cmp__btab:hover{ color:var(--gold-hi); }
.cmp-classic .cmp__btab.is-on{ background:var(--sel); color:var(--tx-hi); border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cmp-classic .cmp__btab:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-3px; }
.cmp-classic .cmp__input[hidden]{ display:none; }
.cmp-classic .cmp__avgbox{ display:flex; align-items:center; gap:8px; height:26px; padding:0 8px; background:var(--well); overflow:hidden; white-space:nowrap;
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.cmp-classic .cmp__avgbox[hidden]{ display:none; }
.cmp-classic .cmp__avgbox b{ font:700 12px var(--ui); color:var(--gold-hi); }
.cmp-classic .cmp__avgbox span{ font:11px var(--ui); color:var(--tx-3); overflow:hidden; text-overflow:ellipsis; }
/* the average's card: a gold "AVG" plate where the avatar goes */
.cmp-classic .cmx-av--avg{ display:flex; align-items:center; justify-content:center; font:700 18px var(--num); letter-spacing:.04em; color:#1d2016;
  background:linear-gradient(#DCC95E, #A48E2C); border-color:#E6DC96 #6E6524 #6E6524 #E6DC96; }
.cmp-classic .cmx-pl--avg .cmx-pl__sub{ color:var(--tx-3); }
/* empty state with Player A pre-filled */
.cmp-classic .cmp__avgcta{ margin-top:10px; height:28px; padding:0 16px; cursor:pointer; border-radius:0; font:700 12px var(--ui);
  background:var(--hc-gold); color:#1C2014; border:1px solid; border-color:#E6DC96 #5F5620 #5F5620 #E6DC96; box-shadow:0 0 0 1px var(--edge); }
.cmp-classic .cmp__avgcta:hover{ background:#D2C35C; }
@media (max-width:640px){ .cmp-classic .cmx-av--avg{ font-size:14px; } }