:root{
  --pink:#ff0a68;
  --pink2:#ff4f98;
  --silver:#e2e4e9;
}
*{box-sizing:border-box}
html,body{margin:0;background:#030407!important;color:#f7f7fa}
html body header.top,html body>footer{display:none!important}
html body main.wrap{width:100vw!important;max-width:none!important;margin:0!important;padding:0!important}
body{font-family:Inter,Arial,sans-serif}

.v18-page{
  min-height:100vh;
  background:radial-gradient(circle at 50% -10%,#3a0018 0,#0b0710 34%,#030407 76%);
}

.v18-hero{
  position:relative;
  min-height:430px;
  overflow:hidden;
  border-bottom:1px solid #ff0a6848;
  background:
    linear-gradient(180deg,#03040726,#030407e6 88%,#030407 100%),
    url('v11-hero.svg') center/cover no-repeat;
}

.v18-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 72% 34%,#ff0a6828 0,transparent 28%),
    radial-gradient(circle at 18% 46%,#83123c26 0,transparent 30%);
  animation:v18HeroPulse 6s ease-in-out infinite;
}

@keyframes v18HeroPulse{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

.v18-topnav{
  position:relative;
  z-index:2;
  width:min(calc(100% - 40px),1500px);
  margin:0 auto;
  padding:22px 0;
  display:flex;
  justify-content:space-between;
}

.v18-topnav a{
  padding:10px 15px;
  border:1px solid #ffffff16;
  border-radius:9px;
  background:#07090dba;
  color:#d8dae0;
  text-decoration:none;
  font-weight:800;
  backdrop-filter:blur(10px);
}

.v18-topnav a:hover{
  border-color:#ff0a6870;
  color:#fff;
  box-shadow:0 0 20px #ff0a6820;
}

.v18-hero-copy{
  position:relative;
  z-index:2;
  width:min(calc(100% - 40px),1500px);
  margin:80px auto 0;
}

.v18-hero-copy>span{
  color:#ff76ad;
  font-size:12px;
  letter-spacing:3px;
  font-weight:900;
}

.v18-hero-copy h1{
  margin:10px 0 8px;
  font-size:clamp(64px,8vw,126px);
  line-height:.9;
  font-style:italic;
  color:#e3e5ea;
  text-shadow:0 0 30px #ff0a6848;
}

.v18-hero-copy p{
  margin:0;
  color:#aeb3be;
  font-size:20px;
}

.v18-hero-mark{
  position:absolute;
  right:7%;
  bottom:2%;
  color:#ff4f98;
  font-size:clamp(120px,17vw,280px);
  opacity:.12;
  filter:drop-shadow(0 0 30px #ff0a68);
  animation:v18Mark 7s ease-in-out infinite;
}

@keyframes v18Mark{
  0%,100%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(-14px) rotate(5deg)}
}

.v18-main{
  width:min(calc(100% - 40px),1500px);
  margin:0 auto;
  padding:70px 0 90px;
}

.v18-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:30px;
  margin-bottom:30px;
}

.v18-heading span{
  color:#ff4f98;
  font-size:12px;
  letter-spacing:2px;
  font-weight:900;
}

.v18-heading h2{
  margin:7px 0 0;
  font-size:clamp(34px,4vw,58px);
}

.v18-heading p{
  max-width:520px;
  margin:0;
  color:#9097a3;
}

.v18-build-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(340px,1fr));
  gap:18px;
}

.v18-build-card{
  min-height:390px;
  overflow:hidden;
  border:1px solid #ffffff16;
  border-radius:16px;
  background:linear-gradient(145deg,#11131a,#07080c);
  color:#fff;
  text-decoration:none;
  box-shadow:0 18px 48px #0008;
  transition:.24s;
}

.v18-build-card:hover{
  transform:translateY(-7px);
  border-color:#ff0a68b8;
  box-shadow:0 0 34px #ff0a6834,0 28px 60px #000a;
}

.v18-build-visual{
  position:relative;
  height:230px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at center,#3a0a20 0,#11131a 40%,#07080c 76%);
}

.v18-build-visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 20%;
  opacity:.8;
  transform:scale(1.03);
  transition:transform .35s ease,opacity .35s ease,filter .35s ease;
  filter:saturate(.9) contrast(1.05);
}

.v18-build-card:hover .v18-build-visual img{
  transform:scale(1.10);
  opacity:1;
  filter:saturate(1.05) contrast(1.08);
}

.v18-build-visual>span{
  position:relative;
  z-index:2;
  font-size:82px;
  color:#ff4f98;
  filter:drop-shadow(0 0 25px #ff0a68);
}

.v18-build-glow{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 40%,#07080c 100%);
  pointer-events:none;
}

.v18-build-copy{
  padding:22px;
}

.v18-build-copy>span{
  color:#ff4f98;
  font-size:11px;
  letter-spacing:1.6px;
  font-weight:900;
}

.v18-build-copy h3{
  margin:7px 0;
  font-size:28px;
}

.v18-build-copy p{
  margin:0;
  color:#949aa5;
  min-height:38px;
}

.v18-build-meta{
  margin-top:20px;
  padding-top:15px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-top:1px solid #ffffff10;
}

.v18-build-meta small{
  color:#8e949f;
}

.v18-build-meta strong{
  color:#ff6fa8;
}

.v18-empty{
  padding:70px;
  border:1px solid #ffffff15;
  border-radius:14px;
  text-align:center;
}

.v18-empty a{color:#ff4f98}

.v18-footer{
  width:min(calc(100% - 40px),1500px);
  margin:0 auto;
  padding:24px 0;
  display:flex;
  justify-content:space-between;
  border-top:1px solid #ffffff10;
  color:#7e8490;
  font-size:12px;
}

.v18-footer strong{color:#fff}

@media(max-width:800px){
  .v18-heading{align-items:start;flex-direction:column}
  .v18-build-grid{grid-template-columns:1fr}
}

@media(max-width:520px){
  .v18-main,.v18-topnav,.v18-hero-copy,.v18-footer{width:calc(100% - 22px)}
  .v18-hero{min-height:390px}
  .v18-hero-copy{margin-top:55px}
  .v18-hero-copy h1{font-size:58px}
  .v18-hero-copy p{font-size:17px}
  .v18-build-card{min-height:350px}
  .v18-build-visual{height:205px}
  .v18-footer{flex-direction:column;gap:7px;text-align:center}
}

.v18-topnav>span{display:flex;gap:8px}


/* ===== V24 BUILD PROFILE CARDS ===== */
.v24-card-badges{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:14px
}
.v24-card-badges span{
  padding:6px 9px;border:1px solid #ff0a6840;border-radius:999px;
  background:#1a0710;color:#ff7caf;font-size:10px;font-weight:900
}
.v24-card-usage{
  margin-top:10px;padding:9px 10px;border-left:2px solid #ff0a68;
  background:#080a0e;color:#c4c8d0;font-size:12px
}


/* ===== V28 DUNGEON GUIDE ===== */
.v28-dungeon-hero{
  background:
    linear-gradient(180deg,#03040728,#030407df 86%,#030407 100%),
    var(--v28-banner,url('v11-hero.svg')) center/cover no-repeat;
}
.v28-hero-facts{
  display:flex;flex-wrap:wrap;gap:8px;margin-top:18px
}
.v28-hero-facts span{
  padding:8px 11px;border:1px solid #ff0a684a;border-radius:999px;
  background:#16070ee0;color:#ff83b5;font-size:11px;font-weight:900;
  backdrop-filter:blur(10px)
}
.v28-guide-section{
  width:min(calc(100% - 40px),1500px);
  margin:30px auto 95px
}
.v28-guide-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px
}
.v28-guide-card{
  min-height:230px;padding:20px;border:1px solid #ffffff15;border-radius:14px;
  background:
    radial-gradient(circle at 85% 0,#ff0a6812,transparent 32%),
    linear-gradient(145deg,#11131a,#07080c);
  box-shadow:0 18px 45px #0008
}
.v28-guide-card h3{
  margin:0 0 14px;color:#ff5a9f;font-size:20px
}
.v28-guide-card p{
  margin:0;color:#c2c6ce;line-height:1.75
}
.v28-guide-card em{color:#777f8b}
.v28-guide-list{display:grid;gap:9px}
.v28-guide-list>div{
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;align-items:center;
  padding:11px;border:1px solid #ffffff12;border-radius:8px;background:#090b10
}
.v28-guide-list span{
  width:25px;height:25px;display:grid;place-items:center;border:1px solid #ff0a6850;
  border-radius:6px;background:#1d0710;color:#ff5a9f
}
.v28-guide-list.drops span{
  border-color:#ffd06370;background:#251804;color:#ffd86c
}
@media(max-width:800px){
  .v28-guide-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .v28-guide-section{width:calc(100% - 22px)}
}