/* ============================================================
   THE ARCANUM — cyber-fantasy design system
   "Ancient arcane library meets neon-drenched Night City forge."
   Dark-only. Deep emerald + electric blue. Storm + circuitry.
   Vanilla CSS, no build step. Mobile-first.
   ============================================================ */

:root{
  /* --- the dark --- */
  --void:#05070a;
  --abyss:#080b11;
  --gunmetal:#10151c;
  --gunmetal2:#171e27;
  --steel:#222c37;
  --steel2:#2c3947;

  /* --- the charge --- */
  --emerald:#15c98a;
  --emerald-dim:#0e8f63;
  --emerald-glow:#3df0b4;
  --volt:#2aa6ff;
  --volt-glow:#79d4ff;
  --bronze:#c9a24b;            /* Ravenclaw bronze accent */
  --rune:#7c6cff;             /* faint arcane violet */

  /* --- ink --- */
  --text:#e2eaf1;
  --text2:#94a6b6;
  --text3:#566472;
  --line:rgba(42,166,255,0.14);
  --line-em:rgba(21,201,138,0.20);

  /* --- type --- */
  --cyber:'Chakra Petch', 'Segoe UI', sans-serif;   /* sharp headings/labels */
  --ui:'Inter', system-ui, sans-serif;              /* body/ui */
  --lore:'Cormorant Garamond', Georgia, serif;      /* elegant flavor */
  --mono:'JetBrains Mono', ui-monospace, monospace; /* labels/timestamps */

  --maxw:1180px;
  --radius:10px;
  --glow-em:0 0 22px rgba(21,201,138,0.28);
  --glow-volt:0 0 22px rgba(42,166,255,0.30);
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{
  background:var(--void);
  color:var(--text);
  font-family:var(--ui);
  font-size:17px; line-height:1.7;
  min-height:100vh; overflow-x:hidden;
  position:relative;
}

/* the storm canvas + circuit grid live behind everything */
#storm{position:fixed; inset:0; z-index:0; pointer-events:none;}
body::before{ /* circuit-trace grid */
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.5;
  background:
    linear-gradient(rgba(21,201,138,0.035) 1px, transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg, rgba(42,166,255,0.035) 1px, transparent 1px) 0 0/64px 64px,
    radial-gradient(circle at 50% 0%, rgba(42,166,255,0.06), transparent 60%);
  mask-image:radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 92%);
}
/* lightning flash overlay (toggled by storm.js) */
#flash{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:radial-gradient(140% 100% at 50% -10%, rgba(140,210,255,0.55), rgba(120,255,210,0.10) 35%, transparent 60%);
  transition:opacity .5s ease;}
#flash.hit{opacity:1; transition:opacity .06s ease;}

.page{position:relative; z-index:2;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 1.4rem;}
a{color:var(--volt-glow); text-decoration:none; transition:color .18s;}
a:hover{color:var(--emerald-glow);}
img{max-width:100%; display:block;}
::selection{background:rgba(21,201,138,0.30); color:#fff;}
::-webkit-scrollbar{width:11px; height:11px;}
::-webkit-scrollbar-track{background:var(--abyss);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--emerald-dim), var(--volt)); border-radius:6px; border:2px solid var(--abyss);}

/* ============================================================
   NAVBAR
   ============================================================ */
.navbar{position:sticky; top:0; z-index:100;
  background:linear-gradient(180deg, rgba(5,7,10,0.96), rgba(5,7,10,0.74));
  backdrop-filter:blur(11px); border-bottom:1px solid var(--line);}
.navbar::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, transparent, var(--emerald) 30%, var(--volt) 70%, transparent); opacity:.5;}
.nav-inner{max-width:var(--maxw); margin:0 auto; padding:.6rem 1.4rem; display:flex; align-items:center; gap:1.4rem;}
.logo{display:flex; align-items:center; gap:.55rem; font-family:var(--cyber); font-weight:700; letter-spacing:.04em; color:var(--text); font-size:1.04rem; white-space:nowrap;}
.logo .alembic{display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:7px;
  background:radial-gradient(circle at 38% 30%, var(--gunmetal2), #0a0d12); border:1px solid var(--line-em);
  color:var(--emerald-glow); font-size:1.1rem; box-shadow:inset 0 0 12px rgba(21,201,138,0.25), var(--glow-em);}
.logo b{color:var(--emerald-glow); font-weight:700;}
.logo span.sub{display:block; font-family:var(--mono); font-size:.54rem; letter-spacing:.22em; color:var(--text3); text-transform:uppercase; margin-top:-2px;}
.nav-links{display:flex; align-items:center; gap:.3rem; margin-left:auto;}
.nav-links a, .nav-links .navbtn{font-family:var(--cyber); font-weight:500; font-size:.82rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--text2); padding:.5rem .8rem; border-radius:6px; background:none; border:none; cursor:pointer; transition:.18s; white-space:nowrap;}
.nav-links a:hover, .nav-links .navbtn:hover, .nav-links a.active{color:var(--text); background:rgba(42,166,255,0.08); box-shadow:inset 0 0 0 1px var(--line);}
.nav-links a.active{color:var(--emerald-glow);}

