/* ============================================
   STÁRFYRE — Mitternachtsblau + Gold
   Königlich · Magisch · Mysteriös
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;800&family=Inter:wght@300;400;500&display=swap');

/* ── CSS Custom Properties ── */
:root {
  /* Midnight-Hintergründe */
  --bg:            #080b18;
  --bg-card:       #0d1226;
  --bg-card-hover: #111832;

  /* Gold-Palette — vivid gegen Blau */
  --gold-faint:        rgba(212,175,80,0.05);
  --gold-subtle:       rgba(212,175,80,0.10);
  --gold-dim:          rgba(212,175,80,0.16);
  --gold-border:       rgba(212,175,80,0.20);
  --gold-border-act:   rgba(230,195,100,0.48);
  --gold-mid:          #d4a543;
  --gold-text:         #dcc47a;
  --gold-bright:       #f0d060;
  --gold-muted:        rgba(220,185,100,0.58);
  --gold-note:         rgba(230,195,120,0.62);
  --gold-label:        rgba(210,180,100,0.52);

  /* Magische Akzentfarben */
  --purple-300: #c4b5fd;
  --purple-400: #a78bfa;
  --purple-500: #8b5cf6;
  --purple-600: #7c3aed;
  --purple-700: #6d28d9;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --red-400:    #f87171;
  --red-500:    #ef4444;
  --red-600:    #dc2626;

  /* Text — deutlich besserer Kontrast */
  --text-heading: #f0e0b0;
  --text-body:    #bfb095;
  --text-note:    rgba(230,200,140,0.65);
  --text-muted:   rgba(200,175,120,0.42);
  --text-link:    #d4a543;
  --text-secondary: #bfb095;  /* Alias für --text-body (Kompatibilität) */
  --text-primary:   #f0e0b0;  /* Alias für --text-heading */
  --border-card:    rgba(212,175,80,0.20); /* Alias für --gold-border */
  --border-subtle:  rgba(212,175,80,0.12);
  --border-active:  rgba(230,195,100,0.48); /* Alias für --gold-border-act */
  --bg-card-hover:  #111832;
  --border-orange: rgba(249,115,22,0.35);
  --radius-sm: 6px;  --radius-md: 10px;  --radius-lg: 16px;  --radius-xl: 24px;

  /* Glow / Schatten */
  --glow-gold:       0 0 24px rgba(212,175,80,0.16), 0 0 48px rgba(212,175,80,0.06);
  --glow-gold-str:   0 0 32px rgba(220,185,80,0.30), 0 0 72px rgba(212,175,80,0.10);
  --glow-title:      0 0 50px rgba(240,210,100,0.38), 0 0 110px rgba(212,175,80,0.12);
  --shadow-card:     0 8px 32px rgba(0,0,0,0.45);

  /* Typografie */
  --font-heading: 'Cinzel', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --max-w:        1200px;
  --max-w-narrow: 800px;
  --pad:          1.5rem;

  /* Transitionen */
  --t-fast: 0.2s ease;
  --t-med:  0.36s ease;
  --t-slow: 0.6s ease;

  /* Radien — weich */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-body);
  line-height: 1.75;
  overflow-x: hidden;
  min-height: 100vh;
}
img { max-width:100%; height:auto; display:block; }
a { color:var(--text-link); text-decoration:none; transition:color var(--t-fast); }
a:hover { color:var(--gold-bright); }
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-heading);
  color: var(--text-heading);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
ul { list-style:none; }
button { font-family:inherit; }

/* ── Layout ── */
.container        { max-width:var(--max-w);        margin:0 auto; padding:0 var(--pad); }
.container-narrow { max-width:var(--max-w-narrow); margin:0 auto; padding:0 var(--pad); }
.section          { padding:5rem 0; }

/* ── Page Background ── */
.page-bg {
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(ellipse at 16% 0%, rgba(124,58,237,0.13) 0%, transparent 45%),
    radial-gradient(ellipse at 84% 18%, rgba(249,115,22,0.10) 0%, transparent 42%),
    radial-gradient(ellipse at 85% 100%, rgba(212,175,80,0.08) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 50%, rgba(36,56,120,0.10) 0%, transparent 70%),
    linear-gradient(135deg, rgba(4,8,20,0.92), rgba(11,13,28,0.98) 45%, rgba(20,10,24,0.94));
}
.page-bg::before {
  content:'';
  position:absolute; inset:0;
  background:
    linear-gradient(rgba(212,175,80,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(212,175,80,0.018) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 22%, black 0%, transparent 68%);
  opacity:0.58;
}
.scroll-progress {
  position:fixed; top:0; left:0; z-index:1500;
  width:100%; height:2px;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--purple-400), var(--gold-bright), var(--orange-400));
  box-shadow:0 0 18px rgba(240,208,96,0.45);
  pointer-events:none;
}

/* Ember Canvas */
#ember-canvas {
  position:fixed; inset:0; z-index:0; pointer-events:none;
}

