/* UI Pack 004 visual polish: dynamic enemy backdrop from the same original image. */
html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card .enemy-portrait-frame{
  isolation:isolate;
  height:250px!important;
  min-height:250px!important;
  background:#080d14!important;
}
html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card .enemy-portrait-frame:before{
  content:"";
  position:absolute;
  inset:-18px!important;
  z-index:0!important;
  background-image:
    linear-gradient(180deg,rgba(5,10,16,.30),rgba(5,10,16,.56)),
    var(--ui004-enemy-art,linear-gradient(180deg,#121927,#070c13))!important;
  background-size:cover!important;
  background-position:center!important;
  filter:blur(13px) saturate(.82) brightness(.62)!important;
  transform:scale(1.08)!important;
  opacity:.88;
}
html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card .enemy-portrait-frame:after{
  z-index:2!important;
  height:48%!important;
  background:linear-gradient(180deg,transparent,rgba(5,8,13,.91))!important;
}
html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card .enemy-portrait-img{
  z-index:1!important;
  inset:4px 10px!important;
  width:calc(100% - 20px)!important;
  height:calc(100% - 8px)!important;
  object-fit:contain!important;
  object-position:center!important;
  transform:scale(1.015)!important;
  filter:saturate(1.04) contrast(1.04) brightness(.96) drop-shadow(0 12px 22px rgba(0,0,0,.42))!important;
}
@media(max-width:899px){
  html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card .enemy-portrait-frame{height:236px!important;min-height:236px!important}
}
@media(max-width:620px){
  html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card .enemy-portrait-frame{height:222px!important;min-height:222px!important}
}

/* Very short landscape phones: move the five-button dock above the game instead of covering combat cards. */
@media (orientation:landscape) and (max-height:520px) and (max-width:1100px){
  html.ui002-touch-layout{--ui002-dock-height:52px}
  html.ui002-touch-layout body[data-screen="arena"]>nav{
    top:0!important;
    bottom:auto!important;
    width:min(100%,760px)!important;
    min-height:52px!important;
    height:52px!important;
    padding:3px 7px!important;
    border-top:0!important;
    border-bottom:1px solid #2b4964!important;
    border-radius:0 0 15px 15px!important;
    box-shadow:0 10px 28px rgba(0,0,0,.48)!important;
  }
  html.ui002-touch-layout body[data-screen="arena"]>nav button{
    min-height:44px!important;
    padding:3px 5px!important;
    flex-direction:row!important;
    gap:5px!important;
    font-size:9px!important;
  }
  html.ui002-touch-layout body[data-screen="arena"]>nav button b{
    font-size:17px!important;
  }
  html.ui002-touch-layout body[data-screen="arena"] .app{
    padding-top:calc(62px + env(safe-area-inset-top))!important;
    padding-bottom:18px!important;
  }
  html.ui002-touch-layout body[data-screen="arena"] #screen-arena.active{
    padding-bottom:18px!important;
    scroll-padding-top:60px!important;
    scroll-padding-bottom:18px!important;
  }
  html.ui002-touch-layout body[data-screen="arena"] .combat-log-panel.open{
    margin-bottom:18px!important;
    scroll-margin-bottom:18px!important;
  }
}