/* Bzrk site stylesheet. Tokens from brand-guideline.html v1.1 (approved 10 Sep 2026). */
@font-face{font-family:'Jersey 15';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/jersey-15.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/chakra-petch-400.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/chakra-petch-600.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/chakra-petch-700.woff2) format('woff2')}

:root{
  --void:#090B14;--bone:#EEF1FA;--voltage:#B347FF;--royal:#5B1FA6;--ash:#A3ADC4;--plasma:#39FF88;--alert:#FF3B5C;
  --magenta:#FF3DD4;--cyan:#37E6FF;--sodium:#FFB03B;
  --volt-hi:#DCAAFF;--volt-lo:#6E33B0;--volt-deep:#2A1247;--royal-lo:#3C1670;--royal-deep:#170A2E;
  --ash-hi:#CDD5E6;--ash-lo:#5E6780;--ash-deep:#262D3D;--panel:#111624;--raised:#1A2131;--line:rgba(238,241,250,.14);
  --display:'Jersey 15','Trebuchet MS',sans-serif;--body:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  --s0:14.4px;--s1:18px;--s2:22.5px;--s3:28px;--s4:35px;--s5:44px;--s6:55px;
  --dither:repeating-conic-gradient(var(--panel) 0 25%,var(--raised) 0 50%);
  --sp-1:8px;--sp-2:16px;--sp-3:24px;--sp-4:40px;--sp-5:64px;--sp-6:96px;
  --wrap:1200px;--header-h:72px;
  --cursor-cross:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' shape-rendering='crispEdges'><g fill='%2307040D'><rect x='15' y='1' width='3' height='9'/><rect x='15' y='22' width='3' height='9'/><rect x='1' y='15' width='9' height='3'/><rect x='22' y='15' width='9' height='3'/><rect x='13' y='13' width='7' height='7'/></g><g fill='%23A55FFF'><rect x='16' y='2' width='1' height='7'/><rect x='16' y='23' width='1' height='7'/><rect x='2' y='16' width='7' height='1'/><rect x='23' y='16' width='7' height='1'/><rect x='14' y='14' width='5' height='1'/><rect x='14' y='18' width='5' height='1'/><rect x='14' y='15' width='1' height='3'/><rect x='18' y='15' width='1' height='3'/></g><rect x='16' y='16' width='1' height='1' fill='%23F2EEFF'/></svg>") 16 16,crosshair;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--void);color:var(--bone);font:400 var(--s1)/1.7 var(--body);font-synthesis:none;-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 16px)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{min-height:100svh;display:flex;flex-direction:column;background:transparent;overflow-x:hidden;position:relative;z-index:0}
/* the BZRK wordmark sprayed on the wall behind every page */
body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:var(--void) url(../images/bzrk-wordmark.png) center 44%/min(118vw,1500px) no-repeat;opacity:1}
body::before{background-color:transparent;opacity:.06;filter:drop-shadow(0 0 22px rgba(255,61,212,.9));transform:rotate(-4deg) scale(1.12)}
body::after{content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;background:var(--void) radial-gradient(90% 60% at 50% 0,rgba(91,31,166,.28),transparent 70%)}
body.landing::before,body.landing::after{display:none}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
::selection{background:var(--voltage);color:var(--void)}
:focus-visible{outline:3px solid var(--plasma);outline-offset:4px}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.1;text-transform:uppercase;text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(var(--s4),5vw,var(--s6))}
h2{font-size:clamp(var(--s3),3.4vw,var(--s5))}
h3{font-size:clamp(var(--s2),2.2vw,var(--s3))}
h4{font-size:var(--s1);font-weight:600}
p{text-wrap:pretty}
.lead{font-size:var(--s2);line-height:1.5;font-weight:600;max-width:60ch}
.measure{max-width:68ch}
.muted{color:var(--ash)}
a{color:var(--voltage);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{color:var(--volt-hi)}
strong{font-weight:600}
ul.plain{list-style:none}
.label{font:600 15px/1.6 var(--display);text-transform:uppercase;color:var(--ash);letter-spacing:.08em}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
[hidden]{display:none!important}
.skip{position:absolute;left:16px;top:-80px;z-index:200;padding:12px 18px;background:var(--voltage);color:var(--void);font:600 16px var(--display);text-decoration:none}
.skip:focus{top:16px}

/* CRT scanlines: fixed, pointer-events none */
.crt{position:fixed;inset:0;pointer-events:none;z-index:120;background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 2px,transparent 2px 4px);mix-blend-mode:multiply}

/* ---------- 16-bit panel ---------- */
.px,.btn{position:relative;isolation:isolate;--cut:10px;--hi:var(--ash-hi);--lo:var(--ash-deep);--bd:var(--ash-lo)}
.px::before,.btn::before{content:'';position:absolute;inset:-3px;z-index:-2;background:var(--bd);
  clip-path:polygon(calc(var(--cut) + 2px) 0,calc(100% - var(--cut) - 2px) 0,100% calc(var(--cut) + 2px),100% calc(100% - var(--cut) - 2px),calc(100% - var(--cut) - 2px) 100%,calc(var(--cut) + 2px) 100%,0 calc(100% - var(--cut) - 2px),0 calc(var(--cut) + 2px))}
.px::after,.btn::after{content:'';position:absolute;inset:0;z-index:-1;
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
  background:linear-gradient(to bottom,var(--hi) 0 3px,transparent 3px),linear-gradient(to right,var(--hi) 0 3px,transparent 3px),linear-gradient(to top,var(--lo) 0 3px,transparent 3px),linear-gradient(to left,var(--lo) 0 3px,transparent 3px),var(--fill,var(--dither));
  background-size:auto,auto,auto,auto,var(--fill-size,4px 4px)}
.px.flat{--fill-size:auto}
.px.void{--fill:var(--void);--fill-size:auto}
.px.royal{--fill:var(--royal);--fill-size:auto;--hi:var(--voltage);--lo:var(--royal-deep);--bd:var(--royal-lo)}
.px.shadow{filter:drop-shadow(6px 6px 0 var(--royal-deep))}
.card{padding:var(--sp-3) var(--sp-3) var(--sp-4);margin:3px}
.card>h3,.card>h2{margin-bottom:var(--sp-2)}
.card p+p{margin-top:var(--sp-2)}

/* ---------- buttons: crosshair on hover, shot on click (site rule) ---------- */
.btn,button.btn,a.btn{--cut:6px;--fill:var(--voltage);--fill-size:auto;--hi:var(--volt-hi);--lo:var(--volt-lo);--bd:var(--volt-deep);
  display:inline-flex;align-items:center;justify-content:center;gap:12px;font:600 var(--s1)/1 var(--display);text-transform:uppercase;letter-spacing:.03em;color:var(--void);
  padding:15px 26px 16px;border:0;background:none;text-decoration:none;white-space:nowrap;margin:3px;min-height:48px;
  filter:drop-shadow(6px 6px 0 var(--royal-deep));transition:translate .12s cubic-bezier(.2,.9,.3,1.3),filter .12s cubic-bezier(.2,.9,.3,1.3)}
