/* Production-copy mobile layout. Desktop retains the original layout. */
@media (max-width: 980px) {
  html, body { height: auto; min-height: 100%; overflow: auto; }
  body { min-height: 100dvh; display: flex; flex-direction: column; }
  .toolbar { flex-wrap: wrap; gap: 6px; padding: 8px max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
  .toolbar__left { width: 100%; justify-content: space-between; gap: 8px; }
  .toolbar h1 { font-size: 12px; }
  .toolbar p { display: none; }
  .controls { width: 100%; flex-wrap: wrap; gap: 6px; }
  .controls button, .toolbar__left button { min-height: 44px; padding: 6px 10px; font-size: 11px; }
  .turn-state { min-width: 0; flex: 1; margin: 0; padding-right: 6px; column-gap: 6px; }
  #toggle-action-emphasis { min-width: 0; }
  .battle-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(300px, 48dvh) auto; min-width: 0; flex: 1; }
  body .battle-layout > .roster { display: block; grid-column: 1; min-width: 0; overflow: hidden; border: 0; }
  body .battle-layout > .roster--left { grid-row: 1; }
  body .battle-layout > .roster--right { grid-row: 3; }
  body.is-alpha-perspective .battle-layout > .roster--right { grid-row: 1; }
  body.is-alpha-perspective .battle-layout > .roster--left { grid-row: 3; }
  body .battle-layout > .viewport { grid-column: 1; grid-row: 2; min-width: 0; min-height: 300px; }
  body .battle-layout .roster__heading { position: static; gap: 6px; padding: 5px 8px; border-block: 1px solid var(--line); }
  .roster__heading > div { display: flex; align-items: center; gap: 8px; }
  .roster__heading strong { font-size: 11px; }
  .roster__heading small { margin: 0; }
  body .battle-layout .team-mark { width: 5px; height: 18px; }
  .roster__heading::after { content: '横スワイプで確認 →'; margin-left: auto; font-size: 10px; color: var(--muted); }
  body .battle-layout .roster__pairs { display: grid; grid-auto-flow: column; grid-auto-columns: min(280px, 82vw); grid-template-columns: none; gap: 6px; padding: 6px; overflow-x: auto; scroll-snap-type: x proximity; }
  .pair-card { scroll-snap-align: start; }
  body .battle-layout .pair-card h2 { padding: 4px 8px; font-size: 10px; }
  .unit-card { padding: 6px; }
  .unit-card__identity-row strong { font-size: 12px; }
  .unit-card--detailed .unit-card__stats small { font-size: 9px; }
  .unit-card--detailed .unit-card__stats b { font-size: 11px; }
  .unit-card--detailed .hp { height: 14px; }
  .unit-card--detailed .hp span { font-size: 10px; line-height: 14px; }
  .unit-card--detailed .chip-button { min-height: 44px; font-size: 11px; padding: 5px; }
  .processing-order { max-width: 48%; max-height: 36%; left: 6px; top: 6px; }
  .operation-timer { right: 6px; bottom: 6px; min-width: 72px; padding: 5px 8px; }
  .statusbar { min-height: 36px; padding: 8px; padding-bottom: max(8px, env(safe-area-inset-bottom)); gap: 8px; flex-wrap: wrap; }
  .statusbar span:not(#tile-info):not(#action-info) { display: none; }
  .statusbar #action-info { display: block; font-size: 11px; }
  .chip-skill-modal__dialog, .local-battle-modal__dialog { max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; }
}
@media (max-width: 980px) {
  .controls .turn-state { flex: 1 0 calc(100% - 110px); min-width: 170px; white-space: nowrap; }
  .controls #confirm-actions { flex: 0 0 100px; }
  .controls #zoom-label { min-width: 58px; }
  .controls #toggle-action-emphasis { margin-left: auto; }
}
/* Show all six units without horizontal scrolling. */
@media (max-width: 980px) {
  .roster__heading::after { content: none; }
  body .battle-layout .roster__pairs {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 4px;
    overflow: visible;
    scroll-snap-type: none;
  }
  .roster .pair-card { display: contents; }
  .roster .pair-card h2 { display: none; }
  .roster .unit-card {
    min-width: 0;
    padding: 4px;
    border: 1px solid #30434d;
    border-radius: 6px;
    background-color: #111c23;
  }
  .roster .unit-card__identity-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 2px;
    white-space: normal;
  }
  .roster .unit-card__identity-row strong { font-size: 11px; }
  .roster .unit-card__identity-row > span { font-size: 8px; }
  .roster .unit-card__identity-row small { font-size: 7px; }
  .roster .unit-card__identity-row em { font-size: 7px; overflow-wrap: anywhere; }
  .roster .unit-card__status-row { grid-template-columns: 24px minmax(0, 1fr); gap: 3px; }
  .roster .unit-card__status-body { display: contents; }
  .roster .unit-card__portrait { width: 24px; height: 24px; }
  .roster .unit-card__stats { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 0; }
  .roster .unit-card__stats small { font-size: 7px; white-space: nowrap; }
  .roster .unit-card__stats b { font-size: 10px; }
  .roster .unit-card .hp { height: 14px; min-width: 0; }
  .roster .unit-card .hp span { font-size: 8px; line-height: 14px; }
  .roster .unit-card .chips { grid-template-columns: minmax(0, 1fr); gap: 2px; margin-top: 4px; }
  .roster .unit-card .chip-button { min-height: 28px; padding: 3px; gap: 2px; font-size: 9px; }
  .roster .chip-button__sp-badge { padding: 1px 2px; font-size: 5px; }
  .roster .unit-card__top { grid-template-columns: 24px minmax(0, 1fr); gap: 3px; }
  .roster .unit-card__identity { min-width: 0; }
  .roster .unit-card__identity strong { font-size: 11px; overflow-wrap: anywhere; }
}
/* Compact roster density for the mobile battlefield. */
@media (max-width: 980px) {
  body .battle-layout .roster__pairs { gap: 2px; padding: 2px; }
  body .battle-layout .roster__heading { padding: 3px 6px; }
  body .battle-layout .team-mark { height: 14px; }
  .roster .unit-card { padding: 3px; border-radius: 4px; }
  .roster .unit-card__identity-row { gap: 0 2px; line-height: 1.1; }
  .roster .unit-card__identity-row strong,
  .roster .unit-card__identity strong { font-size: 10px; }
  .roster .unit-card__identity-row > span,
  .roster .unit-card__identity-row small,
  .roster .unit-card__identity-row em { font-size: 6px; }
  .roster .unit-card__status-row { grid-template-columns: 18px minmax(0, 1fr); gap: 1px 3px; margin-top: 2px; }
  .roster .unit-card__portrait { width: 18px; height: 18px; }
  .roster .unit-card__top { grid-template-columns: 18px minmax(0, 1fr); gap: 3px; }
  .roster .unit-card__stats { gap: 1px 2px; line-height: 1.1; }
  .roster .unit-card__stats > span { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1px; }
  .roster .unit-card__stats small { font-size: 6px; }
  .roster .unit-card__stats b { font-size: 8px; margin-top: 0; }
  .roster .unit-card .hp { height: 11px; }
  .roster .unit-card .hp span { font-size: 7px; line-height: 11px; }
  .roster .unit-card .chips { gap: 1px; margin-top: 2px; }
  .roster .unit-card .chip-button { min-height: 20px; padding: 1px 3px; font-size: 8px; line-height: 1.1; }
}
/* Keep the primary action in one place; group secondary view controls. */
@media (max-width: 980px) {
  .toolbar { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 6px 8px; }
  .toolbar__left { min-width: 0; gap: 6px; }
  .toolbar h1 { font-size: 10px; letter-spacing: .12em; color: #91a89e; }
  .toolbar__left #start-random-match { min-width: 0; min-height: 28px; height: 28px; padding: 0 8px; font-size: 10px; border-color: #344653; background: #14212a; }
  .toolbar .controls { display: grid; grid-template-columns: 32px 42px 32px minmax(0, 1fr) 82px; grid-template-rows: 30px 30px; gap: 4px; align-items: stretch; }
  .controls .turn-state { grid-column: 1 / 5; grid-row: 1; display: flex; gap: 8px; align-items: center; min-width: 0; margin: 0; padding: 0; border: 0; }
  .turn-state span { font-size: 12px; }
  .turn-state strong { font-size: 10px; }
  .turn-state small { font-size: 8px; margin-left: auto; }
  .controls #confirm-actions { grid-column: 5; grid-row: 1 / 3; min-width: 0; height: auto; min-height: 0; padding: 6px; font-size: 12px; border-radius: 8px; }
  .controls #zoom-out { grid-column: 1; grid-row: 2; border-radius: 6px 0 0 6px; }
  .controls #zoom-label { grid-column: 2; grid-row: 2; min-width: 0; display: grid; place-items: center; border-radius: 0; font-size: 10px; }
  .controls #zoom-in { grid-column: 3; grid-row: 2; border-radius: 0 6px 6px 0; }
  .controls #toggle-action-emphasis { grid-column: 4; grid-row: 2; margin: 0 0 0 4px; font-size: 9px; }
  .controls #zoom-out, .controls #zoom-in, .controls #zoom-label, .controls #toggle-action-emphasis { min-width: 0; min-height: 30px; height: 30px; padding: 0 4px; }
  .controls .matchmaking-status { grid-column: 1 / -1; grid-row: 3; min-width: 0; padding: 4px; font-size: 10px; }
}
/* Fit the battle to the browser's visible height, including mobile browser bars. */
@media (max-width: 980px) {
  html { height: 100%; min-height: 0; overflow: hidden; }
  body { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  .battle-layout { min-height: 0; grid-template-rows: auto minmax(0, 1fr) auto; }
  body .battle-layout > .viewport { min-height: 0; }
  .toolbar { grid-template-columns: 30px 40px 30px minmax(0, 1fr) 94px; grid-template-rows: 28px 28px; gap: 3px; padding: 4px 6px; }
  .toolbar__left, .toolbar .controls { display: contents; }
  .toolbar__left > div { display: none; }
  .toolbar__left #start-random-match { grid-column: 5; grid-row: 2; font-size: 8px; padding: 0 2px; }
  .controls #confirm-actions { grid-row: 1; font-size: 11px; }
  .controls #zoom-out, .controls #zoom-in, .controls #zoom-label, .controls #toggle-action-emphasis { height: 28px; min-height: 28px; }
  .controls .turn-state { gap: 5px; }
  .statusbar { min-height: 0; height: 18px; padding: 2px 6px; flex-wrap: nowrap; overflow: hidden; }
  .statusbar #action-info { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .statusbar #tile-info { font-size: 8px; white-space: nowrap; }
  .roster .unit-card .chip-button { min-height: 16px; height: 16px; }
  .roster .unit-card__stats > span { flex-wrap: nowrap; }
  .roster .unit-card__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .roster .unit-card__identity-row em { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .processing-order { display: flex; flex-direction: column; max-height: calc(100% - 12px); max-width: min(210px, 58%); overflow: hidden; padding: 4px; }
  .processing-order header { flex: 0 0 auto; margin-bottom: 3px; gap: 4px; }
  .processing-order header strong { font-size: 10px; }
  .processing-order header small { font-size: 8px; }
  .processing-order ol { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overscroll-behavior: contain; }
  .processing-order li { min-height: 22px; padding: 2px 4px; font-size: 9px; }
  .processing-order.is-collapsed header { margin-bottom: 0; }
  .operation-timer { min-width: 54px; padding: 3px 5px; }
  .operation-timer > span { font-size: 8px; }
  .operation-timer > strong { font-size: 17px; }
  .operation-timer button { height: 22px; min-height: 22px; padding: 1px 4px; font-size: 8px; }
  .field-corner-label { font-size: 8px; padding: 3px; }
}
@media (max-width: 980px) and (orientation: landscape) {
  body .battle-layout .roster__pairs { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
  .roster .unit-card--detailed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 4px; }
  .roster .unit-card__identity-row { grid-column: 1 / -1; }
  .roster .unit-card--detailed .unit-card__status-row { margin: 0; }
  .roster .unit-card--detailed .unit-card__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .roster .unit-card--detailed .chips { margin: 0; align-content: center; }

  .roster .unit-card--concealed { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 1px 3px; }
  .roster .unit-card--concealed .unit-card__top { display: contents; }
  .roster .unit-card--concealed .unit-card__portrait { grid-column: 1; grid-row: 1 / 3; align-self: center; }
  .roster .unit-card--concealed .unit-card__identity { grid-column: 2; }
  .roster .unit-card--concealed .chips { grid-column: 2; margin: 0; }
  .roster .unit-card--concealed .chip-button { min-height: 12px; height: 12px; font-size: 7px; }
  .toolbar__left #start-random-match { white-space: nowrap; font-size: 7px; }
}
/* Short browser viewports need denser rosters to retain an operable field. */
@media (max-width: 980px) and (max-height: 600px) {
  .battle-layout > .roster { zoom: .85; }
}
@media (max-width: 980px) and (max-height: 400px) and (orientation: landscape) {
  .battle-layout > .roster { zoom: .7; }
}
@media (max-width: 980px) {
  .controls .turn-state { grid-column: 1 / -1; }
  .processing-order { max-height: calc(100% - 62px); }
}
/* Enemy summaries fit in a single strip; retain both chip buttons. */
@media (max-width: 980px) {
  body .battle-layout .roster__pairs:has(> .unit-card--concealed) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 2px;
  }
  .roster .unit-card--concealed { display: block; padding: 2px; }
  .roster .unit-card--concealed .unit-card__top {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 2px;
    align-items: center;
  }
  .roster .unit-card--concealed .unit-card__portrait {
    grid-column: auto;
    grid-row: auto;
    width: 12px;
    height: 12px;
  }
  .roster .unit-card--concealed .unit-card__identity { grid-column: auto; }
  .roster .unit-card--concealed .unit-card__identity strong {
    font-size: 9px;
    line-height: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .roster .unit-card--concealed .unit-card__identity span:empty { display: none; }
  .roster .unit-card--concealed .unit-card__identity span { font-size: 7px; line-height: 1.1; margin: 0; }
  .roster .unit-card--concealed .chips { margin-top: 1px; }
  .roster .unit-card--concealed .chip-button { padding: 0 1px; }
}
/* One compact row now that camera scale controls are removed. */
@media (max-width: 980px) {
  .toolbar { grid-template-columns: minmax(0, 1fr) 70px 96px; grid-template-rows: 30px; padding: 3px 6px; gap: 4px; }
  .controls .turn-state { grid-column: 1; grid-row: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 4px; }
  .turn-state span { grid-row: 1 / 3; font-size: 11px; }
  .turn-state strong { font-size: 9px; }
  .turn-state small { margin-left: 0; font-size: 7px; }
  .controls #toggle-action-emphasis { grid-column: 2; grid-row: 1; margin: 0; height: 30px; font-size: 8px; }
  .toolbar__left #start-random-match { grid-column: 3; grid-row: 1; height: 30px; font-size: 7px; }
  .controls .matchmaking-status { grid-column: 1 / -1; grid-row: 2; }
}
/* Card placement is shared with desktop in ally-card.css. */
@media (max-width: 980px) {
  .roster .unit-card__effects-button {
    height: 14px;
    min-width: 26px;
    padding: 2px 3px;
    font-size: 6px;
  }

  .roster .unit-card--concealed .unit-card__top {
    grid-template-columns: 12px minmax(0, 1fr) auto;
  }
}