/* ODE A11-R10 WIKI HEROES FRAME V1
   Scoped only to wiki/heroes.html.
   Visual presentation only.
*/

body.ode-heroes-v1-page{
  --ode-h-gold:#c9a45a;
  --ode-h-gold-hi:#efd183;
  --ode-h-red:#9d2734;
  --ode-h-bg:#0a0710;
  --ode-h-bg-2:#15101c;
  --ode-h-line:rgba(201,164,90,.58);
}

/* Hero-page feature/intro surface */
body.ode-heroes-v1-page .ode-heroes-feature-v1{
  position:relative!important;
  isolation:isolate!important;
  border:1px solid rgba(201,164,90,.44)!important;
  border-radius:0!important;
  clip-path:polygon(
    18px 0,
    calc(100% - 18px) 0,
    100% 18px,
    100% calc(100% - 18px),
    calc(100% - 18px) 100%,
    18px 100%,
    0 calc(100% - 18px),
    0 18px
  )!important;
  background:
    radial-gradient(circle at 15% 0%,rgba(201,164,90,.07),transparent 38%),
    linear-gradient(180deg,rgba(23,16,29,.96),rgba(8,6,11,.99))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.014),
    inset 0 0 36px rgba(0,0,0,.28),
    0 18px 40px rgba(0,0,0,.24)!important;
}

body.ode-heroes-v1-page .ode-heroes-feature-v1::before{
  content:""!important;
  position:absolute!important;
  inset:7px!important;
  z-index:0!important;
  pointer-events:none!important;
  border:1px solid rgba(201,164,90,.12)!important;
  clip-path:polygon(
    13px 0,
    calc(100% - 13px) 0,
    100% 13px,
    100% calc(100% - 13px),
    calc(100% - 13px) 100%,
    13px 100%,
    0 calc(100% - 13px),
    0 13px
  )!important;
}

body.ode-heroes-v1-page .ode-heroes-feature-v1 > *{
  position:relative;
  z-index:1;
}

/* Canonical hero card */
body.ode-heroes-v1-page .ode-hero-card-v1{
  position:relative!important;
  isolation:isolate!important;

  border:1px solid rgba(201,164,90,.60)!important;
  border-radius:0!important;

  clip-path:polygon(
    14px 0,
    calc(100% - 14px) 0,
    100% 14px,
    100% calc(100% - 14px),
    calc(100% - 14px) 100%,
    14px 100%,
    0 calc(100% - 14px),
    0 14px
  )!important;

  background:
    radial-gradient(circle at 20% 0%,rgba(201,164,90,.075),transparent 34%),
    linear-gradient(180deg,rgba(22,15,28,.985),rgba(8,6,11,.998))!important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.015),
    inset 0 0 30px rgba(0,0,0,.28),
    0 13px 30px rgba(0,0,0,.22)!important;

  transition:
    transform .16s ease,
    border-color .16s ease,
    box-shadow .16s ease!important;
}

body.ode-heroes-v1-page .ode-hero-card-v1:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(239,209,131,.86)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 0 34px rgba(0,0,0,.26),
    0 17px 34px rgba(0,0,0,.28)!important;
}

body.ode-heroes-v1-page .ode-hero-card-v1::before{
  content:""!important;
  position:absolute!important;
  inset:6px!important;
  z-index:1!important;
  pointer-events:none!important;
  border:1px solid rgba(201,164,90,.14)!important;
  clip-path:polygon(
    10px 0,
    calc(100% - 10px) 0,
    100% 10px,
    100% calc(100% - 10px),
    calc(100% - 10px) 100%,
    10px 100%,
    0 calc(100% - 10px),
    0 10px
  )!important;
}

