/* BattleZone.gg redesign stylesheet. Generated from the approved concept. */
*,*::before,*::after{box-sizing:border-box}
img{max-width:100%;display:block}

/* ============================================================
   BATTLEZONE.GG — redesign concept, rev.2
   Dual-track PvP / PvE. Weathered machinery, not flag colours.
   ============================================================ */

:root{
  /* cool gunmetal base, no warm brown cast */
  --void:#0a0b0c;
  --steel:#101314;
  --steel-2:#171b1d;
  --steel-3:#202527;
  --line:#2a3033;
  --line-2:#394145;
  --bone:#d3d9d9;      /* cool steel white, deliberately not cream */
  --ash:#949c9d;
  --ash-dim:#5b6365;

  /* oxidised machine red — painted steel, not signal red */
  --red:#bd4527;
  --red-hot:#dc6440;
  --red-deep:#4e1a0e;
  --red-wash:rgba(189,69,39,.10);

  /* gunmetal steel blue, matched in weight to the red */
  --blue:#4a7f97;
  --blue-hot:#68a1ba;
  --blue-deep:#1a3b4a;
  --blue-wash:rgba(74,127,151,.10);

  --brass:#c08f3e;
  --live:#6f9e6a;

  --display:"Franklin Gothic Heavy","Arial Black","Helvetica Neue",Helvetica,sans-serif;
  /* body copy: picked for legibility on a dark screen, not for flavour */
  --text:"Segoe UI",Tahoma,"Helvetica Neue","DejaVu Sans",Arial,sans-serif;
  /* mono is reserved for live numbers and things you copy. nothing else. */
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,"DejaVu Sans Mono",monospace;

  --gut:clamp(16px,3vw,40px);

  /* the Rust sunset, embedded once and reused as texture across the site */
  --bg-photo:url("../img/background.webp");
  /* BattleZone's own art: stencil wordmark, B/Z monogram, Rust-style illustration */
  --wm:url("../img/bz-wordmark.png");
  --bzmark:url("../img/bz-mark.png");
  --pvp-art:url("../img/bz-pvp-art.png");
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--void);color:var(--bone);
  font-family:var(--text);font-size:16px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* film grain, kept light so it reads as atmosphere and never as banding */
.grain{
  position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.14;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.seam-bg{
  position:fixed;top:0;bottom:0;left:50%;width:1px;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(189,69,39,.13) 18%,rgba(90,95,100,.10) 50%,rgba(74,127,151,.13) 82%,transparent);
}

.rule-seam{height:1px;border:0;margin:0;opacity:.8;
  background:linear-gradient(90deg,transparent,var(--red-deep) 12%,var(--red) 34%,#4b5155 50%,var(--blue) 66%,var(--blue-deep) 88%,transparent)}
.lbl{font-family:var(--text);font-size:13px;color:var(--ash-dim)}
.wrap{max-width:1360px;margin:0 auto;padding:0 var(--gut);position:relative;z-index:1}
.dsp{font-family:var(--display);text-transform:uppercase;letter-spacing:.022em}

/* ---------------- topbar ---------------- */
.topbar{position:sticky;top:0;z-index:900;background:rgba(10,11,12,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:clamp(10px,2vw,26px);height:62px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--bone);flex-shrink:0}
.mark{width:29px;height:27px;flex-shrink:0;background:var(--bone);
  -webkit-mask:var(--bzmark) center/contain no-repeat;mask:var(--bzmark) center/contain no-repeat}
.brand-tx{font-family:var(--display);font-size:19px;letter-spacing:.045em;text-transform:uppercase;line-height:1}
.brand-tx i{font-style:normal;color:var(--ash)}

.nav{display:flex;gap:2px;margin-left:auto;flex-wrap:wrap}
.nav button{background:none;border:0;color:#b0b7b7;cursor:pointer;font-family:var(--text);font-size:14px;font-weight:600;
  letter-spacing:.04em;padding:9px 13px;position:relative;transition:color .18s}
.nav button:hover,.nav button[aria-current="page"]{color:var(--bone)}
.nav button[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:linear-gradient(90deg,var(--red),var(--blue))}
.livepill{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 12px;flex-shrink:0}
.dot{width:6px;height:6px;background:var(--live);border-radius:50%;animation:pulse 2.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(111,158,106,.45)}70%{box-shadow:0 0 0 7px rgba(111,158,106,0)}100%{box-shadow:0 0 0 0 rgba(111,158,106,0)}}
.livepill b{font-family:var(--display);font-size:15px;letter-spacing:.02em}
.livepill span{font-size:9.5px;letter-spacing:.18em;color:var(--ash-dim);text-transform:uppercase}
.burger{display:none;background:none;border:1px solid var(--line);color:var(--bone);padding:7px 10px;cursor:pointer;font-family:var(--mono);font-size:11px;margin-left:auto}

.view{display:none}
.view.on{display:block;animation:vin .4s ease both}
@keyframes vin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ================= HERO ================= */
.hero{position:relative;overflow:hidden;min-height:clamp(540px,88vh,860px);display:flex;flex-direction:column;justify-content:center}

/* the Rust sunset, graded to gunmetal so it reads as weather, not as a side */
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:var(--bg-photo) center 38%/cover no-repeat;
  filter:grayscale(.88) contrast(1.2) brightness(.5);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 70%,transparent 99%);
          mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 70%,transparent 99%);
  animation:drift 34s ease-in-out infinite alternate;
}
@keyframes drift{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.1) translateY(-14px)}}
/* left rust / right steel duotone: the image serves both tracks equally */
.hero-bg::after{
  content:"";position:absolute;inset:0;mix-blend-mode:color;
  background:linear-gradient(90deg,rgba(189,69,39,.52) 0%,rgba(150,90,70,.12) 34%,transparent 47%,transparent 53%,rgba(80,120,145,.12) 66%,rgba(74,127,151,.52) 100%);
}
.hero-vig{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 88% at 50% 46%,transparent 24%,rgba(10,11,12,.62) 74%,var(--void) 100%)}

