/* UI 015.5 — responsive, tap-first combat correction.
   No global touch interception. One-row dual wield UI. Compact HP cards.
   Fighters are constrained to a true safe box and the journal remains a fixed overlay. */

:root{
  --b155-journal-top:0px;
  --b155-journal-left:0px;
  --b155-journal-width:100vw;
  --b155-journal-height:100dvh;
}

body.arena-battle014-active{
  touch-action:manipulation!important;
  overscroll-behavior:none!important;
}

body.arena-battle014-active #battle014-root .battle014{
  display:flex!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  flex-direction:column!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  touch-action:manipulation!important;
}

body.arena-battle014-active #battle014-root button,
body.arena-battle014-active #battle014-root .b14-zone,
body.arena-battle014-active #battle014-root .b155-hand-tab{
  touch-action:manipulation!important;
  -webkit-tap-highlight-color:transparent!important;
}

body.arena-battle014-active #battle014-root .b14-topline{
  flex:0 0 auto!important;
}

/* The scene takes the remaining space. Equipment rows never control its size. */
body.arena-battle014-active #battle014-root .b14-scene{
  position:relative!important;
  flex:1 1 0!important;
  width:100%!important;
  height:auto!important;
  min-height:260px!important;
  max-height:none!important;
  margin-top:4px!important;
  overflow:hidden!important;
  touch-action:manipulation!important;
}

body.arena-battle014-active #battle014-root .b14-tactics{
  flex:0 0 auto!important;
  min-height:0!important;
  margin-top:4px!important;
  padding:6px 7px 7px!important;
  overflow:hidden!important;
}

/* Smaller name/HP cards: readable, but they no longer eat a quarter of the scene. */
body.arena-battle014-active #battle014-root .b14-health{
  top:8px!important;
  width:calc(50% - 10px)!important;
  min-height:0!important;
  padding:5px 6px 5px!important;
  border-radius:7px!important;
}
body.arena-battle014-active #battle014-root .b14-health-player{left:6px!important}
body.arena-battle014-active #battle014-root .b14-health-enemy{right:6px!important}
body.arena-battle014-active #battle014-root .b14-health .b14-role{
  margin-bottom:2px!important;
  font-size:8px!important;
  line-height:1!important;
  letter-spacing:.08em!important;
}
body.arena-battle014-active #battle014-root .b14-health>div{
  min-height:15px!important;
  gap:4px!important;
}
body.arena-battle014-active #battle014-root .b14-health b{
  font-size:11px!important;
  line-height:1.05!important;
}
body.arena-battle014-active #battle014-root .b14-health small{
  font-size:8px!important;
}
body.arena-battle014-active #battle014-root .b14-health>i{
  position:relative!important;
  height:11px!important;
  margin-top:4px!important;
  overflow:hidden!important;
  isolation:isolate!important;
}
body.arena-battle014-active #battle014-root .b14-health>span{
  margin-top:3px!important;
  font-size:9px!important;
  line-height:1!important;
}

/* True fighter safe box. Top is below the compact HP cards; bottom is the stage floor.
   Strong parallax can move the parent, but there is enough reserve to keep heads inside. */
body.arena-battle014-active #battle014-root .b14-fighter,
body.arena-battle014-active #battle014-root .b14-stage-boss .b14-enemy{
  top:76px!important;
  bottom:14px!important;
  width:50%!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
body.arena-battle014-active #battle014-root .b14-player{
  left:0!important;
  right:auto!important;
}
body.arena-battle014-active #battle014-root .b14-enemy,
body.arena-battle014-active #battle014-root .b14-stage-boss .b14-enemy{
  left:auto!important;
  right:0!important;
}
body.arena-battle014-active #battle014-root .b14-fighter img,
body.arena-battle014-active #battle014-root .b14-stage-boss .b14-enemy img{
  position:absolute!important;
  top:auto!important;
  bottom:0!important;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:center bottom!important;
}
body.arena-battle014-active #battle014-root .b14-player img{left:0!important;right:auto!important}
body.arena-battle014-active #battle014-root .b14-enemy img{left:auto!important;right:0!important}

/* Compact dual-hand selector. Only one four-zone row is visible at a time. */
.b155-hand-tabs{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
  margin:1px 1px 4px!important;
}
.b155-hand-tab{
  display:grid!important;
  min-width:0!important;
  height:30px!important;
  grid-template-columns:minmax(0,1fr)!important;
  grid-template-rows:auto auto!important;
  align-content:center!important;
  gap:1px!important;
  padding:3px 7px!important;
  border:1px solid rgba(215,168,84,.30)!important;
  border-radius:8px!important;
  color:#b9ab9c!important;
  background:linear-gradient(180deg,rgba(29,23,36,.94),rgba(8,8,14,.98))!important;
  text-align:center!important;
}
.b155-hand-tab b{
  overflow:hidden!important;
  color:#e8dac5!important;
  font-size:8px!important;
  line-height:1!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.b155-hand-tab small{
  overflow:hidden!important;
  color:#968a7b!important;
  font-size:7px!important;
  line-height:1!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.b155-hand-tab.is-active{
  border-color:#bd5ade!important;
  background:linear-gradient(180deg,rgba(112,40,143,.84),rgba(43,15,59,.98))!important;
  box-shadow:0 0 10px rgba(181,67,219,.22)!important;
}
.b155-hidden{display:none!important}

body.arena-battle014-active #battle014-root .b14-stat-ribbon{
  min-height:30px!important;
  margin-bottom:3px!important;
}
body.arena-battle014-active #battle014-root .b14-choice-head{
  min-height:16px!important;
  margin:1px 2px 3px!important;
  padding-top:0!important;
}
body.arena-battle014-active #battle014-root .b14-choice-head:not(:first-child){
  margin-top:4px!important;
  padding-top:3px!important;
}
body.arena-battle014-active #battle014-root .b14-zone{height:34px!important}
body.arena-battle014-active #battle014-root .b14-actions{margin-top:5px!important}
body.arena-battle014-active #battle014-root .b14-primary,
body.arena-battle014-active #battle014-root .b14-journal-button{height:38px!important}