/* games dropdown */
.has-dd{position:relative;}
.dd{position:absolute; top:calc(100% + 8px); left:0; min-width:230px; background:var(--gunmetal); border:1px solid var(--steel);
  border-radius:var(--radius); padding:.5rem; box-shadow:0 24px 60px -20px #000, var(--glow-volt); opacity:0; visibility:hidden; transform:translateY(-6px); transition:.18s; z-index:120;}
.has-dd:hover .dd, .has-dd:focus-within .dd{opacity:1; visibility:visible; transform:translateY(0);}
.dd-head{font-family:var(--mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--text3); padding:.4rem .6rem .2rem;}
.dd a{display:flex; justify-content:space-between; gap:1rem; align-items:center; text-transform:none; letter-spacing:0;
  font-family:var(--ui); font-size:.85rem; padding:.4rem .6rem; color:var(--text2); border-radius:6px;}
.dd a:hover{background:rgba(21,201,138,0.10); color:var(--emerald-glow);}
.dd a .n{font-family:var(--mono); font-size:.62rem; color:var(--text3);}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--line); color:var(--text2);
  font-family:var(--cyber); font-size:.78rem; letter-spacing:.08em; padding:.4rem .7rem; border-radius:6px; cursor:pointer; text-transform:uppercase;}

@media (max-width:860px){
  .nav-toggle{display:block;}
  .nav-links{display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; align-items:stretch; gap:.1rem;
    background:rgba(8,11,17,0.99); border-bottom:1px solid var(--steel); padding:.6rem 1rem 1rem;}
  .nav-links.open{display:flex;}
  .nav-inner{position:relative; flex-wrap:wrap;}
  .nav-links a, .nav-links .navbtn{padding:.7rem .6rem; text-align:left;}
  .dd{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:none; background:rgba(42,166,255,0.04); padding:.2rem .4rem .6rem 1rem; display:none;}
  .has-dd.open .dd{display:block;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; text-align:center; padding:6rem 1.4rem 3.4rem; overflow:hidden;}
.hero-glyphs{position:absolute; inset:0; pointer-events:none; z-index:0;}
.hero-glyphs span{position:absolute; left:var(--x); top:var(--y); color:var(--emerald); opacity:.10; font-size:2.4rem;
  animation:drift var(--t,22s) ease-in-out var(--d,0s) infinite;}
@keyframes drift{0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-26px) rotate(12deg)}}
.hero .inner{position:relative; z-index:2;}
.sigil{display:inline-grid; place-items:center; width:74px; height:74px; margin:0 auto 1.4rem; border-radius:16px;
  background:radial-gradient(circle at 38% 30%, var(--gunmetal2), #06090e); border:1px solid var(--line-em);
  color:var(--emerald-glow); font-size:2.1rem; box-shadow:inset 0 0 20px rgba(21,201,138,0.25), 0 0 40px rgba(21,201,138,0.22);}
.eyebrow{display:block; font-family:var(--mono); letter-spacing:.34em; text-transform:uppercase; font-size:.66rem; color:var(--volt-glow); margin-bottom:1rem;}
.hero h1{font-family:var(--cyber); font-weight:700; font-size:clamp(2.6rem,9vw,6rem); line-height:.98; letter-spacing:.02em; text-transform:uppercase;
  background:linear-gradient(100deg, var(--emerald-glow) 18%, #eafff7 44%, var(--volt-glow) 78%); background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:sheen 9s ease-in-out infinite; position:relative; text-shadow:0 0 50px rgba(42,166,255,0.25);}
.hero h1[data-glitch]::before, .hero h1[data-glitch]::after{ /* glitch echoes (homepage only) */
  content:attr(data-glitch); position:absolute; inset:0; -webkit-text-fill-color:initial; background:none; opacity:0; pointer-events:none;}
.hero h1[data-glitch]::before{color:var(--volt); animation:glitch1 7s steps(1) infinite;}
.hero h1[data-glitch]::after{color:var(--emerald); animation:glitch2 7s steps(1) infinite;}
@keyframes sheen{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}
@keyframes glitch1{0%,96%,100%{opacity:0; transform:none}97%{opacity:.5; transform:translate(-3px,1px)}98%{opacity:0}}
@keyframes glitch2{0%,92%,100%{opacity:0; transform:none}93%{opacity:.45; transform:translate(3px,-1px)}94%{opacity:0}}
.tagline{font-family:var(--lore); font-style:italic; font-size:clamp(1.1rem,2.6vw,1.5rem); color:var(--text); margin-top:1.1rem; opacity:.92;}
.counts{display:inline-flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-top:1.4rem;}
.counts .pip{font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text2);
  border:1px solid var(--line); border-radius:30px; padding:.32rem .8rem; background:rgba(8,11,17,0.6);}
.counts .pip b{color:var(--emerald-glow);}

/* search */
.search-zone{max-width:560px; margin:2rem auto 0;}
.search-zone input{width:100%; font-family:var(--ui); font-size:1rem; color:var(--text); background:rgba(8,11,17,0.85);
  border:1px solid var(--steel); border-radius:30px; padding:.85rem 1.3rem; outline:none; transition:.2s;}
.search-zone input::placeholder{color:var(--text3);}
.search-zone input:focus{border-color:var(--emerald); box-shadow:var(--glow-em);}
#search-note{font-family:var(--mono); font-size:.66rem; letter-spacing:.08em; color:var(--text3); margin-top:.7rem; min-height:1em;}

/* ============================================================
   GENRE RAIL (crackle chips)
   ============================================================ */
.genre-rail{display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; margin:0 auto 1rem; max-width:900px;}
.genre-chip{position:relative; font-family:var(--cyber); font-weight:500; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text2); background:var(--gunmetal); border:1px solid var(--steel); border-radius:8px; padding:.5rem .9rem; cursor:pointer;
  display:flex; align-items:center; gap:.45rem; transition:.18s; overflow:hidden;}
.genre-chip .gi{color:var(--emerald); font-size:.95rem;}
.genre-chip:hover{color:#fff; border-color:var(--emerald); box-shadow:var(--glow-em); transform:translateY(-2px);}
.genre-chip:hover .gi{color:var(--emerald-glow);}
.genre-chip::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(121,212,255,0.5), transparent);
  transform:translateX(-130%); transition:none;}