/* sniper reticle */
.reticle{position:absolute;top:47%;left:50%;transform:translate(-50%,-50%);
  width:clamp(330px,50vw,620px);height:clamp(330px,50vw,620px);z-index:2;pointer-events:none;
  color:var(--bone);opacity:.15;animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.12;transform:translate(-50%,-50%) scale(1)}50%{opacity:.19;transform:translate(-50%,-50%) scale(1.016)}}
.reticle .hair{stroke:currentColor;stroke-width:1;vector-effect:non-scaling-stroke}
.reticle .tick{stroke:currentColor;stroke-width:1;opacity:.85}
.reticle .ring{fill:none;stroke:currentColor;stroke-width:1;opacity:.5}
.reticle .rng{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:currentColor;opacity:.62}

.hero-in{position:relative;z-index:3;text-align:center;padding:clamp(30px,5vw,54px) var(--gut) 0}
.hero-top{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:clamp(22px,4vw,42px)}
.est{font-family:var(--text);font-size:14px;color:#b0b7b7}

/* BattleZone's own stencil wordmark, masked so it keeps a brushed-metal grade.
   Its O is already a crosshair, so the reticle behind it stays deliberately faint. */
.wordmark{width:min(90vw,880px);aspect-ratio:982/117;margin:0 auto;
  background:linear-gradient(178deg,#f1f4f4 0%,#c3caca 40%,#8d9596 74%,#697173 100%);
  -webkit-mask:var(--wm) center/contain no-repeat;mask:var(--wm) center/contain no-repeat;
  filter:drop-shadow(0 5px 30px rgba(0,0,0,.9))}
.lede{max-width:660px;margin:clamp(16px,2.4vw,24px) auto 0;font-family:var(--text);
  font-size:clamp(15.5px,1.7vw,18px);line-height:1.6;color:#c2c8c8;text-shadow:0 2px 14px rgba(0,0,0,.8)}
.lede b{color:var(--bone);font-weight:400;border-bottom:1px solid var(--line-2)}

.tracks{display:grid;grid-template-columns:1fr auto 1fr;margin-top:clamp(26px,4.2vw,44px);
  border-block:1px solid var(--line);background:rgba(10,11,12,.55);backdrop-filter:blur(3px);position:relative;z-index:3}
/* Both tracks carry hostile imagery. The PvE side is not the calm one, the
   threat just comes from the world instead of from another player. */
.track{padding:clamp(20px,2.6vw,32px) clamp(14px,2.4vw,30px);position:relative;overflow:hidden;text-align:left;
  min-height:clamp(158px,17vw,208px);display:flex;flex-direction:column;justify-content:flex-end}
.track h3,.track p{position:relative;z-index:2}
.track::before{content:"";position:absolute;inset:0;z-index:0;background-size:cover}
.track.pvp::before{background-image:var(--pvp-art);background-position:center 34%;filter:grayscale(.42) contrast(1.06) brightness(.44)}
.track.pve::before{background-image:var(--bg-photo);background-position:center 44%;filter:grayscale(.82) contrast(1.24) brightness(.38)}
.track::after{content:"";position:absolute;inset:0;z-index:1}
.track.pvp::after{background:linear-gradient(102deg,rgba(189,69,39,.5),rgba(10,11,12,.87) 74%)}
.track.pve::after{background:linear-gradient(258deg,rgba(74,127,151,.5),rgba(10,11,12,.87) 74%)}
.track.pve{text-align:right}
.track h3{font-family:var(--display);font-size:clamp(24px,3.8vw,40px);line-height:.95;margin:0 0 6px;
  letter-spacing:.03em;text-transform:uppercase}
.track.pvp h3{color:var(--red-hot)}
.track.pve h3{color:var(--blue-hot)}
.track p{margin:0;font-size:14.5px;color:#c2c8c8;line-height:1.5;max-width:36ch}
.track.pve p{margin-left:auto}
.spine{width:1px;background:linear-gradient(180deg,transparent,var(--line-2) 22%,var(--line-2) 78%,transparent);position:relative}
.spine::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);
  width:8px;height:8px;background:var(--void);border:1px solid var(--line-2)}

/* wipe strip */
.wipe{display:flex;align-items:center;gap:clamp(12px,2.4vw,28px);flex-wrap:wrap;padding:15px 0;border-bottom:1px solid var(--line)}
.wipe-k{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.wipe-t{display:flex;gap:clamp(9px,1.6vw,18px);font-family:var(--display);font-size:clamp(19px,2.7vw,28px);letter-spacing:.02em;line-height:1}
.wipe-t div{text-align:center}
.wipe-t small{display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.17em;color:var(--ash-dim);margin-top:4px;font-weight:400}
.wipe-note{font-size:14.5px;color:#b0b7b7;margin-left:auto;max-width:44ch;line-height:1.5}

/* full-bleed photographic band, the breather between dense sections */
.band{position:relative;left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;width:100vw;
  overflow:hidden;border-block:1px solid var(--line);margin-top:clamp(48px,7vw,86px);
  min-height:clamp(240px,34vw,400px);display:flex;align-items:center;justify-content:center}
.band-bg{position:absolute;inset:0;background:var(--bg-photo) center 70%/cover no-repeat;
  filter:grayscale(.95) contrast(1.15) brightness(.26)}
.band-bg::after{content:"";position:absolute;inset:0;mix-blend-mode:color;
  background:linear-gradient(90deg,rgba(189,69,39,.5),transparent 44%,transparent 56%,rgba(74,127,151,.5))}
/* scrim is DARKEST in the middle, because that is where the copy sits.
   The previous vignette darkened the edges and left the sun clear behind the text. */
.band::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(62% 78% at 50% 50%,rgba(10,11,12,.86),rgba(10,11,12,.6) 58%,rgba(10,11,12,.3) 100%),
    linear-gradient(180deg,rgba(10,11,12,.45),rgba(10,11,12,.2) 45%,rgba(10,11,12,.55))}
.band-in{position:relative;z-index:2;text-align:center;padding:clamp(34px,6vw,64px) var(--gut);max-width:760px}
.band-in .lbl{color:#dfe4e4;font-weight:600;letter-spacing:.02em;text-shadow:0 2px 12px rgba(0,0,0,.95)}
.band-in h3{font-family:var(--display);font-size:clamp(26px,5vw,54px);line-height:1;margin:14px 0 14px;
  letter-spacing:.022em;text-transform:uppercase;text-shadow:0 3px 24px rgba(0,0,0,.95)}
.band-in p{font-family:var(--text);font-size:clamp(15.5px,1.6vw,17.5px);line-height:1.6;color:#ced4d4;margin:0;
  text-shadow:0 2px 16px rgba(0,0,0,.95)}

/* ---------------- section head ---------------- */
.shead{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;padding:clamp(46px,6.6vw,84px) 0 18px}
.shead h2{font-family:var(--display);font-size:clamp(25px,3.9vw,42px);line-height:.98;margin:0;letter-spacing:.024em;text-transform:uppercase}
.shead .sub{font-size:15px;color:#b0b7b7;max-width:52ch;line-height:1.55;margin-top:10px}
.idx{font-family:var(--text);font-size:13px;font-weight:600;color:var(--ash-dim);display:block;margin-bottom:8px}

.filters{display:flex;gap:6px;flex-wrap:wrap}
.chip{background:none;border:1px solid var(--line);color:#b0b7b7;cursor:pointer;padding:8px 15px;
  font-family:var(--text);font-size:13.5px;font-weight:600;transition:.18s}
.chip:hover{border-color:var(--line-2);color:var(--bone)}
.chip[aria-pressed="true"]{color:var(--bone);border-color:var(--ash-dim);background:var(--steel-2)}
.chip.pvp[aria-pressed="true"]{border-color:var(--red);color:var(--red-hot);background:var(--red-wash)}
.chip.pve[aria-pressed="true"]{border-color:var(--blue);color:var(--blue-hot);background:var(--blue-wash)}

/* ---------------- home: community overview ---------------- */
.over{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.over div{background:var(--steel);padding:clamp(16px,2.2vw,24px)}
.over b{display:block;font-family:var(--display);font-size:15px;letter-spacing:.055em;text-transform:uppercase;margin-bottom:9px}
.over.a b{color:var(--red-hot)}
.over p{margin:0;font-family:var(--text);font-size:15.5px;line-height:1.6;color:#c2c8c8}

/* ---------------- shared tier badge ---------------- */
.tier{font-family:var(--text);font-size:12.5px;font-weight:600;color:var(--ash);
  border:1px solid var(--line-2);padding:3px 8px;white-space:nowrap;flex-shrink:0}
.col.pvp .tier,.pick-side.pvp .tier{border-color:rgba(189,69,39,.45);color:var(--red-hot)}
.col.pve .tier,.pick-side.pve .tier{border-color:rgba(74,127,151,.45);color:var(--blue-hot)}

/* ---------------- servers: chooser ---------------- */
.srvsel-wrap{display:flex;align-items:center;gap:13px;flex-wrap:wrap;border:1px solid var(--line);
  border-bottom:0;background:var(--steel);padding:14px 18px}
.srvsel{appearance:none;-webkit-appearance:none;background-color:var(--void);border:1px solid var(--line-2);
  color:var(--bone);font-family:var(--text);font-size:15px;padding:10px 38px 10px 14px;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--ash) 50%),linear-gradient(135deg,var(--ash) 50%,transparent 50%);
  background-position:calc(100% - 18px) 53%,calc(100% - 13px) 53%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.srvsel:focus{outline:none;border-color:var(--bone)}
.srvsel optgroup{background:var(--steel);color:var(--ash-dim)}
.srvsel option{background:var(--steel);color:var(--bone)}

.picker{display:grid;grid-template-columns:1fr 1px 1fr;border:1px solid var(--line);background:var(--steel)}
.pick-side{min-width:0;display:flex;flex-direction:column}
#pickPvp,#pickPve{flex:1;display:grid;grid-template-rows:repeat(3,minmax(0,1fr))}
.pick-head{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--line)}
.pick-head b{font-family:var(--display);font-size:16px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.pick-side.pvp .pick-head b{color:var(--red-hot)}
.pick-side.pve .pick-head b{color:var(--blue-hot)}
.pick-head span{font-family:var(--mono);font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ash-dim);margin-left:auto}
.pick{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;background:none;
  border:0;border-bottom:1px solid var(--line);padding:clamp(18px,2.3vw,24px) 18px;cursor:pointer;
  color:inherit;font:inherit;transition:background .18s}
.pick:last-child{border-bottom:0}
.pick-side.pvp .pick:hover{background:var(--red-wash)}
.pick-side.pve .pick:hover{background:var(--blue-wash)}
.pick-t{display:flex;align-items:baseline;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.pick-t b{font-family:var(--display);font-size:clamp(19px,2.3vw,25px);letter-spacing:.035em;text-transform:uppercase;line-height:1}
.pick p{flex:1;margin:0 0 14px;font-family:var(--text);font-size:15px;line-height:1.6;color:#c2c8c8;max-width:52ch}
.pick .go{font-family:var(--mono);font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--ash);transition:color .18s}
.pick .go::after{content:" \2192"}
.pick:hover .go{color:var(--bone)}

/* ---------------- manifest ---------------- */
.manifest{display:grid;grid-template-columns:1fr 1px 1fr;border:1px solid var(--line);background:var(--steel)}
.col-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 18px;
  border-bottom:1px solid var(--line);position:sticky;top:62px;z-index:5;background:rgba(16,19,20,.97);backdrop-filter:blur(8px)}
.col-head .t{display:flex;align-items:center;gap:10px}
.col-head b{font-family:var(--display);font-size:16px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.col.pvp .col-head b{color:var(--red-hot)}
.col.pve .col-head b{color:var(--blue-hot)}
.col-head .meta{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--ash-dim);text-transform:uppercase}
.flag{width:3px;height:16px;display:block}
.col.pvp .flag{background:var(--red)}
.col.pve .flag{background:var(--blue)}
.mid-spine{background:linear-gradient(180deg,transparent,var(--line) 6%,var(--line) 94%,transparent)}

.srv{display:block;width:100%;text-align:left;background:none;border-bottom:1px solid var(--line);
  padding:20px 18px;cursor:pointer;position:relative;transition:background .2s;color:inherit}
.srv:last-child{border-bottom:0}
.srv::before,.srv::after{content:"";position:absolute;width:9px;height:9px;opacity:0;transition:opacity .22s}
.srv::before{top:8px;left:8px;border-top:1px solid;border-left:1px solid}
.srv::after{bottom:8px;right:8px;border-bottom:1px solid;border-right:1px solid}
.col.pvp .srv::before,.col.pvp .srv::after{border-color:var(--red)}
.col.pve .srv::before,.col.pve .srv::after{border-color:var(--blue)}
.srv:hover::before,.srv:hover::after,.srv:focus-visible::before,.srv:focus-visible::after{opacity:1}
.col.pvp .srv:hover{background:var(--red-wash)}
.col.pve .srv:hover{background:var(--blue-wash)}
.srv:focus-visible{outline:none}

.srv-top{display:flex;align-items:baseline;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.srv-top .srv-st{margin-left:auto}
.srv-nm{font-family:var(--display);font-size:clamp(16px,1.95vw,21px);letter-spacing:.036em;text-transform:uppercase;line-height:1;margin:0}
.srv-st{margin-left:auto;font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--live);display:flex;align-items:center;gap:5px;flex-shrink:0}
.srv-st i{width:5px;height:5px;background:var(--live);border-radius:50%;display:block}

.bar{height:22px;background:var(--steel-3);position:relative;overflow:hidden;margin-bottom:9px;border:1px solid var(--line)}
.bar-f{position:absolute;inset:0 auto 0 0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.col.pvp .bar-f{background:linear-gradient(90deg,var(--red-deep),var(--red))}
.col.pve .bar-f{background:linear-gradient(90deg,var(--blue-deep),var(--blue))}
.bar-f::after{content:"";position:absolute;inset:0;background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.24) 0 2px,transparent 2px 6px)}
.bar-tx{position:absolute;inset:0;display:flex;align-items:center;justify-content:space-between;padding:0 10px;
  font-family:var(--mono);font-size:13px;text-shadow:0 1px 3px rgba(0,0,0,.9)}
.queued{color:var(--brass)}

.srv-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(74px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-bottom:10px}
.srv-meta div{background:var(--steel);padding:7px 8px}
.srv-meta dt{font-family:var(--text);font-size:12px;color:var(--ash-dim);margin:0 0 4px}
.srv-meta dd{margin:0;font-family:var(--mono);font-size:14px;color:var(--bone)}

.tags{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:13px}
.tag{font-family:var(--text);font-size:12.5px;padding:3px 8px;border:1px solid var(--line-2);color:#b0b7b7}
.col.pvp .tag.key{border-color:rgba(189,69,39,.55);color:var(--red-hot)}
.col.pve .tag.key{border-color:rgba(74,127,151,.55);color:var(--blue-hot)}

.srv-conn{display:flex;align-items:stretch;border:1px solid var(--line);background:var(--void);margin-bottom:11px}
#sdConnRow{max-width:430px;margin:20px 0 0}
.srv-conn code{flex:1;min-width:0;font-family:var(--mono);font-size:13.5px;color:var(--bone);
  padding:9px 11px;overflow-x:auto;white-space:nowrap;display:block}
.srv-copy{flex-shrink:0;border:0;border-left:1px solid var(--line);background:var(--steel-2);color:#b0b7b7;
  cursor:pointer;padding:0 14px;font-family:var(--text);font-size:13px;font-weight:600;transition:.15s}
.srv-copy:hover{background:var(--steel-3);color:var(--bone)}
.srv-copy.done{color:var(--live)}
.srv-act{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.bmlink{margin-left:auto;font-family:var(--text);font-size:13px;color:var(--ash-dim);text-decoration:none}
.bmlink:hover{color:var(--bone);text-decoration:underline}
.btn{font-family:var(--text);font-size:13.5px;font-weight:700;letter-spacing:.02em;padding:10px 17px;
  border:1px solid;cursor:pointer;transition:.18s;background:none;text-decoration:none;display:inline-block}
.btn-go{color:#0d0f0f;font-weight:700}
.col.pvp .btn-go,.btn-go.pvp{background:var(--red);border-color:var(--red)}
.col.pve .btn-go,.btn-go.pve{background:var(--blue);border-color:var(--blue)}
.col.pvp .btn-go:hover,.btn-go.pvp:hover{background:var(--red-hot);border-color:var(--red-hot)}
.col.pve .btn-go:hover,.btn-go.pve:hover{background:var(--blue-hot);border-color:var(--blue-hot)}
.btn-gh{border-color:var(--line-2);color:var(--ash)}
.btn-gh:hover{border-color:var(--bone);color:var(--bone)}

/* ---------------- stats ---------------- */
.stats{display:grid;grid-template-columns:1fr 1px 1fr;border:1px solid var(--line);background:var(--steel)}
.stats-side{padding:clamp(18px,2.6vw,28px)}
.stats-side.pve{text-align:right}
.stats-h{display:flex;align-items:center;gap:9px;margin-bottom:18px}
.stats-side.pve .stats-h{flex-direction:row-reverse}
.stats-h b{font-family:var(--display);font-size:16px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.stats-side.pvp .stats-h b{color:var(--red-hot)}
.stats-side.pve .stats-h b{color:var(--blue-hot)}
.sgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(108px,1fr));gap:clamp(12px,2vw,22px)}
.sgrid .n{font-family:var(--display);font-size:clamp(24px,3.7vw,37px);line-height:1;letter-spacing:.012em;
  background:linear-gradient(180deg,#dde2e2,#828a8c);-webkit-background-clip:text;background-clip:text;color:transparent}
.sgrid .k{font-family:var(--mono);font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ash-dim);margin-top:6px;line-height:1.4}
.stats-foot{padding:12px 18px;border-top:1px solid var(--line);grid-column:1/-1;text-align:center;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}

/* ---------------- leaderboards ---------------- */
.lb{display:grid;grid-template-columns:1fr 1px 1fr;border:1px solid var(--line);background:var(--steel)}
.lb-side{min-width:0}
.lb-head{padding:15px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.lb-head b{font-family:var(--display);font-size:17px;letter-spacing:.06em;text-transform:uppercase;line-height:1}
.lb-side.pvp .lb-head b{color:var(--red-hot)}
.lb-side.pve .lb-head b{color:var(--blue-hot)}
.mtabs{display:flex;gap:1px;margin-left:auto;background:var(--line);border:1px solid var(--line)}
.mtabs button{background:var(--steel);border:0;color:var(--ash-dim);cursor:pointer;padding:6px 11px;
  font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;transition:.15s}
.mtabs button:hover{color:var(--bone)}
.mtabs button[aria-pressed="true"]{color:#0d0f0f;font-weight:700}
.lb-side.pvp .mtabs button[aria-pressed="true"]{background:var(--red)}
.lb-side.pve .mtabs button[aria-pressed="true"]{background:var(--blue)}

.row{display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--line);position:relative}
.row:last-child{border-bottom:0}
.row .rk{font-family:var(--display);font-size:18px;line-height:1;color:var(--ash-dim);text-align:right}
.row.top .rk{font-size:24px}
.lb-side.pvp .row.top .rk{color:var(--red-hot)}
.lb-side.pve .row.top .rk{color:var(--blue-hot)}
.row .who{min-width:0}
.row .who b{display:block;font-family:var(--text);font-size:15px;color:var(--bone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:400}
.row .who .sv{font-family:var(--mono);font-size:9px;letter-spacing:.13em;text-transform:uppercase;color:var(--ash-dim)}
.row .val{font-family:var(--display);font-size:15px;letter-spacing:.02em;line-height:1;text-align:right}
.row .trk{position:absolute;left:0;bottom:0;height:2px;opacity:.4}
.lb-side.pvp .row .trk{background:var(--red)}
.lb-side.pve .row .trk{background:var(--blue)}
.lb-more{padding:13px 18px;text-align:center}

/* ---------------- server detail ---------------- */
.sd-hero{position:relative;padding:clamp(34px,5vw,62px) 0 clamp(24px,3.4vw,38px);overflow:hidden;border-bottom:1px solid var(--line)}
/* same photograph, graded to whichever side this server belongs to */
.sd-hero::before{content:"";position:absolute;inset:0;z-index:0;
  background:var(--bg-photo) center 34%/cover no-repeat;
  filter:grayscale(1) contrast(1.2) brightness(.34);opacity:.55;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 42%,transparent 88%);
          mask-image:linear-gradient(90deg,#000 0,#000 42%,transparent 88%)}
.sd-hero::after{content:"";position:absolute;inset:0;z-index:0}
.sd-hero.pvp::after{background:radial-gradient(78% 140% at 6% 44%,rgba(189,69,39,.42),transparent 68%)}
.sd-hero.pve::after{background:radial-gradient(78% 140% at 6% 44%,rgba(74,127,151,.42),transparent 68%)}
.crumb{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin-bottom:20px;
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-dim)}
.crumb button{background:none;border:0;color:var(--ash);cursor:pointer;font:inherit;letter-spacing:inherit;padding:0}
.crumb button:hover{color:var(--bone)}
.sd-id{position:relative;z-index:1;display:flex;gap:clamp(14px,2.4vw,26px);align-items:flex-start;flex-wrap:wrap}
.sd-bar{width:4px;align-self:stretch;min-height:74px;flex-shrink:0}
.sd-hero.pvp .sd-bar{background:linear-gradient(180deg,var(--red),var(--red-deep))}
.sd-hero.pve .sd-bar{background:linear-gradient(180deg,var(--blue),var(--blue-deep))}
.sd-id h1{font-family:var(--display);font-size:clamp(28px,5.2vw,58px);line-height:.94;margin:0 0 10px;letter-spacing:.022em;text-transform:uppercase}
.sd-kind{font-family:var(--mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;margin-bottom:11px}
.sd-hero.pvp .sd-kind{color:var(--red-hot)}
.sd-hero.pve .sd-kind{color:var(--blue-hot)}
.sd-blurb{font-family:var(--text);font-size:17px;line-height:1.6;color:#c2c8c8;max-width:56ch;margin:0}
.sd-live{margin-left:auto;border:1px solid var(--line);padding:15px 19px;min-width:210px;background:rgba(16,19,20,.75)}
.sd-live .n{font-family:var(--display);font-size:32px;line-height:1;letter-spacing:.02em}
.sd-live .n s{text-decoration:none;color:var(--ash-dim);font-size:19px}

/* keep the horizontal gutter inherited from .wrap; a shorthand here wipes it out */
.sd-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(24px,4vw,54px);
  padding:clamp(28px,4vw,50px) var(--gut)}
.walk{counter-reset:step}
.step{border-top:1px solid var(--line);padding:clamp(20px,3vw,32px) 0;position:relative}
.step:first-child{border-top:0;padding-top:0}
.step-n{counter-increment:step;font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--ash-dim);margin-bottom:10px;display:block}
.step-n::before{content:"0" counter(step) " / "}
.step h3{font-family:var(--display);font-size:clamp(19px,2.4vw,27px);line-height:1.02;margin:0 0 13px;letter-spacing:.024em;text-transform:uppercase}
.step p{font-family:var(--text);font-size:16.5px;line-height:1.68;color:#c2c8c8;margin:0 0 13px;max-width:62ch}
.step p:last-child{margin-bottom:0}
.step strong{color:var(--bone);font-weight:400;border-bottom:1px solid var(--line-2)}

.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:16px}
.feat div{background:var(--steel);padding:13px 15px}
.feat b{display:block;font-family:var(--text);font-size:14.5px;color:var(--bone);margin-bottom:5px;font-weight:600}
.feat span{font-size:14px;color:#b0b7b7;line-height:1.5;display:block;font-family:var(--text)}

.callout{border-left:2px solid var(--brass);background:rgba(192,143,62,.07);padding:14px 17px;margin-top:16px}
.callout p{font-family:var(--text);font-size:15px;line-height:1.58;color:#c2c8c8;margin:0;max-width:none}
.callout button{background:none;border:0;color:var(--brass);cursor:pointer;font:inherit;text-decoration:underline;text-underline-offset:3px;padding:0}

.aside{position:sticky;top:82px;align-self:start}
.acard{border:1px solid var(--line);background:var(--steel);margin-bottom:14px}
.acard h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);margin:0;padding:11px 15px;border-bottom:1px solid var(--line)}
.acard .in{padding:13px 15px}
.kv{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-family:var(--text);font-size:14.5px}
.kv:last-child{border-bottom:0}
.kv dt,.kv span:first-child{color:var(--ash-dim);margin:0}
.kv dd,.kv span:last-child{margin:0;color:var(--bone);text-align:right}
.jump{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);color:#b0b7b7;
  cursor:pointer;padding:11px 15px;font-family:var(--text);font-size:14.5px;transition:.16s}
.jump:last-child{border-bottom:0}
.jump:hover{color:var(--bone);background:var(--steel-2);padding-left:19px}
.jump small{display:block;font-size:9px;letter-spacing:.15em;text-transform:uppercase;color:var(--ash-dim);margin-top:2px}

/* ---------------- support ---------------- */
.sup-hero{text-align:center;padding:clamp(30px,5vw,56px) 0 clamp(20px,3vw,30px);max-width:620px;margin:0 auto}
.sup-hero h2{font-family:var(--display);font-size:clamp(26px,4.6vw,48px);line-height:1;margin:0 0 15px;letter-spacing:.022em;text-transform:uppercase}
.sup-hero p{font-family:var(--text);font-size:17px;line-height:1.62;color:#c2c8c8;margin:0}
.honest{display:grid;grid-template-columns:1fr 1px 1fr;border:1px solid var(--line);background:var(--steel);margin-top:clamp(22px,3vw,34px)}
.honest .h{padding:clamp(18px,2.6vw,28px)}
.honest h4{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;margin:0 0 14px}
.honest .yes h4{color:var(--live)}
.honest .no h4{color:var(--red-hot)}
.honest ul{list-style:none;margin:0;padding:0}
.honest li{font-family:var(--text);font-size:15px;line-height:1.55;color:#c2c8c8;padding:7px 0 7px 21px;position:relative}
.honest .yes li::before{content:"+";position:absolute;left:0;color:var(--live)}
.honest .no li::before{content:"\2013";position:absolute;left:0;color:var(--red-hot)}

/* ---------------- footer ---------------- */
.foot{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,80px);padding:clamp(30px,4.4vw,52px) 0 26px;position:relative;overflow:hidden}
.foot::before{content:"";position:absolute;inset:0 0 auto 0;height:380px;z-index:0;
  background:var(--bg-photo) center 26%/cover no-repeat;
  filter:grayscale(1) contrast(1.15) brightness(.3);opacity:.3;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 82%);
          mask-image:linear-gradient(180deg,#000,transparent 82%)}
.converge{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:clamp(12px,3vw,34px);margin-bottom:clamp(26px,4vw,44px)}
.converge .s{height:1px}
.converge .s.l{background:linear-gradient(90deg,transparent,var(--red))}
.converge .s.r{background:linear-gradient(90deg,var(--blue),transparent)}
.converge .c{text-align:center}
.converge .c b{display:block;font-family:var(--display);font-size:clamp(17px,2.5vw,25px);letter-spacing:.035em;text-transform:uppercase;line-height:1;margin-bottom:7px}
.converge .c span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:26px;padding-bottom:26px}
.foot-grid h5{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ash-dim);margin:0 0 11px}
.foot-grid button{display:block;background:none;border:0;color:#b0b7b7;cursor:pointer;font-family:var(--text);font-size:15px;padding:5px 0;text-align:left;transition:.15s}
.foot-grid button:hover{color:var(--bone)}
.foot-btm{border-top:1px solid var(--line);padding-top:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;color:var(--ash-dim);text-transform:uppercase}
.discord{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line-2);padding:12px 21px;
  font-family:var(--text);font-size:15px;font-weight:600;color:var(--bone);
  text-decoration:none;transition:.2s;background:var(--steel-2)}
.discord:hover{border-color:var(--bone);background:var(--steel-3)}

/* ---------------- responsive ---------------- */
@media(max-width:1000px){.sd-body{grid-template-columns:1fr}.aside{position:static}}
@media(max-width:860px){
  .manifest,.stats,.lb,.honest,.tracks{grid-template-columns:1fr}
  .mid-spine,.spine{height:1px;width:auto;background:var(--line)}
  .track.pve{text-align:left}
  .track.pve p{margin-left:0}
    .stats-side.pve{text-align:left}
  .stats-side.pve .stats-h{flex-direction:row}
  .col-head{position:static}
  .nav{display:none;position:absolute;top:62px;left:0;right:0;flex-direction:column;background:var(--steel);
    border-bottom:1px solid var(--line);padding:8px;gap:0}
  .nav.open{display:flex}
  .nav button{padding:13px;text-align:left;width:100%}
  .nav button[aria-current="page"]::after{left:13px;right:auto;width:22px}
  .burger{display:block}
  .livepill{display:none}
  .reticle{width:min(88vw,420px);height:min(88vw,420px)}
}
@media(max-width:520px){.srv-meta{grid-template-columns:1fr 1fr}.sd-live{margin-left:0;width:100%}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ============================================================
   Deployment additions: anchors replace buttons for real links,
   plus the live Discord pill in the top bar.
   ============================================================ */
.nav a{background:none;border:0;color:#b0b7b7;cursor:pointer;font-family:var(--text);font-size:14px;
  font-weight:600;letter-spacing:.04em;padding:9px 13px;position:relative;transition:color .18s;text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--bone)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:13px;right:13px;bottom:2px;height:2px;
  background:linear-gradient(90deg,var(--red),var(--blue))}

.dpill{display:flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 12px;flex-shrink:0;
  color:#b0b7b7;text-decoration:none;transition:.18s;background:var(--steel-2)}
.dpill:hover{border-color:var(--line-2);color:var(--bone)}
.dpill b{font-family:var(--display);font-size:15px;letter-spacing:.02em;color:var(--bone)}
.dpill span{font-size:12.5px;color:var(--ash-dim)}

.mtabs a{background:var(--steel);border:0;color:var(--ash-dim);cursor:pointer;padding:7px 12px;
  font-family:var(--text);font-size:13px;font-weight:600;transition:.15s;text-decoration:none;display:block}
.mtabs a:hover{color:var(--bone)}
.mtabs a[aria-pressed="true"]{color:#0d0f0f;font-weight:700}
.lb-side.pvp .mtabs a[aria-pressed="true"]{background:var(--red)}
.lb-side.pve .mtabs a[aria-pressed="true"]{background:var(--blue)}

a.chip{text-decoration:none;display:inline-block}
a.pick{text-decoration:none;color:inherit}
a.jump{text-decoration:none}
.foot-grid a{display:block;color:#b0b7b7;font-family:var(--text);font-size:15px;padding:5px 0;
  text-decoration:none;transition:.15s}
.foot-grid a:hover{color:var(--bone)}
.crumb a{color:var(--ash);text-decoration:none}
.crumb a:hover{color:var(--bone)}
.callout a{color:var(--brass);text-decoration:underline;text-underline-offset:3px}
.srv{outline:none}
.srv:focus-visible{background:var(--steel-2)}

@media(max-width:860px){
  .nav a{padding:13px;text-align:left;width:100%}
  .nav a[aria-current="page"]::after{left:13px;right:auto;width:22px}
  .dpill{display:none}
}

/* ============================================================
   Extensive leaderboards: four boards, grouped stat columns.
   ============================================================ */
.lbx{border:1px solid var(--line);background:var(--steel)}

.lbx-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.lbtab{background:var(--steel);padding:13px 16px;text-decoration:none;color:#b0b7b7;transition:.16s;
  display:flex;flex-direction:column;gap:3px;border-top:2px solid transparent}
.lbtab b{font-family:var(--display);font-size:16px;letter-spacing:.05em;text-transform:uppercase;line-height:1}
.lbtab span{font-size:12.5px;color:var(--ash-dim)}
.lbtab:hover{background:var(--steel-2);color:var(--bone)}
.lbtab.on{background:var(--steel-3);color:var(--bone)}
.lbtab.pvp.on{border-top-color:var(--red)}
.lbtab.pve.on{border-top-color:var(--blue)}
.lbtab.pvp.on b{color:var(--red-hot)}
.lbtab.pve.on b{color:var(--blue-hot)}

.lbx-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 16px;border-bottom:1px solid var(--line)}
.gtabs{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);flex-wrap:wrap}
.gtabs a{background:var(--steel);color:var(--ash-dim);padding:7px 13px;text-decoration:none;
  font-family:var(--text);font-size:13px;font-weight:600;transition:.15s}
.gtabs a:hover{color:var(--bone)}
.gtabs a[aria-pressed="true"]{background:var(--steel-3);color:var(--bone)}
.lbform{display:flex;gap:8px;margin-left:auto;flex-wrap:wrap}
.lbsel{padding:8px 34px 8px 12px;font-size:14px}
.lbq{background:var(--void);border:1px solid var(--line-2);color:var(--bone);font-family:var(--text);
  font-size:14px;padding:8px 12px;min-width:170px}
.lbq:focus{outline:none;border-color:var(--bone)}

.lbt-wrap{overflow-x:auto}
.lbt{width:100%;border-collapse:collapse;font-family:var(--text);font-size:14.5px;white-space:nowrap}
.lbt th{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);background:var(--steel-2);
  font-weight:600;font-size:12.5px;color:var(--ash-dim);position:sticky;top:0}
.lbt th a{color:inherit;text-decoration:none}
.lbt th a:hover{color:var(--bone)}
.lbt th.num,.lbt td.num{text-align:right}
.lbt th.sorted{color:var(--bone)}
.lbt td{padding:10px 14px;border-bottom:1px solid var(--line);color:#c2c8c8}
.lbt tbody tr:hover{background:var(--steel-2)}
.lbt td.sorted{color:var(--bone);font-weight:600}
.lbt .c-rk{font-family:var(--display);font-size:16px;color:var(--ash-dim);width:52px;text-align:right}
.lbt tr.top .c-rk{color:var(--bone);font-size:19px}
.lb-side.pvp .lbt tr.top .c-rk{color:var(--red-hot)}
/* the flex container has to be INSIDE the cell: a <td> set to flex leaves the
   table formatting context, which breaks row borders and column alignment */
.lbt .c-pl{min-width:200px}
.lbt .pl{display:flex;align-items:center;gap:10px}
.lbt .pl span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:220px}
.lbt .av{width:26px;height:26px;border:1px solid var(--line-2);flex-shrink:0;background:var(--steel-3)}
.lbt .c-sv{color:var(--ash-dim);font-size:13px}
.lbt-empty{text-align:center;color:var(--ash-dim);padding:34px 14px!important}

.lbx-pg{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:13px 16px}
.pgs{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ash-dim)}
.pgs a{color:var(--bone);text-decoration:none;border:1px solid var(--line-2);padding:7px 14px;transition:.15s}
.pgs a:hover{border-color:var(--bone);background:var(--steel-2)}

@media(max-width:760px){
  .lbx-tabs{grid-template-columns:repeat(2,1fr)}
  .lbform{margin-left:0;width:100%}
  .lbq{flex:1;min-width:0}
}

/* ---------------- rules ----------------
   Shared rules run full width in two reading columns, then the two tracks
   split with the same spine used on Home and Servers. No auto-fit grid, so
   there are never empty phantom columns beside the PvP and PvE panels.      */
.rules-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line)}
.rules-head b{font-family:var(--display);font-size:17px;letter-spacing:.05em;text-transform:uppercase;line-height:1}
.rules-head span{font-family:var(--text);font-size:13px;color:var(--ash-dim);margin-left:auto}
.rside.pvp .rules-head b{color:var(--red-hot)}
.rside.pve .rules-head b{color:var(--blue-hot)}

.rules-shared{border:1px solid var(--line);background:var(--steel-2)}
.rules-shared .rules-head b{color:var(--bone)}
.rules-shared .rlist{padding:clamp(14px,2vw,22px) 18px}

.rules-split{display:grid;grid-template-columns:1fr 1px 1fr;border:1px solid var(--line);
  border-top:0;background:var(--steel)}
.rside{min-width:0;display:flex;flex-direction:column}
.rside .rlist{flex:1;padding:clamp(14px,2vw,22px) 18px}

.rlist{list-style:none;margin:0;counter-reset:r}
.rlist li{counter-increment:r;position:relative;padding:10px 0 10px 34px;border-bottom:1px solid var(--line);
  font-family:var(--text);font-size:15.5px;line-height:1.62;color:#c2c8c8}
.rlist li:last-child{border-bottom:0}
.rlist li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:12px;
  font-family:var(--mono);font-size:12px;color:var(--ash-dim)}
.rlist li b{color:var(--bone);font-weight:600}

/* shared list reads in two columns on wide screens */
.rlist-2col{column-count:2;column-gap:clamp(24px,4vw,54px)}
.rlist-2col li{break-inside:avoid;-webkit-column-break-inside:avoid}

@media(max-width:860px){
  .rules-split{grid-template-columns:1fr}
  .rules-split .mid-spine{height:1px;width:auto;background:var(--line)}
  .rlist-2col{column-count:1}
}