/* Battle windows share the player's game viewport, leaving the map visible. */
html body #screen #battle:is(.emerald-battle,.cinematic-battle) {
  position:absolute;inset:0!important;margin:auto!important;
  width:min(88%,1080px)!important;height:86%!important;
  max-width:calc(100% - 24px)!important;max-height:calc(100% - 24px)!important;
  min-width:0!important;min-height:0!important;box-sizing:border-box;
  border:1px solid #aac5a5b3!important;border-radius:14px!important;
  box-shadow:0 6px 18px #0004,inset 0 1px #e8e8b820!important;
  isolation:isolate;overscroll-behavior:contain;
}
html body #screen #battle:is(.emerald-battle,.cinematic-battle) {overflow:hidden;}
html body #screen #battle:is(.emerald-battle,.cinematic-battle)[hidden] {display:none!important;}
html[data-mobile-client=true] body #screen #battle:is(.emerald-battle,.cinematic-battle) {
  width:92%!important;height:86%!important;border-radius:12px!important;
  max-width:calc(100% - 20px)!important;max-height:calc(100% - 28px)!important;
}
@media(orientation:landscape) {
 html[data-mobile-client=true] body #screen #battle:is(.emerald-battle,.cinematic-battle) {width:94%!important;height:88%!important;}
 html[data-mobile-client=true] body #screen #battle.emerald-battle {grid-template-columns:minmax(0,1fr) minmax(190px,30%);}
 html[data-mobile-client=true] body #screen #battle.emerald-battle .battle-bottom {padding:6px;gap:5px;}
}
/* Existing battle locks own input and movement outside the window. */
body:has(#battle:is(.emerald-battle,.cinematic-battle):not([hidden])) #touch-controls {display:none!important;}

/* The framebuffer layout owns dimensions once installed, including touch
   devices. Keep this after the generic mobile window rules. */
html body #screen #battle.emerald-battle.native-aspect-battle,
html[data-mobile-client=true] body #screen #battle.emerald-battle.native-aspect-battle {
  inset:var(--native-top-inset,0px) 0 0!important;
  width:var(--native-battle-width)!important;
  height:var(--native-battle-height)!important;
  grid-template-rows:var(--native-field-height) var(--native-command-height)!important;
}

/* Landscape phones reserve a separate HUD column: neither health box covers
   the native framebuffer or the fallback Pokemon sprites. */
html body #screen #battle.emerald-battle.native-landscape-battle {--landscape-hud:clamp(140px,28%,220px)}
html body #screen #battle.emerald-battle.native-landscape-battle .battle-field>.emerald-native-stage {
 left:var(--landscape-hud)!important;right:0!important;top:0!important;bottom:0!important;
 width:calc(100% - var(--landscape-hud))!important;height:100%!important;object-fit:contain!important;
}
html body #screen #battle.emerald-battle.native-landscape-battle .battle-field .health-box {
 left:6px!important;right:auto!important;width:calc(var(--landscape-hud) - 12px)!important;max-width:calc(var(--landscape-hud) - 12px)!important;
}
html body #screen #battle.emerald-battle.native-landscape-battle .battle-field .enemy-health {top:6px!important;bottom:auto!important}
html body #screen #battle.emerald-battle.native-landscape-battle .battle-field .ally-health {top:auto!important;bottom:6px!important}
html body #screen #battle.emerald-battle.native-landscape-battle .health-box strong {display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html body #screen #battle.emerald-battle.native-landscape-battle .capture-notice {top:auto!important;bottom:2px!important;right:2%!important;max-width:50%!important}
html body #screen #battle.emerald-battle.native-landscape-battle .battle-field .health-box {padding:3px 5px!important;line-height:1!important}
html body #screen #battle.emerald-battle.native-landscape-battle .health-box strong,
html body #screen #battle.emerald-battle.native-landscape-battle .health-box>span {font-size:11px!important;line-height:12px!important;margin:0!important}
html body #screen #battle.emerald-battle.native-landscape-battle .health-box .hp-line {margin:1px 0!important;height:8px!important}
html body #screen #battle.emerald-battle.native-landscape-battle .health-box .battle-xp {height:4px!important;margin:2px 0 0!important}
/* Four attacks share two equal columns; Back owns a separate short row.
   The command height is calculated by BattleLayout from the actual choices. */