/* ── Navigation — Floating Glass Pill ── */
.navbar {
  position:fixed; top:0.85rem; left:50%; transform:translateX(-50%);
  z-index:1000;
  width:calc(100% - 2.5rem); max-width:900px;
  padding:0.65rem 1.5rem;
  background:rgba(8,11,26,0.72);
  backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border:1px solid rgba(212,175,80,0.12);
  border-radius:999px;
  box-shadow:0 4px 24px rgba(0,0,0,0.3), 0 0 48px rgba(0,0,0,0.12);
  transition:background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
.navbar.scrolled {
  background:rgba(8,11,26,0.88);
  border-color:rgba(212,175,80,0.18);
  box-shadow:0 4px 32px rgba(0,0,0,0.4), 0 0 60px rgba(0,0,0,0.15);
}
.nav-inner {
  display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
}
.nav-logo {
  font-family:var(--font-heading);
  font-size:clamp(0.72rem,1.6vw,0.88rem);
  font-weight:800; letter-spacing:0.25em;
  color:var(--gold-text) !important;
  text-shadow:var(--glow-gold);
  display:flex; align-items:center; gap:0.35rem;
  transition:text-shadow 0.3s ease;
  flex-shrink:0;
}
.nav-logo:hover { text-shadow:var(--glow-gold-str); }
.nav-rune { color:var(--gold-label); font-size:0.85em; }
.nav-links {
  display:flex; align-items:center; gap:0.35rem;
}
.nav-links a {
  font-family:var(--font-heading);
  font-size:0.6rem; letter-spacing:0.18em;
  color:var(--gold-label);
  padding:0.45rem 0.85rem;
  border-radius:999px;
  transition:color 0.25s ease, background 0.25s ease;
  text-decoration:none;
  position:relative;
}
.nav-links a::after { display:none; }
.nav-links a:hover {
  color:var(--gold-text);
  background:rgba(212,175,80,0.08);
}
.nav-links a.active {
  color:var(--gold-bright);
  background:rgba(212,175,80,0.12);
  box-shadow:inset 0 0 12px rgba(212,175,80,0.06);
}

/* Hamburger */
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:4px;
}
.nav-toggle span {
  display:block; width:22px; height:1.5px;
  background:var(--gold-mid); border-radius:2px;
  transition:0.25s ease;
}
.nav-toggle.open span:nth-child(1) { transform:translateY(6.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity:0; }
.nav-toggle.open span:nth-child(3) { transform:translateY(-6.5px) rotate(-45deg); }

/* ── Hero (Startseite, Vollbild) ── */
.hero {
  position:relative; z-index:1;
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:0 var(--pad);
  overflow:hidden;
}
/* Corner ornaments */
.hero-corner {
  position:absolute;
  width:70px; height:70px;
  border-color:var(--gold-border); border-style:solid;
  pointer-events:none;
}
.hero-corner.tl { top:5.5rem; left:var(--pad); border-width:1px 0 0 1px; }
.hero-corner.tr { top:5.5rem; right:var(--pad); border-width:1px 1px 0 0; }
.hero-corner.bl { bottom:2rem;  left:var(--pad); border-width:0 0 1px 1px; }
.hero-corner.br { bottom:2rem;  right:var(--pad); border-width:0 1px 1px 0; }

.hero-content {
  text-align:center; max-width:680px; margin:0 auto;
  position:relative; z-index:1;
}
.hero-ornament {
  font-family:var(--font-heading);
  font-size:0.7rem; letter-spacing:0.55em;
  color:var(--gold-label);
  margin-bottom:1.5rem;
  animation:fadeInUp 1.8s ease both;
}
.hero-title {
  font-family:var(--font-heading);
  font-size:clamp(3.5rem,11vw,7.5rem);
  font-weight:800; letter-spacing:0.22em;
  margin-right:-0.22em; /* kompensiert trailing letter-spacing */
  color:var(--gold-bright);
  text-shadow:var(--glow-title);
  animation:titleGlow 4s ease-in-out infinite, fadeInUp 1.8s 0.25s ease both;
}
.hero-line {
  width:64px; height:1px; margin:1.5rem auto;
  background:linear-gradient(90deg,transparent,var(--gold-border-act),transparent);
}
.hero-subtitle {
  color:var(--text-note); font-style:italic;
  font-size:clamp(0.88rem,2.2vw,1.05rem); line-height:1.85;
  margin-bottom:2.25rem;
  animation:fadeInUp 1.8s 0.5s ease both;
}
.hero-runes {
  color:rgba(200,170,80,0.16);
  font-family:var(--font-heading);
  font-size:0.95rem; letter-spacing:0.55em;
  margin-top:1.5rem;
}
.hero-buttons {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap;
  animation:fadeInUp 1.8s 0.75s ease both;
}

/* ── Home Hero 2.0: cinematic 3D stage ── */
.page-home .hero {
  min-height:100svh;
  padding:7.5rem var(--pad) 4rem;
  isolation:isolate;
}
.page-home .hero::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 72% 45%, rgba(251,146,60,0.12), transparent 28%),
    radial-gradient(circle at 32% 48%, rgba(139,92,246,0.13), transparent 32%),
    linear-gradient(180deg, transparent 72%, rgba(8,11,24,0.92));
  pointer-events:none;
}
.page-home .hero::after {
  content:'';
  position:absolute; left:50%; bottom:2.2rem;
  width:min(720px, 80vw); height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(240,208,96,0.44), transparent);
  opacity:0.75;
}
.hero-grid {
  width:min(1180px, 100%);
  display:grid;
  grid-template-columns:minmax(0, 0.95fr) minmax(340px, 1.05fr);
  align-items:center;
  gap:clamp(2rem, 6vw, 5rem);
  position:relative;
  z-index:2;
}
.page-home .hero-content {
  text-align:left;
  max-width:650px;
  margin:0;
}
.page-home .hero-ornament {
  margin-bottom:0.9rem;
  color:rgba(240,208,96,0.48);
}
.hero-kicker {
  font-family:var(--font-heading);
  font-size:0.62rem;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:rgba(196,181,253,0.82);
  margin-bottom:1rem;
  animation:fadeInUp 1.4s 0.12s ease both;
}
.page-home .hero-title {
  font-size:clamp(2.85rem, 6.4vw, 5.45rem);
  letter-spacing:0.075em;
  margin-right:-0.075em;
  background:linear-gradient(120deg, #fff0ad 0%, var(--gold-bright) 34%, #f7a24a 62%, #c4b5fd 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.page-home .hero-line {
  margin:1.35rem 0;
  width:118px;
  background:linear-gradient(90deg, var(--gold-border-act), rgba(167,139,250,0.55), transparent);
}
.page-home .hero-subtitle {
  max-width:560px;
  margin-bottom:2rem;
  color:rgba(236,218,169,0.78);
}
.page-home .hero-buttons {
  justify-content:flex-start;
}
.hero-proof {
  display:flex; flex-wrap:wrap; gap:0.75rem;
  margin-top:1.35rem;
  animation:fadeInUp 1.8s 0.92s ease both;
}
.hero-proof span {
  display:inline-flex; align-items:center; gap:0.4rem;
  min-height:38px;
  padding:0.45rem 0.75rem;
  border:1px solid rgba(212,175,80,0.16);
  border-radius:999px;
  background:rgba(8,11,26,0.42);
  color:rgba(236,218,169,0.66);
  font-size:0.74rem;
  backdrop-filter:blur(12px);
}
.hero-proof strong {
  font-family:var(--font-heading);
  color:var(--gold-bright);
  font-size:0.95rem;
}
.page-home .hero-runes {
  text-align:left;
  color:rgba(196,181,253,0.18);
}
.hero-stage {
  min-height:760px;
  position:relative;
  display:grid;
  place-items:center;
  perspective:1100px;
  transform-style:preserve-3d;
  animation:fadeInUp 1.5s 0.35s ease both;
}
.stage-aura {
  position:absolute;
  width:min(520px, 82vw);
  aspect-ratio:1;
  border-radius:50%;
  background:
    radial-gradient(circle, rgba(240,208,96,0.20) 0%, rgba(249,115,22,0.10) 22%, rgba(139,92,246,0.12) 44%, transparent 70%);
  filter:blur(6px);
  animation:auraPulse 5.8s ease-in-out infinite;
}
.hero-artifact-card {
  position:absolute;
  z-index:3;
  width:min(560px, 82vw);
  aspect-ratio:16 / 10;
  border-radius:24px;
  overflow:hidden;
  transform:translate(var(--parallax-x, 0), var(--parallax-y, 0)) translateZ(90px) rotateX(calc(4deg + var(--tilt-x))) rotateY(calc(-10deg + var(--tilt-y)));
  box-shadow:
    0 28px 100px rgba(0,0,0,0.55),
    0 0 90px rgba(124,58,237,0.18),
    0 0 72px rgba(249,115,22,0.12);
  transition:transform 0.18s ease-out, box-shadow 0.35s ease;
}
.hero-artifact-card::before {
  content:'';
  position:absolute; inset:0;
  z-index:2;
  background:
    radial-gradient(circle at 52% 54%, transparent 0 28%, rgba(8,11,24,0.28) 58%, rgba(8,11,24,0.72) 100%),
    linear-gradient(115deg, rgba(255,255,255,0.08), transparent 28%, transparent 72%, rgba(240,208,96,0.10));
  pointer-events:none;
}
.hero-artifact-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.06);
  filter:saturate(1.08) contrast(1.08);
}
.hero-cover-card {
  width:min(350px, 58vw);
  aspect-ratio:702 / 1120;
  border-radius:12px;
  border:1px solid rgba(240,208,96,0.28);
  transform:translate(var(--parallax-x, 0), var(--parallax-y, 0)) translateZ(90px) rotateX(calc(3deg + var(--tilt-x))) rotateY(calc(-12deg + var(--tilt-y))) rotateZ(-2deg);
  box-shadow:
    0 34px 95px rgba(0,0,0,0.58),
    0 0 70px rgba(240,208,96,0.16),
    0 0 100px rgba(124,58,237,0.12);
}
.hero-cover-card:hover {
  z-index:6;
}
.hero-cover-card::before {
  background:
    linear-gradient(115deg, rgba(255,255,255,0.12), transparent 18%, transparent 74%, rgba(240,208,96,0.08)),
    radial-gradient(circle at 50% 50%, transparent 0 58%, rgba(8,11,24,0.24) 100%);
}
.hero-cover-card img {
  object-fit:cover;
  transform:none;
  filter:saturate(1.04) contrast(1.05);
}
.stellar-orbit {
  width:min(420px, 76vw);
  aspect-ratio:1;
  position:relative;
  transform-style:preserve-3d;
  transform:translate(var(--parallax-x, 0), var(--parallax-y, 0)) rotateX(62deg) rotateZ(-14deg);
  animation:artifactFloat 6.5s ease-in-out infinite;
}
.artifact-orbit {
  z-index:4;
  width:min(510px, 80vw);
  opacity:0.65;
  mix-blend-mode:screen;
  pointer-events:none;
}
.orbit-ring {
  position:absolute; inset:8%;
  border-radius:50%;
  border:1px solid rgba(240,208,96,0.42);
  box-shadow:0 0 24px rgba(240,208,96,0.18), inset 0 0 24px rgba(240,208,96,0.08);
}
.ring-one { animation:ringSpin 16s linear infinite; }
.ring-two {
  inset:17%;
  border-color:rgba(167,139,250,0.45);
  transform:rotateX(68deg) rotateY(20deg);
  animation:ringSpinReverse 12s linear infinite;
}
.ring-three {
  inset:28%;
  border-color:rgba(251,146,60,0.48);
  transform:rotateY(72deg);
  animation:ringSpin 9s linear infinite;
}
.arcane-core {
  position:absolute; inset:34%;
  border-radius:50%;
  transform:translateZ(90px);
  background:
    radial-gradient(circle at 45% 35%, #fff8d2 0 8%, #f0d060 16%, #f97316 38%, rgba(124,58,237,0.38) 62%, rgba(8,11,26,0.92) 100%);
  box-shadow:0 0 52px rgba(240,208,96,0.62), 0 0 120px rgba(124,58,237,0.24);
  animation:corePulse 3.4s ease-in-out infinite;
}
.core-flame {
  position:absolute; inset:18% 30% 14%;
  border-radius:50% 50% 48% 48%;
  background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(240,208,96,0.82) 32%, rgba(249,115,22,0.55) 68%, rgba(124,58,237,0));
  clip-path:polygon(50% 0%, 68% 24%, 58% 42%, 76% 68%, 52% 100%, 29% 74%, 40% 48%, 28% 28%);
  filter:blur(0.2px);
  animation:flameWaver 1.7s ease-in-out infinite alternate;
}
.artifact-dagger {
  position:absolute; left:50%; top:50%;
  width:34px; height:240px;
  transform:translate(-50%, -50%) translateZ(150px) rotateZ(32deg);
  transform-origin:center;
  filter:drop-shadow(0 0 18px rgba(239,68,68,0.42)) drop-shadow(0 0 28px rgba(240,208,96,0.20));
  animation:daggerHover 4.8s ease-in-out infinite;
}
.dagger-blade {
  position:absolute; left:50%; top:0;
  width:18px; height:156px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, #2b1220, #f1d393 45%, #9a1f2c 52%, #130814);
  clip-path:polygon(50% 0, 100% 72%, 58% 100%, 42% 100%, 0 72%);
  border-radius:12px 12px 4px 4px;
}
.dagger-hilt {
  position:absolute; left:50%; bottom:10px;
  width:70px; height:92px;
  transform:translateX(-50%);
}
.dagger-hilt::before {
  content:''; position:absolute; left:0; top:0;
  width:70px; height:12px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(124,58,237,0.4), var(--gold-bright), rgba(239,68,68,0.55));
  box-shadow:0 0 18px rgba(240,208,96,0.34);
}
.dagger-hilt::after {
  content:''; position:absolute; left:50%; top:10px;
  width:18px; height:82px;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(90deg, #24101e, #d4a543 45%, #55111a);
}
.star-node {
  position:absolute;
  width:10px; height:10px;
  border-radius:50%;
  background:#fff3b8;
  box-shadow:0 0 16px rgba(240,208,96,0.9), 0 0 34px rgba(167,139,250,0.45);
}
.node-a { left:12%; top:42%; animation:nodePulse 2.4s ease-in-out infinite; }
.node-b { right:16%; top:27%; animation:nodePulse 2.4s 0.35s ease-in-out infinite; }
.node-c { right:25%; bottom:12%; animation:nodePulse 2.4s 0.7s ease-in-out infinite; }
.codex-slab {
  position:absolute;
  right:4%; bottom:10%;
  width:min(265px, 46vw);
  min-height:150px;
  padding:1.1rem;
  border:1px solid rgba(212,175,80,0.25);
  border-radius:var(--r-md);
  background:linear-gradient(145deg, rgba(12,16,34,0.78), rgba(27,17,36,0.72));
  backdrop-filter:blur(18px);
  box-shadow:0 22px 70px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.06);
  transform:translate(var(--parallax-x, 0), var(--parallax-y, 0)) translateZ(40px) rotateX(calc(8deg + var(--tilt-x))) rotateY(calc(-13deg + var(--tilt-y)));
  transition:transform 0.18s ease-out, border-color 0.35s ease, box-shadow 0.35s ease;
}
.hero-slab {
  z-index:2;
  left:50%;
  right:auto;
  top:calc(50% + 330px);
  bottom:auto;
  width:min(285px, 42vw);
  min-height:132px;
  transform:translateX(-50%) translate(var(--parallax-x, 0), var(--parallax-y, 0)) translateZ(24px) rotateX(calc(5deg + var(--tilt-x))) rotateY(calc(-8deg + var(--tilt-y)));
}
.slab-header {
  display:flex; justify-content:space-between; gap:0.75rem;
  font-family:var(--font-heading);
  color:rgba(212,175,80,0.54);
  font-size:0.5rem;
  letter-spacing:0.16em;
}
.slab-title {
  font-family:var(--font-heading);
  color:var(--gold-bright);
  font-size:1rem;
  letter-spacing:0.08em;
  margin:0.9rem 0 0.75rem;
}
.slab-lines { display:grid; gap:0.42rem; }
.slab-lines span {
  display:block; height:6px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(240,208,96,0.28), rgba(167,139,250,0.16), transparent);
}
.slab-lines span:nth-child(2) { width:78%; }
.slab-lines span:nth-child(3) { width:54%; }
.next-chapter-cue {
  display:inline-block;
  margin-top:1rem;
  max-width:min(520px, 100%);
  padding:0.55rem 1rem;
  border:1px solid rgba(212,175,80,0.16);
  border-radius:999px;
  background:rgba(8,11,26,0.56);
  backdrop-filter:blur(14px);
  color:rgba(236,218,169,0.62);
  font-family:var(--font-heading);
  font-size:0.55rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  text-align:left;
  white-space:normal;
  box-shadow:0 0 30px rgba(0,0,0,0.22);
  animation:fadeInUp 1.2s 1.05s ease both;
}
.next-chapter-cue::after {
  content:' ↓';
  color:rgba(240,208,96,0.72);
}
.next-chapter-cue:hover {
  color:var(--gold-bright);
  border-color:rgba(240,208,96,0.34);
}

