/* ==========================================================================
   RE:PLAY — design system
   Tokens taken from the Figma. Change a value here, not in a page.
   ========================================================================== */

:root{
  /* ground */
  --bg:#0A0E12; --panel:#0F151A; --panel2:#131A20; --panel3:#182027;
  --line:#26313A;
  /* text */
  --pri:#F2F5F7; --sec:#9FB0BA; --muted:#6E7D89;
  /* brand — sampled from logo1.png */
  --green:#0CC07E; --green-lite:#3DDB9B; --green-deep:#0A9A64;
  --red:#F64230;
  /* medals */
  --gold:#D9A441; --silver:#B9C6CE; --bronze:#C2703C;
  /* sides */
  --ct:#4A90D9; --t:#E8A33D;

  --r-sm:6px; --r:8px; --r-lg:12px;
  --wrap:1392px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--pri);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:14px; line-height:1.5; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; height:auto; display:block}
/* Belt and braces: any author display rule silently defeats the hidden
   attribute, and the failure mode (an invisible overlay eating clicks) is
   hard to spot. Make hidden mean hidden, everywhere. */
[hidden]{display:none !important}
a{color:inherit; text-decoration:none}
h1,h2,h3,h4{margin:0; line-height:1.15}

.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px}

/* ---------- top stats bar ---------- */
.statsbar{background:var(--panel); border-bottom:1px solid var(--line); font-size:11px}
.statsbar-inner{display:flex; align-items:center; justify-content:space-between; height:36px}
.statsbar-items{display:flex; align-items:center; gap:28px; overflow:hidden; white-space:nowrap}
.stat{display:inline-flex; align-items:center; gap:8px; font-weight:800}
.stat em{font-style:normal; font-size:9px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.5px}
.statsbar-locale{font-size:9px; font-weight:800; color:var(--muted); letter-spacing:.6px}
.dot{width:8px; height:8px; border-radius:50%; display:inline-block; flex:0 0 auto}
.dot-green{background:var(--green)} .dot-red{background:var(--red)}
.dot-white{background:var(--pri)}  .dot-gold{background:var(--gold)}

/* ---------- nav ---------- */
.nav{background:var(--panel2); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50}
.nav-inner{display:flex; align-items:center; gap:32px; height:72px}
.brand{flex:0 0 auto}
/* The global reset sets img{height:auto}, and CSS beats the height="" HTML
   attribute — so without these the 900px-wide lockup renders at natural size
   and tears the header apart. Size logos in CSS, never in markup. */
.brand img{height:32px; width:auto; max-width:none}
.footer-brand img{height:30px; width:auto; max-width:none}
.navlinks{display:flex; align-items:center; gap:4px; margin-right:auto}
.navlink{
  padding:8px 12px; border-radius:var(--r); font-size:12px; font-weight:800;
  letter-spacing:.5px; text-transform:uppercase; color:var(--sec); transition:.15s;
}
.navlink:hover{color:var(--green-lite)}
.navlink.on{background:rgba(12,192,126,.14); color:var(--green-lite)}
.nav-actions{display:flex; align-items:center; gap:14px; flex:0 0 auto}
.ipbadge{
  background:var(--green); color:#04140D; border-radius:var(--r);
  padding:9px 14px; font-size:10px; font-weight:900; letter-spacing:.5px; cursor:pointer;
}
.navtoggle,.navtoggle-input{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:11px 18px; border-radius:var(--r); border:1px solid transparent;
  font-size:12px; font-weight:900; letter-spacing:.6px; text-transform:uppercase;
  cursor:pointer; transition:.15s; font-family:inherit;
}
.btn-primary{background:var(--green); color:#04140D}
.btn-primary:hover{background:var(--green-lite)}
.btn-ghost{background:var(--panel3); color:var(--sec); border-color:var(--line)}
.btn-ghost:hover{border-color:var(--green); color:var(--green-lite)}
.btn-steam{background:var(--panel3); color:var(--pri); border-color:var(--green)}
.btn-steam:hover{background:var(--green); color:#04140D}
/* Steam sign-in switched off: looks like the button, behaves like a notice. */
.btn-steam.is-off{position:relative; cursor:not-allowed; opacity:.6; border-color:var(--gold); color:var(--muted)}
.btn-steam.is-off:hover{background:var(--panel3); color:var(--muted)}
.btn-steam.is-off::after{content:attr(data-tip); position:absolute; top:calc(100% + 10px); right:0; z-index:60;
  width:min(300px, 80vw); padding:10px 12px; border-radius:8px; background:var(--panel3); color:var(--pri);
  border:1px solid var(--gold); font-size:12px; font-weight:600; line-height:1.4; text-transform:none; letter-spacing:0;
  white-space:normal; text-align:left; box-shadow:0 10px 30px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transform:translateY(-4px); transition:opacity .15s, transform .15s}
.btn-steam.is-off:hover::after, .btn-steam.is-off:focus::after{opacity:1; transform:none}
.btn-discord{background:#5865F2; color:#fff}
.btn-danger{background:transparent; color:var(--red); border-color:var(--red)}

/* ---------- page header ---------- */
.pagehero{
  background:var(--panel) center/cover no-repeat;
  border-bottom:1px solid var(--line); padding:44px 0;
}
.pagehero.has-plate{background-image:linear-gradient(90deg,rgba(10,14,18,.86) 0%,rgba(10,14,18,.25) 60%),url('/assets/img/page-plate.jpg')}
.pagehero-inner{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap}
.pagehero h1{font-size:38px; font-weight:900; letter-spacing:-.5px}
.pagehero p{margin:10px 0 0; color:var(--sec); font-size:14px}

/* ---------- section ---------- */
/* padding-top/bottom, never shorthand: .section is used as "wrap section",
   and a shorthand here has the same specificity as .wrap's padding but comes
   later, so it would silently reset the 24px side gutters to zero. */
.section{padding-top:30px; padding-bottom:44px}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:22px; flex-wrap:wrap}
.section-head h2{font-size:18px; font-weight:900; letter-spacing:1px; text-transform:uppercase}
.section-head .sub{color:var(--muted); font-size:12px; margin-top:6px}

/* ---------- stat tiles ---------- */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin-bottom:22px}
.tile{background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg); padding:18px 20px}
.tile-label{font-size:10px; font-weight:900; color:var(--muted); text-transform:uppercase; letter-spacing:.7px}
.tile-value{font-size:26px; font-weight:900; margin-top:8px}
.tile-sub{font-size:11px; color:var(--muted); margin-top:4px}
.v-green{color:var(--green)} .v-red{color:var(--red)} .v-gold{color:var(--gold)}

