/* v203 — 모바일(특히 PC의 모바일 미리보기) 하단 핸드창 폭/크기 복원 */

/* 실기기 모바일은 기존 5장 맞춤을 유지하되, 핸드 카드 높이가 과도하게 커지지 않게 안전 상한 적용 */
@media (max-width:850px){
  body.ui-mode-mobile:not(.prebattle){
    --v203-mobile-hand-card-w:min(calc((100vw - 14px) / 5), 82px);
    --v203-mobile-hand-card-h:calc(var(--v203-mobile-hand-card-w) * 48 / 33);
    --v203-mobile-hand-dock-h:calc(var(--v203-mobile-hand-card-h) + 30px);
  }
  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount{
    width:100%!important;
    left:0!important;
    right:0!important;
    transform:none!important;
    height:var(--v203-mobile-hand-dock-h)!important;
    min-height:var(--v203-mobile-hand-dock-h)!important;
    max-height:var(--v203-mobile-hand-dock-h)!important;
  }
  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{
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount #hand.hand{
    height:var(--v203-mobile-hand-card-h)!important;
    min-height:var(--v203-mobile-hand-card-h)!important;
    max-height:var(--v203-mobile-hand-card-h)!important;
    padding-left:3px!important;
    padding-right:3px!important;
  }
  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount #hand.hand .card{
    flex:0 0 var(--v203-mobile-hand-card-w)!important;
    width:var(--v203-mobile-hand-card-w)!important;
    min-width:var(--v203-mobile-hand-card-w)!important;
    max-width:var(--v203-mobile-hand-card-w)!important;
    height:var(--v203-mobile-hand-card-h)!important;
    min-height:var(--v203-mobile-hand-card-h)!important;
    max-height:var(--v203-mobile-hand-card-h)!important;
  }
  body.ui-mode-mobile:not(.prebattle) .bottom-hud{
    bottom:var(--v203-mobile-hand-dock-h)!important;
  }
  body.ui-mode-mobile:not(.prebattle),
  body.ui-mode-mobile:not(.prebattle) .app{
    padding-bottom:calc(var(--v203-mobile-hand-dock-h) + var(--v201-mobile-status-h,68px) + 8px + env(safe-area-inset-bottom,0px))!important;
  }
}

/* PC에서 모바일 미리보기: 하단 도크는 전체 폭이 아니라 모바일 플레이 폭(약 418px)을 사용 */
body.ui-mode-mobile-preview:not(.prebattle){
  --v203-preview-hand-card-w:calc((var(--mobile-play-width,418px) - 14px) / 5);
  --v203-preview-hand-card-h:calc(var(--v203-preview-hand-card-w) * 48 / 33);
  --v203-preview-hand-dock-h:calc(var(--v203-preview-hand-card-h) + 30px);
}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:var(--mobile-play-width,418px)!important;
  min-width:var(--mobile-play-width,418px)!important;
  max-width:var(--mobile-play-width,418px)!important;
  height:var(--v203-preview-hand-dock-h)!important;
  min-height:var(--v203-preview-hand-dock-h)!important;
  max-height:var(--v203-preview-hand-dock-h)!important;
}
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{
  width:var(--mobile-play-width,418px)!important;
  min-width:var(--mobile-play-width,418px)!important;
  max-width:var(--mobile-play-width,418px)!important;
  box-sizing:border-box!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body.ui-mode-mobile-preview:not(.prebattle) .mobile-hand-mount #hand.hand{
  height:var(--v203-preview-hand-card-h)!important;
  min-height:var(--v203-preview-hand-card-h)!important;
  max-height:var(--v203-preview-hand-card-h)!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{
  flex:0 0 var(--v203-preview-hand-card-w)!important;
  width:var(--v203-preview-hand-card-w)!important;
  min-width:var(--v203-preview-hand-card-w)!important;
  max-width:var(--v203-preview-hand-card-w)!important;
  height:var(--v203-preview-hand-card-h)!important;
  min-height:var(--v203-preview-hand-card-h)!important;
  max-height:var(--v203-preview-hand-card-h)!important;
}
body.ui-mode-mobile-preview:not(.prebattle) .bottom-hud{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  width:var(--mobile-play-width,418px)!important;
  min-width:var(--mobile-play-width,418px)!important;
  max-width:var(--mobile-play-width,418px)!important;
  bottom:var(--v203-preview-hand-dock-h)!important;
}
body.ui-mode-mobile-preview:not(.prebattle),
body.ui-mode-mobile-preview:not(.prebattle) .app{
  padding-bottom:calc(var(--v203-preview-hand-dock-h) + var(--v201-mobile-status-h,68px) + 8px)!important;
}