/* Arcade network hero — clean aligned three-hero composition */
.nh-arcade-figure{
  position:relative!important;
  aspect-ratio:auto!important;
  min-height:384px!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
}
.nh-arcade-figure::before,.nh-arcade-figure::after{display:none!important}

.nh-arcade-trio{
  position:relative;
  height:340px;
  margin:0 auto;
  overflow:visible;
  isolation:isolate;
  transform:translateY(30px);
}

.nh-arcade-vault-label{
  position:absolute;
  left:50%;
  top:-15px;
  z-index:8;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 11px;
  border:1px solid rgba(255,136,111,.42);
  border-radius:999px;
  background:#14181d;
  box-shadow:0 8px 22px rgba(0,0,0,.28);
  color:#ff9a84;
  font:700 9px/1 'DM Sans',Arial,sans-serif;
  letter-spacing:.14em;
  white-space:nowrap;
}

.nh-arcade-card{
  position:absolute;
  top:24px;
  width:31.5%;
  height:300px;
  overflow:hidden;
  border:1px solid #3d7399;
  border-radius:16px;
  background:#0b1420;
  box-shadow:0 18px 34px rgba(0,0,0,.32);
  transform:none!important;
}
.nh-arcade-card img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center 28%;
}
.nh-arcade-card::after{
  content:"";
  position:absolute;
  inset:52% 0 0;
  z-index:1;
  background:linear-gradient(180deg,transparent,rgba(4,8,13,.58));
  pointer-events:none;
}

/* All cards share the exact same bottom edge. Center grows upward only. */
.nh-arcade-card-left{left:7%;z-index:1}
.nh-arcade-card-center{
  left:33.5%;
  top:0;
  width:33%;
  height:324px;
  z-index:3;
  border-color:#f0c46b;
  background:#0b1420 url('/assets/mlbb-heroes/zetian.webp') center 28%/cover no-repeat;
  box-shadow:0 0 0 1px rgba(240,196,107,.15),0 22px 42px rgba(0,0,0,.40),0 0 26px rgba(240,196,107,.08);
}
.nh-arcade-card-center>img{opacity:0!important}
.nh-arcade-card-right{right:7%;z-index:1}

/* Identical centered name tags on one visual baseline. */
.nh-arcade-name{
  position:absolute;
  left:50%!important;
  right:auto!important;
  bottom:12px;
  z-index:5;
  transform:translateX(-50%)!important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  min-width:58px;
  max-width:calc(100% - 24px);
  padding:0 10px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(7,11,16,.84);
  backdrop-filter:blur(7px);
  color:#f6f3ea;
  font:700 10px/28px 'DM Sans',Arial,sans-serif;
  letter-spacing:.04em;
  white-space:nowrap;
  box-shadow:0 5px 16px rgba(0,0,0,.24);
  box-sizing:border-box;
}
.nh-arcade-card-center .nh-arcade-name{
  border-color:rgba(240,196,107,.45);
  color:transparent;
  position:absolute;
}
.nh-arcade-card-center .nh-arcade-name::after{
  content:'Zetian';
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f6d689;
  font:700 10px/1 'DM Sans',Arial,sans-serif;
  letter-spacing:.04em;
}

@media(max-width:900px){
  .nh-arcade-figure{min-height:328px!important}
  .nh-arcade-trio{height:300px;transform:translateY(18px)}
  .nh-arcade-card{top:20px;height:260px;border-radius:14px}
  .nh-arcade-card-center{top:0;height:280px}
  .nh-arcade-vault-label{top:-14px}
}

@media(max-width:720px){
  .nh-arcade-figure{min-height:258px!important}
  .nh-arcade-trio{height:240px;transform:translateY(8px)}
  .nh-arcade-card{top:16px;width:32%;height:210px;border-radius:12px}
  .nh-arcade-card-left{left:3.5%}
  .nh-arcade-card-center{left:34%;top:0;width:32%;height:226px}
  .nh-arcade-card-right{right:3.5%}
  .nh-arcade-vault-label{top:-11px;min-height:25px;padding-inline:9px;font-size:8px}
  .nh-arcade-name{bottom:8px;height:24px;min-width:52px;padding-inline:7px;font:700 9px/24px 'DM Sans',Arial,sans-serif}
  .nh-arcade-card-center .nh-arcade-name::after{font-size:9px}
}

@media(max-width:430px){
  .nh-arcade-vault-label{display:none}
  .nh-arcade-name{height:22px;min-width:48px;padding-inline:6px;font:700 8px/22px 'DM Sans',Arial,sans-serif}
  .nh-arcade-card-center .nh-arcade-name::after{font-size:8px}
}