/* ---------- chips ---------- */
.chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px}
.chip{
  padding:9px 16px; border-radius:var(--r); background:var(--panel2);
  border:1px solid var(--line); font-size:11px; font-weight:800;
  letter-spacing:.5px; text-transform:uppercase; color:var(--sec); transition:.15s;
}
.chip:hover{border-color:var(--green)}
.chip.on{background:var(--green); border-color:var(--green); color:#04140D}

/* ---------- search ---------- */
.searchbar{display:flex; gap:10px; flex-wrap:wrap}
.field{
  display:flex; align-items:center; gap:10px; background:var(--bg);
  border:1px solid var(--line); border-radius:var(--r); padding:0 14px;
}
.field:focus-within{border-color:var(--green)}
.field input{
  background:none; border:0; outline:0; color:var(--pri);
  font:inherit; font-size:13px; padding:12px 0; width:260px; max-width:100%;
}
.field input::placeholder{color:var(--muted)}

/* ---------- table ---------- */
.tablewrap{
  background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.tablescroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
table.data{width:100%; border-collapse:collapse; min-width:900px}
table.data th{
  background:var(--panel3); text-align:left; padding:13px 18px;
  font-size:9.5px; font-weight:900; color:var(--muted);
  text-transform:uppercase; letter-spacing:.6px; white-space:nowrap;
}
table.data td{padding:12px 18px; border-top:1px solid var(--line); vertical-align:middle}
table.data tbody tr:nth-child(even){background:var(--panel)}
table.data tbody tr:hover{background:var(--panel3)}
.num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap}

/* player cell: name over id, never allowed to overflow into the next column */
.player{display:flex; align-items:center; gap:10px; min-width:0}
.player .av{
  width:26px; height:26px; border-radius:50%; flex:0 0 auto;
  background:var(--bg); border:1.5px solid var(--line);
}
.player .who{min-width:0}
.player .nm{font-size:12.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.player .id{font-size:10px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.av-gold{border-color:var(--gold)} .av-silver{border-color:var(--silver)}
.av-bronze{border-color:var(--bronze)} .av-muted{border-color:var(--line)}

.pos{font-weight:900; font-size:13px}
.pos-gold{color:var(--gold)} .pos-silver{color:var(--silver)}
.pos-bronze{color:var(--bronze)} .pos-muted{color:var(--muted)}

/* ---------- badges ---------- */
.badge{
  display:inline-flex; align-items:center; padding:4px 9px; border-radius:var(--r-sm);
  font-size:9px; font-weight:900; letter-spacing:.5px; text-transform:uppercase;
  border:1px solid currentColor;
}
.badge-green{color:var(--green); background:rgba(12,192,126,.15)}
.badge-red{color:var(--red); background:rgba(246,66,48,.15)}
.badge-gold{color:var(--gold); background:rgba(217,164,65,.15)}
.badge-muted{color:var(--muted); background:rgba(110,125,137,.15)}

/* ---------- pagination ---------- */
.pager{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:20px; flex-wrap:wrap}
.pager-note{font-size:11px; color:var(--muted)}
.pager-nums{display:flex; gap:8px; flex-wrap:wrap}
.pager-nums a,.pager-nums span{
  padding:8px 13px; border-radius:7px; font-size:11px; font-weight:800;
  background:var(--panel2); border:1px solid var(--line); color:var(--sec);
}
.pager-nums a:hover{border-color:var(--green); color:var(--green-lite)}
.pager-nums .on{background:var(--green); border-color:var(--green); color:#04140D}

/* ---------- empty state ---------- */
.empty{padding:56px 24px; text-align:center; color:var(--muted)}
.empty h3{font-size:15px; color:var(--sec); margin-bottom:8px}

/* ---------- footer ---------- */
.footer{background:var(--panel2); border-top:1px solid var(--line); margin-top:40px}
.footer-inner{display:grid; grid-template-columns:2fr 1fr 1fr 1.2fr; gap:32px; padding-top:44px; padding-bottom:32px}
.footer-brand p{color:var(--muted); font-size:12px; line-height:1.6; margin:16px 0}
.footer-col h4{font-size:11px; font-weight:900; text-transform:uppercase; letter-spacing:1px; margin-bottom:14px}
.footer-col a{display:block; color:var(--muted); font-size:12px; padding:5px 0}
.footer-col a:hover{color:var(--green-lite)}
.footer-ip{display:inline-block; background:var(--bg); border:1px solid var(--line);
  border-radius:var(--r); padding:9px 13px; font-size:12px; font-weight:800; color:var(--green-lite)}
.footer-note{display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); margin-top:12px}
.footer-bottom{display:flex; justify-content:space-between; gap:16px; padding-top:20px; padding-bottom:24px;
  border-top:1px solid var(--line); font-size:11px; color:var(--muted); flex-wrap:wrap}
.footer-disclaimer{color:#3A4750}


/* ---------- account chip + menu (Steam login) ---------- */
.usermenu{position:relative}
.usermenu summary{list-style:none; cursor:pointer}
.usermenu summary::-webkit-details-marker{display:none}
.userchip{
  display:flex; align-items:center; gap:9px; height:38px; padding:0 12px 0 6px;
  background:var(--panel3); border:1px solid var(--line); border-radius:var(--r);
  font-size:12px; font-weight:800; color:var(--pri); transition:.15s;
}
.userchip:hover{border-color:var(--green)}
.usermenu[open] .userchip{border-color:var(--green)}
.userav{width:26px; height:26px; border-radius:5px; object-fit:cover; flex:0 0 auto}
.userav-blank{background:linear-gradient(135deg,var(--panel3),var(--line)); display:block}
.username{max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.caret{
  width:0; height:0; flex:0 0 auto;
  border-left:4px solid transparent; border-right:4px solid transparent;
  border-top:5px solid var(--muted); transition:.15s;
}
.usermenu[open] .caret{transform:rotate(180deg); border-top-color:var(--green)}

.usermenu-panel{
  position:absolute; right:0; top:calc(100% + 8px); z-index:60; min-width:210px;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:6px; box-shadow:0 18px 40px rgba(0,0,0,.55);
}
.usermenu-panel a,
.usermenu-panel button{
  display:block; width:100%; text-align:left; padding:10px 12px; border-radius:var(--r);
  background:none; border:0; font:inherit; font-size:12px; font-weight:700;
  color:var(--sec); cursor:pointer; transition:.12s;
}
.usermenu-panel a:hover,
.usermenu-panel button:hover{background:var(--panel3); color:var(--pri)}
.usermenu-panel a.is-staff{color:var(--green)}
.usermenu-panel form{margin:6px 0 0; border-top:1px solid var(--line); padding-top:6px}
.usermenu-panel button{color:var(--red)}
.usermenu-panel button:hover{color:var(--red); background:rgba(246,66,48,.10)}

/* ---------- profile ---------- */
.profile-head{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  background:var(--panel2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:22px 24px; margin-bottom:22px;
}
.profile-av{width:82px; height:82px; border-radius:var(--r-lg); object-fit:cover;
  border:1px solid var(--line); background:var(--panel3); flex:0 0 auto}
.profile-id{flex:1 1 240px; min-width:0}
.profile-id h1{font-size:26px; font-weight:900; letter-spacing:-.3px; overflow-wrap:anywhere}
.profile-id .ids{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px;
  font-size:11px; color:var(--muted); font-family:ui-monospace,Menlo,Consolas,monospace}
.profile-actions{display:flex; gap:10px; flex-wrap:wrap}

.taglist{display:flex; gap:6px; flex-wrap:wrap; margin-top:10px}
.tag{
  padding:4px 9px; border-radius:999px; font-size:10px; font-weight:900;
  letter-spacing:.4px; text-transform:uppercase;
  background:var(--panel3); border:1px solid var(--line); color:var(--sec);
}
.tag-green{border-color:var(--green); color:var(--green-lite)}
.tag-gold{border-color:var(--gold); color:var(--gold)}

/* ---------- notice ---------- */
.notice{
  background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--red);
  border-radius:var(--r-lg); padding:20px 22px;
}
.notice h3{font-size:16px; font-weight:900; margin-bottom:8px}
.notice p{color:var(--sec); font-size:13px; line-height:1.6}
.notice code{font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--muted); font-size:12px}


/* ==========================================================================
   Homepage — hero, server strip, board controls, top-player cards
   ========================================================================== */

/* ---------- pills ---------- */
.pill{
  display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
  border-radius:999px; font-size:10px; font-weight:900; letter-spacing:.8px;
  text-transform:uppercase; border:1px solid var(--line); background:var(--panel3);
  color:var(--sec); white-space:nowrap;
}
.pill-live{background:rgba(12,192,126,.12); border-color:var(--green); color:var(--green-lite)}
.pill-online{background:rgba(12,192,126,.12); border-color:var(--green); color:var(--green-lite)}
.pill-off{background:rgba(246,66,48,.10); border-color:var(--red); color:var(--red)}
.dot-muted{background:var(--muted)}

.btn-lg{height:44px; padding:0 22px; font-size:12px}
.btn-dark{background:var(--panel3); color:var(--pri); border-color:var(--line)}
.btn-dark:hover{border-color:var(--green); color:var(--green-lite)}

/* ---------- hero ---------- */
.hero{
  position:relative; border-bottom:1px solid var(--line);
  background:var(--panel) center/cover no-repeat;
  background-image:
    linear-gradient(90deg, rgba(10,14,18,.94) 0%, rgba(10,14,18,.72) 48%, rgba(10,14,18,.55) 100%),
    url('/assets/img/hero-plate.jpg');
}
.hero-inner{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,520px);
  gap:40px; align-items:center; padding-top:52px; padding-bottom:52px;
}
.hero-copy h1{
  font-size:clamp(38px, 5vw, 60px); line-height:1.02; font-weight:900;
  letter-spacing:-1.5px; margin:18px 0 0;
}
.hero-copy p{margin:18px 0 0; color:var(--sec); font-size:14px; line-height:1.7}
.hero-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px}

.hero-art{display:flex; align-items:center; justify-content:flex-end; gap:28px}
.hero-art img{width:min(300px,42vw); height:auto; filter:drop-shadow(0 18px 40px rgba(0,0,0,.55))}
.hero-score{text-align:right; flex:0 0 auto}
.hero-score-value{font-size:40px; font-weight:900; letter-spacing:-1px; line-height:1}
.hero-score-label{
  font-size:10px; font-weight:900; letter-spacing:.9px; text-transform:uppercase;
  color:var(--muted); margin-top:8px;
}
.hero-score-who{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px; padding:7px 12px;
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r);
  font-size:11px; font-weight:800; color:var(--sec);
}
.hero-score-who .trophy{filter:grayscale(.15)}

/* ---------- server strip ---------- */
.serverstrip{background:var(--panel2); border-bottom:1px solid var(--line)}
.serverstrip-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap; padding-top:18px; padding-bottom:18px;
}
.ss-name{display:flex; align-items:center; gap:10px; font-size:14px; font-weight:900}
.ss-sub{color:var(--muted); font-size:11px; margin-top:6px}
.ss-facts{display:flex; gap:34px; flex-wrap:wrap}
.ss-fact span{
  display:block; font-size:9px; font-weight:900; letter-spacing:.8px;
  text-transform:uppercase; color:var(--muted);
}
.ss-fact b{display:block; font-size:14px; font-weight:900; margin-top:5px}
.ss-connect{display:flex; align-items:center; gap:10px; flex-wrap:wrap}

