/* Keep touch targets inside the battle and dialogue, above the world controls. */
@media (pointer:coarse), (max-width:760px), (max-height:600px) and (max-width:1300px) {
  #screen #battle.emerald-battle {
    inset:0; width:100%; height:100%; max-width:100%; max-height:100%; box-sizing:border-box;
    min-width:0;min-height:0;overflow:hidden;overscroll-behavior:none;
    grid-template-rows:minmax(0,1fr) minmax(128px,42%);
    font:13px/1.25 system-ui,sans-serif;
  }
  #screen #battle.emerald-battle .battle-field { height:auto;min-height:0;min-width:0;overflow:hidden; }
  #screen #battle.emerald-battle .health-box { width:40%; padding:3px 6px; font-size:clamp(10px,1.8cqw,14px); }
  #screen #battle.emerald-battle .hp-line { margin-top:2px; }
  #screen #battle.emerald-battle progress { height:8px; }
  #screen #battle.emerald-battle .ally { bottom:36%;height:43%; }
  #screen #battle.emerald-battle .enemy { top:22%;height:50%; }
  #screen #battle.emerald-battle .battle-bottom { min-height:0;min-width:0;max-height:100%;overflow:hidden;box-sizing:border-box;gap:3px;padding:3px;grid-template-columns:minmax(0,34fr) minmax(0,66fr); }
  #screen #battle.emerald-battle .battle-log { min-height:0;padding:5px;font:12px/1.3 system-ui,sans-serif; }
  #screen #battle.emerald-battle .battle-actions { min-height:0;min-width:0;height:100%;gap:3px;padding:0;align-content:stretch;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);overflow:hidden; }
  #screen #battle.emerald-battle .battle-actions button { margin:0;min-width:0;min-height:0;max-height:100%;padding:2px 4px;font:600 clamp(10px,1.8cqw,13px)/1.15 system-ui,sans-serif;overflow-wrap:anywhere;overflow:hidden; }
  #screen #battle .capture-notice { font:10px/1.2 system-ui,sans-serif;margin:0;bottom:1%; }
  #screen #campaign-scene:not(.campaign-large):not(.birch-intro),
  #screen #dialog, #screen #cinematic:not(:has(.pvp-field)) {
    inset:auto 6px max(var(--dialog-controls-bottom,160px),env(safe-area-inset-bottom));height:auto;
    min-height:0;max-height:min(48%,var(--dialog-available-height,48%));
    box-sizing:border-box;padding:8px;overflow:auto;font:14px/1.35 system-ui,sans-serif;
  }
  #screen #campaign-scene:not(.birch-intro)>p { font:14px/1.35 system-ui,sans-serif;margin:5px 0; }
  #screen #campaign-scene button, #screen #dialog button { min-height:36px; }
  #screen #pvp:not([hidden]) { inset:0;max-width:100%;max-height:100%;box-sizing:border-box;overflow:auto;padding:6px;font:13px/1.3 system-ui,sans-serif; }
  #screen #pvp .battle-actions { gap:4px; }
  #screen #pvp .battle-actions :is(button,select) { min-width:0;max-width:100%;min-height:36px; }
  #screen #campaign-scene.birch-intro { grid-template-rows:7% minmax(0,1fr) minmax(0,28%) 12%;padding:8px; }
  #screen #campaign-scene.birch-intro>p { font:clamp(12px,2cqw,16px)/1.3 system-ui,sans-serif;padding:6px 10px;border-width:3px; }
  #screen #campaign-scene.birch-intro>button { min-height:30px;align-self:center; }
  #screen #campaign-scene.campaign-large { inset:0;height:100%;max-height:100%;box-sizing:border-box; }
  .campaign-starters { grid-template-columns:repeat(3,minmax(0,1fr)); }
  body.mobile-immersive #exit-immersive-btn { top:max(3px,env(safe-area-inset-top));right:max(3px,env(safe-area-inset-right));font-size:10px;padding:3px 5px;border-width:1px; }
}
@media (max-width:600px) and (orientation:portrait) {
  #screen #battle.emerald-battle { grid-template-rows:minmax(0,1fr) minmax(190px,40%); }
  #screen #battle.emerald-battle .battle-bottom { grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,30fr) minmax(0,70fr); }
  #screen #battle.emerald-battle .health-box { width:46%;font-size:11px; }
  #screen #battle.emerald-battle .combatant { width:39%; }
  #screen #battle.emerald-battle .ally { left:6%; }
  #screen #battle.emerald-battle .enemy { right:6%; }
}
@media (max-height:420px) and (orientation:landscape) {
  #screen #battle.emerald-battle .health-box { padding:2px 5px;font-size:10px;line-height:1.1; }
  #screen #battle.emerald-battle .health-box .hp-line { margin-top:1px; }
  #screen #battle.emerald-battle .ally { bottom:39%;height:46%; }
  #screen #battle.emerald-battle .enemy { top:24%;height:57%; }
  #screen #battle.emerald-battle .battle-log { font-size:11px;padding:4px; }
  #screen #battle .capture-notice { font-size:9px;padding:1px 3px; }
}