.genre-chip:hover::after{animation:arc .5s ease;}
@keyframes arc{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

/* ============================================================
   SECTIONS + CARDS
   ============================================================ */
main{padding:2.4rem 0 4rem; position:relative; z-index:2;}
.section{margin:3rem 0;}
.section-label{font-family:var(--cyber); font-weight:600; letter-spacing:.16em; text-transform:uppercase; font-size:.92rem; color:var(--text);
  display:flex; align-items:center; gap:.8rem; margin-bottom:1.3rem;}
.section-label::before{content:"\25C8"; color:var(--emerald); font-size:.8rem;}
.section-label::after{content:""; flex:1; height:1px; background:linear-gradient(90deg, var(--line-em), transparent);}

.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:1.1rem;}
.featured-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:1.2rem;}

.card{position:relative; display:flex; flex-direction:column; background:linear-gradient(180deg, var(--gunmetal2), var(--gunmetal));
  border:1px solid var(--steel); border-top:2px solid var(--accent, var(--emerald)); border-radius:var(--radius);
  padding:1.2rem 1.25rem 1.1rem; overflow:hidden; transition:transform .2s, border-color .2s, box-shadow .2s;}
.card::before{content:""; position:absolute; top:0; right:0; width:60px; height:60px; pointer-events:none;
  background:radial-gradient(circle at 100% 0%, rgba(42,166,255,0.18), transparent 70%);}