/* ── Page Hero (Unterseiten) ── */
.page-hero {
  position:relative; z-index:1;
  padding:9rem var(--pad) 3.5rem;
  text-align:center;
  border-bottom:1px solid var(--gold-border);
}
.page-hero-label {
  font-family:var(--font-heading);
  font-size:0.58rem; letter-spacing:0.4em;
  color:var(--gold-label); margin-bottom:0.6rem;
}
.page-hero-title {
  font-family:var(--font-heading);
  font-size:clamp(1.8rem,6vw,3.5rem);
  color:var(--gold-bright); text-shadow:var(--glow-gold);
  margin-bottom:0.75rem;
}
.page-hero-sub {
  color:var(--text-note); font-style:italic; font-size:0.93rem;
}

/* ── Codex Archive Surface ── */
.page-codex .page-bg {
  background:
    radial-gradient(ellipse at 12% 8%, rgba(212,175,80,0.09), transparent 38%),
    radial-gradient(ellipse at 86% 18%, rgba(124,58,237,0.10), transparent 42%),
    linear-gradient(135deg, #070812 0%, #10101d 48%, #170c12 100%);
}
.codex-hero {
  position:relative;
  z-index:1;
  min-height:430px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(260px, 360px);
  gap:2rem;
  align-items:end;
  max-width:var(--max-w);
  margin:0 auto;
  padding:9rem var(--pad) 4rem;
}
.codex-hero::before {
  content:'';
  position:absolute; inset:6rem var(--pad) 2rem;
  z-index:-1;
  border:1px solid rgba(212,175,80,0.16);
  border-radius:22px;
  background:
    linear-gradient(90deg, rgba(240,208,96,0.035) 1px, transparent 1px),
    linear-gradient(rgba(240,208,96,0.025) 1px, transparent 1px),
    radial-gradient(circle at 18% 22%, rgba(212,175,80,0.08), transparent 34%),
    rgba(8,11,24,0.34);
  background-size:36px 36px, 36px 36px, auto, auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 30px 90px rgba(0,0,0,0.24);
}
.codex-hero-copy {
  max-width:740px;
  padding:0 0 1rem 1rem;
}
.codex-hero .page-hero-title,
.codex-hero .page-hero-label,
.codex-hero .page-hero-sub {
  text-align:left;
}
.codex-hero .page-hero-sub {
  max-width:660px;
  line-height:1.8;
}
.codex-hero-dossier {
  position:relative;
  overflow:hidden;
  padding:1.5rem;
  border:1px solid rgba(212,175,80,0.22);
  border-radius:var(--r-md);
  background:
    linear-gradient(145deg, rgba(37,26,20,0.74), rgba(12,14,28,0.88)),
    repeating-linear-gradient(0deg, transparent 0 17px, rgba(212,175,80,0.035) 18px);
  box-shadow:0 22px 70px rgba(0,0,0,0.28);
}
.codex-hero-dossier p {
  font-family:var(--font-heading);
  font-size:0.56rem;
  letter-spacing:0.26em;
  color:var(--gold-label);
  text-transform:uppercase;
  margin-bottom:0.6rem;
}
.codex-hero-dossier strong {
  display:block;
  font-family:var(--font-heading);
  color:var(--gold-bright);
  font-size:1.1rem;
  letter-spacing:0.05em;
  margin-bottom:0.75rem;
}
.codex-hero-dossier small {
  color:var(--text-note);
  line-height:1.7;
}
.dossier-stamp {
  position:absolute;
  right:-1.2rem;
  top:1.2rem;
  transform:rotate(14deg);
  border:2px solid rgba(239,68,68,0.34);
  color:rgba(248,113,113,0.55);
  border-radius:999px;
  padding:0.45rem 1rem;
  font-family:var(--font-heading);
  font-size:0.56rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
}
.codex-section {
  padding-top:1.5rem;
}
.codex-tools {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:1rem;
  margin:0 auto 3rem;
  max-width:780px;
}
.codex-tool-card {
  position:relative;
  overflow:hidden;
  display:grid;
  gap:0.45rem;
  min-height:156px;
  padding:1.35rem;
  border:1px solid rgba(212,175,80,0.20);
  border-radius:var(--r-md);
  background:
    radial-gradient(circle at 88% 12%, rgba(240,208,96,0.14), transparent 26%),
    linear-gradient(145deg, rgba(13,18,38,0.88), rgba(30,22,34,0.72));
  text-decoration:none;
}
.codex-tool-card:hover {
  border-color:rgba(240,208,96,0.48);
  box-shadow:0 16px 50px rgba(0,0,0,0.22), 0 0 46px rgba(212,175,80,0.08);
}
.tool-sigil {
  font-size:1.6rem;
  color:var(--gold-bright);
}
.codex-tool-card h3 {
  font-size:0.78rem;
  letter-spacing:0.18em;
}
.codex-tool-card p {
  color:var(--text-note);
  font-size:0.82rem;
  line-height:1.7;
}
.tool-action {
  align-self:end;
  font-family:var(--font-heading);
  color:var(--gold-text);
  font-size:0.6rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
}

/* ── Section Helpers ── */
.section-divider {
  width:72px; height:1px; margin:1.25rem auto 2.5rem;
  background:linear-gradient(90deg,transparent,var(--gold-border-act),transparent);
}
.section-label {
  font-family:var(--font-heading);
  font-size:0.58rem; letter-spacing:0.38em;
  color:var(--gold-label); text-align:center; margin-bottom:0.5rem;
}
.section-title {
  font-family:var(--font-heading);
  font-size:clamp(1.4rem,4vw,2.2rem);
  color:var(--gold-bright); text-shadow:var(--glow-gold);
  text-align:center; margin-bottom:0.5rem;
}
.section-subtitle {
  color:var(--text-note); font-style:italic;
  text-align:center; font-size:0.9rem; margin-bottom:1.5rem;
}

/* ── Parchment Scroll Entry ── */
.scroll-entry {
  margin-bottom:1.5rem;
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.scroll-entry:hover {
  transform: translateY(-3px);
}

.scroll-curl-top {
  height:8px; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background:linear-gradient(180deg,rgba(180,160,80,0.26) 0%,rgba(200,170,80,0.03) 100%);
  border:1px solid var(--gold-border); border-bottom:none;
  transition:background var(--t-fast);
}
.scroll-curl-bot {
  height:8px; border-radius:0 0 var(--r-sm) var(--r-sm);
  background:linear-gradient(0deg,rgba(180,160,80,0.26) 0%,rgba(200,170,80,0.03) 100%);
  border:1px solid var(--gold-border); border-top:none;
  transition:background var(--t-fast);
}
.scroll-body {
  background:rgba(200,170,80,0.05);
  border:1px solid var(--gold-border); border-top:none; border-bottom:none;
  padding:1.25rem 1.5rem;
  position:relative;
  transition:background var(--t-fast), box-shadow var(--t-fast);
}
.scroll-entry:hover .scroll-body {
  background:rgba(200,170,80,0.09);
  box-shadow:0 4px 20px rgba(200,170,80,0.1);
}
.scroll-entry:hover .scroll-curl-top {
  background:linear-gradient(180deg,rgba(180,160,80,0.38) 0%,rgba(200,170,80,0.05) 100%);
}

/* ── Akte / Entry Components ── */
.akte-number {
  display:block;
  font-family:var(--font-heading);
  font-size:0.54rem; letter-spacing:0.28em;
  color:var(--gold-label); margin-bottom:0.5rem;
}
.entry-badge {
  display:inline-block;
  font-family:var(--font-heading);
  font-size:0.54rem; letter-spacing:0.15em;
  color:var(--gold-muted);
  background:var(--gold-subtle);
  border:1px solid var(--gold-border);
  padding:0.15rem 0.6rem; border-radius:var(--r-xs);
  margin-bottom:0.5rem;
}
.entry-title {
  font-family:var(--font-heading);
  font-size:clamp(1rem,2.2vw,1.25rem); font-weight:600;
  color:var(--text-heading); margin-bottom:0.5rem;
}
.entry-tags { position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:0.35rem; margin-bottom:0.65rem; }
.entry-tag {
  font-size:0.57rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--gold-label);
  background:var(--gold-faint);
  border:1px solid rgba(200,170,80,0.17);
  padding:0.1rem 0.5rem; border-radius:var(--r-xs);
}
.entry-content, .entry-body {
  color:var(--text-body);
  font-size:0.875rem; line-height:1.82;
  margin-bottom:0.65rem;
  position:relative;
  z-index:1;
}
.entry-note {
  position:relative;
  z-index:1;
  border-left:2px solid rgba(200,120,60,0.55);
  padding:0.55rem 0.8rem;
  background:rgba(160,90,30,0.08);
  color:var(--text-note);
  font-size:0.77rem; font-style:italic; line-height:1.65;
  margin-top:0.8rem;
}
.entry-note span {
  display:block;
  font-family:var(--font-heading);
  font-size:0.48rem;
  letter-spacing:0.18em;
  color:rgba(251,146,60,0.68);
  text-transform:uppercase;
  font-style:normal;
  margin-bottom:0.2rem;
}
.entry-see-also { position:relative; z-index:1; font-size:0.72rem; color:var(--text-muted); margin-top:0.5rem; }
.entry-see-also a { color:var(--gold-label); text-decoration:underline; text-underline-offset:2px; }
.entry-see-also a:hover { color:var(--gold-text); }

/* Geschwärzter Text */
.redacted {
  display:inline;
  background:linear-gradient(180deg, #030407, #0a0a0d);
  box-shadow:0 1px 0 rgba(255,255,255,0.04), 0 0 10px rgba(0,0,0,0.32);
  color:transparent !important;
  border-radius:2px; padding:0 0.42em;
  user-select:none;
}

/* Vertraulich-Stempel */
.stamp {
  position:absolute; bottom:14px; right:16px;
  width:58px; height:58px;
  border:2px solid rgba(180,60,60,0.24);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  transform:rotate(-13deg); pointer-events:none;
  z-index:1;
}
.stamp span {
  color:rgba(200,80,60,0.34);
  font-family:var(--font-heading);
  font-size:0.42rem; letter-spacing:0.05em;
  text-align:center; line-height:1.3; text-transform:uppercase;
}

/* ── Card (Generic) ── */
.card {
  background: linear-gradient(145deg, rgba(13,18,38,0.95), rgba(16,22,46,0.85));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-md);
  padding: 1.75rem;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.card:hover {
  border-color: var(--gold-border-act);
  box-shadow: 0 8px 40px rgba(212,175,80,0.12), 0 0 60px rgba(212,175,80,0.06), inset 0 1px 0 rgba(255,255,255,0.04);
  transform: translateY(-6px);
}
.tilt-card {
  --tilt-x:0deg;
  --tilt-y:0deg;
  transform-style:preserve-3d;
}
.card.tilt-card {
  transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}
.card.tilt-card:hover {
  transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-6px);
}

/* ── Home Story Section ── */
.story-section {
  position:relative;
  z-index:1;
  padding-top:6rem;
}
.story-section::before {
  content:'';
  position:absolute; left:50%; top:0;
  width:min(1040px, 88vw); height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(167,139,250,0.28), rgba(240,208,96,0.36), transparent);
}
.story-grid {
  display:grid;
  grid-template-columns:minmax(0, 1.45fr) minmax(280px, 0.75fr);
  gap:1.5rem;
  align-items:stretch;
  margin-top:2.5rem;
}
.lore-panel {
  padding:clamp(1.5rem, 3vw, 2.4rem);
}
.lore-panel p {
  color:var(--text-secondary);
  font-size:0.96rem;
  line-height:1.9;
  margin-bottom:1.15rem;
}
.lore-panel p:last-child { margin-bottom:0; }
.lore-panel strong {
  color:var(--purple-300);
  text-shadow:0 0 18px rgba(124,58,237,0.24);
}
.lore-panel .fire-word {
  color:var(--orange-400);
  text-shadow:0 0 18px rgba(249,115,22,0.26);
}
.lore-panel .danger-word {
  color:var(--red-400);
  text-shadow:0 0 18px rgba(239,68,68,0.22);
}
.truth-card {
  position:relative;
  overflow:hidden;
  min-height:100%;
  padding:2rem;
  border:1px solid rgba(249,115,22,0.34);
  border-radius:var(--r-md);
  background:
    radial-gradient(circle at 85% 8%, rgba(249,115,22,0.22), transparent 36%),
    linear-gradient(145deg, rgba(40,17,22,0.82), rgba(14,18,38,0.9));
  box-shadow:0 18px 60px rgba(0,0,0,0.24), inset 0 1px 0 rgba(255,255,255,0.05);
}
.truth-card::after {
  content:'ᛉ';
  position:absolute; right:1.2rem; bottom:-0.35rem;
  font-family:var(--font-heading);
  font-size:8rem;
  color:rgba(249,115,22,0.06);
  line-height:1;
}
.truth-label {
  display:inline-flex;
  font-family:var(--font-heading);
  font-size:0.54rem;
  letter-spacing:0.22em;
  color:rgba(251,146,60,0.78);
  text-transform:uppercase;
  margin-bottom:1rem;
}
.truth-card h3 {
  color:#ffd38a;
  font-size:clamp(1.15rem, 3vw, 1.7rem);
  margin-bottom:0.8rem;
}
.truth-card p {
  position:relative;
  z-index:1;
  color:rgba(236,218,169,0.75);
  font-size:0.92rem;
  line-height:1.82;
}
.promise-block {
  margin-top:2.5rem;
}
.promise-block h3 {
  font-size:1rem;
  color:var(--text-heading);
  margin-bottom:1.1rem;
}
.promise-grid {
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:1rem;
}
.promise-card {
  position:relative;
  overflow:hidden;
  min-height:210px;
  padding:1.35rem;
  border:1px solid rgba(212,175,80,0.18);
  border-radius:var(--r-md);
  background:linear-gradient(145deg, rgba(13,18,38,0.78), rgba(18,17,38,0.66));
  backdrop-filter:blur(12px);
  transition:border-color 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
  transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}
