/* PC 훈련: 안내 카드가 전장을 가리지 않도록 그 높이만큼 전장을 내린다. */
@media not all and (pointer:coarse) {
  .mode-battle.is-training:has(.is-command) #stage { margin-top: 132px; }
}

/* 휴대폰 가로 전투. 전장은 화면 높이 전체를 쓰고 UI는 양옆 여백에만 둔다.
   패드 쪽 여백(기본 왼쪽, 128px): 병력 수, 상태, 알림, 이동 패드 영역(어디를
   눌러도 그 자리가 패드 중심). 행동 쪽 여백(기본 오른쪽, 88px): 메뉴, 후퇴,
   병과 선택, 공격. 손잡이 방향을 바꾸면 두 여백이 통째로 자리를 바꾼다. */
@media (pointer:coarse) and (orientation:landscape) {
  #game.mode-battle {
    --battle-pad-size: 76px;
    --pad-gutter-l: max(128px, calc(env(safe-area-inset-left) + 120px));
    --act-gutter-r: max(88px, calc(env(safe-area-inset-right) + 80px));
    --edge-l: max(6px, env(safe-area-inset-left)); --edge-r: max(6px, env(safe-area-inset-right));
  }
  .mode-battle:has(.is-command) #stage { margin: 0 var(--act-gutter-r) 0 var(--pad-gutter-l); }
  #game.mode-battle[data-pad-side=left]:has(.is-command) #stage { margin: 0 max(128px, calc(env(safe-area-inset-right) + 120px)) 0 max(88px, calc(env(safe-area-inset-left) + 80px)); }

  .mode-battle .topbar { border-bottom: 0; background: none; }
  /* 병력 수와 시간: 패드 쪽 여백 맨 위에 두 줄로. 손잡이를 바꾸면 메뉴와 자리를 바꾼다. */
  .mode-battle .top-info { width: 112px; padding: 3px 5px; gap: 2px; }
  .mode-battle .battle-counts { flex-direction: row; align-items: baseline; gap: 10px; }
  #game.mode-battle[data-pad-side=left] .topbar { flex-direction: row-reverse; }
  #game.mode-battle[data-pad-side=left] .topbar nav { margin-left: 0; margin-right: auto; }
  .mode-battle .army-stat b { font-size: 16px; }

  /* 병과 선택: 행동 쪽 여백, 후퇴 버튼 아래. */
  .mode-battle:has(.is-command) #hud { left: auto; right: var(--edge-r); top: calc(104px + env(safe-area-inset-top)); bottom: auto; width: 72px; }
  #game.mode-battle[data-pad-side=left]:has(.is-command) #hud { right: auto; left: var(--edge-l); }
  .mode-battle .battle-bar.is-command { display: block; height: auto; }
  .mode-battle .battle-bar.is-command .formation-tabs { flex-direction: column; align-items: stretch; gap: 5px; align-self: auto; }
  .is-command .formation { flex: 0 0 50px; width: 72px; height: 50px; }
  .portrait-well { bottom: 16px; }
  .formation .name { padding: 0 4px; font-size: 12px; line-height: 15px; }
  .formation-strength { min-width: 20px; min-height: 18px; padding: 0 4px; }
  .formation .count { font-size: 12px; line-height: 16px; }

  .battle-bar.is-command .combat-exit { top: calc(56px + env(safe-area-inset-top)); height: 40px; width: 72px; right: var(--edge-r); }
  #game.mode-battle[data-pad-side=left] .battle-bar.is-command .combat-exit { right: auto; left: var(--edge-l); }

  /* 상태와 알림: 패드 쪽 여백 위쪽. */
  .combat-readout { left: var(--edge-l); right: auto; top: calc(62px + env(safe-area-inset-top)); width: 112px; border-top: 0; }
  #game.mode-battle[data-pad-side=left] .combat-readout { left: auto; right: var(--edge-r); }
  .mode-battle #toast {
    position: fixed; left: var(--edge-l); right: auto; top: calc(148px + env(safe-area-inset-top)); bottom: auto;
    width: 112px; max-width: 112px; padding: 5px 6px; transform: none; font-size: 11px; line-height: 14px; word-break: keep-all;
  }
  #game.mode-battle[data-pad-side=left] #toast { left: auto; right: var(--edge-r); }
  .mode-battle #toast.show { transform: none; }

  /* 이동 패드 영역: 패드 쪽 여백 아래 전체. */
  .mode-battle #stick {
    left: calc(var(--edge-l) - 2px); right: auto; top: calc(196px + env(safe-area-inset-top)); bottom: 0;
    width: calc(var(--pad-gutter-l) - var(--edge-l) - 4px); height: auto; border-radius: 16px;
  }
  #game.mode-battle[data-pad-side=left] #stick { left: auto; right: calc(var(--edge-r) - 2px); width: calc(max(128px, calc(env(safe-area-inset-right) + 120px)) - var(--edge-r) - 4px); }
  .mode-battle .touch-actions { bottom: calc(8px + env(safe-area-inset-bottom)); }
  #game.mode-battle[data-pad-side=left] .touch-actions { left: var(--edge-l); right: auto; }

  /* Training gives the lesson card its own band under the field. */
  .mode-battle.is-training:has(.is-command) #stage { margin-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .mode-battle #training-guide {
    top: auto; bottom: calc(6px + env(safe-area-inset-bottom)); height: 68px; min-height: 0; overflow: hidden;
    left: calc(var(--pad-gutter-l) + 8px); right: calc(var(--act-gutter-r) + 8px);
    max-width: none; margin: 0; padding: 4px 10px; border-radius: 10px; background: #1b2e2b; box-shadow: none;
  }
  .mode-battle #training-guide[data-stage=slash], .mode-battle #training-guide[data-stage=release] { background: #1b2e2b; }
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:350px) {
  #game.mode-battle { --battle-pad-size: 64px; }
  .is-command .formation { flex-basis: 42px; height: 42px; }
  .portrait-well { bottom: 14px; }
  .formation .name { line-height: 13px; }
  .mode-battle .combat-readout #combat-tip { display: none; }
  .mode-battle #toast { top: calc(124px + env(safe-area-inset-top)); }
  .mode-battle #stick { top: calc(170px + env(safe-area-inset-top)); }
}