body.ode-heroes-v1-page .ode-hero-card-v1::after{
  content:""!important;
  position:absolute!important;
  z-index:4!important;
  width:9px!important;
  height:9px!important;
  right:8px!important;
  top:8px!important;
  pointer-events:none!important;
  transform:rotate(45deg)!important;
  border:1px solid rgba(239,209,131,.72)!important;
  background:
    radial-gradient(circle,#e67f82 0 16%,#9d2734 22% 47%,#150b10 52% 100%)!important;
  box-shadow:0 0 10px rgba(157,39,52,.28)!important;
}

body.ode-heroes-v1-page .ode-hero-card-v1 > *{
  position:relative;
  z-index:2;
}

/* Portrait shell */
body.ode-heroes-v1-page .ode-hero-portrait-v1{
  position:relative!important;
  isolation:isolate!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  border:0!important;
  outline:0!important;
  border-radius:0!important;

  clip-path:polygon(
    16% 0,
    84% 0,
    100% 16%,
    100% 84%,
    84% 100%,
    16% 100%,
    0 84%,
    0 16%
  )!important;

  background:
    radial-gradient(circle at 50% 42%,rgba(201,164,90,.11),transparent 66%),
    #08070b!important;

  box-shadow:
    inset 0 0 0 1px rgba(201,164,90,.74),
    inset 0 0 0 5px rgba(201,164,90,.055),
    inset 0 0 22px rgba(0,0,0,.48)!important;

  overflow:hidden!important;
}

body.ode-heroes-v1-page .ode-hero-portrait-v1::before{
  content:""!important;
  position:absolute!important;
  inset:6px!important;
  z-index:1!important;
  pointer-events:none!important;
  border:1px solid rgba(239,209,131,.18)!important;
  clip-path:polygon(
    14% 0,
    86% 0,
    100% 14%,
    100% 86%,
    86% 100%,
    14% 100%,
    0 86%,
    0 14%
  )!important;
}

body.ode-heroes-v1-page .ode-hero-portrait-v1 img,
body.ode-heroes-v1-page img.ode-hero-portrait-img-v1{
  position:relative!important;
  z-index:2!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;

  object-fit:contain!important;
  object-position:center!important;

  margin:0!important;
  padding:7px!important;
  box-sizing:border-box!important;

  border:0!important;
  outline:0!important;
  border-radius:0!important;

  background:transparent!important;

  filter:
    saturate(1.02)
    contrast(1.03)
    drop-shadow(0 5px 7px rgba(0,0,0,.48))!important;
}

/* Text hierarchy */
body.ode-heroes-v1-page .ode-hero-card-v1 h2,
body.ode-heroes-v1-page .ode-hero-card-v1 h3,
body.ode-heroes-v1-page .ode-hero-card-v1 h4{
  color:#f5ead5!important;
  text-shadow:0 0 12px rgba(201,164,90,.05)!important;
}

body.ode-heroes-v1-page .ode-hero-meta-v1{
  color:#cbb79a!important;
}

body.ode-heroes-v1-page .ode-hero-role-v1,
body.ode-heroes-v1-page .ode-hero-affinity-v1{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  padding:5px 9px!important;
  border:1px solid rgba(201,164,90,.28)!important;
  border-radius:999px!important;
  background:rgba(7,6,9,.68)!important;
  color:#dfcda9!important;
}

/* Locked/disabled cards keep new frame, but read as unavailable. */
body.ode-heroes-v1-page .ode-hero-card-v1[aria-disabled="true"],
body.ode-heroes-v1-page .ode-hero-card-v1.is-locked,
body.ode-heroes-v1-page .ode-hero-card-v1.locked{
  opacity:.62!important;
  filter:saturate(.72)!important;
}

body.ode-heroes-v1-page .ode-hero-card-v1[aria-disabled="true"]::after,
body.ode-heroes-v1-page .ode-hero-card-v1.is-locked::after,
body.ode-heroes-v1-page .ode-hero-card-v1.locked::after{
  background:#211a24!important;
  box-shadow:none!important;
}

/* Generic support blocks inside Heroes page */
body.ode-heroes-v1-page .ode-heroes-support-v1{
  border:1px solid rgba(201,164,90,.34)!important;
  border-radius:0!important;
  background:
    linear-gradient(180deg,rgba(19,14,24,.90),rgba(8,6,11,.96))!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.012)!important;
}

/* Responsive */
@media(max-width:900px){
  body.ode-heroes-v1-page .ode-hero-card-v1{
    clip-path:polygon(
      11px 0,
      calc(100% - 11px) 0,
      100% 11px,
      100% calc(100% - 11px),
      calc(100% - 11px) 100%,
      11px 100%,
      0 calc(100% - 11px),
      0 11px
    )!important;
  }
}

@media(max-width:620px){
  body.ode-heroes-v1-page .ode-hero-portrait-v1 img,
  body.ode-heroes-v1-page img.ode-hero-portrait-img-v1{
    padding:5px!important;
  }
}