/* Arena Core 0.5.3 — Recovery UI Pack 004: battle layout fix */
:root{
  --ui004-gold:#f6cf62;
  --ui004-dock-clearance:calc(var(--ui002-dock-height,76px) + var(--ui002-safe-bottom,10px) + 30px);
}

/* 1–2. Hero card: smaller full portrait, readable stats, scroll as a safety net. */
html.ui002-touch-layout body[data-screen="arena"] #player-combat-card.ui003-player-card{
  justify-content:flex-start!important;
  max-height:432px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
  scrollbar-color:#345879 transparent;
  scroll-padding:10px;
}
html.ui002-touch-layout body[data-screen="arena"] #player-combat-card.ui003-player-card::-webkit-scrollbar{width:5px}
html.ui002-touch-layout body[data-screen="arena"] #player-combat-card.ui003-player-card::-webkit-scrollbar-thumb{border-radius:999px;background:#345879}
html.ui002-touch-layout body[data-screen="arena"] .ui003-player-portrait-frame{
  height:214px!important;
  min-height:214px!important;
  flex:0 0 214px;
  background:
    radial-gradient(circle at 50% 34%,rgba(93,170,226,.14),transparent 43%),
    linear-gradient(180deg,#111b28,#070d14);
}
html.ui002-touch-layout body[data-screen="arena"] .ui003-player-portrait-img{
  inset:6px 8px 5px!important;
  width:calc(100% - 16px)!important;
  height:calc(100% - 11px)!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:12px;
  animation:none!important;
  transform:none!important;
}
html.ui002-touch-layout body[data-screen="arena"] .ui003-player-identity{
  left:8px;right:8px;bottom:8px;
  padding:8px 9px 7px;
}
html.ui002-touch-layout body[data-screen="arena"] .ui003-player-identity #player-name{font-size:17px}
html.ui002-touch-layout body[data-screen="arena"] .ui003-player-identity #player-hp{font-size:14px}
html.ui002-touch-layout body[data-screen="arena"] .ui003-player-identity #player-meta{font-size:9px}
html.ui002-touch-layout body[data-screen="arena"] #player-combat-card .compact-stats .stat{
  min-height:48px!important;
  padding-top:7px!important;
  padding-bottom:7px!important;
}
html.ui002-touch-layout body[data-screen="arena"] #player-combat-card #weapon-line{
  min-height:42px!important;
  flex:0 0 auto;
}

