/* ══════════════════════════════════════════════════════════════════
   AscendLab — site styles
   Not one hardcoded colour, font or radius below. Everything reads a
   token set by applyTheme(), which is what lets the editor restyle the
   whole site without touching this file.
   ══════════════════════════════════════════════════════════════════ */

.site{
  background:var(--bg); color:var(--ink); font-family:var(--fb);
  min-height:100vh; -webkit-font-smoothing:antialiased;
}
.site *,.site *::before,.site *::after{box-sizing:border-box;margin:0;padding:0}
.site .wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.site .mono{font-family:var(--fm);font-variant-numeric:tabular-nums}

.site .blk{padding:calc(var(--pad) * 1.6) 0}
.site h1,.site h2,.site h3,.site h4{
  font-family:var(--fd);font-weight:700;text-transform:var(--hcase);letter-spacing:var(--htrack);
  line-height:1.08;
}
.site h2{font-size:calc(24px * var(--scale));margin-bottom:6px}
.site h3{font-size:calc(19px * var(--scale))}
.site h4{font-size:calc(17px * var(--scale));font-weight:600}
.site .lede{
  font-family:var(--fm);font-size:calc(11.5px * var(--scale));color:var(--dim);
  line-height:1.75;max-width:64ch;margin-bottom:var(--gap);
}

/* ── hero ── */
.site .hero{display:flex;align-items:flex-end;gap:24px;flex-wrap:wrap;
  padding:calc(var(--pad) * 2.2) 0 calc(var(--pad) * 1.4);border-bottom:1px solid var(--line)}
.site .hero.align-centre{flex-direction:column;align-items:center;text-align:center}
.site .hero.align-left{flex-direction:column;align-items:flex-start}
.site .hero-name{font-size:calc(46px * var(--scale));letter-spacing:calc(var(--htrack) - .01em)}
.site .hero-sub{font-family:var(--fm);font-size:calc(11.5px * var(--scale));color:var(--dim);margin-top:7px;letter-spacing:.04em}
.site .hero-rating{margin-left:auto;text-align:right}
.site .hero.align-centre .hero-rating,.site .hero.align-left .hero-rating{margin-left:0;text-align:inherit}
.site .hero-rating b{display:block;font-family:var(--fd);font-weight:700;
  font-size:calc(48px * var(--scale));line-height:.9;color:var(--accent);text-shadow:var(--glow)}
.site .hero-rating span{font-family:var(--fm);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}

/* ── stat strip ── */
.site .strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--gap)}
.site .strip-item{border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);background:var(--panel)}
.site .strip-item b{display:block;font-family:var(--fd);font-weight:700;
  font-size:calc(34px * var(--scale));line-height:1;color:var(--accent)}
.site .strip-item span{display:block;font-family:var(--fb);font-size:calc(13px * var(--scale));margin-top:6px}
.site .strip-item i{display:block;font-family:var(--fm);font-style:normal;font-size:10px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-top:3px}

/* ── benchmark bar: the signature element ── */
.site .bench{padding:calc(var(--pad) * .5) 0}
.site .bench-head{display:flex;align-items:baseline;gap:10px;margin-bottom:8px}
.site .bench-name{font-family:var(--fd);font-weight:600;font-size:calc(16px * var(--scale));
  text-transform:var(--hcase);letter-spacing:var(--htrack)}
.site .bench-med{font-family:var(--fm);font-size:10px;color:var(--dim)}
.site .bench-val{font-family:var(--fm);font-weight:700;font-size:calc(14px * var(--scale));
  color:var(--accent);margin-left:auto}
.site .track{position:relative;height:24px;border-radius:calc(var(--r) * .4);
  background:var(--panel);border:1px solid var(--line)}
.site .band{position:absolute;top:0;bottom:0;
  background:color-mix(in srgb, var(--accent2) 18%, transparent);
  border-left:1px solid color-mix(in srgb, var(--accent2) 45%, transparent);
  border-right:1px solid color-mix(in srgb, var(--accent2) 45%, transparent)}
.site .median{position:absolute;top:0;bottom:0;width:2px;background:var(--accent2)}
.site .you{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--accent);box-shadow:var(--glow)}
.site .you::after{content:attr(data-l);position:absolute;left:50%;transform:translateX(-50%);top:-15px;
  font-family:var(--fm);font-size:9px;letter-spacing:.09em;color:var(--accent);white-space:nowrap}
.site .metric-row{border-bottom:1px solid var(--line)}

/* ── weaknesses ── */
.site .weak-cards{display:grid;gap:var(--gap)}
.site .weak-list{display:block}
.site .weak{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.site .weak-list .weak{border-radius:0;border-left:none;border-right:none;border-top:none;background:none}
.site .weak-top{display:flex;align-items:flex-start;gap:14px;padding:var(--pad);position:relative}
.site .weak::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent)}
.site .weak[data-sev="bad"]::before{background:var(--accent)}
.site .weak[data-sev="mid"]::before{background:color-mix(in srgb, var(--accent) 55%, var(--dim))}
.site .weak[data-sev="good"]::before{background:var(--accent2)}
.site .weak-top{padding-left:calc(var(--pad) + 6px)}
.site .weak-n{font-family:var(--fd);font-weight:700;font-size:calc(28px * var(--scale));
  line-height:1;color:var(--dim);min-width:34px}
.site .weak-why{font-family:var(--fm);font-size:11px;color:var(--dim);line-height:1.65;margin-top:5px;max-width:58ch}
.site .weak-pct{margin-left:auto;text-align:right;flex:none}
.site .weak-pct b{display:block;font-family:var(--fd);font-weight:700;
  font-size:calc(26px * var(--scale));line-height:1;color:var(--accent)}
.site .weak-pct span{font-family:var(--fm);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.site .weak-body{border-top:1px solid var(--line);padding:calc(var(--pad) * .8) var(--pad)}

/* ── drills ── */
.site .drill-grid{display:grid;gap:calc(var(--gap) * .6)}
.site .drill{display:flex;gap:13px;align-items:flex-start;padding:calc(var(--pad) * .7) 0;border-top:1px solid var(--line)}
.site .drill:first-child{border-top:none}
.site .drill p{font-size:calc(13px * var(--scale));color:var(--dim);line-height:1.6;margin-top:4px}
.site .drill-meta{font-family:var(--fm);font-size:10px;color:var(--dim);opacity:.75;margin-top:6px;letter-spacing:.04em}
.site .badge{font-family:var(--fm);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 7px;border-radius:calc(var(--r) * .35);border:1px solid currentColor;flex:none;margin-top:3px;line-height:1}
.site .badge[data-d="workshop"]{color:var(--accent2)}
.site .badge[data-d="server"]{color:var(--accent)}
.site .drill-go{margin-left:auto;flex:none;font-family:var(--fm);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;border:1px solid var(--line);border-radius:calc(var(--r) * .5);
  padding:8px 12px;color:var(--dim)}
/* training map holders are placeholders until servers / workshop loading ship */
.site .drill.soon{opacity:.62}
.site .drill-go.soon-tag{color:var(--accent);white-space:nowrap;
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
  background:color-mix(in srgb,var(--accent) 10%,transparent)}

/* ── table ── */
.site table.demo{width:100%;border-collapse:collapse;margin-top:var(--gap)}
.site .demo th{font-family:var(--fm);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);text-align:right;padding:9px 8px;border-bottom:1px solid var(--line)}
.site .demo td{font-family:var(--fm);font-size:calc(12px * var(--scale));padding:11px 8px;
  border-bottom:1px solid var(--line);text-align:right}
.site .demo th:first-child,.site .demo td:first-child{text-align:left}
.site .mapname{font-family:var(--fd);font-weight:600;font-size:calc(15px * var(--scale));
  text-transform:var(--hcase);letter-spacing:var(--htrack)}
.site .win{color:var(--accent2)}
.site .loss{color:var(--accent)}

/* ── text + cta ── */
.site .text.align-centre{text-align:center}
.site .body-copy{font-size:calc(14px * var(--scale));line-height:1.7;color:var(--dim);max-width:66ch;margin-top:8px}
.site .text.align-centre .body-copy{margin-left:auto;margin-right:auto}
.site .size-large .body-copy{font-size:calc(18px * var(--scale));color:var(--ink)}
.site .cta{display:flex;align-items:center;gap:var(--gap);flex-wrap:wrap;
  background:var(--accent);color:var(--bg);border-radius:var(--r);padding:calc(var(--pad) * 1.3)}
.site .cta.ghost{background:none;border:1px solid var(--accent);color:var(--ink)}
.site .cta p{font-family:var(--fm);font-size:calc(12px * var(--scale));line-height:1.7;margin-top:6px;opacity:.85}
.site .cta-btn{margin-left:auto;background:var(--bg);color:var(--ink);border-radius:calc(var(--r) * .6);
  padding:13px 22px;font-family:var(--fd);font-weight:700;font-size:calc(16px * var(--scale));
  text-transform:var(--hcase);letter-spacing:var(--htrack);text-decoration:none;white-space:nowrap}
.site .cta.ghost .cta-btn{background:var(--accent);color:var(--bg)}

/* ── divider ── */
.site .divider{padding:0;height:var(--h)}
.site .divider.style-line{border-bottom:1px solid var(--line);height:0;margin:var(--h) 0}
.site .divider.style-accent{border-bottom:2px solid var(--accent);height:0;margin:var(--h) 0}
.site .divider.style-space{border:none}

@media(max-width:640px){
  .site .hero-rating{margin-left:0}
  .site .weak-pct{display:none}
  .site .cta-btn{margin-left:0}
}

/* ══════════════════════════════════════════════════════════════════
   App shell — nav rail, sign-in, and the stat/lesson blocks.
   Still all token-driven, so the editor restyles these too.
   ══════════════════════════════════════════════════════════════════ */
.app-root{display:flex;min-height:100vh;background:var(--bg);color:var(--ink);font-family:var(--fb)}
.app-root *{box-sizing:border-box}

/* left rail */
.nav{width:var(--navw,214px);flex:none;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto}
.nav-brand{padding:20px 18px 14px;font-family:var(--fd);font-weight:700;font-size:22px;
  text-transform:var(--hcase);letter-spacing:var(--htrack);color:var(--ink)}
.nav-brand span{color:var(--accent)}
.nav-list{flex:1;padding:6px 10px}
.nav-cap{font-family:var(--fm);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);opacity:.7;padding:16px 8px 7px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:9px 10px;border-radius:calc(var(--r) * .7);color:var(--dim);
  font-family:var(--fb);font-size:13.5px;font-weight:500;margin-bottom:2px;background:none;border:none;cursor:pointer}
.nav-item:hover{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink)}
.nav-item[data-on="1"]{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
.nav-item svg{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-foot{border-top:1px solid var(--line);padding:12px 12px;display:flex;flex-direction:column;gap:8px}
.nav-user{display:flex;flex-direction:column;line-height:1.3}
.nav-user b{font-size:13px;font-weight:600}
.nav-user span{font-family:var(--fm);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.nav-signout,.nav-edit{font-family:var(--fm);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  text-align:left;color:var(--dim);padding:6px 0;text-decoration:none}
.nav-signout:hover,.nav-edit:hover{color:var(--accent)}
.nav-edit{color:var(--accent2)}

.main{flex:1;min-width:0;overflow-y:auto;max-height:100vh}
.main .site{min-height:100vh}
.main .wrap{max-width:1680px;margin:0 auto;padding:0 clamp(24px,3vw,52px) 60px}

/* sign-in */
.signin{flex:1;display:grid;place-items:center;padding:24px}
.signin-card{width:min(360px,92vw);background:var(--panel);border:1px solid var(--line);
  border-radius:calc(var(--r) * 1.4);padding:28px 24px;display:flex;flex-direction:column;gap:10px}
.signin-brand{margin-bottom:12px}
.signin-brand b{display:block;font-family:var(--fd);font-weight:700;font-size:30px;
  text-transform:var(--hcase);letter-spacing:var(--htrack);color:var(--accent);line-height:1}
.signin-brand span{font-family:var(--fm);font-size:11px;color:var(--dim);letter-spacing:.05em}
.signin-card input{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 13px;font-size:14px;color:var(--ink);font-family:var(--fb)}
.signin-card input:focus{outline:none;border-color:var(--accent)}
.signin-go{background:var(--accent);color:var(--bg);border:none;border-radius:var(--r);
  padding:13px;font-family:var(--fd);font-weight:700;font-size:16px;text-transform:var(--hcase);
  letter-spacing:var(--htrack);cursor:pointer;margin-top:4px}
.signin-go:disabled{opacity:.5}
.signin-err{color:var(--accent);font-family:var(--fm);font-size:12px;min-height:15px;text-align:center}
.signin-alt{font-family:var(--fm);font-size:11.5px;color:var(--dim);text-align:center;margin-top:4px}
.signin-alt a{color:var(--accent)}
.signin-legal{font-family:var(--fm);font-size:10.5px;line-height:1.6;color:var(--dim);
  text-align:center;margin-top:16px;max-width:min(360px,92vw)}
.signin-legal a{color:color-mix(in srgb,var(--accent) 85%,var(--ink))}
.settings-only{max-width:820px;margin:0 auto}
.settings-only-title{font-family:var(--fd);font-weight:700;font-size:calc(28px * var(--scale));
  text-transform:uppercase;letter-spacing:.02em;margin:8px 0 18px}

/* ── rank + rating cards ── */
.ranks{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--gap)}
.rankcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);
  padding:var(--pad);display:flex;flex-direction:column;justify-content:center;gap:5px}
.rankcard-lab{font-family:var(--fm);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.rankcard b{font-family:var(--fd);font-weight:700;font-size:calc(38px * var(--scale));line-height:1;color:var(--accent);text-shadow:var(--glow)}
.rankcard-sub{font-family:var(--fm);font-size:11px;color:var(--dim)}
.dialcard{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:var(--pad);
  display:flex;align-items:center;justify-content:center}
.dialcard.big{padding:calc(var(--pad) * 1.4)}

/* the dial itself — SVG ring with an HTML number overlaid */
.dial{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;--catclr:var(--accent)}
.dial .dial-ring{position:relative;display:inline-grid;place-items:center}
.dial .hexcanvas{height:118px;width:calc(118px * 100 / 116)}
.dial.calibrating .hexfg{stroke:var(--line)}
.dial .dial-mid{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:1px;pointer-events:none;z-index:2}
.dial .dial-mid b{font-family:var(--fd);font-weight:700;font-size:calc(30px * var(--scale));line-height:1;color:var(--ink)}
/* label only (direct-child span) is small — NOT the .dial-num inside <b> */
.dial .dial-mid > span{font-family:var(--fd);font-weight:600;font-size:calc(12px * var(--scale));
  text-transform:var(--hcase);letter-spacing:var(--htrack);color:var(--dim)}
.dial-sub{font-family:var(--fm);font-size:9.5px;letter-spacing:.06em;color:var(--dim)}

/* ── category hero ── */
.cathero{display:flex;gap:24px;align-items:center;flex-wrap:wrap;padding:calc(var(--pad)*1.6) 0;
  border-bottom:1px solid var(--line)}
.cathero h1{font-family:var(--fd);font-weight:700;font-size:calc(40px * var(--scale));
  text-transform:var(--hcase);letter-spacing:var(--htrack);line-height:1}
.cat-blurb{font-family:var(--fm);font-size:12px;color:var(--accent);margin-top:8px;letter-spacing:.03em}
.cathero .body-copy{margin-top:10px}
.cathero .dialcard{margin-left:auto}

/* ── lesson ── */
.lesson{border-top:1px solid var(--line)}
.lesson-intro{font-size:calc(15px * var(--scale));line-height:1.65;color:var(--ink);max-width:66ch;margin-top:2px}
.lesson-points{margin:16px 0 0;padding:0;list-style:none;counter-reset:pt}
.lesson-points li{counter-increment:pt;position:relative;padding:9px 0 9px 34px;
  font-size:calc(13.5px * var(--scale));line-height:1.6;color:var(--dim);border-top:1px solid var(--line)}
.lesson-points li:first-child{border-top:none}
.lesson-points li::before{content:counter(pt,decimal-leading-zero);position:absolute;left:0;top:9px;
  font-family:var(--fm);font-size:11px;font-weight:700;color:var(--accent)}
.callout{margin:16px 0 0;border-left:2px solid var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);
  border-radius:0 var(--r) var(--r) 0;padding:var(--pad)}
.callout-lab{font-family:var(--fm);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.callout p{font-size:calc(13.5px * var(--scale));line-height:1.6;color:var(--ink);margin-top:6px}
.cap-sm{font-family:var(--fm);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);margin:18px 0 8px}

@media(max-width:820px){
  .app-root{flex-direction:column}
  .nav{width:auto;height:auto;position:static;flex-direction:row;flex-wrap:wrap;align-items:center;overflow:visible}
  .nav-brand{padding:14px 16px}
  .nav-list{display:flex;flex-wrap:wrap;padding:6px;flex:1 1 100%;order:3}
  .nav-cap{display:none}
  .nav-item{width:auto}
  .nav-foot{border-top:none;border-left:1px solid var(--line);flex-direction:row;align-items:center;margin-left:auto}
  .cathero .dialcard{margin-left:0}
}

/* theme switcher in the nav footer */
.nav-theme{margin-top:4px}
.nav-theme-lab{font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.nav-theme-sel{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line);
  border-radius:calc(var(--r) * .6);padding:7px 8px;font-family:var(--fm);font-size:11px;cursor:pointer}
.nav-theme-sel:focus{outline:none;border-color:var(--accent)}

/* ══════════════════════════════════════════════════════════════════
   Match cards — grid of rich cards with ELO change and category bars
   ══════════════════════════════════════════════════════════════════ */
.matchgrid{display:grid;gap:var(--gap)}
.mcard{border:1px solid var(--line);border-radius:calc(var(--r) * 1.2);background:var(--panel);
  padding:var(--pad);display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.mcard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:var(--accent2);opacity:.5}
