/* ODE A11-R9-R2 FRAME SYSTEM V2.1
   Wiki: Combate / Enemigos / Bestiario.
   Strong binding + screenshot natural fit.
   No gameplay/content changes.
*/

body.ode-frame-v2-page{
  --ode-frame-gold:#c9a45a;
  --ode-frame-gold-hi:#efd183;
  --ode-frame-gold-deep:#6f5224;
  --ode-frame-red:#9d2734;
  --ode-frame-red-soft:rgba(157,39,52,.26);
  --ode-frame-bg:#09070d;
  --ode-frame-bg-2:#15101c;
  --ode-frame-line:rgba(201,164,90,.58);
  --ode-frame-soft:rgba(201,164,90,.14);
}

/* ============================================================
   CANONICAL FRAME V2.1
   Visibly different from the old rounded flat cards.
   ============================================================ */

body.ode-frame-v2-page .ode-frame-v2,
body.ode-frame-v2-page .boss-card{
  position:relative!important;
  isolation:isolate!important;
  border:1px solid rgba(201,164,90,.62)!important;
  border-radius:0!important;
  clip-path:polygon(
    16px 0,
    calc(100% - 16px) 0,
    100% 16px,
    100% calc(100% - 16px),
    calc(100% - 16px) 100%,
    16px 100%,
    0 calc(100% - 16px),
    0 16px
  )!important;
  background:
    radial-gradient(circle at 14% 0%,rgba(201,164,90,.085),transparent 36%),
    radial-gradient(circle at 90% 100%,rgba(157,39,52,.055),transparent 38%),
    linear-gradient(180deg,rgba(24,17,30,.985),rgba(9,7,12,.998))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.016),
    inset 0 0 34px rgba(0,0,0,.30),
    0 16px 38px rgba(0,0,0,.24)!important;
}

body.ode-frame-v2-page .ode-frame-v2::before,
body.ode-frame-v2-page .boss-card::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:1!important;
  inset:6px!important;
  pointer-events:none!important;
  border:1px solid rgba(201,164,90,.16)!important;
  border-radius:0!important;
  clip-path:polygon(
    12px 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    12px 100%,
    0 calc(100% - 12px),
    0 12px
  )!important;
  background:transparent!important;
}

body.ode-frame-v2-page .ode-frame-v2::after,
body.ode-frame-v2-page .boss-card::after{
  content:""!important;
  display:block!important;
  position:absolute!important;
  z-index:3!important;
  width:10px!important;
  height:10px!important;
  top:8px!important;
  right:8px!important;
  pointer-events:none!important;
  transform:rotate(45deg)!important;
  border:1px solid rgba(239,209,131,.72)!important;
  background:
    radial-gradient(circle,rgba(157,39,52,.95) 0 24%,#130d16 27% 100%)!important;
  box-shadow:0 0 11px rgba(157,39,52,.20)!important;
}

body.ode-frame-v2-page .ode-frame-v2 > *,
body.ode-frame-v2-page .boss-card > *{
  position:relative;
  z-index:2;
}

/* Stronger top/bottom ornamental rails on boss cards. */
body.ode-frame-v2-page .boss-card{
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease!important;
}

body.ode-frame-v2-page .boss-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(239,209,131,.84)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    inset 0 0 42px rgba(0,0,0,.28),
    0 20px 44px rgba(0,0,0,.32)!important;
}

body.ode-frame-v2-page .boss-card-header{
  position:relative!important;
  padding:22px 22px 18px!important;
  background:
    linear-gradient(90deg,rgba(201,164,90,.025),transparent 45%,rgba(157,39,52,.025))!important;
}

body.ode-frame-v2-page .boss-card-header::after{
  content:""!important;
  position:absolute!important;
  left:22px!important;
  right:22px!important;
  bottom:0!important;
  height:1px!important;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(201,164,90,.24) 14%,
      rgba(239,209,131,.50) 50%,
      rgba(201,164,90,.24) 86%,
      transparent
    )!important;
}

body.ode-frame-v2-page .boss-glyph{
  position:relative!important;
  border:1px solid rgba(201,164,90,.58)!important;
  border-radius:0!important;
  clip-path:polygon(
    12px 0,
    calc(100% - 12px) 0,
    100% 12px,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    12px 100%,
    0 calc(100% - 12px),
    0 12px
  )!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(201,164,90,.11),transparent 68%),
    #08070b!important;
  box-shadow:
    inset 0 0 22px rgba(201,164,90,.055),
    0 7px 16px rgba(0,0,0,.22)!important;
}

body.ode-frame-v2-page .boss-card-meta{
  padding:16px 22px 18px!important;
}