/* HP compositor: core = actual residual HP; tail = removed interval [newHP, visualOldHP].
   This guarantees the light damage segment always begins exactly at residual HP. */
body.arena-battle014-active #battle014-root .b14-health>i em{
  position:absolute!important;
  z-index:3!important;
  left:0!important;
  right:auto!important;
  top:0!important;
  bottom:0!important;
  width:var(--b155-hp-core,100%)!important;
  margin:0!important;
  animation:none!important;
  transition:none!important;
}
body.arena-battle014-active #battle014-root .b14-health-enemy>i em{
  left:0!important;
  right:auto!important;
  margin:0!important;
}
body.arena-battle014-active #battle014-root .b14-hp-loss{display:none!important}
.b155-hp-tail{
  position:absolute!important;
  z-index:2!important;
  top:0!important;
  bottom:0!important;
  left:var(--b155-tail-left,0%)!important;
  width:var(--b155-tail-width,0%)!important;
  border-radius:0 7px 7px 0!important;
  pointer-events:none!important;
  opacity:1!important;
  background:linear-gradient(90deg,#ffb6a7,#ff725f)!important;
  box-shadow:0 0 9px rgba(255,111,92,.75)!important;
}
.b14-health-enemy .b155-hp-tail{
  background:linear-gradient(90deg,#efa8ff,#c968f2)!important;
  box-shadow:0 0 9px rgba(204,96,244,.72)!important;
}
.b155-hp-number{font-variant-numeric:tabular-nums!important}

/* Journal remains fixed inside the already fixed visual-viewport root. */
body.arena-battle014-active #battle014-journal{
  position:fixed!important;
  z-index:2147483000!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  overscroll-behavior:none!important;
  transform:none!important;
}
body.arena-battle014-active #battle014-journal .b14-journal-backdrop{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  touch-action:none!important;
}
body.arena-battle014-active #battle014-journal .b14-journal-sheet{
  position:absolute!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:0!important;
  width:min(100%,720px)!important;
  height:min(76%,680px)!important;
  max-height:calc(100% - 8px)!important;
  margin:0!important;
  overflow:hidden!important;
  transform:translate3d(-50%,calc(105% + var(--b155-journal-drag,0px)),0)!important;
  will-change:transform!important;
  backface-visibility:hidden!important;
}
body.arena-battle014-active #battle014-journal.is-open .b14-journal-sheet{
  transform:translate3d(-50%,var(--b155-journal-drag,0px),0)!important;
}
body.arena-battle014-active #battle014-journal .b14-journal-sheet.b155-dragging{transition:none!important}
body.arena-battle014-active #battle014-journal .b14-sheet-handle,
body.arena-battle014-active #battle014-journal .b14-journal-sheet header{
  touch-action:none!important;
  -webkit-user-select:none!important;
  user-select:none!important;
}
body.arena-battle014-active #battle014-journal .b14-sheet-handle{
  width:60px!important;
  height:6px!important;
  margin-top:10px!important;
}
body.arena-battle014-active #battle014-journal .b14-journal-sheet header{min-height:58px!important}
body.arena-battle014-active #battle014-journal .b14-journal-sheet ol{
  min-height:0!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  -webkit-overflow-scrolling:touch!important;
}

@media(max-height:760px) and (orientation:portrait){
  body.arena-battle014-active #battle014-root .b14-scene{min-height:225px!important}
  body.arena-battle014-active #battle014-root .b14-health{top:5px!important;padding-block:4px!important}
  body.arena-battle014-active #battle014-root .b14-fighter,
  body.arena-battle014-active #battle014-root .b14-stage-boss .b14-enemy{top:68px!important;bottom:9px!important}
  body.arena-battle014-active #battle014-root .b14-stat-ribbon{min-height:27px!important}
  body.arena-battle014-active #battle014-root .b14-zone{height:30px!important}
  body.arena-battle014-active #battle014-root .b14-primary,
  body.arena-battle014-active #battle014-root .b14-journal-button{height:34px!important}
}

@media(orientation:landscape) and (max-height:520px){
  body.arena-battle014-active #battle014-root .b14-scene{min-height:0!important;height:100%!important}
  body.arena-battle014-active #battle014-root .b14-fighter,
  body.arena-battle014-active #battle014-root .b14-stage-boss .b14-enemy{top:62px!important;bottom:8px!important}
}