.mcard[data-win="1"]::before{background:var(--good,#3ddc84)}
.mcard[data-win="0"]::before{background:var(--bad,#ff4d4d)}
.mcard-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.mcard-id{display:flex;flex-direction:column;gap:2px;min-width:0}
.mcard-map{font-family:var(--fd);font-weight:700;font-size:calc(18px * var(--scale));
  text-transform:var(--hcase);letter-spacing:var(--htrack);line-height:1}
.mcard-date{font-family:var(--fm);font-size:10px;color:var(--dim)}
.mcard-res{display:flex;align-items:center;gap:8px;flex:none}
.mcard-score{font-family:var(--fm);font-weight:700;font-size:calc(14px * var(--scale));color:var(--ink)}
.mcard-badge{font-family:var(--fm);font-size:8.5px;font-weight:700;letter-spacing:.1em;
  padding:3px 7px;border-radius:4px;line-height:1}
.mcard[data-win="1"] .mcard-badge{background:color-mix(in srgb,var(--good,#3ddc84) 20%,transparent);color:var(--good,#3ddc84)}
.mcard[data-win="0"] .mcard-badge{background:color-mix(in srgb,var(--bad,#ff4d4d) 20%,transparent);color:var(--bad,#ff4d4d)}

/* ELO row */
.mcard-elo{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r);
  background:color-mix(in srgb,var(--ink) 4%,transparent);border:1px solid var(--line)}
.mcard-elo-lab{font-family:var(--fm);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.mcard-elo-val{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-left:auto}
.mcard-elo-val b{font-family:var(--fd);font-weight:700;font-size:calc(17px * var(--scale));color:var(--ink);letter-spacing:-.01em}
.mcard-elo-d{font-family:var(--fm);font-weight:700;font-size:11px}
.mcard-elo-d.up{color:var(--good,#3ddc84)}
.mcard-elo-d.down{color:var(--bad,#ff4d4d)}
.mcard-elo-after{font-family:var(--fm);font-size:11px;color:var(--dim)}

/* KDA / ADR / HS / util grid */
.mcard-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 6px}
.mcard-stat{text-align:center;padding:6px 2px;border-radius:calc(var(--r) * .5);
  background:color-mix(in srgb,var(--ink) 3%,transparent)}
.mcard-stat b{display:block;font-family:var(--fd);font-weight:700;font-size:calc(18px * var(--scale));line-height:1.1;color:var(--ink)}
.mcard-stat span{font-family:var(--fm);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* AIM / UTIL / POS mini bars */
.mcard-bars{display:flex;flex-direction:column;gap:6px;margin-top:2px}
.mcard-bar{display:flex;align-items:center;gap:8px}
.mcard-bar-lab{font-family:var(--fm);font-size:8.5px;letter-spacing:.1em;color:var(--dim);width:26px;flex:none}
.mcard-bar-track{flex:1;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.mcard-bar-fill{height:100%;border-radius:3px}
.mcard-bar-fill.cat-aim{background:var(--accent)}
.mcard-bar-fill.cat-utility{background:var(--accent2)}
.mcard-bar-fill.cat-position{background:var(--good,#3ddc84)}

/* ── match source badge — FACEIT vs matchmaking, on match lists/cards ── */
.src-badge{display:inline-block;font-family:var(--fm);font-size:8px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;line-height:1.5;padding:1px 6px;border-radius:4px;
  vertical-align:middle;white-space:nowrap}
.src-badge.src-faceit{background:color-mix(in srgb,#ff5500 22%,transparent);color:#ff8a4c;
  border:1px solid color-mix(in srgb,#ff5500 45%,transparent)}
.src-badge.src-mm{background:color-mix(in srgb,var(--accent2) 16%,transparent);color:var(--accent2);
  border:1px solid color-mix(in srgb,var(--accent2) 38%,transparent)}
/* demo table: keep the new source column + the map column left-aligned */
.site .demo th.src-col,.site .demo td.src-cell{width:1%;white-space:nowrap;padding-right:6px}
.site .demo th.src-col,.site .demo td.src-cell,.site .demo th.maphead,.site .demo td.mapname{text-align:left}

@media(max-width:820px){ .matchgrid{grid-template-columns:1fr !important} }

/* ══════════════════════════════════════════════════════════════════
   Rank hero — the pyramid: rank on top, lead dial, then the rest below
   ══════════════════════════════════════════════════════════════════ */
.rankhero{display:flex;flex-direction:column;align-items:center;gap:calc(var(--gap) * 1.4);
  padding:calc(var(--pad) * 2) 0 calc(var(--pad) * 1.5)}
.rankhero-rank{display:flex;flex-direction:column;align-items:center;gap:6px}
.rankhero-lab{font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);border:1px solid var(--line);border-radius:99px;padding:6px 14px}
.rankhero-rank b{font-family:var(--fd);font-weight:700;font-size:calc(52px * var(--scale));line-height:.9;
  color:var(--accent);letter-spacing:-.01em;text-shadow:var(--glow)}
.rankhero-lead{display:flex;justify-content:center}
.rankhero-rest{display:flex;justify-content:center;gap:calc(var(--gap) * 3);flex-wrap:wrap}
/* wide rank trend line — bordered card between the rank number and the categories */
.rankchart{width:100%;max-width:920px;margin:6px auto 2px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 3%,var(--panel)),var(--panel));padding:12px 16px}
.rankchart-svg{display:block;width:100%;height:auto}
.rankchart-grid{stroke:color-mix(in srgb,var(--ink) 9%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.rankchart-ylab{font-family:var(--fm);font-size:11px;fill:var(--dim);opacity:.85}
.rankchart-line{fill:none;stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 55%,transparent))}
.rankchart-end{stroke:var(--panel);stroke-width:2}
.rankchart-end-halo{opacity:.22}

/* category trend charts — replace the hexagons; one identity with the rank +
   per-metric charts. Three equal-width cards in a row. */
.rankhero-trends{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);width:100%;max-width:920px;margin:0 auto}
.cattrend{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 3%,var(--panel)),var(--panel));
  padding:14px 14px 6px;display:flex;flex-direction:column;gap:8px}
.cattrend-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.cattrend-name{font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.cattrend-val{font-family:var(--fd);font-weight:700;font-size:calc(24px * var(--scale));line-height:1;color:var(--ink)}
.cattrend.cat-aim .cattrend-name{color:var(--accent)}
.cattrend.cat-utility .cattrend-name{color:var(--accent2)}
.cattrend.cat-position .cattrend-name{color:var(--good,#3ddc84)}
.cattrend-chart{width:100%}
.cattrend-svg{display:block;width:100%;height:auto}
.cattrend-grid{stroke:color-mix(in srgb,var(--ink) 8%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.cattrend-grid.mid{stroke:color-mix(in srgb,var(--dim) 55%,transparent);stroke-dasharray:3 3}
.cattrend-ylab{font-family:var(--fm);font-size:12px;fill:var(--dim);opacity:.82}
.cattrend-ref{stroke:color-mix(in srgb,var(--dim) 60%,transparent);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.cattrend-line{fill:none;stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.cattrend-end{stroke:var(--panel);stroke-width:2}
.cattrend-end-halo{opacity:.2}
.cattrend-empty{height:112px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--fm);font-size:9px;letter-spacing:.06em;color:var(--dim);opacity:.7;padding:0 10px}
@media(max-width:720px){ .rankhero-trends{grid-template-columns:1fr} .cattrend-svg{height:120px} }

/* calibration hero — first-run / sub-baseline focal point */
.rankhero .calib{display:flex;align-items:center;gap:24px;flex-wrap:wrap;justify-content:center;
  width:100%;max-width:640px;padding:20px 22px;border:1px solid var(--line);
  border-radius:calc(var(--r) * 1.5);background:color-mix(in srgb,var(--accent) 5%,var(--panel))}
.calib-ring{position:relative;width:128px;height:128px;flex:none}
.calib-svg{width:128px;height:128px;transform:rotate(-90deg);display:block}
.calib-bg{fill:none;stroke:var(--line);stroke-width:8}
.calib-fg{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:round;
  transition:stroke-dashoffset 1s cubic-bezier(.2,.8,.3,1);filter:drop-shadow(0 0 6px color-mix(in srgb,var(--accent) 55%,transparent))}
.calib-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.calib-mid b{font-family:var(--fd);font-weight:700;font-size:calc(40px * var(--scale));line-height:1;color:var(--ink);display:flex;align-items:baseline}
.calib-mid b i,.calib-mid b .calib-num{font-style:normal;font-size:1em}
.calib-mid b i{color:var(--dim);font-size:.6em}
/* only the LABEL (direct-child span) is small — NOT the .calib-num inside <b> */
.calib-mid > span{font-family:var(--fm);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.calib-txt{flex:1;min-width:240px}
.calib-h{font-family:var(--fd);font-weight:700;font-size:calc(19px * var(--scale));text-transform:var(--hcase);
  letter-spacing:var(--htrack);color:var(--ink);line-height:1.15}
.calib-sub{font-family:var(--fb);font-size:12.5px;color:var(--dim);line-height:1.55;margin:7px 0 11px}
.calib-unlocks{display:flex;flex-wrap:wrap;gap:6px}
.calib-chip{font-family:var(--fm);font-size:9.5px;letter-spacing:.05em;color:var(--dim);
  border:1px solid var(--line);border-radius:100px;padding:4px 11px;background:var(--bg)}

/* live update toast */
/* Toast lives on <body>, OUTSIDE .app-root, so the theme vars (set on .app-root)
   don't resolve here — only --accent is mirrored to :root. Use literal fallbacks
   so the text/background are always legible regardless of where vars live. */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--panel,#161922);border:1px solid var(--accent,#ff6a2b);color:var(--ink,#eef1f7);
  font-family:var(--fm);font-size:12.5px;letter-spacing:.02em;line-height:1.5;text-align:center;
  padding:12px 20px;border-radius:16px;max-width:min(92vw,460px);
  box-shadow:0 10px 34px rgba(0,0,0,.55);opacity:0;pointer-events:none;z-index:9999;
  transition:opacity .3s,transform .3s}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}

/* in-page confirm dialog (replaces browser confirm()/prompt()) */
.modal-overlay{position:fixed;inset:0;background:rgba(6,8,12,.66);display:grid;place-items:center;z-index:10000;
  opacity:0;transition:opacity .18s;padding:20px}
.modal-overlay.show{opacity:1}
.modal-card{background:var(--panel,#161922);border:1px solid var(--line,#20242e);border-radius:14px;
  max-width:400px;width:100%;padding:22px 22px 18px;box-shadow:0 20px 60px rgba(0,0,0,.6);
  transform:translateY(10px) scale(.98);transition:transform .18s}
.modal-overlay.show .modal-card{transform:none}
.modal-title{font-family:var(--fd);font-weight:700;font-size:calc(17px * var(--scale));color:var(--fg,#eef1f7);
  text-transform:var(--hcase);letter-spacing:var(--htrack);margin-bottom:8px}
.modal-msg{font-family:var(--fb);font-size:13px;line-height:1.6;color:var(--dim,#9aa4b5);margin-bottom:18px}
.modal-msg b{color:var(--fg,#eef1f7)}
.modal-actions{display:flex;gap:10px;justify-content:flex-end}
.modal-btn{padding:10px 18px;border-radius:var(--r);font-family:var(--fd);font-weight:700;
  text-transform:var(--hcase);letter-spacing:var(--htrack);font-size:calc(12px * var(--scale));cursor:pointer;
  background:none;border:1px solid var(--line,#20242e);color:var(--fg,#eef1f7);transition:all .15s}
.modal-btn:hover{border-color:var(--dim,#6a7688)}
.modal-btn.primary{background:var(--accent,#ff6a2b);color:#000;border-color:var(--accent,#ff6a2b)}
.modal-btn.primary:hover{opacity:.88}

/* ── motion: blocks fade+rise on render, cards lift on hover ── */
@keyframes blkIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.site .blk{animation:blkIn .5s cubic-bezier(.2,.8,.3,1) both}
.site .blk:nth-child(2){animation-delay:.05s}
.site .blk:nth-child(3){animation-delay:.1s}
.site .blk:nth-child(4){animation-delay:.15s}
.site .blk:nth-child(5){animation-delay:.2s}
.site .blk:nth-child(n+6){animation-delay:.24s}
.mcard{transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .5s ease}
.mcard.mcard-new{opacity:0}   /* live-inserted card starts invisible, then fades in seamlessly */

/* ── VERDICT analytics: opinionated summary, scannable rows, badges, slim bars ── */
.site .verdict-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;margin:4px 0 22px}
.site .vsum-item{border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r);background:var(--panel);padding:12px 15px}
.site .vsum-lab{font-family:var(--fm);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.site .vsum-row{display:flex;align-items:center;gap:9px;margin-top:7px;flex-wrap:wrap}
.site .vsum-metric{font-family:var(--fd);font-weight:700;font-size:calc(17px * var(--scale));color:var(--ink);letter-spacing:.01em}
.site .vsum-pct{font-family:var(--fm);font-size:11px;color:var(--dim);margin-left:auto;font-variant-numeric:tabular-nums}

.site .verdict-badge{font-family:var(--fm);font-weight:700;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 8px;border-radius:999px;border:1px solid currentColor;line-height:1.5;white-space:nowrap;flex:none}

.site .vrow{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);margin-bottom:8px;overflow:hidden;transition:border-color .15s}
.site .vrow.open{border-color:color-mix(in srgb,var(--ink) 16%,var(--line))}
.site .vrow-head{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;cursor:pointer;padding:13px 16px 10px;text-align:left;color:var(--ink);font:inherit}
.site .vrow-head:hover{background:color-mix(in srgb,var(--ink) 3%,transparent)}
.site .vrow-name{font-family:var(--fd);font-weight:600;font-size:calc(15px * var(--scale));text-transform:uppercase;letter-spacing:.02em}
.site .vrow-right{display:flex;align-items:center;gap:11px;margin-left:auto}
.site .vrow-val{font-family:var(--fm);font-weight:700;font-size:13px;color:var(--ink);font-variant-numeric:tabular-nums}
.site .vrow-cal{font-family:var(--fm);font-size:10px;color:var(--dim);letter-spacing:.08em;text-transform:uppercase}
.site .vrow-caret{font-size:13px;color:var(--dim);transition:transform .2s;line-height:1}
.site .vrow.open .vrow-caret{transform:rotate(180deg)}
.site .vrow-bar{padding:0 16px 14px}
.site .vrow-detail{padding:2px 14px 14px}

.site .slim-bar{position:relative;height:8px;border-radius:5px;background:color-mix(in srgb,var(--ink) 5%,transparent);border:1px solid var(--line)}
.site .slim-band{position:absolute;top:0;bottom:0;background:color-mix(in srgb,var(--ink) 9%,transparent);border-radius:5px}
.site .slim-med{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--dim);border-radius:1px}
.site .slim-you{position:absolute;top:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%);border:2px solid var(--bg)}
.mcard:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(0,0,0,.38)}
@media(prefers-reduced-motion:reduce){ .site .blk{animation:none} .mcard{transition:none} }

/* ── rating trend chart (Aim / Utility / Position over time) ── */
.trend-legend{display:flex;gap:16px;margin:2px 0 10px}
.trend-leg{display:flex;align-items:center;gap:6px;font-family:var(--fm);font-size:10px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.trend-leg i{width:13px;height:3px;border-radius:2px;display:inline-block}
.trend-leg.cat-aim i{background:var(--accent)}
.trend-leg.cat-utility i{background:var(--accent2)}
.trend-leg.cat-position i{background:var(--good,#3ddc84)}
.trend-chart{position:relative;width:100%}
.trend-svg{width:100%;height:auto;display:block;overflow:visible}
.trend-grid{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.trend-ylab,.trend-xlab{fill:var(--dim);font-family:var(--fm);font-size:10px}
.trend-line{fill:none;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.trend-line.cat-aim{stroke:var(--accent)}
.trend-line.cat-utility{stroke:var(--accent2)}
.trend-line.cat-position{stroke:var(--good,#3ddc84)}
.trend-cross{stroke:var(--dim);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.trend-dot{stroke:var(--panel);stroke-width:2}
.trend-dot.cat-aim{fill:var(--accent)}
.trend-dot.cat-utility{fill:var(--accent2)}
.trend-dot.cat-position{fill:var(--good,#3ddc84)}
.trend-hit{cursor:crosshair}
.trend-tip{position:absolute;pointer-events:none;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:8px 10px;min-width:112px;box-shadow:0 8px 24px rgba(0,0,0,.42);
  transition:opacity .12s;z-index:5}
.trend-tip-h{font-family:var(--fm);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);margin-bottom:5px}
.trend-tip-row{display:flex;align-items:center;gap:6px;font-family:var(--fm);font-size:11px;margin:2px 0}
.trend-tip-row i{width:8px;height:8px;border-radius:2px;flex:none}
.trend-tip-row.cat-aim i{background:var(--accent)}
.trend-tip-row.cat-utility i{background:var(--accent2)}
.trend-tip-row.cat-position i{background:var(--good,#3ddc84)}
.trend-tip-row span{color:var(--dim);flex:1}
.trend-tip-row b{color:var(--ink);font-family:var(--fd)}
.trend-empty{padding:28px;text-align:center;color:var(--dim);font-family:var(--fm);font-size:12.5px;
  border:1px dashed var(--line);border-radius:var(--r)}
/* ── per-metric time-series card (chart of the stat over your matches) ── */
.site .metric-row{border-bottom:none;margin-bottom:var(--gap)}
/* category switcher on Aim/Utility/Position pages (back to Train + direct tabs) */
.catnav{display:flex;align-items:center;gap:14px;margin-bottom:22px;flex-wrap:wrap}
.catnav-back{background:none;border:1px solid var(--line);color:var(--dim);font-family:var(--fm);font-size:11px;
  letter-spacing:.06em;text-transform:uppercase;padding:8px 13px;border-radius:8px;cursor:pointer;transition:color .15s,border-color .15s}
.catnav-back:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.catnav-tabs{display:flex;gap:6px;flex-wrap:wrap}
.catnav-tab{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;
  padding:8px 15px;border-radius:8px;border:1px solid var(--line);color:var(--dim);text-decoration:none;cursor:pointer;
  transition:color .15s,border-color .15s,background .15s}
.catnav-tab:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.catnav-tab.active{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,var(--panel)),var(--panel))}
.mstat{display:grid;grid-template-columns:1.7fr 1fr;gap:var(--gap);align-items:stretch;
  border:1px solid var(--line);border-radius:calc(var(--r) * 1.1);background:var(--panel);padding:calc(var(--pad) * .9)}
.mstat-chart{position:relative;min-width:0;border-radius:calc(var(--r) * .7);padding:8px 10px 6px;
  background:linear-gradient(180deg, color-mix(in srgb,var(--ink) 5%,var(--panel)) 0%, color-mix(in srgb,#000 26%,var(--panel)) 100%);
  border:1px solid color-mix(in srgb,var(--ink) 6%,var(--line));box-shadow:inset 0 1px 0 color-mix(in srgb,var(--ink) 6%,transparent)}
.mstat-svg{width:100%;height:auto;display:block;overflow:visible}
.mstat-empty{display:grid;place-items:center;height:180px;text-align:center;color:var(--dim);
  font-family:var(--fm);font-size:12px;border:1px dashed var(--line);border-radius:var(--r);padding:20px}
.mstat-grid{stroke:color-mix(in srgb,var(--line) 48%,transparent);stroke-width:1;stroke-dasharray:2 5;vector-effect:non-scaling-stroke}
.mstat-ylab{fill:var(--dim);font-family:var(--fm);font-size:10px}
.mstat-fill.good{fill:color-mix(in srgb,var(--good,#3ddc84) 24%,transparent)}
.mstat-fill.bad{fill:color-mix(in srgb,var(--bad,#ff5d5d) 22%,transparent)}
.mstat-ref{stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.mstat-ref.good{stroke:color-mix(in srgb,var(--good,#3ddc84) 38%,transparent)}
.mstat-ref.bad{stroke:color-mix(in srgb,var(--bad,#ff5d5d) 34%,transparent)}
.mstat-ref.med{stroke:color-mix(in srgb,var(--dim) 80%,transparent)}
.mstat-line-glow{fill:none;stroke:var(--accent);stroke-width:7;opacity:.16;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.mstat-line{fill:none;stroke:var(--accent);stroke-width:2.4;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.mstat-end{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.mstat-end-halo{fill:var(--accent);opacity:.2}
.mstat-cross{stroke:var(--dim);stroke-width:1;stroke-dasharray:3 3;vector-effect:non-scaling-stroke}
.mstat-dot{fill:var(--accent);stroke:var(--panel);stroke-width:2}
.mstat-hit{cursor:crosshair}
.mstat-tip{position:absolute;top:6px;pointer-events:none;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--r);padding:5px 9px;transform:translateX(-50%);white-space:nowrap;transition:opacity .1s;z-index:4}
.mstat-tip b{font-family:var(--fd);font-weight:700;font-size:13px;color:var(--ink);display:block}
.mstat-tip span{font-family:var(--fm);font-size:9px;color:var(--dim)}
.mstat-info{display:flex;flex-direction:column;gap:10px;padding:4px 2px}
.mstat-name{font-family:var(--fm);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.mstat-word{font-family:var(--fd);font-weight:700;font-size:calc(30px * var(--scale));line-height:1}
.mstat-word.tone-good{color:var(--good,#3ddc84)}
.mstat-word.tone-bad{color:var(--bad,#ff5d5d)}
.mstat-word.tone-mid{color:var(--dim)}
/* "vs rank" context pill — how far the stat sits from a typical player at your rank */
.mstat-vsrank{display:inline-flex;align-items:baseline;gap:7px;align-self:flex-start;
  padding:5px 11px;border-radius:999px;border:1px solid var(--line);background:var(--panel)}
.mstat-vsrank b{font-family:var(--fd);font-weight:700;font-size:calc(15px * var(--scale));line-height:1;letter-spacing:.01em}
.mstat-vsrank span{font-family:var(--fm);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.mstat-vsrank.tone-good{border-color:color-mix(in srgb,var(--good,#3ddc84) 45%,transparent);background:color-mix(in srgb,var(--good,#3ddc84) 11%,var(--panel))}
.mstat-vsrank.tone-good b{color:var(--good,#3ddc84)}
.mstat-vsrank.tone-bad{border-color:color-mix(in srgb,var(--bad,#ff5d5d) 42%,transparent);background:color-mix(in srgb,var(--bad,#ff5d5d) 11%,var(--panel))}
.mstat-vsrank.tone-bad b{color:var(--bad,#ff5d5d)}
.mstat-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.mstat-cell b{display:block;font-family:var(--fd);font-weight:700;font-size:calc(17px * var(--scale));color:var(--ink);line-height:1.1}
.mstat-cell span{font-family:var(--fm);font-size:8.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.mstat-blurb{font-family:var(--fb);font-size:11.5px;color:var(--dim);line-height:1.5;margin-top:auto}
/* "where you rank" distribution bar in the metric card's info panel */
.mstat-dist{display:flex;flex-direction:column;gap:7px;margin-top:2px}
.mstat-dist-lab{font-family:var(--fm);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.mstat-dist-track{position:relative;height:8px;border-radius:5px;background:color-mix(in srgb,var(--ink) 6%,var(--panel));border:1px solid color-mix(in srgb,var(--ink) 8%,var(--line))}
.mstat-dist-band{position:absolute;top:-1px;bottom:-1px;background:color-mix(in srgb,var(--ink) 9%,transparent);border-radius:5px}
.mstat-dist-med{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--dim);transform:translateX(-1px);border-radius:1px;opacity:.85}
.mstat-dist-you{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;transform:translate(-50%,-50%);
  background:var(--dim);color:var(--dim);box-shadow:0 0 0 3px var(--panel),0 0 12px currentColor}
.mstat-dist-you.tone-good{background:var(--good,#3ddc84);color:var(--good,#3ddc84)}
.mstat-dist-you.tone-bad{background:var(--bad,#ff5d5d);color:var(--bad,#ff5d5d)}
.mstat-dist-you.tone-mid{background:var(--accent);color:var(--accent)}
.mstat-dist-cap{display:flex;justify-content:space-between;font-family:var(--fm);font-size:8.5px;letter-spacing:.05em;color:color-mix(in srgb,var(--dim) 72%,transparent)}
.mstat-dist-cap .mid{color:var(--dim)}
.mstat-list{display:flex;flex-direction:column;gap:var(--gap)}
@media(max-width:720px){ .mstat{grid-template-columns:1fr} }

/* ── category overview: shape radar, with the spray plots beside it on Aim ── */
/* align to the bottom so the radar card (no heading above it) keeps its natural
   height yet its bottom lines up with the spray cards' bottoms. */
.cat-overview{display:grid;gap:26px;align-items:end;margin:4px 0 24px}
.cat-overview.has-spray{grid-template-columns:minmax(240px,300px) 1fr}
.cat-overview.solo{grid-template-columns:minmax(240px,340px);justify-content:center}
.cat-radar-card{display:flex;flex-direction:column;gap:10px;padding:16px;border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 3%,var(--panel)),var(--panel))}
.cat-radar{position:relative;width:100%;max-width:300px;margin:0 auto;aspect-ratio:1/1}
.cat-radar-svg{display:block;width:100%;height:100%;overflow:visible}
.radar-ring{fill:none;stroke:color-mix(in srgb,var(--ink) 10%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.radar-ring.med{stroke:color-mix(in srgb,var(--dim) 62%,transparent);stroke-dasharray:3 3}
.radar-spoke{stroke:color-mix(in srgb,var(--ink) 8%,transparent);stroke-width:1;vector-effect:non-scaling-stroke}
.radar-fill{stroke-width:2;fill-opacity:1;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.radar-dot{stroke:var(--panel);stroke-width:1.5}
.radar-lab{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:1px;
  line-height:1.05;pointer-events:none;max-width:66px}
.radar-lab.l{transform:translate(-100%,-50%);text-align:right;align-items:flex-end}
.radar-lab.r{transform:translate(0,-50%);text-align:left;align-items:flex-start}
.radar-lab.c{transform:translate(-50%,-50%);text-align:center;align-items:center;max-width:82px}
.radar-lab-n{font-family:var(--fm);font-size:7.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.radar-lab-p{font-family:var(--fd);font-weight:700;font-size:calc(15px * var(--scale))}
.cat-radar-cap{font-family:var(--fm);font-size:8.5px;letter-spacing:.05em;line-height:1.5;color:color-mix(in srgb,var(--dim) 80%,transparent);text-align:center}
/* radar rendered AS a spray-row peer card: same size (via .recoil-grid>.recoil-card),
   radar grows to the card width and centres in the stretched height */
.recoil-card.cat-radar-card{padding:14px}
.recoil-card.cat-radar-card .cat-radar{margin:auto;max-width:none}
/* the spray section sits in the overview's right column now — drop its old top divider */
.cat-overview .recoil-sec{margin:0;padding-top:0;border-top:none}
@media(max-width:820px){ .cat-overview.has-spray,.cat-overview.solo{grid-template-columns:1fr;gap:20px;justify-content:stretch} }

/* ── recoil / spray-path plots (Aim page) ── */
.recoil-sec{margin:26px 0 4px;padding-top:22px;border-top:1px solid var(--line)}
/* user-view placeholder where the per-weapon spray cards will go */
.recoil-soon{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:30px 26px;border-radius:var(--r);
  border:1px dashed color-mix(in srgb,var(--accent) 32%,var(--line));
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,var(--panel)),var(--panel))}
.recoil-soon-eyebrow{font-family:var(--fm);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.recoil-soon-title{font-family:var(--fd);font-weight:700;font-size:calc(24px * var(--scale));letter-spacing:.02em;color:var(--accent)}
.recoil-soon-sub{font-family:var(--fb);font-size:12px;color:var(--dim);line-height:1.5;max-width:44ch;margin:0}
/* admin-only floating "View as user" preview toggle */
.adminview-toggle{position:fixed;right:16px;bottom:16px;z-index:140;display:flex;align-items:center;gap:4px;
  padding:5px 6px 5px 11px;border-radius:999px;font-family:var(--fm);
  background:color-mix(in srgb,var(--ink) 7%,var(--panel));border:1px solid var(--line);
  box-shadow:0 8px 26px rgba(0,0,0,.38);backdrop-filter:blur(4px)}
.adminview-toggle .avt-title{font-size:8px;letter-spacing:.16em;color:var(--dim);padding-right:4px}
.adminview-toggle .avt-seg{font-family:var(--fm);font-size:10px;letter-spacing:.03em;cursor:pointer;
  border:0;padding:5px 11px;border-radius:999px;background:transparent;color:var(--dim);transition:background .15s,color .15s}
.adminview-toggle .avt-seg:not(.is-active):hover{color:var(--ink)}
.adminview-toggle .avt-seg.is-active{background:var(--accent);color:#0b0e13;font-weight:600}
@media(max-width:820px){ .adminview-toggle{right:10px;bottom:10px} }
.recoil-head{margin-bottom:16px;position:relative}
/* ← / → pager, top-right of the section header */
.recoil-nav{position:absolute;top:0;right:0;display:flex;gap:8px}
.recoil-arrow{width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:999px;
  border:1px solid var(--line);background:color-mix(in srgb,var(--ink) 4%,var(--panel));color:var(--ink);cursor:pointer;
  transition:border-color .15s,color .15s,background .15s,opacity .15s}
.recoil-arrow:hover{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.recoil-arrow:active{transform:translateY(1px)}
.recoil-arrow.is-off{opacity:.32}
.recoil-title{font-family:var(--fd);font-weight:700;font-size:calc(20px * var(--scale));margin:0}
.recoil-sub{font-family:var(--fb);font-size:12px;color:var(--dim);line-height:1.5;margin:6px 0 0;max-width:60ch}
/* one horizontal line; scrolls sideways once there are more than ~4 guns */
.recoil-grid{display:flex;flex-wrap:nowrap;gap:14px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;padding-bottom:8px;scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--ink) 22%,var(--panel)) transparent}
.recoil-grid > .recoil-card{flex:0 0 calc((100% - 42px)/4);min-width:168px;scroll-snap-align:start}
.recoil-grid::-webkit-scrollbar{height:8px}
.recoil-grid::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--ink) 22%,var(--panel));border-radius:99px}
.recoil-grid::-webkit-scrollbar-track{background:transparent}
/* gated (non-subscriber) gun: the ideal pull still shows; your spray is locked */
.recoil-card.locked{border-style:dashed;border-color:color-mix(in srgb,var(--accent) 22%,var(--line))}
.recoil-card.locked .recoil-plot{opacity:.9}
.recoil-lockchip{font-family:var(--fm);font-size:7.5px;letter-spacing:.1em;padding:3px 7px;border-radius:999px;white-space:nowrap;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.recoil-foot.locked-foot{align-items:center;justify-content:center}
.recoil-subscribe{font-family:var(--fm);font-size:9px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  border-radius:999px;padding:7px 12px;width:100%}
.recoil-subscribe:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.recoil-subhint{font-family:var(--fm);font-size:9px;letter-spacing:.05em;color:color-mix(in srgb,var(--accent) 80%,var(--dim));margin:8px 0 0}
.recoil-card{border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 3%,var(--panel)),var(--panel));padding:14px;display:flex;flex-direction:column;gap:10px}
.recoil-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:20px}
.recoil-wname{font-family:var(--fd);font-weight:700;font-size:calc(15px * var(--scale));letter-spacing:.01em}
.recoil-tag{font-family:var(--fm);font-size:7.5px;letter-spacing:.11em;text-transform:uppercase;padding:3px 7px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.recoil-tag.leak{color:var(--bad,#ff5d5d);border-color:color-mix(in srgb,var(--bad,#ff5d5d) 45%,transparent);background:color-mix(in srgb,var(--bad,#ff5d5d) 12%,transparent)}
.recoil-tag.edge{color:var(--good,#3ddc84);border-color:color-mix(in srgb,var(--good,#3ddc84) 45%,transparent);background:color-mix(in srgb,var(--good,#3ddc84) 12%,transparent)}
.recoil-plot{position:relative;background:color-mix(in srgb,var(--ink) 4%,var(--bg));border:1px solid color-mix(in srgb,var(--ink) 7%,var(--line));border-radius:8px;overflow:hidden}
.recoil-svg{display:block;width:100%;height:auto}
/* admin-uploaded reference image behind the player's path */
.recoil-plot.has-img .recoil-refimg{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);object-fit:contain;opacity:.92}
.recoil-plot.has-img .recoil-svg{position:relative;z-index:1}
.recoil-upload{font-family:var(--fm);font-size:8px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);
  background:transparent;border:1px solid var(--line);border-radius:6px;padding:3px 7px;cursor:pointer;white-space:nowrap}
.recoil-upload:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.recoil-guide{stroke:color-mix(in srgb,var(--dim) 40%,transparent);stroke-width:1;stroke-dasharray:3 4;vector-effect:non-scaling-stroke}
.recoil-ref{fill:none;stroke:color-mix(in srgb,var(--dim) 66%,transparent);stroke-width:1.4;stroke-dasharray:4 4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* per-bullet hover on the ideal line: subtle pips + transparent hit targets */
.recoil-ref-pip{fill:color-mix(in srgb,var(--dim) 55%,transparent);pointer-events:none}
.recoil-ref-dot{fill:transparent;stroke:none;pointer-events:all;cursor:pointer}
.recoil-ref-dot.is-hover{fill:color-mix(in srgb,var(--accent) 22%,transparent);stroke:var(--accent);stroke-width:1.2;vector-effect:non-scaling-stroke}
.recoil-card{position:relative}
.recoil-tip{position:absolute;z-index:8;pointer-events:none;transform:translate(-50%,-100%);
  background:color-mix(in srgb,var(--ink) 12%,var(--panel));border:1px solid color-mix(in srgb,var(--ink) 20%,var(--line));
  border-radius:6px;padding:5px 8px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.45)}
.recoil-tip.below{transform:translate(-50%,0)}
.recoil-tip b{display:block;font-family:var(--fd);font-weight:700;font-size:11px;color:var(--accent);letter-spacing:.02em}
.recoil-tip span{font-family:var(--fm);font-size:8.5px;color:var(--dim)}
.recoil-line{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.recoil-legend{display:flex;gap:16px;margin-top:10px}
.recoil-legend .rl-key{display:inline-flex;align-items:center;gap:6px;font-family:var(--fm);font-size:9px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.recoil-legend i{width:16px;height:0;flex:none}
.recoil-legend .rl-you{border-top:2.4px solid var(--accent)}
.recoil-legend .rl-ideal{border-top:1.6px dashed color-mix(in srgb,var(--dim) 70%,transparent)}
.recoil-o{font-family:var(--fm);font-size:7px;letter-spacing:.08em;text-transform:uppercase;fill:var(--dim)}
.recoil-foot{display:flex;gap:14px;align-items:flex-end;margin-top:auto;min-height:32px}
.recoil-foot.ref-only{align-items:center}
.recoil-stat b{display:block;font-family:var(--fd);font-weight:700;font-size:calc(16px * var(--scale));color:var(--ink);line-height:1.1}
.recoil-stat span{font-family:var(--fm);font-size:8px;letter-spacing:.09em;text-transform:uppercase;color:var(--dim)}
.recoil-note{font-family:var(--fm);font-size:8.5px;letter-spacing:.06em;line-height:1.4;color:color-mix(in srgb,var(--dim) 82%,transparent);text-transform:uppercase}

/* sparkline under a category dial */
.spark{width:64px;height:18px;margin-top:6px;opacity:.85}
.spark-svg{width:100%;height:100%;display:block;overflow:visible}
.spark polyline{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
.spark.cat-aim polyline{stroke:var(--accent)}
.spark.cat-utility polyline{stroke:var(--accent2)}
.spark.cat-position polyline{stroke:var(--good,#3ddc84)}

/* percentile dials, coloured per category */
.dialp{display:flex;flex-direction:column;align-items:center;gap:12px}
.dialp-ring{position:relative;display:inline-grid;place-items:center}
/* per-category colour token (drives the outline progress stroke) */
.dialp.cat-aim{--catclr:var(--accent)}
.dialp.cat-utility{--catclr:var(--accent2)}
.dialp.cat-position{--catclr:var(--good,#3ddc84)}
/* hexagon dial rendered on a canvas (see drawHexDial) — width tracks the
   100:116 viewBox aspect so the shape stays centred in the canvas */
.hexcanvas{display:block}
.dialp.lg .hexcanvas{height:180px;width:calc(180px * 100 / 116)}
.dialp.md .hexcanvas{height:150px;width:calc(150px * 100 / 116)}
.hexbg{fill:none;stroke:var(--line);stroke-width:6;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* linecap:butt so the fill BEGINS exactly at the top-centre vertex — a round
   cap bulges backward (toward the upper-left edge) and makes short fills look
   like they start left of centre. */
.hexfg{fill:none;stroke:var(--catclr,var(--accent));stroke-width:6;stroke-linejoin:round;stroke-linecap:butt;
  vector-effect:non-scaling-stroke;transition:stroke-dashoffset .9s cubic-bezier(.2,.8,.3,1)}
/* round start-cap dot anchored at the top-centre vertex (see hexProgressSvg) */
.hexcap{fill:none;stroke:var(--catclr,var(--accent));stroke-width:6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.dialp.calibrating .hexcap,.dial.calibrating .hexcap{stroke:var(--line)}
.dialp.calibrating .hexfg{stroke:var(--line)}
.dialp-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;z-index:2}
.dialp-mid b{font-family:var(--fd);font-weight:700;line-height:1;color:var(--ink);display:flex;align-items:baseline}
.dialp.lg .dialp-mid b{font-size:calc(40px * var(--scale))}
.dialp.md .dialp-mid b{font-size:calc(32px * var(--scale))}
.dialp-mid b i{font-style:normal;font-size:.5em;color:var(--dim);margin-left:1px}
/* only the LABEL (direct-child span) is small — NOT the .dialp-num inside <b> */
.dialp-mid > span{font-family:var(--fm);font-size:8.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.dialp-name{font-family:var(--fd);font-weight:700;font-size:calc(15px * var(--scale));
  text-transform:uppercase;letter-spacing:.1em}
.dialp.cat-aim .dialp-name{color:var(--accent)}
.dialp.cat-utility .dialp-name{color:var(--accent2)}
.dialp.cat-position .dialp-name{color:var(--good,#3ddc84)}

@media(max-width:560px){
  .rankhero-rest{gap:var(--gap)}
  .dialp.lg .hexcanvas{height:150px;width:calc(150px * 100 / 116)}
  .dialp.md .hexcanvas{height:120px;width:calc(120px * 100 / 116)}
}

/* ══════════════════════════════════════════════════════════════════
   Leaderboard
   ═══════════════════════════════════════════════════════════════d═══ */
.lb{border:1px solid var(--line);border-radius:1;background:var(--panel);overflow:hidden}
.lb-tabs{border-bottom:1px solid var(--line);padding:12px var(--pad) 0}
.lb-tabrow{display:flex;gap:4px;flex-wrap:wrap}
.lb-tabrow.sub{margin-top:8px;padding-bottom:12px}
.lb-tab{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  padding:8px 13px;border:1px solid var(--line);border-radius:10px;color:var(--dim);background:var(--bg)}
.lb-tabrow.sub .lb-tab{border-radius:6px;padding:6px 11px;font-size:9.5px}
.lb-tab[data-on="1"]{border-color:var(--accent);color:var(--accent);background:color-mix(in srgb,var(--accent) 12%,transparent)}
.lb-body{padding:6px var(--pad) var(--pad)}
.lb-loading,.lb-empty{padding:26px 0;text-align:center;font-family:var(--fm);font-size:12px;color:var(--dim)}
.lb-rowhead,.lb-row,.lb-you{display:grid;grid-template-columns:44px 1fr auto auto;align-items:center;gap:12px;
  padding:11px 4px;border-bottom:1px solid var(--line)}
.lb-rowhead{font-family:var(--fm);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);padding:10px 4px}
.lb-rowhead .lb-gain,.lb-row .lb-gain,.lb-you .lb-gain{text-align:right;min-width:52px}
.lb-rowhead .lb-val,.lb-row .lb-val,.lb-you .lb-val{text-align:right;min-width:48px}
.lb-rank{font-family:var(--fm);font-weight:700;font-size:13px;color:var(--dim);text-align:center}
.lb-rank.top{color:var(--accent)}
.lb-name{font-family:var(--fd);font-weight:600;font-size:calc(15px * var(--scale));
  text-transform:var(--hcase);letter-spacing:var(--htrack)}
.lb-gain{font-family:var(--fm);font-size:12px;color:var(--good,#3ddc84)}
.lb-val{font-family:var(--fd);font-weight:700;font-size:calc(17px * var(--scale));color:var(--ink)}
.lb-row[data-me="1"]{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.lb-you{border-bottom:none;border-top:2px solid var(--accent);margin-top:4px;background:color-mix(in srgb,var(--accent) 10%,transparent)}
.lb-you .lb-name{color:var(--accent)}

/* Steam sign-in button */
.signin-steam{display:flex;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(90deg,#1b2838,#2a475e);color:#fff;border:1px solid #66c0f4;
  border-radius:var(--r);padding:13px;font-family:var(--fd);font-weight:700;font-size:calc(15px * var(--scale));
  text-transform:var(--hcase);letter-spacing:var(--htrack);text-decoration:none;transition:filter .15s}
.signin-steam:hover{filter:brightness(1.2)}
.signin-steam svg{flex:none}
.signin-or{text-align:center;font-family:var(--fm);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim);margin:4px 0;position:relative}
.signin-or::before,.signin-or::after{content:"";position:absolute;top:50%;width:38%;height:1px;background:var(--line)}
.signin-or::before{left:0}.signin-or::after{right:0}

/* ══════════════════════════════════════════════════════════════════
   Top bar — player search + profile button
   ══════════════════════════════════════════════════════════════════ */
.topbar{display:flex;align-items:center;gap:16px;padding:14px 26px;border-bottom:1px solid var(--line);
  position:static;background:var(--bg);z-index:20}
.topsearch{position:relative;flex:1;max-width:420px}
.topsearch input{width:100%;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:9px 13px;font-family:var(--fb);font-size:13px;color:var(--ink)}
.topsearch input:focus{outline:none;border-color:var(--accent)}
.topsearch-results{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:none;z-index:30;
  box-shadow:0 12px 40px rgba(0,0,0,.5)}
.topsearch-results.open{display:block}
.topsearch-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--line);cursor:pointer;color:var(--ink)}
.topsearch-row:last-child{border-bottom:none}
.topsearch-row:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.topsearch-row img,.topsearch-ph{width:28px;height:28px;border-radius:6px;flex:none;object-fit:cover}
.topsearch-ph{display:grid;place-items:center;background:var(--line);font-family:var(--fd);font-weight:700;font-size:14px;color:var(--dim)}
.topsearch-name{flex:1;font-size:13px;font-weight:500}
.topsearch-ov{font-family:var(--fd);font-weight:700;font-size:15px;color:var(--accent)}
.topsearch-empty{padding:12px;font-family:var(--fm);font-size:12px;color:var(--dim);text-align:center}
.topprofile{display:flex;align-items:center;gap:9px;margin-left:auto;background:var(--panel);
  border:1px solid var(--line);border-radius:99px;padding:5px 14px 5px 5px;cursor:pointer;color:var(--ink)}
.topprofile:hover{border-color:var(--accent)}
.topprofile img,.topprofile-ph{width:30px;height:30px;border-radius:50%;flex:none;object-fit:cover}
.topprofile-ph{display:grid;place-items:center;background:var(--accent);color:var(--bg);font-family:var(--fd);font-weight:700;font-size:15px}
.topprofile-name{font-family:var(--fd);font-weight:600;font-size:14px;text-transform:var(--hcase);letter-spacing:var(--htrack)}

/* ══════════════════════════════════════════════════════════════════
   Profile view
   ══════════════════════════════════════════════════════════════════ */
.profile-loading,.profile-nostats{padding:60px 0;text-align:center;font-family:var(--fm);font-size:13px;color:var(--dim)}
.profile-head{display:flex;align-items:center;gap:20px;padding:36px 0 28px;border-bottom:1px solid var(--line)}
/* identity hero — player-card look (avatar + name + key-stat tiles) */
.profile-hero{display:flex;align-items:center;gap:24px;flex-wrap:wrap;padding:24px 26px;margin:8px 0 20px;border-radius:var(--r);
  border:1px solid var(--line);box-shadow:0 10px 30px rgba(0,0,0,.28);
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 12%,var(--panel)),var(--panel) 62%)}
.profile-hero-main{display:flex;align-items:center;gap:18px;min-width:0}
.profile-hero .profile-av{width:74px;height:74px;border-radius:16px;object-fit:cover;flex:none}
.profile-hero .profile-av.ph{display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 22%,var(--panel));color:var(--accent);font-family:var(--fd);font-weight:800;font-size:30px}
.profile-hero .profile-id h1{margin:0;font-family:var(--fd);font-weight:800;font-size:calc(34px * var(--scale));text-transform:uppercase;letter-spacing:.02em;line-height:1}
.profile-hero .profile-sid{font-family:var(--fm);font-size:11px;color:var(--dim);letter-spacing:.04em}
.profile-hero-stats{display:flex;gap:10px;margin-left:auto;flex-wrap:wrap}
.phs-tile{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:66px;padding:10px 14px;border-radius:11px;
  background:color-mix(in srgb,var(--ink) 5%,var(--panel));border:1px solid var(--line)}
.phs-tile b{font-family:var(--fd);font-weight:800;font-size:calc(24px * var(--scale));color:var(--ink);line-height:1;font-variant-numeric:tabular-nums}
.phs-tile span{font-family:var(--fm);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.phs-tile.hero{border-color:color-mix(in srgb,var(--accent) 45%,transparent);background:color-mix(in srgb,var(--accent) 15%,var(--panel))}
.phs-tile.hero b{color:var(--accent);text-shadow:var(--glow)}
.profile-av{width:88px;height:88px;border-radius:16px;object-fit:cover;flex:none}
.profile-av.ph{display:grid;place-items:center;background:var(--accent);color:var(--bg);
  font-family:var(--fd);font-weight:700;font-size:40px}
.profile-id h1{font-family:var(--fd);font-weight:700;font-size:calc(34px * var(--scale));
  text-transform:var(--hcase);letter-spacing:var(--htrack);line-height:1}
.profile-sid{font-family:var(--fm);font-size:11px;color:var(--dim)}
.profile-dials{display:flex;justify-content:center;gap:calc(var(--gap) * 3);flex-wrap:wrap;padding:34px 0 20px}
.profile-overall{text-align:center;padding-bottom:26px}
.profile-overall span{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.profile-overall b{font-family:var(--fd);font-weight:700;font-size:calc(44px * var(--scale));color:var(--accent);text-shadow:var(--glow)}
@media(max-width:640px){ .topsearch{max-width:none} .topprofile-name{display:none} }

/* Ingest / link-match-history panel */
.ingest-panel{margin-top:28px;padding:20px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel)}
.ingest-panel h3{font-family:var(--fd);font-size:calc(16px * var(--scale));text-transform:var(--hcase);letter-spacing:var(--htrack);margin:0 0 6px}
.ingest-panel p{color:var(--dim);font-size:13px;margin:0 0 14px;line-height:1.5}
.ingest-panel a{color:var(--accent)}
.ingest-in{display:block;width:100%;box-sizing:border-box;margin-bottom:10px;padding:11px 13px;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--r);color:var(--fg);
  font-family:var(--fm);font-size:13px}
.ingest-in:focus{outline:none;border-color:var(--accent)}
.ingest-btn{padding:11px 20px;background:var(--accent);color:#000;border:none;border-radius:var(--r);
  font-family:var(--fd);font-weight:700;text-transform:var(--hcase);letter-spacing:var(--htrack);cursor:pointer}
.ingest-btn:disabled{opacity:.5;cursor:default}
.ingest-msg{margin-top:10px;font-size:12px;font-family:var(--fm)}
.ingest-msg.ok{color:var(--good,#6ee787)}
.ingest-msg.err{color:var(--bad,#ff7b72)}
.ingest-status{margin-top:12px}
.ingest-counts{font-family:var(--fm);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}

/* ── top-right profile dropdown menu ── */
.topprofile-wrap{position:relative}
.topmenu{position:absolute;top:calc(100% + 8px);right:0;min-width:180px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--r);padding:6px;z-index:50;
  display:none;flex-direction:column;box-shadow:0 8px 30px rgba(0,0,0,.5)}
.topmenu.open{display:flex}
.topmenu-item{display:block;width:100%;box-sizing:border-box;text-align:left;background:none;border:none;
  color:var(--fg);font-family:var(--fm);font-size:13px;padding:9px 11px;border-radius:calc(var(--r) - 2px);
  cursor:pointer;text-decoration:none}
.topmenu-item:hover{background:var(--line)}
.topmenu-sep{height:1px;background:var(--line);margin:6px 4px}
.topmenu-danger{color:var(--bad,#ff7b72)}
.topmenu-danger:hover{background:var(--bad,#ff7b72);color:#fff}

/* ══════════ Friends: top-right button + dropdown panel ══════════ */
.topfriends-wrap{position:relative;margin-left:auto}
.topfriends{position:relative;display:grid;place-items:center;width:38px;height:38px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--line);color:var(--dim);cursor:pointer;transition:color .15s,border-color .15s}
.topfriends:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.topfriends svg{width:19px;height:19px}
.topfriends-badge{position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;
  background:var(--accent);color:#000;font-family:var(--fd);font-weight:700;font-size:9px;display:grid;place-items:center;box-shadow:var(--glow)}
.topfriends-badge[hidden]{display:none}
/* one top-right account button + its dropdown (account actions + friends) */
.topacct-wrap{position:relative;margin-left:auto}
/* name + avatar are one united pill button */
.topacct{display:inline-flex;align-items:center;gap:9px;padding:4px 6px 4px 13px;border-radius:999px;
  background:var(--panel);border:1px solid var(--line);cursor:pointer;
  transition:border-color .15s,transform .15s,background .15s}
.topacct:hover{border-color:color-mix(in srgb,var(--accent) 50%,var(--line));transform:translateY(-1px);
  background:color-mix(in srgb,var(--ink) 4%,var(--panel))}
.topacct-av{position:relative;width:30px;height:30px;flex:none;border-radius:50%;overflow:hidden;
  background:var(--bg);display:grid;place-items:center}
.topacct-av img{width:100%;height:100%;object-fit:cover;display:block}
.topacct-ph{font-family:var(--fd);font-weight:800;font-size:13px;color:var(--accent)}
.topacct-panel{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:calc(100vw - 40px);
  max-height:min(80vh,660px);overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:10px;z-index:60;display:none;box-shadow:0 12px 40px rgba(0,0,0,.55)}
.topacct-panel.open{display:block}
.acct-head{display:flex;align-items:center;gap:10px;padding:4px 8px 10px}
.acct-head img{width:34px;height:34px;border-radius:50%;object-fit:cover}
.acct-head-ph{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 20%,var(--panel));color:var(--accent);font-family:var(--fd);font-weight:800}
.acct-head-name{font-family:var(--fd);font-weight:800;font-size:16px;color:var(--ink)}
.acct-actions{display:flex;flex-direction:column;gap:2px}
.acct-item{display:block;width:100%;text-align:left;padding:9px 10px;border:0;background:none;cursor:pointer;border-radius:8px;
  font-family:var(--fb);font-size:13px;color:var(--ink);text-decoration:none;transition:background .12s,color .12s}
.acct-item:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.acct-item.danger{color:var(--bad,#ff7b72)}
.acct-item.danger:hover{background:color-mix(in srgb,var(--bad,#ff7b72) 14%,transparent)}
.acct-sep{height:1px;background:var(--line);margin:8px 2px}
/* Account page — delete (danger) styling */
.logout-btn.danger-btn{color:var(--bad,#ff7b72);border-color:color-mix(in srgb,var(--bad,#ff7b72) 45%,transparent)}
.logout-btn.danger-btn:hover{background:var(--bad,#ff7b72);border-color:var(--bad,#ff7b72);color:#fff}
.notif-box.danger-box{border-color:color-mix(in srgb,var(--bad,#ff7b72) 32%,var(--line))}

.friends-panel{position:absolute;top:calc(100% + 8px);right:0;width:340px;max-width:calc(100vw - 40px);
  max-height:min(70vh,560px);overflow-y:auto;background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:10px;z-index:60;display:none;box-shadow:0 12px 40px rgba(0,0,0,.55)}
.friends-panel.open{display:block}
.friends-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px 10px;
  font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:13px;color:var(--ink)}
.friends-count{font-family:var(--fm);font-size:11px;color:var(--dim);background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:2px 9px}
.friends-add{padding:0 4px}
.friends-addin{width:100%;box-sizing:border-box;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  color:var(--fg);font-family:var(--fm);font-size:12px;padding:9px 11px}
.friends-addin:focus{outline:none;border-color:var(--accent)}
.friends-addres{display:flex;flex-direction:column;gap:1px;margin-top:4px}
.friends-section{font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:12px 8px 5px}
.friends-empty,.friends-loading{padding:8px;font-family:var(--fm);font-size:12px;color:var(--dim);line-height:1.55}
.friend-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r)}
.friend-row:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.friend-main{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:none;border:none;color:var(--fg);cursor:pointer;text-align:left;padding:0;font:inherit}
.friend-main img,.friend-ph{width:30px;height:30px;border-radius:7px;flex:none;object-fit:cover}
.friend-ph{display:grid;place-items:center;background:var(--accent);color:#000;font-family:var(--fd);font-weight:700;font-size:13px}
.friend-name{font-family:var(--fd);font-weight:600;font-size:13px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.friend-acts{display:flex;gap:6px;flex:none}
.friend-act{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:10px;
  padding:6px 10px;border-radius:5px;cursor:pointer;border:1px solid var(--line);background:none;color:var(--dim);transition:opacity .15s,border-color .15s,color .15s}
.friend-act.acc{background:var(--accent);color:#000;border-color:var(--accent)}
.friend-act.acc:hover{opacity:.88}
.friend-act.dec:hover{border-color:var(--bad,#ff7b72);color:var(--bad,#ff7b72)}

/* add-friend button on another player's profile */
.friend-btn{margin-left:auto;font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  font-size:12px;padding:11px 20px;border-radius:var(--r);cursor:pointer;background:var(--accent);color:#000;
  border:1px solid var(--accent);transition:opacity .15s}
.friend-btn:hover{opacity:.9}
.friend-btn:disabled{opacity:.55;cursor:default}
.friend-btn.is-friend{background:none;color:var(--accent)}

/* ── profile tabs ── */
.profile-tabs{display:flex;gap:4px;margin:20px 0 4px;border-bottom:1px solid var(--line)}
.profile-tab{background:none;border:none;color:var(--dim);font-family:var(--fd);font-weight:700;
  text-transform:var(--hcase);letter-spacing:var(--htrack);font-size:calc(13px * var(--scale));
  padding:10px 16px;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.profile-tab:hover{color:var(--fg)}
.profile-tab.active{color:var(--accent);border-bottom-color:var(--accent)}
.profile-body{padding-top:20px}

/* ── settings account block + red logout ── */
.settings-account{margin-top:32px;padding-top:20px;border-top:1px solid var(--line)}
.logout-btn{display:block;padding:11px 20px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);color:var(--fg);font-family:var(--fd);font-weight:700;
  text-transform:var(--hcase);letter-spacing:var(--htrack);cursor:pointer;transition:all .15s}
.logout-btn:hover{background:var(--bad,#ff7b72);border-color:var(--bad,#ff7b72);color:#fff}
.ingest-btnrow{display:flex;align-items:center}
.ingest-btn.ghost{background:none;border:1px solid var(--line);color:var(--fg)}

/* ══════════ Vault: skins inventory · Ascend Points · rewards store ══════════ */
.vault-subtabs{display:flex;gap:6px;margin:4px 0 22px;flex-wrap:wrap}
.vault-subtab{background:none;border:1px solid var(--line);color:var(--dim);font-family:var(--fd);font-weight:700;
  text-transform:var(--hcase);letter-spacing:var(--htrack);font-size:calc(11.5px * var(--scale));
  padding:8px 16px;border-radius:calc(var(--r) * 4);cursor:pointer;transition:all .15s}
.vault-subtab:hover{color:var(--fg);border-color:var(--dim)}
.vault-subtab.active{color:#000;background:var(--accent);border-color:var(--accent);box-shadow:var(--glow)}
.vault-loading,.vault-empty{font-family:var(--fm);font-size:13px;color:var(--dim);padding:30px 2px;line-height:1.7}
.vault-empty a,.vault-note a{color:var(--accent)}
.vault-empty b{color:var(--fg)}
.vault-note{font-family:var(--fm);font-size:11px;line-height:1.65;color:var(--dim);
  border-left:2px solid var(--line);padding:3px 0 3px 12px;margin:0 0 20px;max-width:74ch}

/* inventory */
.vault-invhead{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:12px;flex-wrap:wrap}
.vault-invcount{font-family:var(--fd);font-weight:700;font-size:calc(20px * var(--scale))}
.vault-invcount b{color:var(--accent)}
.vault-invval{text-align:right;font-family:var(--fm)}
.vault-invval span{display:block;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.vault-invval b{font-family:var(--fd);font-size:calc(26px * var(--scale));color:var(--fg)}
.vault-invval em{display:block;font-size:10px;color:var(--dim);font-style:normal;letter-spacing:.04em}
.skin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:12px}
.skin-card{--rar:#5a6a86;position:relative;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);overflow:hidden;display:flex;flex-direction:column;transition:border-color .18s,transform .18s}
.skin-card::before{content:"";position:absolute;left:0;top:0;right:0;height:2px;background:var(--rar);z-index:1}
.skin-card:hover{border-color:var(--rar);transform:translateY(-2px)}
.skin-img{display:block;height:118px;background-color:color-mix(in srgb, var(--rar) 13%, var(--panel));
  background-size:contain;background-position:center;background-repeat:no-repeat}
.skin-body{padding:11px 12px 12px;display:flex;flex-direction:column;gap:5px;flex:1}
.skin-name{font-family:var(--fd);font-weight:600;font-size:calc(13px * var(--scale));line-height:1.25;
  color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.skin-meta{font-family:var(--fm);font-size:10px;color:var(--dim);letter-spacing:.03em}
.skin-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:6px}
.skin-price{font-family:var(--fd);font-weight:700;font-size:calc(14px * var(--scale));color:var(--fg)}
.skin-price em{color:var(--dim);font-style:normal;font-weight:400}
.skin-flags{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.skin-flag{font-family:var(--fm);font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);border-radius:3px;padding:2px 5px;white-space:nowrap}

/* store */
.vault-storehead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:12px;flex-wrap:wrap}
.vault-storeh-l h3{font-family:var(--fd);font-weight:700;font-size:calc(20px * var(--scale));
  text-transform:var(--hcase);letter-spacing:var(--htrack);margin:0}
.vault-storeh-l p{font-family:var(--fm);font-size:12px;color:var(--dim);margin:5px 0 0}
.vault-storeh-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vault-balchip{font-family:var(--fd);font-weight:700;font-size:calc(15px * var(--scale));color:var(--accent);
  border:1px solid var(--accent);border-radius:calc(var(--r) * 4);padding:7px 15px;text-shadow:var(--glow)}
.vault-soon{font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);
  border:1px dashed var(--line);border-radius:calc(var(--r) * 4);padding:7px 12px}
.reward-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}
.reward-card{--rar:#5a6a86;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
  background:var(--panel);overflow:hidden;transition:border-color .18s}
.reward-card:hover{border-color:color-mix(in srgb, var(--rar) 60%, var(--line))}
.reward-tile{position:relative;padding:20px 16px 16px;min-height:98px;display:flex;flex-direction:column;
  background:linear-gradient(135deg, color-mix(in srgb, var(--rar) 32%, var(--panel)), var(--panel) 80%);
  border-bottom:1px solid var(--line)}
.reward-tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rar)}
.reward-weap{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.reward-skin{font-family:var(--fd);font-weight:700;font-size:calc(17px * var(--scale));color:var(--fg);line-height:1.15;margin-top:1px}
.reward-wear{font-family:var(--fm);font-size:10px;color:var(--dim);margin-top:4px}
.reward-body{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:12px 16px 4px}
.reward-cost{font-family:var(--fd);font-weight:700;font-size:calc(18px * var(--scale));color:var(--accent)}
.reward-cost span{font-size:11px;color:var(--dim)}
.reward-usd{font-family:var(--fm);font-size:11px;color:var(--dim)}
.reward-btn{margin:8px 16px 16px;padding:10px;background:var(--accent);color:#000;border:none;border-radius:var(--r);
  font-family:var(--fd);font-weight:700;text-transform:var(--hcase);letter-spacing:var(--htrack);
  font-size:calc(12px * var(--scale));cursor:pointer;transition:opacity .15s}
.reward-btn:hover{opacity:.88}
.reward-btn.locked,.reward-btn:disabled{background:none;border:1px solid var(--line);color:var(--dim);cursor:default;opacity:1}

/* on-site inventory: value + sell/withdraw actions, pending state, deposit button */
.reward-cost.inv-val{color:var(--fg)}
.inv-actions{display:flex;gap:8px;margin:0 16px 16px}
.inv-act{flex:1;padding:9px 6px;border-radius:var(--r);font-family:var(--fd);font-weight:700;
  text-transform:var(--hcase);letter-spacing:var(--htrack);font-size:calc(11px * var(--scale));cursor:pointer;transition:all .15s}
.inv-act.sell{background:var(--accent);color:#000;border:none}
.inv-act.sell:hover{opacity:.88}
.inv-act.withdraw{background:none;border:1px solid var(--line);color:var(--fg)}
.inv-act.withdraw:hover{border-color:var(--accent);color:var(--accent)}
.inv-pending{margin:0 16px 16px;padding:9px;text-align:center;font-family:var(--fm);font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--dim);border:1px dashed var(--line);border-radius:var(--r)}
.skin-deposit{margin:0 12px 12px;padding:8px;background:none;border:1px dashed var(--line);border-radius:var(--r);
  color:var(--dim);font-family:var(--fd);font-weight:700;text-transform:var(--hcase);letter-spacing:var(--htrack);
  font-size:calc(10.5px * var(--scale));cursor:default}

/* two-tier store: server vs real, badges, challenge flag, equip state */
.site .reward-badge{position:absolute;top:12px;right:12px;font-family:var(--fm);font-size:8px;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 7px;border-radius:4px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 60%,transparent)}
.site .reward-badge.real{color:var(--good,#6ee787);border-color:color-mix(in srgb,var(--good,#6ee787) 45%,transparent)}
.site .reward-badge.srv{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.site .reward-chalflag{font-family:var(--fm);font-size:10px;color:var(--dim)}
.site .reward-chalflag.done{color:var(--good,#6ee787)}
.site .reward-card.equipped{border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 20%,transparent) inset}
.site .reward-acts{display:flex;gap:8px;margin:8px 16px 16px}
.site .reward-btn2{flex:1;padding:9px 6px;border-radius:var(--r);font-family:var(--fd);font-weight:700;
  text-transform:var(--hcase);letter-spacing:var(--htrack);font-size:calc(10.5px * var(--scale));cursor:pointer;transition:opacity .15s,border-color .15s,color .15s;white-space:nowrap}
.site .reward-btn2.srv{background:none;border:1px solid var(--line);color:var(--fg)}
.site .reward-btn2.srv:hover{border-color:var(--accent);color:var(--accent)}
.site .reward-btn2.real{background:var(--accent);color:#000;border:1px solid var(--accent)}
.site .reward-btn2.real:hover{opacity:.88}
.site .reward-btn2:disabled{opacity:.5;cursor:default;background:none;border:1px solid var(--line);color:var(--dim)}

/* claim-real modal: challenge bars + AP alternative */
.claim-card{max-width:440px}
.claim-chals{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.chal-row .chal-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:5px}
.chal-label{font-family:var(--fb);font-size:13px;color:var(--fg,#eef1f7)}
.chal-count{font-family:var(--fm);font-size:11px;color:var(--dim,#9aa4b5)}
.chal-row.done .chal-count{color:var(--good,#6ee787)}
.chal-bar{height:6px;border-radius:3px;background:var(--line,#20242e);overflow:hidden}
.chal-bar i{display:block;height:100%;background:var(--accent,#ff6a2b);border-radius:3px;transition:width .3s}
.chal-row.done .chal-bar i{background:var(--good,#6ee787)}
.claim-or{display:flex;align-items:center;gap:12px;margin:4px 0 12px;color:var(--dim,#9aa4b5);
  font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.claim-or::before,.claim-or::after{content:"";flex:1;height:1px;background:var(--line,#20242e)}
.claim-cost{font-family:var(--fb);font-size:13px;color:var(--dim,#9aa4b5);margin-bottom:18px}
.claim-cost b{color:var(--accent,#ff6a2b)}

/* wallet */
.wallet-hero{border:1px solid var(--line);border-radius:var(--r);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, var(--panel)), var(--panel) 70%);
  padding:28px 26px;display:flex;flex-direction:column;gap:6px;margin-bottom:6px}
.wallet-label{font-family:var(--fm);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.wallet-bal{font-family:var(--fd);font-weight:700;font-size:calc(52px * var(--scale));line-height:.95;
  color:var(--accent);text-shadow:var(--glow)}
.wallet-bal span{font-size:calc(20px * var(--scale));color:var(--dim);text-shadow:none}
.wallet-sub{font-family:var(--fm);font-size:12px;color:var(--dim);letter-spacing:.02em}
.wallet-histh{font-family:var(--fd);font-weight:700;font-size:calc(14px * var(--scale));
  text-transform:var(--hcase);letter-spacing:var(--htrack);margin:22px 0 10px}
.wallet-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.wallet-row{display:grid;grid-template-columns:1fr auto 92px 92px;gap:14px;align-items:center;
  padding:12px 16px;border-bottom:1px solid var(--line)}
.wallet-row:last-child{border-bottom:none}
.wallet-reason{font-family:var(--fb);font-size:13px;color:var(--fg)}
.wallet-date{font-family:var(--fm);font-size:11px;color:var(--dim);white-space:nowrap}
.wallet-delta{font-family:var(--fd);font-weight:700;font-size:13px;text-align:right}
.wallet-delta.pos{color:var(--good,#6ee787)}
.wallet-delta.neg{color:var(--bad,#ff7b72)}
.wallet-run{font-family:var(--fm);font-size:12px;color:var(--dim);text-align:right}
@media(max-width:560px){
  .wallet-row{grid-template-columns:1fr auto auto;gap:10px}
  .wallet-date{display:none}
}
.ingest-btn.ghost:hover{border-color:var(--accent);color:var(--accent)}
.nav-spacer{flex:1}

/* profile match cards */
.profile-matches{margin-top:28px}
.profile-matches .profile-matches-h{margin:0 0 14px}
.mcard-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:start}
.mcard-grid>.mcard{margin-bottom:0}
@media(max-width:1120px){ .mcard-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:560px){ .mcard-grid{grid-template-columns:1fr} }
.mcard-pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:20px}
.mcard-pgbtn{background:none;border:1px solid var(--line);color:var(--dim);cursor:pointer;
  font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:calc(11px * var(--scale));
  padding:8px 16px;border-radius:7px;transition:color .16s ease,border-color .16s ease}
.mcard-pgbtn:hover:not(:disabled){color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.mcard-pgbtn:disabled{opacity:.38;cursor:default}
.mcard-pginfo{font-family:var(--fm);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ══ Profile folders — vertical stack, contents open to the right ══════ */
.pf-wrap{padding-top:10px;min-height:58vh}
.pf-content{min-height:58vh}   /* fill the page so the profile isn't clustered up top */
.pf-cols{display:flex;align-items:flex-start;gap:16px}
.pf-col{display:flex;flex-direction:column;gap:16px;flex:0 0 226px;width:226px;padding-top:12px}
/* a folder = a row shaped like a file folder (tab sticks up on the top-left) */
.pf-folder{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:14px;cursor:pointer;text-align:left;
  font:inherit;color:inherit;border:1px solid color-mix(in srgb,var(--fc,var(--accent)) 26%,var(--line));
  border-left:3px solid color-mix(in srgb,var(--fc,var(--accent)) 72%,var(--line));border-radius:2px 12px 12px 12px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fc,var(--accent)) 12%,var(--panel)),var(--panel));
  box-shadow:0 5px 14px rgba(0,0,0,.22);
  transition:transform .16s ease,border-color .16s ease,background .16s ease,box-shadow .16s ease}
.pf-folder::before{content:"";position:absolute;top:-9px;left:-1px;width:70px;height:12px;z-index:1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fc,var(--accent)) 40%,var(--panel)),color-mix(in srgb,var(--fc,var(--accent)) 22%,var(--panel)));
  border:1px solid color-mix(in srgb,var(--fc,var(--accent)) 30%,var(--line));border-bottom:0;
  border-radius:6px 10px 0 0;clip-path:polygon(0 0,74% 0,100% 100%,0 100%)}
.pf-folder:hover{transform:translateX(3px);border-color:color-mix(in srgb,var(--fc,var(--accent)) 50%,var(--line))}
.pf-folder.sel{background:linear-gradient(180deg,color-mix(in srgb,var(--fc,var(--accent)) 30%,var(--panel)),color-mix(in srgb,var(--fc,var(--accent)) 11%,var(--panel)));
  border-color:color-mix(in srgb,var(--fc,var(--accent)) 52%,transparent);
  box-shadow:0 10px 26px rgba(0,0,0,.34),inset 0 1px 0 color-mix(in srgb,var(--fc,var(--accent)) 30%,transparent)}
.pf-folder.sel::before{background:linear-gradient(180deg,color-mix(in srgb,var(--fc,var(--accent)) 60%,var(--panel)),color-mix(in srgb,var(--fc,var(--accent)) 40%,var(--panel)));
  border-color:color-mix(in srgb,var(--fc,var(--accent)) 48%,transparent)}
.pf-ficon{flex:none;width:26px;display:flex;align-items:center;justify-content:center;font-size:21px;line-height:1;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.4))}
.pf-fmain{display:flex;flex-direction:column;gap:2px;min-width:0}
.pf-flabel{font-family:var(--fd);font-weight:800;font-size:calc(15px * var(--scale));text-transform:uppercase;letter-spacing:.03em;
  color:var(--ink);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pf-fmeta{font-family:var(--fm);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.pf-chev{margin-left:auto;flex:none;font-size:20px;line-height:1;color:var(--dim);transition:transform .16s ease,color .16s ease}
.pf-folder:hover .pf-chev,.pf-folder.sel .pf-chev{color:color-mix(in srgb,var(--fc,var(--accent)) 80%,var(--ink));transform:translateX(2px)}
/* content pane to the right of the folder */
.pf-content{flex:1 1 auto;min-width:0;border:1px solid color-mix(in srgb,var(--ink) 9%,var(--line));border-radius:var(--r);
  background:color-mix(in srgb,var(--ink) 4%,var(--panel));
  box-shadow:0 10px 30px rgba(0,0,0,.22);padding:2px 22px 24px;animation:none}
.pf-content-head{padding:16px 0 10px;margin-bottom:12px;border-bottom:1px solid var(--line)}
.pf-content-title{font-family:var(--fd);font-weight:800;font-size:calc(20px * var(--scale));text-transform:uppercase;
  letter-spacing:.05em;color:var(--ink)}
.pf-content-body{padding-top:6px}
/* content inside the pane shouldn't add the profile's big standalone paddings */
.pf-content-body .profile-dials{padding:18px 0 14px}
.pf-content-body .profile-overall{padding-bottom:20px}
.pf-content-body .profile-matches{margin-top:22px}
@media(max-width:860px){
  .pf-cols{flex-direction:column}
  .pf-col{flex:none;width:100%;flex-direction:row;flex-wrap:wrap}
  .pf-col .pf-folder-wrap{flex:1 1 170px}
  .pf-content{width:100%}
}
/* ── hover peek: sub-folders pop out of the top as a short row of papers ── */
.pf-folder-wrap{position:relative;width:100%}
.pf-folder-wrap.has-peek:hover{z-index:6}
.pf-folder-wrap .pf-folder{position:relative;z-index:1}
.pf-peek{position:absolute;left:13px;right:13px;top:-1px;z-index:0;display:flex;gap:5px;pointer-events:none}
.pf-peek-item{flex:0 1 auto;min-width:24px;display:flex;align-items:center;justify-content:center;height:22px;padding:0 8px;
  border-radius:6px 6px 3px 3px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--pc,var(--accent)) 48%,var(--panel)),color-mix(in srgb,var(--pc,var(--accent)) 26%,var(--panel)));
  border:1px solid color-mix(in srgb,var(--pc,var(--accent)) 46%,var(--line));box-shadow:0 -2px 8px rgba(0,0,0,.4);
  opacity:0;transform:translateY(9px);transition:transform .26s cubic-bezier(.2,.85,.25,1),opacity .2s}
.pf-peek-ic{font-size:12px;line-height:1}
.pf-folder-wrap.has-peek:hover .pf-peek-item{opacity:1;transform:translateY(-19px)}
.pf-folder-wrap.has-peek:hover .pf-peek-item.p2{transition-delay:.03s}
.pf-folder-wrap.has-peek:hover .pf-peek-item.p3{transition-delay:.06s}
.pf-folder-wrap.has-peek:hover .pf-peek-item.p4{transition-delay:.09s}
.pf-folder-wrap.has-peek:hover .pf-peek-item.p5{transition-delay:.12s}
/* ── folder opening animations ── */
@keyframes pfOpenPane{ from{opacity:0;transform:translateX(-26px) scale(.985)} to{opacity:1;transform:none} }
.pf-content.pf-anim-open{ animation:pfOpenPane .36s cubic-bezier(.2,.85,.25,1) backwards; transform-origin:left center }
@keyframes pfColSlide{ from{opacity:0;transform:translateX(-18px)} to{opacity:1;transform:none} }
.pf-anim-col{ animation:pfColSlide .3s cubic-bezier(.2,.85,.25,1) backwards }
@keyframes pfFolderRise{ from{opacity:0;transform:translateX(-34px) translateY(6px) scale(.95)} to{opacity:1;transform:none} }
.pf-anim-col .pf-folder-wrap{ animation:pfFolderRise .38s cubic-bezier(.2,.85,.25,1) backwards }
.pf-anim-col .pf-folder-wrap:nth-child(1){animation-delay:.02s}
.pf-anim-col .pf-folder-wrap:nth-child(2){animation-delay:.08s}
.pf-anim-col .pf-folder-wrap:nth-child(3){animation-delay:.14s}
.pf-anim-col .pf-folder-wrap:nth-child(4){animation-delay:.20s}
.pf-anim-col .pf-folder-wrap:nth-child(5){animation-delay:.26s}
@media(prefers-reduced-motion:reduce){ .pf-content.pf-anim-open,.pf-anim-col,.pf-anim-col .pf-folder-wrap,.pf-peek-item{animation:none;transition:none} }
.profile-matches-h{font-family:var(--fd);font-size:calc(15px * var(--scale));text-transform:var(--hcase);letter-spacing:var(--htrack);margin:0 0 14px;color:var(--dim)}
.mcard{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--r);padding:14px 16px;margin-bottom:10px}
.mcard.win{border-left-color:var(--good,#6ee787)}
.mcard.loss{border-left-color:var(--bad,#ff7b72)}
.mcard-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mcard-map{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:calc(14px * var(--scale))}
.mcard-res{font-family:var(--fm);font-size:12px;font-weight:700}
.mcard-res.win{color:var(--good,#6ee787)}
.mcard-res.loss{color:var(--bad,#ff7b72)}
.mcard-stats{display:flex;gap:16px;font-family:var(--fm);font-size:12px;color:var(--dim);margin-bottom:10px}
.mcard-stats .mcard-date{margin-left:auto}
.mcard-bars{display:flex;gap:6px}
.mcard-bar{flex:1;height:4px;background:var(--line);border-radius:2px;overflow:hidden}
.mcard-bar i{display:block;height:100%}
.mcard-bar.cat-aim i{background:var(--accent)}
.mcard-bar.cat-utility i{background:#5aa9e6}
.mcard-bar.cat-position i{background:#6ee787}

.mcard-empty{padding:24px;text-align:center;color:var(--dim);font-family:var(--fm);font-size:13px;
  border:1px dashed var(--line);border-radius:var(--r)}

/* notifications opt-in box */
.notif-box{margin-bottom:24px;padding:16px;border:1px solid var(--line);border-radius:var(--r)}
.notif-box h3{font-family:var(--fd);font-size:calc(14px * var(--scale));text-transform:var(--hcase);letter-spacing:var(--htrack);margin:0 0 6px}
.notif-box p{color:var(--dim);font-size:12px;margin:0 0 12px;line-height:1.5}
.notif-toggle{display:flex;align-items:center;gap:10px;font-family:var(--fm);font-size:13px;cursor:pointer}
.notif-toggle input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}

/* baseline lock banner */
.baseline-banner{max-width:560px;margin:80px auto;text-align:center;padding:40px;
  border:1px solid var(--line);border-radius:calc(var(--r) * 2);background:var(--panel)}
.bb-title{font-family:var(--fd);font-size:calc(24px * var(--scale));font-weight:800;
  text-transform:var(--hcase);letter-spacing:var(--htrack);margin-bottom:10px}
.bb-sub{color:var(--dim);font-size:14px;line-height:1.6;margin-bottom:28px}
.bb-bar{height:8px;background:var(--line);border-radius:4px;overflow:hidden;margin-bottom:12px}
.bb-bar i{display:block;height:100%;background:var(--accent);transition:width .4s}
.bb-count{font-family:var(--fm);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg)}

/* calibrating dial state */
.dialp-mid.calibrating b, .dial-mid b{opacity:1}
.dialp-mid.calibrating span{color:var(--accent);font-size:9px}
.dialp.cat-aim .dialp-fg, .dialp.cat-utility .dialp-fg, .dialp.cat-position .dialp-fg{opacity:1}
.dialp-mid.calibrating{opacity:.85}

/* calibrating benchmark marker — neutral, centered, dimmed */
.track .median.calibrating{background:var(--dim);opacity:.4;width:2px}

/* match detail page */
.match-head{text-align:center;padding:32px 0 24px;border-bottom:1px solid var(--line);margin-bottom:24px}
.match-map{font-family:var(--fd);font-size:calc(30px * var(--scale));font-weight:800;letter-spacing:.08em;margin-bottom:8px}
.match-score{font-family:var(--fm);font-size:calc(40px * var(--scale));font-weight:700}
.match-score span{color:var(--dim);margin:0 8px}
.match-date{color:var(--dim);font-family:var(--fm);font-size:12px;margin-top:6px}
.match-team{margin-bottom:28px}
.match-team-h{font-family:var(--fd);font-size:calc(13px * var(--scale));text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px;padding-left:4px}
.match-team.side-t .match-team-h{color:#e0a04a}
.match-team.side-ct .match-team-h{color:#5aa9e6}
.match-tbl{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:rgba(12,13,17,.72);backdrop-filter:blur(3px)}
.match-row{display:grid;grid-template-columns:2fr repeat(calc(var(--cols,10) - 1),1fr);align-items:center;padding:10px 14px;font-family:var(--fm);font-size:13px;border-bottom:1px solid var(--line)}
.match-row:last-child{border-bottom:none}
.match-row.head{background:var(--panel);color:var(--dim);font-size:11px;letter-spacing:.05em;text-transform:uppercase}
.match-row.me{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.match-cell{text-align:center}
.match-cell.name{text-align:left;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mcard:hover{border-color:var(--accent)}
.match-empty{max-width:520px;margin:60px auto;text-align:center;color:var(--dim);font-family:var(--fm);font-size:13px;line-height:1.6;padding:24px;border:1px dashed var(--line);border-radius:var(--r)}

/* Ascend rank tier badges */
.dialp-rank{margin-top:6px;font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;padding:3px 10px;border-radius:100px;display:inline-block}
.lb-tier{margin-left:10px;font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:.05em;
  padding:2px 8px;border-radius:100px;vertical-align:middle}
/* tier colours (shared) */
.tier-bronze{background:#5a3a2a44;color:#c48a5a;border:1px solid #7a4a2a}
.tier-silver{background:#6a6a7044;color:#c0c0cc;border:1px solid #8a8a95}
.tier-gold{background:#6a551a44;color:#e0b84a;border:1px solid #a08526}
.tier-platinum{background:#1a5a5a44;color:#5ad0d0;border:1px solid #2a8a8a}
.tier-diamond{background:#1a3a6a44;color:#6aa9ff;border:1px solid #2a5aa0}
.tier-master{background:#4a1a6a44;color:#b06aff;border:1px solid #7a2aa0}
.tier-elite{background:#6a1a2a44;color:#ff6a7a;border:1px solid #a02a3a}

/* full-area map background behind the match page UI.
   The boot inline style sets html,body{background:#0a0d12} which covers any
   pseudo-element; we must clear the BODY bg and paint the map on it directly. */
body.has-map-bg{
  background-image:linear-gradient(to bottom,rgba(8,8,10,.5),rgba(8,8,10,.8)),var(--map-bg-img)!important;
  background-size:cover!important;background-position:center!important;
  background-attachment:fixed!important;background-repeat:no-repeat!important;
}
/* clear the opaque fills stacked on top of the body so its bg shows through */
body.has-map-bg .app-root,
body.has-map-bg .main,
body.has-map-bg .main .wrap,
body.has-map-bg .site,
body.has-map-bg .topbar{background:transparent!important}

/* default SITE background — clean, restrained dark surface (NOT a photographic
   scene: a loud background photo reads as amateur). A deep gradient with two faint
   brand-tinted glows for warmth + depth. Fixed so it stays put while the page scrolls.
   (The old main.jpg photo layer was removed on purpose.) */
body.has-main-bg{
  background:
    radial-gradient(1000px 640px at 88% -12%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 62%),
    radial-gradient(880px 600px at 4% 112%, color-mix(in srgb, var(--accent2) 7%, transparent), transparent 62%),
    linear-gradient(178deg, color-mix(in srgb, var(--bg) 88%, #000) 0%, color-mix(in srgb, var(--bg) 80%, #000) 55%, color-mix(in srgb, var(--bg) 70%, #000) 100%) !important;
  background-size:cover!important; background-position:center!important;
  background-attachment:fixed!important; background-repeat:no-repeat!important;
}
/* HOME LAUNCHER ONLY — layer in the darkened Mirage as cinematic atmosphere. The home is
   a launcher so imagery suits it; data pages (profile etc.) keep the clean surface above
   so panels stay solid and stats stay readable. Scoped via the home's .dw-block. */
body.has-main-bg:has(.dw-block){
  background:
    radial-gradient(1000px 640px at 88% -12%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 60%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg) 84%, transparent) 0%,
      color-mix(in srgb, var(--bg) 89%, transparent) 44%,
      color-mix(in srgb, var(--bg) 94%, transparent) 74%,
      color-mix(in srgb, var(--bg) 86%, #000) 100%),
    url("/maps/mirage.jpg"),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg) 72%, #000)) !important;
  background-size:cover!important;
  background-position:center, center, center 58%, center !important;
  background-attachment:fixed!important; background-repeat:no-repeat!important;
}
/* clear the opaque container fills so the site background shows through —
   including the left nav sidebar (the topbar stays filled: it's sticky over the
   scrolling content, so a transparent one would let content bleed through it) */
body.has-main-bg .app-root,
body.has-main-bg .main,
body.has-main-bg .main .wrap,
body.has-main-bg .site,
body.has-main-bg .nav{background:transparent!important}
/* atmospheric backdrop: a REAL CS2 map (Mirage — clean, recognizable, on-theme), dimmed
   hard so it grounds the page with depth instead of shouting like the old fantasy art.
   Panels carry their own elevation (fill+border+shadow) so they still read on top. */
body.has-main-bg::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb, var(--ink) 5%, transparent) 1px, transparent 1.6px);
  background-size:44px 44px;
}

/* match page tabs + no-scroll */
body.match-noscroll .main{overflow:hidden!important}
.match-tabs{display:flex;gap:6px;justify-content:center;margin:0 0 22px;flex-wrap:wrap}
.match-tab{font-family:var(--fd);font-size:calc(13px * var(--scale));text-transform:uppercase;
  letter-spacing:.05em;padding:9px 18px;border:1px solid var(--line);border-radius:100px;
  background:rgba(12,13,17,.6);color:var(--dim);cursor:pointer;transition:all .15s}
.match-tab:hover{color:var(--fg);border-color:var(--dim)}
.match-tab.on{background:var(--accent);color:var(--bg);border-color:var(--accent);font-weight:700}
.match-panel{max-width:1100px;margin:0 auto}
.match-2d{text-align:center;color:var(--dim);font-family:var(--fm);font-size:14px;padding:60px 20px;
  border:1px dashed var(--line);border-radius:var(--r);background:rgba(12,13,17,.6)}
/* scoreboard rows get a subtle fill so names/stats read clearly over the map */
.match-row.head{background:rgba(20,20,26,.85)}
.match-row:not(.head):nth-child(even){background:rgba(255,255,255,.02)}

/* FACEIT "coming soon" placeholder + chip */
.faceit-soon{opacity:.92}
.soon-chip{font-family:var(--fm);font-size:9px;letter-spacing:.12em;vertical-align:middle;margin-left:8px;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);
  background:color-mix(in srgb,var(--accent) 12%,transparent)}
/* FACEIT lifetime stats grid */
.faceit-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;margin-top:14px}
.fstat{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:var(--r);padding:12px;text-align:center}
.fstat b{display:block;font-family:var(--fd);font-size:calc(20px * var(--scale));font-weight:800}
.fstat span{display:block;font-family:var(--fm);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--dim);margin-top:4px}

/* "left the match" emblem on the scoreboard (disconnected / kicked player) */
.match-dc{display:inline-flex;align-items:center;vertical-align:middle;margin-left:7px;color:#e0574d;opacity:.9}
.match-dc svg{width:13px;height:13px}

/* ── PLAY hub — server / workshop / tournament connect cards ── */
.site .srv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px}
.site .srv-card{display:flex;flex-direction:column;gap:9px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:calc(var(--pad) * 1.05)}
.site .srv-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.site .srv-type{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);padding:3px 9px;border-radius:999px}
.site .srv-region{font-family:var(--fm);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin-left:auto}
.site .srv-name{font-family:var(--fd);font-weight:800;font-size:calc(18px * var(--scale));line-height:1.08;margin:0}
.site .srv-desc{font-size:calc(12.5px * var(--scale));line-height:1.55;color:var(--dim);margin:0}
.site .srv-meta{display:flex;flex-wrap:wrap;gap:6px}
.site .srv-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:4px}
.site .srv-hint{font-family:var(--fm);font-size:10.5px;color:var(--dim);opacity:.85;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site .srv-countdown{font-family:var(--fm);font-size:12px;font-weight:700;color:var(--accent)}
.site .srv-connect{flex:none;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.site .comp-cta.ghost{background:transparent;color:var(--dim);border-color:var(--line);box-shadow:none}
.site .comp-cta.ghost:hover{color:var(--ink);border-color:var(--dim);filter:none;transform:none}

/* ══ Home — Ascend launcher (Play / Train / Compete / Profile) ══════
   Adapted from the ascend-homepage reference, re-skinned in our theme tokens. */
.site .dw-block{padding:0;animation:none}
.site .dw-doors{display:flex;gap:6px;min-height:min(58vh,600px)}
/* sub-banner launcher: header row (back + category title) */
.site .dw-subhead{display:flex;align-items:center;gap:18px;margin-bottom:16px;flex:none}
.site .dw-back{background:none;border:1px solid var(--line);color:var(--dim);font-family:var(--fd);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;font-size:calc(11px * var(--scale));padding:9px 16px;border-radius:4px;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .2s,border-color .2s}
.site .dw-back:hover{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.site .dw-back-arrow{font-size:15px;line-height:1;transition:transform .2s}
.site .dw-back:hover .dw-back-arrow{transform:translateX(-3px)}
.site .dw-subtitle{font-family:var(--fd);font-weight:700;font-size:calc(20px * var(--scale));text-transform:uppercase;
  letter-spacing:.16em;color:var(--ink)}
/* sub-doors carry no photo — give them an accent glow on hover instead */
.site .dw-door.dw-sub:hover{background:radial-gradient(135% 120% at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%)}

/* ── banner locks: admin publish/hide padlock + public "coming soon" ── */
.site .dw-lock{position:absolute;top:10px;right:10px;z-index:6;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;font-size:15px;line-height:1;cursor:pointer;
  border-radius:9px;border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 72%,transparent);
  color:var(--ink);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:.85;
  transition:transform .12s ease,border-color .12s ease,background .12s ease}
.site .dw-lock:hover{opacity:1;transform:scale(1.08);border-color:color-mix(in srgb,var(--accent) 60%,var(--line))}
.site .dw-lock.on{opacity:1;border-color:color-mix(in srgb,var(--accent) 65%,transparent);background:color-mix(in srgb,var(--accent) 22%,var(--bg))}
.site .dw-locktag{position:absolute;top:12px;right:12px;z-index:6;font-family:var(--fm);font-weight:700;
  font-size:9.5px;letter-spacing:.16em;padding:3px 8px;border-radius:6px;
  background:color-mix(in srgb,var(--bg) 72%,transparent);border:1px solid var(--line);color:var(--dim)}
.site .dw-locktag-adm{top:52px}   /* sits just below the admin padlock */
.site .dw-door.dw-locked{opacity:.42;filter:grayscale(.6);cursor:not-allowed;pointer-events:none}
.site .dw-door.dw-locked .dw-locktag{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,transparent)}
.site .dw-door.dw-locked-admin{outline:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);outline-offset:-4px}

/* ══════════ Play page: featured tournament + party + section banners ══════════ */
.site .play-view{display:block}
/* featured upcoming-tournament banner */
.site .play-feature{display:flex;align-items:center;justify-content:space-between;gap:24px;text-decoration:none;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));border-radius:var(--r);padding:22px 26px;margin-bottom:20px;
  background:linear-gradient(100deg, color-mix(in srgb,var(--accent) 18%,var(--panel)), var(--panel) 68%);
  transition:border-color .2s,transform .2s}
.site .play-feature:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);transform:translateY(-1px)}
.site .play-feature.empty{background:var(--panel);border-color:var(--line)}
.site .play-feat-inner{display:flex;flex-direction:column;gap:6px;min-width:0}
.site .play-feat-eyebrow{display:flex;align-items:center;gap:9px;font-family:var(--fm);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent)}
.site .play-feat-name{font-family:var(--fd);font-weight:700;font-size:calc(24px * var(--scale));text-transform:uppercase;
  letter-spacing:.02em;color:var(--ink);line-height:1.05}
.site .play-feat-sub{font-family:var(--fb);font-size:13px;color:var(--dim);line-height:1.5;max-width:64ch}
.site .play-feat-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.site .play-feat-cta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex:none;text-align:right}
.site .play-feat-countlabel{font-family:var(--fm);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.site .play-feat-count{font-family:var(--fd);font-weight:700;font-size:calc(30px * var(--scale));line-height:1;
  color:var(--accent);text-shadow:var(--glow);margin-bottom:8px}

/* party bar — 5 slots */
.site .party{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:16px 18px;margin-bottom:20px}
.site .party-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.site .party-title{font-family:var(--fd);font-weight:700;font-size:calc(13px * var(--scale));text-transform:uppercase;letter-spacing:.12em;color:var(--ink)}
.site .party-count{font-family:var(--fm);font-size:11px;color:var(--dim)}
.site .party-slots{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.site .party-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  min-height:120px;padding:14px 8px;border-radius:var(--r);text-align:center;box-sizing:border-box}
.site .party-slot.filled{border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  background:linear-gradient(180deg, color-mix(in srgb,var(--accent) 12%,var(--panel)), var(--panel))}
.site .party-slot.leader{border-color:color-mix(in srgb,var(--accent) 60%,var(--line));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent) inset}
.site .party-slot.empty{border:1px dashed var(--line);background:none;cursor:pointer;color:var(--dim);
  font-family:inherit;transition:border-color .18s,color .18s}
.site .party-slot.empty:hover{border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent)}
.site .party-av{width:52px;height:52px;border-radius:12px;object-fit:cover}
.site .party-av.ph{display:grid;place-items:center;background:var(--accent);color:#000;font-family:var(--fd);font-weight:700;font-size:22px}
.site .party-name{font-family:var(--fd);font-weight:600;font-size:13px;color:var(--ink);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.site .party-role{font-family:var(--fm);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.site .party-plus{font-size:26px;line-height:1;font-weight:300}
.site .party-invite{font-family:var(--fm);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
/* live party: pending (invited) slots, kick/leave ×, invite bar, leave/disband */
.site .party-slot{position:relative}
.site .party-slot.pending{border:1px dashed color-mix(in srgb,var(--accent) 40%,var(--line));opacity:.72}
.site .party-slot.pending .party-role{color:var(--dim)}
.site .party-x{position:absolute;top:6px;right:6px;width:20px;height:20px;border-radius:50%;border:1px solid var(--line);
  background:var(--panel);color:var(--dim);font-size:13px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:color .15s,border-color .15s}
.site .party-x:hover{color:var(--bad,#ff7b72);border-color:var(--bad,#ff7b72)}
.site .party-invite-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:var(--r);
  background:color-mix(in srgb,var(--accent) 8%,var(--panel));padding:10px 14px;margin-bottom:12px}
.site .party-invite-txt{font-family:var(--fb);font-size:13px;color:var(--dim)}
.site .party-invite-txt b{color:var(--ink)}
.site .party-invite-acts{display:flex;gap:8px}
.site .party-foot{display:flex;justify-content:flex-end;margin-top:12px}
.site .party-leave{font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:11px;
  padding:9px 16px;border-radius:var(--r);cursor:pointer;background:none;border:1px solid var(--line);color:var(--dim);transition:border-color .15s,color .15s}
.site .party-leave:hover{border-color:var(--bad,#ff7b72);color:var(--bad,#ff7b72)}
/* invite picker modal list */
.invite-list{display:flex;flex-direction:column;gap:2px;max-height:300px;overflow-y:auto;margin-bottom:16px}

/* section banners (Matchmaking / Servers / Workshop / Tournaments) */
.site .play-banners{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.site .play-banner{min-height:clamp(340px,52vh,560px)}
.site .play-secbody{margin-top:4px}

/* matchmaking coming-soon panel */
.site .mm-panel{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);padding:40px 30px;
  text-align:center;max-width:520px;margin:8px auto}
.site .mm-icon{font-size:34px;margin-bottom:10px}
.site .mm-panel h3{font-family:var(--fd);font-weight:700;font-size:calc(18px * var(--scale));text-transform:uppercase;letter-spacing:.08em;margin:0 0 8px}
.site .mm-panel p{font-family:var(--fb);font-size:13px;color:var(--dim);line-height:1.6;margin:0 0 14px}
.site .mm-queue{font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px}
.site .mm-status{min-height:40px;display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:16px}
.site .mm-search{display:flex;align-items:center;gap:12px;font-family:var(--fm);font-size:13px;color:var(--fg)}
.site .mm-spinner{width:18px;height:18px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:mmspin .7s linear infinite;flex:none}
@keyframes mmspin{to{transform:rotate(360deg)}}
.site .mm-found{font-family:var(--fb);font-size:13px;color:var(--fg)}
.site .mm-found b{color:var(--accent)}
.site .mm-fail{font-family:var(--fm);font-size:12px;color:var(--bad,#ff7b72);line-height:1.5}
.site .mm-find.cancel{background:none;border:1px solid var(--line);color:var(--dim)}
.site .mm-join{display:inline-block;margin-top:2px}
/* play section tabs (under the party) */
.site .play-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 16px;border-bottom:1px solid var(--line);padding-bottom:12px}
.site .play-tab{background:var(--panel);border:1px solid var(--line);color:var(--dim);cursor:pointer;
  font-family:var(--fd);font-weight:700;text-transform:uppercase;letter-spacing:.05em;font-size:calc(12px * var(--scale));
  padding:9px 16px;border-radius:8px;transition:color .15s,border-color .15s,background .15s}
.site .play-tab:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.site .play-tab.active{color:var(--ink);border-color:color-mix(in srgb,var(--accent) 60%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,var(--panel)),var(--panel))}
.site .play-tab.locked{opacity:.7}
.site .party-slot.ghost{opacity:.5}
/* matchmaking queue states */
.site .mm-searchbig{display:flex;justify-content:center;padding:6px 0 2px}
.site .mm-searchbig .mm-spinner{width:34px;height:34px;border-width:3px}
.site .mm-timer{font-family:var(--fd);font-weight:800;font-size:calc(34px * var(--scale));color:var(--accent);
  font-variant-numeric:tabular-nums;text-shadow:var(--glow);margin:2px 0}
/* match room */
.site .mm-room{display:flex;flex-direction:column;align-items:center;gap:12px}
.site .mm-room-badge{font-family:var(--fm);font-weight:700;letter-spacing:.16em;text-transform:uppercase;font-size:11px;
  color:var(--good,#6ee787);background:color-mix(in srgb,var(--good,#6ee787) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--good,#6ee787) 40%,transparent);padding:5px 12px;border-radius:999px}
.site .mm-room-map{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 26px;border-radius:var(--r);min-width:200px;
  background:color-mix(in srgb,var(--accent) 10%,var(--panel));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line))}
.site .mm-map-label{font-family:var(--fm);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.site .mm-map-name{font-family:var(--fd);font-weight:800;font-size:calc(28px * var(--scale));color:var(--ink);line-height:1}
.site .mm-map-state{font-family:var(--fm);font-size:10px;letter-spacing:.08em;text-transform:uppercase;margin-top:2px}
.site .mm-map-state.locked{color:var(--good,#6ee787)}
.site .mm-map-state.soft{color:var(--dim)}
.site .mm-room-sub{font-family:var(--fb);font-size:12.5px;color:var(--dim);text-align:center;max-width:340px}
.site .mm-join.disabled{opacity:.45;pointer-events:none}
.site .mm-leaveroom{background:none;border:0;color:var(--dim);cursor:pointer;font-family:var(--fm);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:4px}
.site .mm-leaveroom:hover{color:var(--bad,#ff7b72)}
/* app-wide floating matchmaking queue widget */
.mmwatch{position:fixed;right:20px;bottom:20px;z-index:120;display:flex;align-items:center;gap:11px;cursor:pointer;
  background:#12141a;border:1px solid #20242e;border-radius:12px;padding:11px 13px;min-width:236px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);color:#eef1f7;font-family:'Inter',system-ui,sans-serif}
.mmwatch.found{border-color:color-mix(in srgb,#6ee787 55%,#20242e);background:linear-gradient(180deg,color-mix(in srgb,#6ee787 14%,#12141a),#12141a)}
.mmw-spin{width:16px;height:16px;border:2px solid #2a2f3a;border-top-color:#ff6a2b;border-radius:50%;animation:mmspin .7s linear infinite;flex:none}
.mmw-badge{width:20px;height:20px;border-radius:50%;background:#6ee787;color:#08130a;display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.mmw-main{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.mmw-main b{font-size:13px;font-weight:700}
.mmw-sub{font-size:10.5px;color:#98a2b3}
.mmw-time{font-family:'JetBrains Mono',ui-monospace,monospace;font-weight:700;font-size:15px;color:#ff8a4c;font-variant-numeric:tabular-nums}
.mmw-go{font-family:'Barlow Condensed',sans-serif;font-weight:800;letter-spacing:.04em;color:#6ee787;font-size:15px}
.mmw-x{background:none;border:0;color:#7a8290;cursor:pointer;font-size:17px;line-height:1;padding:0 2px;flex:none}
.mmw-x:hover{color:#ff7b72}
@media(max-width:560px){ .mmwatch{left:14px;right:14px;bottom:14px;min-width:0} }

@media(max-width:880px){
  .site .play-banners{grid-template-columns:repeat(2,1fr)}
  .site .party-slots{grid-template-columns:repeat(3,1fr)}
  .site .play-feature{flex-direction:column;align-items:flex-start}
  .site .play-feat-cta{align-items:flex-start;text-align:left}
}
.site .dw-door{position:relative;flex:1 1 0;min-width:0;overflow:clip;overflow-clip-margin:40px;text-decoration:none;color:var(--ink);cursor:pointer;
  display:flex;flex-direction:column;justify-content:space-between;padding:38px 28px 30px;
  border:1px solid var(--line);border-radius:var(--r);
  transition:flex-grow .55s cubic-bezier(.19,1,.22,1),border-color .4s ease}
/* banners no longer resize on hover — they stay put and "open" instead (see .dw-smoke).
   The hovered banner's border lights up in its own door-glow colour. */
.site .dw-door:hover{border-color:color-mix(in srgb,var(--door-glow,var(--accent)) 55%,var(--line))}

/* Each banner shows its CS2 photo AT REST — that's the first impression, so it
   should be a rich cinematic card, not an empty dark panel. A slow ken-burns zoom
   on hover keeps it alive. */
.site .dw-photo{position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:1;transform:scale(1.02);transition:transform 1.4s cubic-bezier(.19,1,.22,1),opacity .5s ease}
.site .dw-door:hover .dw-photo{opacity:1;transform:scale(1.07)}
/* self-contained scrim over the photo: dark top for a crisp title, the map
   breathing through the middle, dark base to ground the CTA. */
.site .dw-scrim{position:absolute;inset:0;opacity:1;transition:opacity .5s;
  background:linear-gradient(180deg, rgba(6,7,11,.82) 0%, rgba(6,7,11,.34) 40%, rgba(6,7,11,.42) 62%, rgba(6,7,11,.8) 86%, rgba(6,7,11,.97) 100%)}
/* a soft glow in the banner's own colour rises from the base — identity at rest */
.site .dw-door::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;
  background:linear-gradient(0deg, color-mix(in srgb,var(--door-glow,var(--accent)) 26%,transparent) 0%, transparent 34%);
  opacity:.55;transition:opacity .45s ease}
.site .dw-door:hover::after{opacity:.9}

/* ── per-banner DOOR-GLOW colour — change these hex values to recolour each banner's
      glow + smoke (one line each). ─────────────────────────────────────────────── */
.site .dw-play{--door-glow:#ff6a2b;--door-img:url("/home/door-play.jpg")}
.site .dw-train{--door-glow:#3f8fe0;--door-img:url("/home/door-train.jpg")}
.site .dw-compete{--door-glow:#9b6dff;--door-img:url("/home/door-compete.jpg")}
.site .dw-profile{--door-glow:#2fd0a4;--door-img:url("/home/door-profile.jpg")}

/* ── the door OPENS on hover: a glowing edge rises from the bottom to ~75% and the text
      lifts up and out with it. The revealed space is OPAQUE (a dark interior) with glowing
      smoke flowing up through the opening. Rising motion animates in a real browser. ───── */
.site .dw-open{position:absolute;left:0;right:0;bottom:0;height:0;opacity:0;z-index:1;pointer-events:none;
  transition:height .6s cubic-bezier(.22,.9,.24,1),opacity .3s ease;
  /* per-door action image (var --door-img) behind a darkening overlay so the edge/button read */
  background-image:
    linear-gradient(to top, color-mix(in srgb,var(--bg) 60%,transparent) 0%, color-mix(in srgb,var(--bg) 34%,transparent) 100%),
    var(--door-img, linear-gradient(color-mix(in srgb,var(--bg) 82%,#000),color-mix(in srgb,var(--bg) 82%,#000)));
  background-size:cover;background-position:center bottom;background-repeat:no-repeat;
  border-top:2px solid color-mix(in srgb,var(--door-glow,var(--accent)) 92%,transparent);   /* the lifting door edge */
  box-shadow:0 -12px 34px -6px color-mix(in srgb,var(--door-glow,var(--accent)) 58%,transparent)}
.site .dw-door:hover .dw-open{height:75%;opacity:1}

/* (door smoke removed — the door still opens to a dark glowing-edged interior) */

/* the door FACE = text + button; lifts as one unit on hover. The title/desc fade out as
   they leave the top; the button keeps rising and STAYS visible, landing on the ~top bar. */
.site .dw-face{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .6s cubic-bezier(.22,.9,.24,1)}
.site .dw-door:hover .dw-face{transform:translateY(-82%)}
.site .dw-content{position:relative;transition:opacity .35s ease}
.site .dw-door:hover .dw-content{opacity:0}   /* title + description fade as the face lifts */
.site .dw-index{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.2em;color:var(--accent);opacity:.85;margin-bottom:14px;transition:color .4s,opacity .4s}
.site .dw-door:hover .dw-index{color:var(--accent);opacity:1}
.site .dw-title{display:block;font-family:var(--fd);font-weight:800;text-transform:uppercase;
  font-size:clamp(26px,2.6vw,42px);line-height:1.02;letter-spacing:.01em;color:var(--ink);
  text-shadow:0 2px 22px rgba(0,0,0,.62),0 1px 3px rgba(0,0,0,.55)}
.site .dw-desc{display:block;font-family:var(--fb);font-size:13px;line-height:1.55;color:color-mix(in srgb,var(--ink) 60%,var(--dim));margin-top:14px;max-width:280px;
  opacity:.92;transform:none;transition:opacity .4s ease,color .4s ease;text-shadow:0 1px 10px rgba(0,0,0,.55)}
.site .dw-door:hover .dw-desc{opacity:1;color:color-mix(in srgb,var(--ink) 82%,var(--dim))}

.site .dw-foot{position:relative}   /* button rides up on the face and stays visible on the top bar */
.site .dw-enter{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  font-family:var(--fd);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  background:color-mix(in srgb,var(--ink) 9%,transparent);border:1px solid color-mix(in srgb,var(--ink) 28%,transparent);
  padding:13px 18px;border-radius:8px;backdrop-filter:blur(6px);
  transition:background .25s,border-color .25s,gap .25s,color .25s}
.site .dw-door:hover .dw-enter{background:color-mix(in srgb,var(--accent) 22%,transparent);
  border-color:color-mix(in srgb,var(--accent) 55%,transparent);color:var(--ink);gap:16px}
/* Play is the primary action — solid accent button */
.site .dw-play .dw-enter{background:var(--accent);border-color:var(--accent);color:#0a0b10}
.site .dw-play:hover .dw-enter{background:color-mix(in srgb,var(--accent) 86%,#fff);border-color:var(--accent);color:#0a0b10}
.site .dw-arrow{display:inline-block;transition:transform .3s}
.site .dw-door:hover .dw-enter .dw-arrow{transform:translateX(2px)}

/* progress banner — plain + transparent at rest (page bg shows through), expands
   UPWARD on hover to reveal challenges, and fades in a photo + scrim like the banners */
/* Static challenge banner — fixed height, challenges preview + photo always shown (no hover extend). */
.site .dw-progress{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  margin:0 0 10px;padding:20px 22px;overflow:hidden;text-decoration:none;color:inherit;cursor:pointer;
  background:color-mix(in srgb,var(--panel) 60%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .4s}
.site .dw-progress:hover{border-color:color-mix(in srgb,var(--ink) 18%,transparent)}
.site .dw-pphoto{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center 32%;opacity:.9}
.site .dw-pscrim{position:absolute;inset:0;z-index:0;opacity:1;
  background:linear-gradient(180deg, rgba(6,7,11,.55) 0%, rgba(6,7,11,.72) 45%, rgba(6,7,11,.9) 100%)}
.site .dw-pexpand{position:relative;z-index:1;opacity:1;margin-bottom:18px}
.site .dw-pexpand-title{display:block;font-family:var(--fm);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);opacity:.7;margin-bottom:10px}
.site .dw-pexpand-list{display:flex;gap:28px;flex-wrap:wrap}
.site .dw-pmini{display:flex;flex-direction:column;gap:4px;min-width:150px}
.site .dw-pmini-label{font-size:12px;color:var(--dim)}
.site .dw-pmini-bar{height:3px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden}
.site .dw-pmini-bar > i{display:block;height:100%;background:var(--accent);border-radius:2px}
.site .dw-pmini-count{font-family:var(--fm);font-size:10px;color:var(--dim);opacity:.7}
.site .dw-prow{position:relative;z-index:1;display:flex;align-items:center;gap:34px;flex-wrap:wrap}
.site .dw-pgroup{display:flex;flex-direction:column;gap:3px}
.site .dw-plabel{font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);opacity:.85}
.site .dw-pvalue{font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:.01em;color:var(--ink)}
.site .dw-pvalue.accent{color:var(--accent)}
.site .dw-pdiv{width:1px;height:26px;background:var(--line)}
.site .dw-pchallenge{display:flex;align-items:center;gap:12px;flex:1;min-width:220px}
.site .dw-pbar{flex:1;height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;max-width:180px}
.site .dw-pbar > i{display:block;height:100%;background:var(--accent);border-radius:2px}
.site .dw-penter{display:inline-flex;align-items:center;gap:10px;white-space:nowrap;
  font-family:var(--fm);font-size:12px;letter-spacing:.13em;color:var(--ink);
  background:rgba(255,255,255,.04);border:1px solid color-mix(in srgb,var(--ink) 18%,transparent);padding:12px 18px;border-radius:3px;
  transition:background .3s,border-color .3s,gap .3s,color .3s}
.site .dw-progress:hover .dw-penter{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent);gap:16px}
.site .dw-penter .dw-arrow{display:inline-block;transition:transform .3s}
.site .dw-progress:hover .dw-penter .dw-arrow{transform:translateX(2px)}

/* ── Challenges page ── */
.chal-block .lede{max-width:660px}
.chal-tabs{display:flex;gap:2px;margin-top:22px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.chal-tab{appearance:none;background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;
  padding:10px 16px;cursor:pointer;font-family:var(--fm);font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dim);transition:color .2s,border-color .2s}
.chal-tab:hover{color:var(--ink)}
.chal-tab.on{color:var(--accent);border-bottom-color:var(--accent)}
.chal-view{margin-top:2px}
.chal-sec{margin-top:24px}
.chal-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.chal-sectitle{margin:0;font-family:var(--fd);font-weight:700;font-size:18px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.chal-secnote{font-family:var(--fm);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim);text-align:right}
.chal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.chal-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;display:flex;flex-direction:column;gap:11px;position:relative}
.chal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.chal-head-meta{display:flex;align-items:center;gap:7px;flex:none}
.chal-name{font-size:14px;font-weight:600;color:var(--ink);line-height:1.35}
.chal-reward{flex:none;font-family:var(--fm);font-size:11px;letter-spacing:.03em;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);
  padding:3px 9px;border-radius:20px;white-space:nowrap}
.chal-tier{flex:none;font-family:var(--fm);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border-radius:20px;color:#0a0b0f}
.chal-tier.t-bronze{background:#cd8b5f}.chal-tier.t-silver{background:#c7cdd6}.chal-tier.t-gold{background:#f2c14e}
.chal-tier.t-diamond{background:#8fd3ff}.chal-tier.t-master{background:#c99bff}.chal-tier.t-elite{background:#ff8f6a}
.chal-bar{height:6px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}
.chal-bar > i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .4s ease}
.chal-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.chal-count{font-family:var(--fm);font-size:11px;color:var(--dim)}
.chal-tag{font-family:var(--fm);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.chal-tag.ok{color:var(--good,#3ddc84)}
.chal-tag.active{color:var(--accent)}
.chal-tag.lock{color:var(--dim);opacity:.85}
/* per-state cards: done (green), active (accent edge = advanceable), locked (dim) */
.chal-card.st-done{border-color:color-mix(in srgb,var(--good,#3ddc84) 26%,var(--line))}
.chal-card.st-done .chal-bar > i{background:var(--good,#3ddc84)}
.chal-card.st-active{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.chal-card.st-locked{opacity:.6;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.chal-card.st-locked .chal-name{color:var(--dim)}
.chal-card.st-locked .chal-reward{color:var(--dim);background:rgba(255,255,255,.04);border-color:var(--line)}
.chal-lockhint{font-size:11px;color:var(--dim);font-style:italic}
/* featured active-ranked card on the Overview tab */
.chal-featured-wrap{display:block}
.chal-card.featured{padding:20px 22px;gap:14px;
  background:linear-gradient(135deg, color-mix(in srgb,var(--accent) 13%,var(--panel)) 0%, var(--panel) 62%);
  border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
.chal-card.featured .chal-name{font-size:17px}
.chal-card.featured .chal-bar{height:8px}
.chal-empty{font-size:13px;color:var(--dim);padding:6px 2px}
.chal-note{margin-top:26px;font-size:12px;color:var(--dim);max-width:660px;line-height:1.5}

/* ── Ascend Rank page ── */
.rank-block .lede{max-width:660px}
/* rank background gradients (shared by hero, sub-badges and summit cards) */
.rank-bg-apprentice{background:linear-gradient(135deg,#7a5636,#3a2a1c)}
.rank-bg-novice{background:linear-gradient(135deg,#616e7e,#333a45)}
.rank-bg-master{background:linear-gradient(135deg,#d3a13a,#7a561a)}
.rank-bg-ascendant{background:linear-gradient(135deg,#20b0a0,#0d5666)}
.rank-bg-luminary{background:linear-gradient(135deg,#f6bd46,#a85f1a)}
.rank-bg-celestial{background:linear-gradient(135deg,#5171e0,#272a72)}
.rank-bg-empyrean{background:linear-gradient(135deg,#a94fd9,#54187a)}
.rank-bg-zenith{background:linear-gradient(120deg,#22d3ee 0%,#8b5cf6 42%,#ec4899 74%,#f59e0b 100%)}
/* current-rank hero */
.rank-hero{position:relative;display:flex;align-items:center;gap:22px;margin-top:22px;padding:22px 24px;border-radius:var(--r);
  border:1px solid color-mix(in srgb,#fff 12%,transparent);overflow:hidden;color:#fff}
.rank-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,9,13,.66),rgba(8,9,13,.28) 60%,rgba(8,9,13,.5));z-index:0}
.rank-hero > *{position:relative;z-index:1}
.rank-medal{flex:none;width:72px;height:72px;border-radius:14px;display:grid;place-items:center;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.35);box-shadow:0 4px 18px rgba(0,0,0,.35)}
.rank-medal-mark{font-family:var(--fd);font-weight:700;font-size:30px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.5)}
.rank-hero-info{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.rank-hero-lab{font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.rank-hero-name{font-family:var(--fd);font-weight:700;font-size:30px;letter-spacing:.01em;line-height:1;text-shadow:0 1px 6px rgba(0,0,0,.45)}
.rank-hero-meta{display:flex;gap:12px;align-items:center}
.rank-hero-rp{font-family:var(--fm);font-size:12px;color:rgba(255,255,255,.9)}
.rank-next{margin-top:8px;max-width:360px}
.rank-next-lab{display:flex;justify-content:space-between;gap:12px;font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.82);margin-bottom:6px}
.rank-next-pct{color:#fff}
.rank-nbar{height:6px;background:rgba(0,0,0,.32);border-radius:3px;overflow:hidden}
.rank-nbar > i{display:block;height:100%;background:#fff;border-radius:3px;transition:width .5s ease}
/* numbered ladder */
.rank-ladder{margin-top:24px;display:flex;flex-direction:column;gap:12px}
.rank-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.rank-row-name{flex:none;width:104px;font-family:var(--fd);font-weight:700;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.rank-subs{display:flex;gap:10px;flex-wrap:wrap}
.rank-sub{position:relative;width:52px;height:52px;border-radius:11px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.14);opacity:.9}
.rank-sub-rn{font-family:var(--fd);font-weight:700;font-size:17px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.rank-sub.is-passed{opacity:.4}
.rank-sub.is-cur{outline:2px solid var(--accent);outline-offset:2px;opacity:1;box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%,transparent)}
.rank-you{position:absolute;bottom:-9px;left:50%;transform:translateX(-50%);font-family:var(--fm);font-size:8px;font-weight:700;
  letter-spacing:.1em;background:var(--accent);color:#0a0b0f;padding:2px 6px;border-radius:10px;white-space:nowrap}
/* summit ranks */
.rank-sechead{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-top:30px;margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.rank-sectitle{margin:0;font-family:var(--fd);font-weight:700;font-size:18px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink)}
.rank-secnote{font-family:var(--fm);font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.rank-elite-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px}
.rank-elite-card{position:relative;min-height:132px;border-radius:var(--r);padding:16px;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;
  border:1px solid rgba(255,255,255,.16);overflow:hidden;color:#fff;box-shadow:0 6px 20px rgba(0,0,0,.3)}
.rank-elite-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,13,.05),rgba(8,9,13,.55));z-index:0}
.rank-elite-card > *{position:relative;z-index:1}
.rank-elite-star{font-size:18px;color:rgba(255,255,255,.9);text-shadow:0 1px 4px rgba(0,0,0,.5)}
.rank-elite-name{font-family:var(--fd);font-weight:700;font-size:19px;letter-spacing:.02em;text-shadow:0 1px 5px rgba(0,0,0,.5)}
.rank-elite-card.is-passed{opacity:.55}
.rank-elite-card.is-cur{outline:2px solid #fff;outline-offset:-1px;box-shadow:0 0 22px rgba(255,255,255,.35),0 6px 20px rgba(0,0,0,.3)}
.rank-elite-card .rank-you{bottom:auto;top:12px;left:auto;right:12px;transform:none}

/* HOME fills the viewport: gap on top, banners grow to fill, progress banner at
   the bottom; the page never scrolls. Scoped with :has to the home page only. */
@media(min-width:881px){
  .main:has(.dw-block){display:flex;flex-direction:column;overflow:hidden}
  .main:has(.dw-block) > .topbar{flex:none}
  .main:has(.dw-block) > .site{flex:1;min-height:0}
  .main:has(.dw-block) .wrap{max-width:none;height:100%;display:flex;flex-direction:column;box-sizing:border-box;padding:30px 30px 22px}
  .main:has(.dw-block) .dw-block{flex:1;display:flex;flex-direction:column;min-height:0;padding:0}
  .main:has(.dw-block) .dw-doors{flex:1;min-height:0}
}
@media(max-width:880px){
  .site .dw-doors{flex-direction:column;min-height:auto}
  .site .dw-door{min-height:150px;padding:26px 24px}
  .site .dw-doors:has(.dw-door:hover) .dw-door{flex-grow:1}
  .site .dw-doors:has(.dw-door:hover) .dw-door:hover{flex-grow:1}
  .site .dw-desc{opacity:1;transform:none}
  .site .dw-prow{gap:16px 20px}
}

/* ══ Competitions (ladder system) ══════════════════════════════════ */
.site .comp-thesis{font-family:var(--fm);font-size:calc(13px * var(--scale));letter-spacing:.02em;
  color:var(--dim);margin:2px 0 20px}
.site .comp-note{font-family:var(--fm);font-size:10.5px;line-height:1.6;color:var(--dim);opacity:.8;
  margin-top:14px;max-width:70ch}
.site .comp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}

.site .comp-card{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:calc(var(--pad) * 1.15);display:flex;flex-direction:column;gap:13px}
.site .comp-card[data-kind="monthly_elite"]{border-color:color-mix(in srgb,var(--accent) 32%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 14%,transparent) inset}

.site .comp-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.site .comp-ident{display:flex;flex-direction:column;gap:7px;min-width:0}
.site .comp-access{align-self:flex-start;font-family:var(--fm);font-size:9px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid transparent}
.site .comp-access.free{color:var(--accent2);background:color-mix(in srgb,var(--accent2) 14%,transparent);
  border-color:color-mix(in srgb,var(--accent2) 40%,transparent)}
.site .comp-access.sub{color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent);
  border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.site .comp-name{font-family:var(--fd);font-weight:800;font-size:calc(21px * var(--scale));line-height:1.05;
  letter-spacing:.01em;margin:0}
.site .comp-clock{display:flex;flex-direction:column;align-items:flex-end;flex:none;text-align:right}
.site .comp-clock-lab{font-family:var(--fm);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.site .comp-cd{font-family:var(--fm);font-weight:700;font-size:calc(15px * var(--scale));color:var(--accent);
  font-variant-numeric:tabular-nums;margin-top:3px;white-space:nowrap}
.site .comp-blurb{font-size:calc(13px * var(--scale));line-height:1.6;color:var(--dim);margin:0;max-width:60ch}

.site .comp-prize{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:calc(var(--pad) * .75);border:1px solid var(--line);border-radius:calc(var(--r) * .8);
  background:color-mix(in srgb,var(--accent) 6%,transparent)}
.site .comp-pool{display:flex;flex-direction:column;gap:2px}
.site .comp-pool-lab{font-family:var(--fm);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}
.site .comp-pool b{font-family:var(--fd);font-weight:800;font-size:calc(26px * var(--scale));line-height:1;
  color:var(--accent);text-shadow:var(--glow)}
.site .comp-split{display:flex;gap:6px;flex-wrap:wrap}
.site .comp-place{display:flex;flex-direction:column;align-items:center;gap:1px;font-family:var(--fm);
  font-size:calc(12px * var(--scale));font-weight:700;color:var(--ink);padding:5px 9px;
  border:1px solid var(--line);border-radius:calc(var(--r) * .6);background:var(--bg);min-width:52px}
.site .comp-place i{font-style:normal;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}

.site .comp-standing{display:flex;align-items:center;gap:11px;flex-wrap:wrap;padding:9px calc(var(--pad) * .75);
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));border-radius:calc(var(--r) * .8);
  background:color-mix(in srgb,var(--accent) 8%,transparent)}
.site .comp-you-rank{font-family:var(--fd);font-weight:800;font-size:calc(20px * var(--scale));color:var(--accent);line-height:1}
.site .comp-you-meta{font-family:var(--fm);font-size:11px;color:var(--dim)}
.site .comp-you-goal{margin-left:auto;font-family:var(--fm);font-size:11px;font-weight:700;color:var(--accent);
  padding:4px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent) 12%,transparent);white-space:nowrap}
.site .comp-you-goal.lead{color:var(--good,#3ddc84);background:color-mix(in srgb,var(--good,#3ddc84) 14%,transparent)}

.site .comp-lb{border-radius:calc(var(--r) * .8)}
.site .comp-lb .lb-rowhead,.site .comp-lb .lb-row{grid-template-columns:40px 1fr auto;gap:11px;padding:9px 10px}
.site .comp-lb .lb-rowhead{color:var(--dim)}
.site .comp-demo{margin-left:8px;font-family:var(--fm);font-size:8.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);opacity:.6;border:1px solid var(--line);border-radius:4px;padding:1px 5px;vertical-align:middle}

.site .comp-foot{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.site .comp-cta{font-family:var(--fm);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:10px 16px;border-radius:calc(var(--r) * .7);border:1px solid var(--accent);cursor:pointer;
  color:var(--bg);background:var(--accent);box-shadow:var(--glow);transition:transform .12s,filter .12s}
.site .comp-cta:hover{filter:brightness(1.08);transform:translateY(-1px)}
.site .comp-cta.locked{background:transparent;color:var(--dim);border-color:var(--line);box-shadow:none;cursor:not-allowed}
.site .comp-cta.locked:hover{filter:none;transform:none}
.site .comp-rulesbtn{font-family:var(--fm);font-size:11px;letter-spacing:.05em;padding:10px 14px;cursor:pointer;
  color:var(--dim);background:transparent;border:1px solid var(--line);border-radius:calc(var(--r) * .7);transition:color .12s,border-color .12s}
.site .comp-rulesbtn:hover{color:var(--ink);border-color:var(--dim)}

.site .comp-rules{display:none;padding-top:4px;border-top:1px solid var(--line)}
.site .comp-card[data-rules="1"] .comp-rules{display:block}
.site .comp-rules-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.site .comp-rules-list li{position:relative;padding-left:18px;font-size:calc(12.5px * var(--scale));line-height:1.55;color:var(--dim)}
.site .comp-rules-list li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;border-radius:1px;background:var(--accent)}
.site .comp-pledge{margin:12px 0 2px;font-size:calc(12px * var(--scale));line-height:1.6;font-style:italic;
  color:var(--ink);padding:9px 11px;border-left:2px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:0 calc(var(--r) * .6) calc(var(--r) * .6) 0}

/* ── Competitions: sub-nav + tournaments hub ── */
.site .comp-subnav{display:flex;gap:6px;margin:2px 0 20px;border-bottom:1px solid var(--line);padding-bottom:0}
.site .comp-subtab{font-family:var(--fm);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  padding:10px 4px;margin-bottom:-1px;cursor:pointer;color:var(--dim);background:transparent;
  border:none;border-bottom:2px solid transparent;transition:color .12s,border-color .12s}
.site .comp-subtab:hover{color:var(--ink)}
.site .comp-subtab[data-on="1"]{color:var(--accent);border-bottom-color:var(--accent)}
.site .comp-subtab+.comp-subtab{margin-left:16px}

.site .tourn-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px}
.site .tourn-card{display:flex;flex-direction:column;gap:9px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:calc(var(--pad) * 1.05);cursor:pointer;
  transition:transform .13s,border-color .13s,box-shadow .13s}
.site .tourn-card:hover,.site .tourn-card:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 45%,var(--line));
  box-shadow:0 10px 30px rgba(0,0,0,.35);outline:none}
.site .tourn-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.site .tourn-disc{font-family:var(--fm);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);opacity:.8}
.site .tourn-status{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;border:1px solid transparent;display:inline-flex;align-items:center;gap:6px}
.site .tourn-status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.site .tourn-status.s-open{color:var(--good,#3ddc84);background:color-mix(in srgb,var(--good,#3ddc84) 13%,transparent);border-color:color-mix(in srgb,var(--good,#3ddc84) 40%,transparent)}
.site .tourn-status.s-live{color:var(--accent);background:color-mix(in srgb,var(--accent) 15%,transparent);border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.site .tourn-status.s-live::before{animation:tpulse 1.4s ease-in-out infinite}
.site .tourn-status.s-soon{color:var(--accent2);background:color-mix(in srgb,var(--accent2) 14%,transparent);border-color:color-mix(in srgb,var(--accent2) 40%,transparent)}
.site .tourn-status.s-done{color:var(--dim);background:color-mix(in srgb,var(--dim) 12%,transparent);border-color:var(--line)}
@keyframes tpulse{0%,100%{opacity:1}50%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.site .tourn-status.s-live::before{animation:none}.site .tourn-card{transition:none}}
.site .tourn-name{font-family:var(--fd);font-weight:800;font-size:calc(19px * var(--scale));line-height:1.08;margin:0}
.site .tourn-host{font-family:var(--fm);font-size:10.5px;color:var(--dim);display:flex;align-items:center;gap:7px}
.site .tourn-official{font-family:var(--fm);font-size:8.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent);background:color-mix(in srgb,var(--accent) 13%,transparent);padding:2px 7px;border-radius:4px}
.site .tourn-blurb{font-size:calc(12.5px * var(--scale));line-height:1.55;color:var(--dim);margin:0}
.site .tourn-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:1px}
.site .tourn-chip{display:flex;flex-direction:column;gap:1px;font-family:var(--fm);font-size:calc(12px * var(--scale));
  font-weight:700;color:var(--ink);padding:5px 9px;border:1px solid var(--line);border-radius:calc(var(--r) * .55);background:var(--bg)}
.site .tourn-chip i{font-style:normal;font-size:8px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
.site .tourn-cardfoot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;padding-top:4px}
.site .tourn-entry{font-family:var(--fm);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;border:1px solid transparent}
.site .tourn-entry.free{color:var(--good,#3ddc84);background:color-mix(in srgb,var(--good,#3ddc84) 12%,transparent);border-color:color-mix(in srgb,var(--good,#3ddc84) 36%,transparent)}
.site .tourn-entry.sub{color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
.site .tourn-entry.inv{color:var(--dim);background:color-mix(in srgb,var(--dim) 12%,transparent);border-color:var(--line)}
.site .tourn-go{font-family:var(--fm);font-size:11px;font-weight:700;color:var(--accent)}
.site .tourn-go.joined{color:var(--good,#3ddc84)}

.site .tourn-hostcard{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:150px;border:1.5px dashed var(--line);border-radius:var(--r);background:transparent;color:var(--dim);
  cursor:not-allowed;font-family:var(--fb);padding:16px;text-align:center}
.site .tourn-hostcard b{font-family:var(--fd);font-weight:700;font-size:calc(16px * var(--scale));color:var(--dim)}
.site .tourn-hostplus{font-size:26px;line-height:1;color:var(--dim);opacity:.6}
.site .tourn-hostsub{font-family:var(--fm);font-size:9.5px;letter-spacing:.05em;color:var(--dim);opacity:.75}

/* detail view */
.site .tourn-back{font-family:var(--fm);font-size:11px;letter-spacing:.04em;color:var(--dim);background:transparent;
  border:none;cursor:pointer;padding:2px 0;margin-bottom:16px}
.site .tourn-back:hover{color:var(--accent)}
.site .tourn-detail{display:flex;flex-direction:column;gap:16px}
.site .tourn-dhead{display:flex;flex-direction:column;gap:9px}
.site .tourn-drow{display:flex;flex-wrap:wrap;gap:8px}
.site .tourn-dtitle{font-family:var(--fd);font-weight:800;font-size:calc(30px * var(--scale));line-height:1.02;margin:0}
.site .tourn-dsub{font-family:var(--fm);font-size:11.5px;color:var(--dim);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.site .tourn-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.site .tourn-fact{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border:1px solid var(--line);border-radius:calc(var(--r) * .7);background:var(--panel)}
.site .tourn-fact-l{font-family:var(--fm);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.site .tourn-fact-v{font-family:var(--fd);font-weight:700;font-size:calc(15px * var(--scale));color:var(--ink)}
.site .tourn-h4{font-family:var(--fm);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);margin:6px 0 -4px}
.site .tourn-about{font-size:calc(13.5px * var(--scale));line-height:1.65;color:var(--dim);margin:0;max-width:70ch}
.site .tourn-sched{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:calc(var(--r) * .7);overflow:hidden}
.site .tourn-schedrow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 13px}
.site .tourn-schedrow:not(:last-child){border-bottom:1px solid var(--line)}
.site .tourn-schedphase{font-family:var(--fd);font-weight:700;font-size:calc(14px * var(--scale));color:var(--ink)}
.site .tourn-schedwhen{font-family:var(--fm);font-size:11px;color:var(--dim);text-align:right}
.site .tourn-parts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.site .tourn-part{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 4px;border:1px solid var(--line);
  border-radius:999px;background:var(--panel);font-family:var(--fm);font-size:11px;color:var(--ink)}
.site .tourn-partav{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-family:var(--fd);
  font-weight:800;font-size:11px;color:var(--bg);background:var(--accent)}
.site .tourn-partmore{font-family:var(--fm);font-size:11px;color:var(--dim)}
.site .tourn-joinbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:4px}
.site .tourn-join{min-width:190px;text-align:center}
.site .tourn-join.leave{background:transparent;color:var(--accent);border-color:var(--accent);box-shadow:none}
.site .tourn-join.leave:hover{background:color-mix(in srgb,var(--accent) 10%,transparent);filter:none;transform:none}
.site .tourn-joinerr{font-family:var(--fm);font-size:11px;color:#ff6a5a}

/* ── left nav panel removed — navigation now runs through the home banners.
   (kept in the DOM but hidden so renderNav stays harmless; remove this rule to
   bring the sidebar back.) ── */
.nav{display:none !important}

/* top-bar brand / home button — the way back to the launcher from any page */
/* ── brand lockup (mark + wordmark + beta chip) ── */
.tophome{display:flex;align-items:center;gap:10px;font-family:var(--fd);font-weight:800;font-size:15px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--ink);
  background:none;border:none;cursor:pointer;padding:4px 12px 4px 2px;transition:opacity .2s}
.tophome:hover{opacity:.85}
.brand-mark{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:9px;
  background:linear-gradient(150deg,var(--accent),color-mix(in srgb,var(--accent) 55%,#000));
  box-shadow:0 3px 12px color-mix(in srgb,var(--accent) 38%,transparent)}
.brand-mark svg{width:19px;height:19px;display:block}
.brand-mark svg path{fill:none;stroke:#0a0b10;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.brand-mark svg path.brand-mark-2{opacity:.45}
.brand-word{color:var(--ink)}
.brand-beta{font-family:var(--fm);font-weight:700;font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);border-radius:5px;
  padding:2px 5px;line-height:1;background:color-mix(in srgb,var(--accent) 12%,transparent)}

/* ── search field: icon + focus ring ── */
.topsearch-icon{position:absolute;left:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--dim);display:flex}
.topsearch-icon svg{width:15px;height:15px;display:block}
.topsearch-icon svg circle,.topsearch-icon svg path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.topsearch input{padding-left:34px}
.topsearch input:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}

/* ── account control: name + avatar ── */
.topacct-wrap{position:relative;display:inline-block;margin-left:auto}
.topacct-name{font-family:var(--fd);font-weight:700;font-size:13px;letter-spacing:.03em;color:var(--ink);
  max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* narrow screens: collapse to just the avatar */
@media(max-width:640px){ .topacct{padding:4px} .topacct-name{display:none} }