/* ================================================================
   v174 — 모바일 본진 UI 3건
   1) 아군/적군 본진 이름을 박스 상단 중앙에 정확히 표시
      (기존 .hq-title는 PC용 min-width:210px가 좁은 모바일 박스에서
       그대로 남아있어 중앙 배너가 박스 밖으로 밀려나가고 overflow:hidden에
       잘려 "아군 본진 · 위"의 앞글자가 화면 왼쪽 밖으로 잘려 보이던 문제.
       모바일에서는 title을 절대배치 배너 방식에서 그리드 셀 안 텍스트
       중앙정렬 방식으로 바꿔 원천적으로 잘림이 생기지 않게 한다.)
   2) 책사 배치 박스 높이를 본진 박스 높이와 통일
      (기존엔 책사 박스가 정보칸과 같은 56px짜리 가운데 띠 안에만 있어
       박스 위·아래로 남는 공백이 있었음. 본진 박스를 [제목행]-[정보/책사행]
       -[버튼행](아군만) 3행 그리드로 재구성하고, 책사 박스를 정보+버튼
       두 행을 합친 오른쪽 칼럼 전체에 걸쳐 배치해 사실상 본진 박스
       전체 높이(제목행 제외)와 같아지도록 한다.)
   3) 본진 박스를 화면 하단에 완전히 밀착
      (기존엔 본진 박스가 일반 문서 흐름에 있어 그 아래 핸드 영역과
       세이프에어리어 패딩만큼 화면 하단과 틈이 있었음. 본진 박스를
       화면에 고정하고, 핸드는 그 바로 위에 고정해 본진 박스 아래쪽
       테두리가 화면 맨 아래에 완전히 붙도록 한다.)

   game.css 및 이전 모든 모바일 패치(v132/v133/v139/v141/v173)보다
   나중에 로드되는 최종 패치. 일부 규칙은 game.css의 #allyHq/#enemyHq
   ID 선택자가 class 선택자보다 우선하는 것을 피하기 위해 동일하게
   ID 선택자를 사용한다.
   ================================================================ */

