/* Layout: one continuous scroll of full-bleed zone panels; a fixed FX canvas floats above everything; content sits in a 1180px column. */
:root{
  --bg:#070b12;        /* abyss */
  --bg-2:#0e1626;      /* deep slate blue */
  --ink:#eef1f7;       /* parchment white */
  --ink-2:#aeb8cc;     /* muted */
  --gold:#f0c35a;      /* chronicle gold */
  --arc:#5ee0ff;       /* arcane cyan */
  --ember:#ff6a3d;     /* ember orange */
  --tide:#36d6b5;      /* siren teal */
  --violet:#b58cff;    /* enchanter violet */
  --font-display:"Cinzel",Georgia,"Times New Roman",serif;
  --font-body:"Spectral",Georgia,serif;
  --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --col:1180px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.6;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--bg)}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:700;line-height:1.08;margin:0;text-wrap:balance;letter-spacing:.01em}
h1{font-size:clamp(2.6rem,7.2vw,6.2rem);font-weight:900}
h2{font-size:clamp(2rem,4.6vw,3.6rem)}
h3{font-size:1.35rem}
p{margin:0}
.eyebrow{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.wrap{max-width:var(--col);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--arc);outline-offset:3px}

/* ---------- FX canvas + cursor light ---------- */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
#cursor{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(circle,rgba(94,224,255,.14),rgba(94,224,255,.05) 35%,transparent 70%);mix-blend-mode:screen;transition:opacity .4s;opacity:0}

/* ---------- Nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:55;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:linear-gradient(180deg,rgba(7,11,18,.85),rgba(7,11,18,.55));border-bottom:1px solid rgba(240,195,90,.15)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:66px}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;font-family:var(--font-display);font-weight:700;letter-spacing:.08em;font-size:.95rem}
.sigil{width:34px;height:34px;border-radius:50%;background:conic-gradient(from 200deg,var(--gold),var(--ember),var(--arc),var(--gold));box-shadow:0 0 18px rgba(240,195,90,.6);position:relative}
.sigil::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--bg)}
.links{display:flex;gap:1.6rem;font-family:var(--font-mono);font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.links a{text-decoration:none;color:var(--ink-2);position:relative}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;background:var(--gold);transition:right .3s}
.links a:hover{color:var(--ink)}.links a:hover::after{right:0}
@media(max-width:820px){.links{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;padding:.9rem 1.6rem;border-radius:4px;text-decoration:none;font-family:var(--font-display);font-weight:700;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;position:relative;overflow:hidden}
.btn-gold{background:linear-gradient(135deg,#f6d57a,#d9a53a);color:#1a1205;box-shadow:0 0 0 1px rgba(240,195,90,.5),0 10px 40px rgba(240,195,90,.28)}
.btn-gold:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(240,195,90,.8),0 16px 60px rgba(240,195,90,.45)}
.btn-ghost{border-color:rgba(238,241,247,.28);color:var(--ink);background:rgba(7,11,18,.35);backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--arc);box-shadow:0 0 30px rgba(94,224,255,.25)}
.btn-steam{background:#0b1522;color:var(--ink);border-color:rgba(94,224,255,.5);box-shadow:0 0 0 1px rgba(94,224,255,.2),0 10px 40px rgba(94,224,255,.2)}
.btn-steam:hover{box-shadow:0 0 0 1px rgba(94,224,255,.7),0 16px 60px rgba(94,224,255,.4);transform:translateY(-2px)}
.btn .shine{position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s}
.btn:hover .shine{transform:translateX(120%)}

/* ---------- Glow cards ---------- */
.glow{position:relative;border-radius:10px;background:linear-gradient(160deg,rgba(14,22,38,.86),rgba(7,11,18,.86));border:1px solid rgba(238,241,247,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.glow::before{content:"";position:absolute;inset:-1px;border-radius:11px;padding:1px;background:linear-gradient(135deg,var(--c1,var(--gold)),transparent 40%,transparent 60%,var(--c2,var(--arc)));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.55;transition:opacity .3s}
.glow::after{content:"";position:absolute;inset:0;border-radius:10px;background:radial-gradient(600px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.08),transparent 40%);opacity:0;transition:opacity .3s;pointer-events:none}
.glow:hover::before{opacity:1}.glow:hover::after{opacity:1}
.glow{box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 0 var(--c1,var(--gold))}
.glow:hover{box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 60px -10px var(--c1,var(--gold))}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:92vh;display:grid;align-items:end;overflow:hidden;isolation:isolate}
.layer{position:absolute;inset:-12% -6%;background-size:cover;background-position:center;will-change:transform}
.layer img{width:100%;height:100%;object-fit:cover;object-position:center 60%}
.hero .l-bg{z-index:-3}
.hero .l-mist{z-index:-2;background:
  radial-gradient(60% 40% at 20% 80%,rgba(240,195,90,.25),transparent 60%),
  radial-gradient(50% 35% at 80% 90%,rgba(94,224,255,.18),transparent 60%);mix-blend-mode:screen;opacity:.9}