.card::after{content:""; position:absolute; left:-60%; top:0; width:60%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(121,212,255,0.07), transparent); transform:skewX(-18deg); transition:left .5s;}
.card:hover{transform:translateY(-5px); border-color:var(--emerald); box-shadow:0 20px 50px -22px #000, var(--glow-em);}
.card:hover::after{left:130%;}
.card .thumb{margin:-1.2rem -1.25rem 1rem; height:158px; background-size:cover; background-position:center top;
  border-bottom:1px solid var(--steel); position:relative;}
.card .thumb::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,11,17,0) 35%, var(--gunmetal) 98%);}
.card.big .thumb{height:196px;}
.card:hover .thumb{filter:saturate(1.12) brightness(1.05);}
.card .ct{display:flex; align-items:flex-start; justify-content:space-between; gap:.8rem;}
.card h3{font-family:var(--cyber); font-weight:600; font-size:1.18rem; color:#fff; letter-spacing:.01em; line-height:1.2;}
.card .blurb{color:var(--text2); font-size:.9rem; margin:.55rem 0 .9rem; flex:1;}
.card .foot{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:auto;}
.card .tags{display:flex; flex-wrap:wrap; gap:.3rem;}
.card .tag{font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); border:1px solid var(--line); padding:.16rem .42rem; border-radius:4px;}
.card .go{font-family:var(--cyber); font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; color:var(--volt-glow); white-space:nowrap;}
.card.dim{opacity:.5;}
.card.dim:hover{opacity:.72;}

/* status badge */
.badge{font-family:var(--mono); font-size:.56rem; letter-spacing:.12em; text-transform:uppercase; padding:.22rem .5rem; border-radius:4px; white-space:nowrap;}
.badge.live{color:#04140d; background:var(--emerald); font-weight:600; box-shadow:var(--glow-em);}
.badge.building{color:var(--volt-glow); border:1px solid var(--volt); background:rgba(42,166,255,0.08);}
.badge.planned{color:var(--text3); border:1px solid var(--steel);}
.updated{font-family:var(--mono); font-size:.6rem; letter-spacing:.05em; color:var(--text3);}
.updated b{color:var(--text2); font-weight:500;}

.genre-block{margin-bottom:2.4rem;}
.genre-block h2{font-family:var(--cyber); font-weight:600; font-size:1.15rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text2);
  margin-bottom:1rem; display:flex; align-items:center; gap:.6rem;}
.genre-block h2 .gi{color:var(--emerald);}
.genre-block h2 .ct{font-family:var(--mono); font-size:.62rem; color:var(--text3); margin-left:auto;}

/* intro / lore blurb */
.lorebox{background:linear-gradient(135deg, rgba(21,201,138,0.05), rgba(42,166,255,0.04)); border:1px solid var(--line);
  border-left:3px solid var(--emerald); border-radius:var(--radius); padding:1.6rem 1.8rem;}
.lorebox p{font-family:var(--lore); font-size:1.18rem; line-height:1.65; color:var(--text);}
.lorebox p + p{margin-top:.8rem;}
.lorebox strong{color:var(--emerald-glow); font-weight:600;}

/* generic content blocks (about/forge/guide) */
.prose p{color:var(--text2); margin-bottom:1.05rem;}
.prose h2{font-family:var(--cyber); font-weight:600; font-size:clamp(1.4rem,3vw,2rem); color:#fff; letter-spacing:.02em; text-transform:uppercase; margin:2.2rem 0 .4rem;}
.prose h3{font-family:var(--cyber); font-weight:600; font-size:1.2rem; color:var(--text); margin:1.6rem 0 .4rem;}
.prose .rule{height:1px; width:90px; margin:.2rem 0 1.3rem; background:linear-gradient(90deg, var(--emerald), var(--volt), transparent);}
.prose strong{color:var(--text);}
.prose em{color:var(--volt-glow); font-style:italic;}
.lore{font-family:var(--lore); font-size:1.18rem; color:var(--text); font-style:italic;}
ul.list{list-style:none; margin:1rem 0;}
ul.list li{position:relative; padding-left:1.4rem; margin-bottom:.5rem; color:var(--text2);}
ul.list li::before{content:"\26A1"; position:absolute; left:0; top:.05rem; color:var(--volt); font-size:.8rem;}

.callout{background:rgba(21,201,138,0.05); border:1px solid var(--line-em); border-left:3px solid var(--emerald); border-radius:8px; padding:1.1rem 1.4rem; margin:1.4rem 0; color:var(--text2);}
.callout .label, .newbox .label{font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; display:block; margin-bottom:.4rem;}
.callout .label{color:var(--emerald-glow);} .callout strong{color:var(--emerald-glow);}
.newbox{background:rgba(42,166,255,0.06); border:1px solid var(--volt); border-left:3px solid var(--volt); border-radius:8px; padding:1.1rem 1.4rem; margin:1.4rem 0; color:var(--text2);}
.newbox .label{color:var(--volt-glow);} .newbox strong{color:var(--volt-glow);}

/* tables */
.table-wrap{overflow-x:auto; border:1px solid var(--steel); border-radius:8px; margin:1.3rem 0;}
table{width:100%; border-collapse:collapse; font-size:.92rem;}
th{font-family:var(--cyber); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--emerald-glow); text-align:left;
  padding:.7rem 1rem; background:rgba(21,201,138,0.06); border-bottom:1px solid var(--line-em); position:sticky; top:0;}