@media (max-width:850px){

  /* ---- 본진 박스: 그리드 컨테이너로 전환 ---- */
  body.ui-mode-mobile:not(.prebattle) .mobile-ally-hq-mount .battle-hq,
  body.ui-mode-mobile:not(.prebattle) .enemy-hq-row .battle-hq{
    display:grid!important;
    grid-template-columns:1fr var(--mobile-card-width)!important;
    column-gap:5px!important;
    padding:3px!important;
    box-sizing:border-box!important;
    position:relative!important;
    overflow:hidden!important;
  }
  /* 아군 본진: 제목 / 정보+책사 / 버튼+책사 3행 — 책사 칸이 2·3행을 모두 차지 */
  body.ui-mode-mobile:not(.prebattle) .mobile-ally-hq-mount .battle-hq{
    grid-template-rows:22px 1fr 28px!important;
    grid-template-areas:"title title" "stats advisor" "actions advisor"!important;
    row-gap:2px!important;
  }
  /* 적군 본진: 버튼행이 없어 제목 / 정보+책사 2행 — 책사 칸이 남은 높이 전체를 차지 */
  body.ui-mode-mobile:not(.prebattle) .enemy-hq-row .battle-hq{
    grid-template-rows:22px 1fr!important;
    grid-template-areas:"title title" "stats advisor"!important;
  }

  /* ---- 본진 이름: 그리드 셀 안에서 절대배치를 해제하고 가운데 정렬 ---- */
  body.ui-mode-mobile:not(.prebattle) .mobile-ally-hq-mount .battle-hq .hq-title,
  body.ui-mode-mobile:not(.prebattle) .enemy-hq-row .battle-hq .hq-title{
    grid-area:title!important;
    position:static!important;
    inset:auto!important;
    left:auto!important;top:auto!important;transform:none!important;
    width:100%!important;min-width:0!important;max-width:none!important;
    box-sizing:border-box!important;
    height:100%!important;min-height:0!important;max-height:none!important;
    margin:0!important;padding:0 4px!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    text-align:center!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    clip-path:none!important;
    font-size:11px!important;line-height:1.1!important;
  }

  /* ---- 정보칸(라이프·MP·행동력·덱·턴·책사유무): 그리드 셀에 맞춰 채움 ---- */
  body.ui-mode-mobile:not(.prebattle) .mobile-ally-hq-mount .battle-hq .hq-info-overlay,
  body.ui-mode-mobile:not(.prebattle) .enemy-hq-row .battle-hq .hq-info-overlay{
    grid-area:stats!important;
    position:static!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100%!important;height:100%!important;
    min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;
    margin:0!important;padding:2px!important;box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(0,1fr))!important;
    gap:2px!important;
  }

  /* ---- 책사 배치칸: 오른쪽 칼럼 전체(본진 박스와 같은 높이) ---- */
  body.ui-mode-mobile:not(.prebattle) #allyHq .hq-advisor-slot,
  body.ui-mode-mobile:not(.prebattle) #enemyHq .hq-advisor-slot{
    grid-area:advisor!important;
    position:static!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    transform:none!important;
    width:100%!important;height:100%!important;
    min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;
    margin:0!important;padding:0!important;box-sizing:border-box!important;
    border-radius:6px!important;overflow:hidden!important;
  }

  /* ---- 항복·셔플·턴종료 버튼(아군 본진만): 왼쪽 칼럼 맨 아래 행 ---- */
  body.ui-mode-mobile:not(.prebattle) .mobile-ally-hq-mount .battle-hq .mobile-hq-actions{
    grid-area:actions!important;
    position:static!important;
    inset:auto!important;
    left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
    width:100%!important;height:100%!important;
    min-width:0!important;max-width:none!important;min-height:0!important;max-height:none!important;
    margin:0!important;padding:0!important;box-sizing:border-box!important;
    display:flex!important;align-items:stretch!important;justify-content:stretch!important;gap:3px!important;
  }
  body.ui-mode-mobile:not(.prebattle) .mobile-ally-hq-mount .battle-hq .mobile-hq-actions .btn,
  body.ui-mode-mobile:not(.prebattle) .mobile-ally-hq-mount .battle-hq .mobile-hq-actions button{
    flex:1 1 0!important;
    width:auto!important;
    height:auto!important;min-height:0!important;max-height:none!important;
  }

  /* ---- 본진 박스를 화면 맨 아래에 고정, 핸드는 그 바로 위에 고정 ---- */
  body.ui-mode-mobile:not(.prebattle) .mobile-ally-hq-mount{
    position:fixed!important;
    left:0!important;right:0!important;top:auto!important;bottom:0!important;
    width:100%!important;margin:0!important;
    padding:0 4px env(safe-area-inset-bottom,0px)!important;
    box-sizing:border-box!important;
    z-index:60!important;
  }
  body.ui-mode-mobile:not(.prebattle) .mobile-hand-mount{
    position:fixed!important;
    left:0!important;right:0!important;top:auto!important;
    bottom:calc(var(--v173-mobile-hq-height, 118px) + env(safe-area-inset-bottom,0px))!important;
    width:100%!important;margin:0!important;
    z-index:59!important;
  }
  /* 위에서 고정한 본진·핸드 두 줄 높이만큼 전투 화면 하단 여백을 확보해
     실제 전투필드 카드가 그 뒤에 가려지지 않게 한다. */
  body.ui-mode-mobile:not(.prebattle) .app,
  body.ui-mode-mobile:not(.prebattle){
    padding-bottom:calc(var(--v173-mobile-hq-height, 118px) + var(--v173-mobile-hand-height, 186px) + env(safe-area-inset-bottom,0px) + 6px)!important;
  }
}