.hero .l-vignette{z-index:-1;background:linear-gradient(180deg,rgba(7,11,18,.55) 0%,rgba(7,11,18,.05) 35%,rgba(7,11,18,.35) 70%,var(--bg) 100%)}
.hero .wrap{position:relative;padding-block:12vh 9vh}
.hero-copy{max-width:760px;display:grid;gap:1.4rem}
.hero h1 .em{display:block;background:linear-gradient(90deg,#fff2c9,var(--gold) 50%,#ffb36a);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 28px rgba(240,195,90,.45))}
.hero p.lead{font-size:clamp(1.05rem,1.6vw,1.35rem);color:var(--ink-2);max-width:60ch;font-weight:300}
.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.hero-meta{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);display:flex;gap:1.6rem;flex-wrap:wrap}
.hero-meta b{color:var(--arc);font-weight:500}
.scroll-hint{position:absolute;right:max(24px,env(safe-area-inset-right,0px));bottom:28px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2);writing-mode:vertical-rl;display:flex;gap:.8rem;align-items:center}
.scroll-hint i{width:1px;height:70px;background:linear-gradient(var(--gold),transparent);animation:drip 2s infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media(max-width:600px){.scroll-hint{display:none}}

/* ---------- Section plumbing ---------- */
section{position:relative}
.sec-head{display:grid;gap:.8rem;max-width:720px}
.sec-head p{color:var(--ink-2);font-weight:300;font-size:1.1rem}
.reveal{opacity:1;transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal{opacity:.001;transform:translateY(28px)}
.js .reveal.in{opacity:1;transform:none}

/* ---------- Zones: full-bleed parallax panels ---------- */
.zone{min-height:84vh;display:grid;align-items:center;overflow:hidden;isolation:isolate;border-top:1px solid rgba(240,195,90,.12)}
.zone .l-bg{z-index:-2;filter:saturate(1.15)}
.zone .l-tint{z-index:-1;background:linear-gradient(90deg,rgba(7,11,18,.88) 0%,rgba(7,11,18,.55) 45%,rgba(7,11,18,.15) 100%)}
.zone.flip .l-tint{background:linear-gradient(270deg,rgba(7,11,18,.88) 0%,rgba(7,11,18,.55) 45%,rgba(7,11,18,.15) 100%)}
.zone .wrap{padding-block:10vh;display:grid}
.zone.flip .wrap{justify-content:end}
.zone-card{max-width:560px;padding:2.2rem;display:grid;gap:1.1rem}
.zone-card h2{font-size:clamp(2.2rem,5vw,4rem);text-shadow:0 0 40px var(--c1)}
.zone-card .lvl{font-family:var(--font-mono);font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--c1)}
.zone-card p{color:var(--ink-2)}
.tags{display:flex;flex-wrap:wrap;gap:.5rem}
.tag{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.08em;padding:.35rem .7rem;border-radius:999px;border:1px solid rgba(238,241,247,.18);color:var(--ink-2);background:rgba(7,11,18,.5)}
.tag.hot{border-color:var(--c1);color:var(--c1);box-shadow:0 0 14px -2px var(--c1)}
.zone-name{position:absolute;left:0;right:0;bottom:-.1em;font-family:var(--font-display);font-weight:900;font-size:clamp(5rem,18vw,16rem);line-height:1;color:transparent;-webkit-text-stroke:1px rgba(238,241,247,.09);pointer-events:none;white-space:nowrap;letter-spacing:.04em;z-index:-1;text-align:center}

/* ---------- Classes ---------- */
.classes{padding-block:8rem 6rem;background:radial-gradient(1200px 500px at 50% 0%,rgba(181,140,255,.12),transparent 60%)}
.classes .wrap{display:grid;gap:3rem}
.class-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:2rem;align-items:center}
@media(max-width:900px){.class-stage{grid-template-columns:1fr}}
.mage{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10;max-width:100%;background:#0b1522;box-shadow:0 30px 90px rgba(0,0,0,.6)}
.mage img{width:100%;height:100%;object-fit:cover}
.mage .cap{position:absolute;left:1rem;bottom:1rem;font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--arc);background:rgba(7,11,18,.7);padding:.4rem .7rem;border-radius:4px}
.class-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1.2rem}
.cls{padding:0;overflow:hidden;cursor:pointer;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.cls .art{aspect-ratio:3/4;overflow:hidden;position:relative;max-width:100%}
.cls .art img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.cls:hover .art img{transform:scale(1.08)}
.cls .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(7,11,18,.95) 100%)}
.cls .body{position:relative;padding:1.1rem 1.2rem 1.3rem;display:grid;gap:.35rem;margin-top:-4.5rem}
.cls .role{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--c1)}
.cls p{font-size:.95rem;color:var(--ink-2)}
.cls.hit{animation:hit .6s}
@keyframes hit{0%{box-shadow:0 0 0 0 var(--c1)}40%{box-shadow:0 0 90px 10px var(--c1)}100%{box-shadow:0 20px 60px rgba(0,0,0,.5)}}

