/* This stylesheet is evaluated INSIDE a fixed-size browsing context.
   Parent scaling never changes these coordinates, proportions, or hit tests. */
.battle-game { width: 100vw; height: 100vh; min-height: 0; overflow: hidden; }
.battle-game .page-shell { position: relative; display: block; width: 100%; height: 100%; max-width: none; padding: 0; margin: 0; }
.battle-game .main-grid { display: block; width: 100%; height: 100%; overflow: hidden; }
.battle-game .battle-console { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; overflow: hidden; box-shadow: none; }
/* The taller screen adds menu space, not vertical stretching of the artwork. */
.battle-game .battle-viewport { width: 100%; height: 648px; aspect-ratio: 16 / 9; }
.battle-game .topbar { position: absolute; top: 10px; right: 12px; z-index: 60; }
.battle-game .brand { display: none; }
.battle-game .topbar .top-button { min-height: 30px; padding: 5px 10px; font-size: 11px; background: #16262cf2; }
.battle-game .topbar .top-button.accent { background: linear-gradient(#f6bc50, #db8927); }
.battle-game .party-sprite { width: calc(176px * var(--aot-sprite-canvas-ratio, 1)); }
.battle-game .enemy-sprite { width: calc(min(223px, var(--enemy-sprite-width, 180px)) * var(--aot-sprite-canvas-ratio, 1)); }
.battle-game .enemy-sprite-fallback { width: 108px; }
.battle-game .encounter-tag { top: 12px; left: 12px; }
.battle-game .message-strip { top: 48px; right: 12px; bottom: auto; left: auto; max-width: 680px; width: auto; transform: none; }
.battle-game .battle-hud { position: absolute; inset: auto 0 0; width: 100%; height: 152px; z-index: 30; }
.battle-game .party-window { grid-template-rows: 15px minmax(0, 1fr); }
.battle-game .status-card { position: relative; }
.battle-game .status-pills { display: flex; position: absolute; left: 95px; bottom: 1px; max-width: calc(100% - 105px); height: 10px; pointer-events: none; }
.battle-game .status-pill { font-size: 7px; line-height: 8px; padding: 0 3px; background: #142934; }
.battle-game .status-card:has(.status-pill) .status-stat,
.battle-game .status-card:has(.status-pill) .status-atb { align-self: start; }
.battle-game .command-panel:has(#submenu:not([hidden])):not([data-menu="target"]) { height: 290px; }
.battle-game .tools-dialog { width: 800px; }
/* Every modal belongs to this same screen, not to the outer browser window. */
.battle-game .system-dialog { max-width: calc(100vw - 24px); max-height: calc(100vh - 24px); }