/* ============ BASE ============ */
:root{
  --bg:#0a0705;
  --bg-2:#120a08;
  --bg-3:#1a100c;
  --ink:#f4e9d8;
  --ink-dim:#a89684;
  --gold:#d4a24c;
  --gold-2:#f0c674;
  --red:#8b1a1a;
  --border:rgba(212,162,76,.18);
  --f-display:'Cinzel', serif;
  --f-body:'Inter', system-ui, sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{
  scroll-behavior:smooth;
  background:var(--bg);
  --scroll-px:0;
  --scroll-ratio:0;
  scrollbar-width:thin;
  scrollbar-color:var(--gold) #06040a;
}

/* ============ CUSTOM SCROLLBAR ============ */
::-webkit-scrollbar{
  width:12px;
  height:12px;
}
::-webkit-scrollbar-track{
  background:
    linear-gradient(90deg, transparent, rgba(212,162,76,.05), transparent),
    #06040a;
  border-left:1px solid rgba(212,162,76,.12);
  border-right:1px solid rgba(212,162,76,.12);
}
::-webkit-scrollbar-thumb{
  background:
    linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 50%, #8b5a1a 100%);
  border:2px solid #06040a;
  border-radius:0;
  box-shadow:
    inset 0 0 0 1px rgba(10,7,5,.4),
    inset 0 8px 8px rgba(0,0,0,.25),
    0 0 10px rgba(212,162,76,.35);
  transition:box-shadow .3s ease;
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, #fff3d6 0%, var(--gold-2) 50%, var(--gold) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(10,7,5,.4),
    0 0 18px rgba(240,198,116,.6);
}
::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg, var(--gold), #6b3a0a);
}
::-webkit-scrollbar-corner{background:#06040a}

/* ============ SCROLL PROGRESS ============ */
.scroll-progress{
  position:fixed;
  top:0;left:0;
  height:2px;
  width:100%;
  transform-origin:left center;
  transform:scaleX(var(--scroll-ratio));
  background:linear-gradient(90deg,transparent 0%, var(--gold) 20%, var(--gold-2) 50%, var(--gold) 80%, transparent 100%);
  box-shadow:0 0 14px rgba(240,198,116,.65), 0 0 28px rgba(212,162,76,.35);
  z-index:200;
  pointer-events:none;
  will-change:transform;
}
.scroll-progress::after{
  content:'';
  position:absolute;
  right:-4px;top:-2px;
  width:8px;height:6px;
  background:var(--gold-2);
  box-shadow:0 0 18px var(--gold-2), 0 0 36px rgba(240,198,116,.7);
  clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);
}
body{
  background:transparent;
  color:var(--ink);
  font-family:var(--f-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* ============ DYNAMIC SCENE ============ */
.scene{
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  overflow:hidden;
  perspective:1200px;
}
.scene__void{
  position:absolute;inset:-10%;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(139,26,26,.18), transparent 55%),
    radial-gradient(ellipse 70% 60% at 50% 100%, rgba(72,40,110,.22), transparent 55%),
    radial-gradient(circle at 20% 40%, rgba(16,10,20,.6), transparent 60%),
    linear-gradient(180deg,#07040a 0%,#0d0608 35%,#0a0510 70%,#05030a 100%);
}

/* AURORA CLOUDS — large drifting color fields */
.scene__aurora{
  position:absolute;
  border-radius:50%;
  filter:blur(110px);
  mix-blend-mode:screen;
  will-change:transform, opacity;
}
.scene__aurora--a{
  top:-15%;left:-10%;
  width:70vw;height:70vw;
  background:radial-gradient(circle, rgba(212,162,76,.55) 0%, rgba(212,162,76,.2) 35%, transparent 65%);
  animation:auroraA 26s ease-in-out infinite;
  transform:translate3d(calc(var(--scroll-px) * 0.05px), calc(var(--scroll-px) * -0.2px), 0);
}
.scene__aurora--b{
  top:20%;right:-20%;
  width:80vw;height:80vw;
  background:radial-gradient(circle, rgba(168,26,58,.5) 0%, rgba(139,26,26,.18) 40%, transparent 65%);
  animation:auroraB 32s ease-in-out infinite;
  transform:translate3d(calc(var(--scroll-px) * -0.08px), calc(var(--scroll-px) * 0.15px), 0);
}
.scene__aurora--c{
  bottom:-30%;left:10%;
  width:90vw;height:90vw;
  background:radial-gradient(circle, rgba(86,52,140,.45) 0%, rgba(72,40,110,.15) 40%, transparent 65%);
  animation:auroraC 38s ease-in-out infinite;
  transform:translate3d(calc(var(--scroll-px) * 0.09px), calc(var(--scroll-px) * -0.25px), 0);
}
.scene__aurora--d{
  top:45%;left:25%;
  width:55vw;height:55vw;
  background:radial-gradient(circle, rgba(78,168,214,.28) 0%, rgba(78,168,214,.08) 40%, transparent 65%);
  animation:auroraD 44s ease-in-out infinite;
  transform:translate3d(calc(var(--scroll-px) * -0.04px), calc(var(--scroll-px) * 0.18px), 0);
}
@keyframes auroraA{
  0%,100%{opacity:.55;translate:0 0;scale:1}
  33%{opacity:.85;translate:6vw 3vh;scale:1.15}
  66%{opacity:.65;translate:-4vw 6vh;scale:.95}
}
@keyframes auroraB{
  0%,100%{opacity:.5;translate:0 0;scale:1}
  50%{opacity:.8;translate:-5vw -4vh;scale:1.18}
}
@keyframes auroraC{
  0%,100%{opacity:.45;translate:0 0;scale:1}
  40%{opacity:.7;translate:7vw -5vh;scale:1.1}
  75%{opacity:.55;translate:-6vw 4vh;scale:1.05}
}
@keyframes auroraD{
  0%,100%{opacity:.3;translate:0 0;scale:1}
  50%{opacity:.55;translate:4vw -3vh;scale:1.2}
}

/* CANVAS STARFIELD */
.scene__stars{
  position:absolute;
  inset:0;
  width:100%;height:100%;
  opacity:.9;
}

/* MAGIC CIRCLES — counter-rotating runic sigils */
.scene__sigil{
  position:absolute;
  will-change:transform;
  pointer-events:none;
  opacity:.07;
  filter:drop-shadow(0 0 30px rgba(212,162,76,.3));
}
.scene__sigil svg{display:block;width:100%;height:100%}
.scene__sigil--outer{
  top:50%;left:50%;
  width:min(85vmin,900px);
  height:min(85vmin,900px);
  margin:calc(min(85vmin,900px) / -2) 0 0 calc(min(85vmin,900px) / -2);
  animation:sigilSpin 180s linear infinite;
}
.scene__sigil--inner{
  top:50%;left:50%;
  width:min(50vmin,540px);
  height:min(50vmin,540px);
  margin:calc(min(50vmin,540px) / -2) 0 0 calc(min(50vmin,540px) / -2);
  opacity:.12;
  animation:sigilSpinReverse 110s linear infinite, sigilPulse 8s ease-in-out infinite;
}
@keyframes sigilSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
@keyframes sigilSpinReverse{
  from{transform:rotate(0deg)}
  to{transform:rotate(-360deg)}
}
@keyframes sigilPulse{
  0%,100%{filter:drop-shadow(0 0 30px rgba(240,198,116,.25))}
  50%{filter:drop-shadow(0 0 55px rgba(240,198,116,.5))}
}

/* EMBERS */
.scene__embers{position:absolute;inset:0}
.scene__embers i{
  position:absolute;
  bottom:-10px;
  left:var(--x);
  width:3px;height:3px;
  border-radius:50%;
  background:var(--gold-2);
  box-shadow:0 0 6px var(--gold-2),0 0 16px rgba(212,162,76,.65);
  animation:emberRise var(--t) linear infinite;
  animation-delay:var(--d);
  opacity:0;
  will-change:transform, opacity;
}
.scene__embers i:nth-child(3n){
  width:2px;height:2px;
  background:var(--ink);
  box-shadow:0 0 4px rgba(244,233,216,.7),0 0 10px rgba(244,233,216,.3);
}
.scene__embers i:nth-child(5n){
  width:4px;height:4px;
  background:#e8864a;
  box-shadow:0 0 8px #c74a2a, 0 0 18px rgba(199,74,42,.5);
}
@keyframes emberRise{
  0%{transform:translate3d(0,0,0) scale(.6);opacity:0}
  10%{opacity:.8}
  55%{transform:translate3d(calc(var(--drift) / 2),-55vh,0) scale(1);opacity:.6}
  100%{transform:translate3d(var(--drift),-115vh,0) scale(.2);opacity:0}
}

/* MIST — slow-drifting atmospheric texture */
.scene__mist{
  position:absolute;
  inset:-20%;
  background-image:
    radial-gradient(ellipse 40% 30% at 20% 30%, rgba(244,233,216,.025), transparent 60%),
    radial-gradient(ellipse 50% 40% at 80% 70%, rgba(244,233,216,.02), transparent 60%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cpath d='M80 14 L86 70 L142 80 L86 90 L80 146 L74 90 L18 80 L74 70 Z' fill='%23d4a24c' opacity='.02'/%3E%3C/svg%3E");
  animation:mistDrift 90s linear infinite;
  mix-blend-mode:overlay;
}
@keyframes mistDrift{
  from{background-position:0 0, 0 0, 0 0}
  to{background-position:0 0, 0 0, 640px 640px}
}

/* VIGNETTE */
.scene__vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse 100% 80% at 50% 50%, transparent 45%, rgba(5,3,2,.55) 100%);
  pointer-events:none;
}

@media (prefers-reduced-motion:reduce){
  .scene__aurora,.scene__sigil,.scene__embers i,.scene__mist{animation:none}
}
@media (max-width:960px){
  .scene__aurora{filter:blur(70px)}
  .scene__sigil--outer{width:min(110vmin,700px);height:min(110vmin,700px);margin:calc(min(110vmin,700px) / -2) 0 0 calc(min(110vmin,700px) / -2)}
  .scene__sigil--inner{width:min(70vmin,420px);height:min(70vmin,420px);margin:calc(min(70vmin,420px) / -2) 0 0 calc(min(70vmin,420px) / -2)}
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,h5{font-family:var(--f-display);font-weight:700;letter-spacing:.02em;line-height:1.15}

/* ============ UTILS ============ */
.eyebrow{
  font-family:var(--f-body);
  font-size:.75rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:1rem;
}
.eyebrow--gold{color:var(--gold)}

.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:1rem 2rem;
  font-family:var(--f-display);
  font-size:.85rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  border:1px solid var(--gold);
  transition:all .3s ease;
  cursor:pointer;
  position:relative;
  overflow:hidden;
}
.btn--primary{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#1a0f05;
  font-weight:700;
}
.btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 40px rgba(212,162,76,.35);
}
.btn--ghost{
  background:transparent;
  color:var(--ink);
  border-color:rgba(244,233,216,.3);
}
.btn--ghost:hover{
  border-color:var(--gold);
  color:var(--gold);
}

.section-head{
  text-align:center;
  max-width:700px;
  margin:0 auto 4rem;
}
.section-head h2{
  font-size:clamp(2rem,4vw,3.5rem);
  margin-bottom:1rem;
}
.section-head__sub{color:var(--ink-dim);font-size:1.05rem}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;
  z-index:100;
  padding:1.25rem 0;
  background:linear-gradient(180deg,rgba(10,7,5,.9),rgba(10,7,5,0));
  backdrop-filter:blur(10px);
  transition:all .3s;
}
.nav.scrolled{
  background:rgba(10,7,5,.95);
  border-bottom:1px solid var(--border);
}
.nav__inner{
  max-width:1400px;margin:0 auto;
  padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;
  gap:2rem;
}
.logo{display:flex;align-items:center;gap:.6rem;font-family:var(--f-display);font-weight:900}
.logo__mark{color:var(--gold);font-size:1.4rem}
.logo__text{letter-spacing:.25em;font-size:1.1rem}
.logo__img{
  height:42px;
  width:auto;
  display:block;
  filter:drop-shadow(0 0 10px rgba(212,162,76,.25));
  transition:filter .3s ease, transform .3s ease;
}
.logo:hover .logo__img{
  filter:drop-shadow(0 0 16px rgba(240,198,116,.45));
  transform:scale(1.04);
}
/* Footer logo a bit bigger */
.footer__brand .logo__img{height:54px}
.nav__menu{
  display:flex;
  gap:1.8rem;
  position:relative;
}
.nav__menu a{
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--ink-dim);
  transition:color .35s ease, text-shadow .35s ease;
  position:relative;
  padding:.4rem .2rem;
}
.nav__menu a:hover{color:var(--gold)}
.nav__menu a.is-active{
  color:var(--gold-2);
  text-shadow:0 0 14px rgba(212,162,76,.45);
}
.nav__menu a::before{
  content:'✦';
  position:absolute;
  left:50%;
  top:-10px;
  transform:translateX(-50%) scale(.3);
  color:var(--gold-2);
  font-size:.55rem;
  opacity:0;
  transition:opacity .35s ease, transform .35s ease;
}
.nav__menu a.is-active::before{
  opacity:1;
  transform:translateX(-50%) scale(1);
  animation:navSigilPulse 2.4s ease-in-out infinite;
}
@keyframes navSigilPulse{
  0%,100%{opacity:.6;transform:translateX(-50%) scale(.9)}
  50%{opacity:1;transform:translateX(-50%) scale(1.15)}
}
/* Sliding gold marker under active nav item */
.nav__menu::after{
  content:'';
  position:absolute;
  bottom:-2px;
  left:0;
  width:var(--marker-w, 0px);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold-2) 25%, var(--gold-2) 75%, transparent);
  box-shadow:0 0 10px rgba(240,198,116,.7),0 0 20px rgba(212,162,76,.4);
  transform:translateX(var(--marker-x, 0px));
  opacity:var(--marker-o, 0);
  transition:
    transform .55s cubic-bezier(.4,0,.2,1),
    width .55s cubic-bezier(.4,0,.2,1),
    opacity .3s ease;
  pointer-events:none;
}
.nav__cta{
  padding:.7rem 1.4rem;
  border:1px solid var(--gold);
  color:var(--gold);
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-family:var(--f-display);
  transition:all .3s;
}
.nav__cta:hover{background:var(--gold);color:#1a0f05}
.nav__burger{display:none;background:none;border:none;cursor:pointer}
.nav__burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px 0}