html body #screen #battle.emerald-battle .battle-bottom:has(.battle-move-selection){grid-template-columns:minmax(0,30fr) minmax(0,70fr)!important;grid-template-rows:minmax(0,1fr)!important;min-height:0;box-sizing:border-box;padding:6px!important;gap:6px!important}
html body #screen #battle.emerald-battle.native-portrait-battle .battle-bottom:has(.battle-move-selection){grid-template-columns:minmax(0,1fr)!important;grid-template-rows:44px minmax(0,1fr)!important}
html body #screen #battle.emerald-battle .battle-actions.battle-move-selection{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-template-rows:repeat(var(--battle-move-rows,2),minmax(0,1fr)) 32px!important;grid-auto-rows:minmax(0,1fr)!important;align-content:stretch!important;align-items:stretch!important;gap:5px!important;padding:0!important;margin:0!important;height:100%!important;min-height:0!important;border:0!important;box-sizing:border-box;overflow:hidden!important;background:transparent!important}
html body #screen #battle.emerald-battle .battle-actions.battle-move-selection button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;width:100%;height:100%!important;min-width:0!important;min-height:0!important;max-height:100%!important;padding:4px 6px!important;margin:0!important;box-sizing:border-box;border:1px solid #809c94!important;border-radius:7px!important;background:linear-gradient(#f6f6df,#e1eacb)!important;color:#203f39!important;font:700 12px/1.15 system-ui,sans-serif!important;white-space:normal!important;overflow-wrap:anywhere;overflow:hidden!important;box-shadow:inset 0 -2px #b7c9a8}
html body #screen #battle.emerald-battle .battle-actions.battle-move-selection button[data-battle-back]{grid-column:1/-1;flex-direction:row;background:#c4d3c4!important;box-shadow:none}
html body #screen #battle.emerald-battle .battle-actions.battle-move-selection::after{display:none!important}
html body #screen #battle.emerald-battle .battle-move-name{font:inherit;max-width:100%}.battle-move-pp{font:600 10px/1.1 system-ui;white-space:nowrap}.battle-move-reason{font:500 10px/1.1 system-ui;max-width:100%}
html body #screen #battle.emerald-battle .battle-actions.battle-move-selection button:disabled{opacity:.65;box-shadow:none}
html body #screen #battle.emerald-battle .battle-actions.battle-move-selection button:focus-visible{outline:2px solid #327e91!important;outline-offset:-3px}

/* Doubles use both sides for the four health cards on landscape phones. */
html body #screen #battle.double-battle.native-landscape-battle .double-field>.emerald-native-stage{left:24%!important;right:24%!important;width:52%!important;object-position:center!important}
html body #screen #battle.double-battle.native-landscape-battle .double-health{width:23%!important;font-size:11px!important;padding:3px 5px!important}
html body #screen #battle.double-battle.native-landscape-battle .double-health.double-enemy{left:4px!important;right:auto!important}
html body #screen #battle.double-battle.native-landscape-battle .double-health.double-ally{right:4px!important;left:auto!important}
html body #screen #battle.double-battle.native-landscape-battle .double-health.slot-0{top:4px!important;bottom:auto!important}
html body #screen #battle.double-battle.native-landscape-battle .double-health.slot-1{top:auto!important;bottom:4px!important}
html body #screen #battle.double-battle.native-landscape-battle .double-sprite.double-ally.slot-0{left:32%!important}
html body #screen #battle.double-battle.native-landscape-battle .double-sprite.double-ally.slot-1{left:44%!important}
html body #screen #battle.double-battle.native-landscape-battle .double-sprite.double-enemy.slot-0{left:59%!important}
html body #screen #battle.double-battle.native-landscape-battle .double-sprite.double-enemy.slot-1{left:69%!important}

html body #screen #battle.emerald-battle.native-aspect-battle{grid-template-columns:minmax(0,1fr)!important;max-height:calc(100% - var(--native-top-inset,0px) - 8px)!important}
html body #screen #battle.emerald-battle.native-aspect-battle .battle-field{grid-column:1;grid-row:1;min-height:0}
html body #screen #battle.emerald-battle.native-aspect-battle .battle-bottom{grid-column:1;grid-row:2;min-height:0}
html body #screen #battle.emerald-battle.native-landscape-battle .health-box{z-index:8;visibility:visible!important;opacity:1!important}

/* Horde cards span the top; the four-slot native layout must not override
   their fractional widths or move the second enemy into an ally HUD corner. */
html body #screen #battle.double-battle.horde-battle .double-health.double-enemy {
 left:calc(var(--slot)*100%/var(--horde-count) + .5%)!important;right:auto!important;
 top:6px!important;bottom:auto!important;width:calc(100%/var(--horde-count) - 1%)!important;
 max-width:calc(100%/var(--horde-count) - 1%)!important;
}
html body #screen #battle.double-battle.horde-battle .double-health.double-ally {
 right:2%!important;left:auto!important;top:auto!important;bottom:6px!important;width:34%!important;
}
html body #screen #battle .opponent-party small {display:inline!important;position:static!important;color:#344c40!important;font-size:10px!important;margin-left:3px!important;overflow:visible!important}

html body #screen #battle.double-battle.horde-battle.native-landscape-battle .double-sprite.double-enemy {
 left:calc((var(--slot) + .5)*100%/var(--horde-count))!important;top:64%!important;
 width:calc(96%/var(--horde-count))!important;height:33%!important;
}

/* Raid readiness must not consume the entire portrait battle message row. */
html body #screen #battle.raid-battle.native-portrait-battle .battle-bottom {grid-template-rows:84px minmax(0,1fr)!important}
html body #screen #battle.raid-battle.native-portrait-battle .raid-log .battle-log {min-height:50px!important;box-sizing:border-box}