.promise-card:hover {
  border-color:rgba(240,208,96,0.52);
  transform:perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-6px);
  box-shadow:0 18px 46px rgba(0,0,0,0.22), 0 0 50px rgba(212,175,80,0.08);
}
.promise-card span {
  display:block;
  font-family:var(--font-heading);
  color:rgba(167,139,250,0.54);
  font-size:0.8rem;
  letter-spacing:0.2em;
  margin-bottom:1.6rem;
}
.promise-card h4 {
  color:var(--gold-bright);
  font-size:0.9rem;
  margin-bottom:0.75rem;
}
.promise-card p {
  color:var(--text-secondary);
  font-size:0.85rem;
  line-height:1.72;
}
.seal-note {
  margin:2rem auto 0;
  max-width:880px;
  padding:1.35rem 1.5rem;
  border:1px solid rgba(249,115,22,0.28);
  border-radius:var(--r-md);
  background:linear-gradient(90deg, rgba(249,115,22,0.06), rgba(124,58,237,0.06));
}
.seal-note p {
  color:var(--text-secondary);
  font-size:0.94rem;
  line-height:1.85;
  font-style:italic;
  margin:0;
}

/* ── Rank Tabs — Sigil Card Design ── */
.rank-tabs {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:0.85rem; margin-bottom:2.5rem;
  max-width:680px; margin-left:auto; margin-right:auto;
}

.rank-tab {
  position:relative; overflow:hidden;
  font-family:var(--font-heading);
  background: linear-gradient(150deg, rgba(13,18,38,0.95), rgba(16,22,48,0.85));
  backdrop-filter: blur(10px);
  border:1px solid var(--gold-border);
  border-radius: var(--r-md);
  padding:1.75rem 1rem 1.5rem;
  cursor:pointer; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:0.3rem;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}

/* Shimmer sweep */
.rank-tab::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg,transparent 0%,rgba(212,175,80,0.07) 45%,rgba(212,175,80,0.13) 50%,rgba(212,175,80,0.07) 55%,transparent 100%);
  transform:translateX(-110%);
  transition:none;
}
.rank-tab:hover::before { animation:sigilSweep 0.65s ease forwards; }

/* Inner accent frame on active */
.rank-tab::after {
  content:''; position:absolute; inset:4px;
  border-radius:3px; border:1px solid transparent;
  transition:border-color 0.32s ease;
  pointer-events:none;
}
.rank-tab.active::after { border-color:rgba(212,175,80,0.1); }

.rank-tab-numeral {
  font-size:1.9rem; font-weight:800; letter-spacing:0.08em;
  color:var(--gold-label); line-height:1;
  transition:color 0.32s ease, text-shadow 0.32s ease;
}
.rank-tab-name {
  font-size:0.5rem; letter-spacing:0.32em; text-transform:uppercase;
  color:var(--gold-label);
  transition:color 0.32s ease;
}
.rank-tab-status {
  font-size:0.42rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--text-muted); margin-top:0.1rem;
}

/* Shimmer auf Hover */
.rank-tab::before {
  content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.14) 50%, rgba(255,255,255,0.08) 55%, transparent 80%);
  transform:translateX(-110%); border-radius:inherit;
}
.rank-tab:hover::before { animation:btnSweep 0.6s ease forwards; }

/* Default hover */
.rank-tab:hover { transform: translateY(-5px) scale(1.03); }

/* — Gold (Novize) — */
.rank-tab.tab-gold { border-color:rgba(212,175,80,0.2); }
.rank-tab.tab-gold .rank-tab-numeral { color:rgba(212,175,80,0.4); }
.rank-tab.tab-gold .rank-tab-name    { color:rgba(212,175,80,0.45); }
.rank-tab.tab-gold:hover {
  border-color:rgba(212,175,80,0.45);
  box-shadow:0 8px 32px rgba(212,175,80,0.1);
}
.rank-tab.tab-gold:hover .rank-tab-numeral { color:var(--gold-bright); }
.rank-tab.tab-gold:hover .rank-tab-name    { color:var(--gold-text); }
.rank-tab.tab-gold.active {
  border-color:rgba(230,195,100,0.5);
  background:linear-gradient(150deg, rgba(212,175,80,0.14), rgba(200,170,80,0.05));
  box-shadow:0 0 40px rgba(212,175,80,0.15), 0 8px 28px rgba(212,175,80,0.06);
  transform:translateY(-2px);
}
.rank-tab.tab-gold.active .rank-tab-numeral {
  color:var(--gold-bright);
  text-shadow:0 0 22px rgba(212,175,80,0.55);
}
.rank-tab.tab-gold.active .rank-tab-name { color:var(--gold-text); }

