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

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#000;
  --bg-card:#0a0a0a;
  --bg-card-hover:#111;
  --white:#f5f5f5;
  --gray:#888;
  --gray-dim:#555;
  --gold:#c5a059;
  --gold-light:#d4b87a;
  --gold-dark:#8a6d2f;
  --border:rgba(255,255,255,.15);
  --border-active:rgba(255,255,255,.85);
  --radius:20px;
  --font-serif:'Cinzel',serif;
  --font-sans:'Montserrat',sans-serif;
  --nav-h:72px;
}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--white);
  font-family:var(--font-sans);
  font-weight:300;
  line-height:1.7;
  overflow-x:hidden;
  min-height:100vh;
}

a{color:inherit;text-decoration:none;transition:color .3s,opacity .3s}
a:hover{color:var(--gold)}

img{max-width:100%;height:auto;display:block}

.gold-text{
  background:linear-gradient(135deg,var(--gold-light),var(--gold),var(--gold-dark));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.container{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}

header.site-header{
  position:fixed;
  top:0;left:0;right:0;
  z-index:1000;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  background:rgba(0,0,0,.92);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border);
}

.logo{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-serif);
  font-size:1.1rem;
  letter-spacing:.12em;
  font-weight:600;
}

.logo-mark{
  width:42px;height:42px;
  border:1px solid var(--border);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-serif);
  font-size:1.4rem;
  color:var(--gold);
}

nav.main-nav{
  display:flex;
  gap:36px;
  align-items:center;
}

nav.main-nav a{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  position:relative;
  padding-bottom:6px;
}

nav.main-nav a.active::after,
nav.main-nav a:hover::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:1px;
  background:var(--white);
}

nav.main-nav a.active::after{height:2px}

.header-right{
  display:flex;
  align-items:center;
  gap:24px;
}

.lang-switch{
  display:flex;
  gap:8px;
  font-size:.65rem;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.lang-switch button{
  background:none;
  border:none;
  color:var(--gray);
  cursor:pointer;
  font-family:var(--font-sans);
  font-size:.65rem;
  letter-spacing:.15em;
  padding:4px 6px;
  transition:color .3s;
}

.lang-switch button.active,
.lang-switch button:hover{color:var(--white)}

.lang-switch .sep{color:var(--gray-dim)}

.menu-toggle{
  display:none;
  background:none;
  border:none;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
  padding:4px;
}

.menu-toggle span{
  display:block;
  width:22px;height:1px;
  background:var(--white);
  transition:transform .3s,opacity .3s;
}

main{padding-top:var(--nav-h)}

.hero-notify{
  text-align:center;
  padding:80px 32px 48px;
}

.hero-notify .label{
  font-size:.65rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--gray);
  margin-bottom:16px;
}

.hero-notify h1{
  font-family:var(--font-serif);
  font-size:clamp(2rem,5vw,3.5rem);
  font-weight:600;
  letter-spacing:.08em;
  line-height:1.2;
  margin-bottom:20px;
  text-shadow: 0 0 50px rgba(197, 160, 89, 0.9);
}

.hero-notify .sub{
  font-size:.75rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--gray);
  max-width:600px;
  margin:0 auto 24px;
}

.hero-notify .credit{
  font-size:.6rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gray-dim);
}

.featured-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin:0 auto 64px;
  max-width:1100px;
  overflow:hidden;
  position:relative;
  background:var(--bg-card);
}

.featured-card-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:420px;
}

.featured-content{
  padding:48px 56px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.featured-content .unlock-label{
  font-size:.65rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gray);
  margin-bottom:12px;
}

.featured-content h2{
  font-family:var(--font-serif);
  font-size:clamp(1.8rem,3vw,2.8rem);
  margin-bottom:16px;
  line-height:1.15;
}

.featured-content .quote{
  font-style:italic;
  color:var(--gray);
  font-size:.9rem;
  margin-bottom:24px;
  border-left:2px solid var(--gold);
  padding-left:16px;
}

.featured-content p{
  font-size:.85rem;
  color:var(--gray);
  margin-bottom:28px;
}

.featured-content .btn-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  align-self:flex-start;
}

.featured-content .btn-link .arrow{
  transition:transform .3s;
}

.featured-content .btn-link:hover .arrow{transform:translateX(4px)}

.featured-image{
  position:relative;
  overflow:hidden;
}

.featured-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  filter:grayscale(.4) contrast(1.1);
  mask-image:linear-gradient(to right,transparent 0%,black 25%);
  -webkit-mask-image:linear-gradient(to right,transparent 0%,black 25%);
}