.btn:hover{translate:-2px -2px;filter:drop-shadow(8px 8px 0 var(--royal-deep));color:var(--void)}
.btn:active,.btn.pressed{translate:3px 3px;filter:drop-shadow(3px 3px 0 var(--royal-deep));--hi:var(--volt-lo);--lo:var(--volt-hi)}
.btn:focus-visible{outline:3px solid var(--plasma);outline-offset:5px}
.btn.ghost{--fill:var(--panel);--hi:var(--ash-hi);--lo:var(--ash-deep);--bd:var(--ash-lo);color:var(--bone)}
.btn.ghost:hover{--fill:var(--royal);--hi:var(--voltage);--lo:var(--royal-deep);--bd:var(--royal-lo);color:var(--bone)}
.btn.ghost:active{--hi:var(--royal-deep);--lo:var(--voltage)}
.btn.sm{font-size:15px;padding:11px 16px 12px;min-height:40px;filter:drop-shadow(4px 4px 0 var(--royal-deep))}
.btn.sm:hover{filter:drop-shadow(6px 6px 0 var(--royal-deep))}
.btn.lg{font-size:clamp(20px,2.2vw,26px);padding:20px 36px 22px}
.btn.danger{--fill:var(--alert);--hi:#FF8FA3;--lo:#9C253C;--bd:#6A1A2D;color:var(--void)}
.btn[disabled],.btn.disabled,.btn[aria-disabled="true"]{--fill:var(--raised);--hi:var(--ash-lo);--lo:var(--ash-deep);--bd:var(--ash-deep);color:var(--ash);cursor:not-allowed;translate:none;filter:none;pointer-events:none}
.btn.wide{width:100%}
.btn.icon-only{padding:12px;min-width:48px}
.btn .ico{width:22px;height:22px;flex:none}
.btn,button,[role="button"],.btn *,button *{cursor:var(--cursor-cross)}
.btn[disabled],.btn[disabled] *{cursor:not-allowed}
.btn-row{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}

/* pixel icons */
.ico{width:24px;height:24px;shape-rendering:crispEdges;fill:currentColor;flex:none}
.tile{width:44px;height:44px;display:grid;place-items:center;--cut:4px;--fill:var(--royal);--fill-size:auto;--hi:var(--voltage);--lo:var(--royal-deep);--bd:var(--royal-lo);margin:3px;color:var(--volt-hi)}
.tile .ico{width:26px;height:26px}

/* neon: only sign lettering and the horizon */
.neon{color:var(--magenta);text-shadow:0 0 1px var(--magenta),0 0 12px rgba(255,61,212,.75),0 0 32px rgba(179,71,255,.85)}
.neon.plasma{color:var(--plasma);text-shadow:0 0 1px var(--plasma),0 0 10px rgba(57,255,136,.7),0 0 28px rgba(57,255,136,.45)}
.sign{--cut:8px;--fill:var(--void);--fill-size:auto;--hi:var(--royal-lo);--lo:var(--royal-deep);--bd:var(--voltage);display:inline-block;padding:16px 28px 18px;font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1;margin:3px}

/* badges */
.badge{display:inline-flex;align-items:center;gap:8px;font:600 15px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:8px 12px 9px;color:var(--void);background:var(--ash);clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
.badge.live{background:var(--plasma)}
.badge.open{background:var(--voltage)}
.badge.full,.badge.off{background:var(--alert)}
.badge.soon{background:var(--ash-hi)}
.badge.members{background:var(--royal);color:var(--bone)}

/* HP bar */
.hp{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;max-width:520px}
.hp .bar{--fill:var(--void);--fill-size:auto;--cut:5px;height:30px;padding:6px;display:flex;gap:3px;margin:3px}
.hp .bar i{flex:1;background:linear-gradient(to bottom,#9DFFC4 0 3px,var(--plasma) 3px calc(100% - 3px),#1B683E calc(100% - 3px))}
.hp .bar i.off{background:var(--ash-deep)}
.hp .label{color:var(--plasma)}

/* ---------- layout ---------- */
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
main{flex:1}
.section{padding-block:var(--sp-6)}
.section.tight{padding-block:var(--sp-5)}
.section+.section{border-top:3px solid var(--ash-deep)}
.section.alt{background:var(--panel)}
.section-head{margin-bottom:var(--sp-4);max-width:70ch}
.section-head h2{margin-bottom:var(--sp-2)}
.grid{display:grid;gap:var(--sp-3)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:var(--sp-5);align-items:start}
.stack{display:grid;gap:var(--sp-2)}
.stack-lg{display:grid;gap:var(--sp-4)}
@media (width<=900px){.grid-2,.grid-3,.split{grid-template-columns:1fr}.section{padding-block:var(--sp-5)}}
.prose>*+*{margin-top:var(--sp-2)}
.prose h2{margin-top:var(--sp-5);font-size:var(--s3)}
.prose h3{margin-top:var(--sp-4);font-size:var(--s2)}
.prose ul,.prose ol{padding-left:24px}
.prose li+li{margin-top:6px}
.prose{max-width:70ch}
.divider{height:3px;background:var(--ash-deep);margin-block:var(--sp-4)}

/* reveal */
.reveal{opacity:0;translate:0 14px;transition:opacity .5s cubic-bezier(.16,1,.3,1),translate .5s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;translate:0 0}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;translate:none;transition:none}}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:90;background:var(--void);border-bottom:3px solid var(--ash-deep)}
.site-header .bar{height:var(--header-h);display:flex;align-items:center;gap:var(--sp-3)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--bone);font:700 22px/1 var(--display);text-transform:uppercase;margin-right:auto}
.brand img{width:auto;height:56px;filter:drop-shadow(0 0 6px rgba(255,61,212,.55))}
.brand:hover img{filter:drop-shadow(0 0 10px rgba(255,61,212,.9))}
.brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.nav-list{display:flex;gap:4px;list-style:none;align-items:center}
.nav-list a{display:block;padding:12px 14px;font:600 16px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--ash);text-decoration:none;border-bottom:3px solid transparent}
.nav-list a:hover{color:var(--bone)}
.nav-list a[aria-current="page"]{color:var(--bone);border-bottom-color:var(--voltage)}
.header-actions{display:flex;align-items:center;gap:8px}
.header-actions .btn{margin:2px}
.sfx{position:relative;margin-left:4px}
.sfx-toggle{--fill:var(--panel)}
.sfx.muted .sfx-toggle{color:var(--ash)}
.sfx .on,.sfx .off{display:none}
.sfx:not(.muted) .on,.sfx.muted .off{display:inline-flex}
.sfx-panel{position:absolute;right:0;top:calc(100% + 12px);width:250px;padding:16px;display:grid;gap:12px;z-index:6;--fill:var(--panel);--fill-size:auto;--cut:8px}
.sfx-panel label{display:flex;justify-content:space-between;font:600 15px/1.3 var(--body);color:var(--bone)}
.sfx-panel output{color:var(--voltage);font-family:var(--display)}
.sfx-panel input[type=range]{width:100%;accent-color:var(--voltage);height:32px;cursor:var(--cursor-cross)}
.sfx-panel input[type=range]:focus-visible{outline:3px solid var(--plasma);outline-offset:4px}
.sfx.corner{position:absolute;right:20px;top:20px}
.sfx.corner .sfx-toggle{--fill:rgba(17,22,36,.88)}
button.nav-toggle{display:none}
.user-menu{position:relative}
.user-menu .menu{position:absolute;right:0;top:calc(100% + 10px);min-width:220px;padding:10px;display:grid;gap:4px;z-index:5;--fill:var(--panel);--fill-size:auto}
.user-menu .menu a,.user-menu .menu button{display:block;width:100%;text-align:left;padding:10px 12px;font:600 15px/1.3 var(--body);color:var(--bone);background:none;border:0;text-decoration:none;cursor:var(--cursor-cross)}
.user-menu .menu a:hover,.user-menu .menu button:hover{background:var(--royal)}
.user-menu .menu .who{padding:8px 12px 12px;border-bottom:2px solid var(--ash-deep);margin-bottom:4px;font-size:14px;color:var(--ash)}
.user-menu .menu .who b{display:block;color:var(--bone);font-family:var(--display);font-size:16px}
@media (width<=1080px){
  button.nav-toggle{display:inline-flex}
  .site-nav{position:fixed;inset:var(--header-h) 0 0 0;background:var(--void);padding:var(--sp-4) 20px;overflow:auto;z-index:89;translate:100% 0;transition:translate .25s cubic-bezier(.2,.9,.3,1);visibility:hidden}
  .site-nav.open{translate:0 0;visibility:visible}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list a{font-size:22px;padding:18px 8px;border-bottom:3px solid var(--ash-deep)}
  .nav-list a[aria-current="page"]{border-bottom-color:var(--voltage)}
  .header-actions .hide-m{display:none}
}
.nav-auth{display:none}
@media (width<=1080px){.nav-auth{display:flex;gap:12px;padding-top:var(--sp-3)}.nav-auth .btn{flex:1}}
@media (width<=560px){.brand img{height:44px}.btn{padding-inline:18px}.header-actions{gap:4px}.header-actions .btn.sm{padding:10px 12px 11px;min-width:44px}[data-user-handle]{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.site-header .bar{gap:var(--sp-2)}}

/* ---------- footer ---------- */
.site-footer{border-top:3px solid var(--ash-deep);background:var(--panel);padding-block:var(--sp-5) var(--sp-4);font-size:16px;color:var(--ash)}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--sp-4)}
.site-footer .foot-h{color:var(--bone);margin-bottom:12px;font-family:var(--display);font-size:18px;font-weight:600}
.site-footer ul{list-style:none;display:grid;gap:6px}
.site-footer a{color:var(--ash)}
.site-footer a:hover{color:var(--bone)}
.site-footer .brand{margin:0 0 12px}
.site-footer .brand img{height:64px}
.attribution{margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:2px solid var(--ash-deep);font-size:14px;line-height:1.6;color:var(--ash)}
.attribution p+p{margin-top:2px}
.attribution a{color:var(--ash)}
@media (width<=900px){.site-footer .cols{grid-template-columns:1fr}}

