/* v202 — 모바일 전투열 오른쪽 잘림 최종 보정 */

@media (max-width:850px){
  body.ui-mode-mobile:not(.prebattle),
  body.ui-mode-mobile:not(.prebattle) .app,
  body.ui-mode-mobile:not(.prebattle) .battle-panel,
  body.ui-mode-mobile:not(.prebattle) .boardwrap,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout>.board{
    box-sizing:border-box!important;
    min-width:0!important;
    max-width:100%!important;
    overflow-x:hidden!important;
  }

  body.ui-mode-mobile:not(.prebattle) .boardwrap,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout>.board{
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:2px!important;
    padding-right:2px!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;
    min-width:0!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:3px!important;
    padding-right:3px!important;
    overflow:hidden!important;
  }

  /* 모든 전투열은 5장 기준 폭을 공유한다. 4/3/2칸 열도 같은 카드 폭 유지 */
  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-columns:minmax(0,1fr)!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    gap:2px!important;
    margin:0!important;
    padding:0!important;
    justify-content:stretch!important;
    overflow:hidden!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:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:33 / 48!important;
    margin:0!important;
  }
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout .slot>.unit,
  body.ui-mode-mobile:not(.prebattle) .battlefield-layout .hq-field-slot>.unit{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
    height:100%!important;
    min-height:0!important;
    max-height:100%!important;
    margin:0!important;
  }

  /* 핸드도 정확히 5장이 화면 폭 안에 들어가도록 재계산 */
  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount,
  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount .right-hand-section,
  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount .handbox,
  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount #hand.hand{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    max-width:100%!important;
  }
  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount #hand.hand{
    display:flex!important;
    gap:2px!important;
    padding-left:3px!important;
    padding-right:3px!important;
    overflow:hidden!important;
  }
  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount #hand.hand .card{
    box-sizing:border-box!important;
    flex:0 0 calc((100% - 8px) / 5)!important;
    width:calc((100% - 8px) / 5)!important;
    min-width:0!important;
    max-width:calc((100% - 8px) / 5)!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:33 / 48!important;
    margin:0!important;
  }
}

/* PC에서 실행하는 모바일 미리보기에도 같은 폭 계산 적용 */
body.ui-mode-mobile-preview:not(.prebattle),
body.ui-mode-mobile-preview:not(.prebattle) .app,
body.ui-mode-mobile-preview:not(.prebattle) .battle-panel,
body.ui-mode-mobile-preview:not(.prebattle) .boardwrap,
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout,
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout>.board{
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
  overflow-x:hidden!important;
}
body.ui-mode-mobile-preview:not(.prebattle) .boardwrap,
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout,
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout>.board{
  width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:2px!important;
  padding-right:2px!important;
}
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout>.board>.lane,
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout>.board>.hq-defense-lane{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:3px!important;
  padding-right:3px!important;
  overflow:hidden!important;
}
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout .slots,
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout .slots.n5,
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout .slots.n4,
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout .slots.n3,
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout .slots.n2,
body.ui-mode-mobile-preview: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-columns:minmax(0,1fr)!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  gap:2px!important;
  margin:0!important;
  padding:0!important;
  justify-content:stretch!important;
  overflow:hidden!important;
}
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout .slot,
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout .hq-field-slot{
  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;
  aspect-ratio:33 / 48!important;
  margin:0!important;
}
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout .slot>.unit,
body.ui-mode-mobile-preview:not(.prebattle) .battlefield-layout .hq-field-slot>.unit{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:100%!important;
  margin:0!important;
}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount,
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount .right-hand-section,
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount .handbox,
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount #hand.hand{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount #hand.hand{
  display:flex!important;
  gap:2px!important;
  padding-left:3px!important;
  padding-right:3px!important;
  overflow:hidden!important;
}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount #hand.hand .card{
  box-sizing:border-box!important;
  flex:0 0 calc((100% - 8px) / 5)!important;
  width:calc((100% - 8px) / 5)!important;
  min-width:0!important;
  max-width:calc((100% - 8px) / 5)!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:33 / 48!important;
  margin:0!important;
}