/* Angels & Dragons — Battle look */
.adbh-wrap{
  margin:60px auto;
  max-width:1200px;
  border-radius:24px;
  border:1px solid rgba(214,177,94,.38);
  background: rgba(10,8,14,.66);
  backdrop-filter: blur(2px);
  box-shadow: 0 26px 80px rgba(0,0,0,.60);
  overflow:hidden;
  position:relative;
}
.adbh-wrap::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:26px;
  pointer-events:none;
  background:
    radial-gradient(700px 220px at 50% 0%, rgba(214,177,94,.24), transparent 70%),
    radial-gradient(520px 280px at 10% 40%, rgba(255,0,80,.10), transparent 70%),
    radial-gradient(520px 280px at 90% 40%, rgba(0,242,234,.10), transparent 70%);
  mix-blend-mode: screen;
  opacity:.9;
}
.adbh-titlebar{
  padding:18px 22px 16px;
  border-bottom:1px solid rgba(214,177,94,.20);
  background: linear-gradient(180deg, rgba(214,177,94,.14), rgba(0,0,0,.0));
}
.adbh-title{
  text-align:center;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:#f2d08a;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight:900;
  font-size:18px;
  text-shadow: 0 0 18px rgba(214,177,94,.45);
}
.adbh-status{
  text-align:center;
  color:rgba(245,241,232,.78);
  font-size:12px;
  margin-top:8px;
}
.adbh-meta-line{
  text-align:center;
  margin-top:10px;
  color: rgba(245,241,232,.78);
  letter-spacing:.12em;
  text-transform:uppercase;
  font-size:12px;
}
.adbh-names{
  padding: 26px 22px 14px;
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  align-items:center;
  justify-items:center;
  text-align:center;
}
.adbh-n1, .adbh-n2{
  font-weight:1000;
  font-size: clamp(22px, 3.2vw, 44px);
  letter-spacing:.02em;
  color: rgba(245,241,232,.98);
  text-shadow:
    0 0 18px rgba(214,177,94,.55),
    0 0 42px rgba(214,177,94,.22);
  overflow-wrap:anywhere;
  word-break: break-word;
}
.adbh-n1{ justify-self:end; padding-right:14px; text-align:right; }
.adbh-n2{ justify-self:start; padding-left:14px; text-align:left; }
.adbh-vsword{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-weight:1000;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-size: clamp(14px, 1.4vw, 18px);
  color:#f2d08a;
  padding: 10px 14px;
  border-radius:999px;
  border:1px solid rgba(214,177,94,.35);
  background: rgba(214,177,94,.10);
  box-shadow: 0 0 22px rgba(214,177,94,.22);
}
.adbh-vs-text{ display:inline-block; font-weight:1000; letter-spacing:.22em; }
.adbh-glove{
  width:30px; height:30px;
  filter: drop-shadow(0 0 12px rgba(214,177,94,.45));
  opacity:.95;
}
.adbh-glove path{ fill: rgba(245,241,232,.92); }
.adbh-glove-left{ transform: rotate(-10deg); }
.adbh-glove-right{ transform: rotate(10deg); }
@keyframes adbhPunchL{ 0%,100%{ transform: translateX(0) rotate(-10deg);} 50%{ transform: translateX(2px) rotate(-14deg);} }
@keyframes adbhPunchR{ 0%,100%{ transform: translateX(0) rotate(10deg);} 50%{ transform: translateX(-2px) rotate(14deg);} }
.adbh-vsword:hover .adbh-glove-left{ animation: adbhPunchL .55s ease-in-out infinite; }
.adbh-vsword:hover .adbh-glove-right{ animation: adbhPunchR .55s ease-in-out infinite; }

.adbh-tags{
  display:flex; justify-content:center; gap:10px;
  padding: 0 22px 18px; flex-wrap:wrap;
}
.adbh-subtag{
  display:inline-block; padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(214,177,94,.35);
  background: rgba(214,177,94,.12);
  color: rgba(245,241,232,.92);
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  min-width: 90px;
  text-align:center;
}
.adbh-upnext{
  margin: 0 22px 22px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.14);
  overflow:hidden;
}
.adbh-upnext-title{
  padding: 12px 14px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  font-size:12px;
  color:#f2d08a;
  background: rgba(0,0,0,.35);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.adbh-upnext-list{
  list-style:none; margin:0;
  padding: 10px 14px 14px;
  max-height: 340px; overflow:auto;
}
.adbh-upnext-list li{
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  margin-top:10px;
  color: rgba(245,241,232,.90);
  font-weight:800;
  letter-spacing:.02em;
}
.adbh-upnext-list li span{ color: rgba(245,241,232,.78); font-weight:700; }

@media (max-width: 520px){
  .adbh-wrap{ margin: 26px 12px; }
  .adbh-titlebar{ padding: 14px 14px 12px; }
  .adbh-names{
    padding: 18px 14px 10px;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .adbh-vsword{ padding: 8px 10px; gap: 8px; order: 2; }
  .adbh-glove{ width: 22px; height: 22px; }
  .adbh-n1, .adbh-n2{
    font-size: 22px; line-height:1.15;
    max-width: 92vw;
    text-align: center !important;
    justify-self: center !important;
    padding: 0 !important;
  }
  .adbh-n1{ order:1; }
  .adbh-n2{ order:3; }
  .adbh-tags{ padding: 0 14px 14px; gap: 8px; }
  .adbh-subtag{ font-size: 10px; padding: 6px 10px; min-width:auto; }
  .adbh-upnext{ margin: 0 14px 14px; }
  .adbh-upnext-title{ padding: 10px 12px; }
  .adbh-upnext-list{ padding: 8px 12px 12px; }
  .adbh-upnext-list li{ overflow-wrap:anywhere; word-break: break-word; }
  .adbh-upnext-list li span{ display:block; margin-top:6px; overflow-wrap:anywhere; }
}