/* Homepage — "Classic Steam client" (approved mockup B, 2026-09-25).
   The 2003-04 Steam desktop client look: olive VGUI windows, 1px bevels, raised
   buttons, sunken fields, property-sheet tabs, Tahoma/Verdana. Square corners
   everywhere; only avatars and tiny status dots are round.
   Loaded ONLY by index.html (instead of home.css, which compare/leaderboard still
   share), and every rule is scoped under body.home-classic so nothing here can
   leak into another page. Sized so header + dossier + top-5 leaderboard + footer
   fit a 1080p browser window without scrolling. No emoji. */

.home-classic{
  --desk:   #333929;   /* page background: the "desktop" the windows sit on */
  --win:    #4C5844;   /* window / panel olive */
  --win-dk: #3E4637;   /* darker panel: fields, lists, title bands */
  --well:   #22271C;   /* deep display well behind the coloured rating */
  --hi:     #8C9284;   /* bevel light edge */
  --lo:     #282E22;   /* bevel dark edge */
  --edge:   #171B13;   /* 1px outline around windows */
  --etch:   #66705B;   /* light half of an etched line */
  --tx:     #D8DED3;   /* body text */
  --tx-hi:  #F2F5EE;   /* headings, values */
  --tx-2:   #B7C0AC;   /* secondary text */
  --tx-3:   #A0AA95;   /* tertiary: separators, ticks */
  --hc-gold:#C4B550;   /* Steam accent yellow */
  --gold-hi:#D6C866;   /* accent as text on olive */
  --sel:    #958831;   /* selected / hover */
  --ok:     #9fdba0;
  --bad:    #e6796a;
  --ui:   Tahoma, Verdana, "Segoe UI", Geneva, sans-serif;
  --num:  Verdana, Tahoma, Geneva, sans-serif;
  --hcmono: "Lucida Console", Consolas, "Courier New", monospace;
  background:var(--desk); color:var(--tx); font:13px/1.45 var(--ui);
}
.home-classic *, .home-classic *::before, .home-classic *::after{ box-sizing:border-box; }
.home-classic a{ color:var(--gold-hi); }
.home-classic .page{ max-width:1192px; padding:10px 16px 8px; }

/* ---- shared VGUI bits ---------------------------------------------------- */
.home-classic .hc-win{ position:relative; background:var(--win);
  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); }
.home-classic .hc-win__title{ display:flex; align-items:center; justify-content:space-between; gap:12px;
  height:26px; padding:0 8px 0 7px; background:var(--win-dk);
  border-bottom:1px solid var(--lo); box-shadow:0 1px 0 var(--etch); }
.home-classic .hc-win__t{ display:flex; align-items:center; gap:7px; font:700 12px var(--ui);
  color:var(--tx-hi); letter-spacing:.04em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.home-classic .hc-win__t .sub{ color:var(--gold-hi); overflow:hidden; text-overflow:ellipsis; }
.home-classic .hc-win__ico{ width:16px; height:16px; display:block; object-fit:contain; flex:none; }
.home-classic .hc-win__ico--av{ object-fit:cover; border:1px solid var(--lo); }
.home-classic .hc-win__tag{ font-size:11px; color:var(--tx-2); letter-spacing:.03em; white-space:nowrap; }
.home-classic .hc-win__tag .dim{ color:var(--gold-hi); }
/* resize grip, bottom-right corner — decoration only */
.home-classic .hc-win__grip{ position:absolute; right:2px; bottom:2px; width:13px; height:13px; pointer-events:none;
  background:repeating-linear-gradient(135deg, transparent 0 3px, var(--hi) 3px 4px, var(--lo) 4px 5px);
  clip-path:polygon(100% 0, 100% 100%, 0 100%); opacity:.9; }

.home-classic .hc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:7px;
  background:var(--win); color:var(--tx-hi); font:700 12px var(--ui); letter-spacing:.02em;
  padding:5px 13px; cursor:pointer; white-space:nowrap; text-decoration:none; border-radius:0;
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi);
  box-shadow:0 0 0 1px var(--edge); }
.home-classic .hc-btn:hover{ color:var(--hc-gold); text-decoration:none; }
.home-classic .hc-btn:active{ border-color:var(--lo) var(--hi) var(--hi) var(--lo); padding:6px 12px 4px 14px; }
.home-classic .hc-btn:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-4px; }