body.ode-frame-v2-page .boss-card-meta > span{
  border:1px solid rgba(201,164,90,.30)!important;
  background:rgba(6,5,8,.72)!important;
  box-shadow:inset 0 0 10px rgba(0,0,0,.20)!important;
}

body.ode-frame-v2-page .boss-status-valid{
  border-color:rgba(82,201,139,.42)!important;
  background:rgba(35,104,68,.13)!important;
}

body.ode-frame-v2-page .boss-details{
  border-top:1px solid rgba(201,164,90,.28)!important;
  background:rgba(5,4,7,.26)!important;
}

body.ode-frame-v2-page .boss-details summary{
  padding:16px 22px!important;
  color:var(--ode-frame-gold-hi)!important;
  text-shadow:0 0 12px rgba(201,164,90,.08)!important;
}

body.ode-frame-v2-page .boss-details[open] summary{
  background:
    linear-gradient(90deg,rgba(201,164,90,.055),transparent 72%)!important;
}

body.ode-frame-v2-page .boss-details-body{
  margin:0 16px 16px!important;
  padding:17px!important;
  border:1px solid rgba(201,164,90,.17)!important;
  border-radius:0!important;
  background:rgba(4,4,6,.60)!important;
}

/* Supporting boxes migrate to the same language. */
body.ode-frame-v2-page .bestiary-summary article,
body.ode-frame-v2-page .notice-card,
body.ode-frame-v2-page .bestiary-tools,
body.ode-frame-v2-page .boss-note,
body.ode-frame-v2-page .tip-card,
body.ode-frame-v2-page .info-card,
body.ode-frame-v2-page .system-card,
body.ode-frame-v2-page .enemy-card,
body.ode-frame-v2-page .category-card{
  border-color:rgba(201,164,90,.38)!important;
  border-radius:0!important;
  background:
    linear-gradient(180deg,rgba(20,14,26,.92),rgba(8,6,11,.96))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.012),
    inset 0 0 22px rgba(0,0,0,.20)!important;
}

/* ============================================================
   CURRENT 2.5D SCREENSHOTS
   Do not inherit the old fixed-height media box.
   ============================================================ */

body.ode-frame-v2-page .ode-shot-shell{
  display:block!important;
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  overflow:visible!important;
  padding:7px!important;
  box-sizing:border-box!important;
  border:1px solid rgba(201,164,90,.62)!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:#050507!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.016),
    0 14px 32px rgba(0,0,0,.28)!important;
}

body.ode-frame-v2-page .ode-shot-shell::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  inset:4px!important;
  pointer-events:none!important;
  border:1px solid rgba(201,164,90,.13)!important;
  clip-path:inherit!important;
}

body.ode-frame-v2-page img.ode-shot-img,
body.ode-frame-v2-page img[src*="combat-25d-action-malachar-20260818.png"],
body.ode-frame-v2-page img[src*="combat-25d-enemy-overview-20260818.png"]{
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:contain!important;
  object-position:center!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  clip-path:none!important;
  background:#050507!important;
}

/* Neutralize likely old fixed hero/media dimensions even when class names differ. */
body.ode-frame-v2-page .ode-shot-shell.wiki-hero-media,
body.ode-frame-v2-page figure.ode-shot-shell,
body.ode-frame-v2-page .wiki-page-hero .ode-shot-shell{
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  overflow:visible!important;
}

/* Page hero can host the new screenshot without clipping. */
body.ode-frame-v2-page .wiki-page-hero.ode-frame-v2{
  overflow:visible!important;
}

/* ============================================================
   COMBATE / ENEMIGOS generic frames
   ============================================================ */

body.ode-frame-v2-page main article.ode-frame-v2,
body.ode-frame-v2-page .wiki-article article.ode-frame-v2{
  padding:20px!important;
}

body.ode-frame-v2-page .section-title-row{
  padding:12px 2px 14px!important;
  border-bottom:1px solid rgba(201,164,90,.22)!important;
}

/* Avoid nested ornamental diamonds. */
body.ode-frame-v2-page .ode-frame-v2 .ode-frame-v2::after,
body.ode-frame-v2-page .boss-card .ode-frame-v2::after{
  display:none!important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:900px){
  body.ode-frame-v2-page .boss-card-header{
    padding:19px!important;
  }

  body.ode-frame-v2-page .boss-card-meta{
    padding:14px 19px 16px!important;
  }

  body.ode-frame-v2-page .ode-shot-shell{
    padding:5px!important;
  }
}

@media(max-width:620px){
  body.ode-frame-v2-page .ode-frame-v2,
  body.ode-frame-v2-page .boss-card{
    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;
  }
}