.copybox{
  display:inline-flex; align-items:center; gap:9px; height:38px; padding:0 13px;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  color:var(--sec); font:inherit; font-size:11px; font-weight:800;
  cursor:pointer; transition:.15s;
}
.copybox:hover{border-color:var(--green); color:var(--green-lite)}

/* ---------- board controls ---------- */
.tabrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:14px;
}
.tabs{display:flex; gap:8px; flex-wrap:wrap}
.tab{
  padding:10px 16px; border-radius:var(--r); background:var(--panel2);
  border:1px solid var(--line); font-size:11px; font-weight:900;
  letter-spacing:.5px; text-transform:uppercase; color:var(--sec); transition:.15s;
}
.tab:hover{border-color:var(--green); color:var(--green-lite)}
.tab.on{background:var(--panel3); border-color:var(--green); color:var(--pri)}

.filterrow{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:26px;
}
.filterrow .chips{margin-bottom:0}
.rankfilter{display:flex; align-items:center; gap:9px}
.rankfilter label{
  font-size:10px; font-weight:900; letter-spacing:.7px;
  text-transform:uppercase; color:var(--muted);
}
.rankfilter select{
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r);
  color:var(--sec); font:inherit; font-size:11px; font-weight:800;
  padding:9px 12px; cursor:pointer;
}
.rankfilter select:focus{outline:0; border-color:var(--green)}