.home-classic .hc-field{ width:100%; background:var(--win-dk); color:var(--tx-hi); font:13px var(--hcmono);
  padding:7px 9px; outline:none; border-radius:0;
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 1px 1px 0 #1d2218; }
.home-classic .hc-field:focus{ background:#434C3B; }

/* etched group box (VGUI "section") */
.home-classic .hc-group{ margin:0; padding:10px 13px 12px; min-width:0;
  border:1px solid var(--lo); box-shadow:inset 1px 1px 0 var(--etch), 1px 1px 0 var(--etch); }
.home-classic .hc-group > legend{ padding:0 6px; margin-left:-2px; font:700 11px var(--ui); letter-spacing:.14em; color:var(--gold-hi); }

/* ---- header (site.css markup, restyled for this page) --------------------- */
.home-classic .shead{ background:#15180F; padding:7px 16px 10px;
  border:1px solid; border-color:#4F5745 #0A0C07 #0A0C07 #4F5745;
  box-shadow:0 0 0 1px var(--edge), 5px 5px 0 rgba(0,0,0,.22); }
.home-classic .shead__bar{ min-height:28px; }
.home-classic .shead__rule{ height:2px; background:none; margin:8px 0 10px;
  border-top:1px solid #c9cdbf; border-bottom:1px solid #000; }
.home-classic .slogo__wm{ font:700 22px/1 var(--num); letter-spacing:-.01em; }
.home-classic .snav{ display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.home-classic .snav a, .home-classic .snav button{ color:var(--hc-gold); font:700 13px var(--ui);
  padding:3px 7px; background:none; border:1px solid transparent; cursor:pointer; }
.home-classic .snav a:hover, .home-classic .snav button:hover{ background:var(--sel); color:#fff; text-decoration:none;
  border-color:#B7A94A #5E5520 #5E5520 #B7A94A; }
.home-classic .snav span{ color:#6E7766; margin:0 2px; }
/* raised header buttons: bell (notif.js) + Steam sign-in / user box (auth.js) */
.home-classic #notif-slot{ min-width:28px; }
.home-classic .notif-btn, .home-classic .auth-signin, .home-classic .auth-user__btn{
  background:#2A3023; border:1px solid; border-color:#6E7766 #0A0C07 #0A0C07 #6E7766;
  box-shadow:0 0 0 1px #000; color:var(--tx); }
.home-classic .notif-btn{ width:28px; height:26px; }
.home-classic .auth-signin{ font:700 12px var(--ui); padding:5px 12px; }
.home-classic .notif-btn:hover, .home-classic .auth-signin:hover, .home-classic .auth-user__btn:hover{
  color:var(--hc-gold); border-color:#6E7766 #0A0C07 #0A0C07 #6E7766; }
.home-classic .notif-btn:active, .home-classic .auth-signin:active, .home-classic .auth-user__btn:active{
  border-color:#0A0C07 #6E7766 #6E7766 #0A0C07; }

/* ---- dossier window -------------------------------------------------------- */
.home-classic .hc-main{ margin:0; padding:0; }
.home-classic .dossierwin{ margin-top:12px; }
.home-classic .hero__body{ display:grid; grid-template-columns:440px minmax(0,1fr); gap:12px;
  padding:12px 12px 14px; align-items:stretch; }
.home-classic .hero__search{ display:flex; flex-direction:column; gap:12px; min-width:0; }
.home-classic .hero__h1{ font:700 27px/1 var(--num); color:var(--tx-hi); letter-spacing:.02em; margin:2px 0 0; }
.home-classic .hero__sub{ font-size:13px; color:var(--tx); line-height:1.45; margin:7px 0 11px; }
.home-classic .hero__sub b{ color:var(--gold-hi); }
.home-classic .hero__label{ font:700 11px var(--ui); color:var(--tx-2); letter-spacing:.08em; margin-bottom:5px; }
.home-classic .hero__form{ display:flex; gap:8px; margin:0; }
.home-classic .hero__field{ position:relative; flex:1 1 auto; min-width:0; }
.home-classic .hero__btn{ flex:none; min-width:104px; font-size:13px; padding:6px 16px;
  background:var(--hc-gold); color:#1C2014; border-color:#E6DC96 #5F5620 #5F5620 #E6DC96;
  box-shadow:0 0 0 1px #0E110A; }
.home-classic .hero__btn:hover{ background:#D2C35C; color:#1C2014; }
.home-classic .hero__btn:active{ border-color:#5F5620 #E6DC96 #E6DC96 #5F5620; background:#B8A948; padding:7px 15px 5px 17px; }
.home-classic .hero__hint{ margin:4px 0 0; font-size:12px; color:var(--bad); }
.home-classic .hero__hint:empty{ display:none; }
.home-classic .hero__try{ font-size:12px; color:var(--tx-2); margin-top:9px; }
.home-classic .hero__try a{ font-weight:700; }
.home-classic .hero__trick{ font-size:12px; color:var(--tx-2); margin-top:3px; line-height:1.45; }
.home-classic .hero__trick .dom{ font-family:var(--hcmono); font-size:11px; color:var(--tx); }
.home-classic .hero__trick s{ color:var(--tx-3); }
.home-classic .hero__trick .arr{ color:var(--tx-3); padding:0 2px; }
.home-classic .hero__trick .rep{ color:var(--gold-hi); }

.home-classic .hero__how{ flex:1 1 auto; }
.home-classic .hfc2{ padding:7px 0 7px 2px; border-top:1px solid var(--lo); box-shadow:inset 0 1px 0 var(--etch); }
.home-classic .hfc2:first-of-type{ border-top:0; box-shadow:none; padding-top:2px; }
.home-classic .hfc2:last-child{ padding-bottom:0; }
.home-classic .hfc2__h{ font:700 11px var(--ui); color:var(--tx-hi); letter-spacing:.08em; margin-bottom:2px; }
.home-classic .hfc2__h .no{ color:var(--gold-hi); margin-right:3px; }
.home-classic .hfc2__b{ font-size:12px; color:var(--tx); line-height:1.45; }
.home-classic .hfc2__b b{ color:var(--gold-hi); }
.home-classic .hfc2__b .mut{ color:var(--tx-3); }

/* ---- report window (home.js renders the whole thing into #dossier) --------- */
.home-classic .hc-report{ box-shadow:0 0 0 1px var(--edge); display:flex; flex-direction:column; min-width:0; }
.home-classic .hc-report__body{ padding:10px 12px 12px; position:relative; flex:1 1 auto; display:flex; flex-direction:column; }

.home-classic .dossier__id{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.home-classic .dossier__avwrap{ flex:none; padding:2px; background:var(--win-dk);
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.home-classic .dossier__av, .home-classic .dossier__mono{ display:block; width:54px; height:54px; object-fit:cover; background:var(--well); }
.home-classic .dossier__mono{ display:flex; align-items:center; justify-content:center; font:700 24px var(--num); color:var(--gold-hi); }
.home-classic .dossier__idmain{ flex:1 1 auto; min-width:0; }
.home-classic .dossier__name{ font:700 20px/1.1 var(--num); color:var(--tx-hi); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-classic .dossier__meta{ font-size:12px; color:var(--tx-2); margin-top:4px; letter-spacing:.02em; }
.home-classic .dossier__meta b{ color:var(--tx-hi); }
.home-classic .dossier__meta .ok{ color:var(--ok); font-weight:700; }
.home-classic .dossier__meta .bad{ color:var(--bad); font-weight:700; }
.home-classic .dossier__meta2{ font-size:12px; color:var(--tx-2); margin-top:1px; }
.home-classic .dossier__meta2 b{ color:var(--tx); }
.home-classic .dossier__meta .sep, .home-classic .dossier__meta2 .sep{ color:var(--tx-3); padding:0 5px; }
.home-classic .dossier__view{ align-self:flex-start; }

/* property-sheet tabs */
.home-classic .dossier__tabs{ display:flex; align-items:flex-end; gap:2px; padding-left:6px; position:relative; z-index:1; margin-bottom:-1px; }
.home-classic .dossier__tab{ height:25px; padding:0 14px; background:var(--win-dk); color:var(--tx-2); cursor:pointer;
  font:700 11px var(--ui); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; border-radius:0;
  border:1px solid; border-bottom:0; border-color:var(--hi) var(--lo) transparent var(--hi); }
.home-classic .dossier__tab:hover{ color:var(--hc-gold); }
.home-classic .dossier__tab .n{ font-family:var(--num); color:var(--tx-3); margin-left:7px; letter-spacing:0; }
.home-classic .dossier__tab.is-on{ height:28px; background:var(--win); color:var(--tx-hi); padding-bottom:2px; }
.home-classic .dossier__tab.is-on .n{ color:var(--gold-hi); }
.home-classic .dossier__tab:focus-visible{ outline:1px dotted var(--tx-hi); outline-offset:-4px; }
.home-classic .dossier__sheet{ padding:10px; background:var(--win);
  border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); }
.home-classic .dossier__pane[hidden]{ display:none; }

/* rating display */
.home-classic .dossier__score{ display:grid; grid-template-columns:190px minmax(0,1fr); gap:0 18px; align-items:center;
  background:var(--well); padding:9px 14px 8px; border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  box-shadow:inset 0 2px 0 var(--band, #8FA0AB); }
.home-classic .dossier__slabel{ font:700 11px var(--ui); color:var(--tx-2); letter-spacing:.1em; }
.home-classic .dossier__slabel b{ color:var(--tx-hi); letter-spacing:.02em; }
.home-classic .dossier__snum{ font-family:var(--num); line-height:1; margin-top:5px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.home-classic .dossier__snum .v{ font-size:44px; font-weight:700; letter-spacing:-.01em; }
.home-classic .dossier__snum .d{ font-size:15px; color:var(--tx-2); margin-left:3px; }
.home-classic .dossier__snum .t{ font-size:14px; margin-left:6px; }
.home-classic .dossier__meter{ min-width:0; }
.home-classic .dossier__mtop{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; min-height:21px; }
.home-classic .dossier__mlabel{ font-size:11px; color:var(--tx-2); letter-spacing:.06em; }
.home-classic .dossier__tier{ font:700 11px var(--ui); letter-spacing:.12em; padding:3px 9px 3px 10px; color:#fff; white-space:nowrap;
  border:1px solid rgba(255,255,255,.35); border-right-color:rgba(0,0,0,.45); border-bottom-color:rgba(0,0,0,.45); }
.home-classic .dossier__tier.is-light{ color:#1a1c14; }
.home-classic .dossier__bar{ position:relative; display:flex; height:16px; padding:1px; background:#11140D;
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.home-classic .dossier__bar > span{ display:block; }
.home-classic .dossier__mark{ position:absolute; top:-5px; bottom:-5px; width:3px; margin-left:-1.5px; background:#fff; box-shadow:0 0 0 1px #000; }
.home-classic .dossier__ticks{ position:relative; height:14px; margin-top:5px; font:11px var(--num); color:var(--tx-2); }
.home-classic .dossier__ticks > span{ position:absolute; transform:translateX(-50%); white-space:nowrap; }
.home-classic .dossier__ticks > span:nth-child(1){ left:0; transform:none; }
.home-classic .dossier__ticks > span:nth-child(2){ left:25%; }
.home-classic .dossier__ticks > span:nth-child(3){ left:50%; }
.home-classic .dossier__ticks > span:nth-child(4){ left:75%; }
.home-classic .dossier__ticks > span:nth-child(5){ left:100%; transform:translateX(-100%); }
.home-classic .dossier__noscore{ font-size:12px; color:var(--tx-2); }

/* badges + reputation: sunken info cells, 2 per row */
.home-classic .dossier__chips{ display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:8px; }
.home-classic .hc-chip{ display:flex; align-items:center; gap:8px; min-height:31px; padding:3px 10px; background:var(--win-dk);
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo);
  font:700 11px var(--ui); letter-spacing:.06em; color:var(--tx); white-space:nowrap; min-width:0; overflow:hidden; }
.home-classic .hc-chip .k{ color:var(--tx-2); }
.home-classic .hc-chip--split{ justify-content:space-between; }
.home-classic .hc-chip .elo{ color:var(--tx-hi); font-family:var(--num); letter-spacing:0; }
.home-classic .dossier__lvl{ width:20px; height:20px; flex:none; display:flex; align-items:center; justify-content:center; color:#1a1c14;
  font:700 12px var(--num); border:1px solid rgba(0,0,0,.45); box-shadow:inset 1px 1px 0 rgba(255,255,255,.35); }
.home-classic .hc-premier{ display:inline-flex; align-items:center; gap:7px; padding:2px 8px; color:#fff;
  border:1px solid rgba(255,255,255,.3); border-right-color:rgba(0,0,0,.45); border-bottom-color:rgba(0,0,0,.45); }
.home-classic .hc-premier.is-light{ color:#1a1c14; }
.home-classic .hc-premier .big{ font:700 13px var(--num); letter-spacing:0; }
.home-classic .hc-premier .tl{ font-size:10px; letter-spacing:.12em; }
.home-classic .hc-chip .cmnd__lbl{ font:700 11px var(--ui); letter-spacing:.06em; color:var(--tx-2); text-transform:uppercase; }
.home-classic .hc-chip .cmnd__row{ display:inline-flex; align-items:center; gap:12px; }
.home-classic .hc-chip .cmnd__it{ display:inline-flex; align-items:center; gap:5px; }
.home-classic .hc-chip .cmnd__it svg{ width:15px; height:15px; display:block; }
.home-classic .hc-chip .cmnd__it b{ font:700 12px var(--num); color:var(--tx-hi); }
.home-classic .dossier__trust{ border-style:solid; }
.home-classic .dossier__trust-n{ font-family:var(--num); font-weight:400; color:var(--tx); letter-spacing:0; }
.home-classic .hc-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; background:currentColor;
  box-shadow:0 0 0 1px rgba(0,0,0,.5); margin-right:7px; vertical-align:1px; }

/* stat grid: 4 x 2 sunken wells */
.home-classic .dossier__stats{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; margin-top:8px; }
.home-classic .dossier__stat{ background:var(--win-dk); padding:5px 10px 6px; min-width:0;
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.home-classic .dossier__stat .k{ font:700 11px var(--ui); color:var(--tx-2); letter-spacing:.08em; }
.home-classic .dossier__stat .v{ font:700 19px/1.15 var(--num); color:var(--tx-hi); text-align:right; font-variant-numeric:tabular-nums;
  margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- idle: dimmed example + stamp + old-Steam "dialog" over it ------------ */
.home-classic .is-example{ position:relative; flex:1 1 auto; }
.home-classic .is-example > .ex{ opacity:.4; filter:saturate(.55); pointer-events:none; user-select:none; }
.home-classic .hc-stamp{ position:absolute; top:4px; right:2px; z-index:2; transform:rotate(-7deg); pointer-events:none;
  font:700 15px var(--num); letter-spacing:.3em; color:var(--hc-gold); padding:5px 6px 5px 12px;
  border:2px solid var(--hc-gold); box-shadow:inset 0 0 0 2px var(--win), inset 0 0 0 3px var(--hc-gold); background:rgba(76,88,68,.9); }
/* the prompt floats over the example like a small Steam dialog, so the idle
   report is exactly the height of a loaded one (no page jump on lookup) */
.home-classic .hc-dialog{ position:absolute; z-index:3; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(400px, calc(100% - 32px)); }
/* over an example, sit on the stat grid so the example's rating stays visible */
.home-classic .hc-dialog--low{ top:auto; bottom:26px; transform:translateX(-50%); }
.home-classic .hc-dialog .hc-win__title{ height:24px; }
.home-classic .hc-dialog__body{ padding:12px 14px 13px; text-align:center; font-size:12px; color:var(--tx); line-height:1.5; }
.home-classic .hc-dialog__body .try{ margin-top:7px; color:var(--tx-2); }
.home-classic .hc-dialog__body .try a{ font-weight:700; }
/* centered states (loading / not found / no example) */
.home-classic .hc-state{ flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; padding:24px 16px; text-align:center; font-size:12px; color:var(--tx); }
.home-classic .hc-state .g{ font:700 11px var(--ui); letter-spacing:.14em; color:var(--gold-hi); }
/* classic Steam progress bar: sunken trough, marching gold blocks */
.home-classic .hc-prog{ width:220px; height:16px; padding:2px; background:#11140D; overflow:hidden;
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.home-classic .hc-prog > i{ display:block; height:100%; width:40%;
  background:repeating-linear-gradient(90deg, var(--hc-gold) 0 9px, transparent 9px 11px);
  animation:hcprog 1.1s linear infinite; }
@keyframes hcprog{ from{ transform:translateX(-100%); } to{ transform:translateX(250%); } }
@media (prefers-reduced-motion: reduce){ .home-classic .hc-prog > i{ animation:none; width:60%; } }

/* ---- leaderboard (server-browser list) ------------------------------------ */
.home-classic .lbwin{ margin-top:12px; }
.home-classic .lbwin .hc-win__title .hc-btn{ padding:1px 10px; font-size:11px; }
.home-classic .lbwin .hc-win__title .hc-btn:active{ padding:2px 9px 0 11px; }
.home-classic .lbwrap{ padding:8px 10px 10px; }
.home-classic .hc-list{ width:100%; border-collapse:collapse; background:var(--win-dk); table-layout:fixed;
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); font-size:12px; }
.home-classic .hc-list th{ height:21px; padding:0 8px; text-align:left; font:700 11px var(--ui); letter-spacing:.08em; color:var(--tx);
  background:var(--win); border:1px solid; border-color:var(--hi) var(--lo) var(--lo) var(--hi); white-space:nowrap; }
.home-classic .hc-list th.is-sort{ color:var(--gold-hi); }
.home-classic .hc-list th .ar{ font-size:9px; margin-left:4px; }
.home-classic .hc-list td{ height:27px; padding:0 8px; color:var(--tx); border-bottom:1px solid #373F31;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-classic .hc-list tbody tr:last-child td{ border-bottom:0; }
.home-classic .hc-list td.n, .home-classic .hc-list th.n{ text-align:right; font-family:var(--num); font-variant-numeric:tabular-nums; }
.home-classic .hc-list td.rk{ font:700 12px var(--num); color:var(--gold-hi); text-align:center; }
.home-classic .hc-list th.rk{ text-align:center; padding:0; }
.home-classic .hc-list .pl{ display:flex; align-items:center; gap:8px; min-width:0; }
.home-classic .hc-list .pl img, .home-classic .hc-list .pl .mono{ width:20px; height:20px; flex:none; object-fit:cover; border:1px solid var(--lo); background:var(--well); }
.home-classic .hc-list .pl a{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:700; color:var(--tx-hi); }
.home-classic .hc-list .cc{ font-family:var(--hcmono); font-size:11px; color:var(--tx-2); }
/* country flag (real image via /api/flag). Edge so pale flags read on olive.
   In the COUNTRY column on wide screens; next to the name once that column is
   hidden (see the 1100px breakpoint). */
.home-classic .hc-flag{ display:inline-block; height:14px; width:auto; vertical-align:-3px; margin-right:7px;
  border:1px solid rgba(255,255,255,.18); box-shadow:0 0 0 1px rgba(0,0,0,.35); }
.home-classic .hc-list .pl .hc-flag{ display:none; margin-right:0; flex:none;
  /* undo the square avatar sizing that .pl img applies */
  width:auto; height:14px; object-fit:contain; background:none; border:1px solid rgba(255,255,255,.18); }
.home-classic .hc-list tbody tr[data-href]{ cursor:pointer; }
.home-classic .hc-list tbody tr[data-href]:hover td{ background:#465040; }
/* podium: ranks 1-3 get a bevelled metal plate on the rank, a metal edge, a soft
   metal tint across the row and the name in the metal's light tone. The row stays
   olive underneath, so it reads as a trophy rather than a solid paint bucket. */
.home-classic .hc-list tbody tr.m-gold  { --m1:#F6DA6A; --m2:#B38B1E; --mt:rgba(226,186,60,.17); --mh:rgba(226,186,60,.26); }
.home-classic .hc-list tbody tr.m-silver{ --m1:#F1F4F7; --m2:#9AA2AA; --mt:rgba(205,212,219,.13); --mh:rgba(205,212,219,.21); }
.home-classic .hc-list tbody tr.m-bronze{ --m1:#F2AD72; --m2:#A05F2A; --mt:rgba(222,140,78,.15); --mh:rgba(222,140,78,.24); }
.home-classic .hc-list tbody tr[class*="m-"] td{ background:var(--mt); }
.home-classic .hc-list tbody tr[class*="m-"]:hover td{ background:var(--mh); }
.home-classic .hc-list tbody tr[class*="m-"] td:first-child{ box-shadow:inset 3px 0 0 var(--m2), inset 4px 0 0 rgba(0,0,0,.25); }
.home-classic .hc-list tbody tr[class*="m-"] .pl a{ color:var(--m1); }
.home-classic .hc-list .rkp{ display:inline-flex; align-items:center; justify-content:center; min-width:26px; height:18px; padding:0 5px;
  font:700 11px/1 var(--num); color:#17160f; text-shadow:0 1px 0 rgba(255,255,255,.4); background:linear-gradient(var(--m1), var(--m2));
  border:1px solid; border-color:rgba(255,255,255,.6) rgba(0,0,0,.5) rgba(0,0,0,.5) rgba(255,255,255,.6); box-shadow:0 0 0 1px rgba(0,0,0,.35); }
/* the looked-up player's row: a white outline (on top of a podium color), or a
   lighter olive fill when they're outside the top 3 */
.home-classic .hc-list tr.is-sel td, .home-classic .hc-list tr.is-sel:hover td{ background:#5E6A52; color:#fff;
  box-shadow:inset 0 1px 0 var(--tx-hi), inset 0 -1px 0 var(--tx-hi); }
.home-classic .hc-list tr.is-sel td:first-child{ box-shadow:inset 1px 0 0 var(--tx-hi), inset 0 1px 0 var(--tx-hi), inset 0 -1px 0 var(--tx-hi); }
.home-classic .hc-list tr.is-sel td:last-child{ box-shadow:inset -1px 0 0 var(--tx-hi), inset 0 1px 0 var(--tx-hi), inset 0 -1px 0 var(--tx-hi); }
.home-classic .hc-list tr.is-sel td.rk, .home-classic .hc-list tr.is-sel .cc, .home-classic .hc-list tr.is-sel .pl a{ color:#fff; }
.home-classic .hc-list tr.is-sel .rkp{ color:#17160f; }
.home-classic .hc-list td.msg{ text-align:center; color:var(--tx-2); }
/* column widths live on the header cells (table-layout:fixed reads the first row),
   so a breakpoint can drop a column just by hiding its cells */
.home-classic .hc-list th.rk{ width:48px; }
.home-classic .hc-list th.c-cc{ width:96px; }
.home-classic .hc-list th.c-lvl{ width:84px; }
.home-classic .hc-list th.c-xp{ width:112px; }
.home-classic .hc-list th.c-ach{ width:136px; }
.home-classic .hc-list th.c-nc{ width:220px; }
.home-classic .hc-nc{ display:flex; align-items:center; justify-content:flex-end; gap:9px; }
.home-classic .hc-nc b{ font:700 12px var(--num); color:var(--tx-hi); min-width:30px; text-align:right; }
.home-classic .hc-nc i{ display:block; width:96px; height:10px; background:#11140D; position:relative; flex:none;
  border:1px solid; border-color:var(--lo) var(--hi) var(--hi) var(--lo); }
.home-classic .hc-nc i s{ position:absolute; left:0; top:0; bottom:0; display:block; }
/* ---- footer ----------------------------------------------------------------- */
.home-classic .sfoot{ margin-top:12px; padding:8px 14px 2px; border-top:1px solid #20251A; box-shadow:inset 0 1px 0 #4A5340; }
.home-classic .sfoot__nav{ margin:2px 0 4px; color:var(--hc-gold); }
.home-classic .sfoot__nav a, .home-classic .sfoot__nav button{ color:var(--hc-gold); font:700 13px var(--ui); }
.home-classic .sfoot__nav span{ color:#6E7766; }
.home-classic .sfoot__copy{ color:var(--tx-2); }

/* ---- short desktop windows (laptops) --------------------------------------- */
/* Full size fits a 1080p browser window (~950px tall). Below 900px of height the
   page tightens a little and the leaderboard shows the top 3, so a 1440x900 /
   1600x900 laptop still sees everything without scrolling. */
@media (max-height:899px) and (min-width:901px){
  .home-classic .page{ padding-top:6px; padding-bottom:4px; }
  .home-classic .hc-report__body{ padding:8px 10px 10px; }
  .home-classic .dossier__score{ padding:7px 14px 6px; }
  .home-classic .dossier__chips, .home-classic .dossier__stats{ margin-top:6px; }
  .home-classic .dossier__tab{ height:23px; }
  .home-classic .dossier__tab.is-on{ height:26px; }
  .home-classic .shead{ padding:5px 16px 7px; }
  .home-classic .shead__rule{ margin:6px 0 7px; }
  .home-classic .slogo__img{ width:36px; height:36px; }
  .home-classic .slogo__wm{ font-size:19px; }
  .home-classic .dossierwin{ margin-top:8px; }
  .home-classic .hero__body{ padding:10px 10px 11px; gap:10px; }
  .home-classic .hero__h1{ font-size:24px; }
  .home-classic .hero__sub{ margin:5px 0 8px; }
  .home-classic .dossier__av, .home-classic .dossier__mono{ width:44px; height:44px; }
  .home-classic .dossier__id{ margin-bottom:8px; }
  .home-classic .dossier__sheet{ padding:8px; }
  .home-classic .dossier__snum .v{ font-size:38px; }
  .home-classic .hc-chip{ min-height:28px; }
  .home-classic .dossier__stat{ padding:4px 10px 5px; }
  .home-classic .dossier__stat .v{ font-size:17px; }
  .home-classic .lbwin{ margin-top:8px; }
  .home-classic .lbwrap{ padding:6px 10px 8px; }
  .home-classic #home-lb-rows tr:nth-child(n+4){ display:none; }
  .home-classic .sfoot{ margin-top:8px; padding-top:6px; }
}

/* ---- smaller screens -------------------------------------------------------- */
@media (max-width:1100px){
  .home-classic .hero__body{ grid-template-columns:380px minmax(0,1fr); }
  .home-classic .hc-list .c-cc, .home-classic .hc-list .c-ach{ display:none; }
  .home-classic .hc-list .pl .hc-flag{ display:inline-block; }
}
@media (max-width:900px){
  .home-classic .hero__body{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:720px){
  .home-classic .slogo__wm{ font-size:17px; }
}
@media (max-width:620px){
  /* Stacked on a phone: an idle example report would just push the leaderboard
     down, so it collapses until there is a real lookup (loading / error / loaded
     still show). */
  .home-classic .hc-report.is-idle{ display:none; }
  .home-classic .hero__body{ padding:10px 8px 12px; }
  .home-classic .dossier__score{ grid-template-columns:minmax(0,1fr); gap:8px; }
  .home-classic .dossier__chips{ grid-template-columns:minmax(0,1fr); }
  .home-classic .dossier__stats{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .home-classic .dossier__id{ flex-wrap:wrap; }
  .home-classic .dossier__tabs{ padding-left:0; }
  .home-classic .dossier__tab{ flex:1 1 0; min-width:0; padding:0 8px; letter-spacing:.04em; overflow:hidden; text-overflow:ellipsis; }
  .home-classic .dossier__tab .n{ margin-left:5px; }
  .home-classic .hc-list .c-xp{ display:none; }
  /* the rating keeps its number but drops the bar, so names get the room */
  .home-classic .hc-list th.c-lvl{ width:46px; }
  .home-classic .hc-list th.c-nc{ width:104px; }
  .home-classic .hc-list th{ padding:0 6px; letter-spacing:.03em; }
  .home-classic .hc-nc i{ display:none; }
  .home-classic .hc-win__tag{ display:none; }
}

/* narrow phones: the rating header shortens to RATING so player names keep their room */
@media (max-width:420px){
  .home-classic .hc-list th.c-nc{ width:66px; font-size:0; letter-spacing:0; }
  .home-classic .hc-list th.c-nc::before{ content:"RATING"; font:700 11px var(--ui); letter-spacing:.03em; }
  .home-classic .hc-list th.c-lvl{ width:42px; font-size:0; }
  .home-classic .hc-list th.c-lvl::before{ content:"LVL"; font:700 11px var(--ui); letter-spacing:.03em; }
}