:root{
  --pink:#ff0a68;
  --pink2:#ff5a9f;
  --silver:#e5e7ec;
  --bg:#030407;
  --panel:#0b0d13;
  --line:#ffffff14;
}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;background:#030407!important;color:#f6f7f9}
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}

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

.v21-top{
  min-height:190px;
  padding:24px clamp(22px,4vw,70px);
  display:grid;
  grid-template-columns:240px minmax(0,1fr) auto;
  align-items:center;
  gap:32px;
  border-bottom:1px solid #ff0a6840;
  background:
    linear-gradient(180deg,#0304071c,#030407db),
    url('v11-hero.svg') center/cover no-repeat;
}
.v21-logo img{
  width:210px;
  filter:drop-shadow(0 0 20px #ff0a6860);
}
.v21-build-head{text-align:center}
.v21-build-head>span{
  color:#ff6ba7;
  letter-spacing:2.5px;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
}
.v21-build-head h1{
  margin:7px 0 3px;
  font-size:clamp(42px,5vw,76px);
  line-height:.95;
  font-style:italic;
}
.v21-build-head p{margin:8px 0 0;color:#9da3ae}
.v21-actions{
  display:flex;
  gap:8px;
  padding:6px;
  border:1px solid #ffffff12;
  border-radius:12px;
  background:#07080cbf;
  backdrop-filter:blur(12px);
}
.v21-actions a{
  padding:10px 13px;
  border-radius:8px;
  color:#b7bbc4;
  text-decoration:none;
  font-weight:800;
  font-size:13px;
}
.v21-actions a:hover{color:#fff;background:#ff0a681d}

.v21-layout{
  width:min(calc(100% - 28px),1880px);
  margin:15px auto;
  display:grid;
  grid-template-columns:260px minmax(0,1fr) 360px;
  gap:15px;
  align-items:stretch;
}
.v21-inventory-panel,
.v21-stage-panel,
.v21-info-panel{
  border:1px solid var(--line);
  border-radius:15px;
  background:linear-gradient(180deg,#0d0f16,#07080c);
  box-shadow:0 20px 55px #0009;
}

.v21-inventory-panel{padding:15px}
.v21-panel-heading{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:13px;
}
.v21-panel-heading span{
  color:#ff4f98;
  letter-spacing:1.6px;
  font-size:12px;
  font-weight:900;
}
.v21-panel-heading strong{
  padding:5px 8px;
  border:1px solid #ff0a6840;
  border-radius:7px;
  color:#ff76ad;
  font-size:12px;
}
.v21-inventory{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.v21-slot{
  position:relative;
  min-height:122px;
  overflow:hidden;
  padding:6px;
  border:1px solid #424650;
  border-radius:9px;
  background:linear-gradient(145deg,#171a22,#08090e);
  color:#fff;
  cursor:pointer;
  transition:.2s;
}
.v21-slot::after{
  content:"";
  position:absolute;
  inset:4px;
  border:1px solid #ffffff0b;
  border-radius:7px;
  pointer-events:none;
}
.v21-slot img{
  width:100%;
  height:86px;
  object-fit:cover;
  object-position:top;
  border-radius:6px;
  opacity:.78;
  transition:.22s;
}
.v21-slot-symbol{
  position:absolute;
  z-index:2;
  top:8px;
  left:8px;
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  border:1px solid #ff0a6850;
  border-radius:6px;
  background:#15050cdd;
  color:#ff5a9f;
  text-shadow:0 0 8px #ff0a68;
}
.v21-slot-name{
  display:block;
  margin-top:5px;
  color:#aeb3bd;
  font-size:11px;
  font-weight:800;
}
.v21-slot:hover,
.v21-slot.active{
  transform:translateY(-2px);
  border-color:#ff0a68;
  box-shadow:0 0 24px #ff0a6843;
}
.v21-slot:hover img,
.v21-slot.active img{opacity:1;transform:scale(1.04)}
.v21-slot.active::before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:3;
  border:1px solid #ff8aba;
  border-radius:9px;
  animation:v21Pulse 1.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes v21Pulse{
  0%,100%{opacity:.3;box-shadow:0 0 7px #ff0a6830}
  50%{opacity:1;box-shadow:0 0 18px #ff0a6875}
}

.v21-stage-panel{padding:0 12px 12px;min-width:0}
.v21-breadcrumb{
  height:48px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 5px;
  color:#777e89;
  font-size:12px;
}
.v21-breadcrumb a{color:#ff5a9f;text-decoration:none}
.v21-breadcrumb strong{color:#d9dce2}
.v21-stage{
  position:relative;
  height:calc(100vh - 310px);
  min-height:610px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:1px solid #ff0a6850;
  border-radius:13px;
  background:
    radial-gradient(circle at center,#43091f 0,#16151d 36%,#06070a 76%);
  transition:opacity .18s;
}
.v21-stage.changing{opacity:.48}
.v21-stage::before{
  content:"";
  position:absolute;
  width:72%;
  height:72%;
  border-radius:50%;
  background:radial-gradient(circle,#ff0a6825,transparent 67%);
  filter:blur(28px);
  animation:v21Aura 5s ease-in-out infinite;
}
@keyframes v21Aura{
  0%,100%{opacity:.45;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.08)}
}
.v21-stage-rune{
  position:absolute;
  color:#ff4f98;
  opacity:.07;
  font-size:min(46vw,650px);
  pointer-events:none;
}
.v21-picture{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:24px 90px 55px;
  border:0;
  background:transparent;
  cursor:zoom-in;
  overflow:hidden;
}
.v21-picture img{
  height:100%;
  width:auto;
  max-width:100%;
  object-fit:contain;
  border-radius:12px;
  filter:brightness(1.04) contrast(1.04) drop-shadow(0 26px 45px #000d);
  transition:transform .25s ease,filter .25s ease,opacity .18s ease;
}
.v21-picture:hover img{
  filter:brightness(1.08) contrast(1.06) drop-shadow(0 0 36px #ff0a6850) drop-shadow(0 28px 50px #000d);
}
.v21-nav{
  position:absolute;
  z-index:5;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:74px;
  border:1px solid #ff0a6890;
  border-radius:10px;
  background:#0b0d13d9;
  color:#ff5a9f;
  font-size:46px;
  cursor:pointer;
  backdrop-filter:blur(10px);
}
.v21-nav:hover{background:#ff0a68;color:#fff}
.v21-nav.left{left:18px}
.v21-nav.right{right:18px}
.v21-stage-footer{
  position:absolute;
  z-index:4;
  left:18px;
  right:18px;
  bottom:14px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#9299a5;
  font-size:12px;
}
.v21-stage-footer span{color:#ff5a9f;font-weight:900}

.v21-info-panel{padding:20px}
.v21-item-title{
  padding-bottom:18px;
  border-bottom:1px solid #ffffff13;
}
.v21-item-title>span{
  color:#ff5a9f;
  font-size:12px;
  letter-spacing:1.4px;
  font-weight:900;
  text-transform:uppercase;
}
.v21-item-title h2{
  margin:9px 0 0;
  display:flex;
  align-items:center;
  gap:12px;
  font-size:clamp(28px,2.2vw,40px);
}
.v21-item-title i{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:1px solid #ff0a6850;
  border-radius:10px;
  background:#200812;
  color:#ff5a9f;
  font-style:normal;
  box-shadow:0 0 18px #ff0a6824;
}
.v21-section-title{
  margin:18px 0 12px;
  color:#ff5a9f;
  letter-spacing:1.5px;
  font-size:12px;
  font-weight:900;
}
.v21-note{
  display:grid;
  grid-template-columns:26px 1fr;
  gap:10px;
  align-items:center;
  margin-bottom:8px;
  padding:11px;
  border:1px solid #ffffff14;
  border-radius:8px;
  background:linear-gradient(145deg,#11131a,#08090e);
}
.v21-note span{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  border:1px solid #ff0a6860;
  border-radius:6px;
  color:#ff5a9f;
  background:#210811;
}
[data-v21-notes] em{color:#777f8b}
.v21-build-data{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:18px;
}
.v21-build-data>div{
  min-height:79px;
  padding:12px;
  border:1px solid #ff0a6837;
  border-radius:8px;
  background:#090b10;
}
.v21-build-data small{
  display:block;
  color:#ff5a9f;
  font-size:10px;
  letter-spacing:1px;
}
.v21-build-data strong{
  display:block;
  margin-top:6px;
  line-height:1.3;
}
.v21-share{
  display:block;
  margin-top:14px;
  padding:13px;
  border:1px solid #ff0a6860;
  border-radius:9px;
  background:#19060f;
  color:#ff78ad;
  text-align:center;
  text-decoration:none;
  font-weight:900;
}
.v21-share:hover{background:#ff0a68;color:#fff;box-shadow:0 0 24px #ff0a6840}

.v21-related{
  width:min(calc(100% - 28px),1600px);
  margin:70px auto 30px;
}
.v21-related-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:25px;
  margin-bottom:18px;
}
.v21-related-head span{color:#ff5a9f;letter-spacing:1.8px;font-size:11px;font-weight:900}
.v21-related-head h2{margin:6px 0 0;font-size:36px}
.v21-related-head>a{color:#ff6fa8;text-decoration:none}
.v21-related-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:14px;
}
.v21-related-card{
  min-height:130px;
  display:grid;
  grid-template-columns:110px minmax(0,1fr);
  gap:15px;
  align-items:center;
  padding:12px;
  border:1px solid #ffffff14;
  border-radius:12px;
  background:linear-gradient(145deg,#101219,#07080c);
  color:#fff;
  text-decoration:none;
  transition:.2s;
}
.v21-related-card:hover{
  transform:translateY(-3px);
  border-color:#ff0a6880;
  box-shadow:0 0 24px #ff0a6828;
}
.v21-related-image{
  height:105px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:9px;
  background:#090a0f;
}
.v21-related-image img{width:100%;height:100%;object-fit:cover;object-position:top}
.v21-related-image span{font-size:42px;color:#ff5a9f}
.v21-related-card small{color:#ff5a9f}
.v21-related-card h3{margin:5px 0;font-size:21px}
.v21-related-card p{margin:0;color:#8f96a1;font-size:12px}

.v21-footer{
  width:min(calc(100% - 28px),1600px);
  margin:40px auto 0;
  padding:22px 0;
  display:flex;
  justify-content:space-between;
  border-top:1px solid #ffffff10;
  color:#7d8490;
  font-size:12px;
}
.v21-footer strong{color:#fff}

.v21-modal{
  position:fixed;
  inset:0;
  z-index:1000;
  display:grid;
  place-items:center;
  padding:20px;
  background:#020306f8;
}
.v21-modal[hidden]{display:none}
.v21-modal img{max-width:97vw;max-height:95vh;object-fit:contain}
.v21-modal button{
  position:fixed;
  top:16px;
  right:18px;
  width:50px;
  height:50px;
  border:1px solid #ff0a6875;
  border-radius:10px;
  background:#0b0d12;
  color:#fff;
  font-size:31px;
  cursor:pointer;
}
body.v21-modal-open{overflow:hidden}
.v21-empty{min-height:600px;display:grid;place-items:center;text-align:center}

@media(max-width:1250px){
  .v21-layout{grid-template-columns:220px minmax(0,1fr)}
  .v21-info-panel{grid-column:1/-1}
  .v21-info-panel{display:grid;grid-template-columns:1fr 1.2fr;gap:20px}
  .v21-build-data,.v21-share{grid-column:1/-1}
}
@media(max-width:850px){
  .v21-top{grid-template-columns:1fr;text-align:center}
  .v21-logo img{width:180px}
  .v21-logo,.v21-actions{justify-self:center}
  .v21-layout{grid-template-columns:1fr}
  .v21-inventory-panel{order:2}
  .v21-stage-panel{order:1}
  .v21-info-panel{order:3;display:block}
  .v21-inventory{grid-template-columns:repeat(4,1fr)}
  .v21-stage{height:62vh;min-height:450px}
  .v21-related-head{align-items:start;flex-direction:column}
}
@media(max-width:560px){
  .v21-top{padding:20px 12px}
  .v21-actions a{padding:8px 9px;font-size:11px}
  .v21-layout,.v21-related,.v21-footer{width:calc(100% - 16px)}
  .v21-inventory{grid-template-columns:repeat(3,1fr)}
  .v21-slot{min-height:105px}
  .v21-slot img{height:70px}
  .v21-stage{height:55vh;min-height:390px}
  .v21-picture{padding:16px 52px 48px}
  .v21-nav{width:44px;height:60px;font-size:38px}
  .v21-nav.left{left:8px}
  .v21-nav.right{right:8px}
  .v21-build-data{grid-template-columns:1fr}
  .v21-related-grid{grid-template-columns:1fr}
  .v21-footer{flex-direction:column;gap:7px;text-align:center}
}


/* ===== V22 CINEMATIC SHOWCASE ===== */

.v21-stage{
  min-height:640px;
  background:
    radial-gradient(circle at center,#520a26 0,#18131d 34%,#06070a 76%);
}

.v22-cinematic-bg{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}

.v22-cinematic-bg i{
  --size:calc(2px + (var(--p) % 4) * 1px);
  position:absolute;
  width:var(--size);
  height:var(--size);
  left:calc((var(--p) * 43) % 100 * 1%);
  top:calc((var(--p) * 61) % 95 * 1%);
  border-radius:50%;
  background:#ff79af;
  opacity:.15;
  box-shadow:0 0 10px #ff0a68;
  animation:v22Particle calc(7s + (var(--p) % 8) * 1s) ease-in-out infinite;
  animation-delay:calc(var(--p) * -.35s);
}

@keyframes v22Particle{
  0%,100%{transform:translate3d(0,0,0) scale(.75);opacity:.12}
  50%{transform:translate3d(16px,-52px,0) scale(1.4);opacity:.6}
}

.v22-orbit{
  position:absolute;
  left:50%;
  top:50%;
  border:1px solid #ff4f9829;
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:v22Orbit 18s linear infinite;
}

.v22-orbit.one{width:48%;height:48%}
.v22-orbit.two{width:68%;height:68%;animation-duration:26s;animation-direction:reverse}
.v22-orbit.three{width:84%;height:84%;animation-duration:34s}

.v22-orbit::before,
.v22-orbit::after{
  content:"";
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ff4f98;
  box-shadow:0 0 16px #ff0a68;
}
.v22-orbit::before{left:12%;top:18%}
.v22-orbit::after{right:8%;bottom:22%}

@keyframes v22Orbit{
  from{transform:translate(-50%,-50%) rotate(0)}
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

.v22-mist{
  position:absolute;
  inset:16% 12%;
  border-radius:50%;
  background:
    radial-gradient(circle,#ff0a6818 0,#b3134f12 36%,transparent 70%);
  filter:blur(30px);
  animation:v22Mist 6s ease-in-out infinite;
}

@keyframes v22Mist{
  0%,100%{transform:scale(.92);opacity:.45}
  50%{transform:scale(1.08);opacity:.95}
}

.v22-beam{
  position:absolute;
  top:-10%;
  width:16%;
  height:120%;
  opacity:.08;
  filter:blur(8px);
  background:linear-gradient(180deg,transparent,#ff4f98 44%,transparent 72%);
}
.v22-beam.left{left:19%;transform:rotate(12deg);animation:v22BeamLeft 7s ease-in-out infinite}
.v22-beam.right{right:19%;transform:rotate(-12deg);animation:v22BeamRight 8s ease-in-out infinite}

@keyframes v22BeamLeft{
  0%,100%{opacity:.04;transform:rotate(12deg) translateX(-12px)}
  50%{opacity:.13;transform:rotate(8deg) translateX(14px)}
}
@keyframes v22BeamRight{
  0%,100%{opacity:.04;transform:rotate(-12deg) translateX(12px)}
  50%{opacity:.12;transform:rotate(-8deg) translateX(-14px)}
}

.v21-picture{
  padding:18px 72px 52px;
}

.v21-picture img{
  max-width:88%;
  filter:
    brightness(1.06)
    contrast(1.05)
    drop-shadow(0 0 24px #ff0a6833)
    drop-shadow(0 28px 48px #000e);
  animation:v22Float 5s ease-in-out infinite;
}

@keyframes v22Float{
  0%,100%{margin-top:0}
  50%{margin-top:-10px}
}

.v21-stage.changing .v21-picture img{
  opacity:.18;
  filter:blur(4px) brightness(.85);
}

.v21-slot{
  overflow:hidden;
}

.v21-slot::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  background:linear-gradient(110deg,transparent 0 36%,#ffffff12 48%,transparent 60%);
  transform:translateX(-130%);
  transition:transform .5s ease;
  pointer-events:none;
}

.v21-slot:hover::before{
  transform:translateX(130%);
}

.v21-slot.active{
  background:
    linear-gradient(145deg,#20101a,#090a0f),
    radial-gradient(circle at 50% 20%,#ff0a681d,transparent 60%);
}

.v22-tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 12px;
}

.v22-tags span{
  padding:6px 9px;
  border:1px solid #ff0a6848;
  border-radius:999px;
  background:#1b0710;
  color:#ff7caf;
  font-size:10px;
  font-weight:900;
  letter-spacing:.4px;
  box-shadow:0 0 12px #ff0a6816;
}

.v21-note{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.v21-note:hover{
  transform:translateX(4px);
  border-color:#ff4f9870;
  box-shadow:0 0 20px #ff0a6824;
}

.v21-build-data{
  grid-template-columns:1fr 1fr;
}

.v21-build-data>div{
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.v21-build-data>div:hover{
  transform:translateY(-2px);
  border-color:#ff4f9870;
  box-shadow:0 10px 24px #0007,0 0 16px #ff0a681b;
}

.v21-item-title h2{
  background:linear-gradient(90deg,#fff,#d9dce3 62%,#ff78ad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

@media(max-width:1250px){
  .v21-picture img{max-width:94%}
}

@media(max-width:850px){
  .v22-orbit.one{width:62%;height:62%}
  .v22-orbit.two{width:82%;height:82%}
  .v22-orbit.three{display:none}
  .v21-picture{padding:14px 55px 48px}
}

@media(prefers-reduced-motion:reduce){
  .v22-cinematic-bg *,
  .v21-picture img{
    animation:none!important;
  }
}


/* ===== V23 LEGENDARY SHOWCASE ===== */

.v21-stage{
  min-height:670px;
  background:
    radial-gradient(circle at center,#580b2a 0,#18131d 33%,#06070a 75%);
}

.v22-cinematic-bg::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:
    radial-gradient(circle,#fff 0 1px,transparent 1.4px),
    radial-gradient(circle,#ff5a9f 0 1px,transparent 1.5px);
  background-size:105px 105px,145px 145px;
  background-position:0 0,42px 25px;
  animation:v23Stars 26s linear infinite;
}

@keyframes v23Stars{
  to{background-position:105px 210px,187px 170px}
}

.v21-picture{
  padding:10px 64px 92px;
  overflow:visible;
}

.v21-picture img{
  max-width:94%;
  height:103%;
  transform-origin:center;
  filter:
    brightness(1.07)
    contrast(1.06)
    drop-shadow(0 0 30px #ff0a6844)
    drop-shadow(0 32px 56px #000f);
}

.v21-picture:hover img{
  filter:
    brightness(1.11)
    contrast(1.08)
    drop-shadow(0 0 52px #ff0a6875)
    drop-shadow(0 34px 62px #000f);
}

.v23-pedestal{
  position:absolute;
  z-index:4;
  left:50%;
  bottom:18px;
  width:min(72%,720px);
  transform:translateX(-50%);
  display:grid;
  justify-items:center;
  pointer-events:none;
}

.v23-pedestal span{
  width:72%;
  height:22px;
  border-radius:50%;
  background:radial-gradient(ellipse,#ff0a6860 0,#ff0a6826 40%,transparent 72%);
  filter:blur(5px);
  animation:v23PedestalGlow 2.7s ease-in-out infinite;
}

.v23-pedestal b{
  margin-top:-2px;
  padding:7px 18px;
  color:#f4f5f7;
  font-size:13px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  text-shadow:0 0 14px #ff0a6850;
  background:#08090dc4;
  border:1px solid #ff0a6840;
  border-radius:999px;
  backdrop-filter:blur(10px);
}

.v23-pedestal i{
  width:56%;
  height:1px;
  margin-top:8px;
  background:linear-gradient(90deg,transparent,#ff4f98,transparent);
  box-shadow:0 0 12px #ff0a68;
}

@keyframes v23PedestalGlow{
  0%,100%{opacity:.5;transform:scaleX(.92)}
  50%{opacity:1;transform:scaleX(1.08)}
}

.v23-flash{
  position:absolute;
  z-index:3;
  inset:8%;
  border-radius:50%;
  background:radial-gradient(circle,#fff8 0,#ff5a9f55 12%,transparent 62%);
  opacity:0;
  transform:scale(.4);
  pointer-events:none;
}

.v21-picture.v23-switch .v23-flash{
  animation:v23Flash .52s ease-out;
}

@keyframes v23Flash{
  0%{opacity:0;transform:scale(.25)}
  32%{opacity:.9;transform:scale(.85)}
  100%{opacity:0;transform:scale(1.35)}
}

.v21-picture.v23-switch img{
  animation:v23ItemIn .48s cubic-bezier(.2,.8,.2,1);
}

@keyframes v23ItemIn{
  0%{opacity:.15;filter:blur(6px) brightness(1.4)}
  45%{opacity:.8;filter:blur(1px) brightness(1.15)}
  100%{opacity:1}
}

/* +9 = Legendary */
.v21-picture.is-legendary::after{
  content:"LEGENDÄR +9";
  position:absolute;
  z-index:6;
  top:18px;
  right:18px;
  padding:8px 12px;
  border:1px solid #ffd463a0;
  border-radius:8px;
  background:linear-gradient(145deg,#2e1d04e6,#0f0b03e6);
  color:#ffd86c;
  font-size:11px;
  font-weight:900;
  letter-spacing:1px;
  box-shadow:0 0 24px #ffba2d3f;
}

.v21-picture.is-legendary img{
  filter:
    brightness(1.08)
    contrast(1.07)
    drop-shadow(0 0 34px #ffce5a63)
    drop-shadow(0 32px 58px #000f);
}

.v21-picture.is-legendary .v23-pedestal span{
  background:radial-gradient(ellipse,#ffd35f75 0,#ffb52d32 42%,transparent 72%);
}

.v21-picture.is-legendary .v23-pedestal b{
  border-color:#ffd56375;
  color:#ffe7a2;
  text-shadow:0 0 14px #ffc94c80;
}

.v21-picture.is-legendary .v23-pedestal i{
  background:linear-gradient(90deg,transparent,#ffd563,transparent);
  box-shadow:0 0 12px #ffbd38;
}

.v21-slot[data-rarity="legendary"]{
  border-color:#d9a83c;
  box-shadow:inset 0 0 0 1px #ffd35f20;
}

.v21-slot[data-rarity="legendary"] .v21-slot-symbol{
  border-color:#ffd35f80;
  color:#ffd86c;
  background:#241704e8;
  text-shadow:0 0 8px #ffc43d;
}

.v21-slot[data-rarity="legendary"].active{
  box-shadow:
    inset 0 0 20px #ffca4526,
    0 0 28px #ffc33f66;
}

.v21-stage-footer small{
  padding:6px 9px;
  border-radius:999px;
  background:#07080cb8;
  border:1px solid #ffffff10;
  backdrop-filter:blur(8px);
}

@media(max-width:850px){
  .v21-picture{padding:8px 54px 88px}
  .v23-pedestal{width:86%}
}

@media(max-width:560px){
  .v21-stage{min-height:430px}
  .v21-picture{padding:6px 46px 82px}
  .v21-picture.is-legendary::after{
    top:9px;right:9px;font-size:9px;padding:6px 8px;
  }
  .v23-pedestal b{font-size:10px}
}


/* ===== V24 BUILD PROFILE DETAILS ===== */
.v21-build-data{
  grid-template-columns:repeat(2,minmax(0,1fr));
}
.v24-profile-tags{
  display:flex;flex-wrap:wrap;gap:7px;margin-top:14px
}
.v24-profile-tags span{
  padding:7px 10px;border:1px solid #ff0a6847;border-radius:999px;
  background:linear-gradient(145deg,#200812,#10050a);
  color:#ff83b5;font-size:10px;font-weight:900;letter-spacing:.4px;
  box-shadow:0 0 12px #ff0a6817
}
@media(max-width:560px){
  .v21-build-data{grid-template-columns:1fr}
}


/* ===== V27 BUILD CENTER ===== */
.v27-build-center{
  width:min(calc(100% - 28px),1600px);
  margin:70px auto 20px;
  padding:24px;
  border:1px solid #ff0a6840;
  border-radius:18px;
  background:
    radial-gradient(circle at 80% 0,#ff0a6817,transparent 34%),
    linear-gradient(180deg,#10121a,#07080c);
  box-shadow:0 26px 70px #000a,inset 0 0 0 1px #ffffff05;
}
.v27-center-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:25px;
  margin-bottom:20px;
}
.v27-center-head>div>span,
.v27-gallery-head span{
  color:#ff5a9f;
  font-size:11px;
  letter-spacing:1.8px;
  font-weight:900;
}
.v27-center-head h2{
  margin:6px 0 0;
  font-size:clamp(32px,4vw,50px);
}
.v27-center-badges{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:8px;
}
.v27-center-badges span{
  padding:8px 11px;
  border:1px solid #ff0a6848;
  border-radius:999px;
  background:#1b0710;
  color:#ff82b5;
  font-size:11px;
  font-weight:900;
}
.v27-center-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.v27-guide-card{
  min-height:190px;
  padding:18px;
  border:1px solid #ffffff14;
  border-radius:13px;
  background:linear-gradient(145deg,#11131a,#08090e);
}
.v27-card-title{
  margin-bottom:13px;
  color:#ff5a9f;
  font-size:11px;
  letter-spacing:1.4px;
  font-weight:900;
}
.v27-guide-card p{
  margin:0;
  color:#c1c5cd;
  line-height:1.7;
}
.v27-list{
  display:grid;
  gap:9px;
}
.v27-list>div{
  display:grid;
  grid-template-columns:28px minmax(0,1fr);
  gap:9px;
  align-items:center;
  padding:10px;
  border:1px solid #ffffff12;
  border-radius:8px;
  background:#090b10;
}
.v27-list span{
  width:25px;height:25px;
  display:grid;place-items:center;
  border:1px solid #ff0a6850;
  border-radius:6px;
  color:#ff5a9f;
  background:#1d0710;
}
.v27-list em{color:#777f8b}
.v27-profile-card dl{
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}
.v27-profile-card dl>div{
  padding:10px;
  border:1px solid #ffffff12;
  border-radius:8px;
  background:#090b10;
}
.v27-profile-card dt{
  color:#ff5a9f;
  font-size:10px;
  text-transform:uppercase;
}
.v27-profile-card dd{
  margin:5px 0 0;
  color:#fff;
  font-weight:800;
}
.v27-gallery-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin:30px 0 14px;
}
.v27-gallery-head h3{
  margin:5px 0 0;
  font-size:28px;
}
.v27-gallery-head small{
  color:#8e95a0;
}
.v27-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:11px;
}
.v27-gallery button{
  min-height:210px;
  overflow:hidden;
  padding:7px;
  border:1px solid #ffffff15;
  border-radius:11px;
  background:linear-gradient(145deg,#12141c,#08090e);
  color:#fff;
  text-align:left;
  cursor:pointer;
  transition:.2s;
}
.v27-gallery button:hover{
  transform:translateY(-4px);
  border-color:#ff0a6880;
  box-shadow:0 0 25px #ff0a6828;
}
.v27-gallery img{
  width:100%;
  height:150px;
  object-fit:cover;
  object-position:top;
  border-radius:7px;
}
.v27-gallery span{
  display:block;
  margin:8px 4px 0;
  color:#ff5a9f;
  font-size:10px;
  text-transform:uppercase;
}
.v27-gallery strong{
  display:block;
  margin:4px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
@media(max-width:850px){
  .v27-center-head{align-items:flex-start;flex-direction:column}
  .v27-center-badges{justify-content:flex-start}
  .v27-center-grid{grid-template-columns:1fr}
}
@media(max-width:560px){
  .v27-build-center{width:calc(100% - 16px);padding:16px}
  .v27-profile-card dl{grid-template-columns:1fr}
  .v27-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}