/* ---------- forms ---------- */
.field{display:grid;gap:6px}
.field label{font:600 16px/1.3 var(--body);color:var(--bone)}
.field .hint{font-size:14px;color:var(--ash)}
.field input,.field textarea,.field select{font:400 17px/1.4 var(--body);color:var(--bone);background:var(--void);border:3px solid var(--ash-lo);padding:12px 14px;width:100%;min-height:48px}
.field textarea{min-height:140px;resize:vertical}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:3px solid var(--plasma);outline-offset:2px;border-color:var(--voltage)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--alert)}
.field .err{font-size:14px;color:var(--alert);font-weight:600;min-height:1.2em}
.field.check{grid-template-columns:auto 1fr;align-items:start;gap:12px}
.field.check input{width:22px;height:22px;min-height:0;accent-color:var(--voltage);margin-top:6px}
.field.check label{font-weight:400}
.form-grid{display:grid;gap:var(--sp-3)}
.form-grid.two{grid-template-columns:1fr 1fr}
@media (width<=640px){.form-grid.two{grid-template-columns:1fr}}
.alert{padding:14px 16px;font-weight:600;border:3px solid;margin:3px}
.alert.ok{border-color:var(--plasma);color:var(--plasma);background:rgba(57,255,136,.08)}
.alert.err{border-color:var(--alert);color:var(--alert);background:rgba(255,59,92,.08)}
.alert:empty{display:none}

/* ---------- dialogs ---------- */
dialog.modal{border:0;padding:0;background:transparent;color:var(--bone);max-width:min(92vw,560px);width:100%;margin:auto}
dialog.modal::backdrop{background:rgba(9,11,20,.84)}
dialog.modal .box{--cut:12px;--fill:var(--panel);--fill-size:auto;padding:var(--sp-4);margin:6px}
dialog.modal .box.wide{max-width:none}
dialog.modal h2{font-size:var(--s3);margin-bottom:var(--sp-3)}
dialog.modal .close{position:absolute;right:14px;top:14px}
dialog.modal form{display:grid;gap:var(--sp-3)}
dialog.modal[open]{animation:pop .18s steps(3)}
@keyframes pop{from{opacity:0;scale:.96}}
dialog.admin{max-width:min(96vw,1100px)}
.demo-logins{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.demo-logins button{font:600 14px/1 var(--body);padding:8px 10px;background:var(--void);border:2px solid var(--ash-lo);color:var(--ash);cursor:var(--cursor-cross)}
.demo-logins button:hover{border-color:var(--voltage);color:var(--bone)}
.switch{font-size:15px;color:var(--ash);margin-top:4px}
.switch button{background:none;border:0;color:var(--voltage);font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:4px;cursor:var(--cursor-cross)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;margin:3px}
table{width:100%;border-collapse:collapse;font-size:16px}
th{font:600 15px/1.4 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--ash);text-align:left;padding:10px 12px;border-bottom:3px solid var(--ash-deep)}
td{padding:12px;border-bottom:2px solid var(--ash-deep);vertical-align:middle}
tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.ladder .rank{font-family:var(--display);font-weight:700;color:var(--voltage);width:70px}
.ladder tr.top .rank{color:var(--plasma)}
.ladder .tag{font-weight:600}

/* ---------- lists of things ---------- */
.list{display:grid;gap:var(--sp-3)}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:var(--sp-3);align-items:center;padding:var(--sp-3);margin:3px}
.item .when{font:600 15px/1.4 var(--display);color:var(--ash);text-transform:uppercase;min-width:130px}
.item .when b{display:block;color:var(--bone);font-size:var(--s2)}
.item h3{font-size:var(--s2);margin-bottom:4px}
.item .meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:15px;color:var(--ash)}
.item .actions{display:grid;gap:8px;justify-items:end}
@media (width<=760px){.item{grid-template-columns:1fr}.item .actions{justify-items:start}}
.server{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-3);padding:var(--sp-3);margin:3px;align-items:start}
.server .addr{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-family:var(--body);font-weight:600;font-size:17px}
.server code{background:var(--void);padding:8px 12px;border:2px solid var(--ash-lo);font-family:var(--body);letter-spacing:.02em}
.server code.masked{color:var(--ash);border-style:dashed}
.slots{display:flex;gap:3px;align-items:center}
.slots i{width:10px;height:14px;background:var(--plasma)}
.slots i.free{background:var(--ash-deep)}

