/* One continuous battlefield. Keep the existing timeline and combat controls. */
body.battle-active .battle-shell.immersive-battle .arena {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 700px;
  padding: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgb(2 6 12 / 18%), rgb(2 6 12 / 28%)), var(--battle-zone-image) center / cover no-repeat;
}
body.battle-active .battle-shell.immersive-battle .combatants {
  --battle-portrait-size: clamp(92px, 26vw, 128px);
  display: grid;
  flex: 1 1 auto;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: stretch;
  gap: 14px;
  min-height: 700px;
  margin: 0;
  padding: 18px 18px 106px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
body.battle-active .battle-shell.immersive-battle.timeline-battle .combatants { padding-top: 68px; }
body.battle-active .battle-shell.immersive-battle .party-line,
body.battle-active .battle-shell.immersive-battle .enemy-line {
  position: relative;
  top: auto;
  display: grid;
  grid-template: repeat(3, minmax(0, 1fr)) / minmax(0, 1fr);
  align-content: stretch;
  align-items: center;
  gap: 12px;
  min-height: 0;
  padding: 0;
}
body.battle-active .battle-shell.immersive-battle .party-line .party-member {
  position: relative;
  inset: auto;
  display: grid;
  grid-template: auto auto / var(--battle-portrait-size) minmax(0, 1fr);
  align-content: center;
  align-items: end;
  column-gap: 4px;
  width: calc(100% - 18px);
  min-width: 0;
  padding: 0;
  transform: none;
}
body.battle-active .battle-shell.immersive-battle .party-line .formation-rear-upper { grid-row: 1; }
body.battle-active .battle-shell.immersive-battle .party-line .formation-front-center { grid-row: 2; left: 18px; }
body.battle-active .battle-shell.immersive-battle .party-line .formation-rear-lower { grid-row: 3; }
body.battle-active .battle-shell.immersive-battle .party-line.party-count-1 { grid-template-rows: 1fr; }
body.battle-active .battle-shell.immersive-battle .party-line.party-count-1 .party-member { grid-row: 1; left: 1px; }
body.battle-active .battle-shell.immersive-battle .party-line.party-count-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
body.battle-active .battle-shell.immersive-battle .party-line.party-count-2 .formation-front-center { grid-row: 1; }
body.battle-active .battle-shell.immersive-battle .party-line.party-count-2 .formation-rear-lower { grid-row: 2; }
body.battle-active .battle-shell.immersive-battle .party-member .actor-mark {
  grid-area: 1 / 1 / 3 / 2;
  width: var(--battle-portrait-size);
  height: var(--battle-portrait-size);
  margin: 0;
}
body.battle-active .battle-shell.immersive-battle .party-member .actor-mark .actor-image { width: 100%; height: 100%; object-fit: contain; }
body.battle-active .battle-shell.immersive-battle .party-member .combatant-heading {
  grid-area: 1 / 2;
  display: block;
  height: auto;
  min-height: 0;
  min-width: 0;
  padding: 2px 0 4px;
  text-align: left;
}
/* Keep room between allies even when there are no states; status changes never reflow the formation. */
body.battle-active .battle-shell.immersive-battle .party-line.party-count-3 { row-gap: 40px; }
/* Ally state chips stay outside the name/vitals grid so effects cannot move portraits or meters. */
body.battle-active .battle-shell .party-member .ally-name-states { position: absolute; top: calc(100% + 2px); left: -4px; right: auto; display: flex; flex-wrap: wrap; align-content: flex-start; align-items: flex-start; justify-content: flex-start; gap: 0; width: calc(100% + 8px); max-width: none; height: auto; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; white-space: normal; }
body.battle-active .battle-shell .party-member .ally-name-state { flex: 0 0 auto; display: inline-flex; align-items: center; width: max-content; max-width: none; height: 10px; padding: 0; border-radius: 2px; font-size: 9px; line-height: 1; white-space: nowrap; overflow: visible; text-overflow: clip; color: #b9f4c9; background: #123329; outline: 1px solid #10141a66; outline-offset: -1px; text-shadow: 0 1px 2px #000; }
body.battle-active .battle-shell .party-member .ally-name-state.negative { color: #ffd0d0; background: #491c25; }
body.battle-active .battle-shell .party-member .ally-name-state.neutral { color: #cce5ff; background: #1b304a; }
.battle-party-status .battle-party-state { flex: 0 0 auto; max-width: none; overflow: visible; text-overflow: clip; }
body.battle-active .battle-shell.immersive-battle .party-member .enemy-target-marker { display: none; }
body.battle-active .battle-shell.immersive-battle .battle-name-line { min-height: 0; flex-wrap: wrap; justify-content: flex-start; gap: 3px; }
body.battle-active .battle-shell.immersive-battle .party-member .actor-name { height: auto; padding: 2px 4px; font-size: .72rem; line-height: 1.25; }
body.battle-active .battle-shell.immersive-battle .battlefield-vitals {
  grid-area: 2 / 2;
  display: grid;
  gap: 1px;
  min-width: 0;
  padding: 5px 4px;
  border-radius: 4px;
  background: transparent;
}
body.battle-active .battle-shell.immersive-battle .battlefield-vitals .resource-meter {
  grid-template-columns: 11px clamp(24px, 7vw, 36px) max-content;
  gap: 3px;
  width: 100%;
  margin: 0;
  font-size: .59rem;
}
body.battle-active .battle-shell.immersive-battle .battlefield-vitals .bar-value { letter-spacing: -.03em; }
body.battle-active .battle-shell.immersive-battle .battlefield-vitals .bar-icon { width: 11px; height: 11px; }
body.battle-active .battle-shell.immersive-battle .battlefield-vitals .bar { width: 100%; height: 7px; background: transparent; }
body.battle-active .battle-shell.immersive-battle .battlefield-vitals .bar::-webkit-progress-bar { background: transparent; }
body.battle-active .battle-shell.immersive-battle .battle-acting-label { top: -4px; bottom: auto; right: auto; left: 4px; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy {
  --enemy-art-scale: 1;
  grid-area: auto;
  /* Reserve name and HP rows; only the artwork shrinks on short screens. */
  grid-template-rows: max-content minmax(0, 1fr) max-content;
  align-self: center;
  justify-self: end;
  width: calc(100% - 18px);
  height: 100%;
  max-height: calc(var(--battle-portrait-size) * 1.1 + 40px);
  min-height: 0;
  padding: 0;
}
body.battle-active .battle-shell.immersive-battle .enemy-line :is(.formation-slot-1, .formation-slot-3) { justify-self: start; }
body.battle-active .battle-shell.immersive-battle .enemy-line.enemy-count-1 { grid-template-rows: 1fr; }
body.battle-active .battle-shell.immersive-battle .enemy-line.enemy-count-2 { grid-template-rows: repeat(2, minmax(0, 1fr)); }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .actor-mark {
  width: min(100%, calc(var(--battle-portrait-size) * 1.18));
  height: auto;
  max-height: calc(var(--battle-portrait-size) * 1.1);
  min-height: 0;
  align-self: stretch;
  margin: 0 auto 4px;
}
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .actor-mark .actor-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* Match visible artwork, rather than the transparent source canvas, to party height. */
body.battle-active .battle-shell.immersive-battle .party-line .party-member { grid-template-columns: calc(var(--battle-portrait-size) * .92) minmax(0, 1fr); }
body.battle-active .battle-shell.immersive-battle .party-member .actor-mark { width: calc(var(--battle-portrait-size) * .92); height: calc(var(--battle-portrait-size) * .92); }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy { --enemy-body-size: .95; --enemy-art-scale: 1; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy-size-compact { --enemy-body-size: .8; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy-size-large { --enemy-body-size: 1.06; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy-size-giant { --enemy-body-size: 1.18; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .actor-mark { width: min(100%, calc(var(--battle-portrait-size) * 1.35)); max-height: calc(var(--battle-portrait-size) * var(--enemy-body-size)); }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .actor-mark[data-enemy-body-kind="human"] { --enemy-body-size: .95; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .actor-mark[data-enemy-art-normalized] .actor-image { position: absolute; inset: auto; max-width: none; max-height: none; object-fit: fill; transform: none; pointer-events: none; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .actor-mark[data-enemy-art-normalized] .actor-image.enemy-companion-art { transform: scaleX(-1); transform-origin: center; }
/* Reserve state space even while empty, without changing the formation's 18px stagger. */
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy { --enemy-state-space: 32px; --enemy-state-width: 30px; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .combatant-heading { position: static; margin-right: var(--enemy-state-space); }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .battle-name-line { position: static; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .actor-name { padding: 0 18px; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .actor-mark { width: calc(100% - var(--enemy-state-space)); margin-left: 0; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .enemy-resource-meter { width: calc(100% - var(--enemy-state-space)); margin-left: 0; }
/* A permanent footer keeps single-line status chips out of the artwork and HP rows. */
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy { --enemy-status-row: 18px; max-height: calc(var(--battle-portrait-size) * 1.1 + 40px + var(--enemy-status-row)); padding-bottom: var(--enemy-status-row); }
/* The status band sits below the HP bar without affecting the actor grid. */
body.battle-active .battle-shell.immersive-battle .combatants { container-type: inline-size; }
/* Start statuses near the 48px HP bar plus its compact value, without moving the unit. */
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .enemy-name-states { top: calc(100% - var(--enemy-status-row) + 8px); bottom: auto; right: -18px; left: max(0px, calc((100% - var(--enemy-state-space) - 76px) / 2)); display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: flex-start; gap: 0; width: auto; max-width: none; height: auto; max-height: none; overflow: visible; container: none; transform: none; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy.formation-slot-2 .enemy-name-states { right: 0; }
body.battle-active .battle-shell.immersive-battle .enemy-line:not(.enemy-count-3) .enemy-name-states { width: auto; right: 0; }
@media (min-width: 701px) {
  body.battle-active .battle-shell.immersive-battle .enemy-line { container-type: inline-size; }
  body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .enemy-name-states { width: auto; }
}

body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .enemy-name-states > .enemy-name-state { display: inline-flex; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; justify-content: center; width: max-content; max-width: none; min-height: 10px; height: 10px; padding: 0; border: 0; border-radius: 2px; font-size: 9px; line-height: 1; white-space: nowrap; outline: 1px solid #10141a66; outline-offset: -1px; text-shadow: 0 1px 2px #000; }
/* Two-enemy formations use the same left-to-right status rows. */
@media (max-width: 700px) {
  body.battle-active .battle-shell.immersive-battle .enemy-line.enemy-count-2 .enemy .enemy-name-states.enemy-states-dense { top: calc(100% - var(--enemy-status-row) + 8px); right: 0; display: flex; width: auto; height: auto; font-size: 0; line-height: 9px; white-space: normal; text-align: left; }
  body.battle-active .battle-shell.immersive-battle .enemy-line.enemy-count-2 .enemy .enemy-states-dense::before { content: none; }
  body.battle-active .battle-shell.immersive-battle .enemy-line.enemy-count-2 .enemy .enemy-states-dense > .enemy-name-state { min-height: 9px; height: 9px; vertical-align: top; }
}
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .enemy-name-state > span { flex: 0 0 auto; overflow: visible; overflow-wrap: normal; text-overflow: clip; white-space: nowrap; }
body.battle-active .battle-shell.immersive-battle .enemy .combatant-heading { display: block; height: auto; min-height: 0; margin-bottom: 4px; }
body.battle-active .battle-shell.immersive-battle .enemy .enemy-target-marker { display: none; }
body.battle-active .battle-shell.immersive-battle .enemy .battle-name-line { justify-content: center; transform: none; }
/* Warning visibility must not change name wrapping or the artwork's grid row. */
body.battle-active .battle-shell.immersive-battle .enemy .actor-name { position: relative; width: fit-content; max-width: 100%; height: auto; min-height: 18px; margin: 0 auto; padding: 0 21px; font-size: .65rem; line-height: 1.35; }
body.battle-active .battle-shell.immersive-battle .enemy .enemy-actor-name > .enemy-big-warning { position: absolute; top: 0; left: 0; margin-right: 0; }
body.battle-active .battle-shell.immersive-battle .enemy-resource-meter { width: min(108px, 92%); }
body.battle-active .battle-shell.immersive-battle .enemy-resource-meter .bar-resource { display: none; }
body.battle-active .battle-shell.immersive-battle .enemy-resource-meter .bar { height: 7px; }
body.battle-active .battle-shell.immersive-battle .enemy-resource-meter .bar-value { font-size: .6rem; text-shadow: 0 1px 3px #000; }
/* Three enemies share their row with the HP value so the artwork keeps more height. */
body.battle-active .battle-shell.immersive-battle .enemy-count-3 .enemy-resource-body { display: flex; align-items: center; gap: 4px; }
body.battle-active .battle-shell.immersive-battle .enemy-count-3 .enemy-resource-body .bar { flex: 1 1 0; min-width: 20px; width: 0; }
body.battle-active .battle-shell.immersive-battle .enemy-count-3 .enemy-resource-body .bar-value { flex: 0 0 auto; }
body.battle-active .battle-shell.immersive-battle .battlefield-log-panel {
  position: absolute;
  z-index: 16;
  right: 8px;
  bottom: 6px;
  left: 8px;
  flex: none;
  height: 90px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(102 192 219 / 28%);
  border-radius: 6px;
  background: linear-gradient(115deg, rgb(3 14 24 / 84%), rgb(3 9 17 / 74%));
}
body.battle-active .battle-shell.immersive-battle .battlefield-log-panel::before { display: none; }
.battlefield-log-heading { display: flex; align-items: center; justify-content: space-between; height: 28px; padding: 0 9px; border-bottom: 1px solid rgb(102 192 219 / 15%); }
.battlefield-log-heading strong { color: #bad9e4; font-size: .67rem; font-weight: 500; }
.battlefield-log-heading .text-button { min-height: 28px; padding: 3px 5px; color: #b9d3df; font-size: .62rem; }
body.battle-active .battle-shell.immersive-battle .battle-current-log { height: 60px; min-height: 0; max-height: 60px; margin: 0; padding: 2px 3px; border: 0; background: transparent; font-size: .64rem; }
body.battle-active .battle-shell.immersive-battle .battle-current-log .compact-log-copy { gap: 1px; }
body.battle-active .battle-shell.immersive-battle .battle-current-log .log-entry { padding: 3px 5px; }
body.battle-active .battle-shell.immersive-battle .battle-technique-banner { top: 66px; }

@media (max-width: 700px) {
  body.battle-active .battle-shell.immersive-battle .arena { min-height: 0; }
  body.battle-active .battle-shell.immersive-battle .combatants { flex: 1 1 0; min-height: 0; gap: 8px; padding: 12px 8px 100px; }
  body.battle-active .battle-shell.immersive-battle.timeline-battle .combatants { padding-top: 64px; }
  body.battle-active .battle-shell.immersive-battle .party-line,
  body.battle-active .battle-shell.immersive-battle .enemy-line { gap: 8px; }
  body.battle-active .battle-shell.immersive-battle .party-member .actor-name { font-size: .62rem; }
  body.battle-active .battle-shell.immersive-battle .battlefield-vitals { gap: 1px; padding: 4px 3px; }
  body.battle-active .battle-shell.immersive-battle .battlefield-vitals .resource-meter { font-size: .5rem; }
  body.battle-active .battle-shell.immersive-battle .enemy .actor-name { font-size: .59rem; }
  body.battle-active .battle-shell.immersive-battle .enemy-resource-meter .bar-value { font-size: .54rem; }
  body.battle-active .battle-shell.immersive-battle .battlefield-log-panel { height: 86px; }
  body.battle-active .battle-shell.immersive-battle .battle-current-log { height: 56px; max-height: 56px; }
}
@media (max-width: 360px), (max-height: 740px) and (max-width: 700px) {
  body.battle-active .battle-shell.immersive-battle .combatants { --battle-portrait-size: 78px; gap: 6px; padding-bottom: 86px; }
  body.battle-active .battle-shell.immersive-battle .battlefield-log-panel { height: 74px; }
  body.battle-active .battle-shell.immersive-battle .battle-current-log { height: 44px; max-height: 44px; }
  body.battle-active .battle-shell.immersive-battle .party-member .actor-name { font-size: .58rem; }
  body.battle-active .battle-shell.immersive-battle .enemy .actor-name { font-size: .55rem; }
}
@media (max-height: 680px) and (max-width: 700px) {
  body.battle-active .battle-shell.immersive-battle .combatants { --battle-portrait-size: 56px; padding-bottom: 76px; }
  body.battle-active .battle-shell.immersive-battle .party-line,
  body.battle-active .battle-shell.immersive-battle .enemy-line { gap: 4px; }
  body.battle-active .battle-shell.immersive-battle .enemy .combatant-heading { margin-bottom: 1px; }
  body.battle-active .battle-shell.immersive-battle .enemy .actor-name { min-height: 12px; }
  body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .actor-mark { margin-bottom: 2px; }
  body.battle-active .battle-shell.immersive-battle .enemy-resource-body { display: flex; align-items: center; gap: 4px; }
  body.battle-active .battle-shell.immersive-battle .enemy-resource-body .bar { flex: 1 1 0; min-width: 20px; width: 0; }
  body.battle-active .battle-shell.immersive-battle .enemy-resource-body .bar-value { flex: 0 0 auto; }
  body.battle-active .battle-shell.immersive-battle .battlefield-log-panel { height: 60px; }
  body.battle-active .battle-shell.immersive-battle .battle-current-log { height: 30px; max-height: 30px; }
  /* Use the same reserved column before, during and after a status on short screens. */
  body.battle-active .battle-shell.immersive-battle .enemy-line .enemy { --enemy-state-space: 40px; --enemy-state-width: 38px; }
}

/* Keep the three rows clear of the log button on short, wide screens. */
@media (min-width: 701px) and (max-height: 500px) {
  body.battle-active .battle-shell.immersive-battle .combatants { --battle-portrait-size: 112px; }
  body.battle-active .battle-shell.immersive-battle .combatants:has(.party-count-3) { --battle-portrait-size: 78px; }
}

/* Preserve the live formation choices within the continuous battlefield. */
body.battle-active .battle-shell.immersive-battle .party-line .formation-front-upper { grid-row: 1; left: 18px; }
body.battle-active .battle-shell.immersive-battle .party-line .formation-front-lower { grid-row: 3; left: 18px; }
body.battle-active .battle-shell.immersive-battle .party-line .formation-rear-center { grid-row: 2; }
body.battle-active .battle-shell.immersive-battle .party-line.party-count-2 .formation-front-lower { grid-row: 2; }
body.battle-active .battle-shell.immersive-battle .party-line.party-rows-explicit .party-member[class*="formation-"] { grid-row: auto; }
body.battle-active .battle-shell.immersive-battle .party-line .formation-front-upper { order: 0; }
body.battle-active .battle-shell.immersive-battle .party-line .formation-rear-upper { order: 1; }
body.battle-active .battle-shell.immersive-battle .party-line .formation-front-center { order: 2; }
body.battle-active .battle-shell.immersive-battle .party-line .formation-rear-center { order: 3; }
body.battle-active .battle-shell.immersive-battle .party-line .formation-front-lower { order: 4; }
body.battle-active .battle-shell.immersive-battle .party-line .formation-rear-lower { order: 5; }

/* Keep the timeline clear of the first enemy name on short mobile screens. */
body.battle-active .battle-shell.immersive-battle .battle-timeline { top: -12px; }

/* Enemy targeting uses only the red target corners, without generic button flashes. */
.battle-shell button.enemy[data-action="target"]:not(:disabled):is(:active, .button-pressing, .button-confirmed) {
  border-color: transparent;
  box-shadow: none;
  transform: none;
  filter: none;
  animation: none;
}
.battle-shell button.enemy[data-action="target"].button-confirmed::after { content: none; animation: none; }

/* Extend the existing battlefield floor and add subtle ground contact shadows. */
body.battle-active .battle-shell.immersive-battle .arena::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8% 0 0;
  pointer-events: none;
  background: linear-gradient(rgb(2 6 12 / 25%), rgb(2 6 12 / 30%)), var(--battle-zone-image) center bottom / auto 310% no-repeat;
  -webkit-mask-image: linear-gradient(transparent, #000 16%);
  mask-image: linear-gradient(transparent, #000 16%);
}
body.battle-active .battle-shell.immersive-battle .combatants {
  position: relative;
  z-index: 1;
}
body.battle-active .battle-shell.immersive-battle .party-member .actor-mark::after,
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .actor-mark::after {
  content: "";
  position: absolute;
  bottom: -2%;
  left: 15%;
  width: 70%;
  height: 12%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse, rgb(0 0 0 / 70%), rgb(0 0 0 / 35%) 40%, transparent 75%);
}
body.battle-active .battle-shell.immersive-battle .combatants .actor-mark .actor-image {
  position: relative;
  z-index: 1;
}

/* Anime portrait artwork for the abyss gate battlefield (91-100F); local v3. */
body.battle-active .battle-shell.immersive-battle.battle-zone-10 {
  --battle-zone-image: url("/images/background/battle-10-abyss-gate-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-001-100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-10 .arena::after {
  content: none;
}

/* Anime portrait background series for floors 1-90; local v3. */
body.battle-active .battle-shell.immersive-battle.battle-zone-1 {
  --battle-zone-image: url("/images/background/battle-01-castle-outskirts-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-001-100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-2 {
  --battle-zone-image: url("/images/background/battle-02-underground-cemetery-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-001-100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-3 {
  --battle-zone-image: url("/images/background/battle-03-mycelium-cavern-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-001-100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-4 {
  --battle-zone-image: url("/images/background/battle-04-scorching-furnace-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-001-100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-5 {
  --battle-zone-image: url("/images/background/battle-05-ice-crystal-mine-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-001-100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-6 {
  --battle-zone-image: url("/images/background/battle-06-void-corridor-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-001-100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-7 {
  --battle-zone-image: url("/images/background/battle-07-sunken-cathedral-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-001-100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-8 {
  --battle-zone-image: url("/images/background/battle-08-stellar-remains-garden-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-001-100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-9 {
  --battle-zone-image: url("/images/background/battle-09-black-iron-mausoleum-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-001-100-1");
}
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-1, .battle-zone-2, .battle-zone-3, .battle-zone-4, .battle-zone-5, .battle-zone-6, .battle-zone-7, .battle-zone-8, .battle-zone-9) .arena::after { content: none; }

/* Anime portrait background series for floors 101-200; local v3. */
body.battle-active .battle-shell.immersive-battle.battle-zone-11 {
  --battle-zone-image: url("/images/background/battle-11-echo-realm-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-12 {
  --battle-zone-image: url("/images/background/battle-12-fragmented-archive-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-13 {
  --battle-zone-image: url("/images/background/battle-13-rifted-molten-vein-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-14 {
  --battle-zone-image: url("/images/background/battle-14-reverse-tide-waterway-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-15 {
  --battle-zone-image: url("/images/background/battle-15-thunder-spire-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-16 {
  --battle-zone-image: url("/images/background/battle-16-mirror-sanctuary-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-17 {
  --battle-zone-image: url("/images/background/battle-17-rotten-root-garden-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-18 {
  --battle-zone-image: url("/images/background/battle-18-stellar-observatory-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-19 {
  --battle-zone-image: url("/images/background/battle-19-null-phase-labyrinth-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-20 {
  --battle-zone-image: url("/images/background/battle-20-abyssal-heart-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-11, .battle-zone-12, .battle-zone-13, .battle-zone-14, .battle-zone-15, .battle-zone-16, .battle-zone-17, .battle-zone-18, .battle-zone-19, .battle-zone-20) .arena::after { content: none; }

/* Anime portrait background series for floors 201-300; local v3. */
body.battle-active .battle-shell.immersive-battle.battle-zone-21 {
  --battle-zone-image: url("/images/background/battle-21-root-gate-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-22 {
  --battle-zone-image: url("/images/background/battle-22-giant-fern-jungle-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-23 {
  --battle-zone-image: url("/images/background/battle-23-luminous-marsh-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-24 {
  --battle-zone-image: url("/images/background/battle-24-parasitic-bloom-corridor-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-25 {
  --battle-zone-image: url("/images/background/battle-25-amber-sealed-forest-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-26 {
  --battle-zone-image: url("/images/background/battle-26-behemoth-graveyard-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-27 {
  --battle-zone-image: url("/images/background/battle-27-root-vein-lake-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-28 {
  --battle-zone-image: url("/images/background/battle-28-canopy-branch-path-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-29 {
  --battle-zone-image: url("/images/background/battle-29-primordial-seedbed-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-30 {
  --battle-zone-image: url("/images/background/battle-30-primeval-tree-heart-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-21, .battle-zone-22, .battle-zone-23, .battle-zone-24, .battle-zone-25, .battle-zone-26, .battle-zone-27, .battle-zone-28, .battle-zone-29, .battle-zone-30) .arena::after { content: none; }

/* Anime portrait background series for floors 301-400; local v3. */
body.battle-active .battle-shell.immersive-battle.battle-zone-31 {
  --battle-zone-image: url("/images/background/battle-31-rusted-gate-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-32 {
  --battle-zone-image: url("/images/background/battle-32-abandoned-assembly-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-33 {
  --battle-zone-image: url("/images/background/battle-33-steam-conduits-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-34 {
  --battle-zone-image: url("/images/background/battle-34-gear-conveyor-bridge-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-35 {
  --battle-zone-image: url("/images/background/battle-35-white-smoke-repair-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-36 {
  --battle-zone-image: url("/images/background/battle-36-black-oil-reservoir-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-37 {
  --battle-zone-image: url("/images/background/battle-37-artillery-bastion-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-38 {
  --battle-zone-image: url("/images/background/battle-38-armor-testing-hall-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-39 {
  --battle-zone-image: url("/images/background/battle-39-fallen-banner-graveyard-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-40 {
  --battle-zone-image: url("/images/background/battle-40-war-furnace-core-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-101-400-1");
}
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-31, .battle-zone-32, .battle-zone-33, .battle-zone-34, .battle-zone-35, .battle-zone-36, .battle-zone-37, .battle-zone-38, .battle-zone-39, .battle-zone-40) .arena::after { content: none; }

/* Anime portrait background series for floors 401-500; local v3. */
body.battle-active .battle-shell.immersive-battle.battle-zone-41 {
  --battle-zone-image: url("/images/background/battle-41-silver-reflection-gate-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-401-500-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-42 {
  --battle-zone-image: url("/images/background/battle-42-masked-market-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-401-500-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-43 {
  --battle-zone-image: url("/images/background/battle-43-still-mirror-canal-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-401-500-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-44 {
  --battle-zone-image: url("/images/background/battle-44-reversed-bell-corridor-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-401-500-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-45 {
  --battle-zone-image: url("/images/background/battle-45-kaleidoscope-gallery-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-401-500-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-46 {
  --battle-zone-image: url("/images/background/battle-46-memory-theater-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-401-500-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-47 {
  --battle-zone-image: url("/images/background/battle-47-glass-blossom-garden-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-401-500-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-48 {
  --battle-zone-image: url("/images/background/battle-48-false-throne-hall-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-401-500-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-49 {
  --battle-zone-image: url("/images/background/battle-49-shattered-shadow-avenue-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-401-500-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-50 {
  --battle-zone-image: url("/images/background/battle-50-mirror-crown-palace-portrait-anime-v3.webp?v=20261005-battle-backgrounds-anime-401-500-1");
}
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-41, .battle-zone-42, .battle-zone-43, .battle-zone-44, .battle-zone-45, .battle-zone-46, .battle-zone-47, .battle-zone-48, .battle-zone-49, .battle-zone-50) .arena::after { content: none; }


/* Reserve the complete log above the two-row command dock. */
body.battle-active .battle-shell.immersive-battle { --battle-live-log-height: 132px; }
body.battle-active .battle-shell.immersive-battle .combatants { padding-bottom: calc(var(--battle-live-log-height) + 18px); }
body.battle-active .battle-shell.immersive-battle .battlefield-log-panel { height: var(--battle-live-log-height); }
body.battle-active .battle-shell.immersive-battle .battle-current-log { height: calc(var(--battle-live-log-height) - 30px); max-height: calc(var(--battle-live-log-height) - 30px); }
body.battle-active .battle-shell.immersive-battle .party-line :is(.formation-front-upper, .formation-front-center, .formation-front-lower) { left: clamp(23px, 6.5vw, 37px); }

@media (min-width: 701px) {
  body.battle-active .battle-shell.immersive-battle .arena { height: max(360px, calc(100dvh - 300px)); min-height: 0; }
  body.battle-active .battle-shell.immersive-battle .combatants { min-height: 0; }
  body.battle-active:has(.battle-shell.immersive-battle) .global-chat { bottom: 264px; }
}
@media (max-width: 700px) {
  body.battle-active .battle-shell.immersive-battle { --battle-live-log-height: 120px; }
  body.battle-active .battle-shell.immersive-battle.team-switch-enabled:not(.showing-result) { padding-bottom: 0; }
  body.battle-active .battle-shell.immersive-battle.team-switch-enabled.phase-paused:not(.showing-result) { padding-bottom: 0; }
}
@media (max-width: 360px), (max-height: 740px) and (max-width: 700px) {
  body.battle-active .battle-shell.immersive-battle { --battle-live-log-height: 108px; }
}
@media (max-height: 680px) and (max-width: 700px) {
  body.battle-active .battle-shell.immersive-battle { --battle-live-log-height: 84px; }
  body.battle-active .battle-shell.immersive-battle .combatants { padding-bottom: calc(var(--battle-live-log-height) + 8px); }
  body.battle-active .battle-shell.immersive-battle.timeline-battle .combatants { padding-top: 48px; }
}


/* Keep combat spacious; the existing full log opens only when requested. */
body.battle-active .battle-shell.immersive-battle:has(.battlefield-log-panel.is-collapsed) { --battle-live-log-height: 32px; }
body.battle-active .battle-shell.immersive-battle .battlefield-log-panel.is-collapsed { right: auto; width: 76px; border-color: rgb(102 192 219 / 20%); background: rgb(3 12 20 / 72%); box-shadow: none; }
.battlefield-log-panel.is-collapsed .battle-current-log { display: none; }
.battlefield-log-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 30px; padding: 0 10px; border: 0; border-radius: 0; background: transparent; box-shadow: none; color: #bad9e4; text-align: left; cursor: pointer; }
.battlefield-log-toggle strong { font-size: .67rem; font-weight: 500; }
.battlefield-log-toggle > span { color: #b9d3df; font-size: .62rem; }
.battlefield-log-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: -3px; }
@media (min-width: 701px) and (max-height: 500px) {
  body.battle-active .battle-shell.immersive-battle:has(.battlefield-log-panel.is-collapsed) { --battle-live-log-height: 46px; }
  body.battle-active .battle-shell.immersive-battle .battlefield-log-panel.is-collapsed { height: 32px; }
}
@media (min-width: 701px) {
  body.battle-active:has(.battle-shell.immersive-battle .battlefield-log-panel.is-collapsed) .global-chat { bottom: 178px; }
}

/* Show more distant scenery above the floor on mobile battlefields. */
@media (max-width: 700px) {
  body.battle-active .battle-shell.immersive-battle .arena { background-position: center, center 35%; }
}

/* Let the mobile command dock reserve only its actual height, including final combat animations. */
@media (max-width: 700px) {
  body.battle-active .battle-shell.immersive-battle:not(.showing-result) { padding-bottom: 0; }
  body.battle-active .battle-shell.immersive-battle .command-dock {
    position: relative;
    flex: 0 0 auto;
    left: auto;
    bottom: auto;
    width: calc(100% + 16px);
    margin: 0 -8px -6px;
    transform: none;
  }
}


/* Result buttons replace commands inside the same dock without resizing the battlefield. */
.battle-result-dock { display: flex; align-items: center; }
.battle-result-dock > .post-battle-actions.result-actions-only { flex: 0 0 auto; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.battle-result-dock:has(.tutorial-guide-battle) { justify-content: flex-end; }
.battle-result-dock > .post-battle-actions.result-actions-only::before { display: none; }
.battle-shell.team-switch-enabled .battle-result-dock { min-height: 116px; }
.battle-shell.defeat-screen .battle-result-dock { z-index: 41; }

/* Keep skill cooldowns readable across the whole command, without dimming the countdown. */
.command-dock .command-button.skill-cooldown {
  border-color: #52575b;
  background: linear-gradient(180deg, #33373b, #202326);
  box-shadow: inset 0 1px rgb(255 255 255 / 6%);
  color: #aeb3b8;
  opacity: 1;
}
.command-button.skill-cooldown > :is(.command-icon, .command-symbol, .command-label, .command-meta) {
  filter: grayscale(1);
  opacity: .25;
}
.command-button.skill-cooldown::after { background: transparent; }
.command-cooldown-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 2px;
  color: #f1f3f5;
  font-family: "Yu Gothic UI", sans-serif;
  font-size: .64rem;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 3px #000;
  pointer-events: none;
}
.command-cooldown-overlay b { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

/* 501–700F: dedicated portrait backgrounds. */
body.battle-active .battle-shell.immersive-battle.battle-zone-51 {
  --battle-zone-image: url("/images/background/battle-51-sealed-prison-gate-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-52 {
  --battle-zone-image: url("/images/background/battle-52-chain-shadow-street-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-53 {
  --battle-zone-image: url("/images/background/battle-53-silent-sealed-archive-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-54 {
  --battle-zone-image: url("/images/background/battle-54-ash-lamp-ward-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-55 {
  --battle-zone-image: url("/images/background/battle-55-miasma-chain-drain-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-56 {
  --battle-zone-image: url("/images/background/battle-56-inverted-chain-bridge-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-57 {
  --battle-zone-image: url("/images/background/battle-57-nameless-detention-hall-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-58 {
  --battle-zone-image: url("/images/background/battle-58-black-wax-tribunal-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-59 {
  --battle-zone-image: url("/images/background/battle-59-seven-chain-sealing-hall-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-60 {
  --battle-zone-image: url("/images/background/battle-60-darkness-warden-throne-portrait-anime-v3.webp?v=20261006-prison-art-501-600-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-61 {
  --battle-zone-image: url("/images/background/battle-61-stardust-shore-gate-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-62 {
  --battle-zone-image: url("/images/background/battle-62-drifting-remains-reef-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-63 {
  --battle-zone-image: url("/images/background/battle-63-faint-light-sail-tomb-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-64 {
  --battle-zone-image: url("/images/background/battle-64-heavy-star-fall-hollow-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-65 {
  --battle-zone-image: url("/images/background/battle-65-white-bone-tide-path-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-66 {
  --battle-zone-image: url("/images/background/battle-66-aurora-star-veil-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-67 {
  --battle-zone-image: url("/images/background/battle-67-broken-moon-observation-ring-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-68 {
  --battle-zone-image: url("/images/background/battle-68-star-core-coral-garden-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-69 {
  --battle-zone-image: url("/images/background/battle-69-void-remains-dragon-path-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-70 {
  --battle-zone-image: url("/images/background/battle-70-star-remains-dragon-throne-portrait-anime-v3.webp?v=20261006-star-sea-art-601-700-1");
}
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-51, .battle-zone-52, .battle-zone-53, .battle-zone-54, .battle-zone-55, .battle-zone-56, .battle-zone-57, .battle-zone-58, .battle-zone-59, .battle-zone-60, .battle-zone-61, .battle-zone-62, .battle-zone-63, .battle-zone-64, .battle-zone-65, .battle-zone-66, .battle-zone-67, .battle-zone-68, .battle-zone-69, .battle-zone-70) .arena::after { content: none; }

/* Dim only the battlefield, keeping the defeat message above its local backdrop. */
.battle-shell.immersive-battle.defeat-screen::before { display: none; }
.battle-shell.immersive-battle.defeat-screen .combatants::before {
  position: absolute;
  z-index: 40;
  inset: 0;
  border-radius: inherit;
  background: rgb(2 4 8 / 66%);
  content: "";
  pointer-events: none;
}

/* Keep incoming members hidden until the confirmed team's departure completes. */
.combatants.team-switch-pending > .party-line { visibility: hidden; }
.team-switch-motion-layer { position: absolute; z-index: 28; inset: 0; overflow: hidden; pointer-events: none; }
.combatants.team-switch-pending > .team-switch-motion-layer .party-line { visibility: visible; }


/* 701-900F: reviewed chapter backgrounds. */
body.battle-active .battle-shell.immersive-battle.battle-zone-71 {
  --battle-zone-image: url("/images/background/battle-71-stilled-time-gate-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-72 {
  --battle-zone-image: url("/images/background/battle-72-crossed-seasons-garden-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-73 {
  --battle-zone-image: url("/images/background/battle-73-echo-bell-tower-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-74 {
  --battle-zone-image: url("/images/background/battle-74-yesterday-market-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-75 {
  --battle-zone-image: url("/images/background/battle-75-reverse-sand-canal-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-76 {
  --battle-zone-image: url("/images/background/battle-76-sleeping-hand-workshop-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-77 {
  --battle-zone-image: url("/images/background/battle-77-broken-calendar-library-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-78 {
  --battle-zone-image: url("/images/background/battle-78-rejuvenating-grave-garden-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-79 {
  --battle-zone-image: url("/images/background/battle-79-time-rift-bridge-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-80 {
  --battle-zone-image: url("/images/background/battle-80-time-burial-throne-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-81 {
  --battle-zone-image: url("/images/background/battle-81-prototype-casting-gate-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-82 {
  --battle-zone-image: url("/images/background/battle-82-seven-gear-vault-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-83 {
  --battle-zone-image: url("/images/background/battle-83-white-flame-seed-furnace-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-84 {
  --battle-zone-image: url("/images/background/battle-84-inheritance-core-water-garden-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-85 {
  --battle-zone-image: url("/images/background/battle-85-blade-embryo-floating-hall-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-86 {
  --battle-zone-image: url("/images/background/battle-86-guardian-gear-cocoon-sanctum-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-87 {
  --battle-zone-image: url("/images/background/battle-87-inscription-lamp-archive-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-88 {
  --battle-zone-image: url("/images/background/battle-88-fusion-core-crucible-garden-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-89 {
  --battle-zone-image: url("/images/background/battle-89-origin-gear-trial-hall-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-90 {
  --battle-zone-image: url("/images/background/battle-90-first-smith-forge-sanctum-portrait-anime-v3.webp?v=20261008-floors-701-900-1");
}
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-71, .battle-zone-72, .battle-zone-73, .battle-zone-74, .battle-zone-75, .battle-zone-76, .battle-zone-77, .battle-zone-78, .battle-zone-79, .battle-zone-80, .battle-zone-81, .battle-zone-82, .battle-zone-83, .battle-zone-84, .battle-zone-85, .battle-zone-86, .battle-zone-87, .battle-zone-88, .battle-zone-89, .battle-zone-90) .arena::after { content: none; }

/* 901-1000F: reviewed chapter backgrounds. */
body.battle-active .battle-shell.immersive-battle.battle-zone-91 {
  --battle-zone-image: url("/images/background/battle-91-pulsing-stone-gate-portrait-anime-v3.webp?v=20261008-floors-901-1000-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-92 {
  --battle-zone-image: url("/images/background/battle-92-deep-crystal-rib-hall-portrait-anime-v3.webp?v=20261008-floors-901-1000-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-93 {
  --battle-zone-image: url("/images/background/battle-93-castle-fragment-court-portrait-anime-v3.webp?v=20261008-floors-901-1000-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-94 {
  --battle-zone-image: url("/images/background/battle-94-mother-root-heart-garden-portrait-anime-v3.webp?v=20261008-floors-901-1000-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-95 {
  --battle-zone-image: url("/images/background/battle-95-iron-remains-pulse-furnace-portrait-anime-v3.webp?v=20261008-floors-901-1000-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-96 {
  --battle-zone-image: url("/images/background/battle-96-mirror-remains-silent-sanctum-portrait-anime-v3.webp?v=20261008-floors-901-1000-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-97 {
  --battle-zone-image: url("/images/background/battle-97-sealed-heart-chain-bridge-portrait-anime-v3.webp?v=20261008-floors-901-1000-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-98 {
  --battle-zone-image: url("/images/background/battle-98-star-remains-womb-sea-portrait-anime-v3.webp?v=20261008-floors-901-1000-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-99 {
  --battle-zone-image: url("/images/background/battle-99-seven-guardians-confluence-portrait-anime-v3.webp?v=20261008-floors-901-1000-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-100 {
  --battle-zone-image: url("/images/background/battle-100-primordial-abyss-furnace-portrait-anime-v3.webp?v=20261008-floors-901-1000-1");
}
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-91, .battle-zone-92, .battle-zone-93, .battle-zone-94, .battle-zone-95, .battle-zone-96, .battle-zone-97, .battle-zone-98, .battle-zone-99, .battle-zone-100) .arena::after { content: none; }

body.battle-active .battle-shell.immersive-battle.battle-zone-101 {
  --battle-zone-image: url("/images/background/battle-101-azure-seal-outer-gate-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-102 {
  --battle-zone-image: url("/images/background/battle-102-folded-shield-corridor-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-103 {
  --battle-zone-image: url("/images/background/battle-103-blue-tide-rune-canal-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-104 {
  --battle-zone-image: url("/images/background/battle-104-glass-branch-ward-garden-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-105 {
  --battle-zone-image: url("/images/background/battle-105-white-ash-seal-furnace-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-106 {
  --battle-zone-image: url("/images/background/battle-106-silent-rune-belfry-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-107 {
  --battle-zone-image: url("/images/background/battle-107-reverse-stitch-sealed-archive-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-108 {
  --battle-zone-image: url("/images/background/battle-108-azure-star-ward-ring-bridge-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-109 {
  --battle-zone-image: url("/images/background/battle-109-seven-rune-barrier-hall-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-110 {
  --battle-zone-image: url("/images/background/battle-110-azure-heart-ward-sanctum-portrait-anime-v3.webp?v=20261012-azure-seal-1001-1100-1");
}
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-101, .battle-zone-102, .battle-zone-103, .battle-zone-104, .battle-zone-105, .battle-zone-106, .battle-zone-107, .battle-zone-108, .battle-zone-109, .battle-zone-110) .arena::after { content: none; }

body.battle-active .battle-shell.immersive-battle.battle-zone-111 {
  --battle-zone-image: url("/images/background/battle-111-tide-stop-stone-gate-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-112 {
  --battle-zone-image: url("/images/background/battle-112-black-sand-shallow-garden-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-113 {
  --battle-zone-image: url("/images/background/battle-113-coral-bone-fence-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-114 {
  --battle-zone-image: url("/images/background/battle-114-sunken-bell-water-hall-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-115 {
  --battle-zone-image: url("/images/background/battle-115-white-shell-closed-garden-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-116 {
  --battle-zone-image: url("/images/background/battle-116-phosphor-algae-lantern-garden-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-117 {
  --battle-zone-image: url("/images/background/battle-117-tidebone-crossing-bridge-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-118 {
  --battle-zone-image: url("/images/background/battle-118-unlit-ink-cavern-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-119 {
  --battle-zone-image: url("/images/background/battle-119-bottom-root-shell-garden-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-120 {
  --battle-zone-image: url("/images/background/battle-120-black-tide-mother-garden-portrait-anime-v3.webp?v=20261012-black-tide-1101-1200-1");
}
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-111, .battle-zone-112, .battle-zone-113, .battle-zone-114, .battle-zone-115, .battle-zone-116, .battle-zone-117, .battle-zone-118, .battle-zone-119, .battle-zone-120) .arena::after { content: none; }


body.battle-active .battle-shell.immersive-battle.battle-zone-121 {
  --battle-zone-image: url("/images/background/battle-121-copper-gate-town-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-122 {
  --battle-zone-image: url("/images/background/battle-122-conduit-beast-road-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-123 {
  --battle-zone-image: url("/images/background/battle-123-sword-stela-garden-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-124 {
  --battle-zone-image: url("/images/background/battle-124-vermilion-cloud-bridge-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-125 {
  --battle-zone-image: url("/images/background/battle-125-quiet-thunder-forge-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-126 {
  --battle-zone-image: url("/images/background/battle-126-broken-blade-sand-garden-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-127 {
  --battle-zone-image: url("/images/background/battle-127-singing-sword-tower-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-128 {
  --battle-zone-image: url("/images/background/battle-128-mirror-blade-academy-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-129 {
  --battle-zone-image: url("/images/background/battle-129-red-thunder-inheritance-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-130 {
  --battle-zone-image: url("/images/background/battle-130-twin-sword-vermilion-heart-portrait-anime-v3.webp?v=20261013-vermilion-thunder-v1");
}
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-121, .battle-zone-122, .battle-zone-123, .battle-zone-124, .battle-zone-125, .battle-zone-126, .battle-zone-127, .battle-zone-128, .battle-zone-129, .battle-zone-130) .arena::after { content: none; }

/* 1301〜1400F: 蜜蝋の群巣。 */
body.battle-active .battle-shell.immersive-battle.battle-zone-131 {
  --battle-zone-image: url("/images/background/battle-131-wax-gate-courtyard-portrait-anime-v3.webp?v=20261014-wax-hive-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-132 {
  --battle-zone-image: url("/images/background/battle-132-blue-honey-vault-portrait-anime-v3.webp?v=20261014-wax-hive-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-133 {
  --battle-zone-image: url("/images/background/battle-133-violet-spore-garden-portrait-anime-v3.webp?v=20261014-wax-hive-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-134 {
  --battle-zone-image: url("/images/background/battle-134-white-cocoon-hall-portrait-anime-v3.webp?v=20261014-wax-hive-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-135 {
  --battle-zone-image: url("/images/background/battle-135-red-nectar-garden-portrait-anime-v3.webp?v=20261014-wax-hive-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-136 {
  --battle-zone-image: url("/images/background/battle-136-jade-leaf-nest-portrait-anime-v3.webp?v=20261014-wax-hive-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-137 {
  --battle-zone-image: url("/images/background/battle-137-copper-shell-passage-portrait-anime-v3.webp?v=20261014-wax-hive-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-138 {
  --battle-zone-image: url("/images/background/battle-138-indigo-wing-cavern-portrait-anime-v3.webp?v=20261014-wax-hive-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-139 {
  --battle-zone-image: url("/images/background/battle-139-root-honey-brood-garden-portrait-anime-v3.webp?v=20261014-wax-hive-v1");
}
body.battle-active .battle-shell.immersive-battle.battle-zone-140 {
  --battle-zone-image: url("/images/background/battle-140-hive-mother-nursery-portrait-anime-v3.webp?v=20261014-wax-hive-v1");
}
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-131, .battle-zone-132, .battle-zone-133, .battle-zone-134, .battle-zone-135, .battle-zone-136, .battle-zone-137, .battle-zone-138, .battle-zone-139, .battle-zone-140) .arena::after { content: none; }

/* 1401〜1500F: 灰雪の巡礼峰。 */
body.battle-active .battle-shell.immersive-battle.battle-zone-141 { --battle-zone-image: url("/images/background/battle-141-ash-snow-trailhead-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-142 { --battle-zone-image: url("/images/background/battle-142-white-cloth-waymarks-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-143 { --battle-zone-image: url("/images/background/battle-143-ash-grass-garden-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-144 { --battle-zone-image: url("/images/background/battle-144-prayer-stone-bend-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-145 { --battle-zone-image: url("/images/background/battle-145-lampwood-rest-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-146 { --battle-zone-image: url("/images/background/battle-146-blue-wind-saddle-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-147 { --battle-zone-image: url("/images/background/battle-147-buried-road-terrace-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-148 { --battle-zone-image: url("/images/background/battle-148-faint-lamp-cavern-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-149 { --battle-zone-image: url("/images/background/battle-149-white-cloak-court-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-150 { --battle-zone-image: url("/images/background/battle-150-ash-snow-lamp-peak-portrait-anime-v3.webp?v=20261015-ash-snow-v1&scene_opt=20261020-2"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-141, .battle-zone-142, .battle-zone-143, .battle-zone-144, .battle-zone-145, .battle-zone-146, .battle-zone-147, .battle-zone-148, .battle-zone-149, .battle-zone-150) .arena::after { content: none; }

/* 1501〜1600F 金砂の天秤堂 */
body.battle-active .battle-shell.immersive-battle.battle-zone-151 { --battle-zone-image: url("/images/background/battle-151-sand-lamp-approach-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-152 { --battle-zone-image: url("/images/background/battle-152-inverted-cup-channel-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-153 { --battle-zone-image: url("/images/background/battle-153-dish-leaf-garden-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-154 { --battle-zone-image: url("/images/background/battle-154-basalt-weighing-vault-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-155 { --battle-zone-image: url("/images/background/battle-155-gold-ledger-colonnade-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-156 { --battle-zone-image: url("/images/background/battle-156-paired-pillar-walkway-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-157 { --battle-zone-image: url("/images/background/battle-157-single-pan-wind-court-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-158 { --battle-zone-image: url("/images/background/battle-158-abacus-sand-road-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-159 { --battle-zone-image: url("/images/background/battle-159-sealed-judgment-hall-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-160 { --battle-zone-image: url("/images/background/battle-160-great-golden-balance-portrait-anime-v3.webp?v=20261015-gold-balance-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-151, .battle-zone-152, .battle-zone-153, .battle-zone-154, .battle-zone-155, .battle-zone-156, .battle-zone-157, .battle-zone-158, .battle-zone-159, .battle-zone-160) .arena::after { content: none; }

/* 1601〜1700F 星綴りの天測苑 */
body.battle-active .battle-shell.immersive-battle.battle-zone-161 { --battle-zone-image: url("/images/background/battle-161-crescent-entry-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-162 { --battle-zone-image: url("/images/background/battle-162-needle-star-path-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-163 { --battle-zone-image: url("/images/background/battle-163-dew-light-garden-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-164 { --battle-zone-image: url("/images/background/battle-164-sky-shell-vault-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-165 { --battle-zone-image: url("/images/background/battle-165-star-thread-court-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-166 { --battle-zone-image: url("/images/background/battle-166-wandering-ring-walkway-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-167 { --battle-zone-image: url("/images/background/battle-167-thin-wing-wind-garden-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-168 { --battle-zone-image: url("/images/background/battle-168-comet-tail-court-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-169 { --battle-zone-image: url("/images/background/battle-169-silent-chart-library-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-170 { --battle-zone-image: url("/images/background/battle-170-celestial-ring-sanctum-portrait-anime-v3.webp?v=20261016-star-garden-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-161, .battle-zone-162, .battle-zone-163, .battle-zone-164, .battle-zone-165, .battle-zone-166, .battle-zone-167, .battle-zone-168, .battle-zone-169, .battle-zone-170) .arena::after { content: none; }

/* 1701〜1800F 彩律の硝子工廊 */
body.battle-active .battle-shell.immersive-battle.battle-zone-171 { --battle-zone-image: url("/images/background/battle-171-prism-entry-portrait-anime-v3.webp?v=20261016-prism-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-172 { --battle-zone-image: url("/images/background/battle-172-color-sand-path-portrait-anime-v3.webp?v=20261016-prism-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-173 { --battle-zone-image: url("/images/background/battle-173-blowpipe-gallery-portrait-anime-v3.webp?v=20261016-prism-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-174 { --battle-zone-image: url("/images/background/battle-174-cooling-vault-portrait-anime-v3.webp?v=20261016-prism-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-175 { --battle-zone-image: url("/images/background/battle-175-resonant-court-portrait-anime-v3.webp?v=20261016-prism-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-176 { --battle-zone-image: url("/images/background/battle-176-mosaic-bridge-portrait-anime-v3.webp?v=20261016-prism-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-177 { --battle-zone-image: url("/images/background/battle-177-ember-kiln-portrait-anime-v3.webp?v=20261016-prism-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-178 { --battle-zone-image: url("/images/background/battle-178-lamina-racks-portrait-anime-v3.webp?v=20261016-prism-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-179 { --battle-zone-image: url("/images/background/battle-179-sealed-tube-vault-portrait-anime-v3.webp?v=20261016-prism-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-180 { --battle-zone-image: url("/images/background/battle-180-great-prism-sanctum-portrait-anime-v3.webp?v=20261016-prism-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-171, .battle-zone-172, .battle-zone-173, .battle-zone-174, .battle-zone-175, .battle-zone-176, .battle-zone-177, .battle-zone-178, .battle-zone-179, .battle-zone-180) .arena::after { content: none; }

/* 1801〜1900F 暁砂の帆航庭 */
body.battle-active .battle-shell.immersive-battle.battle-zone-181 { --battle-zone-image: url("/images/background/battle-181-dawn-port-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-182 { --battle-zone-image: url("/images/background/battle-182-compass-way-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-183 { --battle-zone-image: url("/images/background/battle-183-wind-cave-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-184 { --battle-zone-image: url("/images/background/battle-184-bone-coral-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-185 { --battle-zone-image: url("/images/background/battle-185-sail-loom-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-186 { --battle-zone-image: url("/images/background/battle-186-copper-bridge-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-187 { --battle-zone-image: url("/images/background/battle-187-mirage-basin-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-188 { --battle-zone-image: url("/images/background/battle-188-star-sand-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-189 { --battle-zone-image: url("/images/background/battle-189-silent-mooring-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-190 { --battle-zone-image: url("/images/background/battle-190-great-dawn-mast-portrait-anime-v3.webp?v=20261017-dawnsail-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-181, .battle-zone-182, .battle-zone-183, .battle-zone-184, .battle-zone-185, .battle-zone-186, .battle-zone-187, .battle-zone-188, .battle-zone-189, .battle-zone-190) .arena::after { content: none; }


/* Share a three-row artwork budget across allies and enemies. Enemy names and
   HP remain above/below the art, and actor counts do not change portrait size. */
body.battle-active .battle-shell.immersive-battle .combatants {
  container-type: size;
  --battle-portrait-size: min(80px, max(36px, calc(30vw - 38px)), max(36px, calc((100cqh - 24px) / 3 - 32px)));
}
body.battle-active .battle-shell.immersive-battle .party-line.party-count-3 { row-gap: 12px; }
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy {
  --enemy-status-row: 12px;
  height: auto;
  max-height: none;
  grid-template-rows: max-content max-content max-content;
}
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .actor-mark {
  height: calc(var(--battle-portrait-size) * var(--enemy-body-size));
  margin-bottom: 0;
}
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .combatant-heading {
  margin-bottom: 0;
}
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .actor-name { padding: 0; }
body.battle-active .battle-shell.immersive-battle .enemy .enemy-actor-name > .enemy-big-warning { left: -20px; }

/* Keep enemy HP in one short row at every enemy count and screen height. */
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .enemy-resource-body {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: safe center;
  gap: 4px;
}
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .enemy-resource-body > .bar {
  flex: 1 1 48px;
  width: 48px;
  min-width: 8px;
  max-width: 48px;
}
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .enemy-resource-body > .bar-value {
  flex: 0 0 auto;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
  text-align: left;
}
/* A single arena opponent uses the regular, already-inline meter markup. */
body.battle-active .battle-shell.immersive-battle .enemy-line .enemy .resource-meter > .bar {
  max-width: 48px;
}

/* 1901〜2000F 轟誓の雷冠砦 */
body.battle-active .battle-shell.immersive-battle.battle-zone-191 { --battle-zone-image: url("/images/background/battle-191-thunder-gate-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-192 { --battle-zone-image: url("/images/background/battle-192-chain-cloud-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-193 { --battle-zone-image: url("/images/background/battle-193-lodestone-garden-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-194 { --battle-zone-image: url("/images/background/battle-194-bronze-belfry-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-195 { --battle-zone-image: url("/images/background/battle-195-cleft-wing-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-196 { --battle-zone-image: url("/images/background/battle-196-ember-ore-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-197 { --battle-zone-image: url("/images/background/battle-197-thunder-root-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-198 { --battle-zone-image: url("/images/background/battle-198-black-banner-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-199 { --battle-zone-image: url("/images/background/battle-199-static-vow-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-200 { --battle-zone-image: url("/images/background/battle-200-thunder-crown-portrait-anime-v3.webp?v=20261017-thunderoath-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-191, .battle-zone-192, .battle-zone-193, .battle-zone-194, .battle-zone-195, .battle-zone-196, .battle-zone-197, .battle-zone-198, .battle-zone-199, .battle-zone-200) .arena::after { content: none; }

/* 2001〜2100F 霜紡ぎの繭王宮 */
body.battle-active .battle-shell.immersive-battle.battle-zone-201 { --battle-zone-image: url("/images/background/battle-201-white-thread-gate-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-202 { --battle-zone-image: url("/images/background/battle-202-frost-cotton-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-203 { --battle-zone-image: url("/images/background/battle-203-needle-ice-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-204 { --battle-zone-image: url("/images/background/battle-204-crimson-silk-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-205 { --battle-zone-image: url("/images/background/battle-205-wing-mantle-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-206 { --battle-zone-image: url("/images/background/battle-206-black-shuttle-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-207 { --battle-zone-image: url("/images/background/battle-207-wax-thread-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-208 { --battle-zone-image: url("/images/background/battle-208-indigo-shears-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-209 { --battle-zone-image: url("/images/background/battle-209-silver-cocoon-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-210 { --battle-zone-image: url("/images/background/battle-210-frostweave-throne-portrait-anime-v3.webp?v=20261018-frostweave-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-201, .battle-zone-202, .battle-zone-203, .battle-zone-204, .battle-zone-205, .battle-zone-206, .battle-zone-207, .battle-zone-208, .battle-zone-209, .battle-zone-210) .arena::after { content: none; }

/* 2101〜2200F 暁誓の英雄陵 */
body.battle-active .battle-shell.immersive-battle.battle-zone-211 { --battle-zone-image: url("/images/background/battle-211-dawn-gate-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-212 { --battle-zone-image: url("/images/background/battle-212-bronze-road-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-213 { --battle-zone-image: url("/images/background/battle-213-pyre-garden-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-214 { --battle-zone-image: url("/images/background/battle-214-spring-oath-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-215 { --battle-zone-image: url("/images/background/battle-215-spear-grove-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-216 { --battle-zone-image: url("/images/background/battle-216-thunder-bell-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-217 { --battle-zone-image: url("/images/background/battle-217-white-wing-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-218 { --battle-zone-image: url("/images/background/battle-218-obsidian-council-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-219 { --battle-zone-image: url("/images/background/battle-219-crimson-stars-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-220 { --battle-zone-image: url("/images/background/battle-220-hero-throne-portrait-anime-v3.webp?v=20261019-dawnoath-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-211, .battle-zone-212, .battle-zone-213, .battle-zone-214, .battle-zone-215, .battle-zone-216, .battle-zone-217, .battle-zone-218, .battle-zone-219, .battle-zone-220) .arena::after { content: none; }

/* Short landscape battles keep every target beside the command deck.
   Navigation and chat remain available through the header menu. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  body.battle-active:has(.battle-shell.immersive-battle) {
    --mobile-chat-peek-height: 0px;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
  }
  body.battle-active:has(.battle-shell.immersive-battle) > .navigation { display: none; }
  body.battle-active:has(.battle-shell.immersive-battle) main {
    width: 100%;
    max-width: none;
    height: calc(100dvh - var(--app-header-height));
    margin: 0;
    padding: 2px max(8px, env(safe-area-inset-right)) 2px max(8px, env(safe-area-inset-left));
    overflow: hidden;
  }
  body.battle-active.app-update-available:has(.battle-shell.immersive-battle) main {
    height: calc(100dvh - var(--app-header-height) - var(--app-update-flow-space));
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle {
    display: grid;
    grid-template: auto minmax(0, 1fr) / minmax(0, 1fr) clamp(178px, 28vw, 230px);
    gap: 4px 6px;
    height: 100%;
    min-height: 0;
    padding-bottom: 0;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-header {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    margin: 0;
    padding: 0 2px;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .arena {
    grid-area: 2 / 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .combatants {
    --battle-portrait-size: clamp(32px, 10dvh, 46px);
    flex: 1 1 0;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 6px;
    height: 100%;
    min-height: 0;
    padding: 26px 4px 30px;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .party-line,
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line {
    gap: 4px;
    min-height: 0;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .party-line .party-member {
    left: 0;
    width: 100%;
    grid-template-columns: var(--battle-portrait-size) minmax(0, 1fr);
    column-gap: 3px;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .party-member .actor-mark {
    width: var(--battle-portrait-size);
    height: var(--battle-portrait-size);
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .party-member .combatant-heading { padding: 0 0 2px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .party-member .actor-name { padding: 0; font-size: .62rem; line-height: 1.1; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battlefield-vitals { padding: 0; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battlefield-vitals .resource-meter {
    grid-template-columns: 9px minmax(12px, 28px) max-content;
    gap: 2px;
    font-size: .52rem;
    line-height: 1.05;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battlefield-vitals .bar-icon { width: 9px; height: 9px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .party-member .ally-name-states {
    top: auto;
    bottom: 0;
    left: 0;
    width: var(--battle-portrait-size);
    pointer-events: none;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line .enemy {
    grid-template: auto auto / var(--battle-portrait-size) minmax(0, 1fr);
    align-content: center;
    align-items: center;
    column-gap: 3px;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 0;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line .enemy .combatant-heading {
    grid-area: 1 / 2;
    height: auto;
    margin: 0;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line .enemy .actor-name {
    min-height: 0;
    height: auto;
    padding: 0;
    font-size: .6rem;
    line-height: 1.1;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line .enemy .actor-mark {
    grid-area: 1 / 1 / 3 / 2;
    align-self: center;
    width: var(--battle-portrait-size);
    height: var(--battle-portrait-size);
    min-height: 0;
    max-height: none;
    margin: 0;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line .enemy .enemy-resource-meter {
    grid-area: 2 / 2;
    width: 100%;
    margin: 0;
    font-size: .52rem;
    line-height: 1.05;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy .enemy-states-dense {
    top: auto;
    bottom: 0;
    right: auto;
    left: 0;
    width: var(--battle-portrait-size);
    pointer-events: none;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline { top: 0; height: 24px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline-track { top: 22px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline-arrival { top: 18px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline-actor, body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline-portrait { width: 20px; height: 20px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline-portrait .actor-image { width: 19px; height: 18px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline-actor > i { left: 8px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battlefield-log-panel.is-collapsed {
    bottom: 2px;
    left: 4px;
    height: 26px;
    width: 66px;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battlefield-log-toggle { min-height: 24px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .command-dock {
    position: relative;
    grid-area: 2 / 2;
    align-self: stretch;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    margin: 0;
    padding: 4px;
    inset: auto;
    transform: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-skill-effect-hint { display: none; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-actions > * { grid-column: auto; min-width: 0; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .command-button {
    display: grid;
    grid-template: auto auto / 22px minmax(0, 1fr);
    gap: 1px 3px;
    min-height: 48px;
    padding: 3px;
    text-align: left;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .command-button > :is(img, .command-icon-slot, .command-symbol) { grid-area: 1 / 1 / 3 / 2; width: 22px; height: 22px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .command-label,
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .command-meta { justify-self: start; max-width: 100%; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-support-prompt { flex-wrap: wrap; gap: 2px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-result-dock { align-items: end; }
  body.battle-active:has(.battle-shell.immersive-battle) .global-chat { right: 0; bottom: 0; left: auto; }
  body.battle-active:has(.battle-shell.immersive-battle) .chat-peek { display: none; }
  body.battle-active:has(.battle-shell.immersive-battle) .chat-drawer { top: var(--app-header-height); bottom: 0; }
}

/* Narrow portrait battles reserve a separate log row, even with update notices
   and support targeting. Only the command deck scrolls when it needs more room. */
@media (orientation: portrait) and (max-width: 360px) and (max-height: 740px) {
  body.battle-active:has(.battle-shell.immersive-battle) main { overflow-y: auto; overflow-x: hidden; }
  body.battle-active:has(.battle-shell.immersive-battle) .chat-peek { display: none; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battlefield-log-toggle { min-height: 44px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle {
    display: grid;
    grid-template-rows: auto minmax(220px, 1fr) minmax(0, clamp(112px, 24dvh, 144px));
    gap: 0;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .arena {
    height: 100%;
    min-height: 0;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .combatants {
    --battle-portrait-size: 36px;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 6px;
    padding: 32px 4px 4px;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .party-line,
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line { gap: 4px; min-height: 0; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .party-line .party-member {
    left: 0;
    width: 100%;
    grid-template-columns: var(--battle-portrait-size) minmax(0, 1fr);
    column-gap: 3px;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .party-member .actor-mark {
    width: var(--battle-portrait-size);
    height: var(--battle-portrait-size);
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .party-member .combatant-heading { padding: 0 0 2px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .party-member .actor-name { padding: 0; font-size: .62rem; line-height: 1.1; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battlefield-vitals { padding: 0; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battlefield-vitals .resource-meter {
    grid-template-columns: 9px minmax(12px, 24px) max-content;
    gap: 2px;
    font-size: .55rem;
    line-height: 1.05;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battlefield-vitals .bar-icon { width: 9px; height: 9px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .party-member .ally-name-states {
    top: auto; bottom: 0; left: 0; width: var(--battle-portrait-size); pointer-events: none;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line .enemy {
    grid-template: auto auto / var(--battle-portrait-size) minmax(0, 1fr);
    align-items: center;
    align-content: center;
    column-gap: 3px;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
    padding: 0;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line .enemy .combatant-heading { grid-area: 1 / 2; height: auto; margin: 0; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line .enemy .actor-name { min-height: 0; height: auto; padding: 0; font-size: .6rem; line-height: 1.1; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line .enemy .actor-mark {
    grid-area: 1 / 1 / 3 / 2;
    align-self: center;
    width: var(--battle-portrait-size);
    height: var(--battle-portrait-size);
    min-height: 0;
    max-height: none;
    margin: 0;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line .enemy .enemy-resource-meter { grid-area: 2 / 2; width: 100%; margin: 0; font-size: .55rem; line-height: 1.05; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy .enemy-states-dense { top: auto; bottom: 0; right: auto; left: 0; width: var(--battle-portrait-size); pointer-events: none; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline { top: 0; height: 28px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline-track { top: 26px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline-arrival { top: 22px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline-actor,
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline-portrait { width: 20px; height: 20px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline-portrait .actor-image { width: 19px; height: 18px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-timeline-actor > i { left: 8px; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battlefield-log-panel.is-collapsed {
    position: relative;
    flex: 0 0 44px;
    align-self: flex-start;
    width: 76px;
    height: 44px;
    inset: auto;
    margin: 0 4px 4px;
  }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .command-dock {
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
  }
}

/* The battlefield isolates its layers; lift that context while its log is open
   so the update notice cannot cover the dialog heading or close control. */
@media (orientation: portrait) and (max-width: 360px) and (max-height: 740px) {
  body.battle-active.battle-log-modal-open .battle-shell.immersive-battle { z-index: 210; }
  body.battle-active.battle-log-modal-open .battle-log-dialog .dialog-close-button { width: 44px; min-width: 44px; height: 44px; min-height: 44px; }
}

/* 2201〜2300F 蒼穹の戦旗宮 */
body.battle-active .battle-shell.immersive-battle.battle-zone-221 { --battle-zone-image: url("/images/background/battle-221-azure-gate-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-222 { --battle-zone-image: url("/images/background/battle-222-white-sail-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-223 { --battle-zone-image: url("/images/background/battle-223-red-forge-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-224 { --battle-zone-image: url("/images/background/battle-224-tide-lance-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-225 { --battle-zone-image: url("/images/background/battle-225-green-bow-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-226 { --battle-zone-image: url("/images/background/battle-226-violet-thunder-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-227 { --battle-zone-image: url("/images/background/battle-227-silver-hawk-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-228 { --battle-zone-image: url("/images/background/battle-228-black-standard-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-229 { --battle-zone-image: url("/images/background/battle-229-gold-lion-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-230 { --battle-zone-image: url("/images/background/battle-230-sky-throne-portrait-anime-v3.webp?v=20261020-skybanner-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-221, .battle-zone-222, .battle-zone-223, .battle-zone-224, .battle-zone-225, .battle-zone-226, .battle-zone-227, .battle-zone-228, .battle-zone-229, .battle-zone-230) .arena::after { content: none; }

/* 2301〜2400F 紅蓮の誓剣城 */
body.battle-active .battle-shell.immersive-battle.battle-zone-231 { --battle-zone-image: url("/images/background/battle-231-ember-gate-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-232 { --battle-zone-image: url("/images/background/battle-232-ash-duel-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-233 { --battle-zone-image: url("/images/background/battle-233-molten-hammer-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-234 { --battle-zone-image: url("/images/background/battle-234-blue-flame-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-235 { --battle-zone-image: url("/images/background/battle-235-thorn-bow-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-236 { --battle-zone-image: url("/images/background/battle-236-thunder-judgment-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-237 { --battle-zone-image: url("/images/background/battle-237-silver-oath-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-238 { --battle-zone-image: url("/images/background/battle-238-obsidian-axe-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-239 { --battle-zone-image: url("/images/background/battle-239-last-ember-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-240 { --battle-zone-image: url("/images/background/battle-240-oath-throne-portrait-anime-v3.webp?v=20261020-emberoath-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-231, .battle-zone-232, .battle-zone-233, .battle-zone-234, .battle-zone-235, .battle-zone-236, .battle-zone-237, .battle-zone-238, .battle-zone-239, .battle-zone-240) .arena::after { content: none; }

/* 2401〜2500F 黒星の覇軍城 */
body.battle-active .battle-shell.immersive-battle.battle-zone-241 { --battle-zone-image: url("/images/background/battle-241-blackstar-gate-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-242 { --battle-zone-image: url("/images/background/battle-242-cinnabar-cavalry-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-243 { --battle-zone-image: url("/images/background/battle-243-bronze-bell-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-244 { --battle-zone-image: url("/images/background/battle-244-tealfang-bridge-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-245 { --battle-zone-image: url("/images/background/battle-245-venom-hive-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-246 { --battle-zone-image: url("/images/background/battle-246-amethyst-tribunal-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-247 { --battle-zone-image: url("/images/background/battle-247-white-raven-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-248 { --battle-zone-image: url("/images/background/battle-248-verdigris-bastion-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-249 { --battle-zone-image: url("/images/background/battle-249-golden-wolf-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-250 { --battle-zone-image: url("/images/background/battle-250-blackstar-throne-portrait-anime-v3.webp?v=20261020-blackstar-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-241, .battle-zone-242, .battle-zone-243, .battle-zone-244, .battle-zone-245, .battle-zone-246, .battle-zone-247, .battle-zone-248, .battle-zone-249, .battle-zone-250) .arena::after { content: none; }

/* 2501〜2600F 翠嵐の竜冠城 */
body.battle-active .battle-shell.immersive-battle.battle-zone-251 { --battle-zone-image: url("/images/background/battle-251-emerald-gate-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-252 { --battle-zone-image: url("/images/background/battle-252-red-gravel-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-253 { --battle-zone-image: url("/images/background/battle-253-amber-bone-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-254 { --battle-zone-image: url("/images/background/battle-254-blue-cascade-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-255 { --battle-zone-image: url("/images/background/battle-255-venom-bloom-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-256 { --battle-zone-image: url("/images/background/battle-256-violet-horn-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-257 { --battle-zone-image: url("/images/background/battle-257-white-cloud-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-258 { --battle-zone-image: url("/images/background/battle-258-green-iron-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-259 { --battle-zone-image: url("/images/background/battle-259-gold-hunt-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-260 { --battle-zone-image: url("/images/background/battle-260-dragon-crown-portrait-anime-v3.webp?v=20261021-dragoncrown-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-251, .battle-zone-252, .battle-zone-253, .battle-zone-254, .battle-zone-255, .battle-zone-256, .battle-zone-257, .battle-zone-258, .battle-zone-259, .battle-zone-260) .arena::after { content: none; }


/* Six selectable arts share two rows; auxiliary actions overlay the battlefield. */
body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .command-dock:has(.six-skill-actions) {
  padding: 0 4px env(safe-area-inset-bottom);
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
body.battle-active .battle-shell.immersive-battle .command-dock:has(.six-skill-actions)::before { display: none; }
body.battle-active .battle-shell.immersive-battle .battle-command-frame {
  min-width: 0;
  padding: 4px;
  border: 1px solid rgb(var(--battle-deck-crystal) / 26%);
  border-radius: 6px;
  background: radial-gradient(circle at 50% 0%, rgb(var(--battle-deck-crystal) / 8%), transparent 38%), linear-gradient(180deg, rgb(14 22 27 / 98%), rgb(5 9 12 / 99%));
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}
body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .six-skill-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .six-skill-actions > * { grid-column: auto; min-width: 0; }
body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .six-skill-actions .command-button {
  display: grid;
  grid-template: auto auto / 18px minmax(0, 1fr);
  align-content: center;
  justify-items: center;
  gap: 1px 2px;
  width: 100%;
  min-height: 48px;
  height: 100%;
  padding: 3px;
  text-align: center;
}
body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .six-skill-actions .command-button > :is(img, .command-icon-slot, .command-symbol) { grid-area: 1 / 1; width: 18px; height: 18px; }
body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .six-skill-actions .command-label {
  grid-area: 2 / 1 / 3 / 3;
  justify-self: center;
  font-size: .75rem;
  line-height: 1.15;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
  font-family: inherit;
}
body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .six-skill-actions .command-meta { grid-area: 1 / 2; justify-self: center; font-size: .625rem; line-height: 1.15; white-space: normal; overflow-wrap: anywhere; }
body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .arena > .battlefield-log-panel.is-collapsed {
  position: absolute;
  inset: auto 9px 4px;
  display: flex;
  align-items: center;
  gap: 4px;
  width: auto;
  min-height: 28px;
  flex-direction: row;
  flex-wrap: wrap;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
}
body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .arena > .battlefield-log-panel .battlefield-log-toggle { flex: 0 0 56px; width: 56px; height: 28px; min-height: 28px; padding: 2px 8px; border: 1px solid rgb(102 192 219 / 20%); border-radius: 4px; background: rgb(3 12 20 / 72%); }
body.battle-active .battle-shell.immersive-battle:has(.arena > .battlefield-log-panel) .combatants { padding-bottom: 36px; }
body.battle-active .battle-shell.immersive-battle:has(.arena > .battlefield-log-panel .chain-status) .combatants { padding-bottom: 68px; }
.battle-command-tools-spacer { flex: 1 1 0; }
/* Keep log, summon gauge and tactics on one row; chain readiness gets its own row. */
.battle-command-gauges { display: contents; }
.battle-command-gauges > .summon-command { margin-inline: auto; }
.battlefield-log-panel:has(.summon-command) > .battle-command-tools-spacer { display: none; }
.battle-command-gauges .chain-status { order: -1; flex: 0 0 100%; min-width: 0; flex-wrap: wrap; }
.battle-command-gauges .chain-status > div { flex-wrap: wrap; }
body.battle-active .battle-shell.immersive-battle .battle-tactics-button,
body.battle-active .battle-shell.immersive-battle .battle-team-reservation-button { display: flex; align-items: center; justify-content: center; gap: 4px; flex: 0 0 auto; min-width: 44px; min-height: 28px; height: 28px; padding: 2px 6px; border: 1px solid rgb(118 171 164 / 50%); border-radius: 4px; background: rgb(3 12 20 / 85%); color: var(--text); }
body.battle-active .battle-shell.immersive-battle .battle-tactics-button { width: 48px; font-size: .75rem; font-weight: 700; }
.battle-team-reservation-button strong { font-size: .75rem; font-weight: 500; }
body.battle-active .battle-shell.combat-animating .battle-tactics-button { pointer-events: auto; }

@media (orientation: portrait) and (max-width: 360px) and (max-height: 740px) {
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle { grid-template-rows: auto minmax(200px, 1fr) auto; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .command-dock { max-height: none; }
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .combatants { --battle-portrait-size: min(80px, max(36px, calc(30vw - 38px)), max(36px, calc((100cqh - 24px) / 3 - 32px))); }
}

/* 2601〜2700F 赫晶の獣王砦 */
body.battle-active .battle-shell.immersive-battle.battle-zone-261 { --battle-zone-image: url("/images/background/battle-261-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-262 { --battle-zone-image: url("/images/background/battle-262-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-263 { --battle-zone-image: url("/images/background/battle-263-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-264 { --battle-zone-image: url("/images/background/battle-264-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-265 { --battle-zone-image: url("/images/background/battle-265-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-266 { --battle-zone-image: url("/images/background/battle-266-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-267 { --battle-zone-image: url("/images/background/battle-267-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-268 { --battle-zone-image: url("/images/background/battle-268-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-269 { --battle-zone-image: url("/images/background/battle-269-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-270 { --battle-zone-image: url("/images/background/battle-270-beast-citadel-portrait-anime-v1.webp?v=20261024-beastcitadel-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-261, .battle-zone-262, .battle-zone-263, .battle-zone-264, .battle-zone-265, .battle-zone-266, .battle-zone-267, .battle-zone-268, .battle-zone-269, .battle-zone-270) .arena::after { content: none; }

/* 2701〜2800F 蒼鐘の星航宮 */
body.battle-active .battle-shell.immersive-battle.battle-zone-271 { --battle-zone-image: url("/images/background/battle-271-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-272 { --battle-zone-image: url("/images/background/battle-272-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-273 { --battle-zone-image: url("/images/background/battle-273-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-274 { --battle-zone-image: url("/images/background/battle-274-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-275 { --battle-zone-image: url("/images/background/battle-275-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-276 { --battle-zone-image: url("/images/background/battle-276-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-277 { --battle-zone-image: url("/images/background/battle-277-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-278 { --battle-zone-image: url("/images/background/battle-278-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-279 { --battle-zone-image: url("/images/background/battle-279-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-280 { --battle-zone-image: url("/images/background/battle-280-starvoyage-portrait-anime-v1.webp?v=20261025-starvoyage-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-271, .battle-zone-272, .battle-zone-273, .battle-zone-274, .battle-zone-275, .battle-zone-276, .battle-zone-277, .battle-zone-278, .battle-zone-279, .battle-zone-280) .arena::after { content: none; }

/* Compact battle utilities reclaim artwork height; main command hit areas stay unchanged. */
@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-header { display: grid; grid-template-columns: minmax(0, 1fr) max-content; align-items: center; gap: 4px; min-height: 38px; padding: 1px 6px; }
  .battle-shell.immersive-battle .battle-header-identity { min-width: 0; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-utility-controls { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 2px; width: auto; min-width: 0; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-auto-group { flex: 0 0 auto; width: auto; min-width: 74px; }
  body.battle-active .battle-shell.immersive-battle .battle-header .arena-duel-utility .battle-auto-group { min-width: 40px; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-utility-controls :is(.battle-loot-button, .battle-auto-button, .battle-auto-settings-button, .battle-speed-trigger, .battle-retreat-button) { flex-shrink: 0; min-width: 32px; min-height: 28px; height: 28px; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-utility-controls :is(.battle-loot-button, .battle-auto-settings-button, .battle-speed-trigger, .battle-retreat-button) { flex: 0 0 32px; width: 32px; padding-inline: 2px; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-auto-settings-button { flex: 0 0 32px; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-auto-button { min-width: 40px; padding-inline: 3px; gap: 3px; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-auto-button::before { font-size: .5rem; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-auto-button strong { font-size: .5625rem; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-utility-controls :is(.battle-loot-button, .battle-speed-trigger) { flex-basis: 36px; width: 36px; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-manual-turn-button { flex: 0 1 auto; width: 76px; max-width: 76px; min-width: 36px; }
  .battle-shell.immersive-battle .battle-utility-controls :is(.battle-loot-button, .battle-auto-button, .battle-auto-settings-button, .battle-speed-trigger, .battle-retreat-button) { min-width: 44px; min-height: 44px; height: 44px; }
  .battle-shell.immersive-battle .battle-auto-group { flex-shrink: 0; }
  .battle-shell.immersive-battle .battle-loot-button { width: 44px; }
  .battle-shell.immersive-battle .battle-auto-settings-button { width: 44px; }
  /* Log, team reservation and tactics share the compact 28px rules. */
  body.battle-active .battle-shell.immersive-battle:has(.arena > .battlefield-log-panel .battle-team-reservation-button):not(:has(.arena > .battlefield-log-panel .chain-status)) .combatants { padding-bottom: 52px; }
  .battle-log-dialog .dialog-close-button { width: 44px; min-width: 44px; min-height: 44px; height: 44px; }
}

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  /* Progress may use two short text lines inside the compact header row. */
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .battle-progress-title { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, max-content) auto; align-items: center; min-width: 0; min-height: 0; gap: 2px 4px; line-height: 1.1; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-floor-heading { display: contents; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-difficulty-label { grid-column: 1; grid-row: 2; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .5625rem; letter-spacing: 0; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-floor-label { grid-column: 1 / -1; grid-row: 1; min-width: 0; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .6875rem; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-floor-number { min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-phase-heading { display: block; grid-column: 2; grid-row: 2; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-phase-label { font-size: .5625rem; letter-spacing: 0; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-phase-progress { display: none; }
  body.battle-active .battle-shell.immersive-battle .battle-header .battle-round-label { grid-column: 3; grid-row: 2; justify-self: start; min-width: 0; margin: 0; padding: 0 2px; font-size: .625rem; line-height: 1.2; letter-spacing: 0; }
}
@media (max-width: 360px) {
  body.battle-active .battle-shell.immersive-battle.anomaly-battle .battle-header .battle-floor-heading { display: flex; flex-direction: row; align-items: baseline; grid-column: 1 / -1; grid-row: 1; gap: 3px; min-width: 0; }
  body.battle-active .battle-shell.immersive-battle.anomaly-battle .battle-header .battle-difficulty-label { flex: 0 1 auto; max-width: 55%; }
  body.battle-active .battle-shell.immersive-battle.anomaly-battle .battle-header .battle-floor-label { flex: 1 1 auto; }
  body.battle-active .battle-shell.immersive-battle.anomaly-battle .battle-header .battle-progress-title { grid-template-columns: minmax(0, max-content) auto; }
  body.battle-active .battle-shell.immersive-battle.anomaly-battle .battle-header .battle-phase-heading { grid-column: 1; grid-row: 2; }
  body.battle-active .battle-shell.immersive-battle.anomaly-battle .battle-header .battle-round-label { grid-column: 2; grid-row: 2; justify-self: start; }
}

@media (max-width: 700px), (max-height: 500px) and (pointer: coarse) {
  body.battle-active .battle-shell.immersive-battle .battlefield-vitals .bar-value { color: var(--text); text-shadow: 0 1px 2px #000; }
  .battle-shell.immersive-battle .battle-support-prompt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; }
  .battle-shell.immersive-battle .battle-support-prompt [data-action="close-battle-support"] { min-width: 44px; min-height: 44px; }
}

/* 2801〜2900F 黒曜の断層塔 */
body.battle-active .battle-shell.immersive-battle.battle-zone-281 { --battle-zone-image: url("/images/background/battle-281-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-282 { --battle-zone-image: url("/images/background/battle-282-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-283 { --battle-zone-image: url("/images/background/battle-283-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-284 { --battle-zone-image: url("/images/background/battle-284-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-285 { --battle-zone-image: url("/images/background/battle-285-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-286 { --battle-zone-image: url("/images/background/battle-286-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-287 { --battle-zone-image: url("/images/background/battle-287-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-288 { --battle-zone-image: url("/images/background/battle-288-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-289 { --battle-zone-image: url("/images/background/battle-289-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-290 { --battle-zone-image: url("/images/background/battle-290-obsidian-portrait-v1.webp?v=20261026-obsidian-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-281, .battle-zone-282, .battle-zone-283, .battle-zone-284, .battle-zone-285, .battle-zone-286, .battle-zone-287, .battle-zone-288, .battle-zone-289, .battle-zone-290) .arena::after { content: none; }

/* The portrait colosseum already contains its full floor; do not enlarge a
   second copy over the seating and arches. */
body.battle-active .battle-shell.immersive-battle.battle-zone-arena .arena::after { content: none; }

/* Arena formation: stagger both teams around an open center, with overhead vitals. */
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants {
  --battle-portrait-size: clamp(56px, calc(26vw - 32px), 70px);
  --arena-unit-width: calc(var(--battle-portrait-size) + 12px);
  --arena-meter-width: clamp(40px, 12vw, 52px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: 880px;
  align-self: center;
  padding: 64px 8px 46px;
}
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants :is(.party-line, .enemy-line) {
  grid-template: repeat(3, minmax(0, 1fr)) / minmax(0, 1fr);
  gap: 0;
  align-items: center;
}
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants :is(.party-member, .enemy) {
  --enemy-state-space: 0px;
  display: grid;
  grid-template: auto 4px 3px 3px auto var(--battle-portrait-size) / minmax(0, 1fr);
  align-items: center;
  align-content: center;
  justify-items: center;
  gap: 1px 0;
  width: var(--arena-unit-width);
  min-width: 0;
  height: auto;
  min-height: 44px;
  max-height: none;
  padding: 0 0 12px;
  left: auto;
  right: auto;
}
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .party-member { justify-self: start; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .enemy { justify-self: end; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .party-count-3 .formation-rear-upper { grid-row: 1; margin-inline-start: 32%; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .party-count-3 .formation-front-center { grid-row: 2; margin-inline-start: 6%; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .party-count-3 .formation-rear-lower { grid-row: 3; margin-inline-start: 20%; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .enemy-count-3 .enemy:nth-child(1) { grid-area: 1 / 1; margin-inline-end: 32%; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .enemy-count-3 .enemy:nth-child(2) { grid-area: 2 / 1; margin-inline-end: 6%; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .enemy-count-3 .enemy:nth-child(3) { grid-area: 3 / 1; margin-inline-end: 20%; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants :is(.party-count-1, .enemy-count-1) { grid-template-rows: 1fr; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants :is(.party-count-2, .enemy-count-2) { grid-template-rows: repeat(2, minmax(0, 1fr)); }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .party-line:not(.party-count-3) .party-member { grid-row: auto; margin-inline-start: 18%; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .enemy-line:not(.enemy-count-3) .enemy { grid-area: auto; margin-inline-end: 18%; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants :is(.party-member, .enemy) .actor-mark {
  grid-area: 6 / 1;
  width: var(--battle-portrait-size);
  height: var(--battle-portrait-size);
  min-height: 0;
  max-height: none;
  margin: 0;
  align-self: center;
}
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants :is(.party-member, .enemy) .combatant-heading { position: static; grid-area: 1 / 1; width: 100%; min-width: 0; height: auto; margin: 0; padding: 0; text-align: center; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .battle-name-line { justify-content: center; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants :is(.party-member, .enemy) .actor-name { display: block; max-width: 100%; height: auto; min-height: 0; padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .625rem; line-height: 1.2; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants :is(.party-member, .enemy) .battle-name-state { position: absolute; top: auto; bottom: 0; left: 0; right: auto; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 100%; height: auto; margin: 0; pointer-events: none; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .party-line .party-member .battle-acting-label { top: auto; bottom: 12px; left: auto; right: 2px; }
/* Keep the existing progress/value nodes, so live updates and accessible values work unchanged. */
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .battlefield-vitals,
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .battlefield-vitals .resource-meter { display: contents; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .battlefield-vitals .bar-resource,
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .battlefield-vitals .bar-value { display: none; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .battlefield-vitals .resource-meter > .bar { display: block; grid-column: 1; justify-self: center; align-self: stretch; width: var(--arena-meter-width); max-width: 100%; height: 100%; min-height: 0; border: 0; background: #14212d; box-shadow: 0 0 0 1px rgb(0 0 0 / 55%); }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .resource-meter.hp > .bar { grid-row: 2; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .resource-meter.mp > .bar { grid-row: 3; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .resource-meter.barrier > .bar { grid-row: 4; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .resource-meter.hp > .bar-value { display: block; grid-area: 5 / 1; justify-self: center; width: max-content; max-width: 100%; color: var(--text); font-size: .5625rem; line-height: 1.15; letter-spacing: -.03em; white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .bar::-webkit-progress-bar { background: #14212d; }
body.battle-active .battle-shell.immersive-battle .enemy-line .bar[data-resource=hp]::-webkit-progress-value { background: #ed6671; }
body.battle-active .battle-shell.immersive-battle .enemy-line .bar[data-resource=hp]::-moz-progress-bar { background: #ed6671; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .bar.barrier::-webkit-progress-value { background: #80dce5; }
body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants .bar.barrier::-moz-progress-bar { background: #80dce5; }
.arena-enemy-detail .enemy-detail-vitals { display: grid; grid-template-columns: minmax(0, 1fr); gap: 7px; font-size: .8rem; }
.arena-enemy-detail .enemy-detail-vitals > span { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; min-width: 0; }
.arena-enemy-detail .enemy-detail-vitals strong { min-width: 0; margin: 0; overflow-wrap: anywhere; text-align: right; }
@media (max-height: 740px) {
  body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants :is(.party-member, .enemy) .actor-name { font-size: .59375rem; line-height: 1.1; }
}
@media (orientation: landscape) and (max-height: 500px) and (max-width: 1100px) {
  body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .arena { overflow-y: auto; }
  body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants { --battle-portrait-size: 56px; flex: 0 0 440px; min-height: 440px; padding: 28px 12px 16px; }
  body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .arena > .battlefield-log-panel:is(.is-collapsed, .battlefield-log-panel) { position: relative; inset: auto; flex: 0 0 auto; margin: 0 8px 4px; }
}
@media (orientation: portrait) and (max-width: 360px) and (max-height: 740px) {
  body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .arena { overflow-y: auto; scrollbar-width: none; }
  body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .arena::-webkit-scrollbar { display: none; }
  body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .combatants { flex: 0 0 440px; min-height: 440px; padding: 40px 8px 14px; }
  body.battle-active:has(.arena-match) .battle-shell.arena-match.immersive-battle .arena > .battlefield-log-panel:is(.is-collapsed, .battlefield-log-panel) { position: relative; inset: auto; flex: 0 0 auto; margin: 0 8px 4px; }
}

/* Normal-tower matchup conditions must remain readable at narrow widths. */
.battle-state-badge.tower-matchup-state strong,
.battle-state-badge.tower-matchup-state small { font-size: .86rem; line-height: 1.5; }
.battle-state-badge.tower-matchup-state small { white-space: normal; overflow-wrap: anywhere; }

/* Five glyphs from Yuji Syuku, subset as GEAR Arena Start under SIL OFL 1.1.
   Copyright 2021 The Yuji Project Authors. License: /fonts/gear-arena-start/OFL.txt
   A tiny same-origin WOFF2 keeps the existing font CSP and is prepared before the cue. */
@font-face {
  font-family: "GEAR Arena Start";
  src: url("/fonts/gear-arena-start/gear-arena-start-v1.woff2?v=20261028-1") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+59CB, U+6226, U+958B, U+95D8, U+FF01;
}

/* Arena setup blocks actions under the existing request lock, then announces
   the start once. The ribbon uses no new image assets or per-frame JS work. */
.battle-asset-loading.arena-match-loading {
  z-index: 1200;
  inset: 0;
  width: auto;
  max-width: none;
  padding: 24px;
  transform: none;
  grid-template-columns: 24px minmax(0, 240px) auto;
  justify-content: center;
  align-content: center;
  border: 0;
  border-radius: 0;
  background: rgb(4 12 20 / 98%);
  pointer-events: auto;
}
.arena-start-cutin {
  --arena-start-duration: 1100ms;
  position: fixed;
  z-index: 1200;
  inset: 0;
  display: grid;
  align-content: center;
  overflow: hidden;
  background: linear-gradient(110deg, rgb(23 75 100 / 52%), rgb(3 9 17 / 66%) 48%, rgb(105 33 43 / 52%));
  animation: arena-start-fade var(--arena-start-duration) ease both;
}
.arena-start-ribbon {
  padding: 24px 12px;
  border-block: 1px solid rgb(224 202 128 / 75%);
  background: linear-gradient(90deg, transparent, rgb(5 15 25 / 94%) 18%, rgb(5 15 25 / 94%) 82%, transparent);
  color: #fff0b4;
  text-align: center;
  box-shadow: 0 0 24px rgb(0 0 0 / 38%);
  animation: arena-start-ribbon var(--arena-start-duration) cubic-bezier(.2,.7,.25,1) both;
}
.arena-start-ribbon strong {
  position: relative;
  isolation: isolate;
  display: block;
  width: max-content;
  max-width: 100%;
  margin-inline: auto;
  font-family: "GEAR Arena Start", "Yu Mincho", serif;
  font-size: clamp(2.25rem, 14vw, 5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: .06em;
  white-space: nowrap;
  color: #ffe5a0;
  -webkit-text-stroke: .5px #ffedc4;
  text-shadow: -2px 0 #17130d, 2px 0 #17130d, 0 -2px #17130d, 0 3px #090b10, 0 6px 10px #000, 0 0 18px rgb(225 187 93 / 35%);
  transform: skewX(-7deg) rotate(-2deg);
}
@keyframes arena-start-fade { 0%, 100% { opacity: 0; } 15%, 80% { opacity: 1; } }
@keyframes arena-start-ribbon { 0% { transform: translateX(-100%); } 22%, 78% { transform: translateX(0); } 100% { transform: translateX(100%); } }
.arena-start-cutin.reduced-motion,
.arena-start-cutin.reduced-motion .arena-start-ribbon { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .arena-start-cutin, .arena-start-ribbon { animation: none; }
}

/* 2901〜3000F 深緑の根冠塔 */
body.battle-active .battle-shell.immersive-battle.battle-zone-291 { --battle-zone-image: url("/images/background/battle-2901-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-292 { --battle-zone-image: url("/images/background/battle-2911-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-293 { --battle-zone-image: url("/images/background/battle-2921-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-294 { --battle-zone-image: url("/images/background/battle-2931-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-295 { --battle-zone-image: url("/images/background/battle-2941-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-296 { --battle-zone-image: url("/images/background/battle-2951-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-297 { --battle-zone-image: url("/images/background/battle-2961-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-298 { --battle-zone-image: url("/images/background/battle-2971-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-299 { --battle-zone-image: url("/images/background/battle-2981-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-300 { --battle-zone-image: url("/images/background/battle-2991-rootcrown-portrait-anime-v1.webp?v=20261029-rootcrown-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-301 { --battle-zone-image: url("/images/background/battle-3001-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-302 { --battle-zone-image: url("/images/background/battle-3011-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-303 { --battle-zone-image: url("/images/background/battle-3021-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-304 { --battle-zone-image: url("/images/background/battle-3031-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-305 { --battle-zone-image: url("/images/background/battle-3041-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-306 { --battle-zone-image: url("/images/background/battle-3051-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-307 { --battle-zone-image: url("/images/background/battle-3061-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-308 { --battle-zone-image: url("/images/background/battle-3071-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-309 { --battle-zone-image: url("/images/background/battle-3081-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-310 { --battle-zone-image: url("/images/background/battle-3091-copper-engine-portrait-v1.webp?v=20261106-copper-engine-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-311 { --battle-zone-image: url("/images/background/battle-3101-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-312 { --battle-zone-image: url("/images/background/battle-3111-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-313 { --battle-zone-image: url("/images/background/battle-3121-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-314 { --battle-zone-image: url("/images/background/battle-3131-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-315 { --battle-zone-image: url("/images/background/battle-3141-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-316 { --battle-zone-image: url("/images/background/battle-3151-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-317 { --battle-zone-image: url("/images/background/battle-3161-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-318 { --battle-zone-image: url("/images/background/battle-3171-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-319 { --battle-zone-image: url("/images/background/battle-3181-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
body.battle-active .battle-shell.immersive-battle.battle-zone-320 { --battle-zone-image: url("/images/background/battle-3191-white-ring-portrait-v1.webp?v=20261106-white-ring-v1"); }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-301, .battle-zone-302, .battle-zone-303, .battle-zone-304, .battle-zone-305, .battle-zone-306, .battle-zone-307, .battle-zone-308, .battle-zone-309, .battle-zone-310) .arena::after { content: none; }
body.battle-active .battle-shell.immersive-battle:is(.battle-zone-291, .battle-zone-292, .battle-zone-293, .battle-zone-294, .battle-zone-295, .battle-zone-296, .battle-zone-297, .battle-zone-298, .battle-zone-299, .battle-zone-300) .arena::after { content: none; }

/* Compact portrait puts the HP meter beside the illustration. Keep the same status start there. */
@media (orientation: portrait) and (max-width: 360px) and (max-height: 740px) {
  body.battle-active:has(.battle-shell.immersive-battle) .battle-shell.immersive-battle .enemy-line .enemy .enemy-name-states {
    left: calc(var(--battle-portrait-size) + 3px + max(0px, (100% - var(--battle-portrait-size) - 3px - 76px) / 2));
    right: 0;
    width: auto;
  }
}