/* Hood Jesters — one dark arcade look shared by every page */
:root{
  --bg:#07060c; --panel:#100d1a; --edge:#2a2340; --ink:#efedf7; --dim:#9a93b3;
  --cyan:#19f0ff; --pink:#ff2bd6; --lime:#ccff00; --gold:#ffc83a;
  --display:"Silkscreen",ui-monospace,monospace; --body:"Chakra Petch",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);scroll-behavior:smooth}
body{margin:0;font-family:var(--body);font-size:16px;line-height:1.5;background:var(--bg);overflow-x:hidden}
[hidden]{display:none!important}
a{color:var(--cyan)}
img,video{display:block;max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding-inline:max(16px,env(safe-area-inset-left,0px))}
.disp{font-family:var(--display);letter-spacing:1px}
.dim{color:var(--dim)}

/* scanlines + grain over everything */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--edge)}
.nav .wrap{display:flex;align-items:center;gap:14px;min-height:56px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--display);font-size:15px;color:var(--ink);text-decoration:none;letter-spacing:1px}
.brand img{width:30px;height:30px;border-radius:6px;image-rendering:pixelated}
.nav nav{margin-left:auto;display:flex;gap:4px}
.nav nav a{font-family:var(--display);font-size:12px;color:var(--dim);text-decoration:none;padding:8px 10px;border-radius:6px;letter-spacing:1px}
.nav nav a:hover,.nav nav a[aria-current]{color:var(--ink);background:#ffffff0d}
@media (max-width:560px){.brand span{display:none}.nav nav a{padding:8px 7px;font-size:11px}}

/* glitch text: two offset copies sliced at random */
.glitch{position:relative;display:inline-block;text-shadow:-2px 0 var(--cyan),2px 0 var(--pink)}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;inset:0;pointer-events:none;opacity:0}
.glitch::before{color:var(--cyan);transform:translate(-4px,0)}
.glitch::after{color:var(--pink);transform:translate(4px,0)}
.glitch.hit::before{opacity:.9;clip-path:inset(var(--a,20%) 0 var(--b,50%) 0);transform:translate(var(--x,-6px),0)}
.glitch.hit::after{opacity:.9;clip-path:inset(var(--c,60%) 0 var(--d,10%) 0);transform:translate(calc(var(--x,-6px) * -1),0)}
.glitch.hit{transform:skewX(var(--k,0deg))}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--display);font-size:14px;letter-spacing:1px;color:#000;background:var(--lime);border:0;border-radius:8px;padding:12px 18px;min-height:46px;text-decoration:none;cursor:pointer;box-shadow:4px 4px 0 var(--pink)}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--pink)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--edge);box-shadow:none}
.btn:focus-visible,a:focus-visible,button:focus-visible{outline:3px solid #fff;outline-offset:3px}

.sec{padding:72px 0;border-top:1px solid var(--edge)}
.kick{font-family:var(--display);font-size:12px;letter-spacing:2px;color:var(--lime);margin:0 0 8px}
.h2{font-family:var(--display);font-size:clamp(26px,5vw,44px);line-height:1.1;margin:0 0 14px;text-wrap:balance}
.lede{color:var(--dim);max-width:62ch;margin:0 0 26px;font-size:17px}

/* clan bars (home widget + leaderboard) */
.lane{display:grid;grid-template-columns:5.2em 1fr 5em;align-items:center;gap:12px;font-family:var(--display);font-size:clamp(12px,2vw,18px)}
.lane+.lane{margin-top:10px}
.lane .nm{color:var(--c)}
.lane .tr{height:20px;border-radius:5px;background:#ffffff12;position:relative;overflow:hidden}
.lane .tr i{position:absolute;inset:0 auto 0 0;background:var(--c);box-shadow:0 0 18px var(--c);transition:width .6s}
.lane .tm{text-align:right;font-variant-numeric:tabular-nums}
.lane.lead .nm::after{content:" ♛";color:var(--gold)}

.foot{border-top:1px solid var(--edge);padding:34px 0 48px;color:var(--dim);font-size:14px}
.foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
.foot b{font-family:var(--display);font-weight:400;color:var(--ink);letter-spacing:1px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}