/* ============================================================
   PK League — Tournament Gold design system
   Palette: Champion Gold #f5d97a · Antique #c98f14 · Bronze
   Shadow #7d6320 · Obsidian #1b1a17 · Bone #e8e2d4 · Verdigris
   #2f6f5e. Type: Cinzel (display), Inter (body), IBM Plex Mono
   (data). Identity: canonical skull, trophy and crossed-swords mark.
   ============================================================ */

:root{
  --gold:#f5d97a;
  --gold-2:#c98f14;
  --gold-3:#7d6320;
  --gold-hi:#fff3c4;
  --obsidian:#1b1a17;
  --ink:#141310;
  --coal:#111008;
  --panel:#201f1a;
  --panel-2:#242219;
  --card:#26241c;
  --bone:#e8e2d4;
  --parch:#d8ccb4;
  --ash:#9c8b5e;
  --muted:#8a8272;
  --verdigris:#2f6f5e;
  --verdigris-hi:#5fbfa4;
  --blood:#8f1d17;
  --red:#e02a1e;
  --green:#8fd46a;
  --line:#38342a;
  --line-2:#4a4433;
  --line-gold:#574a2a;
  --shadow-1:0 18px 40px -18px rgba(0,0,0,.75);
  --shadow-gold:0 10px 34px -12px rgba(201,143,20,.45);
  --font-display:'Cinzel',serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:var(--font-body);
  font-size:15.5px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;inset:0;z-index:-2;
  background:
    radial-gradient(60% 40% at 50% -5%,rgba(201,143,20,.16),transparent 70%),
    radial-gradient(45% 35% at 85% 110%,rgba(47,111,94,.07),transparent 70%),
    var(--ink);
}
body::after{
  content:"";
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(232,226,212,.014) 0 1px,transparent 1px 7px);
}
img{max-width:100%;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-hi)}
::selection{background:var(--gold-2);color:#141310}

h1,h2,h3,h4,.display{font-family:var(--font-display);font-weight:700;letter-spacing:.04em;color:var(--bone);line-height:1.22;margin:0 0 .5em}
.mono{font-family:var(--font-mono)}
.gold{color:var(--gold)}
.muted{color:var(--muted)}
.small{font-size:12.5px}
.text-center{text-align:center}
.semantic-icon{display:inline-block;object-fit:contain;image-rendering:pixelated;vertical-align:middle;flex:none}
.btn .semantic-icon{width:20px;height:20px;margin-right:5px}
.container{max-width:1200px;margin:0 auto;padding:0 22px}
.section{padding:72px 0}
.section-tight{padding:48px 0}

/* ---------- section headers ---------- */
.section-head{text-align:center;max-width:720px;margin:0 auto 44px}
.kicker{
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.3em;text-transform:uppercase;color:var(--ash);
  margin:0 0 10px;
}
.section-head h2{font-size:clamp(24px,3.4vw,34px);text-transform:uppercase}
.section-head .sub{color:var(--muted);font-size:15px;margin:6px auto 0;max-width:60ch}
.diamond{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.diamond::before,.diamond::after{content:"";height:1px;width:70px;background:linear-gradient(90deg,transparent,var(--gold-2))}
.diamond::after{background:linear-gradient(90deg,var(--gold-2),transparent)}
.diamond i{
  width:9px;height:9px;background:linear-gradient(135deg,var(--gold-hi),var(--gold-2));
  transform:rotate(45deg);border:1px solid var(--gold-3);
}

/* ---------- top notification bar ---------- */
.notif-bar{
  background:linear-gradient(180deg,#1d1b15,#161510);
  border-bottom:1px solid var(--line-gold);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--parch);position:relative;z-index:60;
}
.notif-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:38px;padding:5px 22px;max-width:1200px;margin:0 auto}
.notif-left{display:flex;align-items:center;gap:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notif-left .sk{width:14px;height:14px;image-rendering:pixelated;flex:none}
.notif-left b{color:var(--gold);font-weight:600}
.notif-count{color:var(--gold-hi)}
.notif-right{display:flex;align-items:center;gap:10px;white-space:nowrap}
.notif-right a{color:var(--gold);font-weight:600;display:flex;align-items:center;gap:6px}
.notif-right a:hover{color:var(--gold-hi)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);display:inline-block;flex:none}
@media(max-width:760px){.notif-left{display:none}.notif-inner{justify-content:center}}

/* ---------- header / nav ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(17,16,8,.9);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-gold);
}
.site-header::after{
  content:"";display:block;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-2) 30%,var(--gold-hi) 50%,var(--gold-2) 70%,transparent);
  opacity:.55;
}
.nav-inner{display:flex;align-items:center;gap:22px;max-width:1200px;margin:0 auto;padding:10px 22px}
.brand{display:flex;align-items:center;gap:12px;flex:none}
.brand img{width:34px;height:34px;image-rendering:pixelated;filter:drop-shadow(0 2px 6px rgba(201,143,20,.5))}
.brand-mark{display:flex;flex-direction:column;line-height:1}
.brand-mark .over{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.42em;color:var(--muted);text-transform:uppercase}
.brand-mark .main{font-family:var(--font-display);font-weight:900;font-size:19px;letter-spacing:.1em;color:var(--gold);text-transform:uppercase}
.brand-mark .main span{color:var(--bone)}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav-link{
  font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--parch);padding:10px 12px;border-bottom:2px solid transparent;
}
.nav-link:hover{color:var(--gold-hi)}
.nav-link.active{color:var(--gold);border-bottom-color:var(--gold-2)}
.nav-cta{margin-left:14px;flex:none}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line-2);border-radius:4px;color:var(--bone);width:40px;height:40px;font-size:20px;cursor:pointer}
@media(max-width:940px){
  .nav,.nav-cta{display:none}
  .burger{display:block}
  .mobile-nav{display:block}
}
.mobile-nav{display:none;position:fixed;inset:0;z-index:49;background:rgba(17,16,8,.97);padding:96px 26px 40px;overflow:auto}
.mobile-nav.open{display:block}
.mobile-nav a{
  display:block;padding:13px 6px;font-weight:800;font-size:15px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--parch);border-bottom:1px solid var(--line);
}
.mobile-nav a:hover{color:var(--gold-hi)}
.mobile-nav .btn{margin-top:22px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-display);font-weight:700;font-size:13px;letter-spacing:.12em;
  text-transform:uppercase;padding:13px 24px;border-radius:3px;cursor:pointer;
  border:1px solid transparent;transition:transform .15s,box-shadow .2s,filter .2s;
  line-height:1.1;text-align:center;
}
.btn:active{transform:translateY(1px)}
.btn-gold{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 35%,var(--gold-2));
  color:#1a1505;border-color:var(--gold-3);
  box-shadow:var(--shadow-gold),inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-gold:hover{filter:brightness(1.07);color:#120e02;box-shadow:0 14px 40px -10px rgba(201,143,20,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.btn-outline{background:rgba(232,226,212,.03);color:var(--bone);border-color:var(--line-2)}
.btn-outline:hover{border-color:var(--gold-2);color:var(--gold-hi);background:rgba(201,143,20,.08)}
.btn-ghost{background:transparent;color:var(--ash);border-color:transparent;font-family:var(--font-mono);font-weight:600;letter-spacing:.14em;font-size:11.5px}
.btn-ghost:hover{color:var(--gold)}
.btn-danger{background:linear-gradient(180deg,#e8564a,var(--red) 40%,#a1170d);color:#fff;border-color:#5e0f08}
.btn-lg{font-size:15px;padding:16px 32px}
.btn-sm{font-size:11px;padding:9px 14px;font-family:var(--font-body);font-weight:800;letter-spacing:.1em}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn-note{display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;color:var(--muted);text-transform:uppercase;margin-top:8px}

/* ---------- pills / tags ---------- */
.pill{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--parch);background:rgba(232,226,212,.05);border:1px solid var(--line-2);
  padding:7px 13px;border-radius:999px;
}
.pill-gold{color:#1a1505;background:linear-gradient(180deg,var(--gold-hi),var(--gold-2));border-color:var(--gold-3);font-weight:600}
.tag{
  display:inline-block;font-family:var(--font-mono);font-size:9.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;padding:4px 8px;border-radius:2px;
  color:#1a1505;background:linear-gradient(180deg,var(--gold-hi),var(--gold-2));
}
.tag-red{color:#fff;background:linear-gradient(180deg,#e8564a,var(--blood))}
.tag-green{color:#0d1510;background:linear-gradient(180deg,#7fe0b8,var(--verdigris))}

/* ---------- hero (home) ---------- */
.hero{position:relative;min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding:70px 0 90px}
.hero-bg{position:absolute;inset:0;background:radial-gradient(52% 60% at 50% 42%,rgba(201,143,20,.20),transparent 70%)}
.hero-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(120% 90% at 50% 118%,rgba(0,0,0,.65),transparent 55%)}
.hero-wm{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(46vw,430px);opacity:.13;image-rendering:pixelated;filter:drop-shadow(0 0 60px rgba(201,143,20,.35));pointer-events:none}
.hero-inner{position:relative;max-width:900px;padding:0 22px}
.hero-kicker{
  font-family:var(--font-mono);font-size:11.5px;font-weight:600;letter-spacing:.4em;
  text-transform:uppercase;color:var(--gold);margin-bottom:22px;
}
.hero-title{
  font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(38px,7.2vw,84px);line-height:1.04;letter-spacing:.02em;color:var(--bone);
  text-shadow:0 4px 30px rgba(0,0,0,.6);margin:0 0 24px;
}
.hero-title .line-gold{
  display:block;
  background:linear-gradient(180deg,var(--gold-hi) 8%,var(--gold) 45%,var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 16px rgba(201,143,20,.35));
}
.hero-sub{color:var(--parch);max-width:62ch;margin:0 auto 34px;font-size:16.5px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:38px}
.hero-stats{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.scroll-cue{
  position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-cue::after{content:"";width:1px;height:34px;background:linear-gradient(180deg,var(--gold-2),transparent);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

/* ---------- home: competitive hero ---------- */
.hero-competitive{
  min-height:calc(100vh - 67px);padding:38px 0 36px;text-align:left;
  border-bottom:1px solid var(--line-gold);
}
.hero-competitive .hero-bg{
  background:
    linear-gradient(90deg,rgba(201,143,20,.045) 1px,transparent 1px),
    linear-gradient(rgba(201,143,20,.045) 1px,transparent 1px),
    radial-gradient(50% 58% at 50% 30%,rgba(201,143,20,.18),transparent 72%);
  background-size:52px 52px,52px 52px,auto;
}
.hero-competitive .hero-bg::before{
  content:"";position:absolute;left:0;top:14%;width:4px;height:34%;
  background:linear-gradient(var(--drag-1),var(--gold-2));box-shadow:0 0 24px rgba(239,106,79,.55);
}
.hero-competitive .hero-wm{left:auto;right:-6%;top:38%;transform:none;width:min(43vw,520px);opacity:.055}
.hero-competitive .hero-inner{width:100%;max-width:1200px;margin:0 auto;padding:0 22px}
.season-banner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  margin-bottom:18px;padding:12px 16px;background:rgba(13,13,11,.82);
  border:1px solid var(--line);border-left:3px solid var(--drag-1);
  box-shadow:0 12px 32px rgba(0,0,0,.28);backdrop-filter:blur(8px);
}
.season-banner-title{display:flex;align-items:center;gap:13px;min-width:0}
.season-number{
  display:grid;place-items:center;width:40px;height:40px;flex:none;
  font-family:var(--font-display);font-size:15px;font-weight:900;color:#190d08;
  background:linear-gradient(145deg,var(--drag-1),var(--gold-2));clip-path:polygon(50% 0,100% 22%,88% 85%,50% 100%,12% 85%,0 22%);
}
.season-banner-title b{display:block;font-family:var(--font-display);font-size:13px;letter-spacing:.13em;text-transform:uppercase;color:var(--bone)}
.season-banner-title small{display:block;margin-top:2px;font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.season-countdown{display:flex;align-items:center;gap:9px;flex:none}
.season-countdown span{min-width:37px;text-align:center}
.season-countdown b{display:block;font-family:var(--font-mono);font-size:20px;line-height:1;color:var(--gold-hi);font-variant-numeric:tabular-nums}
.season-countdown small{display:block;margin-top:4px;font-family:var(--font-mono);font-size:7px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.season-countdown i{font-family:var(--font-mono);font-style:normal;color:var(--gold-3);transform:translateY(-6px)}
.hero-competitive .hero-kicker{display:flex;align-items:center;gap:11px;margin-bottom:12px;letter-spacing:.27em}
.live-mark{display:inline-block;width:8px;height:8px;background:var(--drag-1);box-shadow:0 0 12px rgba(239,106,79,.8);transform:rotate(45deg)}
.hero-competitive .hero-title{font-size:clamp(44px,6vw,72px);max-width:900px;margin-bottom:12px}
.hero-competitive .hero-title .line-gold{display:inline;margin-left:.2em}
.hero-competitive .hero-sub{max-width:650px;margin:0 0 18px;font-size:16px;line-height:1.65;color:#bbb3a3}
.hero-competitive .hero-actions{justify-content:flex-start;align-items:center;margin-bottom:18px}
.hero-text-link{display:inline-flex;align-items:center;gap:9px;padding:14px 8px;font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.17em;color:var(--parch)}
.hero-text-link:hover{color:var(--gold-hi)}
.hero-ranks{padding:12px 22px 14px;background:rgba(20,19,16,.78);border:1px solid var(--line);border-top:2px solid var(--gold-2);backdrop-filter:blur(8px);box-shadow:var(--shadow-1)}
.hero-ranks-head{display:flex;justify-content:space-between;margin-bottom:9px;font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
.hero-ranks .ladder-rail{gap:10px}
.hero-ranks .ladder-rail::before{top:35px}
.hero-ranks .crest{width:54px;height:59px;margin-bottom:6px}
.hero-ranks .crest img{width:48px;height:48px}
.hero-ranks .tier-name{font-size:11px}
.hero-ranks .tier-elo{font-size:9px}
.ranked-system{background:linear-gradient(180deg,rgba(32,31,26,.72),transparent)}
.ranked-system .elo-grid{margin-top:0}
@media(max-width:700px){
  .hero-competitive{min-height:auto;padding:48px 0 38px}
  .season-banner{align-items:flex-start;gap:12px;margin-bottom:20px;padding:11px 10px}
  .season-banner-title{gap:9px}
  .season-number{width:34px;height:34px;font-size:12px}
  .season-banner-title b{font-size:9px;letter-spacing:.08em}
  .season-banner-title small{font-size:7px;letter-spacing:.08em}
  .season-countdown{gap:3px}
  .season-countdown span{min-width:25px}
  .season-countdown b{font-size:14px}
  .season-countdown small{font-size:5.5px;letter-spacing:.08em}
  .season-countdown i{font-size:9px;transform:translateY(-5px)}
  .hero-competitive .hero-title .line-gold{display:block;margin-left:0}
  .hero-competitive .hero-sub{font-size:14.5px}
  .hero-competitive .hero-actions{margin-bottom:28px}
  .hero-ranks{padding:15px 10px 18px}
  .hero-ranks .ladder-rail{grid-template-columns:repeat(4,1fr);gap:8px 2px}
  .hero-ranks .crest{width:48px;height:53px}
  .hero-ranks .crest img{width:42px;height:42px}
  .hero-ranks .tier-name{font-size:8.5px;letter-spacing:.08em}
  .hero-ranks .tier-elo{font-size:7.5px;letter-spacing:0}
}
@media(max-width:390px){.hero-ranks .crest{width:40px;height:44px}.hero-ranks{padding-inline:6px}}

/* ---------- hero: giant countdown ---------- */
.cd-wrap{margin:0 auto 34px}
.cd-title{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.cd-grid{display:flex;align-items:stretch;justify-content:center;gap:10px;flex-wrap:wrap}
.cd-block{
  min-width:118px;padding:18px 16px 14px;
  background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--gold-3);border-radius:6px;
  box-shadow:0 10px 34px rgba(0,0,0,.45),inset 0 1px 0 rgba(245,217,122,.14);
}
.cd-num{
  display:block;font-family:var(--font-display);font-weight:900;
  font-size:clamp(40px,6.5vw,64px);line-height:1;
  background:linear-gradient(180deg,var(--gold-hi) 8%,var(--gold) 45%,var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 14px rgba(201,143,20,.35));
  font-variant-numeric:tabular-nums;
}
.cd-label{
  display:block;margin-top:8px;
  font-family:var(--font-mono);font-size:10px;font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--muted);
}
.cd-sep{
  align-self:center;font-family:var(--font-display);font-weight:900;
  font-size:clamp(26px,4vw,40px);color:var(--gold-3);
  animation:cue 1.8s ease-in-out infinite;
}
@media(max-width:640px){
  .cd-block{min-width:74px;padding:12px 10px 10px}
  .cd-sep{display:none}
}

/* ---------- home: client options ---------- */
.client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:980px){.client-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.client-grid{grid-template-columns:1fr}}
.client-card{
  position:relative;background:linear-gradient(180deg,var(--panel-2),var(--panel));
  border:1px solid var(--line);border-radius:5px;padding:26px 22px;text-align:center;
  transition:transform .18s,border-color .18s,box-shadow .2s;overflow:hidden;
}
.client-card:hover{transform:translateY(-4px);border-color:var(--gold-3);box-shadow:var(--shadow-gold)}
.client-card .glyph{font-size:30px;margin-bottom:12px}
.client-card h3{font-size:16px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px}
.client-card p{color:var(--muted);font-size:13px;margin:0 0 16px}
.client-card .sk-mini{width:44px;height:44px;image-rendering:pixelated;margin:0 auto 14px;filter:drop-shadow(0 3px 10px rgba(201,143,20,.4))}

/* ---------- home: news + sidebar ---------- */
.home-grid{display:grid;grid-template-columns:1fr 340px;gap:26px}
@media(max-width:1020px){.home-grid{grid-template-columns:1fr}}
.news-stack{display:flex;flex-direction:column;gap:20px}
.news-card{
  display:grid;grid-template-columns:225px 1fr;background:var(--panel);
  border:1px solid var(--line);border-radius:5px;overflow:hidden;transition:border-color .18s,transform .18s;
}
.news-card:hover{border-color:var(--gold-3);transform:translateY(-3px)}
@media(max-width:640px){.news-card{grid-template-columns:1fr}}
.news-art{position:relative;min-height:170px;border-right:1px solid var(--line);overflow:hidden}
.news-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.art-a{background:linear-gradient(160deg,#3a2f10,#191507 70%)}
.art-b{background:linear-gradient(160deg,#2f2a14,#191608 70%)}
.art-c{background:linear-gradient(160deg,#2b2417,#141310 70%)}
.news-art .wm{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);width:64%;opacity:.5;image-rendering:pixelated}
.news-art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(232,226,212,.05) 0 1px,transparent 1px 8px)}
.news-body{padding:20px 22px}
.news-meta{display:flex;gap:14px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.news-meta .by{color:var(--ash)}
.news-body h3{font-size:18.5px;letter-spacing:.06em;text-transform:uppercase}
.news-body p{color:var(--muted);font-size:13.8px;margin:0 0 14px}
.read-more{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);
  padding:7px 14px;border:1px solid var(--gold-3);border-radius:999px;background:rgba(201,143,20,.07);
}
.read-more:hover{background:rgba(201,143,20,.16);color:var(--gold-hi)}

.side-card{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:20px;margin-bottom:20px}
.side-card h3{font-size:14px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);display:flex;align-items:center;gap:10px}
.side-card h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--gold-3),transparent)}
.spotlight{text-align:center;padding:28px 20px}
.spotlight img{width:96px;height:96px;image-rendering:pixelated;margin:0 auto 14px;filter:drop-shadow(0 6px 22px rgba(201,143,20,.45))}
.spotlight p{color:var(--muted);font-size:13px;margin:0 0 18px}
.social-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.social-row:last-child{border-bottom:none}
.social-ic{
  width:36px;height:36px;flex:none;display:grid;place-items:center;border-radius:4px;
  background:rgba(201,143,20,.09);border:1px solid var(--line-gold);color:var(--gold);font-size:16px;
}
.social-copy b{display:block;font-size:13px;letter-spacing:.06em;color:var(--bone)}
.social-copy span{font-size:11.5px;color:var(--muted)}
.social-row .bi{margin-left:auto;color:var(--muted)}
.forum-item{display:flex;gap:12px;padding:12px 2px;border-bottom:1px solid var(--line)}
.forum-item:last-child{border-bottom:none}
.forum-ic{color:var(--gold-2);font-size:16px;margin-top:2px}
.forum-item b{display:block;font-size:13px;font-weight:600;color:var(--parch);line-height:1.4}
.forum-item time{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase}

/* ---------- quick links ---------- */
.quick-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.quick-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.quick-grid{grid-template-columns:1fr}}
.quick-link{min-width:0;overflow-wrap:anywhere}
.quick-link{
  display:flex;align-items:center;gap:14px;padding:17px 18px;
  background:var(--panel);border:1px solid var(--line);border-radius:5px;
  color:var(--parch);font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  transition:border-color .15s,transform .15s;
}
.quick-link:hover{border-color:var(--gold-3);transform:translateY(-2px);color:var(--gold-hi)}
.quick-link .q-ic{width:38px;height:38px;flex:none;display:grid;place-items:center;background:rgba(201,143,20,.09);border:1px solid var(--line-gold);border-radius:4px;color:var(--gold)}
.quick-link .bi{margin-left:auto;color:var(--muted)}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;text-align:center;
  background:linear-gradient(180deg,#221f15,#171509);
  border:1px solid var(--gold-3);border-radius:8px;
  padding:56px 30px;box-shadow:var(--shadow-1);
}
.cta-band .wm{position:absolute;right:-70px;top:50%;transform:translateY(-50%);width:340px;opacity:.10;image-rendering:pixelated}
.cta-band h2{font-size:clamp(22px,3.2vw,32px);text-transform:uppercase}
.cta-band h2 .gold{color:var(--gold)}
.cta-band p{color:var(--muted);max-width:62ch;margin:10px auto 26px}
.cta-band .btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;position:relative}

/* ---------- footer ---------- */
.site-footer{margin-top:80px;background:transparent;border-top:1px solid var(--line)}
.footer-min{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:26px 0}
.footer-brand{display:flex;align-items:center;gap:9px}
.footer-brand img{width:22px;height:22px;opacity:.9}
.footer-brand span{font-family:var(--font-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;font-size:13px;color:var(--bone)}
.footer-nav{display:flex;gap:22px;flex-wrap:wrap}
.footer-nav a{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.footer-nav a:hover{color:var(--gold-hi)}
.footer-legal{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--muted)}
@media(max-width:640px){.footer-min{flex-direction:column;text-align:center}}

/* minimal home hero */
.hero-min{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:78vh;padding:80px 20px 90px}
.hero-min-mark{width:76px;height:76px;margin-bottom:26px;opacity:.95}
.hero-min-competition{height:24px;margin:-18px 0 10px}
.hero-min-kicker{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}
.hero-min-title{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.06em;font-size:clamp(42px,9vw,86px);line-height:1;margin:14px 0 0;color:var(--bone)}
.hero-min-sub{font-family:var(--font-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:16px 0 0}
.hero-min-date{font-family:var(--font-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hi);margin:34px 0 0}
.hero-min-cd{margin:16px 0 0;justify-content:center}
.hero-min-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;justify-content:center;margin-top:42px}
.lang{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.lang select{background:var(--panel);color:var(--parch);border:1px solid var(--line-2);border-radius:3px;padding:5px 8px;font-family:var(--font-mono);font-size:11px}

/* ---------- page hero (subpages) ---------- */
.page-hero{
  position:relative;text-align:center;padding:64px 22px 54px;overflow:hidden;
  background:radial-gradient(55% 80% at 50% 0%,rgba(201,143,20,.14),transparent 70%);
  border-bottom:1px solid var(--line);
}
.page-hero .wm{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(30vw,240px);opacity:.08;image-rendering:pixelated;pointer-events:none}
.page-hero h1{font-size:clamp(26px,4.4vw,44px);text-transform:uppercase;position:relative}
.page-hero h1 em{font-style:normal;color:var(--gold)}
.page-hero .sub{color:var(--muted);max-width:66ch;margin:8px auto 0;position:relative}

/* ---------- panels / cards ---------- */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:6px;overflow:hidden}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:15px 20px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(201,143,20,.09),transparent);
}
.panel-head h3{font-size:14.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0}
.panel-head .r{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.panel-body{padding:20px}
.panel-body.tight{padding:14px 16px}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:860px){.grid-2{grid-template-columns:1fr}}
.with-side{display:grid;grid-template-columns:1fr 330px;gap:22px;align-items:start}
@media(max-width:1020px){.with-side{grid-template-columns:1fr}}
.side-col{display:flex;flex-direction:column;gap:20px;position:sticky;top:86px}
@media(max-width:1020px){.side-col{position:static}}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ash);margin-bottom:7px}
.input,select.input{
  width:100%;background:#171611;border:1px solid var(--line-2);border-radius:4px;
  color:var(--bone);font-family:var(--font-body);font-size:14.5px;padding:12px 14px;
  outline:none;transition:border-color .15s,box-shadow .15s;
}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold-2) 50%),linear-gradient(135deg,var(--gold-2) 50%,transparent 50%);background-position:calc(100% - 18px) 55%,calc(100% - 13px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.input:focus{border-color:var(--gold-2);box-shadow:0 0 0 3px rgba(201,143,20,.18)}
.input::placeholder{color:#5c5647}

/* ---------- league tables ---------- */
.table-wrap{overflow-x:auto}
.league-table{width:100%;border-collapse:collapse;font-size:13.5px}
.league-table thead th{
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ash);text-align:left;padding:11px 14px;border-bottom:1px solid var(--gold-3);
  background:rgba(201,143,20,.06);white-space:nowrap;
}
.league-table td{padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.league-table tbody tr{transition:background .12s}
.league-table tbody tr:hover{background:rgba(201,143,20,.07)}
.league-table .num{font-family:var(--font-mono);color:var(--parch)}
.league-table .u{font-weight:700;color:var(--bone);letter-spacing:.04em}
.league-table .kdr{color:var(--verdigris-hi);font-family:var(--font-mono)}
.league-table .rank{font-family:var(--font-mono);font-weight:600;color:var(--muted);width:64px}
tr.r1 .rank{color:var(--gold-hi);text-shadow:0 0 12px rgba(245,217,122,.5)}
tr.r2 .rank{color:#d8d3c5}
tr.r3 .rank{color:#d09b62}
tr.r1{background:rgba(201,143,20,.08)}
.pager{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;padding:18px 0 4px}
.pager button{
  min-width:36px;height:36px;padding:0 10px;border-radius:3px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--parch);
  font-family:var(--font-mono);font-size:12px;font-weight:600;
}
.pager button:hover{border-color:var(--gold-3);color:var(--gold-hi)}
.pager button.on{background:linear-gradient(180deg,var(--gold-hi),var(--gold-2));color:#1a1505;border-color:var(--gold-3)}

/* ---------- hiscore page ---------- */
.seg{display:inline-flex;background:#171611;border:1px solid var(--line-2);border-radius:4px;padding:3px;gap:3px}
.seg button{
  border:none;background:transparent;color:var(--muted);cursor:pointer;border-radius:3px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:8px 14px;
}
.seg button.on{background:linear-gradient(180deg,var(--gold-hi),var(--gold-2));color:#1a1505}
.hs-cats .cat-group{margin-bottom:14px}
.hs-cats .cat-title{font-family:var(--font-mono);font-size:9.5px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin:0 0 6px 4px}
.hs-cats a{
  display:flex;justify-content:space-between;align-items:center;gap:8px;
  padding:7.5px 11px;border-radius:3px;color:var(--parch);font-size:13px;font-weight:600;letter-spacing:.04em;
  border:1px solid transparent;
}
.hs-cats a:hover{background:rgba(201,143,20,.09);color:var(--gold-hi)}
.hs-cats a.on{background:rgba(201,143,20,.13);border-color:var(--gold-3);color:var(--gold)}
.hs-cats a .bi{font-size:10px;color:var(--gold-3)}
.hs-cats a .semantic-icon{width:18px;height:18px;margin-right:7px}

/* ---------- shop / donate ---------- */
.shop-strip{
  display:flex;flex-wrap:wrap;gap:10px 22px;justify-content:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  padding:13px 16px;border:1px solid var(--line);border-radius:5px;background:var(--panel);
  margin-bottom:34px;
}
.shop-strip b{color:var(--gold);font-weight:600}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px}
.product-card{
  display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;transition:transform .16s,border-color .16s;
}
.product-card:hover{transform:translateY(-3px);border-color:var(--gold-3)}
.product-art{position:relative;height:118px;display:grid;place-items:center;border-bottom:1px solid var(--line);overflow:hidden}
.product-art img{width:64px;height:64px;image-rendering:pixelated;filter:drop-shadow(0 6px 18px rgba(0,0,0,.55));position:relative;z-index:1}
.product-art::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 90% at 50% 60%,rgba(201,143,20,.22),transparent 70%)}
.product-art::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(115deg,rgba(232,226,212,.04) 0 1px,transparent 1px 8px)}
.product-art .tags{position:absolute;top:9px;left:9px;display:flex;gap:6px;z-index:2}
.product-body{padding:16px;display:flex;flex-direction:column;gap:10px;flex:1}
.product-body h3{font-size:14px;letter-spacing:.12em;text-transform:uppercase;margin:0;color:var(--bone)}
.product-variants{margin-top:auto}
.product-price{display:flex;align-items:baseline;gap:10px}
.product-price .p{font-family:var(--font-display);font-weight:700;font-size:21px;color:var(--gold)}
.product-price .p small{font-size:13px}
.product-value{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.product-value b{color:var(--ash);font-weight:600}
.product-actions{display:flex;gap:8px}
.product-actions .btn{flex:1}
.rank-card{border-top:3px solid var(--gold-3)}
.rank-card .product-art{height:96px}
.perks{list-style:none;margin:0;padding:0;font-size:12.8px;color:var(--muted)}
.perks li{display:flex;gap:9px;padding:4.5px 0;border-bottom:1px dashed var(--line)}
.perks li:last-child{border-bottom:none}
.perks .bi{color:var(--gold-2);font-size:11px;margin-top:4px;flex:none}
.rank-name{font-family:var(--font-display);font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase}
.shop-foot{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.info-tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:26px}
.info-tabs a{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ash);padding:9px 16px;border:1px solid var(--line);border-radius:999px;
}
.info-tabs a:hover{color:var(--gold);border-color:var(--gold-3)}

/* cart */
.cart-fab{
  position:fixed;right:22px;bottom:22px;z-index:80;
  display:flex;align-items:center;gap:10px;cursor:pointer;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-2));color:#1a1505;
  border:1px solid var(--gold-3);border-radius:999px;padding:13px 20px;
  font-family:var(--font-display);font-weight:700;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  box-shadow:var(--shadow-gold);
}
.cart-fab .n{
  font-family:var(--font-mono);font-size:11px;font-weight:600;background:#141310;color:var(--gold);
  border-radius:999px;min-width:22px;height:22px;display:grid;place-items:center;padding:0 6px;
}
.cart-drawer{
  position:fixed;top:0;right:-400px;bottom:0;width:380px;max-width:94vw;z-index:90;
  background:var(--panel);border-left:1px solid var(--gold-3);
  display:flex;flex-direction:column;transition:right .25s ease;box-shadow:-20px 0 60px rgba(0,0,0,.6);
}
.cart-drawer.open{right:0}
.cart-head{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;border-bottom:1px solid var(--line)}
.cart-head h3{margin:0;font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.cart-close{background:none;border:1px solid var(--line-2);color:var(--parch);border-radius:3px;width:32px;height:32px;cursor:pointer}
.cart-items{flex:1;overflow:auto;padding:14px 20px}
.cart-empty{text-align:center;color:var(--muted);font-size:13px;padding:40px 0}
.cart-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.cart-item .t{flex:1}
.cart-item .t b{display:block;font-size:13px;color:var(--bone);letter-spacing:.05em}
.cart-item .t span{font-family:var(--font-mono);font-size:10px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
.cart-item .p{font-family:var(--font-mono);font-weight:600;color:var(--gold);font-size:13px}
.cart-item .x{background:none;border:1px solid var(--line-2);color:var(--muted);width:26px;height:26px;border-radius:3px;cursor:pointer;font-size:11px}
.cart-item .x:hover{color:var(--red);border-color:var(--blood)}
.cart-foot{padding:18px 20px;border-top:1px solid var(--line-gold);background:#191813}
.cart-total{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.cart-total b{color:var(--gold);font-size:15px}
/* The checkout fields. The log-in name sits above the total rather than on a
   page of its own, because a second page is a second place to abandon. */
.cart-field{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.cart-foot .input{width:100%;margin-bottom:12px}
.cart-note{margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted);min-height:1em}
.cart-note.bad{color:#d98a8a}
.overlay{position:fixed;inset:0;background:rgba(10,9,5,.66);z-index:85;display:none}
.overlay.open{display:block}

/* ---------- droptable ---------- */
.chip-row{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--parch);background:var(--panel-2);border:1px solid var(--line-2);border-radius:999px;
  padding:8px 15px;cursor:pointer;transition:border-color .12s,background .12s;
}
.chip:hover{border-color:var(--gold-3)}
.chip.on{background:linear-gradient(180deg,var(--gold-hi),var(--gold-2));color:#1a1505;border-color:var(--gold-3)}
.chip .pct{color:var(--verdigris-hi);margin-left:7px}
.chip.on .pct{color:#3a2f10}
.monster-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.monster-btn{
  text-align:left;padding:11px 13px;border-radius:4px;cursor:pointer;
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--parch);
  font-weight:600;font-size:12.5px;letter-spacing:.05em;
}
.monster-btn:hover{border-color:var(--gold-3)}
.monster-btn.on{border-color:var(--gold-2);background:rgba(201,143,20,.14);color:var(--gold-hi)}
.rate{font-family:var(--font-mono);color:var(--gold);font-weight:600}
.pkp{font-family:var(--font-mono);color:var(--verdigris-hi)}

/* ---------- itemlist ---------- */
.item-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.item-chip{
  display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:4px;
  background:var(--panel-2);border:1px solid var(--line);color:var(--parch);
}
.item-chip:hover{border-color:var(--gold-3)}
.item-chip .id{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;color:var(--muted);background:#171611;border:1px solid var(--line);border-radius:3px;padding:3px 7px;flex:none}
.item-chip b{font-size:13px;font-weight:600;letter-spacing:.02em}

/* ---------- vote ---------- */
.vote-site{display:flex;align-items:center;gap:16px;padding:16px;border:1px solid var(--line);border-radius:5px;background:var(--panel-2)}
.vote-site + .vote-site{margin-top:10px}
.vote-site .vs-ic{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:5px;background:rgba(201,143,20,.1);border:1px solid var(--line-gold);color:var(--gold);font-weight:900;font-family:var(--font-display);font-size:16px}
.vote-site .vs-body{flex:1}
.vote-site .vs-body b{display:block;font-size:14px;letter-spacing:.06em;color:var(--bone)}
.vote-site .vs-body span{font-family:var(--font-mono);font-size:10.5px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}
/* A listing still on cooldown: dimmed, and its button shows the clock rather
   than an action, so the row reads as information instead of a dead button. */
.vote-site.is-waiting{opacity:.55}
.vote-site.is-waiting .btn{cursor:default}
.reward-list{list-style:none;padding:0;margin:0}
.reward-list li{display:flex;gap:10px;align-items:center;padding:9px 2px;border-bottom:1px dashed var(--line);font-size:13.5px;color:var(--parch)}
.reward-list li:last-child{border-bottom:none}
.reward-list .bi{color:var(--gold-2)}

/* ---------- download ---------- */
.os-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
@media(max-width:1000px){.os-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.os-grid{grid-template-columns:1fr}}
.os-card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:24px;text-align:center;transition:transform .15s,border-color .15s}
.os-card:hover{transform:translateY(-4px);border-color:var(--gold-3)}
.os-card .os-ic{font-size:34px;margin-bottom:10px}
.os-card h3{font-size:15px;letter-spacing:.16em;text-transform:uppercase}
.os-card ul{list-style:none;padding:0;margin:10px 0 18px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.os-card ul li{padding:4px 0;border-bottom:1px dashed var(--line)}
.os-card ul li:last-child{border-bottom:none}
.choice-card{padding:30px;text-align:center}
.choice-card .glyph{font-size:40px;margin-bottom:14px}
.choice-card h3{font-size:18px;letter-spacing:.14em;text-transform:uppercase}
.choice-card p{color:var(--muted);font-size:13.5px}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:step}
@media(max-width:760px){.steps{grid-template-columns:1fr}}
.step{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:24px;position:relative}
.step::before{
  counter-increment:step;content:"0" counter(step);
  font-family:var(--font-display);font-weight:900;font-size:38px;line-height:1;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-2));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  display:block;margin-bottom:12px;
}
.step h3{font-size:14.5px;letter-spacing:.14em;text-transform:uppercase}
.step p{color:var(--muted);font-size:13.5px;margin:0}

/* ---------- staff ---------- */
.staff-group{margin-bottom:26px}
.staff-group .sg-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.staff-group .sg-head h3{margin:0;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.staff-group .sg-head .cnt{font-family:var(--font-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);padding:4px 9px;border-radius:999px}
.staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.staff-card{display:flex;align-items:center;gap:14px;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:13px 15px}
.staff-card:hover{border-color:var(--gold-3)}
.staff-av{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:4px;
  font-family:var(--font-display);font-weight:700;font-size:15px;color:#1a1505;
  background:linear-gradient(135deg,var(--gold-hi),var(--gold-2));border:1px solid var(--gold-3);
}
.staff-card b{display:block;font-size:14px;letter-spacing:.05em;color:var(--bone)}
.staff-card span{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- support ---------- */
.support-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
@media(max-width:760px){.support-grid{grid-template-columns:1fr}}
.support-card{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:26px}
.support-card:hover{border-color:var(--gold-3)}
.support-card .s-ic{width:46px;height:46px;display:grid;place-items:center;border-radius:5px;background:rgba(201,143,20,.1);border:1px solid var(--line-gold);color:var(--gold);font-size:20px;margin-bottom:14px}
.support-card h3{font-size:15px;letter-spacing:.12em;text-transform:uppercase}
.support-card p{color:var(--muted);font-size:13.5px;margin-bottom:16px}
.support-card .mono{font-size:12px;color:var(--gold)}
.safety-note{
  display:flex;gap:12px;align-items:flex-start;margin-top:26px;padding:16px 18px;
  border:1px solid var(--blood);border-radius:5px;background:rgba(143,29,23,.08);
  font-size:13px;color:var(--parch);
}
.safety-note .bi{color:var(--red);font-size:16px;margin-top:2px}

/* ---------- faq ---------- */
.faq{border:1px solid var(--line);border-radius:6px;overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:none}
.faq summary{
  list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;gap:12px;
  font-weight:700;font-size:13.5px;letter-spacing:.06em;color:var(--parch);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;font-family:var(--font-mono);color:var(--gold-2);font-size:16px}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{color:var(--gold);background:rgba(201,143,20,.06)}
.faq .a{padding:0 20px 18px;color:var(--muted);font-size:13.5px}

/* ---------- rules ---------- */
.rule-num{
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.2em;color:#1a1505;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold-2));padding:4px 9px;border-radius:2px;flex:none;
}
.rules-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.rules-list li{display:flex;gap:14px;align-items:flex-start;background:var(--panel-2);border:1px solid var(--line);border-radius:5px;padding:15px 17px;font-size:14px;color:var(--parch)}
.rules-list li b{color:var(--bone)}

/* ---------- provably fair ---------- */
.pf-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:step}
@media(max-width:760px){.pf-steps{grid-template-columns:1fr}}
.hash-out{
  font-family:var(--font-mono);font-size:12px;color:var(--verdigris-hi);word-break:break-all;
  background:#14120c;border:1px solid var(--line);border-radius:4px;padding:12px 14px;min-height:44px;
}

/* ---------- play (client mock) ---------- */
.client-frame{
  max-width:780px;margin:0 auto;border:2px solid var(--gold-3);border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#26221a,#17140d);box-shadow:var(--shadow-1),inset 0 0 0 1px rgba(245,217,122,.14);
}
.client-titlebar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:#14120c;border-bottom:1px solid var(--line-gold);padding:9px 16px;
  font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);
}
.client-titlebar .dots{display:flex;gap:6px}
.client-titlebar .dots i{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
.client-titlebar .dots i:first-child{background:var(--gold-2)}
.client-canvas{
  position:relative;min-height:430px;display:grid;place-items:center;padding:40px 26px;
  background:
    radial-gradient(65% 70% at 50% 35%,rgba(201,143,20,.16),transparent 70%),
    repeating-linear-gradient(90deg,rgba(232,226,212,.02) 0 1px,transparent 1px 6px),
    #1a1712;
}
.client-canvas .wm{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);width:210px;opacity:.14;image-rendering:pixelated}
.login-card{
  position:relative;width:100%;max-width:380px;background:rgba(20,18,12,.92);
  border:1px solid var(--line-gold);border-radius:6px;padding:32px 28px;text-align:center;
  box-shadow:var(--shadow-1);
}
.login-card img{width:74px;height:74px;image-rendering:pixelated;margin:0 auto 14px;filter:drop-shadow(0 6px 20px rgba(201,143,20,.5))}
.login-card h2{font-size:19px;letter-spacing:.14em;text-transform:uppercase}
.login-card .sub{font-family:var(--font-mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:2px 0 22px}
.status-strip{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-top:26px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);
}
.status-strip b{color:var(--gold);font-weight:600}
.status-strip .live{color:var(--green)}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:28px;transform:translate(-50%,20px);z-index:120;
  background:#1d1b13;border:1px solid var(--gold-2);border-radius:5px;
  color:var(--parch);font-size:13.5px;padding:14px 22px;max-width:90vw;
  box-shadow:var(--shadow-1),0 0 30px rgba(201,143,20,.18);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;
  display:flex;align-items:center;gap:11px;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .bi{color:var(--gold);font-size:15px}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .scroll-cue::after{animation:none}
}

/* ---------- misc ---------- */
.note-strip{
  display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:15px 17px;
  border:1px solid var(--line-gold);border-radius:5px;background:rgba(201,143,20,.07);
  font-size:13px;color:var(--parch);
}
.note-strip .bi{color:var(--gold);font-size:15px;margin-top:2px;flex:none}
.note-strip .semantic-icon{width:24px;height:24px;margin-top:-2px}
.hr-gold{height:1px;border:none;background:linear-gradient(90deg,transparent,var(--gold-3),transparent);margin:34px 0}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:760px){.stat-strip{grid-template-columns:repeat(2,1fr)}}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:20px;text-align:center}
.stat .v{font-family:var(--font-display);font-weight:700;font-size:26px;color:var(--gold)}
.stat .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* ============================================================
   ranked ladder — the same eight trophy sprites used by the client
   ============================================================ */
