/* The stage remains the unscaled coordinate space for every battle effect.
   Only the game page opts in; standalone animation previews are unchanged. */
.battle-game {
  --hud-height: 232px;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  color: #f7f0db;
}
.battle-game [hidden] { display: none !important; }
.battle-game .page-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  height: 100%;
  max-width: 1700px;
  min-height: 0;
  padding: 12px 16px;
  margin: 0 auto;
}
.battle-game .topbar { display: flex; margin: 0; gap: 12px; align-items: center; }
.battle-game .brand { min-width: 0; }
.battle-game .brand h1 { margin: 0; font-size: clamp(17px, 2vw, 25px); line-height: 1.15; }
.battle-game .brand p { margin: 4px 0 0; font-size: 10px; }
.battle-game .brand p span { color: #b8c4b8; }
.battle-game .topbar-controls { display: flex; flex-wrap: nowrap; gap: 6px; }
.battle-game .topbar-controls > * { width: auto; }
.battle-game .topbar .top-button { min-height: 34px; padding: 6px 12px; font-size: 11px; white-space: nowrap; }
.battle-game .main-grid { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; place-items: start center; overflow: auto; overscroll-behavior: contain; }
.battle-game .battle-console {
  position: relative;
  display: block;
  /* Match the pre-menu stage width: original page padding and 296px rail.
     Two extra border pixels preserve the original inner stage dimensions. */
  width: calc(min(1500px, 100vw) - clamp(28px, 4vw, 56px) - 294px);
  container-type: inline-size;
  min-height: 0;
  min-width: 0;
  border: 2px solid #8d835e;
  border-radius: 9px;
  box-shadow: 0 0 0 2px #0d1416, 0 10px 35px #0008;
}
.battle-game .battle-viewport {
  min-height: 0;
  min-width: 0;
  height: auto;
  aspect-ratio: 16 / 9;
}
/* Sprite sizes intentionally inherit the original vw/px rules in styles.css.
   Never reduce the artwork to make room for a menu. */
.battle-game .actor-nameplate { max-width: 160px; font-size: 10px; }
.battle-game .encounter-tag { top: 12px; left: 14px; font-size: 11px; padding: 7px 10px; }
.battle-game .message-strip { bottom: 10px; font-size: 12px; padding: 8px 12px; max-width: calc(100% - 24px); }
.battle-game .battle-hud {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  min-height: 0;
  min-width: 0;
  background: linear-gradient(125deg, #152c37 0%, #0c1923 62%, #172f39 100%);
  border-top: 2px solid #b5a26c;
  overflow: hidden;
  height: var(--hud-height);
}
.battle-game .party-window { display: grid; grid-template-rows: 25px minmax(0, 1fr); min-width: 0; min-height: 0; border-right: 1px solid #78949d70; padding: 0 9px 8px; }
.battle-game .party-window-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; color: #adbdc4; font-size: 10px; letter-spacing: .08em; }
.battle-game .party-window-heading span:last-child { font-size: 9px; letter-spacing: 0; }
.battle-game .party-status { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 5px; min-height: 0; border: 0; }
.battle-game .status-card {
  display: grid;
  grid-template-columns: minmax(90px, 1.05fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1.05fr);
  grid-template-rows: minmax(0, 1fr) 13px;
  align-content: stretch;
  align-items: center;
  gap: 2px 12px;
  min-width: 0;
  min-height: 0;
  padding: 6px 10px;
  border: 1px solid #607e8960;
  border-radius: 4px;
  color: inherit;
  text-align: left;
  font: inherit;
  background: #ffffff04;
  cursor: pointer;
}
.battle-game .status-card:last-child { border-right: 1px solid #607e8960; }
.battle-game .status-card.ready { border-color: #dab963aa; background: linear-gradient(90deg, #aa833a28, #63572410); }
.battle-game .status-card.commanding { border-color: #ffdc82; background: linear-gradient(90deg, #eac16c33, #64542422); box-shadow: inset 0 0 0 1px #ffdc8240; }
.battle-game .status-card.commanding::before { width: 3px; }
.battle-game .status-card[aria-disabled="true"] { cursor: default; }
.battle-game .status-name-row { display: grid; grid-template-columns: auto 1fr; gap: 2px 5px; grid-column: auto; }
.battle-game .status-name-row strong { grid-column: 2; grid-row: 1; font: 700 14px Georgia, serif; }
.battle-game .status-shortcut { grid-column: 1; grid-row: 1; font-size: 10px; color: #a9bec9; }
.battle-game .status-ready-label { grid-column: 1 / -1; color: #adc1ca; font-size: 9px; font-weight: 700; letter-spacing: .04em; }
.battle-game .ready .status-ready-label { color: #ffda75; }
.battle-game .status-stat, .battle-game .status-atb { display: block; min-width: 0; }
.battle-game .number-row { gap: 3px; margin-bottom: 4px; font-size: 11px; }
.battle-game .number-row strong { white-space: nowrap; font-size: 11px; font-weight: 500; }
.battle-game .hp-track, .battle-game .mp-track, .battle-game .atb-track { display: block; height: 5px; }
.battle-game .atb-label { margin: 0 0 4px; font-size: 9px; gap: 2px; letter-spacing: .03em; }
.battle-game .atb-track { height: 8px; }
.battle-game .atb-track i { transition: width 80ms linear; }
.battle-game .status-pills { grid-column: 1 / 3; grid-row: 2; display: flex; flex-wrap: nowrap; min-height: 0; overflow: hidden; gap: 3px; }
.battle-game .status-pill { padding: 0 3px; font-size: 9px; white-space: nowrap; }
.battle-game .status-selection-hint { grid-column: 3 / -1; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b7c7cf; font-size: 9px; text-align: right; }
.battle-game .status-card.target-choice { border-color: #a1fbe4; }
.battle-game .command-panel { min-height: 0; padding: 9px 12px 6px; grid-template-rows: 34px minmax(0, 1fr) 34px; gap: 5px; }
.battle-game .command-heading { margin: 0; min-height: 0; }
.battle-game .command-heading > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 12px; }
.battle-game .command-actor { font-size: 11px; font-weight: 700; letter-spacing: .06em; }
.battle-game .command-heading strong { margin: 0; font-family: inherit; font-size: 11px; color: #bfd0d7; }
.battle-game .back-button { flex: 0 0 auto; min-height: 30px; padding: 3px 10px; border: 1px solid #78949d70; border-radius: 3px; font-size: 11px; color: #fff2cb; }
.battle-game .command-grid { min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: stretch; gap: 6px; }
.battle-game .command-button, .battle-game .command-placeholder, .battle-game .submenu-button, .battle-game .target-button {
  min-height: 0;
  padding: 7px 10px;
  background: linear-gradient(130deg, #2f4c59b3, #172c38bd);
  border-color: #7298a66b;
  border-radius: 4px;
  font-size: 13px;
}
.battle-game .command-button strong, .battle-game .submenu-button strong { font-size: 13px; }
.battle-game .command-button small, .battle-game .submenu-button small { font-size: 10px; color: #c1d0d6; }
.battle-game .command-button:disabled, .battle-game .submenu-button:disabled, .battle-game .command-placeholder { opacity: .46; }
.battle-game .command-button:hover:enabled, .battle-game .submenu-button:hover:enabled, .battle-game .target-button:hover:enabled { border-color: #eacf84; background: #45616b; }
.battle-game .submenu { min-height: 0; max-height: none; height: 100%; overflow: auto; scrollbar-gutter: stable; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #b0a06b #172c38; }
.battle-game .submenu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; align-content: start; }
.battle-game .submenu-button, .battle-game .target-button { min-height: 46px; }
.battle-game .target-button { width: 100%; }
.battle-game .detail-line { min-height: 0; padding-top: 4px; border-top: 1px solid #728d9733; font-size: 10px; line-height: 1.4; color: #d1dde0; overflow: auto; overscroll-behavior: contain; }
.battle-game :is(button,a,select,input):focus-visible { outline: 2px solid #ffe095; outline-offset: -2px; }
.battle-game .ready-selectable { cursor: pointer; }
.battle-game .command-busy { display: grid; place-items: center; min-height: 0; padding: 12px; border: 1px solid #7c96a24d; border-radius: 4px; background: #142c3580; color: #cfdee2; font-size: 13px; text-align: center; }
.battle-game .target-button.selected-target { border-color: #aeffe9; background: #315650; box-shadow: inset 3px 0 #aeffe9; }
.battle-game .ready-selectable:hover { filter: drop-shadow(0 0 7px #ffe095); }
.battle-game .system-dialog { max-width: min(920px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; }
.battle-game .system-dialog .dialog-card { max-height: none; }
.battle-game .system-dialog .dialog-header { position: sticky; top: 0; z-index: 2; background: #17272e; }
.battle-game .system-dialog .dialog-footer { position: sticky; bottom: 0; z-index: 2; background: #17272e; }
.battle-game .tools-dialog { width: min(800px, calc(100vw - 24px)); padding: 0; }
.battle-game .tools-dialog .dialog-card { padding: 0; }
.battle-game .tools-dialog .dialog-header { position: sticky; top: 0; z-index: 2; padding: 18px 20px; background: #17272e; }
.battle-game .tools-dialog h2 { margin: 3px 0 0; }
.battle-game .tools-content { padding: 16px 20px; }
.battle-game .tools-settings { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.battle-game .tools-settings p { flex: 1 1 250px; margin: 0; color: #b7c7c9; font-size: 12px; line-height: 1.5; }
.battle-game .tools-actions, .battle-game .tools-previews { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.battle-game .tools-actions > * { flex: 1 1 40%; }
.battle-game .side-rail { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.battle-game .side-rail .rail-card:first-child { grid-column: 1 / -1; }
.battle-game .battle-log { max-height: 210px; overscroll-behavior: contain; }
.battle-game .result-card { max-height: calc(100dvh - 24px); overflow: auto; }
@media (max-width: 1050px) {
  .battle-game .status-card { grid-template-columns: minmax(64px, .8fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); gap: 2px 7px; padding: 5px 7px; }
  .battle-game .number-row { display: block; font-size: 9px; }
  .battle-game .number-row strong { display: block; font-size: 10px; }
  .battle-game .party-window-heading span:last-child { font-size: 8px; }
  .battle-game .command-button small { font-size: 9px; }
}
@media (max-width: 720px) {
  .battle-game { --hud-height: 248px; }
  .battle-game .page-shell { gap: 6px; padding: 7px; }
  .battle-game .brand p span { display: none; }
  .battle-game .topbar .top-button { padding: 6px 8px; font-size: 10px; }
  .battle-game .battle-hud { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .battle-game .party-window { padding: 0 5px 5px; }
  .battle-game .party-window-heading span:last-child { display: none; }
  .battle-game .status-card { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: 16px minmax(0, 1fr) 6px 10px; gap: 2px 6px; padding: 4px 6px; }
  .battle-game .status-name-row { grid-column: 1 / -1; display: flex; gap: 4px; }
  .battle-game .status-name-row strong { margin-right: auto; font-size: 12px; }
  .battle-game .status-ready-label { font-size: 8px; }
  .battle-game .number-row { display: flex; margin-bottom: 2px; }
  .battle-game .number-row strong { font-size: 9px; }
  .battle-game .status-atb { grid-column: 1 / -1; grid-row: 3; }
  .battle-game .atb-track { height: 6px; }
  .battle-game .atb-label { display: none; }
  .battle-game .status-selection-hint { display: none; }
  .battle-game .status-pills { display: flex; grid-column: 1 / -1; grid-row: 4; }
  .battle-game .status-pill { font-size: 8px; line-height: 9px; }
  .battle-game .status-card[aria-disabled="true"] .status-ready-label { color: #b7c7cf; }
  .battle-game .command-panel { padding: 6px; grid-template-rows: 38px minmax(0, 1fr) 36px; gap: 4px; }
  .battle-game .command-heading > div { display: block; }
  .battle-game .command-heading strong, .battle-game .command-actor { font-size: 10px; }
  .battle-game .command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .battle-game .command-button, .battle-game .command-placeholder { padding: 4px 6px; }
  .battle-game .command-button strong { font-size: 12px; }
  .battle-game .command-button small { display: none; }
  .battle-game .submenu-list { grid-template-columns: minmax(0, 1fr); }
  .battle-game .submenu-button, .battle-game .target-button { min-height: 42px; padding: 5px 6px; }
  .battle-game .submenu-button strong { font-size: 11px; }
  .battle-game .submenu-button small { font-size: 9px; }
  .battle-game .detail-line { font-size: 9px; }
}
@media (max-width: 430px) {
  .battle-game .topbar { gap: 4px; }
  .battle-game .brand h1 { max-width: 150px; font-size: 15px; }
  .battle-game .brand p { font-size: 9px; }
  .battle-game .topbar-controls { gap: 3px; }
  .battle-game .topbar .top-button { padding: 5px; font-size: 9px; }
  .battle-game .side-rail { grid-template-columns: minmax(0, 1fr); }
  .battle-game .message-strip { font-size: 10px; }
  .battle-game .encounter-tag { font-size: 9px; }
}
@media (max-height: 640px) and (min-width: 721px) {
  .battle-game { --hud-height: 188px; }
  .battle-game .page-shell { gap: 6px; padding: 7px 10px; }
  .battle-game .brand p { display: none; }
  .battle-game .party-window { grid-template-rows: 21px minmax(0, 1fr); padding-bottom: 5px; }
  .battle-game .status-card { grid-template-rows: minmax(0, 1fr) 10px; padding: 3px 7px; }
  .battle-game .command-panel { grid-template-rows: 28px minmax(0, 1fr) 29px; gap: 4px; padding-top: 5px; }
  .battle-game .command-button { padding: 4px 7px; }
  .battle-game .command-button small { display: none; }
}
@media (max-height: 440px) {
  .battle-game { --hud-height: 153px; }
  .battle-game .page-shell { padding: 4px 6px; gap: 4px; }
  .battle-game .topbar .top-button { min-height: 27px; }
  .battle-game .brand p { display: none; }
  .battle-game .party-window { grid-template-rows: 17px minmax(0, 1fr); }
  .battle-game .status-card { grid-template-columns: minmax(56px, .95fr) minmax(0, 1fr) minmax(0, .8fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 9px; gap: 1px 5px; padding: 2px 6px; }
  .battle-game .status-name-row { display: grid; grid-template-columns: auto 1fr; grid-column: 1; grid-row: 1; gap: 1px 3px; }
  .battle-game .status-name-row strong { font-size: 11px; line-height: 1.1; }
  .battle-game .status-ready-label { font-size: 7px; line-height: 1; }
  .battle-game .status-hp { grid-column: 2; grid-row: 1; }
  .battle-game .status-mp { grid-column: 3; grid-row: 1; }
  .battle-game .number-row { display: flex; font-size: 7px; margin-bottom: 2px; }
  .battle-game .number-row strong { font-size: 8px; }
  .battle-game .status-atb { grid-column: 4; grid-row: 1; }
  .battle-game .atb-label { display: flex; font-size: 7px; margin-bottom: 2px; }
  .battle-game .atb-track { height: 6px; }
  .battle-game .status-selection-hint { display: none; }
  .battle-game .status-pills { display: flex; grid-column: 1 / -1; grid-row: 2; }
  .battle-game .status-pill { font-size: 7px; line-height: 8px; }
  .battle-game .command-panel { grid-template-rows: 24px minmax(0, 1fr) 25px; padding: 4px 8px; gap: 3px; }
  .battle-game .command-button small { display: none; }
  .battle-game .message-strip { bottom: 3px; padding: 3px 8px; font-size: 10px; }
  .battle-game .encounter-tag { top: 5px; padding: 3px 7px; font-size: 10px; }
}

@media (max-width: 1080px) {
  .battle-game .battle-console { width: calc(100vw - clamp(28px, 4vw, 56px) + 2px); }
}
@media (max-width: 760px) {
  .battle-game .battle-console { width: calc(100vw - 14px); }
}
/* Desktop menus sit on the existing lower edge of the 16:9 stage. The original
   bottom formation anchors are at 79%, leaving the lower fifth for the HUD.
   Lists open upward, without reflowing, cropping, or scaling the battlefield. */
@media (min-width: 901px) {
  .battle-game .battle-hud { position: absolute; inset: auto 0 0; height: 20%; z-index: 30; overflow: visible; }
  .battle-game .actor-nameplate { bottom: 0; }
  .battle-game .message-strip { inset: 12px 12px auto auto; width: auto; max-width: calc(100% - 240px); min-height: 28px; transform: none; padding: 5px 10px; font-size: 11px; }
  .battle-game .party-window { grid-template-rows: 14px minmax(0, 1fr); padding: 0 6px 4px; }
  .battle-game .party-window-heading { font-size: 8px; }
  .battle-game .party-window-heading span:last-child { font-size: 8px; }
  .battle-game .party-status { gap: 3px; }
  .battle-game .status-card { grid-template-columns: minmax(66px, .85fr) minmax(0, 1fr) minmax(0, .85fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 3px 8px; padding: 2px 7px; }
  .battle-game .status-name-row { display: grid; grid-column: auto; grid-row: auto; gap: 0 4px; }
  .battle-game .status-name-row strong { font-size: 12px; line-height: 1.1; }
  .battle-game .status-ready-label { font-size: 8px; line-height: 1.1; }
  .battle-game .status-pills, .battle-game .status-selection-hint { display: none; }
  .battle-game .status-hp, .battle-game .status-mp, .battle-game .status-atb { grid-column: auto; grid-row: auto; }
  .battle-game .number-row { display: flex; margin-bottom: 2px; font-size: 9px; }
  .battle-game .number-row strong { font-size: 10px; }
  .battle-game .atb-label { display: flex; margin-bottom: 2px; font-size: 8px; }
  .battle-game .hp-track, .battle-game .mp-track { height: 4px; }
  .battle-game .atb-track { height: 6px; }
  .battle-game .command-panel { padding: 4px 8px; grid-template-rows: 19px minmax(0, 1fr) 20px; gap: 3px; }
  .battle-game .command-heading { min-height: 0; }
  .battle-game .command-heading strong, .battle-game .command-actor { font-size: 10px; }
  .battle-game .command-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
  .battle-game .command-button, .battle-game .command-placeholder { padding: 2px 7px; }
  .battle-game .command-button strong { font-size: 12px; }
  .battle-game .command-button small { display: none; }
  .battle-game .detail-line { font-size: 9px; padding-top: 2px; }
  .battle-game .back-button { min-height: 25px; }
  .battle-game .command-panel:has(#submenu:not([hidden])):not([data-menu="target"]) {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: min(290px, 30cqw);
    grid-template-rows: 30px minmax(0, 1fr) 34px;
    padding: 8px;
    border: 1px solid #b5a26c;
    border-radius: 6px 0 0;
    background: linear-gradient(125deg, #152c37fa, #0c1923fa);
    box-shadow: 0 -5px 18px #0006;
  }
  .battle-game .command-panel[data-menu="target"] .submenu-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .battle-game .command-panel[data-menu="target"] .target-button { min-height: 40px; padding: 3px 7px; }
}
@media (max-width: 900px) {
  /* Small panes retain the same stage/art size. An exceptionally short pane may
     scroll this game region, while the menu remains pinned to its bottom. */
  .battle-game .battle-console { overflow: visible; }
  .battle-game .battle-hud { position: sticky; bottom: 0; z-index: 30; }
  .battle-game .message-strip { top: 42px; bottom: auto; min-height: 25px; padding: 4px 8px; font-size: 10px; }
}