/* FAQ */
.faq details{border-top:3px solid var(--ash-deep)}
.faq details:last-child{border-bottom:3px solid var(--ash-deep)}
.faq summary{list-style:none;cursor:var(--cursor-cross);padding:20px 56px 20px 0;position:relative;font:700 var(--s2)/1.3 var(--display);text-transform:uppercase}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:8px;top:14px;font-size:32px;color:var(--voltage);font-family:var(--display)}
.faq details[open] summary::after{content:'-'}
.faq summary:hover{color:var(--volt-hi)}
.faq summary:focus-visible{outline-offset:-3px}
.faq .a{padding:0 0 24px;max-width:70ch;color:var(--bone)}
.faq .a p+p{margin-top:12px}

/* steps that are a real sequence */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-3);counter-reset:step}
.steps .card{padding-top:var(--sp-4)}
.steps .card::marker{content:none}
.steps .card h3{display:flex;align-items:center;gap:12px}
.steps .card h3 .tile{--fill:var(--voltage);color:var(--void)}
@media (width<=900px){.steps{grid-template-columns:1fr}}

/* ---------- home: choose your path ---------- */
.path-hero{position:relative;min-height:min(calc(100svh - var(--header-h)),860px);display:grid;align-items:center;overflow:hidden;padding-block:var(--sp-5)}
.path-hero .scene{--zoom:1.25;left:66%}
.path-hero .shade{position:absolute;inset:0;background:linear-gradient(to right,rgba(9,11,20,.96) 0 38%,rgba(9,11,20,.5) 60%,rgba(9,11,20,.1))}
@media (width<=900px){.path-hero .scene{left:50%}.path-hero .shade{background:rgba(9,11,20,.8)}}
.path-hero .wrap{position:relative}
.path-hero h1{font-size:clamp(36px,5.6vw,72px);margin-bottom:var(--sp-2)}
.path-hero .lead{margin-bottom:var(--sp-4)}
.path-menu{display:grid;gap:22px;justify-items:start;max-width:560px}
.path-menu .btn{width:100%;justify-content:flex-start;padding:12px 24px 13px 12px;font-size:clamp(17px,1.7vw,22px);text-align:left}
.path-menu .btn.ghost{--fill:var(--dither);--fill-size:4px 4px}
.path-menu .btn .tile{--fill:var(--void);--hi:var(--royal);--lo:#000;--bd:var(--volt-deep);margin:0}
.path-menu .btn:not(.ghost) .tile{color:var(--volt-hi)}
.path-menu .btn small{margin-left:auto;font:600 13px/1.2 var(--body);text-transform:none;letter-spacing:0;color:inherit;opacity:.8;text-align:right;white-space:normal;max-width:38%}
.path-hero .hp{margin-top:var(--sp-4)}
@media (width<=560px){.path-menu .btn small{display:none}}

/* ---------- landing: the 32-bit street stage (five 400x225 canvases scaled 4x) ---------- */
body.landing{background:var(--void);min-height:100svh;display:flex;flex-direction:column}
.landing-main{flex:1;display:flex;flex-direction:column;min-height:0}
.landing-foot{flex-shrink:0}
.stage-wrap{position:relative;height:100svh;min-height:520px;overflow:hidden;background:var(--void)}
.landing-main .stage-wrap{height:auto;flex:1;min-height:420px} /* the stage is the whole viewport (the landing has no footer): no scroll, START GAME always on screen */
.scene{position:absolute;left:50%;top:50%;width:1600px;height:900px;translate:-50% -50%;scale:var(--s,1);transform-origin:center;overflow:hidden;background:#0B1319;isolation:isolate}
.scene canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.scene .vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 50% 45%,transparent 50%,rgba(9,11,20,.82))}
.stage-ui{position:absolute;inset:0;pointer-events:none;z-index:5}
.stage-ui>*{pointer-events:auto}
.scene .start{position:absolute;left:50%;top:86%;translate:-50% 0;z-index:5;font-size:26px;padding:20px 40px 22px}
.flash{position:fixed;inset:0;background:var(--bone);opacity:0;pointer-events:none;z-index:150}
.flash.on{animation:flash .12s steps(2)}
@keyframes flash{0%{opacity:.35}100%{opacity:0}}
.landing-foot{padding:var(--sp-3) 0;background:var(--panel);border-top:3px solid var(--ash-deep)}
.landing-foot .attribution{margin:0;padding:0;border:0}

/* coming soon: the landing scene under the site header */
.stage-wrap.coming{height:min(calc(100svh - var(--header-h)),900px);min-height:560px}
.coming-sign{position:absolute;left:50%;bottom:5%;translate:-50% 0;display:grid;justify-items:center;gap:10px;text-align:center;font-size:clamp(24px,4.4vw,56px);padding:18px 34px 20px;max-width:92vw}
.coming-sign .sub{display:block;color:var(--bone);font-size:clamp(13px,1.2vw,17px);font-weight:600;letter-spacing:.14em;text-shadow:none}

/* loading screen (landing only) */
.loader{position:fixed;inset:0;z-index:140;background:var(--void);display:grid;place-items:center;text-align:center;padding:24px}
.loader[hidden]{display:none}
.loader .box{--cut:14px;--fill:var(--panel);--fill-size:auto;width:min(92vw,520px);padding:var(--sp-4) var(--sp-4) var(--sp-3);display:grid;gap:var(--sp-3);justify-items:center}
.loader img{width:210px;filter:drop-shadow(0 0 10px rgba(255,61,212,.7))}
.loader .ld-title{font:700 var(--s3)/1.1 var(--display);text-transform:uppercase;animation:pulse 1s steps(2) infinite}
@keyframes pulse{50%{opacity:.45}}
.loader .bar{--fill:var(--void);--fill-size:auto;--cut:5px;width:100%;height:34px;padding:6px;display:flex;gap:3px;margin:3px}
.loader .bar i{flex:1;background:var(--ash-deep)}
.loader .bar i.on{background:linear-gradient(to bottom,var(--volt-hi) 0 3px,var(--voltage) 3px calc(100% - 3px),var(--volt-lo) calc(100% - 3px))}
.loader .pct{font:700 var(--s2)/1 var(--display);color:var(--voltage)}
.loader .tip{min-height:3.4em;font-size:16px;color:var(--ash);max-width:40ch}
.loader .skip{position:static;font-size:14px;color:var(--ash);background:none;border:0;text-decoration:underline;text-underline-offset:4px;padding:8px;cursor:var(--cursor-cross)}
.loader .skip:hover{color:var(--bone)}
.loader-done .loader{display:none}