/* ---------- Fairies + Siren ---------- */
.spirits{padding-block:6rem 7rem;overflow:hidden;position:relative;background:linear-gradient(180deg,var(--bg),#071a14 50%,var(--bg))}
.spirits .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:center}
@media(max-width:900px){.spirits .wrap{grid-template-columns:1fr}}
.fairy-field{position:relative;aspect-ratio:1;max-width:100%;border-radius:50%;overflow:visible}
.fairy-field .orb{position:absolute;inset:8%;border-radius:50%;overflow:hidden;box-shadow:0 0 120px rgba(190,255,150,.35),inset 0 0 60px rgba(190,255,150,.3);animation:breathe 5s ease-in-out infinite}
.fairy-field .orb img{width:100%;height:100%;object-fit:cover}
@keyframes breathe{0%,100%{transform:scale(1);box-shadow:0 0 120px rgba(190,255,150,.35)}50%{transform:scale(1.03);box-shadow:0 0 170px rgba(190,255,150,.6)}}
.mote{position:absolute;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff,rgba(190,255,150,.9) 40%,transparent 70%);filter:blur(.5px);animation:float var(--d,8s) ease-in-out infinite;left:var(--x);top:var(--y);opacity:.9}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(18px,-26px) scale(1.4)}66%{transform:translate(-14px,12px) scale(.8)}}