.freshness{
  display:inline-flex; align-items:center; gap:7px;
  font-size:10px; font-weight:800; color:var(--muted);
}

/* ---------- top player cards ---------- */
.topgrid{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:16px}
.topcard{
  background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:16px 16px 18px; text-align:center; transition:.15s;
}
.topcard:hover{border-color:var(--panel3); transform:translateY(-2px)}
.topcard-gold{border-color:rgba(217,164,65,.55)}
.topcard-silver{border-color:rgba(185,198,206,.35)}
.topcard-bronze{border-color:rgba(194,112,60,.42)}

.topcard-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.pos-badge{
  padding:3px 9px; border-radius:999px; font-size:10px; font-weight:900;
  background:var(--panel3); color:var(--sec); border:1px solid var(--line);
}
.pos-badge.pos-gold{background:var(--gold); color:#241905; border-color:var(--gold)}
.pos-badge.pos-silver{background:var(--silver); color:#1A2126; border-color:var(--silver)}
.pos-badge.pos-bronze{background:var(--bronze); color:#221007; border-color:var(--bronze)}
.kd-badge{font-size:10px; font-weight:800; color:var(--muted); white-space:nowrap}
.kd-badge b{color:var(--pri); margin-left:3px}

.topcard-av{
  width:72px; height:72px; margin:16px auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--panel3); border:2px solid var(--line); font-size:26px; color:var(--muted);
}
.topcard-av.av-gold{border-color:var(--gold); color:var(--gold)}
.topcard-av.av-silver{border-color:var(--silver); color:var(--silver)}
.topcard-av.av-bronze{border-color:var(--bronze); color:var(--bronze)}
.topcard-av .crown{font-size:30px; line-height:1}

.topcard-name{
  font-size:14px; font-weight:900; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.topcard-rank{
  font-size:9px; font-weight:900; letter-spacing:.7px; text-transform:uppercase;
  color:var(--muted); margin-top:6px; min-height:12px;
}
.rank-gold{color:var(--gold)} .rank-silver{color:var(--silver)} .rank-bronze{color:var(--bronze)}

.topcard-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:10px;
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line);
}
.topcard-stats span{
  display:block; font-size:9px; font-weight:900; letter-spacing:.6px;
  text-transform:uppercase; color:var(--muted);
}
.topcard-stats b{display:block; font-size:14px; font-weight:900; margin-top:5px}


/* ==========================================================================
   Банове — status badges, duration, appeal box
   ========================================================================== */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:9px; font-weight:900; letter-spacing:.7px; text-transform:uppercase;
  border:1px solid var(--line); background:var(--panel3); color:var(--sec);
  white-space:nowrap;
}
.badge-active {background:rgba(246,66,48,.12);  border-color:var(--red);   color:var(--red)}
.badge-mute   {background:rgba(217,164,65,.12); border-color:var(--gold);  color:var(--gold)}
.badge-expired{background:var(--panel3);        border-color:var(--line);  color:var(--muted)}
.badge-removed{background:rgba(12,192,126,.10); border-color:var(--green); color:var(--green-lite)}