/* 404 */
.gameover{min-height:min(calc(100svh - var(--header-h)),820px);display:grid;place-items:center;text-align:center;padding-block:var(--sp-6);position:relative;overflow:hidden}
.gameover canvas{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;object-fit:cover;opacity:.6}
.gameover .shade{position:absolute;inset:0;background:radial-gradient(60% 60% at 50% 50%,rgba(9,11,20,.95),rgba(9,11,20,.6))}
.gameover .inner{position:relative;display:grid;gap:var(--sp-3);justify-items:center}
.gameover h1{font-size:clamp(48px,9vw,110px);line-height:1}
.gameover .count{font:700 clamp(32px,5vw,56px)/1 var(--display);color:var(--plasma)}
.gameover .count.done{color:var(--alert)}
/* site status: the maintenance / Coming soon screens and the staff banner */
.status-screen .eyebrow{font:700 14px/1 var(--display);letter-spacing:.3em;color:var(--cyan,#37E6FF);text-transform:uppercase}
.status-banner{position:relative;z-index:6;padding:12px var(--sp-3);background:var(--sodium,#FFB03B);color:#1B1200;font:600 15px/1.4 var(--body);text-align:center}
.status-banner a{color:inherit;text-decoration:underline}
body.status-maintenance .site-header,body.status-maintenance .site-footer,body.status-maintenance .sfx.corner,body.status-maintenance .skip{display:none}
body.status-maintenance #main .gameover,body.landing #main .gameover{min-height:100svh}
/* personal training: copy beside the Damage Cap logo */
.dc-split{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--sp-5);align-items:center}
.dc-split .dc-logo{display:block;width:100%;height:auto;filter:drop-shadow(0 0 28px rgba(255,96,40,.28))}
@media (width<=900px){.dc-split{grid-template-columns:1fr}.dc-split .dc-logo{max-width:440px;margin-inline:auto;order:-1}}
/* empty lists */
.empty-state{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-4)}
.empty-state p{margin:0;color:var(--bone);font:500 17px/1.5 var(--body);max-width:60ch}
.empty-ico{flex:none;display:grid;place-items:center;width:52px;height:52px;border:3px solid var(--ash-lo);color:var(--voltage)}
.empty-ico .ico{width:26px;height:26px;fill:currentColor}
@media (width<=560px){.empty-state{flex-direction:column;align-items:flex-start}}
/* announcement bar */
.announce{position:relative;z-index:7;font:600 15px/1.45 var(--body);color:#090B14}
.announce.tone-violet{background:#B347FF}
.announce.tone-magenta{background:#FF3DD4}
.announce.tone-cyan{background:#37E6FF}
.announce.tone-sodium{background:#FFB03B}
.announce-in{display:flex;align-items:center;justify-content:center;gap:12px;padding-block:10px;min-height:44px}
.announce p{margin:0;flex:1;text-align:center;max-width:none}
.announce a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.announce-x{flex:none;display:grid;place-items:center;width:34px;height:34px;padding:0;border:2px solid currentColor;background:transparent;color:inherit;cursor:pointer}
.announce-x .ico{width:14px;height:14px;fill:currentColor}
.announce a:focus-visible,.announce-x:focus-visible{outline:3px solid currentColor;outline-offset:2px}
.an-preview .announce{border:2px dashed var(--ash-lo)}
.an-preview .announce-in{padding-inline:12px}
/* admin radio chips (announcement colour, timing) */
fieldset.field{border:0;padding:0;margin:0 0 var(--sp-3);min-width:0}
fieldset.field legend{font:600 16px/1.3 var(--body);color:var(--bone);padding:0;margin-bottom:8px}
.radio-row{display:flex;flex-wrap:wrap;gap:8px}
.radio-col{display:grid;gap:8px;justify-items:start}
.chip-radio{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:2px solid var(--ash-lo);cursor:pointer;font:500 15px/1.3 var(--body);color:var(--bone)}
.chip-radio:has(input:checked){border-color:var(--voltage);background:rgba(179,71,255,.14)}
.chip-radio input[type=radio]{width:18px;height:18px;min-height:0;margin:0;padding:0;accent-color:var(--voltage);flex:none}
.chip-radio .sw{width:18px;height:18px;border:2px solid var(--void);flex:none}
.sw.tone-violet{background:#B347FF}.sw.tone-magenta{background:#FF3DD4}.sw.tone-cyan{background:#37E6FF}.sw.tone-sodium{background:#FFB03B}
.field input[type=datetime-local]{color-scheme:dark}
/* admin > seo + members */
.seo-page summary{cursor:pointer;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.seo-page[open] summary{margin-bottom:var(--sp-2)}
.btn-row.nowrap{flex-wrap:nowrap}
/* admin > developer */
.dropzone{border:3px dashed var(--ash-deep);text-align:center;padding:var(--sp-5) var(--sp-3);transition:border-color .15s,background-color .15s}
.dropzone.over{border-color:var(--voltage);background-color:rgba(179,71,255,.14)}
.dropzone .btn-row{justify-content:center}
.dropzone input.sr-only:focus-visible+label{outline:3px solid var(--cyan);outline-offset:3px}
.dev-versions{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin:0}
.dev-versions dt{font:600 13px/1.2 var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--ash)}
.dev-versions dd{margin:6px 0 0;font:700 22px/1.1 var(--display);color:var(--bone)}
.dev-list li{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--ash-deep)}
.dev-state{flex-basis:100%;font-weight:600}
.dev-state:empty{display:none}
.dev-state.ok{color:var(--plasma)}
.dev-state.err,.dev-msg.err{color:#FF8FA3}
.dev-msg{padding:12px 16px;border-left:4px solid var(--alert);background:rgba(255,59,92,.1)}
.status-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px 16px;margin-bottom:var(--sp-3)}

/* admin */
.admin-tabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--sp-3);border-bottom:3px solid var(--ash-deep);padding-bottom:12px}
.admin-tabs button{font:600 15px/1 var(--display);text-transform:uppercase;letter-spacing:.04em;padding:10px 14px;background:var(--void);border:2px solid var(--ash-lo);color:var(--ash);cursor:var(--cursor-cross)}
.admin-tabs button[aria-selected="true"]{background:var(--voltage);color:var(--void);border-color:var(--voltage)}
.admin-panel{max-height:62vh;overflow:auto;padding-right:6px}
.admin-panel h3{font-size:var(--s2);margin:var(--sp-3) 0 var(--sp-2)}
.admin-panel h3:first-child{margin-top:0}
.admin-panel .row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:2px solid var(--ash-deep)}
.admin-panel .row .btn-row{gap:6px}
.admin-panel .row b{font-family:var(--display);font-weight:600}
.admin-panel .row small{display:block;color:var(--ash);font-size:14px}
.admin-panel .field{margin-bottom:12px}
.admin-panel .cms-group{margin-bottom:var(--sp-3)}
.admin-panel .stat{display:grid;gap:4px;padding:16px;margin:3px}
.admin-panel .stat b{font:700 var(--s4)/1 var(--display);color:var(--voltage)}
.admin-panel .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:var(--sp-3)}
select.inline{font:600 15px var(--body);background:var(--void);color:var(--bone);border:2px solid var(--ash-lo);padding:6px 8px}

/* utilities */
.hide{display:none!important}
.mt-2{margin-top:var(--sp-2)}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}.mt-5{margin-top:var(--sp-5)}
.mb-2{margin-bottom:var(--sp-2)}.mb-3{margin-bottom:var(--sp-3)}.mb-4{margin-bottom:var(--sp-4)}
.center{text-align:center}
.cta-band{text-align:center;padding-block:var(--sp-6)}
.cta-band h2{margin-bottom:var(--sp-2)}
.cta-band p{max-width:52ch;margin:0 auto var(--sp-4)}

@media (prefers-reduced-motion:reduce){
  .scene *,.loader h1,.reveal,dialog.modal[open]{animation:none!important;transition:none!important}
}
@media (prefers-contrast:more){.muted{color:var(--bone)}}

/* ---------- leaderboards ---------- */
.lb-tabs{display:flex;flex-wrap:wrap;gap:8px 12px;margin-bottom:var(--sp-4)}
.lb-tabs .btn{margin:3px}
.lb-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp-3);margin-bottom:var(--sp-3);flex-wrap:wrap}
.lb-head h2{font-size:var(--s3);margin-bottom:6px}
.lb-meta{display:flex;gap:8px;flex-wrap:wrap}
.avatar{width:48px;height:48px;object-fit:cover;flex:none;clip-path:polygon(6px 0,calc(100% - 6px) 0,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0 calc(100% - 6px),0 6px);background:var(--raised)}
.avatar.placeholder{display:inline-grid;place-items:center;font:700 16px var(--display);color:var(--volt-hi);background:var(--royal-lo)}
.team{display:inline-flex;align-items:center;gap:12px}
.ladder.lb td{padding:10px 12px}
.ladder.lb tr.p1 .rank{color:var(--plasma)}
.ladder.lb tr.p2 .rank,.ladder.lb tr.p3 .rank{color:var(--volt-hi)}
.ladder.lb .pts{font:700 var(--s1) var(--display);color:var(--voltage)}
.wr{display:inline-grid;grid-template-columns:70px auto;align-items:center;gap:8px;font-variant-numeric:tabular-nums}
.wr i{display:block;height:10px;background:var(--ash-deep);position:relative}
.wr i::after{content:'';position:absolute;inset:0 auto 0 0;width:var(--w);background:linear-gradient(to bottom,#9DFFC4 0 2px,var(--plasma) 2px calc(100% - 2px),#1B683E calc(100% - 2px))}
@media (width<=640px){.wr{grid-template-columns:auto}.wr i{display:none}}

/* ---------- servers ---------- */
.server h2{font-size:var(--s2);margin:8px 0 2px}
.server .game{margin-bottom:4px}
.server .kv{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap}
.gate{--fill:var(--panel)}

/* ---------- training ---------- */
.video-frame{aspect-ratio:16/9;padding:6px;margin:3px}
.video-frame iframe{width:100%;height:100%;border:0;display:block;background:#000}
.videos .video{margin:3px;overflow:hidden}
.videos .poster{position:relative;display:block;width:100%;padding:0;border:0;background:var(--void);cursor:var(--cursor-cross)}
.videos .poster img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;filter:saturate(.85)}
.videos .poster .play{position:absolute;left:50%;top:50%;translate:-50% -50%;width:64px;height:56px;display:grid;place-items:center;background:var(--voltage);color:var(--void);font-size:24px;clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);transition:translate .12s cubic-bezier(.2,.9,.3,1.3)}
.videos .poster:hover .play{translate:-50% -56%}
.videos .poster:focus-visible{outline:3px solid var(--plasma);outline-offset:-3px}
.videos .vbody{padding:18px 20px 22px}
.videos h3{font-size:var(--s1);margin-bottom:6px}
.tips .tip h3{margin:12px 0 8px}
.tips .tip p{color:var(--bone)}
.recipes .recipe{margin:3px;display:grid;overflow:hidden}
.recipes .rphoto{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.recipes .rbody{padding:20px 22px 24px}
.recipes h3{font-size:var(--s2);margin-bottom:6px}
.recipes .macros{font:600 14px/1.5 var(--body);color:var(--plasma);margin-top:8px}
.recipes details{margin-top:14px;border-top:2px solid var(--ash-deep);padding-top:10px}
.recipes summary{cursor:var(--cursor-cross);font:600 15px var(--display);text-transform:uppercase;color:var(--voltage);list-style:none}
.recipes summary::-webkit-details-marker{display:none}
.recipes summary::before{content:'+ '}
.recipes details[open] summary::before{content:'- '}
.recipes .rdetail{margin-top:10px;font-size:16px}
.recipes .rdetail h4{margin:10px 0 4px}
.recipes .rdetail ul{padding-left:20px}

/* ---------- admin page ---------- */
.admin-layout{display:grid;grid-template-columns:240px 1fr;gap:var(--sp-4);align-items:start}
.admin-nav{position:sticky;top:calc(var(--header-h) + 16px)}
.admin-nav ul{display:grid;gap:4px}
.admin-nav button{width:100%;text-align:left;font:600 16px/1.2 var(--display);text-transform:uppercase;letter-spacing:.04em;padding:12px 14px;background:var(--panel);border:2px solid var(--ash-deep);color:var(--ash);cursor:var(--cursor-cross)}
.admin-nav button:hover{color:var(--bone);border-color:var(--ash-lo)}
.admin-nav button[aria-current="page"]{background:var(--voltage);color:var(--void);border-color:var(--voltage)}
.admin-main h2{font-size:var(--s3);margin-bottom:var(--sp-2)}
.admin-main h3{font-size:var(--s1);margin-bottom:var(--sp-2)}
.admin-main .card{padding:var(--sp-3)}
.admin-main .field{margin-bottom:12px}
.admin-main .field.wide{grid-column:1/-1}
.admin-main .form-grid .field{margin-bottom:0}
.admin-main .form-grid.three{grid-template-columns:repeat(3,1fr)}
.admin-main .form-grid.five{grid-template-columns:2fr repeat(4,1fr)}
.admin-main .row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;padding:10px 0;border-bottom:2px solid var(--ash-deep)}
.admin-main .row:last-child{border-bottom:0}
.admin-main .row b{font-family:var(--display);font-weight:600}
.admin-main .row small{display:block;color:var(--ash);font-size:14px}
.admin-main .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:var(--sp-3)}
.admin-main .stat{display:grid;gap:4px;padding:16px;margin:3px}
.admin-main .stat b{font:700 var(--s4)/1 var(--display);color:var(--voltage)}
.admin-split{display:grid;grid-template-columns:320px 1fr;gap:var(--sp-4);align-items:start}
.board-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;padding:6px 8px 6px 0;margin:3px}
.board-item .pick{flex:1;text-align:left;background:none;border:0;color:var(--bone);padding:10px 14px;cursor:var(--cursor-cross);font:inherit}
.board-item .pick b{font-family:var(--display);font-weight:600;display:block}
.board-item .pick small{color:var(--ash);font-size:14px}
.board-item.active{--fill:var(--royal);--hi:var(--voltage);--lo:var(--royal-deep);--bd:var(--royal-lo)}
.board-item.active .pick small{color:var(--volt-hi)}
.admin-table input{font:400 16px var(--body);color:var(--bone);background:var(--void);border:2px solid var(--ash-lo);padding:6px 8px;min-width:0;width:100%}
.admin-table td.num input{width:76px;text-align:right}
.admin-table .rank{font-family:var(--display);color:var(--voltage);white-space:nowrap}
.photo-cell{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap}
.file-btn{cursor:var(--cursor-cross)}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:var(--sp-2);flex-wrap:wrap}
.card-head h3{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
select.inline{font:600 15px var(--body);background:var(--void);color:var(--bone);border:2px solid var(--ash-lo);padding:6px 8px}
@media (width<=1000px){.admin-layout{grid-template-columns:1fr}.admin-nav{position:static}.admin-nav ul{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}.admin-split{grid-template-columns:1fr}.admin-main .form-grid.three,.admin-main .form-grid.five{grid-template-columns:1fr 1fr}}
@media (width<=640px){.admin-main .form-grid.three,.admin-main .form-grid.five,.admin-main .form-grid.two{grid-template-columns:1fr}}

/* ---------- roles ---------- */
.perms{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.perm-group{border:2px solid var(--ash-deep);padding:12px 14px 6px;min-width:0}
.perm-group legend{font:600 14px/1 var(--display);text-transform:uppercase;letter-spacing:.08em;color:var(--ash);padding:0 6px}
.perm{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;padding:8px 0;cursor:var(--cursor-cross)}
.perm input{width:22px;height:22px;accent-color:var(--voltage);margin-top:3px}
.perm b{display:block;font-weight:600}
.perm small{display:block;color:var(--ash);font-size:14px;line-height:1.4}
.perm input:disabled+span{opacity:.7}
.admin-table.members td{vertical-align:middle}
.admin-table.members small{display:block;font-size:14px}
@media (width<=760px){.perms{grid-template-columns:1fr}}

/* admin layout fixes */
.admin-main,.admin-split>*,.admin-layout>*{min-width:0}
.admin-main .form-grid{align-items:start}
.admin-main .form-grid .field{align-content:start}
.admin-table input[name=name]{min-width:150px}
.admin-table td{white-space:nowrap}
.admin-table .photo-cell{flex-wrap:nowrap}
.admin-table th,.admin-table td{padding:8px 6px}
.admin-table td.num input{width:62px;padding:6px 4px}
.admin-table input[name=name]{min-width:130px;max-width:170px}
.admin-table .btn-row{flex-wrap:nowrap;gap:4px}
.admin-table .btn.sm{padding:9px 10px 10px;min-height:36px}
.admin-table .photo-cell .btn.sm{padding:9px 8px 10px}

/* leaderboard column toggles */
.col-toggles{display:flex;flex-wrap:wrap;gap:8px 18px;padding:6px 0}
.toggle{display:inline-flex;align-items:center;gap:8px;font:600 16px var(--body);cursor:var(--cursor-cross)}
.toggle input{width:20px;height:20px;accent-color:var(--voltage)}
.ladder.lb .wr.pts{color:var(--voltage);font-weight:700}

/* Jersey 15 is condensed: run the display scale ~10% larger than the Pixelify sizes it replaced, with a touch of tracking */
h1,h2,h3,h4,.btn,.label,.badge,.nav-list a,.brand,.admin-nav button,.step .meta{letter-spacing:.03em}
h1{font-size:clamp(38px,5.5vw,62px)}
h2{font-size:clamp(31px,3.7vw,49px)}
h3{font-size:clamp(25px,2.4vw,31px)}
h4{font-size:20px}
.btn,button.btn,a.btn{font-size:20px}
.btn.sm{font-size:17px}
.btn.lg{font-size:clamp(22px,2.4vw,29px)}
.label{font-size:16px}
.badge{font-size:16px}
.nav-list a{font-size:18px}
.brand{font-size:25px}
.path-hero h1{font-size:clamp(40px,6.2vw,80px)}
.path-menu .btn{font-size:clamp(19px,1.9vw,24px)}
.coming-sign{font-size:clamp(28px,5vw,62px)}
.gameover h1{font-size:clamp(54px,10vw,122px)}
.gameover .count{font-size:clamp(36px,5.6vw,62px)}
.admin-nav button{font-size:18px}
.admin-main h2{font-size:31px}
.admin-main h3{font-size:20px}
.lb-head h2{font-size:31px}
.server h2{font-size:25px}
.ladder.lb .pts{font-size:20px}
.site-footer .foot-h{font-size:20px}
.loader .ld-title{font-size:31px}
.loader .pct{font-size:25px}
.sfx-panel output{font-size:18px}
.recipes summary{font-size:17px}
.perm-group legend{font-size:15px}
.step .meta,.admin-table th,th{font-size:16px}

/* ---------- no browser UI: custom controls ---------- */
html{scrollbar-color:var(--royal) var(--panel);scrollbar-width:thin}
::-webkit-scrollbar{width:12px;height:12px}::-webkit-scrollbar-track{background:var(--panel)}::-webkit-scrollbar-thumb{background:var(--royal);border:2px solid var(--panel)}::-webkit-scrollbar-thumb:hover{background:var(--voltage)}
input[type=checkbox]{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;background:var(--void);border:3px solid var(--ash-lo);display:inline-grid;place-items:center;cursor:var(--cursor-cross);flex:none}
input[type=checkbox]::before{content:'';width:10px;height:10px;background:var(--voltage);scale:0;transition:scale .1s steps(2)}
input[type=checkbox]:checked{border-color:var(--voltage)}input[type=checkbox]:checked::before{scale:1}
input[type=checkbox]:disabled{opacity:.6;cursor:not-allowed}
input[type=checkbox]:focus-visible{outline:3px solid var(--plasma);outline-offset:3px}
.field.check input,.perm input,.toggle input{width:22px;height:22px;accent-color:initial}
input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;height:32px;cursor:var(--cursor-cross)}
input[type=range]::-webkit-slider-runnable-track{height:10px;background:var(--ash-deep);border:2px solid var(--ash-lo)}
input[type=range]::-moz-range-track{height:10px;background:var(--ash-deep);border:2px solid var(--ash-lo)}
input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:22px;height:22px;margin-top:-8px;background:var(--voltage);border:3px solid var(--volt-deep);clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--voltage);border:3px solid var(--volt-deep);border-radius:0}
input[type=range]::-moz-range-progress{background:var(--voltage);height:10px}
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
/* custom dropdown */
.pxsel{position:relative;display:inline-block;min-width:0}
.pxsel select{display:none}
.pxsel-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:48px;font:400 17px/1.3 var(--body);color:var(--bone);background:var(--void);border:3px solid var(--ash-lo);padding:10px 12px 10px 14px;text-align:left;cursor:var(--cursor-cross)}
.pxsel-btn:hover{border-color:var(--ash)}
.pxsel-btn[aria-expanded="true"]{border-color:var(--voltage)}
.pxsel-btn:focus-visible{outline:3px solid var(--plasma);outline-offset:2px}
.pxsel-btn i{width:0;height:0;border:7px solid transparent;border-top:9px solid var(--voltage);border-bottom:0;flex:none;translate:0 2px}
.pxsel-btn[aria-expanded="true"] i{rotate:180deg;translate:0 -2px}
.pxsel.inline .pxsel-btn{min-height:40px;font:600 15px/1.2 var(--body);padding:8px 10px 8px 12px;border-width:2px}
.pxsel-list{position:absolute;left:0;top:calc(100% + 8px);min-width:100%;max-height:280px;overflow:auto;list-style:none;padding:6px;margin:3px 0 0;z-index:30;--fill:var(--panel);--fill-size:auto;--cut:6px}
.pxsel-list li{padding:10px 12px;font:400 16px/1.3 var(--body);color:var(--bone);cursor:var(--cursor-cross);white-space:nowrap}
.pxsel-list li:hover,.pxsel-list li:focus{background:var(--royal);outline:0}
.pxsel-list li[aria-selected="true"]{color:var(--void);background:var(--voltage)}
.pxsel-list li[aria-selected="true"]:hover,.pxsel-list li[aria-selected="true"]:focus{background:var(--volt-hi)}
.field .pxsel{display:block}
.admin-main .form-grid .field .pxsel{width:100%}
/* confirm dialog */
dialog.modal.confirm{max-width:min(92vw,460px)}
dialog.modal.confirm h2{font-size:25px;margin-bottom:10px}
/* analytics */
.period{display:flex;flex-wrap:wrap;gap:6px 10px;margin-bottom:var(--sp-3)}
.admin-main .stat em{display:block;font:600 13px/1.3 var(--body);color:var(--ash);font-style:normal;margin-top:4px}
.admin-main .stat em.up{color:var(--plasma)}.admin-main .stat em.down{color:var(--alert)}
.chart{padding:16px 12px 8px;margin:3px}
.chart .bars{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;align-items:end;height:180px}
.chart .bar{display:grid;grid-template-rows:1fr auto;height:100%;align-items:end;min-width:0}
.chart .bar i{display:block;height:var(--h);min-height:3px;background:linear-gradient(to bottom,var(--volt-hi) 0 3px,var(--voltage) 3px calc(100% - 3px),var(--volt-lo) calc(100% - 3px));align-self:end}
.chart .bar[style*="--h:0%"] i{background:var(--ash-deep)}
.chart .bar span{display:block;font:600 11px/1.4 var(--body);color:var(--ash);text-align:center;margin-top:6px;overflow:hidden;text-overflow:clip;white-space:nowrap;height:16px}
.admin-main .tbl .num{font-variant-numeric:tabular-nums;font-weight:600;color:var(--voltage)}