td{padding:.7rem 1rem; border-bottom:1px solid rgba(42,166,255,0.08); color:var(--text2); vertical-align:top;}
td:first-child{color:var(--text); font-weight:500;}
tr:hover td{background:rgba(42,166,255,0.04);}

/* ============================================================
   GUIDE PAGE: breadcrumbs, hero, layout, TOC, accordion, badges
   ============================================================ */
.breadcrumbs{font-family:var(--mono); font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text3); padding:1.1rem 0 0;}
.breadcrumbs a{color:var(--text2);} .breadcrumbs a:hover{color:var(--emerald-glow);}
.breadcrumbs span{color:var(--text3); margin:0 .45rem;}

.guide-hero{position:relative; border:1px solid var(--steel); border-radius:14px; overflow:hidden; margin:1rem 0 2rem;
  background:linear-gradient(120deg, #0a0f15, #0d141d 55%, #0a1018);}
.guide-hero .art{position:absolute; inset:0; background:
  radial-gradient(60% 120% at 80% 10%, rgba(42,166,255,0.22), transparent 60%),
  radial-gradient(70% 120% at 10% 90%, rgba(21,201,138,0.18), transparent 60%); opacity:.9;}
.guide-hero .art .ph{position:absolute; right:1rem; bottom:.6rem; font-family:var(--mono); font-size:.58rem; color:var(--text3); letter-spacing:.1em;}
.guide-hero .body{position:relative; z-index:2; padding:2.6rem 2rem;}
.guide-hero .kicker{font-family:var(--mono); font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--volt-glow);}
.guide-hero h1{font-family:var(--cyber); font-weight:700; font-size:clamp(2rem,5vw,3.4rem); text-transform:uppercase; letter-spacing:.02em; color:#fff; margin:.4rem 0; text-shadow:var(--glow-volt);}
.guide-hero .sub{font-family:var(--lore); font-style:italic; font-size:1.15rem; color:var(--text2); max-width:640px;}

.guide-layout{display:grid; grid-template-columns:230px 1fr; gap:2.2rem; align-items:start;}
.toc{position:sticky; top:78px; border:1px solid var(--steel); border-radius:var(--radius); background:var(--gunmetal); padding:1rem;}
.toc .h{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--text3); margin-bottom:.6rem;}
.toc a{display:block; font-family:var(--cyber); font-size:.82rem; letter-spacing:.02em; color:var(--text2); padding:.4rem .55rem; border-radius:6px; border-left:2px solid transparent;}
.toc a:hover{color:var(--emerald-glow); background:rgba(21,201,138,0.06);}
.toc a.active{color:var(--emerald-glow); border-left-color:var(--emerald); background:rgba(21,201,138,0.08);}
@media (max-width:900px){ .guide-layout{grid-template-columns:1fr;} .toc{position:static; display:flex; flex-wrap:wrap; gap:.3rem;} .toc .h{width:100%;} }

/* unlocked badge row */
.badge-row{display:flex; flex-wrap:wrap; gap:.6rem; margin:1.2rem 0 2rem;}
.ubadge{font-family:var(--cyber); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; color:var(--text2);
  display:flex; align-items:center; gap:.45rem; border:1px solid var(--steel); border-radius:30px; padding:.4rem .85rem; background:var(--gunmetal); transition:.18s;}
.ubadge .dot{width:8px; height:8px; border-radius:50%; background:var(--emerald); box-shadow:var(--glow-em);}
.ubadge:hover{border-color:var(--emerald); color:#fff;}

/* accordion (native details) */
.acc{border:1px solid var(--steel); border-radius:8px; margin:.9rem 0; background:var(--gunmetal); overflow:hidden;}
.acc>summary{cursor:pointer; list-style:none; padding:.95rem 1.2rem; font-family:var(--cyber); font-weight:500; font-size:.98rem; letter-spacing:.02em;
  color:var(--text); display:flex; align-items:center; gap:.6rem;}
.acc>summary::-webkit-details-marker{display:none;}
.acc>summary::before{content:"\25B8"; color:var(--emerald); transition:transform .2s;}
.acc[open]>summary::before{transform:rotate(90deg);}
.acc>summary::after{content:"Expand"; margin-left:auto; font-family:var(--mono); font-size:.6rem; letter-spacing:.08em; color:var(--text3); text-transform:uppercase;}
.acc[open]>summary::after{content:"Collapse";}
.acc[open]>summary{border-bottom:1px solid var(--line);}
.acc .acc-body{padding:1rem 1.2rem 1.2rem; color:var(--text2);}
.acc .acc-body :last-child{margin-bottom:0;}

/* mastery loadout cards */
.loadouts{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px,1fr)); gap:1rem; margin:1.2rem 0;}
.loadout{border:1px solid var(--steel); border-top:2px solid var(--volt); border-radius:8px; background:var(--gunmetal); padding:1.1rem 1.2rem;}
.loadout h4{font-family:var(--cyber); font-weight:600; font-size:1rem; color:#fff; margin-bottom:.5rem; text-transform:uppercase; letter-spacing:.03em;}
.loadout ul{list-style:none;} .loadout li{font-size:.86rem; color:var(--text2); padding:.2rem 0; border-bottom:1px dashed rgba(42,166,255,0.1);}
.loadout li:last-child{border:none;} .loadout li b{color:var(--emerald-glow);}

.last-forged{font-family:var(--mono); font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--text3); margin-top:2.2rem;
  border-top:1px solid var(--line); padding-top:1rem; display:flex; align-items:center; gap:.5rem;}