.siren{min-height:90vh;display:grid;align-items:center;overflow:hidden;isolation:isolate}
.siren .l-bg{z-index:-2}
.siren .l-tint{z-index:-1;background:radial-gradient(70% 90% at 30% 50%,rgba(7,11,18,.0),rgba(7,11,18,.85) 70%),linear-gradient(180deg,rgba(7,11,18,.6),transparent 30%,transparent 70%,var(--bg))}
.siren .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:3rem;align-items:center;padding-block:8vh}
@media(max-width:900px){.siren .wrap{grid-template-columns:1fr}}
.siren-frame{position:relative;max-width:420px;aspect-ratio:3/4;border-radius:200px 200px 14px 14px;overflow:hidden;border:1px solid rgba(54,214,181,.35);box-shadow:0 0 0 1px rgba(54,214,181,.15),0 40px 120px rgba(0,0,0,.7),0 0 120px -20px var(--tide);transform-style:preserve-3d;transition:transform .2s ease-out}
.siren-frame img{width:100%;height:100%;object-fit:cover}
.siren-frame::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 60% at 50% 30%,transparent,rgba(7,11,18,.7));pointer-events:none}
.drain{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 30%,rgba(54,214,181,.0) 60%);transition:background .5s}
.siren:hover .drain{background:radial-gradient(circle at 50% 50%,transparent 20%,rgba(54,214,181,.18) 60%,rgba(7,11,18,.0))}
.vitals{display:grid;gap:.6rem;margin-top:1.4rem;max-width:420px}
.vital{display:grid;grid-template-columns:90px 1fr;gap:.8rem;align-items:center;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.bar{height:8px;border-radius:999px;background:rgba(238,241,247,.1);overflow:hidden}
.bar i{display:block;height:100%;width:var(--w,100%);background:linear-gradient(90deg,var(--c,var(--ember)),#fff);box-shadow:0 0 14px var(--c,var(--ember));transition:width 1.2s cubic-bezier(.2,.7,.2,1)}
.siren:hover .bar i{width:calc(var(--w) * .55)}

/* ---------- Beta ---------- */
.beta{padding-block:8rem;background:radial-gradient(900px 500px at 15% 20%,rgba(94,224,255,.12),transparent 60%),radial-gradient(900px 500px at 85% 80%,rgba(240,195,90,.12),transparent 60%)}
.beta .wrap{display:grid;grid-template-columns:1fr 1fr;gap:2.4rem;align-items:start}
@media(max-width:900px){.beta .wrap{grid-template-columns:1fr}}
.beta-card{padding:2.2rem;display:grid;gap:1.2rem;--c1:var(--arc);--c2:var(--gold)}
.status{display:flex;flex-wrap:wrap;gap:.5rem}
.pill{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.4rem .8rem;border-radius:999px;border:1px solid rgba(238,241,247,.15);color:var(--ink-2);position:relative}
.pill.on{border-color:var(--arc);color:var(--arc);box-shadow:0 0 16px -2px var(--arc)}
.pill.on::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--arc);margin-right:.5rem;box-shadow:0 0 8px var(--arc);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.rules{display:grid;gap:.8rem;list-style:none;padding:0;margin:0}
.rules li{display:grid;grid-template-columns:28px 1fr;gap:.8rem;align-items:start;color:var(--ink-2)}
.rules li b{color:var(--ink);font-weight:600}
.rules .rune{width:28px;height:28px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;font-family:var(--font-display);font-size:.8rem;color:var(--gold);box-shadow:0 0 12px -2px var(--gold)}
.form{display:grid;gap:.9rem}
.field{display:grid;gap:.35rem}
.field label{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2)}
.field input,.field select,.field textarea{width:100%;min-width:0;font:inherit;font-size:1rem;color:var(--ink);background:rgba(7,11,18,.6);border:1px solid rgba(238,241,247,.14);border-radius:6px;padding:.75rem .9rem;transition:border-color .2s,box-shadow .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--arc);box-shadow:0 0 0 3px rgba(94,224,255,.15),0 0 24px -4px var(--arc)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:520px){.form .row{grid-template-columns:1fr}}
.notice{font-size:.9rem;color:var(--ink-2);border-left:2px solid var(--gold);padding-left:.9rem}

/* ---------- FAQ ---------- */
.faq{padding-block:6rem 7rem}
.faq .wrap{display:grid;grid-template-columns:1fr 1.4fr;gap:3rem}
@media(max-width:900px){.faq .wrap{grid-template-columns:1fr}}
.acc{display:grid;gap:.6rem}
details{border:1px solid rgba(238,241,247,.1);border-radius:8px;background:rgba(14,22,38,.5);transition:border-color .3s,box-shadow .3s}
details[open]{border-color:rgba(240,195,90,.5);box-shadow:0 0 40px -12px var(--gold)}
summary{cursor:pointer;list-style:none;padding:1rem 1.2rem;font-family:var(--font-display);font-weight:700;font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--font-mono);color:var(--gold);transition:transform .3s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 1.2rem 1.2rem;color:var(--ink-2)}