.ladder-rail{
  display:grid;grid-template-columns:repeat(8,1fr);gap:12px;position:relative;
}
.ladder-rail::before{
  content:"";position:absolute;left:10%;right:10%;top:52px;height:2px;
  background:linear-gradient(90deg,var(--bronze-2),var(--steel-1),var(--mith-1),var(--rune-1),var(--drag-1));
  opacity:.4;
}
:root{
  --bronze-1:#cd7f32;--bronze-2:#8c4a1c;
  --steel-1:#cfd8e3;--steel-2:#79838f;
  --mith-1:#7d9bf2;--mith-2:#2f4499;
  --rune-1:#4fd0d6;--rune-2:#14707c;
  --drag-1:#ef6a4f;--drag-2:#8f1d17;
}
.tier{position:relative;text-align:center;padding:0 2px}
.crest{
  position:relative;display:grid;place-items:center;width:80px;height:88px;margin:0 auto 14px;
  filter:drop-shadow(0 10px 20px rgba(0,0,0,.6));
  transition:transform .25s ease,filter .25s ease;
}
.crest img{width:64px;height:64px;object-fit:contain;image-rendering:pixelated}
.tier:hover .crest{transform:translateY(-5px) scale(1.04);filter:drop-shadow(0 14px 26px rgba(0,0,0,.7))}
.t-dragon .crest{filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)) drop-shadow(0 0 14px rgba(239,106,79,.55))}
.t-dragon:hover .crest{filter:drop-shadow(0 14px 26px rgba(0,0,0,.7)) drop-shadow(0 0 20px rgba(239,106,79,.7))}
.tier-name{
  display:block;font-family:var(--font-display);font-weight:700;font-size:14px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--bone);
}
.tier-elo{
  display:block;font-family:var(--font-mono);font-size:11.5px;font-weight:600;
  letter-spacing:.1em;color:var(--gold);margin-top:3px;
}
.tier-pop{
  display:block;font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-top:5px;
}
@media(max-width:860px){
  .ladder-rail{grid-template-columns:repeat(4,1fr);row-gap:28px}
  .ladder-rail::before{display:none}
  .crest{width:80px;height:88px}
}
@media(max-width:460px){.ladder-rail{grid-template-columns:repeat(2,1fr)}}