.section-title{
  text-align:center;
  margin-bottom:40px;
}

.section-title .archive-label{
  font-size:.65rem;
  letter-spacing:.35em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
}

.section-title h2{
  font-family:var(--font-serif);
  font-size:clamp(1.5rem,3vw,2.2rem);
  letter-spacing:.06em;
}

.category-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-bottom:64px;
}

.category-card{
  position:relative;
  height:120px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  cursor:pointer;
  transition:border-color .4s,transform .4s;
}

.category-card.active,
.category-card:hover{
  border-color:var(--border-active);
  transform:translateY(-2px);
}

.category-card img{
  width:100%;height:100%;
  object-fit:cover;
  filter:brightness(.35) grayscale(.5);
  transition:filter .4s,transform .6s;
}

.category-card:hover img,
.category-card.active img{
  filter:brightness(.5) grayscale(.3);
  transform:scale(1.05);
}

.category-card span{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.7rem;
  letter-spacing:.2em;
  font-weight:600;
  text-transform:uppercase;
  text-shadow:0 2px 12px rgba(0,0,0,.8);
}

.boss-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
  margin-bottom:80px;
}

.boss-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-card);
  transition:border-color .4s,transform .4s,box-shadow .4s;
  cursor:pointer;
}

.boss-card:hover{
  border-color:var(--border-active);
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(197,160,89,.08);
}

.boss-card-img{
  height:180px;
  overflow:hidden;
  position:relative;
}

.boss-card-img img,
.featured-image img,
.boss-detail-image img,
.build-card-img img,
.map-img-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
  filter:grayscale(.25);
  transition:filter .4s,transform .6s;
}

.photo-wrap{
  display:block;
  width:100%;height:100%;
  position:relative;
  overflow:hidden;
}

.photo-wrap img{
  width:100%;height:100%;
  object-fit:cover;
  object-position:center top;
  filter:grayscale(.25);
  transition:filter .4s,transform .6s;
  pointer-events:none;
  cursor:default;
  user-select:none;
  -webkit-user-select:none;
}

.map-interactive-link{
  display:inline-block;
  margin-top:14px;
  font-size:.65rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  border-bottom:1px solid rgba(197,160,89,.35);
}

.map-interactive-link:hover{color:var(--gold-light)}

.boss-card:hover .boss-card-img img{
  filter:grayscale(0);
}

.boss-card-body{padding:20px 24px}

.boss-card-body .cat{
  font-size:.6rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}

.boss-card-body h3{
  font-family:var(--font-serif);
  font-size:1.1rem;
  letter-spacing:.04em;
}

.boss-detail{padding:48px 0 80px}

.breadcrumb{
  font-size:.65rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:32px;
}

.boss-detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:start;
}

.boss-detail-content h1{
  font-family:var(--font-serif);
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:12px;
  line-height:1.15;
}

.boss-detail-content .quote{
  font-style:italic;
  color:var(--gray);
  font-size:.95rem;
  margin-bottom:32px;
  border-left:2px solid var(--gold);
  padding-left:16px;
}

.info-block{
  margin-bottom:32px;
}

.info-block h3{
  font-size:.65rem;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:12px;
}

.info-block p,
.info-block li{
  font-size:.88rem;
  color:var(--gray);
}

.info-block ul{
  list-style:none;
  padding:0;
}

.info-block li{
  padding:6px 0;
  padding-left:16px;
  position:relative;
}

.info-block li::before{
  content:'›';
  position:absolute;
  left:0;
  color:var(--gold);
}

.boss-detail-image{
  position:sticky;
  top:calc(var(--nav-h) + 32px);
}

.boss-detail-image img{
  width:100%;
  border-radius:var(--radius);
  border:1px solid var(--border);
  filter:grayscale(.2);
}

.map-section{
  margin-top:48px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-card);
}

.map-section-header{
  padding:20px 28px;
  border-bottom:1px solid var(--border);
}

.map-section-header h3{
  font-family:var(--font-serif);
  font-size:1.1rem;
  letter-spacing:.06em;
}

.map-section-body{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  
  gap:0;
}

.map-img-wrap{
  padding:24px;
  border-right:1px solid var(--border);
}

.map-img-wrap img{
  width:100%;
  border-radius:8px;
  opacity:.85;
}

.map-info{
  padding:28px 32px;
}