/* ---------- Community + footer ---------- */
.community{padding-block:6rem;background:radial-gradient(700px 400px at 50% 100%,rgba(255,106,61,.16),transparent 70%)}
.community .wrap{display:grid;gap:2rem}
.com-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.2rem}
.com{padding:1.6rem;display:grid;gap:.6rem;--c1:var(--ember);--c2:var(--gold)}
.com h3{font-size:1.1rem}
.com p{color:var(--ink-2);font-size:.95rem}
footer{border-top:1px solid rgba(240,195,90,.15);padding-block:2.5rem;font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;color:var(--ink-2)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
footer b{color:var(--gold);font-weight:500}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .reveal{opacity:1;transform:none}
  #fx,#cursor{display:none}
}

.skip{position:absolute;top:-100px;left:1rem;z-index:100;background:var(--arc);color:#070b12;padding:.5rem 1rem}.skip:focus{top:.4rem}.menu-toggle{display:none;background:#0e1626;color:var(--ink);border:1px solid var(--gold);padding:.4rem .75rem;border-radius:4px;cursor:pointer}.beta-fields{border:0;padding:0;margin:0;min-width:0;display:grid;gap:.9rem;opacity:.7}#steamBtn[aria-disabled=true]{opacity:.65;pointer-events:none;cursor:not-allowed}@media(max-width:820px){.menu-toggle{display:block;order:3}.nav .btn{margin-left:auto}.links.open{display:flex;position:absolute;top:66px;left:0;right:0;background:rgba(7,11,18,.98);border-bottom:1px solid var(--gold);padding:1.2rem;flex-direction:column;gap:1rem;z-index:60}}@media(max-width:500px){.nav .brand{font-size:.68rem}.nav .btn{font-size:.6rem!important;padding:.5rem!important}.sigil{width:26px;height:26px}.zone-card{padding:1.25rem}.beta-card{padding:1.2rem}}@media(hover:none){#cursor{display:none}}

/* <picture> must fill the cinematic frame, not shrink to intrinsic inline sizing. */
.layer picture,.mage picture,.cls .art picture,.fairy-field .orb picture,.siren-frame picture{display:block;width:100%;height:100%}
.layer picture img,.mage picture img,.cls .art picture img,.fairy-field .orb picture img,.siren-frame picture img{width:100%;height:100%;object-fit:cover}
/* Keep visible focus on dark artwork and avoid hover artifacts on touch devices. */
@media (hover:none){.cls:hover{transform:none!important}}

/* Canonical 12-class roster: the four portraits above plus these eight entries. */
.all-classes{margin-top:3.5rem;padding-top:2.6rem;border-top:1px solid rgba(240,195,90,.24);display:grid;gap:1.6rem}
.roster-head{display:flex;align-items:end;justify-content:space-between;gap:1.25rem;flex-wrap:wrap}
.roster-head h3{font-size:clamp(1.6rem,3vw,2.15rem);margin-top:.45rem}
.roster-count,.roster-foot{font-family:var(--font-mono);font-size:.72rem;line-height:1.8;color:var(--ink-2);letter-spacing:.04em}
.roster-foot strong{color:var(--gold);font-weight:500}
.roster-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.roster-entry{border:1px solid rgba(238,241,247,.13);background:linear-gradient(145deg,rgba(14,22,38,.86),rgba(7,11,18,.7));border-radius:8px;padding:1.05rem;display:flex;align-items:center;gap:.9rem;min-height:88px;transition:border-color .25s,box-shadow .25s}
.roster-entry:hover{border-color:var(--c1);box-shadow:0 0 32px -20px var(--c1)}
.roster-entry div{display:grid;gap:.2rem;min-width:0}
.roster-entry strong{font-family:var(--font-display);font-size:.98rem;font-weight:700;line-height:1.25;color:var(--ink)}
.roster-entry div span{color:var(--ink-2);font-size:.81rem;line-height:1.3}
.roster-glyph{flex:0 0 32px;min-width:32px;height:32px;display:grid;place-items:center;font:500 .65rem var(--font-mono);color:var(--c1);border:1px solid var(--c1);border-radius:50%;box-shadow:0 0 14px -6px var(--c1)}
@media(max-width:1000px){.roster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.roster-grid{grid-template-columns:1fr}.roster-entry{min-height:72px}}