/* v355 — 실제 모바일 전투 레이아웃 강제 보정
   - 핸드 잘림/클릭 불가 해결
   - 전투필드→본진→핸드→조작부를 정상 문서 흐름으로 연결
   - 모바일 모든 전투 슬롯을 본진 5칸 기준 동일 폭/비율로 통일
*/

@media (max-width:850px){
  body.ui-mode-mobile:not(.prebattle){
    --v355-side:4px;
    --v355-gap:3px;
    --v355-card-w:calc((100vw - (var(--v355-side) * 2) - (var(--v355-gap) * 4)) / 5);
    --v355-card-h:calc(var(--v355-card-w) * 1.4);
    overflow-x:hidden!important;
    overflow-y:auto!important;
    padding-bottom:env(safe-area-inset-bottom,0px)!important;
  }

  body.ui-mode-mobile:not(.prebattle) .app,
  body.ui-mode-mobile:not(.prebattle) .battle-panel{
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding-bottom:0!important;
    overflow:visible!important;
  }

  body.ui-mode-mobile:not(.prebattle) .battle-panel{
    display:flex!important;
    flex-direction:column!important;
    gap:0!important;
    row-gap:0!important;
  }

  body.ui-mode-mobile:not(.prebattle) .boardwrap{
    order:1!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:2px var(--v355-side) 0!important;
    overflow:visible!important;
  }

  body.ui-mode-mobile:not(.prebattle) .battlefield-layout,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout>.board{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    gap:2px!important;
    overflow:visible!important;
  }

  /* 2/3/4열도 5칸 기준 카드 폭을 사용. 남는 공간만 비워 둔다. */
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout .slots,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout .slots.n5,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout .slots.n4,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout .slots.n3,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout .slots.n2,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout .hq-battlefield-grid{
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    grid-auto-flow:column!important;
    grid-auto-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    justify-content:stretch!important;
    width:100%!important;
    height:var(--v355-card-h)!important;
    min-height:var(--v355-card-h)!important;
    max-height:var(--v355-card-h)!important;
    gap:var(--v355-gap)!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  body.ui-mode-mobile:not(.prebattle) .battlefield-layout>.board>.lane,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout>.board>.hq-defense-lane{
    box-sizing:border-box!important;
    width:100%!important;
    height:auto!important;
    min-height:calc(var(--v355-card-h) + 18px)!important;
    max-height:none!important;
    margin:0!important;
    padding:16px 0 2px!important;
    overflow:visible!important;
  }

  body.ui-mode-mobile:not(.prebattle) .battlefield-layout .slot,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout .hq-field-slot{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:var(--v355-card-h)!important;
    min-height:var(--v355-card-h)!important;
    max-height:var(--v355-card-h)!important;
    aspect-ratio:2.5 / 3.5!important;
    margin:0!important;
    overflow:hidden!important;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }

  body.ui-mode-mobile:not(.prebattle) .battlefield-layout .slot>.unit,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout .hq-field-slot>.unit{
    width:100%!important;
    height:100%!important;
    min-width:0!important;
    min-height:0!important;
    max-width:100%!important;
    max-height:100%!important;
  }

  body.ui-mode-mobile:not(.prebattle) .mobile-ally-hq-mount{
    order:2!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0 var(--v355-side)!important;
    overflow:visible!important;
  }

  /* 핸드는 고정 독(dock)이 아니라 본진 바로 아래 정상 흐름에 배치 */
  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount{
    order:3!important;
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    box-sizing:border-box!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    z-index:20!important;
  }

  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount .right-hand-section{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  /* 모바일 하단 HUD와 중복되는 상태바는 핸드 영역에서는 제거 */
  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount #battleStatusPair{
    display:none!important;
  }

  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount .right-hand-section>.ornate-title{
    flex:0 0 28px!important;
    height:28px!important;
    min-height:28px!important;
    max-height:28px!important;
    margin:0!important;
  }

  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount .v287-hand-settings{
    margin:0!important;
    padding:4px var(--v355-side)!important;
    min-height:0!important;
  }

  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount .handbox{
    box-sizing:border-box!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:2px var(--v355-side) 4px!important;
    overflow:visible!important;
  }

  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount .handhead{
    display:none!important;
  }

  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount #hand.hand{
    box-sizing:border-box!important;
    display:flex!important;
    align-items:flex-start!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:calc(var(--v355-card-h) + 8px)!important;
    min-height:calc(var(--v355-card-h) + 8px)!important;
    max-height:calc(var(--v355-card-h) + 8px)!important;
    gap:var(--v355-gap)!important;
    margin:0!important;
    padding:2px 0 6px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    overscroll-behavior-x:contain!important;
    -webkit-overflow-scrolling:touch!important;
    scroll-snap-type:x proximity;
    touch-action:pan-x!important;
  }

  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount #hand.hand .card{
    box-sizing:border-box!important;
    flex:0 0 var(--v355-card-w)!important;
    width:var(--v355-card-w)!important;
    min-width:var(--v355-card-w)!important;
    max-width:var(--v355-card-w)!important;
    height:var(--v355-card-h)!important;
    min-height:var(--v355-card-h)!important;
    max-height:var(--v355-card-h)!important;
    aspect-ratio:2.5 / 3.5!important;
    margin:0!important;
    overflow:hidden!important;
    scroll-snap-align:start;
    pointer-events:auto!important;
    touch-action:manipulation!important;
  }

  /* 조작부는 핸드 다음에 붙여서 핸드를 가리지 않게 함 */
  body.ui-mode-mobile:not(.prebattle) .bottom-hud{
    order:4!important;
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    transform:none!important;
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:4px var(--v355-side) calc(4px + env(safe-area-inset-bottom,0px))!important;
    z-index:30!important;
  }

  body.ui-mode-mobile:not(.prebattle) .bottom-hud .mobile-bottom-status-row{
    margin:0 0 3px!important;
  }

  body.ui-mode-mobile:not(.prebattle),
  body.ui-mode-mobile:not(.prebattle) .app{
    margin-bottom:0!important;
    padding-bottom:0!important;
  }
}