/* ---------- video carousel ---------- */
.carousel-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-3);flex-wrap:wrap}
.carousel-head h2{margin:0}
.carousel-ctl{display:flex;align-items:center;gap:10px}
.carousel-ctl [data-car-status]{font:600 15px var(--display);letter-spacing:.06em;min-width:52px;text-align:center}
.carousel{margin:-6px;padding:6px;overflow:hidden}
.videos.track{display:flex;gap:var(--sp-3);padding:6px;margin:-6px;outline-offset:-3px;will-change:transform}
.videos.track [data-slide]{flex:0 0 calc((100% - 2 * var(--sp-3)) / 3);min-width:0}
.videos.track.static{flex-wrap:wrap}
@media (width<=1000px){.videos.track [data-slide]{flex-basis:calc((100% - var(--sp-3)) / 2)}}
@media (width<=640px){.videos.track [data-slide]{flex-basis:100%}}
.dots{display:flex;justify-content:center;gap:10px;margin-top:var(--sp-3)}
.dots button{width:18px;height:18px;padding:0;border:3px solid var(--ash-lo);background:var(--void);cursor:var(--cursor-cross);clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
.dots button:hover{border-color:var(--ash)}
.dots button[aria-current="true"]{background:var(--voltage);border-color:var(--voltage)}
.dots button:focus-visible{outline:3px solid var(--plasma);outline-offset:3px}
/* ---------- social links ---------- */
.social-row{display:flex;flex-wrap:wrap;gap:8px 12px;margin-top:var(--sp-4);max-width:560px}
.social-row .btn{--fill:rgba(17,22,36,.88)}
.site-footer .cols{grid-template-columns:1.4fr 1fr 1fr 1fr}
.social-list a{display:inline-flex;align-items:center;gap:8px}
.social-list .ico{width:18px;height:18px}
@media (width<=900px){.site-footer .cols{grid-template-columns:1fr 1fr}.site-footer .cols>div:first-child{grid-column:1/-1}}
@media (width<=560px){.site-footer .cols{grid-template-columns:1fr}}

.dots{list-style:none;padding:0}

/* checkboxes inside .field must not inherit the text-input box (padding + 48px min-height) */
.field input[type=checkbox],.toggle input,.perm input,.field.check input{width:22px;height:22px;min-height:0;padding:0;border:3px solid var(--ash-lo);flex:none}
.field input[type=checkbox]:checked,.toggle input:checked,.perm input:checked,.field.check input:checked{border-color:var(--voltage)}
.col-toggles .toggle{min-height:36px}
/* ---------- filter chips (tips + recipes pages) ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px 10px}
.chip{font:600 16px/1 var(--display);text-transform:uppercase;letter-spacing:.06em;padding:10px 14px 11px;background:var(--void);border:2px solid var(--ash-lo);color:var(--ash);cursor:var(--cursor-cross);clip-path:polygon(4px 0,calc(100% - 4px) 0,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0 calc(100% - 4px),0 4px)}
.chip:hover{color:var(--bone);border-color:var(--ash)}
.chip[aria-pressed="true"]{background:var(--voltage);color:var(--void);border-color:var(--voltage)}
.chip:focus-visible{outline:3px solid var(--plasma);outline-offset:3px}
.rc-tools{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--sp-3);padding:var(--sp-3)}
.rc-tools .field.wide{grid-column:1/-1}
.rc-tools .field{margin:0;align-content:start}
.rc-tools input[type=search]{appearance:none;-webkit-appearance:none}
.rc-tools input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none}
@media (width<=700px){.rc-tools{grid-template-columns:1fr}}
.recipes .rbody .badge{margin-bottom:10px}
.tips [data-tip] h2{font-size:clamp(25px,2.4vw,31px);margin:12px 0 8px}
.recipes [data-recipe] h2{font-size:var(--s2);margin-bottom:6px}
/* ---------- live on Kick popup (home) ---------- */
dialog.modal.live{max-width:min(94vw,980px)}
dialog.modal.live .box{padding:var(--sp-3) var(--sp-3) var(--sp-4)}
dialog.modal.live h2{font-size:clamp(25px,2.6vw,34px);margin:8px 0 var(--sp-3);padding-right:56px}
.live-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:15px}
.badge.live::before{content:'';width:10px;height:10px;background:var(--alert);animation:pulse 1s steps(2) infinite}
.live-frame{margin:0}
@media (width<=640px){dialog.modal.live .box{padding:var(--sp-2) var(--sp-2) var(--sp-3)}}

/* ---------- v2: neon sign accents ---------- */
.section-head h1::after{content:'';display:block;width:64px;height:4px;margin-top:14px;background:linear-gradient(90deg,var(--magenta),var(--voltage) 60%,transparent);box-shadow:0 0 12px rgba(255,61,212,.6)}
.badge.members{background:var(--royal);color:var(--bone)}
.badge.live{background:var(--plasma)}
.lb-tabs .btn[aria-selected="true"]{--fill:var(--magenta);--hi:#FF9AE8;--lo:#9C1F84;--bd:#5A1150}
.site-header{border-bottom-color:var(--ash-deep);box-shadow:0 3px 0 rgba(255,61,212,.18)}
.site-footer{background:rgba(17,22,36,.92)}