/* — Purple (Adept) — */
.rank-tab.tab-purple { border-color:rgba(139,92,246,0.2); }
.rank-tab.tab-purple .rank-tab-numeral { color:rgba(167,139,250,0.4); }
.rank-tab.tab-purple .rank-tab-name    { color:rgba(167,139,250,0.45); }
.rank-tab.tab-purple:hover {
  border-color:rgba(139,92,246,0.45);
  box-shadow:0 8px 32px rgba(139,92,246,0.1);
}
.rank-tab.tab-purple:hover .rank-tab-numeral { color:#c4b5fd; }
.rank-tab.tab-purple:hover .rank-tab-name    { color:#a78bfa; }
.rank-tab.tab-purple.active {
  border-color:rgba(139,92,246,0.5);
  background:linear-gradient(150deg, rgba(139,92,246,0.14), rgba(124,58,237,0.05));
  box-shadow:0 0 40px rgba(139,92,246,0.15), 0 8px 28px rgba(139,92,246,0.06);
  transform:translateY(-2px);
}
.rank-tab.tab-purple.active .rank-tab-numeral {
  color:#c4b5fd;
  text-shadow:0 0 22px rgba(139,92,246,0.55);
}
.rank-tab.tab-purple.active .rank-tab-name { color:#a78bfa; }

/* — Red/Fire (Magister) — */
.rank-tab.tab-red { border-color:rgba(239,68,68,0.2); }
.rank-tab.tab-red .rank-tab-numeral { color:rgba(248,113,113,0.4); }
.rank-tab.tab-red .rank-tab-name    { color:rgba(248,113,113,0.45); }
.rank-tab.tab-red:hover {
  border-color:rgba(239,68,68,0.45);
  box-shadow:0 8px 32px rgba(239,68,68,0.1);
}
.rank-tab.tab-red:hover .rank-tab-numeral { color:#fca5a5; }
.rank-tab.tab-red:hover .rank-tab-name    { color:#f87171; }
.rank-tab.tab-red.active {
  border-color:rgba(239,68,68,0.5);
  background:linear-gradient(150deg, rgba(239,68,68,0.14), rgba(220,38,38,0.05));
  box-shadow:0 0 40px rgba(239,68,68,0.15), 0 8px 28px rgba(239,68,68,0.06);
  transform:translateY(-2px);
}
.rank-tab.tab-red.active .rank-tab-numeral {
  color:#fca5a5;
  text-shadow:0 0 22px rgba(239,68,68,0.55);
}
.rank-tab.tab-red.active .rank-tab-name { color:#f87171; }

/* Rank section reveal animation */
.kodex-rank-section { display:none; }
.kodex-rank-section.visible { display:block; }

/* Adept info banner */
.adept-notice {
  background:rgba(251,146,60,0.06);
  border:1px solid rgba(251,146,60,0.22);
  border-radius:var(--r-sm); padding:0.7rem 1.1rem;
  font-size:0.8rem; color:rgba(251,146,60,0.82);
  text-align:center; margin-bottom:1.75rem;
  font-style:italic;
}

/* ── Sub Tabs — Underline Design ── */
.sub-tabs {
  display:flex; gap:0; flex-wrap:wrap;
  border-bottom:1px solid var(--gold-border);
  margin-bottom:2rem;
}
.sub-tab {
  position:relative;
  font-family:var(--font-heading);
  font-size:0.6rem; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--gold-label);
  background:transparent; border:none;
  padding:0.75rem 1.25rem;
  cursor:pointer;
  transition:color 0.22s ease;
  white-space:nowrap;
}
.sub-tab::after {
  content:''; position:absolute;
  bottom:-1px; left:0.6rem; right:0.6rem; height:2px;
  background:linear-gradient(90deg,transparent,var(--gold-border-act),transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform 0.28s ease;
}
.sub-tab:hover { color:var(--gold-muted); }
.sub-tab.active { color:var(--gold-text); }
.sub-tab.active::after { transform:scaleX(1); }

/* Content area for JS-rendered entries */
.rank-content { min-height:200px; }
.sub-tabs-content .entry-card { display:none; }
.sub-tabs-content .entry-card.active { display:block; }

/* Entry card */
.entry-card {
  overflow:hidden;
  background:
    linear-gradient(90deg, rgba(212,175,80,0.055) 1px, transparent 1px),
    linear-gradient(rgba(212,175,80,0.035) 1px, transparent 1px),
    radial-gradient(circle at 95% 8%, rgba(240,208,96,0.09), transparent 28%),
    linear-gradient(150deg, rgba(20,22,38,0.94), rgba(25,19,31,0.88));
  background-size:34px 34px, 34px 34px, auto, auto;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(212,175,80,0.22);
  border-radius: 7px;
  padding: 1.45rem 1.65rem 1.35rem;
  margin-bottom: 1.15rem;
  position: relative;
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
.entry-card::before {
  content:'';
  position:absolute; left:0; top:0; bottom:0;
  width:5px;
  background:linear-gradient(180deg, rgba(240,208,96,0.52), rgba(124,58,237,0.18), rgba(239,68,68,0.22));
}
.entry-card::after {
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 8% 12%, rgba(255,255,255,0.04), transparent 16%),
    linear-gradient(115deg, transparent 0 68%, rgba(0,0,0,0.18) 68% 100%);
}
.entry-card:hover {
  border-color: var(--gold-border-act);
  box-shadow: 0 6px 32px rgba(212,175,80,0.1), 0 0 48px rgba(212,175,80,0.04);
  transform: translateY(-3px);
}
.archive-entry-head {
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-start;
  position:relative;
  z-index:1;
  margin-bottom:0.55rem;
}
.archive-entry-head .entry-badge {
  flex-shrink:0;
}

/* ── Accordion ── */
.accordion { margin-bottom:0.75rem; }
.sealed-file {
  position:relative;
}
.accordion-header {
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  background:
    repeating-linear-gradient(-8deg, rgba(239,68,68,0.05) 0 8px, transparent 8px 18px),
    linear-gradient(135deg, rgba(31,16,24,0.96), rgba(16,18,34,0.9));
  border:1px solid rgba(239,68,68,0.28); border-radius:7px;
  padding:1.1rem 1.25rem;
  cursor:pointer; text-align:left;
  color:var(--text-body);
  font-family:var(--font-heading); font-size:0.77rem; letter-spacing:0.1em;
  transition:all var(--t-fast);
}
.accordion-header > span:first-child {
  display:grid;
  gap:0.35rem;
}
.accordion-header .entry-badge {
  margin-left:0.35rem;
  margin-bottom:0;
}
.accordion-meta {
  display:flex;
  align-items:center;
  gap:0.6rem;
  flex-shrink:0;
}
.accordion-header:hover {
  background:
    repeating-linear-gradient(-8deg, rgba(239,68,68,0.07) 0 8px, transparent 8px 18px),
    linear-gradient(135deg, rgba(43,18,27,0.98), rgba(19,20,36,0.94));
  border-color:rgba(248,113,113,0.44);
  color:var(--text-heading);
}
.accordion-icon {
  color:var(--gold-label); font-size:0.68rem;
  transition:transform var(--t-med); flex-shrink:0;
}
.accordion.open .accordion-icon { transform:rotate(180deg); }
.accordion-content {
  max-height:0; overflow:hidden;
  transition:max-height 0.5s cubic-bezier(0.4,0,0.2,1), padding 0.3s ease;
  border:1px solid rgba(239,68,68,0.24); border-top:none;
  border-radius:0 0 7px 7px;
  padding:0 1.25rem;
  background:
    linear-gradient(90deg, rgba(212,175,80,0.035) 1px, transparent 1px),
    linear-gradient(rgba(212,175,80,0.025) 1px, transparent 1px),
    rgba(8,12,26,0.78);
  background-size:32px 32px;
}
.accordion.open .accordion-content { max-height:600px; padding:1rem; }
.accordion-content p {
  color:var(--text-body); font-size:0.875rem; line-height:1.82;
  margin-bottom:0.5rem;
}
.accordion-content p:last-child { margin-bottom:0; }
.accordion-content .entry-note { margin-top:0.5rem; }
.accordion-content .entry-see-also { margin-top:0.5rem; }
.forbidden-strip {
  margin:0.85rem 0;
  padding:0.5rem 0.65rem;
  border:1px dashed rgba(239,68,68,0.36);
  color:rgba(248,113,113,0.78);
  font-family:var(--font-heading);
  font-size:0.52rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
}

/* ── Spoiler Tags ── */
.spoiler-tag {
  display:inline-flex; align-items:center;
  font-family:var(--font-heading); font-size:0.5rem; letter-spacing:0.1em;
  padding:0.1rem 0.5rem; border-radius:var(--r-xs); border:1px solid;
}
.spoiler-tag.spoiler          { color:rgba(251,146,60,0.8); background:rgba(251,146,60,0.08); border-color:rgba(251,146,60,0.3); }
.spoiler-tag.strong-spoiler   { color:rgba(239,68,68,0.82); background:rgba(239,68,68,0.08); border-color:rgba(239,68,68,0.3); }
.spoiler-tag.extreme-spoiler  { color:rgba(220,38,38,0.92); background:rgba(220,38,38,0.1);  border-color:rgba(220,38,38,0.4); }

/* ── Spoiler Warning Modal ── */
.spoiler-warning {
  position:fixed; inset:0; z-index:2000;
  background:rgba(4,6,18,0.88); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity var(--t-med);
}
.spoiler-warning.active { opacity:1; pointer-events:all; }
.spoiler-warning-content {
  background: linear-gradient(150deg, rgba(18,14,28,0.98), rgba(24,18,36,0.95));
  backdrop-filter: blur(20px);
  border:1px solid rgba(200,80,60,0.42);
  border-radius: var(--r-lg); padding:3rem 2.5rem;
  max-width:480px; width:90%; text-align:center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 60px rgba(200,60,40,0.1);
  animation:fadeInUp 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.spoiler-warning-icon { font-size:2.5rem; margin-bottom:1rem; }
.spoiler-warning-content h3 {
  font-size:1.1rem; color:rgba(220,180,100,0.95); margin-bottom:0.75rem;
}
.spoiler-warning-content p {
  color:var(--text-body); font-size:0.875rem; line-height:1.82; margin-bottom:1.5rem;
}
.spoiler-warning-buttons { display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap; }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1rem 2.6rem;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: all 0.38s cubic-bezier(0.34,1.56,0.64,1);
}

/* Sweep shimmer */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.1) 45%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.1) 55%, transparent 80%);
  transform: translateX(-110%);
  transition: none;
  border-radius: inherit;
}
.btn:hover::before {
  animation: btnSweep 0.6s ease forwards;
}

/* Glow ring on focus */
.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212,175,80,0.35);
}

.btn-primary {
  background: linear-gradient(140deg, rgba(212,165,67,0.35) 0%, rgba(180,130,40,0.18) 100%);
  border-color: rgba(240,210,100,0.55);
  color: var(--gold-bright);
  box-shadow:
    0 4px 20px rgba(212,165,67,0.15),
    0 0 40px rgba(212,165,67,0.06),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn-primary:hover {
  background: linear-gradient(140deg, rgba(212,165,67,0.52) 0%, rgba(200,150,50,0.32) 100%);
  color: #fff;
  transform: translateY(-3px) scale(1.02);
  box-shadow:
    0 8px 32px rgba(212,165,67,0.28),
    0 0 60px rgba(212,165,67,0.1),
    0 12px 24px rgba(0,0,0,0.25);
}
.btn-primary:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 0.1s;
}

.btn-secondary {
  background: rgba(212,175,80,0.04);
  border-color: rgba(230,195,100,0.40);
  color: var(--gold-text);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}
.btn-secondary:hover {
  background: rgba(212,175,80,0.12);
  border-color: var(--gold-bright);
  color: var(--gold-bright);
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 24px rgba(212,175,80,0.1), 0 0 40px rgba(212,175,80,0.04);
}
.btn-secondary:active {
  transform: translateY(-1px) scale(0.99);
  transition-duration: 0.1s;
}

.btn-orange {
  background: linear-gradient(135deg, rgba(249,115,22,0.22), rgba(249,115,22,0.12));
  border-color: rgba(249,115,22,0.50);
  color: #fbbf24;
}
.btn-orange:hover {
  background: linear-gradient(135deg, rgba(249,115,22,0.35), rgba(249,115,22,0.22));
  transform: translateY(-2px);
}

.btn-danger {
  background: rgba(180,60,60,0.15);
  border-color: rgba(200,80,60,0.50);
  color: rgba(240,130,100,0.95);
}
.btn-danger:hover { background: rgba(180,60,60,0.28); transform: translateY(-2px); }

.btn-kindle {
  background: rgba(255,165,0,0.12);
  border-color: rgba(255,165,0,0.45);
  color: rgba(255,200,100,0.95);
}
.btn-kindle:hover { background: rgba(255,165,0,0.22); transform: translateY(-2px); }

.btn-apple {
  background: rgba(252,60,68,0.12);
  border-color: rgba(252,60,68,0.40);
  color: rgba(255,150,150,0.92);
}
.btn-apple:hover { background: rgba(252,60,68,0.22); transform: translateY(-2px); }

/* ── Books Grid ── */
.books-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.75rem;
  margin-top: 2rem;
}
.book-card {
  background: linear-gradient(150deg, rgba(13,18,38,0.95), rgba(16,22,48,0.85));
  backdrop-filter: blur(10px);
  border: 1px solid var(--gold-border);
  border-radius: var(--r-md);
  padding: 1.75rem;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.book-card:hover {
  border-color: var(--gold-border-act);
  box-shadow: 0 12px 48px rgba(212,175,80,0.14), 0 0 72px rgba(212,175,80,0.05), inset 0 1px 0 rgba(255,255,255,0.04);
  transform: translateY(-8px) scale(1.015);
}
.book-card-cover {
  aspect-ratio: 2/3;
  overflow: hidden;
  margin: 1.25rem 0;
  border-radius: var(--r-sm);
  border: 1px solid var(--gold-border);
  background: rgba(4,6,18,0.5);
  transition: box-shadow 0.35s ease;
}
.book-card:hover .book-card-cover {
  box-shadow: 0 4px 20px rgba(212,175,80,0.08);
}
.book-card-cover img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.5s ease;
}
.book-card:hover .book-card-cover img {
  transform: scale(1.03);
}
.book-card-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.book-band { font-family:var(--font-heading); font-size:0.58rem; color:var(--gold-label); letter-spacing:0.15em; }
.book-status {
  font-family:var(--font-heading); font-size:0.54rem; letter-spacing:0.1em;
  padding:0.18rem 0.6rem; border-radius:var(--r-xs); border:1px solid;
  display:inline-flex; align-items:center; gap:0.3rem;
}
.status-available { color:rgba(100,200,100,0.85); background:rgba(100,200,100,0.08); border-color:rgba(100,200,100,0.3); }
.status-wip       { color:rgba(251,146,60,0.85); background:rgba(251,146,60,0.08); border-color:rgba(251,146,60,0.3); }
.status-planned   { color:var(--gold-muted); background:var(--gold-faint); border-color:var(--gold-border); }
.book-title { font-family:var(--font-heading); font-size:0.93rem; color:var(--text-heading); margin-bottom:0.25rem; }
.book-author { font-size:0.75rem; color:var(--gold-label); margin-bottom:0.75rem; font-style:italic; }
.book-desc { color:var(--text-body); font-size:0.82rem; line-height:1.76; margin-bottom:1rem; }

