/* The score, the stage and the state each have their own space. */
.shell[data-screen="battle"] .battle-layout {
  --fight-stage: 390px;
  --fight-inset: 16px;
  --fight-score: 92px;
}
.shell[data-screen="battle"] .battle-header { align-items: center; gap: 12px; }
.battle-header > h1 { flex: 1; min-width: 0; }
.battle-sound {
  flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px;
  padding: 0; border: 1px solid #526279; border-radius: 12px;
  background: #213043; color: #e1eccc;
}
.battle-sound .icon { width: 22px; height: 22px; }
.battle-sound[aria-pressed="true"] { border-color: #a7c879; background: #2a3b32; }
.battle-layout .combatants {
  position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch; gap: 0 24px; height: auto; min-height: 0;
  padding: var(--fight-inset); border: 1px solid #405267; border-radius: 18px;
  overflow: hidden; background: #162230;
}
.battle-layout .arena-3d.viewport-3d {
  inset: auto 0 auto; top: calc(var(--fight-inset) + var(--fight-score));
  height: var(--fight-stage); width: 100%; border-radius: 0;
}
.battle-layout .combatant {
  display: grid; grid-template-rows: 40px 24px 12px var(--fight-stage) minmax(28px, auto) minmax(34px, auto);
  gap: 4px; align-content: start; min-width: 0; height: auto; text-align: left;
}
.battle-layout .fighter-name {
  display: flex; align-items: end; min-height: 0; margin: 0; padding: 0 0 3px;
  color: #edf3ed; background: none; font-size: 17px; line-height: 1.12;
  text-shadow: none; overflow-wrap: anywhere;
}
.battle-layout .combatant.enemy .fighter-name { justify-content: end; text-align: right; }
.battle-layout .combatant.source-active .fighter-name { color: #edf3ed; }
.battle-layout .hp-label {
  align-items: center; flex-direction: row; flex-wrap: nowrap; min-height: 0;
  margin: 0; color: #cbd8e3; font-size: 14px; line-height: 1;
  text-shadow: none; font-variant-numeric: tabular-nums;
}
.battle-layout .hp-label > span:last-child { color: #edf3ed; font-weight: 800; }
.battle-layout .hp-track { height: 12px; background: #0b1420; border: 1px solid #465e69; border-radius: 5px; }
.battle-layout .hp-track i { border-radius: 3px; background: #a9da86; transition: width .18s ease-out; }
.battle-layout .combatant.enemy .hp-track i { background: #eeac87; }
.battle-layout .fighter { height: var(--fight-stage); min-height: 0; flex: none; margin: 0; }
.battle-layout .statuses {
  min-height: 28px; display: flex; flex-wrap: wrap; align-content: start;
  justify-content: start; gap: 5px; padding-top: 5px;
}
.battle-layout .combatant.enemy .statuses { justify-content: end; }
.battle-layout .status {
  max-width: 100%; padding: 4px 6px; font-size: 14px; line-height: 1.25;
  color: #d1e6f7; background: #253c50; border-color: #53758e; border-radius: 6px;
}
.battle-layout .status.burn { color: #ffd2ac; border-color: #ad7149; background: #4a3025; }
.battle-layout .charge-meter {
  min-height: 34px; margin: 2px 0 0; padding: 5px 0 0;
  border-top: 1px solid #384b60; text-align: left;
}
.battle-layout .charge-meter > div { flex-direction: row; align-items: center; gap: 5px 8px; }
.battle-layout .charge-meter b { font-size: 14px; line-height: 1.3; text-shadow: none; font-weight: 650; }
.battle-layout .charge-meter.passive { display: block; }
.battle-layout .charge-meter.passive b { color: #a8b9cd; }
.battle-layout .charge-meter small { display: none; }
.battle-layout .charge-pips { gap: 4px; }
.battle-layout .charge-pips i { width: 12px; height: 5px; border-radius: 3px; }
.battle-layout .charge-meter.ready b { color: #f5d58a; }
.battle-layout .charge-meter.ready .charge-pips i.filled { background: #f5d58a; }
.battle-layout .floating-effects { top: 17%; width: 100%; gap: 4px; }
.battle-layout .damage-pop {
  max-width: 100%; padding: 0 4px; color: #fff8df; font-size: 34px; line-height: 1;
  text-align: center; text-shadow: 0 2px 0 #162332, 0 0 5px #162332, 0 0 14px #162332;
  animation: combat-number .6s ease-out both;
}
.battle-layout .damage-pop.heal { color: #c6f79c; }
.battle-layout .damage-pop.shield, .battle-layout .damage-pop.dodge, .battle-layout .damage-pop.burn { font-size: 21px; }
.battle-layout .damage-pop.shield { color: #aadeff; }
.battle-layout .damage-pop.burn { color: #ffc689; }
.battle-layout .combat-moment {
  display: flex; flex-direction: row; align-items: center; gap: 12px;
  padding: 16px; min-height: 0; border: 1px solid #3d5065; border-left: 3px solid var(--moment-accent);
  border-radius: 13px; background: #1b2b3b; box-shadow: none;
}
.battle-layout .combat-moment-art { display: grid; place-items: center; min-width: 0; width: 28px; flex: 0 0 28px; }
.battle-layout .combat-moment-art > .icon { width: 28px; height: 28px; color: var(--moment-accent); }
.battle-layout .combat-moment-copy small { display: none; }
.battle-layout .combat-moment-copy strong { margin: 0 0 5px; font-size: 20px; line-height: 1.2; }
.battle-layout .combat-moment-copy p { margin: 0; font-size: 14px; line-height: 1.4; color: #becddd; }
.battle-layout .battle-aside { padding: 16px; }
.battle-layout .replay-tools { gap: 8px; margin-bottom: 0; }
.battle-layout .replay-tools .speed { min-height: 44px; }
.battle-layout .battle-journal { margin-top: 12px; }
.battle-layout .battle-journal summary { min-height: 44px; display: flex; align-items: center; font-size: 14px; color: #b5c5d6; }
.battle-layout .battle-aside > .center-note { display: none; }
.battle-control-hint { margin: 0 0 13px; color: #c0d2e1; font-size: 14px; line-height: 1.4; }
.battle-decision-panel { margin: 0 0 16px; padding: 0 0 16px; border-bottom: 1px solid #42546b; }
.battle-decision-panel h2 { margin: 0; color: #eef5d1; font-size: 23px; line-height: 1.15; }
.battle-decision-panel > p { margin: 8px 0 12px; color: #c0d2df; font-size: 14px; line-height: 1.4; }
.battle-boost-options { display: grid; gap: 9px; }
.battle-boost {
  min-width: 0; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 10px;
  align-items: center; padding: 12px; min-height: 68px; text-align: left;
  border: 1px solid #607453; border-radius: 11px; background: #2d3b2e; color: #eff2dd;
}
.battle-boost > .icon { grid-column: 1; grid-row: 1 / 3; width: 25px; height: 25px; color: #dfed95; }
.battle-boost strong { grid-column: 2; font-size: 17px; line-height: 1.15; }
.battle-boost small { grid-column: 2; display: block; color: #c5d0bd; font-size: 13px; line-height: 1.35; }
.battle-boost:hover { border-color: #e2ee9c; background: #39492f; }
.battle-boost:disabled { opacity: .6; }
@keyframes combat-number {
  from { opacity: 0; transform: translateY(7px) scale(.88); }
  15% { opacity: 1; transform: translateY(0) scale(1.08); }
  32% { transform: translateY(-4px) scale(1); }
  75% { opacity: 1; }
  to { opacity: 0; transform: translateY(-30px) scale(1); }
}
@media (min-width: 900px) {
  .battle-layout .combatants { grid-row: 1 / 3; }
  .battle-layout .combat-moment { margin: 0; }
  .battle-layout .fighter-name { font-size: 18px; }
}
@media (max-width: 899px) {
  .shell[data-screen="battle"] { padding-bottom: calc(18px + var(--safe-bottom)); }
  .shell[data-screen="battle"] .topbar, .shell[data-screen="battle"] .navbar { display: none; }
  .shell[data-screen="battle"] .main { padding-top: calc(14px + var(--safe-top)); }
  .shell[data-screen="battle"] .battle-header { gap: 8px; margin-bottom: 12px; }
  .shell[data-screen="battle"] .battle-header h1 { font-size: 22px; line-height: 1.1; letter-spacing: -.5px; }
  .shell[data-screen="battle"] .round-badge { padding: 7px; font-size: 12px; }
  .shell[data-screen="battle"] .battle-layout { --fight-stage: clamp(280px, 36dvh, 325px); --fight-inset: 12px; gap: 12px; }
  .battle-layout .combatants { gap: 0 14px; border-radius: 15px; }
  .battle-layout .fighter-name { font-size: 15px; }
  .battle-layout .combat-moment { margin-top: 10px; min-height: 76px; padding: 12px; }
  .battle-layout .combat-moment-copy strong { font-size: 18px; margin-bottom: 3px; }
  .battle-layout .combat-moment-copy p { font-size: 14px; line-height: 1.3; }
  .battle-layout .battle-aside { padding: 13px; }
  .battle-layout .battle-journal { margin-top: 7px; }
  .battle-boost-options { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .battle-boost { grid-template-columns: 1fr; justify-items: center; gap: 7px; padding: 12px 5px; text-align: center; }
  .battle-boost > .icon, .battle-boost strong, .battle-boost small { grid-column: 1; grid-row: auto; }
  .battle-boost strong { font-size: 15px; }
  .battle-boost small { font-size: 13px; }
}
@media (max-width: 359px) {
  .shell[data-screen="battle"] .battle-header { flex-wrap: wrap; }
  .shell[data-screen="battle"] .battle-header h1 { font-size: 20px; }
  .shell[data-screen="battle"] .round-badge { font-size: 11px; padding-inline: 6px; }
  .battle-sound { width: 40px; flex-basis: 40px; height: 44px; }
  .battle-layout .combatants { column-gap: 12px; }
  .battle-layout .fighter-name { font-size: 14px; }
  .battle-layout .hp-label { font-size: 13px; }
  .battle-layout .damage-pop { font-size: 30px; }
  .battle-layout .damage-pop.shield, .battle-layout .damage-pop.dodge, .battle-layout .damage-pop.burn { font-size: 18px; }
  .battle-boost-options { grid-template-columns: 1fr; }
  .battle-boost { grid-template-columns: 28px minmax(0, 1fr); justify-items: start; gap: 4px 10px; padding: 10px 12px; min-height: 62px; text-align: left; }
  .battle-boost > .icon { grid-column: 1; grid-row: 1 / 3; }
  .battle-boost strong, .battle-boost small { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .battle-layout .damage-pop { animation: none; }
  .battle-layout .hp-track i { transition: none; }
}
.shell.reduced-motion .battle-layout .damage-pop { animation: none; }

.battle-layout .replay-tools[hidden]{display:none}
.battle-decision-heading p{font-size:14px;color:#b8c9d4;line-height:1.4;margin:8px 0 13px}
.battle-decision-heading .eyebrow{display:block;font-size:12px;margin-bottom:9px;color:#daeaa9}
.battle-boost{position:relative}
.battle-boost .boost-symbol{font:700 29px/1 system-ui;text-align:center}
.boost-key{position:absolute;right:7px;top:4px;font-size:11px;color:#96b383}
.boost-warning{display:block;margin-top:5px;color:#f5cc99;font-size:12px}
.battle-action-error{font-size:15px;color:#ffd1be;padding:10px;border:1px solid #a06148;border-radius:10px}
.audio-volume{gap:20px;flex-wrap:wrap}.audio-volume label{display:flex;justify-content:space-between;gap:24px}.audio-volume input{accent-color:#ddea82;min-width:150px;min-height:44px;flex:1}.audio-volume output{color:#cfdfaa}.audio-status{font-size:14px;color:#b5c6a6}
.reduced-motion .battle-layout .damage-pop{animation:none}.reduced-motion .battle-layout .hp-track i{transition:none}
@media(max-width:899px){.boost-key{display:none}}

.battle-layout[data-phase="decision"] .combat-moment{display:none}
@media(max-width:899px){
  .shell[data-screen="battle"] .battle-layout[data-phase="decision"]{--fight-stage:clamp(210px,27dvh,238px)}
  .battle-layout[data-phase="decision"] .charge-meter{display:none}
  .battle-layout[data-phase="decision"] .combatant{grid-template-rows:40px 24px 12px var(--fight-stage) minmax(28px,auto)}
  .battle-decision-panel{margin-bottom:0;padding-bottom:0;border-bottom:0}
  .battle-decision-panel h2{font-size:21px}
  .battle-decision-heading .eyebrow{display:none}
  .battle-decision-panel>.ghost{min-height:42px;width:100%;margin-top:6px}
  .battle-layout[data-phase="decision"] .battle-journal{display:none}
}

#battle-decision-title:focus{outline:none}
@media(max-width:359px){
  .battle-boost-options{grid-template-columns:repeat(3,minmax(0,1fr))}
  .battle-boost{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px;padding:10px 3px;min-height:108px}
  .battle-boost>.icon,.battle-boost strong,.battle-boost small{grid-column:1;grid-row:auto}
  .battle-boost strong{font-size:15px}.battle-boost small{font-size:13px}
  .battle-decision-heading p{font-size:13px;margin:6px 0 10px}
  .battle-decision-panel h2{font-size:20px}
}