
:root{
  --ink:#0D0E11; --panel:#15171C; --panel2:#121419; --line:#23262E;
  --text:#F3F2EE; --muted:#B0B5BE; --dim:#8E94A0; --edge:#4A505C;
  --gold:#E3A93B; --orange:#F0BC5A; --acc:#E3A93B; --acc2:#C98F22;
  --div-p:#4C7DF0; --div-g:#2EAD6B; --div-z:#E8803A;
  --lift:0 1px 2px rgba(0,0,0,.35); --liftin:none;
  --disp:"Barlow Condensed","Archivo Narrow",Inter,-apple-system,Segoe UI,Roboto,sans-serif;
}
html,body{background:#0D0E11}
/* no skyline, no veil */
body:before,body:after{display:none!important;content:none!important}
/* headings and big numbers in the condensed face */
h1,h2,h3,.who h1,.recnum,.tval{font-family:var(--disp);letter-spacing:.01em}
h1{font-weight:800}
h2,h3{font-weight:700}
.recnum{font-size:52px;letter-spacing:0}
.tval{font-size:30px}
/* header: flat, no gold wash */
.top{background:#0D0E11!important;border-bottom:1px solid #1E2128!important}
.topbar{display:none!important}
.joinbar{background:#08090B!important;border-bottom:1px solid #1E2128!important;padding:6px 16px!important}
.joinbar:hover{background:#101216!important}
.joinb{color:#D8DBE0!important;letter-spacing:.08em!important;font-weight:700!important}
.joina{color:var(--gold)!important}
.mark{font-family:var(--disp)!important;font-size:21px!important;letter-spacing:.05em!important;color:#F3F2EE!important;font-weight:800!important}
.navsub,.navtrig{font-family:var(--disp)!important;font-size:16px!important;font-weight:700!important;letter-spacing:.05em!important;color:#C9CCD2!important}
.navsub:hover,.navtrig:hover{color:#F3F2EE!important;text-decoration:none!important}
.menupanel{background:#15171C!important;border-color:#2A2E37!important;box-shadow:0 12px 32px rgba(0,0,0,.5)!important}
/* cards: flat surface, hairline edge, no coloured rail, no glow */
.tile{background:#15171C!important;border:1px solid #23262E!important;box-shadow:none!important}
.tile:before{display:none!important}
.tsuf{color:var(--muted)!important}
.tlab,.reclab{letter-spacing:.07em!important;color:var(--muted)!important}
/* the avatar gets a plain edge unless a bought frame says otherwise */
.avatar{border-color:#2A2E37}
/* links: calmer gold, no underline flash */
a{color:var(--gold)}
@media (hover:hover){a:hover{color:#F3F2EE;text-decoration:none}}
/* glows off: text glow and drop-shadow halos read as a game HUD */
.seal.big,.seal.fnd.big{filter:drop-shadow(0 1px 2px #000a)!important}
.rib.gilt:before{box-shadow:none!important}
/* tables: quieter rules, numbers in columns */
table{font-variant-numeric:tabular-nums}
th{letter-spacing:.06em}
::selection{background:#E3A93B55}

/* THE PLAYER PAGE HEADER. The mock-up's player page: a plain band, the name
   big in the display face, the record as the headline number, no blurred
   avatar wash and no win-rate ring. Restyled here rather than rebuilt in
   renderProfile because bought frames and skins hook the same elements -
   only background, type and spacing change, never border or box-shadow on
   .hero2 or .avatar, so a frame somebody paid for still draws. */
.pstack .hero2{background:#121419;border-radius:14px}
.hero2 .wash,.hero2 .washveil{display:none!important}
.hero2 .h2in{gap:28px}
.pstack .hero2 .avatar{width:120px;height:120px}
.pstack .hero2 .who h1{font-family:var(--disp);font-size:60px;line-height:.95;font-weight:800;text-transform:uppercase;letter-spacing:.005em}
.hero2 .handle{color:#A4A9B3}
.hero2 .ring{display:none!important}
.hero2 .recnum{font-size:76px;font-family:var(--disp)}
.pstat{background:#15171C!important;border:1px solid #23262E!important;border-radius:12px!important;padding:16px 20px!important;gap:12px 40px!important}
.pstati b{letter-spacing:.07em!important;font-size:11.5px!important;color:#A4A9B3!important}
.pstati i{font-family:var(--disp);font-size:25px!important;font-weight:800!important}
.ppbtn,.ppvs{background:transparent!important;border:1px solid #2A2E37!important;color:#C9CCD2!important;box-shadow:none!important}
.ppbtn:hover,.ppvs:hover{color:#F3F2EE!important;border-color:#4A505C!important}
@media(max-width:620px){.pstack .hero2 .who h1{font-size:40px}.hero2 .recnum{font-size:52px}.pstack .hero2 .avatar{width:84px;height:84px}}