/* ── Featured Book Card (Band 1) ── */
.book-featured {
  display:grid; grid-template-columns:280px 1fr; gap:3rem; align-items:center;
  background: linear-gradient(150deg, rgba(13,18,38,0.95), rgba(16,22,48,0.85));
  backdrop-filter:blur(10px);
  border:1px solid var(--gold-border);
  border-radius:var(--r-lg); padding:2.5rem;
  transition:border-color 0.4s ease, box-shadow 0.4s ease;
}
.book-featured:hover {
  border-color:var(--gold-border-act);
  box-shadow:0 16px 60px rgba(212,175,80,0.1), 0 0 80px rgba(212,175,80,0.04);
}
.book-featured-cover {
  position:relative; border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--gold-border);
  box-shadow:0 8px 40px rgba(0,0,0,0.4), 0 0 30px rgba(212,175,80,0.06);
  transition:transform 0.5s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.5s ease;
}
.book-featured:hover .book-featured-cover {
  transform:translateY(-6px) rotate(-1deg);
  box-shadow:0 16px 50px rgba(0,0,0,0.5), 0 0 40px rgba(212,175,80,0.1);
}
.book-featured-cover img { width:100%; display:block; }
.book-featured-top {
  display:flex; align-items:center; gap:0.75rem; margin-bottom:0.5rem;
}
.book-featured-label {
  font-family:var(--font-heading); font-size:0.58rem; letter-spacing:0.35em;
  color:var(--gold-label); text-transform:uppercase;
}
.book-featured-title {
  font-family:var(--font-heading); font-size:clamp(1.6rem,4vw,2.4rem);
  color:var(--gold-bright); text-shadow:var(--glow-gold);
  margin-bottom:0.3rem;
}
.book-featured-desc {
  color:var(--text-body); font-size:0.92rem; line-height:1.85; margin:1rem 0;
}
.book-featured-meta {
  display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.75rem;
}
.book-featured-meta span {
  font-family:var(--font-heading); font-size:0.55rem; letter-spacing:0.12em;
  color:var(--gold-label); background:var(--gold-faint);
  border:1px solid var(--gold-border); border-radius:999px;
  padding:0.3rem 0.85rem;
}

/* ── Compact Book Cards (Band 2-5) ── */
.books-grid-compact {
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:1.5rem; margin-top:2rem;
}
.book-card-compact {
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, rgba(13,18,38,0.95), rgba(16,22,48,0.85));
  backdrop-filter:blur(10px);
  border:1px solid var(--gold-border); border-radius:var(--r-md);
  padding:2rem 1.75rem 1.75rem;
  transition:border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.book-card-compact:hover {
  border-color:var(--gold-border-act);
  box-shadow:0 12px 48px rgba(212,175,80,0.12), 0 0 60px rgba(212,175,80,0.04), inset 0 1px 0 rgba(255,255,255,0.04);
  transform:translateY(-6px) scale(1.01);
}

/* Dekorative Hintergrund-Nummer */
.book-card-compact-numeral {
  position:absolute; top:-0.15em; right:0.2em;
  font-family:var(--font-heading); font-size:7rem; font-weight:800;
  color:rgba(212,175,80,0.04); line-height:1;
  pointer-events:none; user-select:none;
  transition:color 0.5s ease, text-shadow 0.5s ease;
}
.book-card-compact:hover .book-card-compact-numeral {
  color:rgba(212,175,80,0.08);
  text-shadow:0 0 60px rgba(212,175,80,0.06);
}

/* Animated border glow on hover */
.book-card-compact::before {
  content:''; position:absolute; inset:-1px;
  border-radius:inherit;
  background:conic-gradient(from 0deg, transparent 0%, rgba(212,175,80,0.25) 25%, transparent 50%, rgba(212,175,80,0.15) 75%, transparent 100%);
  opacity:0;
  transition:opacity 0.5s ease;
  z-index:-1;
}
.book-card-compact:hover::before {
  opacity:1;
  animation:borderRotate 4s linear infinite;
}
@keyframes borderRotate {
  to { transform:rotate(360deg); }
}

.book-card-compact .book-status { margin-bottom:0.6rem; position:relative; z-index:1; }
.book-card-compact .book-title { font-size:1rem; position:relative; z-index:1; }
.book-card-compact .book-author { position:relative; z-index:1; }
.book-card-compact .book-desc { font-size:0.82rem; margin-bottom:1rem; position:relative; z-index:1; }
.btn-sm { padding:0.65rem 1.4rem; font-size:0.65rem; }
.book-card-compact .btn { position:relative; z-index:1; }

/* ── Book Hero (Detailseiten) ── */
.book-hero {
  position:relative; z-index:1;
  padding:9rem var(--pad) 5rem;
  border-bottom:1px solid var(--gold-border);
}
.book-hero-grid {
  display:grid; grid-template-columns:200px 1fr; gap:3rem; align-items:start;
  max-width:var(--max-w); margin:0 auto;
}
.book-cover {
  width: 200px;
  border-radius:var(--r-sm); overflow:hidden;
  border:1px solid var(--gold-border);
  box-shadow:0 0 35px rgba(212,175,80,0.12);
}
.book-cover img {
  width:100%;
  height:auto;
  min-height:280px;
  aspect-ratio: 2 / 3.18;
  display:block;
  object-fit:cover;
  object-position:center;
}
.book-meta h1 {
  font-size:clamp(1.5rem,4vw,2.5rem);
  color:var(--gold-bright); text-shadow:var(--glow-gold);
  margin-bottom:0.3rem;
}
.book-meta h2 {
  font-size:clamp(0.9rem,2.5vw,1.4rem);
  color:var(--gold-muted); margin-bottom:1rem; font-weight:600;
}
.book-meta p { color:var(--text-body); font-size:0.9rem; line-height:1.82; margin-bottom:1.5rem; }
.book-meta-buttons { display:flex; gap:0.75rem; flex-wrap:wrap; }
.book-status-badge { margin-bottom:1rem; }

/* ── Chronicle ── */
.story-source {
  font-family:var(--font-heading); font-size:0.58rem; letter-spacing:0.22em;
  color:var(--gold-label); margin-bottom:0.5rem;
}
.chronicle-entry {
  border-left:2px solid var(--gold-border-act);
  padding:0.75rem 1rem 0.75rem 1.25rem;
  margin-bottom:1.25rem;
  background:var(--gold-faint);
  border-radius:0 var(--r-xs) var(--r-xs) 0;
}
.chronicle-label {
  font-family:var(--font-heading); font-size:0.58rem; letter-spacing:0.22em;
  color:var(--gold-label); display:block; margin-bottom:0.35rem;
}
.chronicle-text { color:var(--text-body); font-size:0.875rem; line-height:1.82; }

/* Abilities Grid */
.abilities-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1rem; margin:1.5rem 0;
}
.ability-card {
  background:var(--bg-card); border:1px solid var(--gold-border);
  border-radius:var(--r-sm); padding:1.25rem 1rem; text-align:center;
  transition:all var(--t-fast); cursor:pointer;
}
.ability-card:hover {
  border-color:var(--gold-border-act); transform:translateY(-2px); box-shadow:var(--glow-gold);
}
.ability-icon { font-size:1.5rem; margin-bottom:0.5rem; }
.ability-name {
  font-family:var(--font-heading); font-size:0.72rem;
  color:var(--text-heading); margin-bottom:0.25rem; letter-spacing:0.1em;
}
.ability-desc { font-size:0.67rem; color:var(--gold-label); }

/* Archivar Note */
.archivar-note {
  display:flex; gap:0.75rem; align-items:flex-start;
  background:rgba(180,60,60,0.06);
  border:1px solid rgba(180,60,60,0.2);
  border-radius:var(--r-xs); padding:0.75rem 1rem; margin-top:1rem;
}
.note-icon { font-size:1rem; flex-shrink:0; }
.archivar-note div { font-size:0.8rem; color:var(--text-body); line-height:1.72; }
.archivar-note strong { color:rgba(220,150,100,0.9); }
.warning { color:var(--red-400); font-weight:600; }

/* Artifact Section */
.artifact-section { padding:5rem 0; background:rgba(212,175,80,0.025); }
.artifact-label {
  font-family:var(--font-heading); font-size:0.58rem; letter-spacing:0.32em;
  color:var(--gold-label); text-align:center; margin-bottom:0.5rem;
}
.artifact-title {
  font-family:var(--font-heading); font-size:clamp(1.5rem,4vw,2.5rem);
  color:var(--gold-bright); text-shadow:var(--glow-title);
  text-align:center; margin-bottom:3rem;
}
.artifact-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:start;
  max-width:var(--max-w); margin:0 auto; padding:0 var(--pad);
}
.artifact-text h3 {
  font-size:1.05rem; color:var(--gold-text); margin-bottom:1rem;
}
.artifact-text p {
  color:var(--text-body); font-size:0.875rem; line-height:1.85; margin-bottom:1rem;
}
.artifact-features {
  display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.25rem;
}
.artifact-feature { padding:1rem; text-align:center; }
.artifact-feature-icon { font-size:1.4rem; margin-bottom:0.5rem; }
.artifact-feature h4 { font-size:0.77rem; color:var(--text-heading); margin-bottom:0.35rem; }
.artifact-feature p { font-size:0.75rem; color:var(--text-body); }

/* Buy Section */
.buy-section { padding:5rem 0; text-align:center; }
.buy-card { max-width:500px; margin:2rem auto 0; }
.buy-card-inner { display:flex; gap:1.5rem; align-items:center; }
.buy-info h3 { font-size:1rem; color:var(--text-heading); margin-bottom:0.35rem; }
.buy-info p { color:var(--text-body); font-size:0.82rem; margin-bottom:1rem; }

/* Epos List */
.epos-list { display:flex; flex-direction:column; gap:1.25rem; }
.epos-list li {
  padding:1rem 1.25rem;
  border-left:2px solid var(--gold-border-act);
  background:var(--gold-faint);
  color:var(--text-body); font-size:0.875rem; line-height:1.85;
  border-radius:0 var(--r-xs) var(--r-xs) 0;
}
.epos-list li strong {
  font-family:var(--font-heading); font-size:0.78rem; letter-spacing:0.05em;
  color:var(--text-heading); display:block; margin-bottom:0.35rem;
}