.map-info .region-tag{
  display:inline-block;
  font-size:.6rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  border:1px solid var(--gold);
  color:var(--gold);
  padding:4px 12px;
  border-radius:20px;
  margin-bottom:16px;
}

.sub-nav{
  display:flex;
  gap:28px;
  margin-bottom:40px;
  border-bottom:1px solid var(--border);
  padding-bottom:16px;
}

.sub-nav a{
  font-size:.65rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  font-weight:500;
  position:relative;
  padding-bottom:8px;
}

.sub-nav a.active::after{
  content:'';
  position:absolute;
  bottom:-17px;left:0;right:0;
  height:2px;
  background:var(--white);
}

.builds-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
  gap:24px;
  margin-bottom:80px;
}

.build-card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--bg-card);
  transition:border-color .4s,transform .4s;
}

.build-card:hover{
  border-color:var(--border-active);
  transform:translateY(-3px);
}

.build-card-header{
  padding:28px 32px 20px;
  border-bottom:1px solid var(--border);
}

.build-card-header .type{
  font-size:.6rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:8px;
}

.build-card-header h3{
  font-family:var(--font-serif);
  font-size:1.4rem;
}

.build-card-body{padding:24px 32px 32px}

.build-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.05);
  font-size:.82rem;
}

.build-row:last-child{border-bottom:none}

.build-row .label{
  color:var(--gray);
  font-size:.65rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  min-width:100px;
}

.build-row .value{color:var(--white);text-align:right;flex:1}

.build-row-gear{align-items:flex-start}

.value-gear{
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-end;
}

.wiki-item-link{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:8px 12px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:.78rem;
  color:var(--white);
  transition:border-color .3s,background .3s,transform .3s;
  text-align:left;
  width:100%;
  max-width:320px;
}

.wiki-item-link:hover{
  border-color:var(--gold);
  background:rgba(197,160,89,.08);
  color:var(--gold-light);
  transform:translateX(-2px);
}

.wiki-item-arrow{
  color:var(--gold);
  font-size:.85rem;
}

.wiki-boss-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.68rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:28px;
  padding-bottom:4px;
  border-bottom:1px solid rgba(197,160,89,.3);
  transition:color .3s,border-color .3s;
}

.wiki-boss-link:hover{
  color:var(--gold-light);
  border-bottom-color:var(--gold);
}

.build-card-img{
  height:160px;
  overflow:hidden;
}

.build-card-img img{
  width:100%;height:100%;
  object-fit:cover;
  filter:grayscale(.4);
  transition:filter .4s;
}

.build-card:hover .build-card-img img{filter:grayscale(.1)}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:.7rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  margin-bottom:32px;
  color:var(--gray);
}

.back-link:hover{color:var(--white)}

footer.site-footer { 
  border-top: 1px solid var(--border); 
  padding: 32px; 
  font-weight: 650;
  text-align: center; 
  font-size: 13px; 
  letter-spacing: .2em; 
  color: var(--gray-dim); 
  display: flex; 
  flex-direction: row;
  justify-content: center; 
  align-items: center; 
  gap: 8px;
}


.hidden{display:none!important}

@media(max-width:900px){
  nav.main-nav{display:none}
  .menu-toggle{display:flex}
  nav.main-nav.open{
    display:flex;
    flex-direction:column;
    position:fixed;
    top:var(--nav-h);left:0;right:0;
    background:rgba(0,0,0,.97);
    padding:24px;
    gap:20px;
    border-bottom:1px solid var(--border);
  }
  .featured-card-inner,
  .boss-detail-grid,
  .map-section-body{grid-template-columns:1fr}
  .featured-image{height:280px}
  .featured-image img{mask-image:none;-webkit-mask-image:none}
  .category-row{grid-template-columns:repeat(2,1fr)}
  .boss-detail-image{position:static}
  .map-img-wrap{border-right:none;border-bottom:1px solid var(--border)}
}

@media(max-width:560px){
  header.site-header{padding:0 20px}
  .container{padding:0 20px}
  .category-row{grid-template-columns:1fr}
  .builds-grid{grid-template-columns:1fr}
  .featured-content{padding:32px 28px}
}

/* ─── BUFF SEQUENCE (builds page) ───────────────────────────────── */
.buff-sequence-list{
  list-style:none;
  padding:0;
  width:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.buff-sequence-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:.82rem;
  color:var(--gray);
}

.buff-step-num{
  min-width:22px;
  height:22px;
  border-radius:50%;
  background:var(--gold-dark);
  color:var(--white);
  font-size:.65rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  margin-top:2px;
}