.elo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
@media(max-width:860px){.elo-grid{grid-template-columns:1fr}}
.elo-card{
  position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:5px;padding:24px 22px 22px;
}
.elo-card:hover{border-color:var(--gold-3)}
.elo-n{
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.28em;
  color:var(--gold-2);display:block;margin-bottom:10px;
}
.elo-card h3{font-size:15px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.elo-card p{color:var(--muted);font-size:13.5px;margin:0}
.elo-formula{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 18px;
  margin-top:20px;padding:15px 18px;border:1px solid var(--line-gold);border-radius:5px;
  background:rgba(201,143,20,.07);
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--parch);text-align:center;
}
.elo-formula b{color:var(--gold);font-weight:600}

/* ---------- top killcams ---------- */
/* The board is a list of fights, not a grid of cards: a rank, the two names,
   and the vote. Ranked order is the page's whole point, so rows share a baseline
   and the rank sits in a fixed gutter that the eye can run down. */
.kc-list{display:flex;flex-direction:column;gap:8px}
.kc-card{
  display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:16px;
  background:var(--panel);border:1px solid var(--line);border-radius:5px;
  padding:14px 16px;
}
.kc-card:hover{border-color:var(--gold-3)}
.kc-rank{
  font-family:var(--font-mono);font-size:15px;font-weight:600;color:var(--gold-2);
  letter-spacing:.04em;text-align:center;font-variant-numeric:tabular-nums;
}
.kc-names{font-size:15px;color:var(--parch);letter-spacing:.01em}
.kc-names b{color:var(--bone);font-weight:700}
.kc-names i{color:var(--gold-3);font-size:11px;margin:0 4px}
.kc-meta{
  display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:5px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
/* The killing weapon on a board row: the item's own icon beside its name. The
   icon is a fixed 32px cell of a sheet, so it is scaled down by transform
   rather than by width - a background-position would not move with it. */
.kc-weapon-chip{display:inline-flex;align-items:center;gap:6px}
.kc-weapon-chip .kc-icon{
  width:32px;height:32px;flex:none;transform:scale(.62);margin:-9px -7px;
}
/* What the kill was worth, on a board row: the tier's own emblem item, the
   tier and rating, and the move. Green up, red down, and a flat grey for an
   unrated kill - a farmed alt or a repeat victim, which the world states
   deliberately rather than leaving out. */
.kc-rank-chip{display:inline-flex;align-items:center;gap:5px}
.kc-rank-chip .kc-icon.tier{
  width:32px;height:32px;flex:none;transform:scale(.56);margin:-9px -7px -9px -8px;
}
.kc-rank-chip em{font-style:normal;font-weight:600;margin-left:5px}
.kc-rank-chip em.up,.kc-rank-row em.up{color:#7fbf6a}
.kc-rank-chip em.down,.kc-rank-row em.down{color:#d2726a}
.kc-rank-chip em.flat,.kc-rank-row em.flat{color:var(--muted)}
.kc-actions{display:flex;align-items:center;gap:10px}
.kc-vote{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:52px;padding:6px 8px;background:#171611;color:var(--ash);
  border:1px solid var(--line-2);border-radius:4px;cursor:pointer;
  font-family:var(--font-mono);font-size:13px;line-height:1.15;transition:.15s;
}
.kc-vote i{font-size:11px}
.kc-vote b{font-weight:600;font-variant-numeric:tabular-nums}
.kc-vote:hover{border-color:var(--gold-2);color:var(--gold)}
.kc-vote.on{background:rgba(201,143,20,.14);border-color:var(--gold-2);color:var(--gold-hi)}
.kc-vote:disabled{opacity:.55;cursor:default}
.kc-empty{color:var(--muted);padding:26px 4px;margin:0;text-align:center}
@media(max-width:640px){
  .kc-card{grid-template-columns:40px 1fr;row-gap:12px}
  .kc-actions{grid-column:2;justify-content:flex-end}
}

/* ---------- kill feed ---------- */
/* The homepage banner: one line per kill, scrolling right to left. The track
   is rendered twice back to back and the keyframe moves exactly half its own
   width, so the loop has no seam regardless of how many posts are live. */
.feed-ticker{
  background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;white-space:nowrap;position:relative;
}
.feed-ticker-label{
  position:absolute;left:0;top:0;bottom:0;display:flex;align-items:center;gap:6px;
  padding:0 14px;background:var(--panel);border-right:1px solid var(--line);z-index:1;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-2);
}
.feed-ticker-viewport{padding-left:132px;overflow:hidden}
.feed-ticker-track{
  display:inline-flex;align-items:center;gap:28px;padding:11px 0;
  animation:feed-ticker-scroll 60s linear infinite;
}
.feed-ticker:hover .feed-ticker-track{animation-play-state:paused}
.feed-ticker-item{font-size:13px;color:var(--parch)}
.feed-ticker-item b{color:var(--bone)}
.feed-ticker-item .kf-b{color:var(--muted);font-size:11px}
.feed-ticker-item .kf-weapon,.feed-ticker-item .kf-loc{color:var(--muted);font-size:12px}
.feed-ticker-sep{color:var(--gold-3)}
@keyframes feed-ticker-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(prefers-reduced-motion:reduce){
  .feed-ticker-track{animation:none}
}
@media(max-width:640px){
  .feed-ticker-label{display:none}
  .feed-ticker-viewport{padding-left:0}
}

/* The /killfeed/ newsfeed: kf-cards reuse kc-card's grid and simply swap in a
   timestamp for a rank and a replay link for a vote. */
.kf-card{grid-template-columns:64px 1fr auto}
.kf-time{
  font-family:var(--font-mono);font-size:11px;color:var(--muted);text-align:center;
  letter-spacing:.04em;
}
.kf-line{font-size:14.5px;color:var(--parch);line-height:1.5}
.kf-line b{color:var(--bone);font-weight:700}
.kf-line .kf-b{color:var(--muted);font-size:11.5px;font-family:var(--font-mono)}
.kf-line i{color:var(--gold-3);font-size:11px;margin:0 4px}
.kf-noreplay{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);
}
.kf-more{display:flex;justify-content:center;margin-top:14px}
@media(max-width:640px){
  .kf-card{grid-template-columns:1fr}
}

/* The replay viewer. Dark to the edges on purpose: the fight is drawn on an
   empty floor because a cam records tiles and no scenery, and dressing the
   frame would imply a place the recording does not hold. */
.kc-modal{
  position:fixed;inset:0;z-index:120;display:none;
  background:rgba(8,8,6,.86);backdrop-filter:blur(3px);
  padding:24px;overflow-y:auto;
}
.kc-modal.open{display:flex;align-items:flex-start;justify-content:center}
/* Wide enough for the fight and the scoreboard side by side, because reading a
   fight is the point of the panel and a spectator should not have to scroll
   from the hits to who took them. Below 1000px the two stack, stage first. */
.kc-frame{
  width:100%;max-width:1120px;background:var(--panel);border:1px solid var(--line-gold);
  border-radius:6px;box-shadow:var(--shadow-1);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"head head" "stage board" "controls board" "legend board";
  align-content:start;
}
.kc-frame-head{grid-area:head}
.kc-stage{grid-area:stage}
.kc-controls{grid-area:controls}
.kc-legend{grid-area:legend}
.kc-scoreboard{grid-area:board;border-left:1px solid var(--line);min-width:0}
@media(max-width:1000px){
  .kc-frame{
    max-width:620px;grid-template-columns:minmax(0,1fr);
    grid-template-areas:"head" "stage" "controls" "legend" "board";
  }
  .kc-scoreboard{border-left:0;border-top:1px solid var(--line)}
}
.kc-frame-head{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border-bottom:1px solid var(--line);background:var(--panel-2);
}
.kc-frame-head h3{font-size:15px;letter-spacing:.02em;margin:0;color:var(--parch);font-weight:500}
.kc-frame-head h3 b{color:var(--bone)}
.kc-head-tools{display:flex;align-items:center;gap:8px}
#kc-close{
  background:none;border:1px solid var(--line-2);color:var(--ash);
  width:30px;height:30px;border-radius:4px;cursor:pointer;
}
#kc-close:hover{color:var(--gold);border-color:var(--gold-3)}
.kc-stage{background:#0a0a08;padding:0;line-height:0;position:relative}
#kc-canvas{width:100%;height:auto;display:block}
/* An explicit display beats the browser's own [hidden] rule, so the hidden
   view has to be hidden explicitly too or both canvases stack up. */
#kc-canvas[hidden],#kc-gl[hidden]{display:none}
/* The 3D stage is square like the tile board it replaces, so switching between
   the two views does not resize the frame under the cursor. */
#kc-gl{width:100%;aspect-ratio:1/1;display:block;touch-action:none;cursor:grab}
#kc-gl:active{cursor:grabbing}
/* Names, hitpoints and hitsplats ride above the canvas rather than inside it:
   they are text, and text drawn into WebGL is a texture atlas nobody needs. */
.kc-overlay{position:absolute;inset:0;pointer-events:none;line-height:1.2}
.kc-tag{
  position:absolute;transform:translate(-50%,-100%);text-align:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;
  color:var(--bone);text-shadow:0 1px 3px rgba(0,0,0,.9);white-space:nowrap;
}
.kc-tag.killer{color:var(--gold-hi)}
.kc-tag.victim{color:#e8776f}
/* The hitpoints bar the game draws: thirty pixels wide, five tall, pure green
   over pure red, no radius and no gradient - Client#drawEntities fills two
   boxes of 65280 and 0xff0000 and nothing else. */
.kc-bar{width:30px;height:5px;margin:3px auto 0;background:#f00;overflow:hidden}
.kc-bar span{display:block;height:100%;background:#0f0}
/* A hitsplat is the cache's own sprite with the damage over it, so the site
   shows what the client shows rather than a coloured circle that resembles it.
   The sprite is 24x23 and the number sits on its middle, as the client's
   smallText does at spriteDrawY + 3. */
.kc-splat{
  position:absolute;transform:translate(-50%,-50%);
  width:24px;height:23px;
  background-repeat:no-repeat;background-size:24px 23px;
  image-rendering:pixelated;
  font-family:var(--font-mono);font-size:12px;font-weight:700;line-height:23px;
  text-align:center;color:#fff;
  text-shadow:1px 1px 0 #000,-1px 0 0 #000,0 -1px 0 #000;
}
.kc-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);background:rgba(8,8,6,.7);
}
.kc-loading[hidden]{display:none}
/* The scoreboard. Everything on it is a picture the game itself draws: the
   equipment icons are the client's own inventory renders, exported by
   `./gradlew -p client dumpItemIcons`; the hitsplats and head icons are the
   cache's own sprites. Nothing here is a shape in CSS standing in for one. */

/* An icon is one 32x32 cell of a 512-icon sheet, positioned by the loader. It
   is pixel art at its native size, so it is never smoothed and never scaled. */
.kc-icon{
  display:block;width:32px;height:32px;
  background-repeat:no-repeat;image-rendering:pixelated;
}
.kc-icon.big{width:32px;height:32px;transform:scale(1.35);transform-origin:center}

/* A head icon - overhead prayer, or the skull - at the 25x25 the cache holds. */
.kc-head{
  display:inline-block;width:16px;height:16px;flex:none;
  background-repeat:no-repeat;background-size:contain;image-rendering:pixelated;
}

.kc-sides{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border-bottom:1px solid var(--line);
}
.kc-side{background:var(--panel);padding:14px 14px 16px;min-width:0}
.kc-who-line{display:flex;align-items:center;gap:6px;min-width:0}
.kc-who-line b{
  font-size:15px;color:var(--bone);font-weight:700;letter-spacing:.01em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.kc-who-sub{
  display:flex;align-items:center;gap:10px;margin-top:6px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.kc-tagline{padding:2px 6px;border-radius:3px;border:1px solid var(--line-2);font-weight:600}
.kc-tagline.win{color:var(--gold-hi);border-color:var(--gold-3);background:rgba(201,143,20,.14)}
.kc-tagline.loss{color:#c96a63;border-color:#4a2b28;background:rgba(201,106,99,.1)}

/* The hitpoints the fighter was last recorded on, drawn as the game's bar -
   pure green over pure red, no radius and no gradient. */
.kc-hp{display:flex;align-items:center;gap:8px;margin-top:9px}
.kc-hp-bar{flex:1;height:6px;background:#f00;overflow:hidden;min-width:0}
.kc-hp-bar span{display:block;height:100%;background:#0f0}
.kc-hp em{
  font-family:var(--font-mono);font-size:10px;font-style:normal;color:var(--ash);
  font-variant-numeric:tabular-nums;
}

/* The fighter's league standing after the kill. These are the canonical
   Bronze-through-Dragon trophy sprites shared with the game client. */
.kc-rank-row{
  display:flex;align-items:center;gap:2px;margin-top:10px;
  padding:6px 8px;background:#171611;border:1px solid var(--line);border-radius:3px;
}
.kc-rank-row .kc-icon.tier{
  width:32px;height:32px;flex:none;transform:scale(.66);margin:-8px -6px;
}
.kc-rank-name{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);margin-left:6px;
}
.kc-rank-row b{
  font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--bone);
  font-variant-numeric:tabular-nums;margin-left:auto;
}
.kc-rank-row em{
  font-family:var(--font-mono);font-size:11px;font-style:normal;font-weight:600;
  font-variant-numeric:tabular-nums;margin-left:7px;min-width:34px;text-align:right;
}

/* What the fighter landed, from the other one's frames. */
.kc-mini{display:flex;gap:1px;margin-top:11px;background:var(--line)}
.kc-mini > div{
  flex:1;background:#171611;padding:7px 8px 8px;display:flex;flex-direction:column;gap:1px;
}
.kc-mini span{
  font-family:var(--font-mono);font-size:8.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.kc-mini b{
  font-family:var(--font-mono);font-size:14px;font-weight:600;color:var(--bone);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.kc-side.killer .kc-mini b{color:var(--gold)}
.kc-side.victim .kc-mini b{color:#e0938c}

/* The paperdoll, in the shape of a player's own equipment tab. */
.kc-doll{margin-top:12px;display:flex;flex-direction:column;gap:4px;align-items:center}
.kc-doll-row{display:flex;gap:4px}
.kc-slot{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:#171611;border:1px solid var(--line);border-radius:3px;
}
.kc-slot.on{border-color:var(--gold-3);background:#1d1b13}
.kc-slot.gap{background:none;border-color:transparent}

/* The tape: one column per recorded tick, the splats that landed on it, and
   the tick number. The column under the playhead is lit. */
.kc-tape{padding:14px 14px 12px;border-bottom:1px solid var(--line)}
/* The key names the two rows in the fighters' own colours, in row order: what
   the killer landed on top, what the victim landed under it. */
.kc-tape-key{
  display:flex;flex-direction:column;gap:2px;margin-bottom:8px;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;
}
.kc-tape-key span{display:flex;align-items:center;gap:6px}
.kc-tape-key span::before{content:"";width:7px;height:7px;border-radius:50%;flex:none}
.kc-tape-key .k{color:var(--gold-2)}
.kc-tape-key .k::before{background:var(--gold-2)}
.kc-tape-key .v{color:#c96a63}
.kc-tape-key .v::before{background:#c96a63}
.kc-tape-cols{display:flex;gap:3px;overflow-x:auto}
.kc-tick{
  flex:1 1 0;min-width:30px;display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:4px 2px 3px;background:#171611;border:1px solid var(--line);border-radius:3px;
  cursor:pointer;
}
.kc-tick:hover{border-color:var(--gold-3)}
.kc-tick.now{border-color:var(--gold-2);background:rgba(201,143,20,.12)}
.kc-tick em{
  font-family:var(--font-mono);font-size:9px;font-style:normal;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.kc-cell{display:flex;align-items:center;justify-content:center;height:23px;width:24px}
.kc-cell.none::after{content:"";width:3px;height:3px;border-radius:50%;background:var(--line-2)}
/* The splat as the client draws it: the cache's 24x23 sprite with the number
   on its middle. A zero is the blue splat with a 0 on it, not the word block. */
.kc-splat-s{
  width:24px;height:23px;background-repeat:no-repeat;background-size:24px 23px;
  image-rendering:pixelated;
  font-family:var(--font-mono);font-size:11px;font-weight:700;line-height:23px;
  text-align:center;color:#fff;
  text-shadow:1px 1px 0 #000,-1px 0 0 #000,0 -1px 0 #000;
}

/* The killing weapon, and the scalars a spectator reads a fight by. */
.kc-weapon{
  display:flex;align-items:center;gap:14px;padding:14px;border-bottom:1px solid var(--line);
}
.kc-weapon > div{display:flex;flex-direction:column;gap:2px;min-width:0}
.kc-weapon span{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.kc-weapon b{font-size:14px;color:var(--bone);font-weight:600}
.kc-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line)}
@media(min-width:1000px){.kc-tiles{grid-template-columns:repeat(4,1fr)}}
.kc-tile{background:var(--panel);padding:11px 12px 12px;display:flex;flex-direction:column;gap:2px}
.kc-tile span{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.kc-tile b{
  font-family:var(--font-mono);font-size:17px;font-weight:600;color:var(--gold);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.kc-tile em{
  font-family:var(--font-mono);font-size:9px;font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ash);
}
@media(max-width:420px){.kc-sides{grid-template-columns:1fr}}
.kc-controls{display:flex;align-items:center;gap:12px;padding:12px 16px;border-top:1px solid var(--line)}
#kc-play{
  width:36px;height:36px;flex:none;border-radius:4px;cursor:pointer;
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 35%,var(--gold-2));
  border:1px solid var(--gold-3);color:#1a1505;font-size:16px;
}
#kc-scrub{flex:1;accent-color:var(--gold-2);height:4px}
#kc-status{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap;
}
.kc-legend{
  display:flex;gap:18px;flex-wrap:wrap;padding:0 16px 14px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.kc-legend span{display:flex;align-items:center;gap:7px}
.kc-legend i{width:9px;height:9px;border-radius:50%;display:inline-block}
.kc-dot-k{background:var(--gold)}
.kc-dot-v{background:#e8776f}

/* ---------------------------------------------------------------- battles
   The Battle Finder board and its alert form. Four small classes, because
   the page is otherwise built entirely from the panel/table/seg/field
   material the hiscores and donate pages already use - a scheduled-fight
   board is a league table with a countdown in the first column, and it
   should read as one. */
.league-table td.empty{color:var(--muted);text-align:center;padding:26px 4px}
.league-table .dim{color:var(--muted)}
.league-table .live{color:var(--red, #d9534f)}
.sub.bad{color:var(--red, #d9534f)}

/* ---------- player profile ---------- */
/* A name is a link wherever it is printed - a ladder row, a killcam card, a
   feed post - and all of them land on /player/. The link keeps the colour of
   the text it replaced and earns its underline on hover, so a board still
   reads as a board rather than as a page of links. */
.u-link{color:inherit;text-decoration:none}
.u-link:hover{color:var(--gold-hi);text-decoration:underline}
.u-link b,.u-link span{color:inherit}
.league-table td.u .u-link:hover{color:var(--gold-hi)}

.pp-hero{padding-bottom:22px}
/* The header facts: combat, bracket, tier and what the cams add up to. Chips
   rather than a table, because they are readings of different things and only
   some of them exist for any given account. */
.pp-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px;position:relative}
.pp-chip{
  display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
  background:var(--panel);border:1px solid var(--line);border-radius:4px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);
}
.pp-chip b{color:var(--bone);font-weight:600;font-size:12px;letter-spacing:.06em}
.pp-chip.tier{border-color:var(--gold-3)}
.pp-chip.tier span{color:var(--gold)}
.pp-chip .kc-icon.tier{width:32px;height:32px;flex:none;transform:scale(.56);margin:-9px -8px}

.pp-main{display:flex;flex-direction:column;gap:16px}
/* Six tiles, in the order the in-game card reads them (spec/PLAYER_CARD.md):
   the pair a player is judged on first, then the ratio, then the ladder. */
.pp-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line)}
@media(max-width:560px){.pp-tiles{grid-template-columns:repeat(2,1fr)}}
.pp-tile{background:var(--panel);padding:15px 16px 16px;display:flex;flex-direction:column;gap:3px}
.pp-tile span{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--muted);
}
.pp-tile b{font-family:var(--font-display);font-size:23px;color:var(--gold);font-weight:700;line-height:1.1}
.pp-tile em{font-style:normal;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;color:var(--ash)}
.pp-rank-tile{
  grid-column:1/-1;min-height:112px;position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:22px;
  padding:20px 24px;background:linear-gradient(100deg,rgba(67,49,16,.97),rgba(29,27,19,.98) 58%,rgba(20,19,16,.99));
  border-left:3px solid var(--gold);box-shadow:inset 0 1px rgba(255,226,141,.18);
}
.pp-rank-tile::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;background:radial-gradient(circle at 87% 45%,rgba(201,143,20,.42),transparent 24%)}
.pp-rank-tile-copy{display:flex;flex-direction:column;gap:3px}
.pp-rank-tile-copy span,.pp-rank-tile-rating span{font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:#c8ae71}
.pp-rank-tile-copy b{font-size:31px;letter-spacing:.04em;color:var(--gold-hi);line-height:1}
.pp-rank-tile-copy em{font-size:10.5px;color:var(--parch)}
.pp-rank-tile-rating{margin-left:auto;text-align:right;display:flex;flex-direction:column;gap:2px}
.pp-rank-tile-rating strong{font-family:var(--font-display);font-size:35px;line-height:1;color:var(--bone);font-variant-numeric:tabular-nums}
.pp-rank-tile .kc-icon.pp-rank-crest{width:74px;height:74px;object-fit:contain;filter:drop-shadow(0 8px 12px rgba(0,0,0,.42))}
@media(max-width:560px){
  .pp-rank-tile{min-height:104px;padding:17px 16px;gap:12px}
  .pp-rank-tile-copy b{font-size:26px}
  .pp-rank-tile-rating strong{font-size:29px}
  .pp-rank-tile .kc-icon.pp-rank-crest{width:57px;height:57px}
}

/* A fight on a profile is the same row the board draws, with the rank gutter
   spent on the verdict instead: a profile is read down one player's column, so
   whether they won is the thing the eye needs first. */
.pp-cam .pp-verdict{font-size:10px;letter-spacing:.18em}
.pp-verdict.win{color:var(--gold)}
.pp-verdict.loss{color:#c96a63}
.pp-foe{color:var(--muted);font-size:12.5px;margin-left:4px}
.kc-names .u-link:hover b,.kc-names .u-link:hover span{color:var(--gold-hi)}
.panel-killcams{border-top:2px solid var(--gold-2)}
.panel-killcams .panel-head{align-items:center}
.panel-kicker{margin-bottom:3px;font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.panel-kicker i{margin-right:5px;font-size:10px}
.panel-kicker .semantic-icon{width:18px;height:18px;margin-right:5px}
.pp-killcam-copy{margin:0;padding:12px 15px;border-bottom:1px solid var(--line);background:rgba(201,143,20,.045);color:var(--muted);font-size:12.5px;line-height:1.5}

.pp-skills{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
@media(max-width:760px){.pp-skills{grid-template-columns:repeat(3,1fr)}}
@media(max-width:460px){.pp-skills{grid-template-columns:repeat(2,1fr)}}
.pp-skill{background:var(--panel);padding:10px 12px;display:flex;flex-direction:column;gap:1px}
.pp-skill span{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);
}
.pp-skill b{font-size:15px;color:var(--bone);font-weight:600}
.pp-skill em{font-style:normal;font-family:var(--font-mono);font-size:10px;color:var(--ash)}

.pp-ranks{display:flex;flex-direction:column}
.pp-rank{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 14px;border-bottom:1px solid var(--line);color:var(--parch);
  text-decoration:none;font-size:13px;
}
.pp-rank:last-child{border-bottom:0}
.pp-rank:hover{background:rgba(201,143,20,.09);color:var(--gold-hi)}
.pp-rank b{font-family:var(--font-mono);color:var(--gold);font-weight:600;font-variant-numeric:tabular-nums}

/* Name completion under the search box. Empty until it has something to say,
   so the panel does not reserve a hole for a list that may never come. */
.pp-suggest{display:flex;flex-direction:column;margin:-4px 0 12px}
.pp-suggest:empty{display:none}
.pp-suggest a{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px 10px;border:1px solid var(--line);border-bottom:0;
  color:var(--parch);text-decoration:none;font-size:13px;background:#141310;
}
.pp-suggest a:last-child{border-bottom:1px solid var(--line)}
.pp-suggest a:hover{background:rgba(201,143,20,.1);color:var(--gold-hi)}
.pp-suggest em{font-style:normal;font-family:var(--font-mono);font-size:10.5px;color:var(--muted)}

/* ============================================================
   Old School skin
   Shared, CSS-only treatment based on the pixel PK League crest.
   Keeps every page and interaction intact while replacing the
   glassy app-shell finish with carved timber, stone and parchment.
   ============================================================ */
:root{
  --ink:#14100a;
  --coal:#0d0b07;
  --panel:#211a10;
  --panel-2:#2b2113;
  --card:#302416;
  --bone:#ead9b5;
  --parch:#cfb989;
  --ash:#a88c59;
  --muted:#8f7b5c;
  --line:#4b3820;
  --line-2:#66502c;
  --line-gold:#765b21;
  --shadow-1:6px 8px 0 rgba(0,0,0,.38);
  --shadow-gold:4px 5px 0 rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,225,128,.18);
  --font-display:Georgia,'Times New Roman',serif;
  --font-body:Georgia,'Times New Roman',serif;
}

body{
  font-size:16px;
  -webkit-font-smoothing:auto;
  background-color:var(--ink);
  background-image:
    radial-gradient(ellipse at 50% -10%,rgba(125,83,25,.24),transparent 58%),
    repeating-linear-gradient(0deg,rgba(255,230,170,.018) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(90deg,transparent 0 47px,rgba(0,0,0,.055) 48px);
}
body::before{
  background:
    linear-gradient(90deg,rgba(0,0,0,.38),transparent 12%,transparent 88%,rgba(0,0,0,.38)),
    radial-gradient(70% 45% at 50% -5%,rgba(176,116,27,.18),transparent 70%);
}
body::after{
  opacity:.28;
  background:repeating-linear-gradient(108deg,rgba(235,199,125,.04) 0 1px,transparent 1px 5px);
}

.site-header{
  background:
    linear-gradient(180deg,rgba(64,43,22,.98),rgba(31,23,13,.98)),
    var(--panel);
  backdrop-filter:none;
  border-bottom:3px ridge #80632d;
  box-shadow:0 5px 0 rgba(0,0,0,.3);
}
.site-header::before{
  content:"";position:absolute;inset:4px 0 auto;height:1px;
  background:rgba(238,199,105,.18);pointer-events:none;
}
.site-header::after{height:2px;opacity:.42}
.nav-inner{padding-block:8px}
.brand img,.footer-brand img{image-rendering:pixelated}
.brand img{width:42px;height:42px;filter:drop-shadow(2px 3px 0 #090704)}
.brand-mark .main{text-shadow:2px 2px 0 #0b0804;letter-spacing:.06em}
.nav-link{
  font-family:var(--font-display);font-size:13px;letter-spacing:.08em;
  text-shadow:1px 2px 0 #0a0704;border:1px solid transparent;
}
.nav-link:hover,.nav-link.active{
  background:#241a0d;border-color:#6a5127;border-bottom-color:#b68825;
  box-shadow:inset 1px 1px 0 rgba(255,224,143,.1),inset -1px -1px 0 #0e0a05;
}

.btn{
  border-radius:0;font-family:var(--font-display);letter-spacing:.08em;
  border-width:2px;box-shadow:3px 4px 0 rgba(0,0,0,.42);
  text-shadow:0 1px 0 rgba(255,255,255,.2);
  transition:filter .12s,transform .12s;
}
.btn:hover{transform:translate(-1px,-1px)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(0,0,0,.45)}
.btn-gold{
  background:linear-gradient(180deg,#ffe69a 0,#e5b632 48%,#9a6511 52%,#c78b18 100%);
  border-color:#4c3107;outline:1px solid #d7ad43;outline-offset:-4px;
}
.btn-outline{background:linear-gradient(#342a1c,#21190f);border-color:#715b37}
.pill,.tag,.read-more,.info-tabs a{border-radius:0}

.hero-min{
  min-height:calc(100vh - 64px);padding:74px 20px 96px;
  background:
    radial-gradient(ellipse at center,rgba(121,77,20,.21) 0,transparent 58%),
    linear-gradient(90deg,transparent 49.85%,rgba(218,168,61,.055) 50%,transparent 50.15%);
}
.hero-min::before{
  content:"";position:absolute;inset:34px max(18px,calc((100vw - 1120px)/2));pointer-events:none;
  border:1px solid rgba(128,94,40,.45);
  box-shadow:inset 0 0 0 4px rgba(12,9,5,.35),inset 0 0 70px rgba(0,0,0,.34);
  clip-path:polygon(22px 0,calc(100% - 22px) 0,100% 22px,100% calc(100% - 22px),calc(100% - 22px) 100%,22px 100%,0 calc(100% - 22px),0 22px);
}
.hero-min-mark{
  width:136px;height:136px;margin-bottom:20px;image-rendering:pixelated;
  filter:drop-shadow(5px 7px 0 rgba(0,0,0,.55));
}
.hero-min-competition{display:none}
.hero-min-kicker,.hero-min-sub,.hero-min-date{
  font-family:var(--font-display);text-shadow:2px 2px 0 #080603;
}
.hero-min-kicker{font-size:13px;letter-spacing:.28em;color:#e9b93d}
.hero-min-title{
  color:#f2d184;font-size:clamp(44px,9vw,84px);letter-spacing:.025em;
  text-shadow:3px 3px 0 #5d220b,5px 5px 0 #100a04;
}
.hero-min-sub{font-size:15px;letter-spacing:.16em;color:var(--parch)}
.hero-min-date{letter-spacing:.1em;color:#f0cd76}
.season-countdown b{text-shadow:2px 2px 0 #0a0703}
.season-countdown small{font-family:var(--font-display);letter-spacing:.08em}
.hero-text-link{font-family:var(--font-display);letter-spacing:.08em;text-shadow:1px 2px 0 #080603}

.page-hero{
  background:
    linear-gradient(180deg,rgba(64,42,20,.72),rgba(23,17,10,.86)),
    repeating-linear-gradient(90deg,transparent 0 95px,rgba(255,230,170,.035) 96px);
  border-top:1px solid #765a2e;border-bottom:4px ridge #604720;
  box-shadow:inset 0 0 45px rgba(0,0,0,.35);
}
.page-hero h1{text-shadow:2px 3px 0 #0a0704;color:#ecd28f}

.panel,.side-card,.quick-link,.client-card,.elo-card,.product-card,.login-card,.support-card,.rules-list li,.cta-band,.shop-strip{
  border-radius:0;border:2px ridge #6f5730;
  background:linear-gradient(135deg,rgba(52,40,23,.98),rgba(29,22,13,.98));
  box-shadow:var(--shadow-1),inset 1px 1px 0 rgba(255,225,157,.06);
}
.panel-head{
  background:linear-gradient(180deg,#40301a,#2a1e10);
  border-bottom:2px ridge #66502c;
}
.panel-head h3,.side-card h3{color:#e9bd54;text-shadow:1px 2px 0 #0a0703}
.league-table thead th{background:#261b0e;border-bottom:2px ridge #785e2e}
.league-table tbody tr:hover{background:rgba(174,119,30,.13)}
.input,select.input,.seg{
  border-radius:0;background:#171109;border:2px inset #5f4a2a;
  font-family:var(--font-display);
}
.pager button,.seg button,.social-ic,.quick-link .q-ic,.support-card .s-ic{border-radius:0}

.site-footer{
  border-top:4px ridge #5d451f;
  background:linear-gradient(180deg,#261c10,#120e09);
  box-shadow:0 -5px 0 rgba(0,0,0,.2);
}
.footer-brand span,.footer-nav a,.footer-legal{font-family:var(--font-display)}

@media(max-width:700px){
  .hero-min{min-height:calc(100vh - 59px);padding:62px 22px 74px}
  .hero-min::before{inset:18px 10px}
  .hero-min-mark{width:108px;height:108px}
  .hero-min-actions{gap:12px;margin-top:34px;flex-direction:column}
  .hero-min-actions .btn{width:min(100%,320px)}
  .hero-min-title{font-size:clamp(40px,16vw,62px)}
  .hero-min-sub{font-size:12px;letter-spacing:.1em}
  .hero-min-date{font-size:10px;letter-spacing:.06em}
  .mobile-nav{background:linear-gradient(180deg,#322312 0,#120d08 100%);padding-top:82px}
  .mobile-nav a{font-family:var(--font-display);letter-spacing:.08em}
}

@media(prefers-reduced-motion:reduce){
  .btn,.client-card,.product-card,.quick-link{transition:none}
}


/* ============================================================
   CLASSIC HOMEPAGE  (body.rsc)
   The 2005 runescape.com page, in the league's own materials.
   Fixed widths, the browser's own sans, square corners, tiled
   stone behind a carved rail on each side, and a parchment
   scroll carrying the copy. Scoped to `body.rsc` so no interior
   page inherits any of it.
   ============================================================ */
body.rsc{
  --rsc-rail:58px;
  --rsc-w:1000px;
  --rsc-grn:#9fd344;
  --rsc-yel:#ffe100;
  --rsc-red:#e0562c;
  --rsc-ink:#2b2417;
  --rsc-brown:#6b4a1f;
  --rsc-brown-2:#8a6428;
  background:#000;
  color:#d7d2c4;
  font-family:Arial,Helvetica,Verdana,sans-serif;
  font-size:13px;
  line-height:1.5;
  -webkit-font-smoothing:auto;
}
body.rsc::before,body.rsc::after{display:none}
body.rsc a{color:var(--rsc-yel);text-decoration:none}
body.rsc a:hover{text-decoration:underline;color:#fff}
body.rsc h1,body.rsc h2,body.rsc h3,body.rsc b,body.rsc strong{
  font-family:Arial,Helvetica,sans-serif;letter-spacing:0;
}

.rsc-page{
  position:relative;
  max-width:var(--rsc-w);
  margin:0 auto;
  min-height:100vh;
  background:#000 url("/assets/img/classic/stone.png") repeat;
  box-shadow:0 0 0 1px #000;
}
/* the carved rail: a tiling pillar with a gilded chain, studded with the
   league skull at a fixed interval so the run never reads as wallpaper */
.rsc-rail{
  position:absolute;top:0;bottom:0;width:var(--rsc-rail);z-index:2;
  background:url("/assets/img/classic/rail.png") repeat-y center top;
}
.rsc-rail-l{left:0}
.rsc-rail-r{right:0}
.rsc-col{position:relative;z-index:1;padding:0 calc(var(--rsc-rail) + 14px) 26px}

/* ---------- banner ---------- */
.rsc-banner{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 0 4px}
.rsc-banner-ranks{display:flex;gap:2px;flex:1;min-width:0;overflow:hidden;opacity:.92}
.rsc-banner-l{justify-content:flex-end}
.rsc-banner-r{justify-content:flex-start}
.rsc-banner-ranks img{image-rendering:pixelated;filter:drop-shadow(1px 2px 0 rgba(0,0,0,.8))}
.rsc-logo{display:grid;grid-template-columns:auto auto;align-items:center;
  justify-items:center;column-gap:12px;flex:none;padding:0 6px}
.rsc-logo img{grid-row:1 / span 2}
.rsc-logo:hover{text-decoration:none}
.rsc-logo img{image-rendering:pixelated;filter:drop-shadow(0 3px 0 rgba(0,0,0,.7));width:76px;height:76px}
/* the wordmark is bevelled the way the metal RuneScape letters were: a light
   top edge, a dark bottom one, and a flat fill between them */
.rsc-logo-word{
  font-family:Arial Black,Arial,Helvetica,sans-serif;
  font-size:40px;font-weight:900;line-height:1;letter-spacing:.02em;
  color:#e9e4d6;
  text-shadow:0 -1px 0 #fff,0 2px 0 #6d6553,0 3px 0 #3a352a,0 4px 4px rgba(0,0,0,.75);
  margin-top:2px;
}
.rsc-logo-word em{font-style:normal;color:#f5d97a;margin-left:.18em}
.rsc-logo-ribbon{
  display:inline-block;margin-top:2px;padding:2px 22px;
  background:linear-gradient(180deg,#a5231b,#6d130e);
  border:1px solid #2c0806;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 0 rgba(0,0,0,.6);
  color:#ffe9c9;font-size:12px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;text-shadow:1px 1px 0 #000;
}
@media(max-width:760px){.rsc-banner-ranks{display:none}}

.rsc-playing{text-align:center;font-size:16px;color:#fff;margin:8px 0 14px;text-shadow:1px 1px 0 #000}
.rsc-playing b{color:var(--rsc-yel)}

/* ---------- two columns ---------- */
.rsc-cols{display:flex;gap:16px;align-items:flex-start}
.rsc-side{width:252px;flex:none}
.rsc-main{flex:1;min-width:0}
@media(max-width:820px){.rsc-cols{flex-direction:column}.rsc-side{width:100%}}

/* the black link box, its heading sitting on the box's own top edge */
.rsc-box{
  background:#000;border:1px solid #6c6349;margin-bottom:8px;
  box-shadow:0 2px 0 rgba(0,0,0,.6);
}
.rsc-box-head{
  text-align:center;color:#fff;font-size:14px;font-weight:700;
  padding:2px 0 3px;text-shadow:1px 1px 0 #000;
  border-bottom:1px solid #3a3527;
}
.rsc-box-body{padding:3px 8px 5px}
.rsc-link{display:flex;align-items:center;gap:7px;padding:0 2px;font-size:13px;line-height:1.42}
.rsc-link i{width:16px;text-align:center;font-size:13px;flex:none}
.rsc-link span{min-width:0;overflow-wrap:anywhere}
.rsc-grn{color:var(--rsc-grn)}
.rsc-yel{color:var(--rsc-yel)}
.rsc-red{color:var(--rsc-red)}
.rsc-link:hover{text-decoration:underline;color:#fff}

/* ---------- stone buttons ---------- */
.rsc-btn-row{display:flex;gap:14px}
.rsc-btn{
  flex:1;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:44px;padding:6px 10px;
  /* a lit slab: the brighter cobble under a top-lit wash, so the button
     stands on the page instead of dissolving into it */
  background:
    linear-gradient(180deg,rgba(255,236,190,.20),rgba(0,0,0,.42)),
    url("/assets/img/classic/stone-btn.png") repeat;
  border:2px solid #0a0806;
  box-shadow:inset 0 0 0 2px #6f6551,inset 2px 2px 0 rgba(255,255,255,.10),
             inset -2px -2px 0 rgba(0,0,0,.5),0 3px 0 rgba(0,0,0,.55);
  color:#fff;font-size:14px;font-weight:700;text-shadow:1px 1px 2px #000;
}
.rsc-btn:hover{text-decoration:none;color:var(--rsc-yel)}
.rsc-btn:active{transform:translateY(1px);box-shadow:inset 0 0 0 2px #6f6551,0 1px 0 rgba(0,0,0,.55)}
.rsc-btn-sm{min-height:0;padding:9px 22px;font-size:14px;flex:0 0 auto;display:inline-flex}
@media(max-width:520px){.rsc-btn-row{flex-direction:column}}
.rsc-under-btns{text-align:center;margin:8px 0 12px;font-size:14px}
.rsc-under-btns a{color:var(--rsc-grn)}

/* ---------- feature panel (the classic page's banner slot) ---------- */
.rsc-feature{
  border:2px solid #efe7cf;
  background:linear-gradient(180deg,#2a2318,#120f09);
  box-shadow:0 3px 0 rgba(0,0,0,.6);
  padding:3px;
}
.rsc-feature-inner{
  /* the panel is sunk rather than raised: darker cobble, shaded at the top */
  background:
    linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.12) 42%,rgba(0,0,0,.5)),
    #0d0b07 url("/assets/img/classic/stone-panel.png") repeat;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.75);
  border:1px solid #000;
  text-align:center;padding:14px 16px 14px;
}
.rsc-feature-kicker{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--rsc-yel);font-size:12px;font-weight:700;
  letter-spacing:.28em;text-transform:uppercase;text-shadow:1px 1px 0 #000;
}
.rsc-feature-kicker .semantic-icon{width:18px;height:18px}
.rsc-feature-title{
  font-family:Arial Black,Arial,sans-serif;font-weight:900;
  font-size:clamp(24px,4.4vw,38px);line-height:1.05;margin:8px 0 0;color:#f5d97a;
  text-shadow:0 2px 0 #4a3a12,0 3px 6px rgba(0,0,0,.8);
}
.rsc-feature-sub{color:#ddd6c4;font-size:13px;margin-top:6px;text-shadow:1px 1px 0 #000}
.rsc-feature-title-xl{
  font-size:clamp(32px,6vw,58px);letter-spacing:.06em;margin:2px 0 0;
}
.rsc-feature-title-xl + .rsc-feature-sub{font-size:13px;letter-spacing:.10em;
  text-transform:uppercase;color:#c9c0a8}
.rsc-feature-title-xl ~ .rsc-cd{gap:14px;margin:16px 0 4px}
.rsc-feature-title-xl ~ .rsc-cd span{min-width:62px;padding:7px 5px}
.rsc-feature-title-xl ~ .rsc-cd b{font-size:26px}
.rsc-cd{display:flex;justify-content:center;gap:12px;margin:12px 0 2px}
.rsc-cd span{
  min-width:56px;padding:5px 4px;background:rgba(0,0,0,.55);
  border:1px solid #5b5340;box-shadow:inset 1px 1px 0 rgba(255,255,255,.10);
}
.rsc-cd b{display:block;font-size:22px;line-height:1;color:#fff;text-shadow:1px 1px 0 #000;
  font-variant-numeric:tabular-nums}
.rsc-cd small{display:block;margin-top:3px;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:#a89f88}
.rsc-feature-btn{
  display:inline-block;margin-top:12px;padding:7px 26px;
  background:linear-gradient(180deg,#a5231b,#6d130e);
  border:1px solid #2c0806;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 2px 0 rgba(0,0,0,.6);
  color:#ffe9c9;font-size:13px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;text-shadow:1px 1px 0 #000;
}
.rsc-feature-btn:hover{text-decoration:none;color:#fff}

/* ---------- kill feed strip ---------- */
.rsc-ticker{
  margin:14px 0 0;background:#000;border:1px solid #6c6349;
}
.rsc-ticker .feed-ticker-label{
  color:var(--rsc-yel);font-family:Arial,Helvetica,sans-serif;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
}
.rsc-ticker .feed-ticker-item{color:#cfc9b8;font-size:12.5px}

/* ---------- the parchment scroll ---------- */
.rsc-scroll{margin:0 0 18px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.rsc-scroll-top,.rsc-scroll-bottom{
  height:34px;
  background:url("/assets/img/classic/parch-top.png") repeat-x left bottom;
}
.rsc-scroll-bottom{background-image:url("/assets/img/classic/parch-bottom.png");
  background-position:left top}
.rsc-scroll-body{
  background:url("/assets/img/classic/parchment.png") repeat;
  color:var(--rsc-ink);
  padding:6px 34px 18px;
}
.rsc-scroll-body p{color:var(--rsc-ink);font-size:14px;margin:0 0 14px}
body.rsc .rsc-scroll-body a{color:var(--rsc-brown);font-weight:700}
body.rsc .rsc-scroll-body a:hover{color:#3f2c10}
body.rsc .rsc-news-title{color:var(--rsc-brown)}
body.rsc .rsc-more{color:var(--rsc-brown-2)}
.rsc-h1{
  text-align:center;color:var(--rsc-brown);
  font-family:Arial Black,Arial,sans-serif;font-weight:900;
  font-size:clamp(22px,3.6vw,30px);margin:10px 0 16px;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
}
.rsc-h2{
  text-align:center;color:#3f2c10;font-size:17px;font-weight:700;
  margin:26px 0 12px;text-shadow:0 1px 0 rgba(255,255,255,.5);
}
@media(max-width:520px){.rsc-scroll-body{padding:6px 16px 16px}}

/* news rows: thumbnail left, title / meta / excerpt right */
.rsc-news{display:flex;gap:14px;padding:12px 0;border-top:1px solid rgba(107,74,31,.35)}
.rsc-news:first-of-type{border-top:0}
.rsc-news-art{
  flex:none;width:104px;height:74px;display:grid;place-items:center;
  background:#241f16;border:1px solid #6b4a1f;box-shadow:inset 0 0 0 1px #000;
}
.rsc-news-art .semantic-icon{width:44px;height:44px}
.rsc-news-body{min-width:0}
.rsc-news-title{display:block;color:var(--rsc-brown);font-size:15px;font-weight:700;line-height:1.3}
.rsc-news-meta{font-size:12.5px;color:#5c4c30;margin:3px 0 6px}
.rsc-news-meta em{font-style:italic}
.rsc-news p{margin:0;font-size:13.5px}
.rsc-more{white-space:nowrap}
@media(max-width:520px){.rsc-news{flex-direction:column}.rsc-news-art{width:100%;height:64px}}

/* pillars, facts and the ladder, all as plain boxed rows on the parchment */
.rsc-pillars{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:620px){.rsc-pillars{grid-template-columns:1fr}}
.rsc-pillar{
  background:rgba(107,74,31,.10);
  border:1px solid rgba(107,74,31,.45);
  padding:10px 12px;
}
.rsc-pillar-head{
  display:flex;align-items:center;gap:8px;
  color:var(--rsc-brown);font-size:14px;font-weight:700;margin-bottom:5px;
}
.rsc-pillar-head .semantic-icon{width:20px;height:20px}
.rsc-pillar p{margin:0;font-size:13px}

.rsc-facts,.rsc-ladder{width:100%;border-collapse:collapse;table-layout:fixed}
.rsc-facts td,.rsc-ladder td{
  text-align:center;padding:10px 4px;vertical-align:top;
  border:1px solid rgba(107,74,31,.40);
  background:rgba(107,74,31,.08);
}
.rsc-facts b{display:block;font-size:26px;line-height:1.1;color:var(--rsc-brown)}
.rsc-facts span{display:block;font-size:11px;letter-spacing:.10em;text-transform:uppercase;color:#5c4c30}
.rsc-facts em{display:block;font-style:normal;font-size:12px;color:var(--rsc-ink);margin-top:3px}
.rsc-ladder img{margin:0 auto 4px;image-rendering:pixelated}
.rsc-ladder b{display:block;font-size:13px;color:var(--rsc-brown)}
.rsc-ladder span{display:block;font-size:12px;color:var(--rsc-ink)}
.rsc-ladder em{display:block;font-style:normal;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#6a5a3c;margin-top:2px}
@media(max-width:820px){
  .rsc-facts,.rsc-ladder,.rsc-facts tbody,.rsc-ladder tbody,
  .rsc-facts tr,.rsc-ladder tr{display:block}
  .rsc-facts tr,.rsc-ladder tr{display:grid;grid-template-columns:1fr 1fr}
  .rsc-ladder tr{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:520px){.rsc-ladder tr{grid-template-columns:repeat(2,1fr)}}

.rsc-elos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
@media(max-width:620px){.rsc-elos{grid-template-columns:1fr}}
.rsc-elo{border:1px solid rgba(107,74,31,.40);background:rgba(107,74,31,.08);padding:9px 11px}
.rsc-elo b{display:block;color:var(--rsc-brown);font-size:13.5px;margin-bottom:4px}
.rsc-elo p{margin:0;font-size:12.5px}
.rsc-formula{
  text-align:center;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.04em;color:#5c4c30;margin-top:12px;
}
.rsc-formula b{color:var(--rsc-brown)}
.rsc-ladder-note{margin:10px 0 4px;font-size:13px;line-height:1.5}
.rsc-scroll-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:16px}

/* ---------- footer ---------- */
.rsc-foot{text-align:center;font-size:12px;color:#8d8571;padding:10px 0 4px}
.rsc-foot a{color:var(--rsc-yel)}
.rsc-foot div{margin-top:6px;color:#6f6857}

/* the right column's status box: it exists to reach the sidebar's foot, so the
   two columns end together the way the classic page's banner and menu did */
.rsc-status{margin-top:14px}
.rsc-status-tbl{width:100%;border-collapse:collapse;table-layout:fixed}
.rsc-status-tbl td{text-align:center;padding:8px 4px;vertical-align:top}
.rsc-status-tbl td + td{border-left:1px solid #2e2a20}
.rsc-status-tbl b{display:block;font-size:24px;line-height:1.1;color:#f5d97a;text-shadow:1px 1px 0 #000}
.rsc-status-tbl span{display:block;font-size:10px;letter-spacing:.10em;text-transform:uppercase;color:#8d8571}
.rsc-status-tbl em{display:block;font-style:normal;font-size:11.5px;color:#cfc9b8;margin-top:2px}
@media(max-width:520px){
  .rsc-status-tbl,.rsc-status-tbl tbody,.rsc-status-tbl tr{display:block}
  .rsc-status-tbl tr{display:grid;grid-template-columns:1fr 1fr}
  .rsc-status-tbl td + td{border-left:0}
}

/* a stone button inside the scroll is still a stone button: the parchment's
   link colour would otherwise paint its label brown on brown */
body.rsc .rsc-scroll-body a.rsc-btn{color:#fff;font-weight:700}
body.rsc .rsc-scroll-body a.rsc-btn:hover{color:var(--rsc-yel);text-decoration:none}
body.rsc .rsc-formula{overflow-wrap:anywhere}

/* small screens: the rail narrows with the page and the wordmark stops
   running off the column. The rail art scales rather than crops, so the
   chain stays centred at every width. */
body.rsc .rsc-logo-word{font-size:clamp(23px,7.4vw,40px)}
.rsc-rail{background-size:var(--rsc-rail) auto}
@media(max-width:620px){
  body.rsc{--rsc-rail:30px}
  .rsc-col{padding:0 calc(var(--rsc-rail) + 8px) 20px}
  .rsc-logo img{width:52px;height:52px}
  .rsc-logo-ribbon{padding:2px 12px;font-size:10px;letter-spacing:.16em}
  .rsc-playing{font-size:14px}
  .rsc-box-head{font-size:14px}
  .rsc-link{font-size:13px}
}

/* ============================================================
   CLASSIC INTERIOR PAGES  (body.rsc .rsc-scroll-body)
   Every page now stands in the homepage's frame, and everything an
   interior page draws is carried on the same parchment scroll. The
   page markup is unchanged - the design system's own tokens are
   redefined for the length of the scroll, so a .panel, a
   .league-table or a .btn-gold reads as ink and stone on parchment
   rather than gold on obsidian, and nothing had to be rewritten
   component by component. Square corners, the browser's own sans,
   and no glow: the 2005 page had none of the three.
   ============================================================ */
body.rsc .rsc-scroll-body{
  --panel:#e6d9bd;
  --panel-2:#dccdab;
  --card:#e6d9bd;
  --ink:#e3d5b8;
  --obsidian:#e3d5b8;
  --coal:#d9c9a6;
  --bone:#2b2417;
  --parch:#3f341f;
  --ash:#6b5a38;
  --muted:#5c4c30;
  --line:rgba(107,74,31,.34);
  --line-2:rgba(107,74,31,.50);
  --line-gold:rgba(107,74,31,.55);
  --gold:#6b4a1f;
  --gold-hi:#3f2c10;
  --gold-2:#8a6428;
  --gold-3:#a8834a;
  --verdigris-hi:#2c6350;
  --shadow-1:none;
  --shadow-gold:none;
  --font-display:Arial,Helvetica,sans-serif;
  --font-body:Arial,Helvetica,Verdana,sans-serif;
  color:var(--rsc-ink);
}

/* the scroll is the page's only container: the modern section rhythm and
   the 1200px gutter both belong to a full-width layout this has stopped
   being */
body.rsc .rsc-scroll-body .section,
body.rsc .rsc-scroll-body .section-tight{padding:6px 0 0}
body.rsc .rsc-scroll-body .container{max-width:none;margin:0;padding:0}
body.rsc .rsc-scroll-body .with-side{grid-template-columns:1fr 260px;gap:14px}
body.rsc .rsc-scroll-body .side-col{position:static;gap:12px}
@media(max-width:1100px){
  body.rsc .rsc-scroll-body .with-side{grid-template-columns:1fr}
}

/* the page heading, where the modern hero band used to be */
.rsc-page-head{border-bottom:1px solid rgba(107,74,31,.35);padding-bottom:10px;margin-bottom:14px}
.rsc-kicker{
  font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:#7a6435;display:flex;align-items:center;gap:7px;margin-bottom:4px;
}
.rsc-kicker .semantic-icon{width:18px;height:18px;opacity:.85}
body.rsc .rsc-page-head .rsc-h1{margin:0;padding:0;border:0}
body.rsc .rsc-h1 em{font-style:normal;color:var(--rsc-brown-2)}
.rsc-lede{color:#4a3d24;font-size:13.5px;margin:6px 0 0;max-width:70ch}

/* the sidebar row for the page being read */
body.rsc .rsc-link.rsc-on{color:#fff;font-weight:700}
body.rsc .rsc-link.rsc-on::after{content:" \00ab";color:var(--rsc-yel)}

/* square everything: the classic page's only radius was zero */
body.rsc .rsc-scroll-body .panel,
body.rsc .rsc-scroll-body .btn,
body.rsc .rsc-scroll-body .input,
body.rsc .rsc-scroll-body select.input,
body.rsc .rsc-scroll-body .seg,
body.rsc .rsc-scroll-body .seg button,
body.rsc .rsc-scroll-body .pager button,
body.rsc .rsc-scroll-body .stat,
body.rsc .rsc-scroll-body .note-strip,
body.rsc .rsc-scroll-body .tag,
body.rsc .rsc-scroll-body .hs-cats a{border-radius:0}

/* panels: a boxed sub-section on the parchment, headed the way the black
   link boxes in the left column are headed */
body.rsc .rsc-scroll-body .panel{
  background:rgba(107,74,31,.06);border:1px solid rgba(107,74,31,.40);
}
body.rsc .rsc-scroll-body .panel-head{
  background:rgba(107,74,31,.16);border-bottom:1px solid rgba(107,74,31,.40);padding:9px 12px;
}
body.rsc .rsc-scroll-body .panel-head h3{color:#4a3212;font-size:13px;letter-spacing:.10em}
body.rsc .rsc-scroll-body .panel-body{padding:12px}
body.rsc .rsc-scroll-body .panel-body.tight{padding:8px 10px}

/* type inside the scroll */
body.rsc .rsc-scroll-body h1,
body.rsc .rsc-scroll-body h2,
body.rsc .rsc-scroll-body h3,
body.rsc .rsc-scroll-body h4{color:var(--rsc-brown);letter-spacing:0}
body.rsc .rsc-scroll-body p,
body.rsc .rsc-scroll-body li,
body.rsc .rsc-scroll-body td,
body.rsc .rsc-scroll-body dd{color:var(--rsc-ink)}
body.rsc .rsc-scroll-body .kicker{color:#7a6435}
body.rsc .rsc-scroll-body .section-head{margin:0 0 16px;max-width:none;text-align:left}
body.rsc .rsc-scroll-body .section-head h2{font-size:19px}
body.rsc .rsc-scroll-body .diamond{display:none}

/* tables read as the classic hiscore table: ruled rows, no hover glow */
body.rsc .rsc-scroll-body .league-table thead th{
  background:rgba(107,74,31,.18);color:#4a3212;border-bottom:1px solid rgba(107,74,31,.45);
  font-family:var(--font-mono);letter-spacing:.14em;padding:8px 10px;
}
body.rsc .rsc-scroll-body .league-table td{padding:8px 10px;border-bottom:1px solid rgba(107,74,31,.22)}
body.rsc .rsc-scroll-body .league-table tbody tr:hover{background:rgba(107,74,31,.10)}
body.rsc .rsc-scroll-body .league-table .u{color:var(--rsc-brown);font-weight:700}
body.rsc .rsc-scroll-body tr.r1{background:rgba(107,74,31,.13)}
body.rsc .rsc-scroll-body tr.r1 .rank{color:#6b4a1f;text-shadow:none}
body.rsc .rsc-scroll-body tr.r2 .rank{color:#6f6250}
body.rsc .rsc-scroll-body tr.r3 .rank{color:#8a5a2a}

/* a link on parchment is brown, not the column's yellow - and the pieces
   that are pictures rather than text keep their own colour */
body.rsc .rsc-scroll-body a{color:var(--rsc-brown);font-weight:700}
body.rsc .rsc-scroll-body a:hover{color:#3f2c10}

/* buttons: the stone button the homepage already owns, at any size the
   modern classes ask for */
body.rsc .rsc-scroll-body .btn{
  background:url("/assets/img/classic/stone.png") repeat,#3a352a;
  background-blend-mode:overlay;
  color:#fff;border:1px solid #6f6551;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.5);
  font-family:Arial,Helvetica,sans-serif;font-weight:700;letter-spacing:.06em;
  text-shadow:1px 1px 0 #000;padding:10px 18px;
}
body.rsc .rsc-scroll-body .btn:hover{color:var(--rsc-yel);filter:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.5)}
body.rsc .rsc-scroll-body .btn-ghost{background:none;border-color:transparent;color:var(--rsc-brown);box-shadow:none;text-shadow:none}
body.rsc .rsc-scroll-body .btn-ghost:hover{color:#3f2c10}
body.rsc .rsc-scroll-body .btn-danger{background:linear-gradient(180deg,#b8382c,#7d1a12);border-color:#4d0f08}

/* forms */
body.rsc .rsc-scroll-body .input,
body.rsc .rsc-scroll-body select.input{
  background:#f0e6cf;border:1px solid rgba(107,74,31,.55);color:var(--rsc-ink);
  font-family:Arial,Helvetica,sans-serif;padding:8px 10px;font-size:13px;
}
body.rsc .rsc-scroll-body .input:focus{border-color:#6b4a1f;box-shadow:none}
body.rsc .rsc-scroll-body .input::placeholder{color:#8b7c5e}
body.rsc .rsc-scroll-body .field label{color:#6b5a38;letter-spacing:.16em}

/* segmented control, pager, category rail */
body.rsc .rsc-scroll-body .seg{background:rgba(107,74,31,.10);border:1px solid rgba(107,74,31,.45)}
body.rsc .rsc-scroll-body .seg button{color:#6b5a38}
body.rsc .rsc-scroll-body .seg button.on{background:#6b4a1f;color:#f4e6c6}
body.rsc .rsc-scroll-body .pager button{
  background:rgba(107,74,31,.10);border:1px solid rgba(107,74,31,.45);color:var(--rsc-ink);
}
body.rsc .rsc-scroll-body .pager button:hover{border-color:#6b4a1f;color:#3f2c10}
body.rsc .rsc-scroll-body .pager button.on{background:#6b4a1f;color:#f4e6c6;border-color:#4a3212}
body.rsc .rsc-scroll-body .hs-cats a{color:var(--rsc-ink);font-weight:400}
body.rsc .rsc-scroll-body .hs-cats a:hover{background:rgba(107,74,31,.12);color:#3f2c10}
body.rsc .rsc-scroll-body .hs-cats a.on{background:rgba(107,74,31,.20);border-color:rgba(107,74,31,.5);color:#4a3212;font-weight:700}
body.rsc .rsc-scroll-body .hs-cats a .bi{color:#8a6428}

/* pills, tags, stats, notes */
body.rsc .rsc-scroll-body .pill{background:rgba(107,74,31,.10);border-color:rgba(107,74,31,.45);color:var(--rsc-ink)}
body.rsc .rsc-scroll-body .pill-gold,
body.rsc .rsc-scroll-body .tag{background:#6b4a1f;color:#f4e6c6;border-color:#4a3212}
body.rsc .rsc-scroll-body .tag-red{background:#8f1d17;color:#fff}
body.rsc .rsc-scroll-body .tag-green{background:#2c6350;color:#eaf6f1}
body.rsc .rsc-scroll-body .stat{background:rgba(107,74,31,.08);border:1px solid rgba(107,74,31,.40)}
body.rsc .rsc-scroll-body .stat .v{color:var(--rsc-brown)}
body.rsc .rsc-scroll-body .note-strip{
  background:rgba(107,74,31,.10);border:1px solid rgba(107,74,31,.45);color:var(--rsc-ink);
}
body.rsc .rsc-scroll-body .hr-gold{background:rgba(107,74,31,.45);margin:20px 0}

/* the pieces that are genuinely dark surfaces - the replay stage, the
   client mock and the paperdoll - stay dark: they are pictures of the
   game, and the game is not printed on parchment */
body.rsc .rsc-scroll-body .kc-stage,
body.rsc .rsc-scroll-body .kc-canvas-wrap,
body.rsc .rsc-scroll-body .kc-board,
body.rsc .rsc-scroll-body .paperdoll,
body.rsc .rsc-scroll-body canvas{background-color:#0d0c08}

/* reveal-on-scroll is a modern flourish; on the classic page a scroll is
   simply printed, and a page that arrives blank until it animates is a
   page that has to be scrolled to be read */
body.rsc .rsc-scroll-body .rv{opacity:1;transform:none}

/* ---------- wide interior pages (no left column) ----------
   The replay board and the 3D stage are pictures of a fight, and a
   252px link column takes the width they are read at. Those pages drop
   the column and carry the same links as one bar over the scroll. */
.rsc-navstrip{
  display:flex;flex-wrap:wrap;gap:4px 18px;align-items:center;
  border:1px solid #2e2a20;background:#0b0b09;padding:7px 12px;margin-top:4px;
}
.rsc-navgroup{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;min-width:0}
.rsc-navgroup + .rsc-navgroup{border-left:1px solid #2e2a20;padding-left:18px}
.rsc-navgroup-head{
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:#8d8571;
}
.rsc-navstrip .rsc-link{display:inline-flex;font-size:12.5px;padding:0}
.rsc-wide{margin-top:0}
@media(max-width:820px){
  .rsc-navgroup + .rsc-navgroup{border-left:0;padding-left:0}
}

/* A wide page is given the width it dropped the column for. */
.rsc-page:has(.rsc-wide){max-width:1280px}

/* The replay modal is drawn over the page rather than on it, and it is a
   recording of the game: it keeps the dark surface the client has, so the
   scroll's parchment tokens are put back to their own values inside it. */
body.rsc .rsc-scroll-body .kc-modal{
  --panel:#201f1a;--panel-2:#242219;--card:#26241c;
  --ink:#141310;--obsidian:#1b1a17;--coal:#111008;
  --bone:#e8e2d4;--parch:#d8ccb4;--ash:#9c8b5e;--muted:#8a8272;
  --line:#38342a;--line-2:#4a4433;--line-gold:#574a2a;
  --gold:#f5d97a;--gold-hi:#fff3c4;--gold-2:#c98f14;--gold-3:#7d6320;
  --verdigris-hi:#5fbfa4;
  --font-display:'Cinzel',serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--bone);
}
body.rsc .rsc-scroll-body .kc-modal a{color:var(--gold);font-weight:600}
body.rsc .rsc-scroll-body .kc-modal a:hover{color:var(--gold-hi)}
body.rsc .rsc-scroll-body .kc-modal h1,
body.rsc .rsc-scroll-body .kc-modal h2,
body.rsc .rsc-scroll-body .kc-modal h3,
body.rsc .rsc-scroll-body .kc-modal h4{color:var(--bone);letter-spacing:.04em}
body.rsc .rsc-scroll-body .kc-modal p,
body.rsc .rsc-scroll-body .kc-modal td,
body.rsc .rsc-scroll-body .kc-modal li{color:var(--parch)}
body.rsc .rsc-scroll-body .kc-modal .btn{
  background:linear-gradient(180deg,var(--gold-hi),var(--gold) 35%,var(--gold-2));
  color:#1a1505;border-color:var(--gold-3);text-shadow:none;box-shadow:none;
}

/* The Old School skin above paints a dark carved surface onto every card
   class by name rather than through a token, so the scroll has to say so
   again for the same list. One rule, the same list, parchment. */
body.rsc .rsc-scroll-body .panel,
body.rsc .rsc-scroll-body .side-card,
body.rsc .rsc-scroll-body .quick-link,
body.rsc .rsc-scroll-body .client-card,
body.rsc .rsc-scroll-body .elo-card,
body.rsc .rsc-scroll-body .product-card,
body.rsc .rsc-scroll-body .login-card,
body.rsc .rsc-scroll-body .support-card,
body.rsc .rsc-scroll-body .rules-list li,
body.rsc .rsc-scroll-body .cta-band,
body.rsc .rsc-scroll-body .shop-strip,
body.rsc .rsc-scroll-body .stat,
body.rsc .rsc-scroll-body .faq-item,
body.rsc .rsc-scroll-body .staff-card,
body.rsc .rsc-scroll-body .kc-card,
body.rsc .rsc-scroll-body .kf-card,
body.rsc .rsc-scroll-body .vote-card,
body.rsc .rsc-scroll-body .battle-card,
body.rsc .rsc-scroll-body .step{
  background:rgba(107,74,31,.07);border:1px solid rgba(107,74,31,.40);
  box-shadow:none;border-radius:0;
}
body.rsc .rsc-scroll-body .panel-head,
body.rsc .rsc-scroll-body .product-art{
  background:rgba(107,74,31,.16);border-bottom:1px solid rgba(107,74,31,.40);
}
body.rsc .rsc-scroll-body .product-art::before,
body.rsc .rsc-scroll-body .product-art::after{display:none}
body.rsc .rsc-scroll-body .panel-head h3,
body.rsc .rsc-scroll-body .side-card h3{color:#4a3212;text-shadow:none}
body.rsc .rsc-scroll-body .product-body h3,
body.rsc .rsc-scroll-body .rank-name{color:var(--rsc-brown)}
body.rsc .rsc-scroll-body .product-price .p{color:var(--rsc-brown)}
body.rsc .rsc-scroll-body .perks li{border-bottom:1px dashed rgba(107,74,31,.35)}
body.rsc .rsc-scroll-body .perks,
body.rsc .rsc-scroll-body .product-value{color:#5c4c30}
body.rsc .rsc-scroll-body .league-table thead th{background:rgba(107,74,31,.18);border-bottom:1px solid rgba(107,74,31,.45)}
body.rsc .rsc-scroll-body .league-table tbody tr:hover{background:rgba(107,74,31,.10)}
body.rsc .rsc-scroll-body .input,
body.rsc .rsc-scroll-body select.input,
body.rsc .rsc-scroll-body .seg{
  background:#f0e6cf;border:1px solid rgba(107,74,31,.55);font-family:Arial,Helvetica,sans-serif;
}
body.rsc .rsc-scroll-body .seg{background:rgba(107,74,31,.10)}
body.rsc .rsc-scroll-body .btn-gold{
  background:url("/assets/img/classic/stone.png") repeat,#3a352a;
  background-blend-mode:overlay;border:1px solid #6f6551;outline:none;
  color:#fff;text-shadow:1px 1px 0 #000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 2px 0 rgba(0,0,0,.5);
}
body.rsc .rsc-scroll-body .btn:hover{transform:none}
body.rsc .rsc-scroll-body .info-tabs a{color:#5c4c30;border:1px solid rgba(107,74,31,.45)}
body.rsc .rsc-scroll-body .info-tabs a:hover{color:#3f2c10;border-color:#6b4a1f}

/* any page still carrying the modern hero band draws it as a scroll
   heading rather than as a dark band across the parchment */
body.rsc .rsc-scroll-body .page-hero{
  background:none;border:0;border-bottom:1px solid rgba(107,74,31,.35);
  box-shadow:none;padding:0 0 10px;text-align:left;margin-bottom:14px;
}
body.rsc .rsc-scroll-body .page-hero .wm{display:none}
body.rsc .rsc-scroll-body .page-hero h1{color:var(--rsc-brown);text-shadow:none}
body.rsc .rsc-scroll-body .pp-chips{justify-content:flex-start}
body.rsc .rsc-scroll-body .pp-chip{
  background:rgba(107,74,31,.10);border:1px solid rgba(107,74,31,.45);color:#5c4c30;border-radius:0;
}
body.rsc .rsc-scroll-body .pp-chip b{color:var(--rsc-brown)}
body.rsc .rsc-scroll-body .pp-tiles{background:rgba(107,74,31,.40)}
body.rsc .rsc-scroll-body .pp-tile{background:#e6d9bd}
body.rsc .rsc-scroll-body .u-link:hover{color:#3f2c10}
/* two product columns fit the scroll's own measure */
body.rsc .rsc-scroll-body .shop-grid{grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}

/* the remaining hardcoded dark surfaces: the item chip's id badge, the
   client cards and the vote rows */
body.rsc .rsc-scroll-body .item-chip{
  background:rgba(107,74,31,.08);border:1px solid rgba(107,74,31,.40);
  border-radius:0;color:var(--rsc-ink);
}
body.rsc .rsc-scroll-body .item-chip:hover{border-color:#6b4a1f}
body.rsc .rsc-scroll-body .item-chip .id{
  background:rgba(107,74,31,.18);border:1px solid rgba(107,74,31,.40);
  color:#5c4c30;border-radius:0;
}
body.rsc .rsc-scroll-body .item-chip b{color:var(--rsc-brown)}
body.rsc .rsc-scroll-body .os-card,
body.rsc .rsc-scroll-body .vote-site{
  background:rgba(107,74,31,.08);border:1px solid rgba(107,74,31,.40);border-radius:0;
}
body.rsc .rsc-scroll-body .os-card:hover,
body.rsc .rsc-scroll-body .vote-site:hover{transform:none;border-color:#6b4a1f}
body.rsc .rsc-scroll-body .vote-site .vs-ic{
  background:rgba(107,74,31,.16);border:1px solid rgba(107,74,31,.45);
  color:var(--rsc-brown);border-radius:0;
}
body.rsc .rsc-scroll-body .vote-site .vs-body b,
body.rsc .rsc-scroll-body .os-card h3{color:var(--rsc-brown)}
body.rsc .rsc-scroll-body .reward-list li,
body.rsc .rsc-scroll-body .os-card ul li{border-bottom:1px dashed rgba(107,74,31,.35)}

/* grids written for a 1200px page are given the scroll's measure */
body.rsc .rsc-scroll-body .os-grid{grid-template-columns:repeat(2,1fr);gap:12px}
body.rsc .rsc-scroll-body .steps,
body.rsc .rsc-scroll-body .stat-strip{grid-template-columns:repeat(2,1fr);gap:12px}
body.rsc .rsc-wide .rsc-scroll-body .os-grid,
body.rsc .rsc-wide .rsc-scroll-body .steps,
body.rsc .rsc-wide .rsc-scroll-body .stat-strip{grid-template-columns:repeat(4,1fr)}
body.rsc .rsc-scroll-body .grid-2{gap:14px}
body.rsc .rsc-scroll-body{overflow-wrap:anywhere}
body.rsc .rsc-scroll-body .pf-steps{grid-template-columns:1fr 1fr}
body.rsc .rsc-scroll-body .step::before{
  background:none;-webkit-background-clip:border-box;background-clip:border-box;
  color:var(--rsc-brown);font-family:Arial,Helvetica,sans-serif;
}
/* a row's league glyph sits at the size the Bootstrap one does */
.rsc-link .semantic-icon{width:16px;height:16px;flex:none}

/* ---- news articles rendered from website/content/news/*.md ---- */
.rsc-news-h{font-family:Cinzel,serif;color:var(--gold);font-size:19px;
  margin:26px 0 10px;letter-spacing:.02em}
.rsc-news-h:first-child{margin-top:0}
.rsc-rule{border:0;border-top:1px solid var(--gold-3);margin:26px 0;opacity:.6}
.rsc-quote{border-left:3px solid var(--gold-3);margin:18px 0;padding:2px 0 2px 14px;
  color:var(--gold-hi);font-style:italic}
.rsc-ol{margin:12px 0 12px 20px;padding:0}
.rsc-ol li{margin:6px 0}