/* ── Timeline Filter Tabs — Farbig ── */
.timeline-filter {
  display:flex; gap:0.75rem; justify-content:center; flex-wrap:wrap;
}
.timeline-rank-tab {
  position:relative; overflow:hidden;
  display:flex; align-items:center; gap:0.65rem;
  font-family:var(--font-heading);
  font-size:0.7rem; font-weight:600; letter-spacing:0.12em;
  background:linear-gradient(150deg, rgba(13,18,38,0.95), rgba(16,22,48,0.85));
  backdrop-filter:blur(10px);
  border:1.5px solid rgba(100,100,140,0.2); border-radius:var(--r-md);
  padding:0.85rem 1.6rem;
  cursor:pointer; color:rgba(180,180,210,0.6);
  transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.tab-icon {
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:50%;
  font-family:var(--font-heading); font-weight:800; font-size:0.72rem;
  border:1.5px solid currentColor;
  transition:all 0.35s ease;
}
.tab-label { transition:color 0.35s ease; }

/* Shimmer */
.timeline-rank-tab::before {
  content:''; position:absolute; inset:0;
  background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 55%, transparent 80%);
  transform:translateX(-110%); border-radius:inherit;
}
.timeline-rank-tab:hover::before { animation:btnSweep 0.6s ease forwards; }

/* — Gold (Novize) — */
.tab-gold { color:rgba(212,175,80,0.5); border-color:rgba(212,175,80,0.2); }
.tab-gold .tab-icon { border-color:rgba(212,175,80,0.35); color:rgba(212,175,80,0.5); }
.tab-gold:hover {
  color:var(--gold-text); border-color:rgba(212,175,80,0.45);
  transform:translateY(-4px); box-shadow:0 8px 28px rgba(212,175,80,0.1);
}
.tab-gold:hover .tab-icon { background:rgba(212,175,80,0.1); border-color:rgba(212,175,80,0.5); color:var(--gold-bright); }
.tab-gold.active {
  color:var(--gold-bright); border-color:rgba(230,195,100,0.5);
  background:linear-gradient(150deg, rgba(212,175,80,0.14), rgba(200,170,80,0.05));
  box-shadow:0 0 36px rgba(212,175,80,0.14), 0 8px 24px rgba(212,175,80,0.06);
  transform:translateY(-2px);
}
.tab-gold.active .tab-icon {
  background:rgba(212,175,80,0.2); border-color:var(--gold-bright); color:var(--gold-bright);
  box-shadow:0 0 12px rgba(212,175,80,0.3);
}