/* ============ HERO ============ */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:0 2rem;
  overflow:hidden;
}
.hero__bg{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(10,7,5,.6) 80%),
    radial-gradient(circle at 30% 40%, rgba(139,26,26,.3), transparent 55%),
    radial-gradient(circle at 70% 60%, rgba(212,162,76,.12), transparent 55%);
}
.hero__overlay{
  position:absolute;inset:0;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cpath d='M50 10 L55 45 L90 50 L55 55 L50 90 L45 55 L10 50 L45 45 Z' fill='%23d4a24c' opacity='.03'/%3E%3C/svg%3E");
  opacity:.5;
  animation:drift 40s linear infinite;
}
@keyframes drift{
  from{background-position:0 0}
  to{background-position:400px 400px}
}
.hero__particles{
  position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 20% 30%, var(--gold), transparent),
    radial-gradient(1px 1px at 60% 70%, var(--gold-2), transparent),
    radial-gradient(2px 2px at 80% 20%, var(--gold), transparent),
    radial-gradient(1px 1px at 40% 80%, var(--ink), transparent),
    radial-gradient(1px 1px at 90% 50%, var(--gold-2), transparent);
  opacity:.4;
  animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{
  0%,100%{opacity:.3}
  50%{opacity:.6}
}
/* SLIDER */
.hero__slider{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1100px;
  min-height:60vh;
  display:flex;
  align-items:center;
  justify-content:center;
}
.hero__slide{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transform:scale(1.03);
  filter:blur(14px);
  /* Scattered soft mask — fade reveals from random points */
  -webkit-mask-image:
    radial-gradient(circle at 20% 30%, #000 0%, transparent 45%),
    radial-gradient(circle at 75% 20%, #000 0%, transparent 50%),
    radial-gradient(circle at 40% 75%, #000 0%, transparent 55%),
    radial-gradient(circle at 85% 70%, #000 0%, transparent 45%),
    radial-gradient(circle at 10% 85%, #000 0%, transparent 50%),
    radial-gradient(circle at 60% 45%, #000 0%, transparent 60%);
          mask-image:
    radial-gradient(circle at 20% 30%, #000 0%, transparent 45%),
    radial-gradient(circle at 75% 20%, #000 0%, transparent 50%),
    radial-gradient(circle at 40% 75%, #000 0%, transparent 55%),
    radial-gradient(circle at 85% 70%, #000 0%, transparent 45%),
    radial-gradient(circle at 10% 85%, #000 0%, transparent 50%),
    radial-gradient(circle at 60% 45%, #000 0%, transparent 60%);
  -webkit-mask-composite:source-over;
          mask-composite:add;
  -webkit-mask-size:180% 180%;
          mask-size:180% 180%;
  -webkit-mask-position:center;
          mask-position:center;
  transition:
    opacity 1.6s cubic-bezier(.22,.61,.36,1),
    transform 2s cubic-bezier(.22,.61,.36,1),
    filter 1.6s cubic-bezier(.22,.61,.36,1),
    -webkit-mask-size 2s cubic-bezier(.22,.61,.36,1),
            mask-size 2s cubic-bezier(.22,.61,.36,1);
  pointer-events:none;
  will-change:opacity, transform, filter;
}
.hero__slide.is-active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
  filter:blur(0);
  -webkit-mask-size:400% 400%;
          mask-size:400% 400%;
  pointer-events:auto;
}
.hero__slide.is-leaving{
  visibility:visible;
  opacity:0;
  transform:scale(.985);
  filter:blur(10px);
  -webkit-mask-size:220% 220%;
          mask-size:220% 220%;
}
.hero__slide.is-active .hero__content > *{
  animation:slideFadeUp 1.4s cubic-bezier(.22,.61,.36,1) backwards;
}
.hero__slide.is-active .hero__content > *:nth-child(1){animation-delay:.35s}
.hero__slide.is-active .hero__content > *:nth-child(2){animation-delay:.5s}
.hero__slide.is-active .hero__content > *:nth-child(3){animation-delay:.65s}
.hero__slide.is-active .hero__content > *:nth-child(4){animation-delay:.8s}
@keyframes slideFadeUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}

.hero__bubbles{display:none}

/* DOTS */
.hero__dots{
  position:absolute;
  bottom:-4rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:1rem;
  z-index:5;
}
.hero__dot{
  width:40px;
  height:2px;
  background:rgba(244,233,216,.2);
  border:none;
  cursor:pointer;
  padding:0;
  position:relative;
  overflow:hidden;
  transition:background .3s;
}
.hero__dot::after{
  content:'';
  position:absolute;
  inset:0;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s;
}
.hero__dot.is-active::after{
  animation:dotProgress 7s linear forwards;
}
@keyframes dotProgress{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}
.hero__dot:hover{background:rgba(244,233,216,.4)}

.hero__content{
  position:relative;
  z-index:2;
  max-width:900px;
  text-align:center;
}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:translateY(0)}
}
.hero__title{
  font-size:clamp(2.2rem,5.6vw,5rem);
  font-weight:900;
  margin-bottom:1.5rem;
  background:linear-gradient(180deg,#fff,var(--gold-2) 60%,var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 80px rgba(212,162,76,.2);
}
/* News badges in slider */
.news__meta{
  display:inline-flex;
  align-items:center;
  gap:.75rem;
  flex-wrap:wrap;
  justify-content:center;
  margin-bottom:1.2rem;
}
.news__badge{
  padding:.3rem .8rem;
  background:rgba(212,162,76,.15);
  border:1px solid var(--gold);
  color:var(--gold-2);
  font-family:var(--f-display);
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.25em;
  text-transform:uppercase;
}
.news__badge--new{
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#1a0f05;
  box-shadow:0 0 24px rgba(240,198,116,.35);
}
.news__badge--event{
  background:rgba(139,26,26,.25);
  border-color:#c74a2a;
  color:#f0a878;
}
.news__badge--alert{
  background:rgba(127,193,232,.12);
  border-color:#7fc1e8;
  color:#7fc1e8;
}
.news__cat{
  font-family:var(--f-display);
  font-size:.72rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink);
  padding:.3rem 0;
  border-bottom:1px solid var(--border);
}
.news__date{
  font-size:.72rem;
  letter-spacing:.18em;
  color:var(--ink-dim);
  text-transform:uppercase;
}
.hero__sub{
  font-size:1.02rem;
  color:var(--ink-dim);
  max-width:620px;
  margin:0 auto 2rem;
}
.hero__actions{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.hero__scroll{
  position:absolute;
  bottom:-6rem;left:50%;
  transform:translateX(-50%);
  display:none;
  font-size:.7rem;
  letter-spacing:.3em;
  color:var(--ink-dim);
  display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.hero__scroll-line{
  width:1px;height:40px;
  background:linear-gradient(180deg,var(--gold),transparent);
  animation:scrollPulse 2s ease-in-out infinite;
}
@keyframes scrollPulse{
  0%,100%{opacity:.3;transform:scaleY(.8)}
  50%{opacity:1;transform:scaleY(1)}
}

/* ============ STORY / CHRONICLE / WIKI ============ */
.story{
  padding:5rem 2rem 3rem;
  max-width:1400px;
  margin:0 auto;
  position:relative;
}
.story__watermark{
  position:absolute;
  font-family:var(--f-display);
  color:var(--gold);
  opacity:.04;
  font-size:32rem;
  line-height:.8;
  pointer-events:none;
  user-select:none;
  z-index:0;
  text-shadow:0 0 60px rgba(212,162,76,.3);
  top:4rem;right:-3rem;
  transform:rotate(-8deg);
}
.story > *:not(.story__watermark){position:relative;z-index:1}

/* Featured chronicle — parchment-style card */
.chronicle{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:3rem;
  align-items:center;
  padding:3rem;
  background:
    linear-gradient(135deg, rgba(26,16,12,.75), rgba(18,10,8,.55));
  border:1px solid var(--border);
  margin-bottom:5rem;
  position:relative;
  overflow:hidden;
}
.chronicle::before{
  content:'';
  position:absolute;inset:0;
  background:radial-gradient(ellipse at 20% 50%, rgba(212,162,76,.08), transparent 55%);
  pointer-events:none;
}
.chronicle::after{
  content:'';
  position:absolute;top:12px;left:12px;right:12px;bottom:12px;
  border:1px solid rgba(212,162,76,.12);
  pointer-events:none;
}
.chronicle__seal{
  position:relative;
  width:220px;height:220px;
  display:grid;place-items:center;
  animation:chronicleSpin 60s linear infinite;
  filter:drop-shadow(0 0 24px rgba(212,162,76,.35));
}
.chronicle__seal svg{width:100%;height:100%}
@keyframes chronicleSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.chronicle__body{
  max-width:640px;
  transition:opacity .32s ease, transform .32s ease, filter .32s ease;
}
.chronicle__body.is-swapping{
  opacity:0;
  transform:translateY(10px);
  filter:blur(4px);
}
.chronicle__text p + p{margin-top:.9rem}
.chronicle__era{
  font-family:var(--f-display);
  color:var(--gold);
  font-size:.75rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  padding-bottom:.8rem;
  margin-bottom:1rem;
  border-bottom:1px solid var(--border);
  display:inline-block;
}
.chronicle__body h3{
  font-size:clamp(1.8rem,3vw,2.6rem);
  margin-bottom:1.2rem;
  letter-spacing:.02em;
}
.chronicle__body p{
  color:var(--ink-dim);
  font-size:1rem;
  margin-bottom:1rem;
}
.chronicle__link{
  display:inline-block;
  margin-top:.6rem;
  color:var(--gold);
  font-family:var(--f-display);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  transition:color .2s, letter-spacing .3s;
}
.chronicle__link:hover{color:var(--gold-2);letter-spacing:.28em}

/* Eras strip */
.eras{
  position:relative;
  padding:3rem 0 0;
}
.eras__line{
  position:absolute;
  top:3rem;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}
.eras__list{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:1.5rem;
  position:relative;
}
.era{
  text-align:center;
  padding:1.5rem 1rem 1rem;
  position:relative;
  transition:transform .35s ease, filter .3s ease;
  /* Button reset */
  background:transparent;
  border:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.era:focus-visible{
  outline:1px dashed var(--gold);
  outline-offset:4px;
}
.era:hover{filter:brightness(1.15)}
.era::before{
  content:'';
  position:absolute;
  top:-3rem;left:50%;
  transform:translate(-50%,-50%);
  width:14px;height:14px;
  background:var(--bg);
  border:2px solid var(--gold);
  transform:translateX(-50%) rotate(45deg);
  transition:all .35s ease;
}
.era--active::before{
  background:var(--gold-2);
  box-shadow:0 0 20px var(--gold-2),0 0 40px rgba(240,198,116,.4);
}
.era:hover{transform:translateY(-4px)}
.era__num{
  display:inline-block;
  font-family:var(--f-display);
  font-size:.85rem;
  color:var(--gold);
  font-weight:700;
  letter-spacing:.15em;
  padding:.2rem .7rem;
  border:1px solid var(--border);
  margin-bottom:.8rem;
}
.era--active .era__num{
  color:#1a0f05;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  border-color:var(--gold);
}
.era h4{
  font-size:1.05rem;
  margin-bottom:.4rem;
  letter-spacing:.02em;
}
.era--active h4{color:var(--gold-2)}
.era p{
  color:var(--ink-dim);
  font-size:.8rem;
  margin-bottom:.6rem;
  line-height:1.5;
}
.era__year{
  font-family:var(--f-display);
  color:var(--ink-dim);
  font-size:.7rem;
  letter-spacing:.15em;
}

/* Wiki */
.wiki{padding-top:2rem}
.wiki__head{
  text-align:center;
  margin-bottom:2.5rem;
}
.wiki__head h3{
  font-size:clamp(1.6rem,2.4vw,2rem);
  margin-bottom:.6rem;
}
.wiki__sub{
  color:var(--ink-dim);
  font-size:.95rem;
}
.wiki__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.3rem;
}
.wiki-card{
  display:grid;
  grid-template-columns:64px 1fr;
  gap:1.2rem;
  align-items:flex-start;
  padding:1.5rem 1.6rem;
  border:1px solid var(--border);
  background:rgba(26,16,12,.5);
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  position:relative;
  overflow:hidden;
}
.wiki-card::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  transition:left .6s ease;
}
.wiki-card:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:0 14px 40px rgba(212,162,76,.12);
}
.wiki-card:hover::before{left:100%}
.wiki-card__icon{
  width:56px;height:56px;
  display:grid;place-items:center;
  font-family:var(--f-display);
  font-size:1.8rem;
  color:var(--gold);
  border:1px solid var(--border);
  background:rgba(18,10,8,.6);
  text-shadow:0 0 14px rgba(212,162,76,.4);
  transition:all .3s ease;
}
.wiki-card:hover .wiki-card__icon{
  border-color:var(--gold);
  background:rgba(212,162,76,.12);
  transform:rotate(8deg);
}
.wiki-card__body h4{
  font-size:1.15rem;
  margin-bottom:.3rem;
  letter-spacing:.02em;
}
.wiki-card__body > p{
  color:var(--ink-dim);
  font-size:.88rem;
  margin-bottom:.6rem;
}
.wiki-card__count{
  font-family:var(--f-display);
  color:var(--gold);
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
}

/* ============ RACES & CLASSES ============ */
.races{
  padding:3rem 0 0;
  max-width:none;
  margin:0;
  position:relative;
}
.races .section-head{
  padding:0 2rem;
  margin-bottom:3rem;
}
.classes{
  padding:3rem 0 0;
  max-width:none;
  margin:0;
  position:relative;
}
.classes .section-head{
  padding:0 2rem;
  margin-bottom:3rem;
}
.races__watermark,
.classes__watermark{
  position:absolute;
  font-family:var(--f-display);
  color:var(--gold);
  opacity:.04;
  font-size:32rem;
  line-height:.8;
  pointer-events:none;
  user-select:none;
  z-index:0;
  text-shadow:0 0 60px rgba(212,162,76,.3);
}
.races__watermark{top:2rem;left:-2rem;transform:rotate(-12deg)}
.classes__watermark{bottom:2rem;right:-2rem;transform:rotate(12deg)}
.races > *:not(.races__watermark),
.classes > *:not(.classes__watermark){position:relative;z-index:1}
.classes__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}

/* ============ RACE SLIDER (cinematic, hero-style) ============ */
.race-slider{
  position:relative;
  /* Break out of parent padding to span viewport width */
  width:100vw;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  min-height:88vh;
  overflow:hidden;
  outline:none;
}

.race-slide{
  position:absolute;
  inset:0;
  opacity:0;
  visibility:hidden;
  transform:scale(1.025);
  filter:blur(14px);
  transition:
    opacity 1.2s cubic-bezier(.22,.61,.36,1),
    transform 1.6s cubic-bezier(.22,.61,.36,1),
    filter 1.2s cubic-bezier(.22,.61,.36,1),
    visibility 0s linear 1.2s;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}
.race-slide.is-active{
  opacity:1;
  visibility:visible;
  transform:scale(1);
  filter:blur(0);
  transition-delay:0s;
  pointer-events:auto;
  z-index:1;
}

/* Background image EMBEDDED into the scene atmosphere.
   Strong radial mask confines image to a soft oval window in the middle;
   low-opacity + blend-mode lets the page's scene (stars, auroras, sigils)
   bleed THROUGH the image as if it's a memory emerging from the mist. */
.race-slide__bg{
  position:absolute;
  inset:0;
  z-index:0;
  -webkit-mask-image:
    radial-gradient(ellipse 58% 60% at 50% 48%,
      #000 0%,
      rgba(0,0,0,.98) 25%,
      rgba(0,0,0,.75) 50%,
      rgba(0,0,0,.35) 72%,
      rgba(0,0,0,.1) 88%,
      transparent 100%);
          mask-image:
    radial-gradient(ellipse 58% 60% at 50% 48%,
      #000 0%,
      rgba(0,0,0,.98) 25%,
      rgba(0,0,0,.75) 50%,
      rgba(0,0,0,.35) 72%,
      rgba(0,0,0,.1) 88%,
      transparent 100%);
  -webkit-mask-size:100% 100%;
          mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;
          mask-repeat:no-repeat;
}
.race-slide__bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 28%;
  opacity:.82;
  mix-blend-mode:screen;
  filter:saturate(.95) contrast(1.08) brightness(.92);
}
.race-slide.is-active .race-slide__bg img{
  animation:raceKenBurns 20s ease-out forwards;
}
@keyframes raceKenBurns{
  from{transform:scale(1.1)}
  to{transform:scale(1.0)}
}
/* Soft center bloom — deepens the heart where subject is,
   bleeds into nothing at edges so scene continues naturally */
.race-slide__bg::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse 50% 55% at 50% 45%, rgba(10,7,5,.0) 0%, rgba(10,7,5,.28) 70%, transparent 95%),
    linear-gradient(180deg, transparent 50%, rgba(10,7,5,.55) 95%);
  pointer-events:none;
  z-index:1;
}
/* Atmospheric particles ON TOP of the image — tiny gold motes
   that match the scene's embers/stars, so the image feels immersed
   in the same atmosphere as everything else on the page */
.race-slide__bg::after{
  content:'';
  position:absolute;inset:0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, rgba(240,198,116,.5), transparent),
    radial-gradient(1px 1px at 82% 24%, rgba(240,198,116,.4), transparent),
    radial-gradient(2px 2px at 28% 82%, rgba(212,162,76,.5), transparent),
    radial-gradient(1px 1px at 68% 68%, rgba(244,233,216,.45), transparent),
    radial-gradient(1px 1px at 45% 12%, rgba(240,198,116,.35), transparent),
    radial-gradient(1px 1px at 92% 58%, rgba(212,162,76,.4), transparent),
    radial-gradient(1px 1px at 8% 62%, rgba(244,233,216,.4), transparent),
    radial-gradient(1px 1px at 38% 48%, rgba(240,198,116,.3), transparent);
  background-size:100% 100%;
  pointer-events:none;
  z-index:2;
  mix-blend-mode:screen;
  animation:raceMotes 14s ease-in-out infinite alternate;
}
@keyframes raceMotes{
  0%,100%{opacity:.6;filter:blur(0)}
  50%{opacity:1;filter:blur(.3px)}
}

/* Content floats over image — no cards, no frames */
.race-slide__content{
  position:relative;
  z-index:2;
  max-width:960px;
  padding:6rem 2rem 8rem;
  text-align:center;
  margin:0 auto;
}
.race-slide__eyebrow{
  font-family:var(--f-display);
  font-size:.72rem;
  letter-spacing:.45em;
  color:var(--gold);
  text-transform:uppercase;
  margin-bottom:1.6rem;
  text-shadow:0 0 14px rgba(10,7,5,.8);
  opacity:.9;
}
.race-slide__name{
  font-family:'Cinzel', serif;
  font-size:clamp(3rem, 8vw, 6.5rem);
  font-weight:900;
  line-height:.95;
  letter-spacing:.04em;
  margin-bottom:.8rem;
  background:linear-gradient(180deg, #fff, var(--gold-2) 60%, var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 80px rgba(212,162,76,.35);
}
.race-slide__kicker{
  font-family:var(--f-display);
  color:var(--gold);
  font-size:clamp(.85rem, 1.3vw, 1.05rem);
  letter-spacing:.25em;
  text-transform:uppercase;
  margin-bottom:2.2rem;
  text-shadow:0 0 14px rgba(10,7,5,.8), 0 2px 4px rgba(10,7,5,.6);
}
.race-slide__lead{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;
  font-size:clamp(1.1rem, 1.6vw, 1.35rem);
  color:var(--ink);
  line-height:1.65;
  max-width:700px;
  margin:0 auto 2.5rem;
  text-shadow:0 1px 20px rgba(10,7,5,.9);
}

/* Facts — inline, no box, just gold dividers */
.race-slide__facts{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:2.2rem;
  flex-wrap:wrap;
  margin:0 auto 2.8rem;
  padding:1.3rem 0;
  border-top:1px solid rgba(212,162,76,.25);
  border-bottom:1px solid rgba(212,162,76,.25);
  max-width:880px;
}
.race-slide__facts > div{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.2rem;
  min-width:120px;
}
.race-slide__facts span{
  font-family:var(--f-display);
  font-size:.6rem;
  letter-spacing:.32em;
  color:var(--ink-dim);
  text-transform:uppercase;
}
.race-slide__facts b{
  font-family:var(--f-display);
  font-size:1rem;
  color:var(--gold-2);
  font-weight:700;
  letter-spacing:.03em;
  text-shadow:0 0 14px rgba(10,7,5,.8);
}

/* Lore — 3 columns flowing text, no cards, no backgrounds */
.race-slide__lore{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:2.5rem;
  max-width:960px;
  margin:0 auto;
  text-align:left;
}
.race-slide__lore > div{
  position:relative;
  padding-top:1rem;
}
.race-slide__lore > div::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:36px;
  height:1px;
  background:linear-gradient(90deg, var(--gold), transparent);
}
.race-slide__lore h4{
  font-family:'Cinzel', serif;
  color:var(--gold);
  font-size:.88rem;
  letter-spacing:.1em;
  margin-bottom:.55rem;
  text-transform:uppercase;
  text-shadow:0 0 10px rgba(10,7,5,.7);
}
.race-slide__lore p{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:.98rem;
  line-height:1.6;
  color:var(--ink-dim);
  margin:0;
  text-shadow:0 1px 10px rgba(10,7,5,.6);
}

/* Arrow buttons — minimal, transparent */
.race-slider__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:52px;
  height:52px;
  background:none;
  border:none;
  color:rgba(240,198,116,.45);
  cursor:pointer;
  z-index:10;
  display:grid;
  place-items:center;
  padding:0;
  transition:color .3s ease, transform .3s ease;
}
.race-slider__arrow:hover{
  color:var(--gold-2);
  transform:translateY(-50%) scale(1.18);
}
.race-slider__arrow:active{transform:translateY(-50%) scale(1.05)}
.race-slider__arrow svg{
  width:36px;
  height:36px;
  filter:drop-shadow(0 2px 10px rgba(10,7,5,.9));
}
.race-slider__arrow--prev{left:2rem}
.race-slider__arrow--next{right:2rem}

/* Dots — hero-like horizontal lines */
.race-slider__dots{
  position:absolute;
  bottom:2.5rem;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  gap:1.2rem;
  z-index:10;
}
.race-slider__dot{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
}
.race-slider__dot::before{
  content:'';
  width:44px;
  height:2px;
  background:rgba(244,233,216,.22);
  transition:background .35s ease, box-shadow .35s ease;
}
.race-slider__dot:hover::before{background:rgba(244,233,216,.4)}
.race-slider__dot.is-active::before{
  background:var(--gold);
  box-shadow:0 0 10px rgba(212,162,76,.6);
}
.race-slider__dot span{
  font-family:var(--f-display);
  font-size:.62rem;
  letter-spacing:.3em;
  color:var(--ink-dim);
  text-transform:uppercase;
  opacity:.6;
  transition:color .3s ease, opacity .3s ease;
  text-shadow:0 0 10px rgba(10,7,5,.8);
}
.race-slider__dot.is-active span{
  color:var(--gold-2);
  opacity:1;
}

/* Chapter divider — medieval manuscript flourish */
.chapter-divider{
  max-width:1100px;
  margin:0 auto;
  padding:0 2rem;
  display:flex;
  align-items:center;
  gap:2rem;
  opacity:.9;
}
.chapter-divider__line{
  flex:1;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold) 30%, var(--gold) 70%, transparent);
  position:relative;
}
.chapter-divider__line::before,
.chapter-divider__line::after{
  content:'';
  position:absolute;
  top:50%;
  width:6px;height:6px;
  border:1px solid var(--gold);
  transform:translateY(-50%) rotate(45deg);
  background:var(--bg);
}
.chapter-divider__line:first-child::before{left:10%}
.chapter-divider__line:first-child::after{right:0}
.chapter-divider__line:last-child::before{left:0}
.chapter-divider__line:last-child::after{right:10%}
.chapter-divider__mark{
  width:56px;height:56px;
  display:grid;place-items:center;
  filter:drop-shadow(0 0 14px rgba(212,162,76,.4));
  animation:dividerSpin 40s linear infinite;
}
.chapter-divider__mark svg{width:100%;height:100%}
@keyframes dividerSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}
.race-card{
  background:rgba(26,16,12,.55);
  border:1px solid var(--border);
  overflow:hidden;
  transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease;
  display:flex;flex-direction:column;
}
.race-card:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 20px 60px rgba(212,162,76,.15);
}
.race-card__art{
  position:relative;
  aspect-ratio:11/6;
  overflow:hidden;
  border-bottom:1px solid var(--border);
  background:#0a0705;
}
.race-card__art img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  z-index:0;
  transition:transform .8s cubic-bezier(.22,.61,.36,1), filter .6s ease;
  filter:saturate(.92) contrast(1.02);
}
.race-card:hover .race-card__art img{
  transform:scale(1.06);
  filter:saturate(1.05) contrast(1.06);
}
.race-card__art::before{
  content:'';
  position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(10,7,5,0) 45%, rgba(10,7,5,.85) 100%),
    radial-gradient(ellipse at 50% 30%, transparent 0%, rgba(10,7,5,.25) 100%);
  z-index:2;
  pointer-events:none;
}
.race-card__art::after{
  content:'';
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 8 L44 36 L72 40 L44 44 L40 72 L36 44 L8 40 L36 36 Z' fill='%23d4a24c' opacity='.04'/%3E%3C/svg%3E");
  opacity:.5;
  z-index:3;
  pointer-events:none;
  mix-blend-mode:overlay;
}
.race-card__art[data-art="human"]{
  background:
    radial-gradient(circle at 50% 40%, #d4a24c, transparent 55%),
    linear-gradient(135deg,#2a1f0f,#6b4a1a,#0a0803);
}
.race-card__art[data-art="orc"]{
  background:
    radial-gradient(circle at 50% 45%, #6b8b1a, transparent 55%),
    linear-gradient(135deg,#1a2a0f,#3a5a1a,#080a03);
}
.race-card__art[data-art="demon"]{
  background:
    radial-gradient(circle at 50% 40%, #a81a3a, transparent 55%),
    linear-gradient(135deg,#2a0510,#6b1a3a,#0a0308);
}
.race-card__art[data-art="warrior"]{
  background:
    radial-gradient(circle at 50% 40%, #c74a2a, transparent 55%),
    linear-gradient(135deg,#3a1208,#6b1a1a,#0a0503);
}
.race-card__art[data-art="hunter"]{
  background:
    radial-gradient(circle at 50% 45%, #3aa86b, transparent 55%),
    linear-gradient(135deg,#0f2a1a,#1a6b3a,#03100a);
}
.race-card__art[data-art="mage"]{
  background:
    radial-gradient(circle at 50% 40%, #4ea8d6, transparent 55%),
    linear-gradient(135deg,#0f1a2a,#1a3a5f,#050810);
}
.race-card__sigil{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-size:4rem;
  color:var(--gold);
  text-shadow:0 0 40px rgba(0,0,0,.85),0 0 20px rgba(212,162,76,.5);
  z-index:3;
  font-family:var(--f-display);
  opacity:.95;
  transition:transform .6s ease;
}
.race-card:hover .race-card__sigil{transform:translate(-50%,-50%) scale(1.1)}
.race-card__body{
  padding:1.5rem 1.6rem 1.7rem;
  display:flex;flex-direction:column;gap:.4rem;
  flex:1;
}
.race-card h4{
  font-size:1.5rem;
  letter-spacing:.04em;
  margin-bottom:0;
}
.race-card__kicker{
  font-family:var(--f-display);
  color:var(--gold);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:.5rem;
}
.race-card__body > p:not(.race-card__kicker){
  color:var(--ink-dim);
  font-size:.93rem;
  flex:1;
}
.race-card__stats{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.5rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
}
.race-card__traits{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.55rem;
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
}
.race-card__traits li{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:1rem;
  padding:.25rem 0;
  border-bottom:1px dashed rgba(212,162,76,.08);
}
.race-card__traits li:last-child{border-bottom:0}
.race-card__traits span{
  color:var(--ink-dim);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-family:var(--f-display);
}
.race-card__traits b{
  color:var(--gold-2);
  font-family:var(--f-display);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.03em;
  text-align:right;
}
.race-card__stats li{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
}
.race-card__stats span{
  font-size:.6rem;
  letter-spacing:.22em;
  color:var(--ink-dim);
  text-transform:uppercase;
}
.race-card__stats b{
  font-family:var(--f-display);
  font-size:1.15rem;
  color:var(--gold-2);
  font-weight:700;
}

/* ============ BESTIARY ============ */
.bestiary{
  padding:3rem 2rem;
  max-width:1400px;
  margin:0 auto;
}
.bestiary__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}

/* Beast threat rank — shared tier colors with creature__rank */
.beast__rank{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-top:1rem;
  padding:.55rem .75rem;
  border:1px solid var(--border);
  background:rgba(10,7,5,.5);
  font-family:var(--f-display);
  position:relative;
  z-index:2;
}
.beast__rank span{
  font-size:.58rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.beast__rank b{
  font-size:.95rem;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--gold-2);
  text-shadow:0 0 10px rgba(240,198,116,.35);
}
.beast__rank em{
  margin-left:auto;
  font-style:normal;
  font-size:.62rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:.5rem .7rem .35rem;
  border:1px solid currentColor;
  background:rgba(10,7,5,.5);
  font-weight:700;
  display:inline-block;
  line-height:1;
}
.beast__rank[data-rank="I"]   b, .beast__rank[data-rank="I"]   em{color:#9cc088}
.beast__rank[data-rank="II"]  b, .beast__rank[data-rank="II"]  em{color:var(--gold-2)}
.beast__rank[data-rank="III"] b, .beast__rank[data-rank="III"] em{color:#7fc1e8}
.beast__rank[data-rank="IV"]  b, .beast__rank[data-rank="IV"]  em{color:#c9a0ff}
.beast__rank[data-rank="V"]   b, .beast__rank[data-rank="V"]   em{color:#f08a5a}
.beast__rank[data-rank="FATE"]{
  border-color:rgba(199,74,42,.45);
  background:linear-gradient(90deg, rgba(199,74,42,.16), rgba(10,7,5,.55));
}
.beast__rank[data-rank="FATE"] b{
  color:var(--gold-2);
  font-size:1.2rem;
  text-shadow:0 0 16px rgba(240,198,116,.7);
}
.beast__rank[data-rank="FATE"] em{
  color:#1a0f05;
  background:linear-gradient(135deg, var(--gold-2), #f09060);
  border-color:#c74a2a;
  box-shadow:0 0 14px rgba(199,74,42,.5);
  font-weight:900;
}

.beast{
  position:relative;
  background:rgba(26,16,12,.55);
  border:1px solid var(--border);
  overflow:hidden;
  transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease;
  display:flex;flex-direction:column;
}
.beast:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 20px 60px rgba(212,162,76,.15);
}
.beast--lg{grid-row:span 2;grid-column:span 1}
.beast__art{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.beast--lg .beast__art{aspect-ratio:4/5}
.beast__art::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(10,7,5,0) 40%, rgba(10,7,5,.9));
  z-index:2;
}
.beast__art::after{
  content:'';
  position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 8 L44 36 L72 40 L44 44 L40 72 L36 44 L8 40 L36 36 Z' fill='%23d4a24c' opacity='.05'/%3E%3C/svg%3E");
  opacity:.6;
  z-index:1;
}
.beast__art[data-art="dragon"]{
  background:
    radial-gradient(circle at 30% 40%, #c74a2a, transparent 55%),
    radial-gradient(circle at 70% 70%, #2a0f0a, transparent 60%),
    linear-gradient(135deg,#3a1208,#6b1a1a,#0a0503);
}
.beast__art[data-art="lich"]{
  background:
    radial-gradient(circle at 50% 40%, #4ea8d6, transparent 55%),
    radial-gradient(circle at 20% 80%, #0f1a2a, transparent 60%),
    linear-gradient(135deg,#0f1a2a,#1a3a5f,#050810);
}
.beast__art[data-art="wolf"]{
  background:
    radial-gradient(circle at 50% 50%, #6b4a8b, transparent 55%),
    radial-gradient(circle at 80% 30%, #1a0f2a, transparent 60%),
    linear-gradient(135deg,#1a0f2a,#3a1a5a,#0a0510);
}
.beast__art[data-art="griffin"]{
  background:
    radial-gradient(circle at 50% 35%, #f0c674, transparent 55%),
    radial-gradient(circle at 20% 70%, #3a2a0f, transparent 60%),
    linear-gradient(135deg,#2a1f0f,#6b4a1a,#0a0803);
}
.beast__art[data-art="demon"]{
  background:
    radial-gradient(circle at 50% 40%, #a81a3a, transparent 55%),
    radial-gradient(circle at 80% 75%, #2a0514, transparent 60%),
    linear-gradient(135deg,#2a0510,#6b1a3a,#0a0308);
}
.beast__art[data-art="hydra"]{
  background:
    radial-gradient(circle at 50% 45%, #3aa86b, transparent 55%),
    radial-gradient(circle at 20% 80%, #0f2a1a, transparent 60%),
    linear-gradient(135deg,#0f2a1a,#1a6b3a,#03100a);
}
.beast__glyph{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  font-size:4.5rem;
  color:var(--gold);
  text-shadow:0 0 40px rgba(0,0,0,.8),0 0 20px rgba(212,162,76,.5);
  z-index:3;
  font-family:var(--f-display);
  opacity:.95;
  transition:transform .6s ease;
}
.beast--lg .beast__glyph{font-size:7rem}
.beast:hover .beast__glyph{transform:translate(-50%,-50%) scale(1.08)}

/* Beast art with actual creature PNG on gradient backdrop */
.beast__art img{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  max-width:90%;
  max-height:92%;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center center;
  z-index:3;
  filter:drop-shadow(0 12px 24px rgba(0,0,0,.7)) drop-shadow(0 0 18px rgba(212,162,76,.15));
  transition:transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease;
}
.beast:hover .beast__art img{
  transform:translate(-50%,-50%) translateY(-4px) scale(1.04);
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.8)) drop-shadow(0 0 24px rgba(212,162,76,.25));
}

/* Level badge on creature art */
.beast__level{
  position:absolute;
  top:.85rem;
  right:.85rem;
  z-index:4;
  font-family:var(--f-display);
  font-size:.65rem;
  letter-spacing:.2em;
  color:var(--gold-2);
  padding:.35rem .75rem;
  background:rgba(10,7,5,.75);
  border:1px solid rgba(212,162,76,.45);
  backdrop-filter:blur(4px);
  text-transform:uppercase;
  font-weight:700;
}

/* "Tümünü Gör" CTA below bestiary grid */
.bestiary__more{
  margin-top:3rem;
  text-align:center;
}
.beast__body{
  padding:1.6rem 1.7rem 1.8rem;
  display:flex;flex-direction:column;gap:.5rem;
  flex:1;
}
.beast__tier{
  display:inline-block;
  align-self:flex-start;
  padding:.3rem .8rem;
  background:rgba(212,162,76,.12);
  border:1px solid var(--border);
  color:var(--gold);
  font-size:.65rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  font-family:var(--f-display);
  font-weight:700;
  margin-bottom:.4rem;
}
.beast__tier--rare{color:#7fc1e8;border-color:rgba(127,193,232,.35);background:rgba(127,193,232,.08)}
.beast__tier--legendary{color:#f0c674;border-color:rgba(240,198,116,.45);background:rgba(240,198,116,.12)}
.beast__tier--mythic{
  color:#1a0f05;
  background:linear-gradient(135deg,var(--gold),var(--gold-2));
  border-color:var(--gold);
}
.beast h3{font-size:1.4rem;margin-bottom:.1rem}
.beast--lg h3{font-size:1.9rem}
.beast__kicker{
  font-family:var(--f-display);
  color:var(--gold);
  font-size:.85rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  margin-bottom:.6rem;
}
.beast__body > p:not(.beast__kicker){
  color:var(--ink-dim);
  font-size:.95rem;
  flex:1;
}
.beast__meta{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--border);
  display:flex;gap:1.5rem;flex-wrap:wrap;
  font-size:.8rem;
  color:var(--ink-dim);
}
.beast__meta b{color:var(--ink);font-weight:500;margin-left:.3rem}

/* ============ EQUIPMENT ============ */
.equipment{
  padding:3rem 2rem;
  max-width:1400px;
  margin:0 auto;
  position:relative;
}
.equipment__watermark{
  position:absolute;
  font-family:var(--f-display);
  color:var(--gold);
  opacity:.04;
  font-size:32rem;
  line-height:.8;
  pointer-events:none;
  user-select:none;
  z-index:0;
  text-shadow:0 0 60px rgba(212,162,76,.3);
  top:4rem;left:-3rem;
  transform:rotate(-16deg);
}
.equipment > *:not(.equipment__watermark){position:relative;z-index:1}
.equipment__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.item{
  background:rgba(26,16,12,.6);
  border:1px solid var(--border);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease;
  position:relative;
}
.item::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(135deg, transparent 40%, var(--rarity-tint, transparent));
  pointer-events:none;
  opacity:.35;
  transition:opacity .4s ease;
}
.item:hover{
  transform:translateY(-6px);
  border-color:var(--rarity-color, var(--gold));
  box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 40px var(--rarity-glow, rgba(212,162,76,.2));
}
.item:hover::before{opacity:.6}

/* Rarity tiers */
.item--common{--rarity-color:#a89684;--rarity-tint:rgba(168,150,132,.1);--rarity-glow:rgba(168,150,132,.2)}
.item--rare{--rarity-color:#7fc1e8;--rarity-tint:rgba(127,193,232,.12);--rarity-glow:rgba(127,193,232,.25)}
.item--legendary{--rarity-color:var(--gold);--rarity-tint:rgba(212,162,76,.15);--rarity-glow:rgba(212,162,76,.3)}
.item--mythic{--rarity-color:#c9a0ff;--rarity-tint:rgba(201,160,255,.15);--rarity-glow:rgba(201,160,255,.3)}

.item__art{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  border-bottom:1px solid var(--border);
  display:grid;place-items:center;
}
.item__art::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(180deg, rgba(10,7,5,0) 50%, rgba(10,7,5,.85));
  z-index:2;
}
.item__art::after{
  content:'';position:absolute;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cpath d='M40 8 L44 36 L72 40 L44 44 L40 72 L36 44 L8 40 L36 36 Z' fill='%23d4a24c' opacity='.05'/%3E%3C/svg%3E");
  z-index:1;
}
.item__art[data-art="sword"]{background:radial-gradient(circle at 50% 45%, #c74a2a, transparent 60%), linear-gradient(135deg,#2a0f0a,#4a1a1a)}
.item__art[data-art="ring"]{background:radial-gradient(circle at 50% 45%, #a06bd6, transparent 60%), linear-gradient(135deg,#1a0f2a,#3a1a5a)}
.item__art[data-art="armor"]{background:radial-gradient(circle at 50% 45%, #d6a06b, transparent 60%), linear-gradient(135deg,#2a1f0f,#4a2a1a)}
.item__art[data-art="bow"]{background:radial-gradient(circle at 50% 45%, #8ea8c7, transparent 60%), linear-gradient(135deg,#0f1a2a,#1f3a5f)}
.item__art[data-art="staff"]{background:radial-gradient(circle at 50% 45%, #4ea8d6, transparent 60%), linear-gradient(135deg,#0f1a2a,#1a3a5f)}
.item__art[data-art="shield"]{background:radial-gradient(circle at 50% 45%, #a89684, transparent 60%), linear-gradient(135deg,#1a1410,#3a3028)}
.item__glyph{
  position:relative;
  z-index:3;
  font-family:var(--f-display);
  font-size:5rem;
  color:var(--rarity-color, var(--gold));
  text-shadow:0 0 30px rgba(0,0,0,.8), 0 0 18px var(--rarity-glow);
  transition:transform .5s ease;
}
.item:hover .item__glyph{transform:scale(1.1) rotate(4deg)}
.item__body{
  padding:1.5rem 1.6rem 1.7rem;
  display:flex;flex-direction:column;gap:.5rem;
  flex:1;
}
.item__rarity{
  display:inline-block;
  align-self:flex-start;
  padding:.3rem .8rem;
  font-family:var(--f-display);
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--ink-dim);
  border:1px solid var(--border);
  background:rgba(18,10,8,.6);
  margin-bottom:.5rem;
}
.item__rarity--rare{color:#7fc1e8;border-color:rgba(127,193,232,.35);background:rgba(127,193,232,.1)}
.item__rarity--legendary{color:var(--gold-2);border-color:rgba(212,162,76,.5);background:rgba(212,162,76,.12)}
.item__rarity--mythic{
  color:#1a0f05;
  background:linear-gradient(135deg,#c9a0ff,#e8c8ff);
  border-color:#c9a0ff;
}
.item h4{
  font-size:1.35rem;
  letter-spacing:.02em;
  margin-bottom:.1rem;
}
.item__type{
  font-family:var(--f-display);
  color:var(--gold);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:.6rem;
}
.item__stats{
  list-style:none;
  display:flex;flex-direction:column;gap:.25rem;
  margin:.5rem 0;
  padding:.8rem 1rem;
  background:rgba(10,7,5,.5);
  border-left:2px solid var(--rarity-color, var(--gold));
}
.item__stats li{
  display:flex;
  justify-content:space-between;
  font-size:.85rem;
  color:var(--ink-dim);
}
.item__stats b{
  color:var(--ink);
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:.05em;
}
.item__lore{
  color:var(--ink-dim);
  font-size:.88rem;
  font-style:italic;
  margin-top:.5rem;
  padding-top:.8rem;
  border-top:1px solid var(--border);
  line-height:1.55;
}

/* ============ RANKINGS ============ */
.rankings{
  padding:8rem 2rem;
  background:
    linear-gradient(180deg,rgba(10,7,5,.55),rgba(18,10,8,.7) 50%,rgba(10,7,5,.55));
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(2px);
}
.rankings__grid{
  max-width:1300px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
}
.rank-board{
  background:rgba(18,10,8,.7);
  border:1px solid var(--border);
  padding:2.2rem 2rem;
  position:relative;
  overflow:hidden;
}
.rank-board::before{
  content:'';
  position:absolute;top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.rank-board__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1rem;
  padding-bottom:1.4rem;
  margin-bottom:1.2rem;
  border-bottom:1px solid var(--border);
}
.rank-board__head h3{
  font-size:1.55rem;
  line-height:1.2;
}
.rank-board__head .eyebrow{margin-bottom:.5rem}
.rank-board__season{
  font-family:var(--f-display);
  color:var(--ink-dim);
  font-size:.75rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  white-space:nowrap;
}
.rank-list{
  list-style:none;
  display:flex;flex-direction:column;
  gap:.5rem;
}
.rank-row{
  display:grid;
  grid-template-columns:56px 1fr auto;
  align-items:center;
  gap:1rem;
  padding:.9rem 1rem;
  border:1px solid transparent;
  background:rgba(26,16,12,.45);
  transition:all .3s ease;
}
.rank-row:hover{
  border-color:var(--border);
  transform:translateX(4px);
}
.rank-row__pos{
  font-family:var(--f-display);
  font-weight:900;
  font-size:1.3rem;
  color:var(--ink-dim);
  text-align:center;
  letter-spacing:.08em;
}
.rank-row__body h4{
  font-size:1.02rem;
  margin-bottom:.15rem;
  font-family:var(--f-display);
  letter-spacing:.03em;
}
.rank-row__body p{
  color:var(--ink-dim);
  font-size:.8rem;
  letter-spacing:.04em;
}
.rank-row__score{
  font-family:var(--f-display);
  color:var(--gold-2);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:.05em;
}
.rank-row--1{
  background:linear-gradient(90deg,rgba(212,162,76,.15),rgba(26,16,12,.6));
  border-color:rgba(212,162,76,.5);
}
.rank-row--1 .rank-row__pos{color:var(--gold-2);text-shadow:0 0 18px rgba(240,198,116,.45)}
.rank-row--1 .rank-row__score{font-size:1.25rem;color:var(--gold-2)}
.rank-row--2{
  background:linear-gradient(90deg,rgba(200,200,200,.08),rgba(26,16,12,.55));
  border-color:rgba(200,200,200,.25);
}
.rank-row--2 .rank-row__pos{color:#d8d2c4}
.rank-row--3{
  background:linear-gradient(90deg,rgba(180,110,60,.12),rgba(26,16,12,.55));
  border-color:rgba(180,110,60,.3);
}
.rank-row--3 .rank-row__pos{color:#c78456}
.rank-board__more{
  display:inline-block;
  margin-top:1.4rem;
  padding-top:1.2rem;
  border-top:1px solid var(--border);
  color:var(--gold);
  font-size:.75rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-family:var(--f-display);
  transition:color .2s, letter-spacing .3s;
  width:100%;
  text-align:center;
}
.rank-board__more:hover{color:var(--gold-2);letter-spacing:.28em}

/* ============ CTA ============ */
.cta{
  padding:8rem 2rem;
  text-align:center;
  background:
    radial-gradient(ellipse at center,rgba(139,26,26,.25),transparent 65%),
    rgba(10,7,5,.55);
  border-top:1px solid var(--border);
  backdrop-filter:blur(2px);
}
.cta__inner{max-width:600px;margin:0 auto}
.cta h2{font-size:clamp(2rem,4vw,3.5rem);margin-bottom:1rem}
.cta p{color:var(--ink-dim);margin-bottom:2.5rem;font-size:1.05rem}
.cta__form{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  justify-content:center;
}
.cta__form input{
  flex:1;min-width:250px;
  padding:1rem 1.5rem;
  background:rgba(26,16,12,.6);
  border:1px solid var(--border);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:.95rem;
}
.cta__form input:focus{outline:none;border-color:var(--gold)}

/* ============ RANKINGS PAGE (sıralama.html) ============ */
.rank-page{
  padding:2rem 2rem 5rem;
  max-width:1100px;
  margin:0 auto;
}
.rank-board--full{
  max-width:none;
  width:100%;
}
.rank-board--full .rank-list{
  max-height:none;
}

/* Tabs */
.rank-tabs{
  display:flex;
  gap:.8rem;
  justify-content:center;
  margin-bottom:2.5rem;
  flex-wrap:wrap;
}
.rank-tab{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  padding:1.1rem 2rem;
  background:rgba(18,10,8,.5);
  border:1px solid var(--border);
  color:var(--ink-dim);
  cursor:pointer;
  font-family:var(--f-display);
  transition:all .35s ease;
  min-width:220px;
  overflow:hidden;
}
.rank-tab::before{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:2px;
  background:linear-gradient(90deg, transparent, var(--gold-2), transparent);
  transform:scaleX(0);
  transition:transform .4s ease;
}
.rank-tab:hover{
  color:var(--ink);
  border-color:rgba(212,162,76,.4);
  background:rgba(10,7,5,.65);
}
.rank-tab.is-active{
  color:var(--gold-2);
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(212,162,76,.14), rgba(10,7,5,.6));
  box-shadow:0 -6px 24px rgba(212,162,76,.16);
}
.rank-tab.is-active::before{transform:scaleX(1)}
.rank-tab__icon{
  font-size:1.4rem;
  color:var(--gold);
  text-shadow:0 0 14px rgba(212,162,76,.4);
  line-height:1;
}
.rank-tab.is-active .rank-tab__icon{color:var(--gold-2)}
.rank-tab__label{
  font-size:.85rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:700;
}
.rank-tab__count{
  font-size:.6rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-dim);
  opacity:.8;
}

/* Panel transitions */
.rank-panel{
  display:none;
  animation:panelFade .5s cubic-bezier(.22,.61,.36,1);
}
.rank-panel.is-active{display:block}
@keyframes panelFade{
  from{opacity:0;transform:translateY(8px);filter:blur(4px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* Hide rows not on current page */
.rank-list li[data-page]{
  display:none;
}
.rank-list li[data-page].is-page{
  display:grid;
  animation:rowFade .35s ease;
}
@keyframes rowFade{
  from{opacity:0;transform:translateX(-6px)}
  to{opacity:1;transform:translateX(0)}
}

/* Pagination */
.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:.5rem;
  margin-top:2.5rem;
  padding-top:1.8rem;
  border-top:1px solid var(--border);
}
.pagebtn{
  min-width:42px;
  height:42px;
  padding:0 .8rem;
  background:rgba(18,10,8,.55);
  border:1px solid var(--border);
  color:var(--ink-dim);
  cursor:pointer;
  font-family:var(--f-display);
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.05em;
  transition:all .3s ease;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.pagebtn:hover{
  color:var(--gold-2);
  border-color:var(--gold);
  background:rgba(212,162,76,.12);
  transform:translateY(-2px);
}
.pagebtn.is-active{
  color:var(--gold-2);
  border-color:var(--gold);
  background:linear-gradient(180deg, rgba(212,162,76,.22), rgba(10,7,5,.6));
  box-shadow:0 0 16px rgba(212,162,76,.28);
  cursor:default;
}
.pagebtn--nav{
  font-size:1.1rem;
  color:var(--gold);
}
.pagebtn--nav:disabled,
.pagebtn--nav[aria-disabled="true"]{
  opacity:.3;
  cursor:not-allowed;
  pointer-events:none;
}

/* ============ EQUIPMENT SET SHOWCASE (ana sayfa) ============ */
.setline{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:1.3rem;
}
.setcard{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  background:rgba(18,10,8,.55);
  overflow:hidden;
  transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease;
  color:inherit;
}
.setcard:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 20px 50px rgba(0,0,0,.5), 0 0 30px rgba(212,162,76,.18);
}
.setcard__art{
  position:relative;
  aspect-ratio:16/10;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.setcard__art::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 35%, rgba(255,255,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(10,7,5,0) 55%, rgba(10,7,5,.85));
  z-index:1;
  pointer-events:none;
}
.setcard__art img{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%);
  max-width:70%;
  max-height:92%;
  object-fit:contain;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.7));
  transition:transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease;
}
.setcard:hover .setcard__art img{
  transform:translate(-50%,-50%) scale(1.08) rotate(-3deg);
  filter:drop-shadow(0 16px 26px rgba(0,0,0,.85)) drop-shadow(0 0 18px rgba(212,162,76,.25));
}
.setcard__body{
  padding:1.3rem 1.4rem 1.5rem;
  display:flex;
  flex-direction:column;
  gap:.3rem;
  flex:1;
  position:relative;
}
.setcard__roman{
  position:absolute;
  top:.8rem;right:1rem;
  font-family:var(--f-display);
  font-size:1.5rem;
  font-weight:900;
  color:var(--gold);
  opacity:.35;
  letter-spacing:.08em;
}
.setcard__body h3{
  font-family:'Cinzel', serif;
  font-size:1.4rem;
  color:var(--ink);
  letter-spacing:.03em;
  margin-bottom:.1rem;
}
.setcard__meta{
  font-family:var(--f-display);
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.5rem;
}
.setcard__body > p:not(.setcard__meta){
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:.95rem;
  line-height:1.55;
  color:var(--ink-dim);
  margin:0;
}

/* Per-set themed backgrounds on main showcase */
.setcard[data-theme="iron"]    .setcard__art{background:radial-gradient(circle at 50% 50%, #55534f, transparent 70%), linear-gradient(135deg,#1a1917,#2d2b28)}
.setcard[data-theme="cobalt"]  .setcard__art{background:radial-gradient(circle at 50% 50%, #2f6fa3, transparent 70%), linear-gradient(135deg,#0a1a2a,#163552)}
.setcard[data-theme="ancient"] .setcard__art{background:radial-gradient(circle at 50% 50%, #5a6f8a, transparent 70%), linear-gradient(135deg,#13192a,#253550)}
.setcard[data-theme="soul"]    .setcard__art{background:radial-gradient(circle at 50% 50%, #6a4a9e, transparent 70%), linear-gradient(135deg,#14102a,#2a2050)}
.setcard[data-theme="dragon"]  .setcard__art{background:radial-gradient(circle at 50% 50%, #b03a22, transparent 70%), linear-gradient(135deg,#1a0a06,#3f1510)}
.setcard[data-theme="royal"]   .setcard__art{background:radial-gradient(circle at 50% 50%, #b03a3a, transparent 70%), linear-gradient(135deg,#2a0a10,#4a1820 60%,#6a2030)}

/* Featured (final) set card */
.setcard--featured{
  border-color:rgba(212,162,76,.45);
}
.setcard--featured .setcard__body{
  background:linear-gradient(135deg, rgba(212,162,76,.08), transparent);
}
.setcard--featured:hover{
  border-color:var(--gold-2);
  box-shadow:0 24px 55px rgba(0,0,0,.55), 0 0 34px rgba(212,162,76,.28);
}

.equipment__more{
  margin-top:2.5rem;
  text-align:center;
}
.equipment__more small{
  display:inline-block;
  opacity:.7;
  margin-left:.4rem;
  letter-spacing:.12em;
}

/* ============ EQUIPMENT PAGE (ekipmanlar.html) ============ */

/* Set quick-nav strip */
.eqnav{
  position:sticky;
  top:72px;
  z-index:50;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  padding:1rem 1.5rem;
  background:linear-gradient(180deg, rgba(10,7,5,.85), rgba(10,7,5,.5));
  backdrop-filter:blur(10px);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  margin-bottom:1rem;
}
.eqnav a{
  font-family:var(--f-display);
  font-size:.7rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--ink-dim);
  padding:.45rem .85rem;
  border:1px solid var(--border);
  background:rgba(18,10,8,.5);
  transition:all .3s ease;
}
.eqnav a:hover{
  color:var(--gold-2);
  border-color:var(--gold);
  background:rgba(212,162,76,.12);
}

/* Equipment set section */
.eqset{
  padding:4rem 2rem 5rem;
  max-width:1400px;
  margin:0 auto;
  position:relative;
  scroll-margin-top:140px;
}
.eqset + .eqset{
  border-top:1px solid var(--border);
}
.eqset__header{
  text-align:center;
  max-width:820px;
  margin:0 auto 3rem;
}
.eqset__header h2{
  font-family:'Cinzel', serif;
  font-size:clamp(2rem,3.5vw,3.2rem);
  background:linear-gradient(180deg,#fff,var(--gold-2) 65%,var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:.6rem;
  letter-spacing:.04em;
}
.eqset__meta{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:1.2rem;
  margin-bottom:1rem;
}
.eqset__meta span{
  font-family:var(--f-display);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  padding:.3rem .9rem;
  border:1px solid var(--border);
  background:rgba(10,7,5,.5);
}
/* Rarity color system (classic MMO progression) */
.rarity{font-weight:700}
.rarity--common{color:#9aa0a5 !important;border-color:rgba(154,160,165,.4) !important;background:rgba(154,160,165,.08) !important}
.rarity--uncommon{color:#7ad676 !important;border-color:rgba(122,214,118,.4) !important;background:rgba(122,214,118,.08) !important;text-shadow:0 0 10px rgba(122,214,118,.25)}
.rarity--rare{color:#6eb1ee !important;border-color:rgba(110,177,238,.45) !important;background:rgba(110,177,238,.1) !important;text-shadow:0 0 10px rgba(110,177,238,.3)}
.rarity--epic{color:#b886e8 !important;border-color:rgba(184,134,232,.5) !important;background:rgba(184,134,232,.12) !important;text-shadow:0 0 12px rgba(184,134,232,.35)}
.rarity--legendary{color:#f0a060 !important;border-color:rgba(240,160,96,.55) !important;background:linear-gradient(135deg,rgba(240,160,96,.18),rgba(240,198,116,.08)) !important;text-shadow:0 0 14px rgba(240,160,96,.45);box-shadow:0 0 14px rgba(240,160,96,.18)}

/* Ana sayfa setcard: rarity sadece yazı — arka plan/border/padding yok */
.setcard__meta .rarity{
  background:transparent !important;
  border:0 !important;
  padding:0 !important;
  box-shadow:none !important;
}
.eqset__lore{
  font-family:'Cormorant Garamond', Georgia, serif;
  color:var(--ink-dim);
  font-size:1.1rem;
  font-style:italic;
  line-height:1.7;
}
.eqset__grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:1rem;
}

/* Individual item tile */
.item-tile{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--border);
  background:rgba(18,10,8,.55);
  overflow:hidden;
  transition:transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.item-tile:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
  box-shadow:0 14px 34px rgba(0,0,0,.5), 0 0 22px rgba(212,162,76,.18);
}
.item-tile__art{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
}
.item-tile__art::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255,255,255,.06), transparent 55%),
    linear-gradient(180deg, rgba(10,7,5,0) 55%, rgba(10,7,5,.75));
  z-index:1;
  pointer-events:none;
}
.item-tile__art img{
  position:absolute;
  inset:10%;
  width:80%;
  height:80%;
  object-fit:contain;
  object-position:center;
  filter:drop-shadow(0 8px 14px rgba(0,0,0,.6));
  transition:transform .5s cubic-bezier(.22,.61,.36,1), filter .4s ease;
}
.item-tile:hover .item-tile__art img{
  transform:scale(1.08) rotate(-2deg);
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.7)) drop-shadow(0 0 16px rgba(212,162,76,.25));
}
.item-tile__body{
  padding:.7rem .8rem .9rem;
  text-align:center;
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.2rem;
  border-top:1px solid var(--border);
  background:rgba(10,7,5,.5);
}
.item-tile__body h4{
  font-family:'Cinzel', serif;
  font-size:.88rem;
  color:var(--ink);
  letter-spacing:.03em;
  margin:0;
}
.item-tile__body p{
  font-family:var(--f-display);
  font-size:.58rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0;
}

/* Per-set backgrounds — themed colors matching each set's aesthetic */
.eqset[data-theme="iron"]    .item-tile__art{background:radial-gradient(circle at 50% 50%, #55534f, transparent 65%), linear-gradient(135deg,#1a1917,#2d2b28)}
.eqset[data-theme="steel"]   .item-tile__art{background:radial-gradient(circle at 50% 50%, #7a8189, transparent 65%), linear-gradient(135deg,#1c1f22,#343a40)}
.eqset[data-theme="cobalt"]  .item-tile__art{background:radial-gradient(circle at 50% 50%, #2f6fa3, transparent 65%), linear-gradient(135deg,#0a1a2a,#163552)}
.eqset[data-theme="bone"]    .item-tile__art{background:radial-gradient(circle at 50% 50%, #8a7a60, transparent 65%), linear-gradient(135deg,#1e1a12,#34291c)}
.eqset[data-theme="ancient"] .item-tile__art{background:radial-gradient(circle at 50% 50%, #5a6f8a, transparent 65%), linear-gradient(135deg,#13192a,#253550)}
.eqset[data-theme="titan"]   .item-tile__art{background:radial-gradient(circle at 50% 50%, #8a6a3a, transparent 65%), linear-gradient(135deg,#1e1610,#3d2d1c)}
.eqset[data-theme="soul"]    .item-tile__art{background:radial-gradient(circle at 50% 50%, #5e4a8a, transparent 65%), linear-gradient(135deg,#14102a,#2a2050)}
.eqset[data-theme="divine"]  .item-tile__art{background:radial-gradient(circle at 50% 50%, #a0872e, transparent 65%), linear-gradient(135deg,#1e180a,#3d2f14)}
.eqset[data-theme="dragon"]  .item-tile__art{background:radial-gradient(circle at 50% 50%, #a03a2a, transparent 65%), linear-gradient(135deg,#1a0a06,#3f1510)}
.eqset[data-theme="royal"]{
  background:radial-gradient(ellipse at top, rgba(212,162,76,.06), transparent 50%);
}
.eqset[data-theme="royal"]   .item-tile__art{background:radial-gradient(circle at 50% 50%, #a73a3a, transparent 65%), linear-gradient(135deg,#2a0a10,#4a1820 60%,#6a2030)}
.eqset[data-theme="royal"] .item-tile{border-color:rgba(212,162,76,.35)}
.eqset[data-theme="royal"] .item-tile:hover{border-color:var(--gold-2)}

/* ============ BESTIARY PAGE (yaratıklar.html) ============ */
/* Continent sections (also legacy .tier support) */
.continent,
.tier{
  padding:3rem 2rem 5rem;
  max-width:1400px;
  margin:0 auto;
  position:relative;
}
.continent + .continent,
.tier + .tier{
  border-top:1px solid var(--border);
  padding-top:5rem;
}
.continent__header,
.tier__header{
  text-align:center;
  max-width:820px;
  margin:0 auto 3rem;
}
.continent__header h2,
.tier__header h2{
  font-family:'Cinzel', serif;
  font-size:clamp(2rem,3.4vw,3rem);
  background:linear-gradient(180deg,#fff,var(--gold-2) 65%,var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:.6rem;
  letter-spacing:.04em;
}
.continent__kicker{
  font-family:var(--f-display);
  color:var(--gold);
  font-size:.85rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  margin-bottom:1rem;
  text-shadow:0 0 14px rgba(212,162,76,.3);
}
.continent__sub,
.tier__sub{
  font-family:'Cormorant Garamond', Georgia, serif;
  color:var(--ink-dim);
  font-size:1.1rem;
  font-style:italic;
  line-height:1.7;
}
.continent__grid,
.tier__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.4rem;
}

/* Individual creature card */
.creature{
  background:rgba(18,10,8,.55);
  border:1px solid var(--border);
  overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .4s ease, border-color .4s ease, box-shadow .4s ease;
  position:relative;
}
.creature:hover{
  transform:translateY(-6px);
  border-color:var(--gold);
  box-shadow:0 20px 50px rgba(0,0,0,.45), 0 0 30px rgba(212,162,76,.15);
}
.creature--boss{
  border-color:rgba(212,162,76,.4);
  background:linear-gradient(135deg, rgba(212,162,76,.08), rgba(18,10,8,.55));
}
.creature--final{
  border-color:rgba(199,74,42,.55);
  background:linear-gradient(135deg, rgba(199,74,42,.12), rgba(18,10,8,.6));
}
.creature--final:hover{
  border-color:#e8864a;
  box-shadow:0 22px 60px rgba(0,0,0,.55), 0 0 40px rgba(199,74,42,.3);
}

/* Creature art — themed atmospheric gradient + PNG */
.creature__art{
  position:relative;
  aspect-ratio:3/4;
  overflow:hidden;
  border-bottom:1px solid var(--border);
}
.creature__art::before{
  content:'';
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.05), transparent 55%),
    linear-gradient(180deg, rgba(10,7,5,0) 40%, rgba(10,7,5,.9));
  z-index:2;
  pointer-events:none;
}
.creature__art img{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  max-width:92%;
  max-height:92%;
  width:auto;
  height:auto;
  object-fit:contain;
  object-position:center center;
  z-index:1;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.65));
  transition:transform .6s cubic-bezier(.22,.61,.36,1), filter .4s ease;
}
.creature:hover .creature__art img{
  transform:translate(-50%,-50%) translateY(-4px) scale(1.05);
  filter:drop-shadow(0 16px 30px rgba(0,0,0,.8)) drop-shadow(0 0 18px rgba(212,162,76,.2));
}

/* Theme backgrounds — per habitat */
.creature__art[data-theme="forest"]{
  background:radial-gradient(circle at 50% 55%, #2a5a2f, transparent 60%), linear-gradient(135deg,#0f2012,#1a3a20);
}
.creature__art[data-theme="swamp"]{
  background:radial-gradient(circle at 50% 55%, #3a4a28, transparent 60%), linear-gradient(135deg,#1a2010,#2a3018);
}
.creature__art[data-theme="desert"]{
  background:radial-gradient(circle at 50% 55%, #8b6a2a, transparent 60%), linear-gradient(135deg,#2a1f0f,#4a3820);
}
.creature__art[data-theme="stone"]{
  background:radial-gradient(circle at 50% 55%, #6a6660, transparent 60%), linear-gradient(135deg,#1f1e1c,#3a3832);
}
.creature__art[data-theme="crystal"]{
  background:radial-gradient(circle at 50% 55%, #4a7ab0, transparent 60%), linear-gradient(135deg,#0f1f3a,#2a4a70);
}
.creature__art[data-theme="frost"]{
  background:radial-gradient(circle at 50% 55%, #6ea8d6, transparent 60%), linear-gradient(135deg,#0f1f3a,#1a3a5a);
}
.creature__art[data-theme="bone"]{
  background:radial-gradient(circle at 50% 55%, #7a7060, transparent 60%), linear-gradient(135deg,#1f1a12,#3a3020);
}
.creature__art[data-theme="deep"]{
  background:radial-gradient(circle at 50% 55%, #2a6a7a, transparent 60%), linear-gradient(135deg,#0a1a20,#15303a);
}
.creature__art[data-theme="dark"]{
  background:radial-gradient(circle at 50% 55%, #4a3a6a, transparent 60%), linear-gradient(135deg,#150f1f,#2a1f3a);
}
.creature__art[data-theme="demon"]{
  background:radial-gradient(circle at 50% 55%, #8b2a3a, transparent 60%), linear-gradient(135deg,#2a0510,#4a1028);
}
.creature__art[data-theme="inferno"]{
  background:radial-gradient(circle at 50% 55%, #c74a1a, transparent 60%), linear-gradient(135deg,#2a0f0a,#6b1a10);
}
.creature__art[data-theme="dragon"]{
  background:radial-gradient(circle at 50% 55%, #a03020, transparent 60%), linear-gradient(135deg,#1a0805,#3a140a);
}

/* Level badge */
.creature__level{
  position:absolute;
  top:.7rem;
  right:.7rem;
  z-index:4;
  font-family:var(--f-display);
  font-size:.6rem;
  letter-spacing:.18em;
  color:var(--gold-2);
  padding:.3rem .65rem;
  background:rgba(10,7,5,.8);
  border:1px solid rgba(212,162,76,.4);
  backdrop-filter:blur(4px);
  text-transform:uppercase;
  font-weight:700;
}
.creature__level--boss{
  color:#f08a5a;
  background:linear-gradient(135deg, rgba(199,74,42,.3), rgba(10,7,5,.85));
  border-color:#c74a2a;
  box-shadow:0 0 14px rgba(199,74,42,.35);
}

/* Creature body */
.creature__body{
  padding:1.2rem 1.3rem 1.3rem;
  display:flex;flex-direction:column;gap:.3rem;
  flex:1;
}
.creature__body h3{
  font-family:'Cinzel', serif;
  font-size:1.1rem;
  color:var(--ink);
  letter-spacing:.02em;
  margin-bottom:.2rem;
}
.creature--boss .creature__body h3{color:var(--gold-2)}
.creature--final .creature__body h3{color:#f08a5a}
.creature__type{
  font-family:var(--f-display);
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:.6rem;
}
.creature__body > p:not(.creature__type){
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:.95rem;
  line-height:1.55;
  color:var(--ink-dim);
  margin-bottom:.7rem;
  flex:1;
}
/* Systematic threat rank (replaces stars) */
.creature__rank{
  display:flex;
  align-items:center;
  gap:.5rem;
  padding-top:.7rem;
  margin-top:auto;
  border-top:1px solid var(--border);
  font-family:var(--f-display);
}
.creature__rank span{
  font-size:.6rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.creature__rank b{
  font-size:1rem;
  font-weight:900;
  letter-spacing:.08em;
  color:var(--gold-2);
  text-shadow:0 0 10px rgba(240,198,116,.3);
}
.creature__rank em{
  margin-left:auto;
  font-style:normal;
  font-size:.65rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  padding:.2rem .55rem;
  border:1px solid currentColor;
  background:rgba(10,7,5,.4);
  font-weight:700;
}
/* Per-tier colors (5 continents + 1 final) */
.creature__rank[data-rank="I"]   b{color:#9cc088}
.creature__rank[data-rank="I"]   em{color:#9cc088}
.creature__rank[data-rank="II"]  b{color:var(--gold-2)}
.creature__rank[data-rank="II"]  em{color:var(--gold-2)}
.creature__rank[data-rank="III"] b{color:#7fc1e8}
.creature__rank[data-rank="III"] em{color:#7fc1e8}
.creature__rank[data-rank="IV"]  b{color:#c9a0ff}
.creature__rank[data-rank="IV"]  em{color:#c9a0ff}
.creature__rank[data-rank="V"]   b{color:#f08a5a}
.creature__rank[data-rank="V"]   em{color:#f08a5a}
.creature__rank[data-rank="FATE"] b{
  color:#f0a878;
  font-size:1.2rem;
}
.creature__rank[data-rank="FATE"] em{
  color:#1a0f05;
  background:linear-gradient(135deg, var(--gold-2), #f09060);
  border-color:#c74a2a;
  box-shadow:0 0 14px rgba(199,74,42,.4);
  font-weight:900;
}

/* ============ BOOK / STORY PAGE ============ */
.book-hero{
  padding:10rem 2rem 3rem;
  max-width:900px;
  margin:0 auto;
  text-align:center;
  position:relative;
}
.book-hero__seal{
  display:inline-block;
  width:110px;height:110px;
  color:var(--gold);
  margin-bottom:2rem;
  animation:pageSealSpin 60s linear infinite;
  filter:drop-shadow(0 0 28px rgba(212,162,76,.5));
}
.book-hero__seal svg{width:100%;height:100%}
.book-hero h1{
  font-family:'Cinzel', serif;
  font-size:clamp(2.8rem,6vw,5rem);
  background:linear-gradient(180deg,#fff,var(--gold-2) 60%,var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:1.5rem;
  letter-spacing:.02em;
  text-shadow:0 0 60px rgba(212,162,76,.25);
}
.book-hero__sub{
  color:var(--ink-dim);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.2rem;
  font-style:italic;
  max-width:680px;
  margin:0 auto 2.2rem;
  line-height:1.75;
}
.book-hero__meta{
  display:inline-flex;
  align-items:center;
  gap:2rem;
  padding:1rem 2rem;
  border:1px solid var(--border);
  background:rgba(10,7,5,.55);
  font-family:var(--f-display);
  flex-wrap:wrap;
  justify-content:center;
}
.book-hero__meta span{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  font-size:.65rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.book-hero__meta b{
  font-size:1.4rem;
  color:var(--gold-2);
  font-weight:700;
  text-shadow:0 0 14px rgba(240,198,116,.35);
}
.book-hero__sep{
  width:1px;height:30px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  opacity:.4;
}

/* Table of Contents */
.toc{
  padding:3rem 2rem 5rem;
  max-width:900px;
  margin:0 auto;
}
.toc__list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:.15rem;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(26,16,12,.72), rgba(18,10,8,.5));
  padding:1.5rem 2rem;
  counter-reset:toc;
  position:relative;
}
.toc__list::before{
  content:'';
  position:absolute;
  top:10px;left:10px;right:10px;bottom:10px;
  border:1px solid rgba(212,162,76,.1);
  pointer-events:none;
}
.toc__list a{
  display:grid;
  grid-template-columns:3.2rem 1fr auto auto;
  align-items:baseline;
  gap:.8rem;
  padding:.65rem 0;
  color:var(--ink-dim);
  transition:color .3s ease, padding .3s ease;
  position:relative;
}
.toc__list a:hover{
  color:var(--gold-2);
  padding-left:.4rem;
}
.toc__num{
  font-family:var(--f-display);
  font-size:.82rem;
  font-weight:700;
  color:var(--gold);
  letter-spacing:.15em;
  text-align:right;
}
.toc__title{
  font-family:var(--f-display);
  font-size:1rem;
  color:var(--ink);
  transition:color .3s ease;
}
.toc__list a:hover .toc__title{color:var(--gold-2)}
.toc__dots{
  flex:1;
  border-bottom:1px dotted rgba(212,162,76,.2);
  height:1px;
  margin:0 .6rem;
  align-self:center;
}
.toc__sub{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:.95rem;
  color:var(--ink-dim);
  font-style:italic;
  white-space:nowrap;
}

/* Book / Chapters (accordion) */
.book{
  max-width:820px;
  margin:0 auto;
  padding:2rem 2rem 4rem;
}
/* When TOC is removed, lift the chapter stack to where TOC used to sit */
.book--no-toc{
  padding-top:3rem;
}
.chapter{
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(26,16,12,.55), rgba(18,10,8,.35));
  margin-bottom:1rem;
  scroll-margin-top:90px;
  transition:border-color .35s ease, background .35s ease, box-shadow .35s ease;
  position:relative;
  overflow:hidden;
}
.chapter::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity:0;
  transition:opacity .4s ease;
}
.chapter[open]{
  border-color:rgba(212,162,76,.55);
  background:linear-gradient(135deg, rgba(26,16,12,.8), rgba(18,10,8,.5));
  box-shadow:0 16px 60px rgba(0,0,0,.35), 0 0 30px rgba(212,162,76,.08);
}
.chapter[open]::before{opacity:1}

/* Summary (clickable header) */
.chapter__summary{
  list-style:none;
  cursor:pointer;
  padding:1.8rem 2rem 1.8rem 2rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.4rem;
  position:relative;
  transition:background .3s ease, padding .3s ease;
}
.chapter__summary::-webkit-details-marker{display:none}
.chapter__summary::marker{display:none;content:''}
.chapter__summary:hover{background:rgba(212,162,76,.05)}
.chapter__summary:focus-visible{
  outline:1px dashed var(--gold);
  outline-offset:-6px;
}

/* Toggle indicator */
.chapter__toggle{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  font-family:var(--f-display);
  font-size:.7rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--gold);
  padding:.5rem 1rem;
  border:1px solid var(--gold);
  background:rgba(10,7,5,.4);
  transition:all .3s ease;
  min-width:110px;
  justify-content:center;
}
.chapter__toggle-close{display:none}
.chapter[open] .chapter__toggle-open{display:none}
.chapter[open] .chapter__toggle-close{display:inline}
.chapter[open] .chapter__toggle{
  color:var(--gold-2);
  background:rgba(212,162,76,.14);
  box-shadow:0 0 14px rgba(212,162,76,.2);
}
.chapter__summary:hover .chapter__toggle{
  background:rgba(212,162,76,.12);
  color:var(--gold-2);
  transform:translateX(-2px);
}

.chapter__head{
  text-align:left;
  flex:1;
  margin-bottom:0;
}
.chapter__num{
  display:inline-block;
  font-family:var(--f-display);
  font-size:.68rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--gold);
  padding:.3rem .8rem;
  border:1px solid var(--border);
  background:rgba(10,7,5,.55);
  margin-bottom:.7rem;
}
.chapter__title{
  font-family:'Cinzel', serif;
  font-size:clamp(1.5rem,2.8vw,2.1rem);
  font-weight:700;
  color:var(--ink);
  letter-spacing:.02em;
  margin-bottom:.4rem;
  background:linear-gradient(180deg,var(--ink),var(--gold-2) 80%,var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  line-height:1.2;
}
.chapter__flourish{
  display:inline-block;
  color:var(--gold);
  font-size:.72rem;
  letter-spacing:.5em;
  text-shadow:0 0 10px rgba(212,162,76,.4);
  opacity:.7;
}
.chapter__flourish--end{
  display:block;
  font-size:2.2rem;
  margin:2rem auto 0;
  letter-spacing:0;
  opacity:1;
}
.chapter__body{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.15rem;
  line-height:1.8;
  color:var(--ink);
  padding:0 2rem 2.5rem;
  border-top:1px solid var(--border);
  padding-top:2rem;
  animation:chapterOpenFade .65s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes chapterOpenFade{
  from{opacity:0;transform:translateY(-10px);filter:blur(4px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}
.chapter--epilogue .chapter__body{
  border-top:0;
  padding-top:0;
  animation:none;
}
.chapter__body p{
  margin-bottom:1.4rem;
}
.chapter__body em{
  color:var(--gold-2);
  font-style:italic;
}
.chapter__body b{
  color:var(--gold-2);
  font-family:var(--f-display);
  font-weight:700;
  font-size:.95em;
  letter-spacing:.03em;
}
.chapter__drop{
  font-size:1.3rem;
  line-height:1.75;
  color:var(--ink);
}
.chapter__drop::first-letter{
  font-family:'Cinzel', serif;
  font-size:4rem;
  font-weight:900;
  float:left;
  line-height:.85;
  margin:.25rem .7rem 0 0;
  color:var(--gold-2);
  text-shadow:0 0 20px rgba(240,198,116,.45);
}
.chapter__pull{
  margin:2rem 0;
  padding:1.2rem 1.8rem;
  border-left:3px solid var(--gold);
  background:linear-gradient(90deg, rgba(212,162,76,.08), transparent);
  font-family:'Cormorant Garamond', Georgia, serif;
  font-style:italic;
  font-size:1.25rem;
  color:var(--gold-2);
  line-height:1.6;
}
.chapter__sub{
  font-family:'Cinzel', serif;
  font-size:1.4rem;
  color:var(--gold);
  letter-spacing:.05em;
  margin:2.5rem 0 1.2rem;
  padding-bottom:.5rem;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:.8rem;
}
.chapter__sub::before{
  content:'◆';
  color:var(--gold);
  font-size:.7em;
}

/* Chapter grids */
.chapter__grid{
  display:grid;
  gap:1rem;
  margin:1.5rem 0 2rem;
}
.chapter__grid--two{grid-template-columns:repeat(2,1fr)}
.chapter__grid--three{grid-template-columns:repeat(3,1fr)}
.chapter__grid--four{grid-template-columns:repeat(2,1fr)}
.chapter__grid--kita{grid-template-columns:repeat(2,1fr)}

/* Aeternil Cards */
.aeternil-card{
  padding:1.3rem 1.4rem;
  border:1px solid var(--border);
  background:rgba(18,10,8,.5);
  transition:all .35s ease;
  position:relative;
}
.aeternil-card:hover{
  border-color:var(--gold);
  background:rgba(212,162,76,.08);
  transform:translateY(-3px);
}
.aeternil-card--lone{
  border-color:rgba(212,162,76,.4);
  background:linear-gradient(135deg, rgba(212,162,76,.1), rgba(26,16,12,.6));
}
.aeternil-card__mark{
  display:inline-block;
  font-size:1.6rem;
  color:var(--gold-2);
  text-shadow:0 0 14px rgba(240,198,116,.4);
  margin-bottom:.4rem;
  line-height:1;
}
.aeternil-card h4{
  font-family:'Cinzel', serif;
  font-size:1.1rem;
  color:var(--ink);
  margin-bottom:.2rem;
}
.aeternil-card__kicker{
  font-family:var(--f-display) !important;
  color:var(--gold) !important;
  font-size:.7rem !important;
  letter-spacing:.18em;
  text-transform:uppercase;
  margin-bottom:.6rem !important;
  font-weight:600;
}
.aeternil-card > p:not(.aeternil-card__kicker){
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:.98rem;
  line-height:1.55;
  color:var(--ink-dim);
  font-style:italic;
  margin-bottom:0;
}

/* Theory / Kita / Race-lore / Sizinti / Collapse / Tear / Kurum / Bakis Cards — shared base */
.theory-card, .kita-card, .race-lore-card, .sizinti-card,
.collapse-card, .tear-card, .kurum-card, .bakis-card{
  padding:1.4rem 1.5rem;
  border:1px solid var(--border);
  background:rgba(18,10,8,.5);
  transition:all .35s ease;
  position:relative;
}
.theory-card:hover, .kita-card:hover, .race-lore-card:hover, .sizinti-card:hover,
.collapse-card:hover, .tear-card:hover, .kurum-card:hover, .bakis-card:hover{
  border-color:var(--gold);
  background:rgba(212,162,76,.06);
  transform:translateY(-3px);
}
.theory-card h4, .kita-card h4, .race-lore-card h4, .sizinti-card h4,
.collapse-card h4, .tear-card h4, .kurum-card h4, .bakis-card h4{
  font-family:'Cinzel', serif;
  font-size:1.1rem;
  color:var(--gold-2);
  margin-bottom:.5rem;
  letter-spacing:.02em;
}
.theory-card p, .kita-card p, .race-lore-card p, .sizinti-card p,
.collapse-card p, .tear-card p, .kurum-card p, .bakis-card p{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:.98rem;
  line-height:1.6;
  color:var(--ink-dim);
  margin-bottom:0;
}
.theory-card__race, .kita-card__badge, .sizinti-card__kicker,
.tear-card__num{
  display:inline-block;
  font-family:var(--f-display);
  font-size:.65rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold);
  padding:.25rem .6rem;
  border:1px solid var(--border);
  background:rgba(10,7,5,.5);
  margin-bottom:.8rem;
}
.sizinti-card__kicker{
  border:0;background:transparent;padding:0;
  color:var(--ink-dim) !important;
  font-size:.72rem !important;
  margin-top:-.3rem;
  font-style:normal !important;
}
.race-lore-card__sigil{
  display:inline-block;
  font-family:'Cinzel', serif;
  font-size:1.8rem;
  color:var(--gold);
  margin-bottom:.3rem;
  line-height:1;
  text-shadow:0 0 14px rgba(212,162,76,.4);
}
.kita-card--sea{
  border-color:rgba(127,193,232,.15);
}
.kita-card--sea .kita-card__badge{
  color:#7fc1e8;
  border-color:rgba(127,193,232,.3);
}

/* Epilogue */
.chapter--epilogue{
  border-top:1px solid var(--border);
  text-align:center;
  padding:4rem 0 3rem;
}
.epilogue{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-size:1.35rem;
  font-style:italic;
  color:var(--gold-2);
  line-height:2;
  letter-spacing:.02em;
}

/* Book navigation */
.book-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  max-width:780px;
  margin:3rem auto 0;
  padding:2rem 0 0;
  border-top:1px solid var(--border);
  gap:1rem;
  flex-wrap:wrap;
}
.book-nav a{
  font-family:var(--f-display);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-dim);
  padding:.8rem 1.4rem;
  border:1px solid var(--border);
  transition:all .3s ease;
  background:rgba(10,7,5,.4);
}
.book-nav a:hover{
  color:var(--gold-2);
  border-color:var(--gold);
  background:rgba(212,162,76,.08);
  transform:translateY(-2px);
}

/* ============ PAGE HERO (sub-page) ============ */
.page-hero{
  padding:11rem 2rem 4rem;
  max-width:900px;
  margin:0 auto;
  text-align:center;
  position:relative;
}
.page-hero__seal{
  display:inline-block;
  width:96px;height:96px;
  color:var(--gold);
  margin-bottom:2rem;
  animation:pageSealSpin 60s linear infinite;
  filter:drop-shadow(0 0 24px rgba(212,162,76,.45));
}
.page-hero__seal svg{width:100%;height:100%}
@keyframes pageSealSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.page-hero h1{
  font-size:clamp(2.4rem,5vw,4.2rem);
  background:linear-gradient(180deg,#fff,var(--gold-2) 60%,var(--gold));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:1.2rem;
  letter-spacing:.02em;
  text-shadow:0 0 60px rgba(212,162,76,.2);
}
.page-hero__sub{
  color:var(--ink-dim);
  font-size:1.05rem;
  max-width:620px;
  margin:0 auto 2.2rem;
  line-height:1.75;
}
.page-hero__stats{
  display:inline-flex;
  align-items:center;
  gap:2rem;
  padding:1rem 2rem;
  border:1px solid var(--border);
  background:rgba(10,7,5,.5);
  font-family:var(--f-display);
  flex-wrap:wrap;
  justify-content:center;
}
.page-hero__stats span{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.15rem;
  font-size:.68rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.page-hero__stats b{
  font-size:1.2rem;
  color:var(--gold-2);
  font-weight:700;
  letter-spacing:.04em;
  text-shadow:0 0 12px rgba(240,198,116,.3);
}
.page-hero__sep{
  width:1px;height:30px;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  opacity:.4;
}

/* ============ TICKET SECTION WRAPPER ============ */
.ticket-section{
  padding:2rem 2rem 5rem;
  position:relative;
  display:none;
}
.ticket-section.is-open{
  display:block;
  animation:ticketReveal .7s cubic-bezier(.22,.61,.36,1);
}
@keyframes ticketReveal{
  from{opacity:0;transform:translateY(28px);filter:blur(6px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

/* ============ FAQ ============ */
.faq{
  padding:1rem 2rem 6rem;
  max-width:900px;
  margin:0 auto;
}
.faq__list{
  display:flex;
  flex-direction:column;
  gap:.7rem;
}
.faq__item{
  border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(26,16,12,.6),rgba(18,10,8,.4));
  transition:border-color .3s ease, background .3s ease;
  position:relative;
}
.faq__item::before{
  content:'';
  position:absolute;
  top:0;left:0;
  width:2px;height:100%;
  background:linear-gradient(180deg,transparent,var(--gold),transparent);
  opacity:0;
  transition:opacity .35s ease;
}
.faq__item[open]{
  border-color:var(--gold);
  background:linear-gradient(135deg,rgba(26,16,12,.8),rgba(18,10,8,.55));
}
.faq__item[open]::before{opacity:1}
.faq__item summary{
  padding:1.2rem 1.5rem;
  cursor:pointer;
  font-family:var(--f-display);
  font-size:1rem;
  letter-spacing:.02em;
  color:var(--ink);
  list-style:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  transition:color .3s ease;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:'';
  width:16px;height:16px;
  background:
    linear-gradient(90deg, var(--gold), var(--gold)) center/12px 1px no-repeat,
    linear-gradient(90deg, var(--gold), var(--gold)) center/1px 12px no-repeat;
  transition:transform .35s ease, filter .3s ease;
  filter:drop-shadow(0 0 6px rgba(212,162,76,.4));
}
.faq__item summary:hover{color:var(--gold)}
.faq__item[open] summary{color:var(--gold-2)}
.faq__item[open] summary::after{
  transform:rotate(45deg);
  background:linear-gradient(90deg, var(--gold-2), var(--gold-2)) center/12px 1px no-repeat;
}
.faq__body{
  padding:0 1.5rem 1.5rem;
  color:var(--ink-dim);
  line-height:1.75;
  font-size:.95rem;
  animation:faqOpen .4s ease;
}
@keyframes faqOpen{
  from{opacity:0;transform:translateY(-6px)}
  to{opacity:1;transform:translateY(0)}
}
.faq__cta{
  margin-top:2.5rem;
  padding-top:2rem;
  border-top:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.5rem;
  flex-wrap:wrap;
  text-align:center;
}
.faq__cta p{
  color:var(--ink-dim);
  font-family:var(--f-display);
  font-size:.85rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}

/* ============ TICKET SYSTEM ============ */
.ticket{
  max-width:900px;
  margin:3rem auto 0;
  padding:2.5rem 3rem;
  background:linear-gradient(135deg, rgba(26,16,12,.82), rgba(18,10,8,.6));
  border:1px solid var(--border);
  position:relative;
  text-align:left;
  backdrop-filter:blur(4px);
}
.ticket::before{
  content:'';
  position:absolute;
  top:10px;left:10px;right:10px;bottom:10px;
  border:1px solid rgba(212,162,76,.1);
  pointer-events:none;
}
.ticket::after{
  content:'';
  position:absolute;
  top:0;left:20%;right:20%;
  height:1px;
  background:linear-gradient(90deg, transparent, var(--gold), transparent);
  box-shadow:0 0 12px rgba(212,162,76,.5);
}

.ticket__head{
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding-bottom:1.6rem;
  margin-bottom:1.8rem;
  border-bottom:1px solid var(--border);
}
.ticket__sigil{
  width:62px;height:62px;
  display:grid;place-items:center;
  border:1px solid var(--gold);
  color:var(--gold);
  flex-shrink:0;
  position:relative;
  background:rgba(10,7,5,.5);
  animation:ticketSealSpin 40s linear infinite;
  filter:drop-shadow(0 0 12px rgba(212,162,76,.25));
}
.ticket__sigil svg{width:38px;height:38px}
.ticket__sigil::before{
  content:'';
  position:absolute;
  top:-5px;left:-5px;right:-5px;bottom:-5px;
  border:1px solid rgba(212,162,76,.3);
  pointer-events:none;
}
@keyframes ticketSealSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

.ticket__title{flex:1}
.ticket__title .eyebrow{margin-bottom:.4rem}
.ticket__title h3{
  font-size:1.5rem;
  letter-spacing:.03em;
}
.ticket__id{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:.2rem;
  padding:.55rem 1rem;
  border:1px solid var(--border);
  background:rgba(10,7,5,.5);
  text-align:right;
}
.ticket__id small{
  font-size:.6rem;
  letter-spacing:.28em;
  color:var(--ink-dim);
  text-transform:uppercase;
}
.ticket__id b{
  font-family:var(--f-display);
  font-size:.85rem;
  letter-spacing:.18em;
  color:var(--gold-2);
  font-weight:700;
}

.ticket__field{margin-bottom:1.4rem}
.ticket__field--grow{flex:1}
.ticket__field > label{
  display:block;
  font-family:var(--f-display);
  font-size:.7rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-dim);
  margin-bottom:.7rem;
}
.ticket__row{
  display:grid;
  grid-template-columns:1fr 180px;
  gap:1.2rem;
}

/* Category chips */
.ticket__chips{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
.ticket__chips input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.ticket__chips label{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.6rem 1rem;
  border:1px solid var(--border);
  background:rgba(10,7,5,.5);
  color:var(--ink-dim);
  font-family:var(--f-display);
  font-size:.72rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .3s ease;
  margin-bottom:0;
}
.ticket__chips label span{color:var(--gold);font-size:1rem;line-height:1}
.ticket__chips label:hover{
  border-color:var(--gold);
  color:var(--ink);
}
.ticket__chips input:checked + label{
  border-color:var(--gold);
  background:linear-gradient(135deg, rgba(212,162,76,.18), rgba(212,162,76,.06));
  color:var(--gold-2);
  box-shadow:inset 0 0 20px rgba(212,162,76,.12);
}
.ticket__chips input:focus-visible + label{
  outline:1px dashed var(--gold);
  outline-offset:2px;
}

/* Text inputs & textarea */
.ticket__form input[type="text"],
.ticket__form textarea,
.ticket__form select{
  width:100%;
  padding:.95rem 1.2rem;
  background:rgba(10,7,5,.65);
  border:1px solid var(--border);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:.95rem;
  transition:all .3s ease;
  font-weight:400;
}
.ticket__form input[type="text"]::placeholder,
.ticket__form textarea::placeholder{
  color:rgba(168,150,132,.6);
  font-style:italic;
}
.ticket__form input[type="text"]:focus,
.ticket__form textarea:focus,
.ticket__form select:focus{
  outline:none;
  border-color:var(--gold);
  background:rgba(18,10,8,.75);
  box-shadow:0 0 0 1px var(--gold), 0 0 18px rgba(212,162,76,.2);
}
.ticket__form textarea{resize:vertical;min-height:120px;line-height:1.6}
.ticket__form select{
  appearance:none;
  -webkit-appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--gold) 50%),
    linear-gradient(-45deg, transparent 50%, var(--gold) 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 12px) 50%;
  background-size:6px 6px;
  background-repeat:no-repeat;
  padding-right:2.5rem;
  cursor:pointer;
}
.ticket__form select option{
  background:#0a0705;
  color:var(--ink);
}

/* Priority */
.ticket__priority{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.5rem;
}
.ticket__priority input{position:absolute;opacity:0;pointer-events:none}
.ticket__priority label{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:.8rem;
  border:1px solid var(--border);
  background:rgba(10,7,5,.5);
  color:var(--ink-dim);
  font-family:var(--f-display);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .3s ease;
  position:relative;
  overflow:hidden;
}
.prio-dot{
  width:8px;height:8px;
  border-radius:50%;
  background:currentColor;
  flex-shrink:0;
  box-shadow:0 0 0 3px rgba(255,255,255,.03);
}
.ticket__priority label:hover{border-color:var(--gold);color:var(--ink)}
/* Priority-specific colors */
.ticket__priority input[id="p-low"]:checked + label{
  border-color:#8da085;color:#a8c0a0;background:rgba(141,160,133,.12);
}
.ticket__priority input[id="p-normal"]:checked + label{
  border-color:#7fc1e8;color:#9fd4f2;background:rgba(127,193,232,.12);
}
.ticket__priority input[id="p-high"]:checked + label{
  border-color:#e8a464;color:#f0c090;background:rgba(232,164,100,.14);
}
.ticket__priority input[id="p-urgent"]:checked + label{
  border-color:#c74a2a;color:#f08a5a;
  background:linear-gradient(135deg, rgba(199,74,42,.25), rgba(199,74,42,.08));
  animation:urgentPulse 1.8s ease-in-out infinite;
}
@keyframes urgentPulse{
  0%,100%{box-shadow:inset 0 0 10px rgba(199,74,42,0), 0 0 0 0 rgba(199,74,42,.45)}
  50%{box-shadow:inset 0 0 14px rgba(199,74,42,.25), 0 0 20px 0 rgba(199,74,42,.35)}
}

/* Meta row */
.ticket__meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:.5rem;
  gap:1rem;
}
.ticket__hint{
  font-size:.78rem;
  color:var(--ink-dim);
  font-style:italic;
}
.ticket__counter{
  font-family:var(--f-display);
  font-size:.72rem;
  letter-spacing:.15em;
  color:var(--ink-dim);
}
.ticket__counter.is-warn{color:#e8a464}
.ticket__counter.is-max{color:#c74a2a}

/* Actions */
.ticket__actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-top:.5rem;
  flex-wrap:wrap;
}
.ticket__attach{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  padding:.85rem 1.3rem;
  border:1px dashed rgba(212,162,76,.4);
  background:rgba(10,7,5,.3);
  color:var(--ink-dim);
  font-family:var(--f-display);
  font-size:.74rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .3s ease;
  margin-bottom:0;
}
.ticket__attach:hover{
  border-color:var(--gold);
  border-style:solid;
  color:var(--gold);
  background:rgba(212,162,76,.08);
}
.ticket__attach-icon{font-size:1.1rem;line-height:1}
.ticket__attach small{
  color:var(--ink-dim);
  font-size:.68rem;
  letter-spacing:.15em;
  font-weight:400;
  margin-left:.2rem;
}
.ticket__attach.has-files{
  border-style:solid;
  border-color:var(--gold);
  color:var(--gold-2);
  background:rgba(212,162,76,.12);
}

/* Footer stats */
.ticket__footer{
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:1rem;
  margin-top:2rem;
  padding-top:1.8rem;
  border-top:1px solid var(--border);
}
.ticket__stat{text-align:center;flex:1}
.ticket__stat-num{
  display:block;
  font-family:var(--f-display);
  font-size:1.5rem;
  color:var(--gold-2);
  font-weight:700;
  margin-bottom:.25rem;
  text-shadow:0 0 14px rgba(240,198,116,.3);
  letter-spacing:.02em;
}
.ticket__stat-label{
  font-family:var(--f-display);
  font-size:.68rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--ink-dim);
}
.ticket__stat-sep{
  width:1px;
  height:34px;
  background:linear-gradient(180deg, transparent, var(--gold), transparent);
  opacity:.4;
}
.cta__cols{
  max-width:1100px;
  margin:6rem auto 0;
  padding-top:4rem;
  border-top:1px solid var(--border);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2rem;
  text-align:left;
}
.cta__col{
  padding:2rem 2.2rem;
  border:1px solid var(--border);
  background:rgba(26,16,12,.55);
  transition:border-color .3s ease, transform .3s ease;
}
.cta__col:hover{border-color:var(--gold);transform:translateY(-4px)}
.cta__col-mark{
  font-family:var(--f-display);
  color:var(--gold);
  font-size:2rem;
  display:block;
  margin-bottom:.5rem;
  text-shadow:0 0 20px rgba(212,162,76,.3);
}
.cta__col h4{
  font-size:1.4rem;
  margin-bottom:.6rem;
  letter-spacing:.04em;
}
.cta__col p{
  color:var(--ink-dim);
  font-size:.95rem;
  margin-bottom:1.2rem;
}
.cta__col-link{
  color:var(--gold);
  font-family:var(--f-display);
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  transition:color .2s, letter-spacing .3s;
}
.cta__col-link:hover{color:var(--gold-2);letter-spacing:.28em}

/* ============ FOOTER ============ */
.footer{
  background:rgba(18,10,8,.85);
  padding:4rem 2rem 2rem;
  border-top:1px solid var(--border);
  backdrop-filter:blur(4px);
  position:relative;
}
.footer__inner{
  max-width:1300px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:4rem;
  padding-bottom:3rem;
}
.footer__brand p{color:var(--ink-dim);margin-top:1rem;font-size:.9rem}
.footer__cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
}
.footer__cols h5{
  font-size:.8rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:1rem;
}
.footer__cols a{
  display:block;
  color:var(--ink-dim);
  font-size:.9rem;
  padding:.3rem 0;
  transition:color .2s;
}
.footer__cols a:hover{color:var(--gold)}

.footer__socials{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  margin-top:.6rem;
}
.footer__socials a{
  display:flex;
  align-items:center;
  gap:.9rem;
  width:100%;
  padding:.75rem 1rem;
  border:1px solid var(--border);
  color:var(--ink-dim);
  background:rgba(10,7,5,.45);
  font-family:var(--f-display);
  font-size:.78rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  transition:all .35s ease;
  position:relative;
  overflow:hidden;
}
.footer__socials a::before{
  content:'';
  position:absolute;
  top:0;left:-100%;
  width:100%;height:100%;
  background:linear-gradient(90deg, transparent, rgba(212,162,76,.12), transparent);
  transition:left .6s ease;
}
.footer__socials a:hover{
  color:var(--gold-2);
  border-color:var(--gold);
  transform:translateX(4px);
  box-shadow:-6px 8px 20px rgba(212,162,76,.18), 0 0 18px rgba(212,162,76,.2);
}
.footer__socials a:hover::before{left:100%}
.footer__socials svg{
  width:18px;
  height:18px;
  flex-shrink:0;
  position:relative;
  z-index:1;
  transition:transform .35s ease;
}
.footer__socials a:hover svg{transform:scale(1.15) rotate(-4deg)}
.footer__socials span{
  position:relative;
  z-index:1;
  flex:1;
}
.social-arrow{
  color:var(--gold);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .35s ease, transform .35s ease;
  font-family:var(--f-body);
  flex:none !important;
}
.footer__socials a:hover .social-arrow{
  opacity:1;
  transform:translateX(0);
}

/* Partner / Studio logos */
.footer__partners{
  margin-top:1.6rem;
  padding-top:1.4rem;
  border-top:1px solid var(--border);
  display:flex;
  gap:.8rem;
  flex-wrap:wrap;
}
.partner{
  flex:1;
  min-width:140px;
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.7rem .9rem;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(10,7,5,.5), rgba(18,10,8,.35));
  color:var(--ink-dim);
  transition:all .35s ease;
  position:relative;
  overflow:hidden;
}
.partner::after{
  content:'';
  position:absolute;
  top:6px;left:6px;right:6px;bottom:6px;
  border:1px solid rgba(212,162,76,.06);
  pointer-events:none;
  transition:border-color .35s ease;
}
.partner:hover{
  border-color:var(--gold);
  color:var(--gold-2);
  background:linear-gradient(135deg, rgba(212,162,76,.1), rgba(10,7,5,.5));
  box-shadow:0 8px 20px rgba(212,162,76,.15);
}
.partner:hover::after{border-color:rgba(212,162,76,.2)}
.partner__logo{
  width:34px;
  height:34px;
  flex-shrink:0;
  color:var(--gold);
  filter:drop-shadow(0 0 6px rgba(212,162,76,.25));
  transition:transform .35s ease;
}
.partner:hover .partner__logo{transform:rotate(-6deg) scale(1.08)}
.partner__text{
  display:flex;
  flex-direction:column;
  line-height:1.1;
  gap:2px;
}
.partner__text b{
  font-family:var(--f-display);
  font-size:.82rem;
  font-weight:900;
  letter-spacing:.18em;
  color:var(--ink);
  transition:color .35s ease;
}
.partner:hover .partner__text b{color:var(--gold-2)}
.partner__text small{
  font-size:.55rem;
  letter-spacing:.32em;
  color:var(--ink-dim);
  font-family:var(--f-body);
}
.footer__base{
  max-width:1300px;
  margin:0 auto;
  padding-top:2rem;
  border-top:1px solid var(--border);
  color:var(--ink-dim);
  font-size:.8rem;
  text-align:center;
  letter-spacing:.1em;
}

/* ============ SCROLL REVEAL ============ */
.reveal{
  opacity:0;
  will-change:opacity, transform, filter;
  transition:
    opacity .9s cubic-bezier(.22,.61,.36,1),
    transform 1s cubic-bezier(.22,.61,.36,1),
    filter .9s cubic-bezier(.22,.61,.36,1);
}
.reveal--up{
  transform:translate3d(0,48px,0);
  filter:blur(10px);
}
.reveal--left{
  transform:translate3d(-60px,0,0);
  filter:blur(6px);
}
.reveal--right{
  transform:translate3d(60px,0,0);
  filter:blur(6px);
}
.reveal--scale{
  transform:scale(.9);
  filter:blur(12px);
}
.reveal--tilt{
  transform:perspective(900px) rotateX(14deg) translate3d(0,30px,0);
  transform-origin:50% 100%;
  filter:blur(8px);
}
.reveal--fade{
  transform:translate3d(0,18px,0);
}
.reveal.is-visible{
  opacity:1;
  transform:none;
  filter:none;
}

/* Title letter-scatter flourish for section heads */
.reveal--scale.is-visible{
  animation:scaleGlow 1.2s cubic-bezier(.22,.61,.36,1);
}
@keyframes scaleGlow{
  0%{text-shadow:0 0 0 rgba(212,162,76,0)}
  40%{text-shadow:0 0 40px rgba(212,162,76,.5)}
  100%{text-shadow:0 0 0 rgba(212,162,76,0)}
}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1 !important;transform:none !important;filter:none !important;transition:none}
}

/* ============ RESPONSIVE ============ */
@media (max-width:1180px){
  .nav__menu{gap:1.2rem}
  .nav__menu a{font-size:.72rem;letter-spacing:.16em}
}
@media (max-width:1080px){
  .bestiary__grid{grid-template-columns:repeat(2,1fr)}
  .beast--lg{grid-row:span 2}
  .tier__grid,.continent__grid{grid-template-columns:repeat(2,1fr)}
  .classes__grid{grid-template-columns:repeat(2,1fr)}
  .equipment__grid{grid-template-columns:repeat(2,1fr)}
  .setline{grid-template-columns:repeat(2,1fr)}
  .eqset__grid{grid-template-columns:repeat(auto-fit, minmax(130px, 1fr))}
  .race-slide__content{padding:5rem 2rem 7rem}
  .race-slide__lore{grid-template-columns:1fr;gap:1.5rem;max-width:620px}
  .wiki__grid{grid-template-columns:repeat(2,1fr)}
  .chronicle{grid-template-columns:160px 1fr;gap:2rem;padding:2rem}
  .chronicle__seal{width:160px;height:160px}
  .chronicle__era-mark{font-size:2.6rem}
  .eras__list{grid-template-columns:repeat(3,1fr);gap:2rem 1rem}
  .era:nth-child(n+4){grid-column:span 1}
  .eras__line{display:none}
  .era::before{top:-1.5rem}
}
@media (max-width:960px){
  .nav__menu,.nav__cta{display:none}
  .nav__burger{display:block}
  .news__meta{gap:.5rem}
  .news__cat,.news__date{font-size:.68rem}
  .classes__grid{grid-template-columns:1fr;gap:1.2rem}
  .classes{padding:2rem 0 0}
  .classes .section-head{padding:0 1.5rem;margin-bottom:2rem}
  .races{padding:2rem 0 0}
  .races .section-head{padding:0 1.5rem;margin-bottom:2rem}
  .race-slider{min-height:100vh}
  .race-slide__content{padding:5rem 1.2rem 8rem}
  .race-slide__name{font-size:clamp(2.6rem, 14vw, 4rem)}
  .race-slide__lead{font-size:1.05rem}
  .race-slide__facts{gap:1.2rem 1.6rem;padding:1rem 0}
  .race-slide__facts > div{min-width:auto;flex:1 1 calc(50% - 1.6rem)}
  .race-slider__arrow{width:40px;height:40px}
  .race-slider__arrow svg{width:24px;height:24px}
  .race-slider__arrow--prev{left:.5rem}
  .race-slider__arrow--next{right:.5rem}
  .race-slider__dots{bottom:1.6rem;gap:.8rem}
  .race-slider__dot::before{width:30px}
  .race-slider__dot span{font-size:.58rem;letter-spacing:.2em}
  .races__watermark,.classes__watermark,.story__watermark,.equipment__watermark{font-size:18rem}
  .chapter-divider{padding:0 1.5rem;gap:1rem}
  .story{padding:5rem 1.5rem}
  .chronicle{grid-template-columns:1fr;padding:1.8rem;gap:1.5rem;text-align:center}
  .chronicle__seal{margin:0 auto}
  .chronicle__era{display:inline-block}
  .eras__list{grid-template-columns:1fr 1fr;gap:2rem 1rem}
  .equipment{padding:5rem 1.5rem}
  .equipment__grid{grid-template-columns:1fr;gap:1.2rem}
  .wiki__grid{grid-template-columns:1fr;gap:1rem}
  .bestiary__grid{grid-template-columns:1fr;gap:1.2rem}
  .tier,.continent{padding:2rem 1.5rem 3rem}
  .tier+.tier,.continent+.continent{padding-top:3rem}
  .tier__grid,.continent__grid{grid-template-columns:1fr;gap:1.2rem}
  .setline{grid-template-columns:1fr;gap:1.2rem}
  .eqnav{gap:.3rem;padding:.7rem 1rem;top:64px}
  .eqnav a{font-size:.62rem;letter-spacing:.12em;padding:.35rem .55rem}
  .eqset{padding:3rem 1.5rem 4rem}
  .eqset__grid{grid-template-columns:repeat(2,1fr);gap:.8rem}
  .rank-page{padding:1.5rem 1rem 4rem}
  .rank-tabs{gap:.5rem}
  .rank-tab{min-width:auto;flex:1 1 calc(50% - .5rem);padding:.9rem .8rem}
  .rank-tab__label{font-size:.72rem;letter-spacing:.14em}
  .rank-tab__count{font-size:.54rem}
  .pagebtn{min-width:36px;height:36px;font-size:.8rem;padding:0 .5rem}
  .beast--lg{grid-row:auto}
  .beast--lg .beast__art{aspect-ratio:16/9}
  .beast--lg .beast__glyph{font-size:4.5rem}
  .beast--lg h3{font-size:1.4rem}
  .rankings__grid{grid-template-columns:1fr;gap:1.5rem}
  .rank-board{padding:1.8rem 1.3rem}
  .rank-board__head{flex-direction:column;align-items:flex-start}
  .rank-row{grid-template-columns:44px 1fr auto;padding:.75rem .8rem;gap:.7rem}
  .rank-row__pos{font-size:1.1rem}
  .cta__cols{grid-template-columns:1fr;gap:1.2rem;margin-top:4rem;padding-top:3rem}
  .book-hero{padding:8rem 1.5rem 3rem}
  .book-hero__meta{gap:1rem;padding:.8rem 1.2rem}
  .book-hero__sep{display:none}
  .toc{padding:2rem 1.5rem 3rem}
  .toc__list{padding:1rem 1.2rem}
  .toc__list a{grid-template-columns:2.2rem 1fr}
  .toc__dots, .toc__sub{display:none}
  .book{padding:1rem 1rem 3rem}
  .chapter__summary{padding:1.3rem 1.3rem;flex-wrap:wrap;gap:.8rem}
  .chapter__toggle{min-width:auto;font-size:.65rem;padding:.4rem .8rem}
  .chapter__body{padding:1.5rem 1.3rem 2rem}
  .chapter__drop{font-size:1.1rem}
  .chapter__drop::first-letter{font-size:3rem}
  .chapter__grid--two, .chapter__grid--three, .chapter__grid--four, .chapter__grid--kita{grid-template-columns:1fr}
  .chapter__body{font-size:1.05rem}
  .chapter__pull{font-size:1.1rem;padding:1rem 1.3rem}
  .page-hero{padding:8rem 1.5rem 3rem}
  .page-hero__stats{gap:1.2rem;padding:.8rem 1.2rem}
  .page-hero__sep{display:none}
  .ticket-section{padding:1rem 1rem 3rem}
  .faq{padding:3rem 1.5rem 5rem}
  .faq__item summary{padding:1rem 1.2rem;font-size:.92rem}
  .ticket{padding:1.8rem 1.4rem;margin:2rem auto 0}
  .ticket__head{flex-wrap:wrap;gap:1rem}
  .ticket__id{margin-left:auto}
  .ticket__row{grid-template-columns:1fr}
  .ticket__priority{grid-template-columns:1fr 1fr;gap:.4rem}
  .ticket__actions{flex-direction:column;align-items:stretch}
  .ticket__attach{justify-content:center}
  .ticket__footer{flex-direction:column;gap:1.2rem}
  .ticket__stat-sep{width:40%;height:1px}
  .footer__inner{grid-template-columns:1fr}
  .footer__cols{grid-template-columns:1fr 1fr}
}