/* 3. Enemy portrait: keep the full original artwork inside the frame. */
html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card .enemy-portrait-frame{
  height:242px!important;
  min-height:242px!important;
  background:
    radial-gradient(circle at 50% 42%,rgba(117,82,159,.12),transparent 48%),
    linear-gradient(180deg,#111722,#070c13);
}
html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card .enemy-portrait-img{
  inset:6px!important;
  width:calc(100% - 12px)!important;
  height:calc(100% - 12px)!important;
  object-fit:contain!important;
  object-position:center center!important;
  border-radius:11px;
  animation:none!important;
  transform:scale(.965)!important;
  filter:saturate(1.02) contrast(1.03) brightness(.94)!important;
}
html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card{
  max-height:432px!important;
  overflow:hidden!important;
}

/* 5. Replace the thin mannequin with a clean armored target using the original GitHub art. */
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .tactical-shell{
  grid-template-columns:126px minmax(0,1fr)!important;
  min-height:218px!important;
  gap:10px!important;
}
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .tactical-figure{
  width:126px!important;
  max-width:126px!important;
  aspect-ratio:3/4!important;
  border-radius:18px!important;
  background-image:
    linear-gradient(180deg,rgba(4,10,17,.12),rgba(4,9,15,.42) 55%,rgba(3,8,14,.72)),
    url('/assets/enemies/champion.png?v=0041')!important;
  background-size:cover!important;
  background-position:center 20%!important;
  border-color:color-mix(in srgb,var(--zone-accent) 35%,#36516b)!important;
  box-shadow:inset 0 0 30px rgba(0,0,0,.30),0 12px 28px rgba(0,0,0,.30)!important;
}
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .tactical-figure:before{
  background:
    linear-gradient(180deg,rgba(7,14,23,.02),rgba(7,14,23,.20) 55%,rgba(6,12,20,.42)),
    linear-gradient(90deg,transparent 49%,rgba(255,255,255,.04) 50%,transparent 51%)!important;
}
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .tactical-svg{display:none!important}
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .body-zone{
  min-width:0!important;
  min-height:0!important;
  border-radius:10px!important;
  padding:4px 5px!important;
  font-size:8px!important;
  background:rgba(4,10,18,.72)!important;
  border-color:rgba(210,226,242,.22)!important;
  backdrop-filter:blur(5px)!important;
  text-shadow:0 2px 8px #000!important;
}
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .body-zone.zone-head{left:27%!important;top:4%!important;width:46%!important;height:15%!important}
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .body-zone.zone-torso{left:14%!important;top:23%!important;width:72%!important;height:23%!important}
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .body-zone.zone-belly{left:19%!important;top:50%!important;width:62%!important;height:17%!important}
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .body-zone.zone-legs{left:14%!important;top:71%!important;width:72%!important;height:24%!important}
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .body-zone.on,
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .body-zone.selected,
html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .body-zone[aria-pressed="true"]{
  background:linear-gradient(135deg,color-mix(in srgb,var(--zone-accent) 48%,#101723),color-mix(in srgb,var(--zone-accent) 24%,#07101a))!important;
  border-color:var(--zone-accent)!important;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--zone-accent) 26%,transparent),0 0 22px color-mix(in srgb,var(--zone-accent) 38%,transparent)!important;
}

/* 4. The arena screen is its own scroll container; reserve real room above the fixed dock. */
html.ui002-touch-layout body[data-screen="arena"] #screen-arena.active{
  padding-bottom:var(--ui004-dock-clearance)!important;
  scroll-padding-bottom:var(--ui004-dock-clearance)!important;
}
html.ui002-touch-layout body[data-screen="arena"] .battle-log-toggle{scroll-margin-bottom:var(--ui004-dock-clearance)}
html.ui002-touch-layout body[data-screen="arena"] .combat-log-panel.open{
  display:block!important;
  max-height:min(300px,34svh)!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  margin-bottom:var(--ui004-dock-clearance)!important;
  scroll-margin-bottom:var(--ui004-dock-clearance);
  border-color:#304b67;
  box-shadow:inset 0 0 0 1px rgba(91,169,229,.035);
}

/* 6. Gold must read as gold, not as a platform-dependent silver emoji. */
html.ui002-touch-layout body[data-screen="arena"] #player-combat-card .compact-stats .stat:nth-child(4):before,
.ui004-gold-coin{
  display:inline-grid!important;
  place-items:center!important;
  border:1px solid #ffe68a!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 34% 28%,#fffbd1 0 8%,#ffe27a 9% 28%,#d79b27 58%,#75450a 100%)!important;
  box-shadow:inset 0 0 0 2px rgba(113,66,5,.22),0 0 9px rgba(246,198,72,.34)!important;
  color:#6f4108!important;
}
html.ui002-touch-layout body[data-screen="arena"] #player-combat-card .compact-stats .stat:nth-child(4):before{content:""!important}
.ui004-gold-coin{width:16px;height:16px;flex:0 0 16px;vertical-align:-3px}
#hud-gold.ui004-gold-value{display:flex;align-items:center;gap:6px}

@media(min-width:900px) and (min-height:650px){
  html.ui002-touch-layout body[data-screen="arena"] .compact-player-card,
  html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card,
  html.ui002-touch-layout body[data-screen="arena"] .compact-tactics{max-height:432px!important}
  html.ui002-touch-layout body[data-screen="arena"] .compact-tactics{overflow-y:auto!important;overscroll-behavior:contain;scrollbar-width:thin}
}
@media(max-width:899px){
  html.ui002-touch-layout body[data-screen="arena"] #player-combat-card.ui003-player-card{max-height:none!important;overflow:visible!important}
  html.ui002-touch-layout body[data-screen="arena"] .ui003-player-portrait-frame{height:205px!important;min-height:205px!important;flex-basis:205px}
  html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card{max-height:none!important;overflow:visible!important}
  html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card .enemy-portrait-frame{height:228px!important;min-height:228px!important}
}
@media(max-width:620px){
  html.ui002-touch-layout body[data-screen="arena"] .ui003-player-portrait-frame{height:188px!important;min-height:188px!important;flex-basis:188px}
  html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card .enemy-portrait-frame{height:215px!important;min-height:215px!important}
  html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .tactical-shell{grid-template-columns:116px minmax(0,1fr)!important}
  html.ui002-touch-layout body[data-screen="arena"] .compact-tactics .tactical-figure{width:116px!important;max-width:116px!important}
  html.ui002-touch-layout body[data-screen="arena"] .combat-log-panel.open{max-height:42svh!important}
}
@media(prefers-reduced-motion:reduce){
  html.ui002-touch-layout body[data-screen="arena"] .compact-enemy-card .enemy-portrait-img{animation:none!important}
}