/* — Purple (Adept) — */
.tab-purple { color:rgba(167,139,250,0.5); border-color:rgba(139,92,246,0.2); }
.tab-purple .tab-icon { border-color:rgba(139,92,246,0.35); color:rgba(167,139,250,0.5); }
.tab-purple:hover {
  color:#c4b5fd; border-color:rgba(139,92,246,0.45);
  transform:translateY(-4px); box-shadow:0 8px 28px rgba(139,92,246,0.1);
}
.tab-purple:hover .tab-icon { background:rgba(139,92,246,0.1); border-color:rgba(167,139,250,0.5); color:#c4b5fd; }
.tab-purple.active {
  color:#c4b5fd; border-color:rgba(139,92,246,0.5);
  background:linear-gradient(150deg, rgba(139,92,246,0.14), rgba(124,58,237,0.05));
  box-shadow:0 0 36px rgba(139,92,246,0.14), 0 8px 24px rgba(139,92,246,0.06);
  transform:translateY(-2px);
}
.tab-purple.active .tab-icon {
  background:rgba(139,92,246,0.2); border-color:#c4b5fd; color:#c4b5fd;
  box-shadow:0 0 12px rgba(139,92,246,0.3);
}

/* — Red/Fire (Magister) — */
.tab-red { color:rgba(248,113,113,0.5); border-color:rgba(239,68,68,0.2); }
.tab-red .tab-icon { border-color:rgba(239,68,68,0.35); color:rgba(248,113,113,0.5); }
.tab-red:hover {
  color:#fca5a5; border-color:rgba(239,68,68,0.45);
  transform:translateY(-4px); box-shadow:0 8px 28px rgba(239,68,68,0.1);
}
.tab-red:hover .tab-icon { background:rgba(239,68,68,0.1); border-color:rgba(248,113,113,0.5); color:#fca5a5; }
.tab-red.active {
  color:#fca5a5; border-color:rgba(239,68,68,0.5);
  background:linear-gradient(150deg, rgba(239,68,68,0.14), rgba(220,38,38,0.05));
  box-shadow:0 0 36px rgba(239,68,68,0.14), 0 8px 24px rgba(239,68,68,0.06);
  transform:translateY(-2px);
}
.tab-red.active .tab-icon {
  background:rgba(239,68,68,0.2); border-color:#fca5a5; color:#fca5a5;
  box-shadow:0 0 12px rgba(239,68,68,0.3);
}

/* ── Gallery ── */
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.5rem; margin-top:1rem;
}
.gallery-card {
  background: linear-gradient(150deg, rgba(13,18,38,0.95), rgba(16,22,48,0.85));
  border:1px solid var(--gold-border);
  border-radius: var(--r-md); overflow:hidden;
  cursor:pointer;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
}
.gallery-card:hover {
  border-color:var(--gold-border-act);
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 10px 40px rgba(212,175,80,0.12), 0 0 60px rgba(212,175,80,0.04);
}
.gallery-image-container { position:relative; height:220px; overflow:hidden; border-radius: var(--r-md) var(--r-md) 0 0; }
.gallery-image-container img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.gallery-card:hover .gallery-image-container img { transform:scale(1.08); }
.gallery-badge {
  position:absolute; top:0.75rem; left:0.75rem;
  font-family:var(--font-heading); font-size:0.54rem; letter-spacing:0.12em;
  background:rgba(8,11,24,0.85); backdrop-filter:blur(4px);
  color:var(--gold-muted); border:1px solid var(--gold-border);
  padding:0.15rem 0.6rem; border-radius:var(--r-xs);
}
.gallery-content { padding:1rem 1.25rem 1.25rem; }
.gallery-title {
  font-family:var(--font-heading); font-size:0.85rem;
  color:var(--text-heading); margin-bottom:0.35rem;
}
.gallery-description { font-size:0.8rem; color:var(--text-body); line-height:1.72; }

/* Lightbox */
.gallery-lightbox {
  position:fixed; inset:0; z-index:3000;
  background:rgba(4,6,18,0.93); backdrop-filter:blur(8px);
  display:none; align-items:center; justify-content:center;
  flex-direction:column; gap:1rem; padding:2rem;
}
.gallery-lightbox.active { display:flex; }
.gallery-lightbox img {
  max-width:90vw; max-height:80vh; object-fit:contain;
  border:1px solid var(--gold-border); border-radius:var(--r-sm);
}
.gallery-lightbox-close {
  position:absolute; top:1.5rem; right:1.5rem;
  background:none; border:1px solid var(--gold-border);
  color:var(--gold-muted); font-size:1.2rem;
  width:36px; height:36px; border-radius:50%;
  cursor:pointer; transition:all var(--t-fast);
  display:flex; align-items:center; justify-content:center;
}
.gallery-lightbox-close:hover { color:var(--gold-text); border-color:var(--gold-border-act); }
.gallery-lightbox-caption {
  color:var(--gold-muted); font-family:var(--font-heading);
  font-size:0.7rem; letter-spacing:0.15em;
}

/* ── Timeline ── */
.timeline { position:relative; padding-left:2.5rem; max-width:720px; margin:0 auto; }
.timeline::before {
  content:''; position:absolute; left:0; top:0; bottom:0; width:1px;
  background:linear-gradient(180deg,transparent,var(--gold-border),var(--gold-border-act),var(--gold-border),transparent);
}
.timeline-event { position:relative; margin-bottom:2.5rem; }
.timeline-event::before {
  content:'\2726'; position:absolute; left:-2.15rem; top:0.12rem;
  color:var(--gold-border-act); font-size:0.62rem;
}
.timeline-date {
  font-family:var(--font-heading); font-size:0.58rem; letter-spacing:0.22em;
  color:var(--gold-label); margin-bottom:0.3rem;
}
.timeline-title {
  font-family:var(--font-heading); font-size:0.9rem; color:var(--text-heading);
  margin-bottom:0.5rem; letter-spacing:0.05em;
  display:flex; align-items:center; gap:0.75rem; flex-wrap:wrap;
}
.timeline-desc { color:var(--text-body); font-size:0.82rem; line-height:1.8; }
.timeline-rank-badge { font-size:0.5rem; }
.timeline-event.hidden { display:none; }

/* ── Search ── */
.search-container {
  position:relative; margin-bottom:1rem;
  display:flex; align-items:center;
  background:var(--bg-card); border:1px solid var(--gold-border-act);
  border-radius:var(--r-xs); padding:0 1rem;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.search-container:focus-within {
  border-color:var(--gold-mid); box-shadow:var(--glow-gold);
}
.search-icon { color:var(--gold-label); font-size:1rem; flex-shrink:0; margin-right:0.5rem; }
.search-input {
  flex:1; background:none; border:none; outline:none;
  font-family:var(--font-body); font-size:0.875rem;
  color:var(--text-body); padding:0.9rem 0;
}
.search-input::placeholder { color:var(--text-muted); }
.search-filters { display:flex; gap:0.75rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.search-select {
  background:var(--bg-card); border:1px solid var(--gold-border);
  color:var(--gold-muted); font-family:var(--font-heading);
  font-size:0.62rem; letter-spacing:0.1em;
  padding:0.52rem 0.95rem; border-radius:var(--r-xs);
  cursor:pointer; outline:none;
  transition:all var(--t-fast);
}
.search-select:focus { border-color:var(--gold-border-act); color:var(--gold-text); }
.search-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1rem;
}
.search-entry { display:block; }
.search-entry.hidden { display:none; }

/* ── FAQ ── */
.faq-list { max-width:780px; margin:0 auto; }
.faq-item { margin-bottom:0.5rem; }
.faq-question {
  display:flex; align-items:center; justify-content:space-between;
  width:100%;
  background:var(--gold-faint); border:1px solid var(--gold-border);
  border-radius:var(--r-xs); padding:1rem 1.25rem;
  cursor:pointer; text-align:left;
  color:var(--text-body); font-size:0.875rem;
  transition:all var(--t-fast);
}
.faq-question:hover {
  border-color:var(--gold-border-act); color:var(--text-heading);
  background:var(--gold-subtle);
}
.faq-icon { margin-right:0.5rem; }
.faq-answer {
  max-height:0; overflow:hidden;
  transition:max-height 0.42s ease, padding var(--t-med);
  border:1px solid var(--gold-border); border-top:none;
  border-radius:0 0 var(--r-xs) var(--r-xs);
  padding:0 1.25rem;
  background:rgba(212,175,80,0.03);
}
.faq-item.open .faq-answer { max-height:320px; padding:1rem 1.25rem; }
.faq-item.open .accordion-icon { transform:rotate(180deg); }
.faq-answer p { color:var(--text-body); font-size:0.875rem; line-height:1.82; }
.faq-contact { text-align:center; margin-top:3rem; }
.faq-contact-icon { font-size:2.5rem; margin-bottom:1rem; }
.faq-contact h3 { font-size:1rem; color:var(--text-heading); margin-bottom:0.5rem; }
.faq-contact p { color:var(--text-body); font-size:0.875rem; }

/* ── Music ── */
.music-platforms { display:flex; gap:1rem; flex-wrap:wrap; justify-content:center; margin:2rem 0; }
.music-card {
  background:var(--bg-card); border:1px solid rgba(252,60,68,0.3);
  border-radius:var(--r-sm); padding:1.5rem; text-align:center; max-width:220px;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.music-card:hover { border-color:rgba(252,60,68,0.5); box-shadow:0 0 20px rgba(252,60,68,0.08); }
.music-card-icon { font-size:2rem; margin-bottom:0.75rem; }
.music-card-name {
  font-family:var(--font-heading); font-size:0.75rem;
  letter-spacing:0.15em; color:var(--text-heading); margin-bottom:1rem;
}
.about-music { margin-top:3rem; }
.about-music h3 { font-size:1rem; color:var(--text-heading); margin-bottom:1rem; }
.about-music p { color:var(--text-body); font-size:0.875rem; line-height:1.82; margin-bottom:0.75rem; }

/* ── Footer ── */
.footer {
  padding:3.5rem var(--pad); border-top:1px solid var(--gold-border);
  text-align:center; position:relative; z-index:1;
  background:rgba(8,11,24,0.65);
}
.footer-logo {
  font-family:var(--font-heading); font-size:1rem; letter-spacing:0.3em;
  color:var(--gold-text); text-shadow:var(--glow-gold); margin-bottom:0.75rem;
}
.footer-tagline { color:var(--text-note); font-size:0.82rem; font-style:italic; margin-bottom:1rem; }
.footer-links {
  display:flex; gap:0.5rem; justify-content:center; align-items:center;
  margin-bottom:0.75rem; flex-wrap:wrap;
}
.footer-links a {
  font-family:var(--font-heading); font-size:0.6rem; letter-spacing:0.12em;
  color:var(--gold-label);
}
.footer-links a:hover { color:var(--gold-text); }
.footer-dot { color:var(--gold-border); }
.footer-copyright { font-size:0.7rem; color:var(--text-muted); }
/* Legacy compat */
.dot { color:var(--gold-border); margin:0 0.25rem; }
.fire-icon { margin-right:0.25rem; }

/* ── Legal Pages ── */
.legal-page { padding:9rem var(--pad) 5rem; position:relative; z-index:1; }
.legal-page h1 {
  font-size:clamp(1.5rem,4vw,2.2rem);
  color:var(--gold-bright); text-shadow:var(--glow-gold); margin-bottom:2rem;
}
.legal-page h2 { font-size:1rem; color:var(--text-heading); margin:1.75rem 0 0.5rem; }
.legal-page h3 { font-size:0.88rem; color:var(--gold-muted); margin:1.25rem 0 0.35rem; }
.legal-page p  { color:var(--text-body); font-size:0.875rem; line-height:1.85; }
.legal-page ul { color:var(--text-body); font-size:0.875rem; line-height:1.85; padding-left:1.25rem; }
.legal-page ul li { list-style:disc; margin-bottom:0.25rem; }
.legal-page a { color:var(--gold-muted); text-decoration:underline; }

/* ── Animations ── */
@keyframes titleGlow {
  0%, 100% { text-shadow: var(--glow-title); }
  50% { text-shadow: 0 0 60px rgba(240,210,100,0.52), 0 0 130px rgba(212,175,80,0.18); }
}

@keyframes auraPulse {
  0%, 100% { transform:scale(0.95); opacity:0.72; }
  50% { transform:scale(1.06); opacity:1; }
}

@keyframes artifactFloat {
  0%, 100% { translate:0 0; }
  50% { translate:0 -16px; }
}

@keyframes ringSpin {
  to { rotate:360deg; }
}

@keyframes ringSpinReverse {
  to { rotate:-360deg; }
}

@keyframes corePulse {
  0%, 100% { transform:translateZ(90px) scale(0.95); filter:saturate(1); }
  50% { transform:translateZ(105px) scale(1.05); filter:saturate(1.25); }
}

@keyframes flameWaver {
  from { transform:skewX(-4deg) scaleY(0.94); opacity:0.76; }
  to { transform:skewX(5deg) scaleY(1.08); opacity:1; }
}

@keyframes daggerHover {
  0%, 100% { translate:0 0; rotate:0deg; }
  50% { translate:0 -12px; rotate:3deg; }
}

@keyframes nodePulse {
  0%, 100% { transform:scale(0.85); opacity:0.58; }
  50% { transform:scale(1.35); opacity:1; }
}

@keyframes btnSweep {
  from { transform: translateX(-110%); }
  to { transform: translateX(110%); }
}

@keyframes sigilSweep {
  from { transform:translateX(-110%); }
  to   { transform:translateX(110%); }
}

@keyframes rankReveal {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

@keyframes fadeInUp {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes typewriter-blink {
  0%, 100% { opacity:1; }
  50%       { opacity:0; }
}

.fade-in-up {
  opacity:0; transform:translateY(28px);
  transition:opacity 0.72s ease, transform 0.72s ease;
}
.fade-in-up.visible { opacity:1; transform:translateY(0); }
.fade-in-up.delay-1 { transition-delay:0.12s; }
.fade-in-up.delay-2 { transition-delay:0.24s; }
.fade-in-up.delay-3 { transition-delay:0.36s; }
.fade-in-up.delay-4 { transition-delay:0.48s; }
/* Legacy support */
.fade-in { opacity:0; transform:translateY(20px); transition:opacity 0.7s ease, transform 0.7s ease; }
.fade-in.visible { opacity:1; transform:translateY(0); }

/* ── Responsive ── */
@media (max-width:900px) {
  .hero-grid {
    grid-template-columns:1fr;
    text-align:center;
    gap:1rem;
  }
  .page-home .hero {
    padding-top:7rem;
  }
  .page-home .hero-content {
    text-align:center;
    margin:0 auto;
  }
  .page-home .hero-line {
    margin-left:auto;
    margin-right:auto;
  }
  .page-home .hero-buttons,
  .hero-proof {
    justify-content:center;
  }
  .page-home .hero-runes {
    text-align:center;
  }
  .next-chapter-cue {
    text-align:center;
  }
  .hero-stage {
    min-height:700px;
  }
  .codex-slab {
    right:auto;
    top:calc(50% + 300px);
  }
  .hero-artifact-card {
    width:min(520px, 84vw);
  }
  .codex-hero {
    grid-template-columns:1fr;
  }
  .codex-hero-dossier {
    max-width:520px;
  }
}
@media (max-width:900px) {
  .navbar { width:calc(100% - 1.5rem); border-radius:var(--r-lg); padding:0.6rem 1rem; }
  .nav-links {
    display:none; flex-direction:column; gap:0.5rem;
    position:absolute; top:calc(100% + 0.75rem); left:0; right:0;
    background:rgba(8,11,26,0.92); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
    padding:1.25rem; border-radius:var(--r-lg);
    border:1px solid rgba(212,175,80,0.12);
    box-shadow:0 8px 32px rgba(0,0,0,0.4);
  }
  .nav-links.open { display:flex; }
  .nav-links a { padding:0.65rem 1rem; border-radius:var(--r-sm); }
  .nav-toggle { display:flex; }
  .artifact-grid { grid-template-columns:1fr; gap:2rem; }
  .story-grid,
  .promise-grid {
    grid-template-columns:1fr;
  }
  .promise-card {
    min-height:auto;
  }
  .codex-tools,
  .rank-tabs {
    grid-template-columns:1fr;
  }
  .codex-hero {
    padding-top:8rem;
  }
  .codex-hero-copy {
    padding-left:0;
  }
}
@media (max-width:720px) {
  .book-hero-grid { grid-template-columns:1fr; gap:2rem; }
  .book-cover { max-width:240px; }
  .hero-title { letter-spacing:0.12em; padding-right:0.12em; }
  .page-home .hero-title {
    font-size:clamp(2rem, 10.2vw, 3.25rem);
    letter-spacing:0.045em;
    margin-right:-0.045em;
    padding-right:0;
  }
  .hero-kicker {
    font-size:0.55rem;
    letter-spacing:0.18em;
    max-width:32ch;
    margin-left:auto;
    margin-right:auto;
  }
  .hero-stage {
    min-height:610px;
  }
  .stellar-orbit {
    width:min(330px, 82vw);
  }
  .hero-artifact-card {
    width:min(360px, 86vw);
    aspect-ratio:4 / 3;
  }
  .hero-cover-card {
    width:min(220px, 58vw);
    aspect-ratio:702 / 1120;
  }
  .codex-slab {
    width:min(230px, 68vw);
    left:50%;
    top:calc(50% + 220px);
    bottom:auto;
    transform:translateX(-50%) translateY(22px) translate(var(--parallax-x, 0), var(--parallax-y, 0)) translateZ(16px) rotateX(calc(4deg + var(--tilt-x))) rotateY(calc(-6deg + var(--tilt-y)));
  }
  .book-featured { grid-template-columns:1fr; gap:2rem; text-align:center; }
  .book-featured-cover { max-width:220px; margin:0 auto; }
  .book-featured-info { text-align:center; }
  .book-featured-meta { justify-content:center; }
  .book-featured-info > div:last-child { justify-content:center; }
}
@media (max-width:540px) {
  .books-grid { grid-template-columns:1fr; }
  .books-grid-compact { grid-template-columns:1fr; }
  .book-card-compact-numeral { font-size:5rem; }
  .buy-card-inner { flex-direction:column; text-align:center; }
  .artifact-features { grid-template-columns:1fr; }
  .hero-buttons { flex-direction:column; align-items:center; }
  .btn {
    width:min(100%, 320px);
    white-space:normal;
  }
  .hero-proof span {
    flex:1 1 100%;
    justify-content:center;
  }
  .truth-card,
  .lore-panel,
  .seal-note {
    padding:1.25rem;
  }
  .codex-hero {
    min-height:auto;
    padding:7.5rem var(--pad) 2.5rem;
  }
  .codex-hero::before {
    inset:6rem 0.75rem 1.25rem;
  }
  .codex-hero .page-hero-title,
  .codex-hero .page-hero-label,
  .codex-hero .page-hero-sub {
    text-align:center;
  }
  .archive-entry-head,
  .accordion-header {
    flex-direction:column;
    align-items:flex-start;
  }
  .stamp {
    opacity:0.45;
  }
  .spoiler-warning-buttons { flex-direction:column; }
  .book-featured { padding:1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:0.001ms !important;
  }
}