.last-forged .spark{color:var(--emerald);}

.pager{display:flex; justify-content:space-between; gap:1rem; margin-top:2.4rem; flex-wrap:wrap;}
.pager a{font-family:var(--cyber); font-size:.82rem; letter-spacing:.03em; color:var(--text2); border:1px solid var(--steel); padding:.55rem .9rem; border-radius:6px; transition:.18s;}
.pager a:hover{color:var(--emerald-glow); border-color:var(--emerald); box-shadow:var(--glow-em);}

/* ============================================================
   FOOTER (Ravenclaw crest)
   ============================================================ */
.footer{position:relative; z-index:2; border-top:1px solid var(--line); margin-top:3rem; padding:3rem 1.4rem 2.4rem;
  background:linear-gradient(180deg, transparent, rgba(8,11,17,0.7));}
.footer-inner{max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem;}
.footer .crest{width:54px; height:64px; margin-bottom:.8rem;}
.footer h4{font-family:var(--cyber); font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:.84rem; color:var(--text); margin-bottom:.7rem;}
.footer p{font-size:.84rem; color:var(--text3);}
.footer .sig{font-family:var(--lore); font-style:italic; font-size:1.05rem; color:var(--text2); margin-top:.6rem;}
.footer .links{display:flex; flex-direction:column; gap:.4rem;}
.footer .links a{font-family:var(--cyber); font-size:.8rem; letter-spacing:.03em; color:var(--text2);}
.footer .links a:hover{color:var(--emerald-glow);}
.footer .fine{grid-column:1/-1; border-top:1px solid var(--line); padding-top:1.2rem; margin-top:1rem; font-family:var(--mono); font-size:.62rem; letter-spacing:.04em; color:var(--text3);}
@media (max-width:760px){ .footer-inner{grid-template-columns:1fr;} }

/* totop */
.totop{position:fixed; right:18px; bottom:18px; z-index:90; width:42px; height:42px; border-radius:9px; cursor:pointer;
  background:var(--gunmetal2); border:1px solid var(--line-em); color:var(--emerald-glow); font-size:1rem;
  opacity:0; pointer-events:none; transition:.2s; box-shadow:var(--glow-em);}
.totop.show{opacity:1; pointer-events:auto;}
.totop:hover{border-color:var(--emerald); transform:translateY(-2px);}

/* reveal on scroll */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease;}
.reveal.in{opacity:1; transform:none;}

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