/* PC에서 모바일 미리보기에도 실제 모바일과 동일하게 적용 */
body.ui-mode-mobile-preview:not(.prebattle){
  --v355-side:4px;
  --v355-gap:3px;
  --v355-preview-w:var(--mobile-play-width,418px);
  --v355-card-w:calc((var(--v355-preview-w) - (var(--v355-side) * 2) - (var(--v355-gap) * 4)) / 5);
  --v355-card-h:calc(var(--v355-card-w) * 1.4);
}
body.ui-mode-mobile-preview:not(.prebattle) .battle-panel{display:flex!important;flex-direction:column!important;gap:0!important;row-gap:0!important}
body.ui-mode-mobile-preview:not(.prebattle) .boardwrap{order:1!important;margin:0!important;padding-bottom:0!important}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-ally-hq-mount{order:2!important;margin:0 auto!important;padding-bottom:0!important}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount{order:3!important;position:relative!important;inset:auto!important;transform:none!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0 auto!important;padding:0!important;overflow:visible!important}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount .right-hand-section{display:flex!important;flex-direction:column!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;overflow:visible!important}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount #battleStatusPair{display:none!important}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount .handhead{display:none!important}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount .handbox{height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:2px var(--v355-side) 4px!important;overflow:visible!important}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount #hand.hand{display:flex!important;justify-content:flex-start!important;width:100%!important;height:calc(var(--v355-card-h) + 8px)!important;min-height:calc(var(--v355-card-h) + 8px)!important;max-height:calc(var(--v355-card-h) + 8px)!important;gap:var(--v355-gap)!important;margin:0!important;padding:2px 0 6px!important;overflow-x:auto!important;overflow-y:hidden!important;touch-action:pan-x!important}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount #hand.hand .card{flex:0 0 var(--v355-card-w)!important;width:var(--v355-card-w)!important;min-width:var(--v355-card-w)!important;max-width:var(--v355-card-w)!important;height:var(--v355-card-h)!important;min-height:var(--v355-card-h)!important;max-height:var(--v355-card-h)!important;aspect-ratio:2.5/3.5!important;margin:0!important;pointer-events:auto!important;touch-action:manipulation!important}
body.ui-mode-mobile-preview:not(.prebattle) .bottom-hud{order:4!important;position:relative!important;inset:auto!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;width:100%!important;min-width:0!important;max-width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;margin:0!important}
body.ui-mode-mobile-preview:not(.prebattle),body.ui-mode-mobile-preview:not(.prebattle) .app{padding-bottom:0!important;margin-bottom:0!important}