/* 휴대폰 가로 습격(요새·수송대). 장면 위에는 아무 UI도 올리지 않는다.
   위쪽 띠: 체력·남은 시간·목표·철수·메뉴. 왼쪽 여백: 이동 패드(아래로 당기면
   숙이기). 오른쪽 여백: 점프·베기. 수비 역할은 패드 대신 위·아래 경비 버튼이
   왼쪽에 온다. */
@media (pointer:coarse) and (orientation:landscape) {
  #game.mode-raid {
    grid-template-rows: minmax(0,1fr);
    --raid-band: calc(50px + env(safe-area-inset-top));
    --raid-gutter-left: max(128px, calc(env(safe-area-inset-left) + 120px));
    --raid-gutter-right: max(92px, calc(env(safe-area-inset-right) + 84px));
    --raid-pad: 76px; --raid-button: 66px;
  }
  .mode-raid #stage { grid-row: 1 / -1; margin: var(--raid-band) var(--raid-gutter-right) 0 var(--raid-gutter-left); }

  .mode-raid .topbar {
    position: absolute; z-index: 7; top: calc(7px + env(safe-area-inset-top));
    left: calc(max(8px, env(safe-area-inset-left)) + 120px); right: max(8px, env(safe-area-inset-right));
    height: 36px; padding: 0; border: 0; background: none; pointer-events: none;
  }
  .mode-raid .topbar .wordmark { display: none; }
  .mode-raid .topbar .top-info { flex: none; width: auto; display: flex; align-items: baseline; gap: 4px; height: 32px; padding: 4px 10px; border-radius: 16px; background: #1b2e2b; color: #f3e9cf; font-size: 12px; pointer-events: auto; }
  .mode-raid .topbar .top-info .faction-label { display: none; }
  .mode-raid .topbar .top-info strong { font-size: 17px; color: #f2cd7b; }
  .mode-raid .topbar nav { pointer-events: auto; margin-left: auto; }
  .mode-raid .topbar .icon-button { min-height: 36px; height: 36px; }

  .mode-raid #hud { border: 0; background: transparent; box-shadow: none; position: absolute; z-index: 6; left: max(8px, env(safe-area-inset-left)); right: max(8px, env(safe-area-inset-right)); top: calc(7px + env(safe-area-inset-top)); height: 36px; pointer-events: none; }
  .mode-raid #hud .battle-bar { display: block; position: relative; min-height: 0; height: 36px; padding: 0; border: 0; background: none; box-shadow: none; }
  .mode-raid #hud .battle-bar > div:first-child { position: absolute; left: 0; top: 2px; height: 32px; padding: 4px 10px; border-radius: 16px; background: #1b2e2b; }
  .mode-raid #hud .battle-bar .eyebrow { display: none; }
  .mode-raid #hud .hp-dots { font-size: 13px; line-height: 24px; letter-spacing: 1px; color: #ef8a73; white-space: nowrap; }
  .mode-raid #hud .raid-reserves { position: absolute; left: 0; top: 40px; padding: 1px 8px; border-radius: 10px; background: #1b2e2b; color: #f3e9cf; font-size: 11px; }
  .mode-raid #hud .raid-progress {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: calc(100% - 2 * 214px); max-width: 420px; min-width: 150px; padding: 0; color: #f3e9cf; text-align: center;
  }
  .mode-raid #raid-objective { display: block; font-size: 13px; line-height: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mode-raid #hud .raid-progress .reload-track { height: 4px; margin: 2px 0; background: #ffffff22; }
  .mode-raid #raid-status { margin: 0; font-size: 11px; line-height: 14px; color: #c9d4c6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mode-raid #hud .keys { display: none; }
  .mode-raid #hud .battle-bar > .small { position: absolute; right: 80px; top: 0; height: 36px; min-height: 36px; padding: 0 12px; pointer-events: auto; }

  .mode-raid #stick { left: max(4px, calc(env(safe-area-inset-left) - 2px)); top: calc(var(--raid-band) + 8px); bottom: 0; width: calc(var(--raid-gutter-left) - max(8px, env(safe-area-inset-left))); height: auto; border-radius: 16px; }
  .mode-raid #stick-label, .mode-raid #stick-detail { display: none; }
  .mode-raid .touch-actions {
    right: max(8px, env(safe-area-inset-right)); left: auto; bottom: calc(10px + env(safe-area-inset-bottom));
    width: var(--raid-button); max-width: none; flex-direction: column-reverse; flex-wrap: nowrap; align-items: center; gap: 10px;
  }
  .mode-raid .touch-actions button { width: var(--raid-button); height: var(--raid-button); min-height: var(--raid-button); padding: 0; font-size: 15px; line-height: 1; white-space: nowrap; }
  /* Defender: no pad. Guard spawns go to the left gutter, the strike stays right. */
  .mode-raid #touch-controls:has(#stick[hidden]) #jump-button,
  .mode-raid #touch-controls:has(#stick[hidden]) #duck-button { position: fixed; left: max(8px, env(safe-area-inset-left)); }
  .mode-raid #touch-controls:has(#stick[hidden]) #jump-button { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .mode-raid #touch-controls:has(#stick[hidden]) #duck-button { bottom: calc(10px + env(safe-area-inset-bottom)); }
}
@media (pointer:coarse) and (orientation:landscape) and (max-width:640px) {
  .mode-raid #hud .raid-progress { width: calc(100% - 2 * 196px); }
  .mode-raid #raid-objective { font-size: 12px; }
  .mode-raid .topbar .top-info span:last-child { display: none; }
}
@media (pointer:coarse) and (orientation:landscape) and (max-height:350px) {
  #game.mode-raid { --raid-pad: 68px; --raid-button: 60px; }
}