.dur{color:var(--sec); font-size:12px; font-weight:700}
.dur-perm{color:var(--red); font-size:12px; font-weight:900}
.adminname{color:var(--green-lite); font-size:12px; font-weight:800}
.av-red{background:linear-gradient(135deg,#5A1B14,#2A0F0C); border:1px solid rgba(246,66,48,.5)}

.appeal{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  flex-wrap:wrap; margin-top:26px; padding:22px 24px;
  background:var(--panel2); border:1px solid var(--line);
  border-left:3px solid var(--green); border-radius:var(--r-lg);
}
.appeal h3{font-size:15px; font-weight:900; text-transform:uppercase; letter-spacing:.5px}
.appeal p{color:var(--sec); font-size:12.5px; margin-top:7px; line-height:1.6}
.pager-nums .gap{padding:0 4px; color:var(--muted)}


/* ---------- Steam avatars + profile links ---------- */
/* .av is used both as a <span> placeholder and an <img>; img needs the box
   rules repeated because the global reset sets height:auto on every image. */
img.av{object-fit:cover; height:32px; width:32px}
.av-red{background:linear-gradient(135deg,#5A1B14,#2A0F0C); border:1px solid rgba(246,66,48,.5)}

.nm-link{color:var(--pri); transition:.12s; border-bottom:1px solid transparent}
.nm-link:hover{color:var(--green-lite); border-bottom-color:var(--green)}
.nm-link:focus-visible{outline:2px solid var(--green); outline-offset:2px; border-radius:2px}

.topcard-av{position:relative; overflow:visible}
.topcard-av img{
  width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;
}
.crown-badge{
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  font-size:17px; line-height:1; color:var(--gold);
  text-shadow:0 2px 6px rgba(0,0,0,.7); pointer-events:none;
}
.topcard-namelink{
  color:var(--pri); font-size:14px; font-weight:900;
  display:inline-block; max-width:100%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; vertical-align:bottom;
  border-bottom:1px solid transparent; transition:.12s;
}
.topcard-namelink:hover{color:var(--green-lite); border-bottom-color:var(--green)}


/* ==========================================================================
   Скинчейнджър v2
   ========================================================================== */
.herobadges{display:flex; gap:8px; flex-wrap:wrap}
.dot-ct{background:#5B9BD5} .dot-t{background:#D9A441}
.btn-sm{height:32px; padding:0 12px; font-size:10px}

/* ---- inventory tabs ---- */
.sctabs{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px}
.sctab{
  display:flex; align-items:center; justify-content:center; gap:10px;
  height:52px; padding:0 12px; border-radius:8px;
  background:var(--panel2); border:1px solid var(--line); color:var(--sec);
  font:inherit; font-size:11px; font-weight:900; letter-spacing:.4px;
  text-transform:uppercase; cursor:pointer; transition:.15s;
  white-space:nowrap;                 /* "Музикални комплекти" must stay on one line */
}
.sctab:hover:not(:disabled){border-color:var(--green); color:var(--pri)}
.sctab.on{background:var(--panel3); border-color:var(--green); border-width:2px; color:var(--pri)}
/* Dim the LABEL, not the artwork — .45 opacity on the button multiplied with
   the icon's own .7 left the renders almost invisible. */
.sctab:disabled{cursor:not-allowed; color:var(--muted)}
.sctab:disabled .sctab-ico img{opacity:.55; filter:grayscale(.7)}
/* The tab and rail icons are photographic renders on a transparent
   background, so they need a box to sit in rather than a colour. Unselected
   ones are dimmed and desaturated so the active tab still reads first. */
.sctab-ico{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:26px; flex:0 0 auto;
}
.sctab-ico img{
  max-width:100%; max-height:100%; width:auto; object-fit:contain;
  filter:grayscale(.55) brightness(.85); opacity:.7; transition:.15s;
}
.sctab.on .sctab-ico img{filter:none; opacity:1}
.sctab:hover:not(:disabled) .sctab-ico img{opacity:.95}
.sctab em{font-style:normal; font-size:9px; color:var(--muted); letter-spacing:.4px}

/* ---- toolbar ---- */
.sc-bar{display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; margin-bottom:16px}
.sc-teamwrap{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.teamtoggle{display:flex; gap:4px; background:var(--bg); border:1px solid var(--line);
  border-radius:8px; padding:4px}
.teambtn{display:flex; align-items:center; gap:8px; padding:8px 16px; border:0; border-radius:6px;
  background:none; color:var(--sec); font:inherit; font-size:12px; font-weight:900; cursor:pointer; transition:.15s}
.teambtn:hover{color:var(--pri)}
.teambtn.on{background:var(--panel3); color:var(--pri); box-shadow:inset 0 0 0 1px var(--green)}
.teambtn b{font-size:10px; color:var(--muted); font-weight:800}
.btn:disabled{opacity:.45; cursor:not-allowed; filter:saturate(.4)}
.sideicon{width:16px; height:16px; flex:0 0 auto; display:block}
.sideicon-ct{color:#5B9BD5} .sideicon-t{color:#D9A441}
.teambtn.on .sideicon{filter:drop-shadow(0 0 4px currentColor)}
.sc-search input{width:230px}
.sc-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.savestate{font-size:11px; font-weight:800; color:var(--muted)}
.savestate.ok{color:var(--green-lite)} .savestate.busy{color:var(--gold)} .savestate.bad{color:var(--red)}

/* ---- rail + grid ---- */
.sc-body{display:grid; grid-template-columns:66px minmax(0,1fr); gap:16px; align-items:start}
.catrail{display:flex; flex-direction:column; gap:8px; position:sticky; top:88px}
.catbtn{
  width:66px; height:56px; display:flex; align-items:center; justify-content:center;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  color:var(--muted); cursor:pointer; transition:.15s; padding:6px; overflow:hidden;
}
.catbtn img{
  max-width:100%; max-height:100%; width:auto; object-fit:contain;
  filter:grayscale(.6) brightness(.9); opacity:.65; transition:.15s;
}
.catbtn:hover{border-color:var(--green)}
.catbtn:hover img{opacity:.9; filter:grayscale(.2)}
.catbtn.on{background:var(--panel3); border-color:var(--green); border-width:2px; color:var(--green-lite)}
.catbtn.on img{filter:none; opacity:1}

.wsection{margin-bottom:26px}
.wsection-head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:12px}
.wsection-head h3{font-size:13px; font-weight:900; letter-spacing:.8px; text-transform:uppercase}
.wsection-head span{font-size:10px; font-weight:800; color:var(--muted)}

.sgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px}
.scard{
  /* padding-bottom reserves the "Избрано" strip. Without it the ribbon is
     drawn over the skin name on every equipped card. All cards keep the
     reservation so a row does not change height when something is equipped. */
  position:relative; background:var(--panel2); border:1px solid var(--line);
  border-radius:10px; padding:14px 14px 34px; cursor:pointer; color:inherit; font:inherit;
  text-align:left; overflow:hidden; transition:.15s;
}
.scard:hover{border-color:var(--green); transform:translateY(-2px)}
/* green = worn in game right now. red = a skin is saved for this item but
   something else is worn — only one knife and one pair of gloves per side. */
.scard.on{border-color:var(--green)}
.scard.saved{border-color:var(--red)}
.scard-st{position:absolute; top:10px; right:12px; font-size:8px; font-weight:900;
  letter-spacing:.4px; color:var(--gold)}
.scard-img{height:76px; display:flex; align-items:center; justify-content:center; margin:10px 0 14px}
.scard-img img{max-height:100%; max-width:100%; width:auto; object-fit:contain}
.scard-name{font-size:13px; font-weight:900}
.scard-skin{font-size:11px; color:var(--sec); margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.scard-sel{
  position:absolute; left:0; right:0; bottom:3px; padding:5px 0; text-align:center;
  background:var(--green); color:#04140D; font-size:9px; font-weight:900;
  letter-spacing:.8px; text-transform:uppercase;
}
.scard-saved{background:var(--red); color:#FFF1EF}
.scard-bar{position:absolute; left:0; right:0; bottom:0; height:3px; display:block}

/* ---- agents ----
   Agent renders are tall portraits, so these cards are portrait too. --rc is
   the rarity colour, set per card by the JS; it drives the glow behind the
   render, the bottom bar and the hover border, so the grid reads by rarity
   even before you look at the label. */
.agentgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(178px,1fr)); gap:14px}
.acard{
  position:relative; background:var(--panel2); border:1px solid var(--line);
  border-radius:10px; padding:12px 12px 34px; cursor:pointer; color:inherit; font:inherit;
  text-align:center; overflow:hidden; transition:.15s;
}
.acard:hover{border-color:var(--rc,var(--green)); transform:translateY(-2px)}
.acard.on{border-color:var(--green); background:var(--panel3)}
.acard-img{
  position:relative; height:190px; display:flex; align-items:flex-end; justify-content:center;
  margin-bottom:10px;
}
/* the glow sits behind the render, not over it */
.acard-img::before{
  content:''; position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:150px; height:150px; border-radius:50%;
  background:radial-gradient(circle, var(--rc,#4b69ff) 0%, transparent 68%);
  opacity:.20; pointer-events:none;
}
.acard-img img{position:relative; max-height:100%; max-width:100%; width:auto; object-fit:contain}
.acard-name{font-size:12px; font-weight:900; line-height:1.25;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acard-group{font-size:10px; color:var(--sec); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.acard-rar{font-size:9px; font-weight:900; letter-spacing:.7px; text-transform:uppercase; margin-top:6px}

/* ---- music kits ----
   Kit art is a square cover, so these cards are square and tighter than the
   agent portraits. No rarity accent: every music kit in CS2 is High Grade. */
.musicgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:14px}
.mcard{
  position:relative; background:var(--panel2); border:1px solid var(--line);
  border-radius:10px; padding:12px 12px 34px; cursor:pointer; color:inherit; font:inherit;
  text-align:center; overflow:hidden; transition:.15s;
}
.mcard:hover{border-color:var(--green); transform:translateY(-2px)}
.mcard.on{border-color:var(--green); background:var(--panel3)}
.mcard-img{height:118px; display:flex; align-items:center; justify-content:center; margin-bottom:10px}
.mcard-img img{max-height:100%; max-width:100%; width:auto; object-fit:contain; border-radius:6px}
.mcard-artist{font-size:12px; font-weight:900;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.mcard-track{font-size:10px; color:var(--sec); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---- coins, medals and pins ---- */
.filterrow{display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; margin-bottom:20px}
.filterrow .chips{margin-bottom:0}
.selfield{padding:0}
.selfield select{
  appearance:none; background:var(--bg) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7a89' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 12px center/10px 7px;
  border:1px solid var(--line); border-radius:8px; color:var(--pri);
  font:inherit; font-size:12px; font-weight:800; padding:9px 32px 9px 12px; cursor:pointer;
  max-width:260px;
}
.selfield select:focus{outline:none; border-color:var(--green)}

.coingrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:14px}
.ccard{
  position:relative; background:var(--panel2); border:1px solid var(--line);
  border-radius:10px; padding:12px 12px 34px; cursor:pointer; color:inherit; font:inherit;
  text-align:center; overflow:hidden; transition:.15s;
}
.ccard:hover{border-color:var(--rc,var(--green)); transform:translateY(-2px)}
.ccard.on{border-color:var(--green); background:var(--panel3)}
.ccard-img{position:relative; height:104px; display:flex; align-items:center; justify-content:center; margin-bottom:10px}
.ccard-img::before{
  content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:104px; height:104px; border-radius:50%;
  background:radial-gradient(circle, var(--rc,#4b69ff) 0%, transparent 66%);
  opacity:.18; pointer-events:none;
}
.ccard-img img{position:relative; max-height:100%; max-width:100%; width:auto; object-fit:contain}
.ccard-name{font-size:11px; font-weight:900; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.ccard-type{font-size:9px; color:var(--sec); margin-top:4px; letter-spacing:.4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* first paint of a lazily fetched tab */
.loading{padding:40px 0; text-align:center; color:var(--muted); font-size:12px; font-weight:800}

/* compact chip row, for inside the skin picker */
.chips-sm{gap:6px; margin-bottom:14px}
.chips-sm .chip{padding:5px 10px; font-size:10px}
.empty-sm{padding:26px 0}
.empty-sm h3{font-size:13px}

/* ---- modal ---- */
body.modal-open{overflow:hidden}
/* [hidden] is a UA rule (display:none) and ANY author display rule beats it.
   Without the guard below, a closed .modal stays display:flex — an invisible
   full-screen overlay that silently eats every click on the page. */
.modal{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; padding:24px}
.modal[hidden]{display:none}
.modal-backdrop{position:absolute; inset:0; background:rgba(4,7,10,.78); backdrop-filter:blur(2px)}
.modal-panel{
  position:relative; width:min(640px,100%); max-height:min(88vh,860px);
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.6); overflow:hidden;
}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding:18px 20px; border-bottom:1px solid var(--line)}
.modal-head h3{font-size:16px; font-weight:900; text-transform:uppercase; letter-spacing:.5px}
.modal-sub{font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--muted); margin-top:5px}
.iconbtn{background:none; border:0; color:var(--muted); font-size:16px; cursor:pointer; padding:4px 6px; line-height:1}
.iconbtn:hover{color:var(--pri)}
.modal-body{padding:16px 20px; overflow-y:auto; flex:1 1 auto; min-height:120px}
/* When the detail pane opens, the skin grid must give ground. Without this the
   grid (60+ items) takes the whole panel and the wear buttons and advanced
   settings end up below the fold with no way to reach them. */
.modal-panel.has-detail .modal-body{flex:0 1 auto; max-height:30vh; min-height:96px}
.modal-body .field{margin-bottom:14px}
.modal-body .field input{width:100%}
.modal-foot{display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--line); background:var(--panel2)}
.modal-foot .btn{flex:1 1 auto; justify-content:center}

.skingrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px}
.skincard{
  background:var(--panel2); border:1px solid var(--line); border-left:3px solid var(--rc,var(--line));
  border-radius:var(--r); padding:9px; cursor:pointer; color:inherit; font:inherit;
  text-align:left; transition:.12s;
}
.skincard:hover{border-color:var(--green); border-left-color:var(--rc,var(--green))}
.skincard.sel{background:var(--panel3); box-shadow:inset 0 0 0 1px var(--green)}
.skincard.on{background:var(--panel3)}
.skincard-img{height:52px; display:flex; align-items:center; justify-content:center; margin-bottom:7px}
.skincard-img img{max-height:100%; max-width:100%; width:auto; object-fit:contain}
.skincard-name{font-size:10.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.skincard-sub{font-size:9px; color:var(--muted); margin-top:2px}

.modal-detail{padding:16px 20px; border-top:1px solid var(--line); background:var(--panel2); overflow-y:auto; flex:1 1 auto; min-height:0}
.pk-preview{height:110px; display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--line); border-radius:var(--r); margin-bottom:12px}
.pk-preview img{max-height:96px; max-width:90%; width:auto; object-fit:contain}
.pk-title{font-size:14px; font-weight:900}
.pk-meta{font-size:9.5px; font-weight:800; letter-spacing:.5px; color:var(--muted); margin:4px 0 14px}
.wears{display:flex; gap:6px; margin:8px 0 4px; flex-wrap:wrap}
.wearbtn{
  flex:1 1 0; min-width:52px; padding:9px 6px; border-radius:var(--r);
  background:var(--panel3); border:1px solid var(--line); color:var(--sec);
  font:inherit; font-size:10px; font-weight:900; cursor:pointer; transition:.12s;
}
.wearbtn:hover:not(:disabled){border-color:var(--green)}
.wearbtn.on{background:var(--green); border-color:var(--green); color:#04140D}
.wearbtn.off{opacity:.3; cursor:not-allowed}

.advanced{margin-top:14px; border-top:1px solid var(--line); padding-top:12px}
.advanced summary{
  cursor:pointer; font-size:10px; font-weight:900; letter-spacing:.7px;
  text-transform:uppercase; color:var(--green-lite); list-style:none;
}
.advanced summary::-webkit-details-marker{display:none}
.advanced summary::before{content:'▸ '; }
.advanced[open] summary::before{content:'▾ '; }
.adv-row{display:flex; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap}
.adv-row label{flex:0 0 130px; font-size:10px; font-weight:900; letter-spacing:.6px;
  text-transform:uppercase; color:var(--muted)}
.adv-row input[type=range]{flex:1 1 140px; accent-color:var(--green)}
.adv-row output{flex:0 0 64px; text-align:right; font-size:11px; font-weight:800;
  font-family:ui-monospace,Menlo,Consolas,monospace}
.adv-row input[type=text]{
  flex:1 1 160px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r);
  color:var(--pri); font:inherit; font-size:12px; padding:9px 12px;
}
.adv-row input[type=text]:focus{outline:0; border-color:var(--green)}
.adv-switch{justify-content:space-between}
.adv-switch b{display:block; font-size:12px}
.adv-switch span{display:block; font-size:10px; color:var(--muted); margin-top:2px}
.switch{position:relative; display:inline-block; width:40px; height:22px; flex:0 0 auto}
.switch input{opacity:0; width:0; height:0}
.switch span{position:absolute; inset:0; background:var(--panel3); border:1px solid var(--line);
  border-radius:999px; cursor:pointer; transition:.15s}
.switch span::before{content:''; position:absolute; width:16px; height:16px; left:2px; top:2px;
  background:var(--muted); border-radius:50%; transition:.15s}
.switch input:checked + span{background:rgba(217,164,65,.25); border-color:var(--gold)}
.switch input:checked + span::before{transform:translateX(18px); background:var(--gold)}


/* ---------- development-login banner ---------- */
.devbanner{
  display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
  background:repeating-linear-gradient(45deg,#3A2A06,#3A2A06 12px,#312404 12px,#312404 24px);
  border-bottom:1px solid var(--gold); color:var(--gold);
  font-size:11px; font-weight:800; padding:8px 16px; text-align:center;
}
.devbanner button{
  background:none; border:1px solid var(--gold); color:var(--gold); border-radius:var(--r);
  font:inherit; font-size:10px; font-weight:900; padding:4px 10px; cursor:pointer;
}
.devbanner button:hover{background:var(--gold); color:#241905}
.devbanner form{margin:0}


/* ---- v2 modal internals ---- */
.pk-chip{
  padding:9px 14px; border-radius:6px; background:var(--panel2); border:1px solid var(--line);
  font-size:12px; font-weight:900; letter-spacing:.5px; margin-bottom:14px;
}
.pk-stage{
  height:130px; display:flex; align-items:center; justify-content:center;
  background:var(--bg); border:1px solid var(--line); border-radius:8px; margin-bottom:16px;
}
.pk-stage img{max-height:110px; max-width:92%; width:auto; object-fit:contain}
.pk-label{font-size:10px; font-weight:900; letter-spacing:.9px; text-transform:uppercase;
  color:var(--muted); margin:16px 0 8px}
.pk-row{display:flex; align-items:center; gap:14px; margin-top:14px}
.pk-row .pk-label{margin:0; flex:0 0 90px}
.row-switch{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 0; border-bottom:1px solid var(--line)}
.row-switch b{font-size:12px}
.numin,.txtin{
  background:var(--bg); border:1px solid var(--line); border-radius:6px; color:var(--pri);
  font:inherit; font-size:12px; padding:9px 12px;
}
.numin{width:104px; font-family:ui-monospace,Menlo,Consolas,monospace}
.txtin{flex:1 1 auto}
.numin:focus,.txtin:focus{outline:0; border-color:var(--green)}
.floatrow{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.floattrack{margin-top:12px}
.floattrack input[type=range]{
  width:100%; height:8px; -webkit-appearance:none; appearance:none; border-radius:4px;
  background:linear-gradient(90deg,#0CC07E 0%,#D9E533 26%,#F2A628 55%,#F64230 100%);
}
.floattrack input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; border-radius:50%;
  background:var(--pri); border:2px solid #04140D; cursor:pointer;
}
.floattrack input[type=range]::-moz-range-thumb{
  width:16px; height:16px; border-radius:50%; background:var(--pri);
  border:2px solid #04140D; cursor:pointer;
}

.stickers{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.slot{
  position:relative; aspect-ratio:1/1; background:var(--panel2); border:1px solid var(--line);
  border-radius:8px; cursor:pointer; color:var(--muted); transition:.15s;
  display:flex; align-items:center; justify-content:center;
}
.slot:hover{border-color:var(--green)}
.slot.filled{border-color:var(--line); background:var(--panel3)}
.slot-n{position:absolute; top:4px; left:6px; font-size:9px; font-weight:900; color:var(--muted)}
.slot-plus{font-size:18px; color:var(--muted)}
.slot-img{width:76%; height:76%; background:center/contain no-repeat; display:block}

.charmrow{align-items:stretch}
.charmbtn{
  flex:1 1 auto; display:flex; align-items:center; gap:12px; padding:9px 14px;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  color:var(--pri); font:inherit; font-size:12px; font-weight:800; cursor:pointer; transition:.15s;
}
.charmbtn:hover{border-color:var(--green)}
.charmimg{width:26px; height:26px; background:center/contain no-repeat; flex:0 0 auto;
  border-radius:4px; background-color:var(--panel3)}
.charmbtn .caret{margin-left:auto}
.ch-more{font-size:11px; color:var(--muted); margin-top:12px; text-align:center}


.pk-back{
  display:inline-flex; align-items:center; gap:7px; margin-bottom:12px;
  background:none; border:0; padding:0; cursor:pointer;
  color:var(--green-lite); font:inherit; font-size:11px; font-weight:800;
}
.pk-back:hover{text-decoration:underline}

/* ==========================================================================
   Responsive — the Figma is desktop-only, this is the part it never covered
   ========================================================================== */
@media (max-width:1024px){
  .footer-inner{grid-template-columns:1fr 1fr}
  .topgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sctabs{grid-template-columns:repeat(2,1fr)}
  .hero-inner{grid-template-columns:1fr; gap:32px}
  .hero-art{justify-content:flex-start}
}
@media (max-width:860px){
  .nav-inner{flex-wrap:wrap; height:auto; padding-top:12px; padding-bottom:12px; gap:12px}
  .navtoggle{
    display:flex; flex-direction:column; gap:4px; margin-left:auto;
    padding:10px; border:1px solid var(--line); border-radius:var(--r); cursor:pointer;
  }
  .navtoggle span{display:block; width:18px; height:2px; background:var(--sec)}
  .navlinks{
    display:none; order:3; width:100%; flex-direction:column; align-items:stretch; gap:2px;
    border-top:1px solid var(--line); padding-top:10px; margin-right:0;
  }
  .navtoggle-input:checked ~ .navlinks{display:flex}
  .navlink{padding:12px}
  .nav-actions{order:2; margin-left:0}
  .statsbar-items{gap:16px}
  .stat em{display:none}
  .pagehero h1{font-size:28px}
  .pagehero{padding:32px 0}
  .topgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sgrid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
  .sc-body{grid-template-columns:52px minmax(0,1fr)}
  .catbtn{width:52px; height:46px}
  .modal{padding:0}
  .modal-panel{max-height:100vh; border-radius:0; width:100%}
  .ss-facts{gap:22px}
  .serverstrip-inner{gap:18px}
  .hero-art{flex-direction:column; align-items:flex-start; gap:18px}
  .hero-score{text-align:left}
  /* the <br> is a desktop line-break device; on a narrow column it lands
     mid-sentence and reads as a typo */
  .hero-copy p br{display:none}
}
@media (max-width:560px){
  .wrap{padding:0 16px}
  .footer-inner{grid-template-columns:1fr; gap:24px}
  .field input{width:100%}
  .searchbar{width:100%}
  .nav-actions .ipbadge{display:none}
  .brand img{height:26px}
  .topgrid{grid-template-columns:1fr}
  .tabs{width:100%}
  .tab{flex:1 1 auto; text-align:center}
  .filterrow{align-items:flex-start; flex-direction:column}
  .username{display:none}
  .userchip{padding:0 8px}
  .usermenu-panel{right:auto; left:0}
}

/* ---- admin panel ---- */
.adminnav{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; margin-top:20px}
.adcard{
  display:block; background:var(--panel2); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px 20px; color:inherit; text-decoration:none; transition:.15s;
}
a.adcard:hover{border-color:var(--green); transform:translateY(-2px)}
.adcard-t{font-size:15px; font-weight:900}
.adcard-s{font-size:12px; color:var(--sec); line-height:1.55; margin-top:6px}
.adcard-f{font-size:10px; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); margin-top:12px}
/* "coming soon" cards must not look clickable */
.adcard-off{opacity:.55; cursor:default}

.filterbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:20px 0 16px}
.filterbar .field{flex:1 1 280px; max-width:420px}
.rowform{display:inline}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; color:var(--muted)}
.notice-ok{border-color:var(--green)}
.notice-ok p{color:var(--green-lite)}
.notice-bad{border-color:var(--red)}
.notice-bad p{color:#ff9c8f}