/* Canonical battle surface. Loaded after the shared application foundation. */

/* Iteration Q: reference battle screen */

.mini-app-shell[data-screen="fight"] {
  --battle-ink: var(--game-parchment);
  --battle-muted: var(--game-muted);
  --battle-panel: rgb(18 19 19 / 94%);
  --battle-panel-soft: rgb(30 29 27 / 88%);
  --battle-brass: var(--game-brass);
  --battle-brass-light: var(--game-brass-bright);
  --battle-defense: var(--game-teal);
  --battle-defense-dark: #254d4d;
  --battle-attack: var(--game-copper);
  --battle-attack-dark: #642e2c;
  --battle-display: var(--game-display);
  --battle-ui: var(--game-ui);
  background: #101212;
  border-inline-color: #24201b;
}

.mini-app-shell[data-screen="fight"] .app-header {
  display: none;
}

.mini-app-shell[data-screen="fight"] .app-main {
  padding: 0;
  color: var(--battle-ink);
  background: #101212;
}

.mini-app-shell[data-screen="fight"] .screen {
  min-height: 100dvh;
  gap: 0;
  animation: none;
  font-family: var(--battle-ui);
  background:
    linear-gradient(180deg, #111313, #1c1916 65%, #0e1010);
}

.arena-shell {
  position: relative;
  min-height: clamp(304px, 48dvh, 414px);
  overflow: hidden;
  isolation: isolate;
  background: #17191a;
  border-bottom: 1px solid #77613a;
  box-shadow: 0 8px 24px rgb(0 0 0 / 52%);
}

.arena-shell::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: auto 0 0;
  height: 33%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgb(9 10 10 / 78%));
}

.battle-stage {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  background-color: #17191a;
  background-image: linear-gradient(90deg, rgb(34 75 74 / 8%) 0 50%, rgb(100 38 34 / 8%) 50%);
}

.battle-stage__backdrop {
  position: absolute;
  z-index: 0;
  top: 39%;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
  transform: translateY(-39%);
  pointer-events: none;
  user-select: none;
}

.battle-stage::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 27% 38%, rgb(102 165 160 / 13%), transparent 25%),
    radial-gradient(circle at 73% 38%, rgb(198 110 93 / 12%), transparent 25%),
    linear-gradient(180deg, rgb(4 6 7 / 24%), transparent 24% 67%, rgb(5 6 6 / 38%));
}

.fight-hud-host,
.fight-phase-host,
.battle-arena-aux {
  display: contents;
}

.arena-shell--loading {
  min-height: clamp(405px, 58dvh, 500px);
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgb(184 149 82 / 15%), transparent 34%),
    linear-gradient(180deg, #17191a, #101212);
}

.arena-loading {
  display: grid;
  justify-items: center;
  gap: 8px;
  color: var(--battle-muted);
  font-family: var(--battle-ui);
  font-size: 12px;
  letter-spacing: .04em;
}

.arena-loading span {
  color: var(--battle-brass-light);
  font-size: 24px;
}

.duel-hud {
  position: absolute;
  z-index: 9;
  inset: 0 0 auto;
  padding:
    max(8px, env(safe-area-inset-top))
    max(10px, env(safe-area-inset-right))
    8px
    max(10px, env(safe-area-inset-left));
  color: var(--battle-ink);
  background: linear-gradient(180deg, rgb(6 8 9 / 92%), rgb(10 12 12 / 70%), transparent);
  border: 0;
  box-shadow: none;
  backdrop-filter: blur(2px);
}

.battle-round {
  min-height: 23px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  color: var(--battle-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.battle-round > span:first-child {
  padding-left: 2px;
  font-family: var(--battle-ui);
  font-weight: 700;
}

.battle-clock {
  min-height: 24px;
  padding: 4px 8px;
  color: #191714;
  background: linear-gradient(180deg, var(--battle-brass-light), #9a783d);
  border: 1px solid #e1ca91;
  border-radius: 4px;
  box-shadow: 0 2px 7px rgb(0 0 0 / 45%), inset 0 1px rgb(255 255 255 / 28%);
  font-family: var(--battle-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.battle-clock--calm,
.battle-clock--open,
.battle-clock--locked {
  color: #192322;
  background: linear-gradient(180deg, #b7d0c9, #668b87);
  border-color: #b8d8d2;
  box-shadow: 0 2px 7px rgb(0 0 0 / 45%), inset 0 1px rgb(255 255 255 / 25%);
}

.battle-clock--danger {
  color: #fff0e4;
  background: linear-gradient(180deg, #c46858, #6e2e2a);
  border-color: #d98877;
  box-shadow: 0 2px 7px rgb(0 0 0 / 45%);
}

.round-pips {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  width: 58px;
  margin: 0;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  transform: translateX(-50%);
}

.round-pips span {
  height: 4px;
  background: rgb(255 255 255 / 18%);
  border: 0;
  border-radius: 3px;
  box-shadow: 0 1px 2px rgb(0 0 0 / 50%);
}

.round-pips .is-current {
  background: var(--battle-brass-light);
  border: 0;
}

.round-pips .is-done {
  background: var(--battle-defense);
  border: 0;
}

.duel-hud__fighters {
  margin-top: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  align-items: center;
}

.duel-hud__fighter {
  min-width: 0;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.duel-hud__fighter--opponent {
  grid-template-columns: minmax(0, 1fr) 25px;
}

.duel-hud__versus {
  display: block;
  font-weight: 700;
  text-align: center;
}

.fighter-health {
  min-width: 0;
}

.fighter-health > span {
  display: flex;
  justify-content: space-between;
  gap: 5px;
  font-size: 10px;
}

.fighter-health b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fighter-health small {
  flex: none;
}

.fighter-health [role="meter"] {
  overflow: hidden;
}

.fighter-health [role="meter"] i {
  display: block;
  height: 100%;
}

.duel-hud__sigil {
  width: 25px;
  height: 25px;
  color: #172524;
  background: linear-gradient(145deg, #b7d0c9, #527a76);
  border: 1px solid #c8ddd8;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgb(0 0 0 / 55%), inset 0 1px rgb(255 255 255 / 28%);
  font-family: var(--battle-display);
  font-size: 12px;
}

.duel-hud__fighter:first-child .duel-hud__sigil {
  color: #172524;
}

.duel-hud__fighter--opponent .duel-hud__sigil {
  color: #311a19;
  background: linear-gradient(145deg, #d39a87, #83433d);
  border-color: #e0ac9d;
}

.duel-hud__versus {
  color: var(--battle-brass-light);
  font-family: var(--battle-display);
  font-size: 10px;
}

.fighter-health > span {
  color: var(--battle-ink);
  font-size: 10px;
  text-shadow: 0 1px 2px #000;
}

.fighter-health b {
  font-family: var(--battle-display);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.fighter-health small {
  color: var(--battle-muted);
  font-family: var(--battle-ui);
  font-size: 9px;
}

.fighter-health [role="meter"] {
  height: 7px;
  margin-top: 2px;
  background: rgb(4 7 7 / 85%);
  border: 1px solid rgb(231 220 193 / 28%);
  border-radius: 5px;
  box-shadow: inset 0 1px 3px #000;
}

.fighter-health [role="meter"] i,
.fighter-health--opponent [role="meter"] i {
  border: 0;
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 25%), transparent 48%),
    linear-gradient(90deg, #315e58, #6fa49c);
}

.fighter-health--opponent [role="meter"] i {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 23%), transparent 48%),
    linear-gradient(90deg, #7b3834, #c26b5b);
}

.battle-stage__fighters {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: 74px 4px 12px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
}

.arena-fighter {
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  filter: drop-shadow(0 8px 7px rgb(0 0 0 / 55%));
}

.fighter-nameplate {
  position: relative;
  z-index: 5;
  min-width: 0;
  margin: 0 7px 3px;
  padding: 2px 6px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  color: #e5f0e9;
  background: linear-gradient(90deg, rgb(23 50 49 / 88%), rgb(18 24 24 / 58%));
  border-left: 2px solid var(--battle-defense);
  text-shadow: 0 1px 2px #000;
}

.arena-fighter--opponent .fighter-nameplate {
  color: #f3e3dc;
  background: linear-gradient(270deg, rgb(73 31 29 / 90%), rgb(24 22 22 / 58%));
  border-right: 2px solid var(--battle-attack);
  border-left: 0;
}

.fighter-nameplate b {
  min-width: 0;
  overflow: hidden;
  font-family: var(--battle-display);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fighter-nameplate span {
  flex: none;
  color: var(--battle-muted);
  font-size: 8px;
}

.fighter-loadout {
  min-width: 0;
  display: grid;
  grid-template-columns: clamp(25px, 7.4vw, 31px) minmax(0, 1fr) clamp(25px, 7.4vw, 31px);
  gap: 2px;
  align-items: end;
}

.gear-rail {
  position: relative;
  z-index: 4;
  display: grid;
  align-self: end;
  gap: 2px;
}

.gear-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  padding: 3px;
  display: grid;
  place-items: center;
  color: #d4c28d;
  background:
    radial-gradient(circle at 38% 28%, rgb(255 239 190 / 16%), transparent 45%),
    linear-gradient(145deg, rgb(63 57 48 / 96%), rgb(19 20 20 / 96%));
  border: 1px solid #6f6044;
  border-radius: 4px;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 12%),
    inset 0 0 8px rgb(0 0 0 / 62%),
    0 1px 3px rgb(0 0 0 / 70%);
  cursor: pointer;
}

.arena-fighter--opponent .gear-slot {
  color: #d7b0a1;
  border-color: #704a43;
}

.gear-slot--masterwork::after,
.gear-slot--rare::after,
.gear-slot--uncommon::after {
  content: "";
  position: absolute;
  inset: 2px;
  pointer-events: none;
  border: 1px solid rgb(210 174 92 / 48%);
  border-radius: 2px;
}

.gear-slot--masterwork {
  border-color: #9a80b3;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 16%),
    inset 0 0 8px rgb(53 30 72 / 68%),
    0 0 5px rgb(126 90 161 / 46%);
}

.gear-slot--masterwork::after {
  border-color: rgb(220 186 116 / 72%);
  box-shadow: inset 0 0 0 1px rgb(122 89 155 / 55%);
}

.gear-slot--uncommon::after {
  border-color: rgb(105 165 158 / 45%);
}

.gear-slot svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 1px 1px #000);
}

.gear-icon__solid {
  fill: currentColor;
  fill-opacity: .2;
}

.gear-slot--empty {
  color: rgb(194 180 148 / 23%);
  background:
    linear-gradient(145deg, rgb(20 22 22 / 76%), rgb(8 10 10 / 88%));
  border-color: rgb(154 140 108 / 25%);
  border-style: dashed;
  box-shadow: inset 0 0 7px rgb(0 0 0 / 70%);
  cursor: default;
}

.arena-fighter--opponent .gear-slot--empty {
  color: rgb(196 153 143 / 20%);
  border-color: rgb(157 102 93 / 25%);
}

.gear-slot--empty svg {
  filter: none;
  stroke-width: 1.35;
}

.gear-slot--empty .gear-icon__solid {
  fill-opacity: .035;
}

.gear-slot:hover,
.gear-slot:focus-visible {
  color: #fff0bd;
  border-color: var(--battle-brass-light);
  box-shadow: 0 0 0 2px rgb(224 196 126 / 24%), inset 0 0 8px #000;
}

.gear-slot--empty:hover {
  color: rgb(194 180 148 / 23%);
  border-color: rgb(154 140 108 / 25%);
  box-shadow: inset 0 0 7px rgb(0 0 0 / 70%);
}

.paper-doll-wrap {
  position: relative;
  min-width: 0;
  height: clamp(188px, 29dvh, 246px);
  display: grid;
  place-items: end center;
}

.paper-doll {
  width: min(100%, 124px);
  height: 100%;
  overflow: visible;
  filter:
    drop-shadow(-2px 1px 1px rgb(218 194 139 / 10%))
    drop-shadow(0 10px 6px rgb(0 0 0 / 78%));
}

.arena-fighter--opponent .paper-doll {
  transform: scaleX(-1);
}

.battle-stage__center {
  position: absolute;
  z-index: 3;
  top: 78px;
  bottom: 9px;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgb(213 188 130 / 38%) 28%, rgb(213 188 130 / 15%) 75%, transparent);
}

.battle-stage__center span {
  position: absolute;
  inset: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgb(0 0 0 / 55%) 38%, transparent);
  transform: translateX(1px);
}

.battle-stage__center i {
  position: absolute;
  top: 42%;
  left: 50%;
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  color: #1a1712;
  background: linear-gradient(145deg, #e3cb8a, #8e6d35);
  border: 1px solid #ead59e;
  border-radius: 50%;
  box-shadow: 0 4px 9px rgb(0 0 0 / 65%);
  transform: translate(-50%, -50%);
  font-family: var(--battle-display);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
}

.battle-stage__waiting {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 12px;
  min-height: 30px;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #e8dfcd;
  background: rgb(14 17 17 / 84%);
  border: 1px solid rgb(194 177 137 / 48%);
  border-radius: 16px;
  box-shadow: 0 4px 12px rgb(0 0 0 / 50%);
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
}

.battle-stage__waiting span {
  color: var(--battle-defense);
  font-size: 15px;
}

.arena-impact {
  position: absolute;
  z-index: 7;
  left: 50%;
  min-width: 62px;
  padding: 4px 7px;
  display: grid;
  justify-items: center;
  color: #f9efe0;
  background: rgb(81 34 31 / 92%);
  border: 1px solid #e2947f;
  border-radius: 5px;
  box-shadow: 0 0 0 3px rgb(189 88 70 / 16%), 0 5px 12px rgb(0 0 0 / 62%);
  transform: translateX(-50%);
  text-shadow: 0 1px 2px #000;
}

.arena-impact--head {
  top: 12%;
}

.arena-impact--body {
  top: 43%;
}

.arena-impact--legs {
  top: 72%;
}

.arena-impact--guard {
  color: #e4f0ea;
  background: rgb(27 65 63 / 94%);
  border-color: #8ec1bb;
  box-shadow: 0 0 0 3px rgb(98 160 153 / 16%), 0 5px 12px rgb(0 0 0 / 62%);
}

.arena-impact--dodge {
  color: #e8f4f1;
  background: rgb(35 67 73 / 94%);
  border-color: #91c6c3;
  box-shadow: 0 0 0 3px rgb(111 184 178 / 16%), 0 5px 12px rgb(0 0 0 / 62%);
}

.arena-impact b {
  font-family: var(--battle-display);
  font-size: 14px;
  line-height: 1;
}

.arena-impact small {
  margin-top: 2px;
  font-size: 8px;
}

.arena-fighter.is-hit .paper-doll {
  animation: arena-hit-left 220ms cubic-bezier(.2, .8, .4, 1);
}

.arena-fighter--opponent.is-hit .paper-doll {
  animation-name: arena-hit-right;
}

@keyframes arena-hit-left {
  45% { transform: translateX(-7px) rotate(-1.5deg); filter: brightness(1.45) sepia(.3); }
}

@keyframes arena-hit-right {
  45% { transform: scaleX(-1) translateX(-7px) rotate(-1.5deg); filter: brightness(1.45) sepia(.3); }
}

.combat-form,
.battle-state-panel,
.reveal-console {
  position: relative;
  z-index: 8;
  padding:
    8px
    max(8px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom))
    max(8px, env(safe-area-inset-left));
  display: grid;
  gap: 7px;
  color: var(--battle-ink);
  background:
    linear-gradient(180deg, rgb(34 31 27 / 96%), rgb(15 17 17 / 99%)),
    repeating-linear-gradient(90deg, transparent 0 31px, rgb(255 255 255 / 2%) 31px 32px);
  border-top: 1px solid rgb(226 199 136 / 24%);
}

.command-heading {
  min-height: 27px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.command-heading p,
.command-heading span {
  margin: 0;
}

.command-heading p {
  color: var(--battle-brass-light);
  font-family: var(--battle-display);
  font-size: 15px;
  font-weight: 700;
}

.command-heading span {
  color: var(--battle-muted);
  font-size: 9px;
  text-align: right;
}

.command-heading span b:first-child {
  color: #9dc7c2;
}

.command-heading span b:last-child {
  color: #dfa493;
}

.combat-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.battle-action {
  min-width: 0;
  margin: 0;
  padding: 0;
  background: rgb(6 8 8 / 28%);
  border: 1px solid rgb(184 166 125 / 24%);
  border-radius: 6px;
  overflow: hidden;
}

.battle-action legend {
  width: 100%;
  min-height: 39px;
  padding: 5px 7px;
  display: flex;
  align-items: center;
  gap: 7px;
  color: #d7e8e3;
  background: linear-gradient(90deg, rgb(42 83 80 / 84%), rgb(22 27 26 / 85%));
  border-bottom: 1px solid rgb(129 183 176 / 30%);
}

.battle-action--attack legend {
  color: #f0d9d2;
  background: linear-gradient(90deg, rgb(95 43 39 / 84%), rgb(28 23 23 / 85%));
  border-bottom-color: rgb(206 123 103 / 30%);
}

.battle-action legend > i {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  flex: none;
  color: #d4ece7;
  background: rgb(9 17 17 / 55%);
  border: 1px solid rgb(149 197 190 / 35%);
  border-radius: 50%;
  font-style: normal;
}

.battle-action--attack legend > i {
  color: #f0c2b4;
  border-color: rgb(224 146 126 / 35%);
}

.battle-action legend b,
.battle-action legend small {
  display: block;
}

.battle-action legend b {
  font-family: var(--battle-display);
  font-size: 13px;
}

.battle-action legend small {
  margin-top: 1px;
  color: var(--battle-muted);
  font-size: 8px;
}

.battle-action__options {
  padding: 4px;
  display: grid;
  gap: 3px;
}

.battle-zone {
  min-width: 0;
}

.battle-zone input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.battle-zone label {
  min-height: 44px;
  padding: 4px 5px;
  display: grid;
  grid-template-columns: 25px minmax(0, 1fr);
  grid-template-areas:
    "icon name"
    "icon detail";
  align-items: center;
  column-gap: 5px;
  color: #dfd7c8;
  background: linear-gradient(180deg, rgb(57 54 49 / 80%), rgb(30 31 30 / 90%));
  border: 1px solid rgb(177 162 127 / 25%);
  border-radius: 4px;
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
  cursor: pointer;
}

.battle-zone label > span {
  grid-area: icon;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--battle-defense);
  border: 1px solid rgb(100 165 159 / 38%);
  border-radius: 50%;
  font-size: 11px;
}

.battle-action--attack .battle-zone label > span {
  color: var(--battle-attack);
  border-color: rgb(205 112 94 / 38%);
}

.battle-zone label b {
  grid-area: name;
  align-self: end;
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-zone label small {
  grid-area: detail;
  align-self: start;
  overflow: hidden;
  color: #9e9585;
  font-size: 7px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-zone input:focus-visible + label {
  outline: 2px solid var(--battle-brass-light);
  outline-offset: 1px;
}

.battle-zone input:checked + label {
  color: #f1fffb;
  background:
    linear-gradient(90deg, rgb(60 115 109 / 88%), rgb(27 48 47 / 94%));
  border-color: #91c8c1;
  box-shadow: 0 0 0 2px rgb(103 167 160 / 16%), inset 0 1px rgb(255 255 255 / 12%);
}

.battle-action--attack .battle-zone input:checked + label {
  color: #fff1ed;
  background:
    linear-gradient(90deg, rgb(122 55 49 / 91%), rgb(58 31 30 / 96%));
  border-color: #dc927f;
  box-shadow: 0 0 0 2px rgb(198 107 89 / 16%), inset 0 1px rgb(255 255 255 / 12%);
}

.battle-zone input:checked + label > span {
  color: #10201f;
  background: #9ecdc7;
  border-color: #d3ece8;
}

.battle-action--attack .battle-zone input:checked + label > span {
  color: #361817;
  background: #e4a18e;
  border-color: #f3c1b3;
}

.commit-panel {
  padding: 0;
  display: grid;
  gap: 6px;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.mini-app-shell[data-screen="fight"] .primary-button {
  min-height: 46px;
  color: #201b13;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 20%), transparent 45%),
    linear-gradient(180deg, #d1ae63, #8d6c36);
  border: 1px solid #e1c47e;
  border-radius: 7px;
  box-shadow: 0 3px 0 #4f3a1c, 0 5px 12px rgb(0 0 0 / 42%), inset 0 1px rgb(255 255 255 / 28%);
  font-family: var(--battle-display);
  font-size: 15px;
  text-shadow: 0 1px rgb(255 255 255 / 25%);
}

.mini-app-shell[data-screen="fight"] .primary-button:hover {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 28%), transparent 48%),
    linear-gradient(180deg, #dfc078, #9d7a3e);
}

.mini-app-shell[data-screen="fight"] .primary-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #4f3a1c, 0 3px 7px rgb(0 0 0 / 42%);
}

.mini-app-shell[data-screen="fight"] .primary-button:disabled {
  color: #746b5d;
  background: linear-gradient(180deg, #4a4842, #302f2c);
  border-color: #5d574b;
  box-shadow: none;
  text-shadow: none;
}

.battle-state-panel {
  min-height: 210px;
  align-content: start;
  padding-top: 13px;
}

.battle-state-panel__heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.waiting-lock__seal {
  position: relative;
  width: 35px;
  height: 35px;
  margin: 0;
  display: grid;
  place-items: center;
  color: #d9eee8;
  background: #294d4b;
  border: 1px solid #7caaa4;
  border-radius: 50%;
  font-family: var(--battle-ui);
  font-size: 15px;
}

.waiting-lock__seal i,
.locked-choices__link i,
.impact-burst i {
  display: none;
}

.battle-state-panel__heading p {
  margin: 0;
}

.battle-state-panel__heading b,
.battle-state-panel__heading small {
  display: block;
}

.battle-state-panel__heading b {
  color: var(--battle-brass-light);
  font-family: var(--battle-display);
  font-size: 15px;
}

.battle-state-panel__heading small {
  margin-top: 2px;
  color: var(--battle-muted);
  font-size: 9px;
}

.locked-choices {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
}

.locked-choices > div {
  min-width: 0;
}

.locked-choices > div > small {
  display: block;
  margin-bottom: 3px;
  color: var(--battle-muted);
  font-size: 8px;
  text-align: center;
}

.locked-choices__link {
  height: 1px;
  background: rgb(217 194 143 / 34%);
}

.choice-badge {
  min-height: 38px;
  color: var(--battle-ink);
  background: rgb(8 10 10 / 55%);
  border: 1px solid rgb(174 157 119 / 24%);
  border-radius: 4px;
}

.choice-badge small {
  color: var(--battle-muted);
}

.choice-badge--attack b {
  color: #e2a090;
}

.choice-badge--block b {
  color: #9ac6c0;
}

.opponent-choice-sealed {
  min-height: 79px;
  padding: 8px;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 2px;
  color: #c5bba7;
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 3%) 0 6px, transparent 6px 12px),
    rgb(8 10 10 / 48%);
  border: 1px dashed rgb(181 160 118 / 34%);
  border-radius: 4px;
}

.opponent-choice-sealed i {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  color: #9f9686;
  border: 1px solid rgb(181 160 118 / 34%);
  border-radius: 50%;
  font-size: 13px;
  font-style: normal;
}

.opponent-choice-sealed b {
  color: #ded4c1;
  font-family: var(--battle-display);
  font-size: 13px;
}

.opponent-choice-sealed small {
  color: var(--battle-muted);
  font-size: 9px;
}

.reveal-console {
  min-height: 252px;
  align-content: start;
}

.reveal-heading {
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  text-align: left;
}

.reveal-heading p,
.reveal-heading h2 {
  margin: 0;
}

.reveal-heading p {
  flex: none;
  color: var(--battle-muted);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.reveal-heading h2 {
  color: var(--battle-brass-light);
  font-family: var(--battle-display);
  font-size: clamp(15px, 4.8vw, 18px);
  line-height: 1.05;
  text-align: right;
}

.combat-explanation {
  display: grid;
  gap: 4px;
}

.combat-explanation p {
  min-height: 38px;
  margin: 0;
  padding: 6px 7px;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 4px;
  color: #d9d1c2;
  background: rgb(8 10 10 / 52%);
  border: 1px solid rgb(181 160 118 / 22%);
  border-radius: 4px;
  font-size: 9px;
}

.combat-explanation p.is-hit {
  border-left: 3px solid var(--battle-attack);
}

.combat-explanation p.is-blocked {
  border-left: 3px solid var(--battle-defense);
}

.item-dialog {
  width: min(calc(100% - 28px), 360px);
  padding: 0;
  color: #eee4d2;
  background:
    linear-gradient(180deg, rgb(42 38 32 / 98%), rgb(14 16 16 / 99%));
  border: 1px solid #a58850;
  border-radius: 9px;
  box-shadow: 0 18px 55px rgb(0 0 0 / 72%), inset 0 1px rgb(255 255 255 / 10%);
}

.item-dialog::backdrop {
  background: rgb(4 6 7 / 72%);
  backdrop-filter: blur(3px);
}

.item-dialog form {
  padding: 18px;
  display: grid;
  justify-items: center;
  text-align: center;
}

.item-dialog__icon {
  width: 64px;
  height: 64px;
  padding: 12px;
  color: #e0c67f;
  background: radial-gradient(circle, #544b38, #161818 72%);
  border: 1px solid #9e824e;
  border-radius: 8px;
  box-shadow: inset 0 0 14px #000, 0 5px 14px rgb(0 0 0 / 45%);
}

.item-dialog__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.item-dialog .eyebrow {
  margin: 11px 0 3px;
  color: #b7a987;
}

.item-dialog h2 {
  margin: 0;
  font-family: var(--game-display);
  font-size: 22px;
}

.item-dialog p:not(.eyebrow) {
  margin: 8px 0 15px;
  color: #bfb5a3;
  line-height: 1.4;
}

.item-dialog .primary-button {
  width: 100%;
  min-height: 46px;
  color: #201b13;
  background: linear-gradient(180deg, #d1ae63, #8d6c36);
  border: 1px solid #e1c47e;
  border-radius: 7px;
  font-family: var(--game-display);
  font-weight: 700;
}

@media (max-width: 360px) {
  .arena-shell {
    min-height: clamp(292px, 45dvh, 322px);
  }

  .duel-hud {
    padding-inline: max(6px, env(safe-area-inset-left));
  }

  .battle-stage__backdrop {
    top: 37%;
    transform: translateY(-37%);
  }

  .battle-stage__fighters {
    padding: 69px 2px 9px;
  }

  .fighter-nameplate {
    margin-inline: 3px;
    padding-inline: 4px;
  }

  .fighter-nameplate b {
    font-size: 10px;
  }

  .fighter-loadout {
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    gap: 1px;
  }

  .gear-rail {
    gap: 1px;
  }

  .gear-slot {
    padding: 2px;
  }

  .paper-doll-wrap {
    height: clamp(165px, 26dvh, 188px);
  }

  .battle-stage__center {
    top: 72px;
  }

  .command-heading span {
    display: none;
  }

  .combat-form,
  .battle-state-panel,
  .reveal-console {
    padding-inline: max(6px, env(safe-area-inset-left));
  }

  .combat-choice-grid {
    gap: 5px;
  }

  .battle-action legend {
    padding-inline: 5px;
  }

  .battle-action legend > i {
    width: 23px;
    height: 23px;
  }

  .battle-zone label {
    min-height: 44px;
    grid-template-columns: 22px minmax(0, 1fr);
  }

  .battle-zone label > span {
    width: 21px;
    height: 21px;
  }

  .battle-state-panel {
    min-height: 205px;
  }

  .reveal-console {
    min-height: 255px;
  }
}

@media (min-height: 860px) {
  .arena-shell {
    min-height: 420px;
  }

  .paper-doll-wrap {
    height: 252px;
  }
}

/* Iteration R: phone readability and combat to depletion */

.mini-app-shell[data-screen="fight"] .arena-shell {
  min-height: clamp(292px, 43dvh, 372px);
}

.mini-app-shell[data-screen="fight"] .duel-hud {
  padding-bottom: 7px;
}

.mini-app-shell[data-screen="fight"] .battle-round {
  min-height: 27px;
  font-size: 12px;
  letter-spacing: 0.045em;
}

.mini-app-shell[data-screen="fight"] .battle-clock {
  min-height: 27px;
  padding: 5px 8px;
  font-size: 12px;
}

.mini-app-shell[data-screen="fight"] .turn-progress {
  position: relative;
  height: 6px;
  margin: 4px 0 3px;
  overflow: hidden;
  background: rgb(3 6 7 / 86%);
  border: 1px solid rgb(220 200 151 / 38%);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px #000;
}

.mini-app-shell[data-screen="fight"] .turn-progress > span {
  width: var(--turn-progress);
  height: 100%;
  display: block;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 34%), transparent 50%),
    linear-gradient(90deg, #507f7b, #b9a15f);
  border-right: 2px solid #f0d792;
  box-shadow: 0 0 7px rgb(213 185 112 / 48%);
  transition: width 1s linear;
}

.mini-app-shell[data-screen="fight"] .turn-progress--danger > span {
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 16%) 0 4px, transparent 4px 8px),
    linear-gradient(90deg, #9a3e35, #d47a62);
  border-right-color: #ffd0bc;
  box-shadow: 0 0 8px rgb(211 91 72 / 72%);
}

.mini-app-shell[data-screen="fight"] .duel-hud__fighters {
  grid-template-columns: minmax(0, 1fr) 28px minmax(0, 1fr);
  gap: 5px;
}

.mini-app-shell[data-screen="fight"] .duel-hud__versus {
  color: var(--battle-brass-light);
  font-size: 12px;
  text-shadow: 0 1px 3px #000;
}

.mini-app-shell[data-screen="fight"] .fighter-health > span {
  font-size: 12px;
}

.mini-app-shell[data-screen="fight"] .fighter-health b {
  font-size: 14px;
}

.mini-app-shell[data-screen="fight"] .fighter-health small {
  font-size: 11px;
  font-weight: 700;
}

.mini-app-shell[data-screen="fight"] .fighter-health em {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #c9bea9;
  font-size: 10px;
  font-style: normal;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-app-shell[data-screen="fight"] .fighter-health--opponent em {
  text-align: right;
}

.mini-app-shell[data-screen="fight"] .fighter-health [role="meter"] {
  height: 9px;
  margin-top: 3px;
}

.mini-app-shell[data-screen="fight"] .battle-stage__fighters {
  padding: 105px 0 8px;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
}

.mini-app-shell[data-screen="fight"] .arena-fighter:first-child {
  grid-column: 1;
}

.mini-app-shell[data-screen="fight"] .arena-fighter--opponent {
  grid-column: 3;
}

.mini-app-shell[data-screen="fight"] .fighter-nameplate {
  margin-inline: 2px;
  padding: 3px 5px;
}

.mini-app-shell[data-screen="fight"] .fighter-nameplate b {
  font-size: 13px;
}

.mini-app-shell[data-screen="fight"] .fighter-nameplate span {
  font-size: 10px;
}

.mini-app-shell[data-screen="fight"] .fighter-loadout {
  grid-template-columns: clamp(22px, 6.7vw, 29px) minmax(0, 1fr) clamp(22px, 6.7vw, 29px);
  gap: 1px;
}

.mini-app-shell[data-screen="fight"] .gear-rail {
  gap: 1px;
}

.mini-app-shell[data-screen="fight"] .paper-doll-wrap {
  height: clamp(168px, 25dvh, 216px);
}

.mini-app-shell[data-screen="fight"] .battle-stage__center {
  top: 105px;
  bottom: 8px;
  left: 50%;
  width: 18px;
  background: none;
  transform: translateX(-50%);
}

.mini-app-shell[data-screen="fight"] .battle-stage__center span {
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgb(213 188 130 / 32%) 25%, rgb(213 188 130 / 15%) 78%, transparent);
}

.mini-app-shell[data-screen="fight"] .battle-stage__center i {
  display: none;
}

.mini-app-shell[data-screen="fight"] .battle-action legend {
  height: 60px;
  min-height: 60px;
  padding: 6px 7px;
}

.mini-app-shell[data-screen="fight"] .battle-action legend > span:last-child {
  min-width: 0;
  display: grid;
  align-content: center;
}

.mini-app-shell[data-screen="fight"] .command-heading span {
  font-size: 11px;
}

.mini-app-shell[data-screen="fight"] .battle-action legend > i {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

.mini-app-shell[data-screen="fight"] .battle-action legend b {
  font-size: 15px;
}

.mini-app-shell[data-screen="fight"] .battle-action legend small {
  min-height: 2.3em;
  margin-top: 2px;
  display: -webkit-box;
  overflow: hidden;
  font-size: 10px;
  line-height: 1.15;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mini-app-shell[data-screen="fight"] .battle-action__options {
  padding: 4px;
  gap: 4px;
}

.mini-app-shell[data-screen="fight"] .battle-zone label {
  min-height: 52px;
  padding: 5px 6px;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 6px;
}

.mini-app-shell[data-screen="fight"] .battle-zone label > span {
  width: 28px;
  height: 28px;
  font-size: 13px;
}

.mini-app-shell[data-screen="fight"] .battle-zone label b {
  font-size: 14px;
  line-height: 1.1;
}

.mini-app-shell[data-screen="fight"] .battle-zone label small {
  font-size: 10px;
  line-height: 1.15;
}

.mini-app-shell[data-screen="fight"] .combat-explanation p {
  font-size: 11px;
  line-height: 1.3;
}

@media (max-width: 360px) {
  .mini-app-shell[data-screen="fight"] .duel-hud__fighters {
    gap: 3px;
  }

  .mini-app-shell[data-screen="fight"] .fighter-health em {
    font-size: 9px;
  }

  .mini-app-shell[data-screen="fight"] .battle-stage__fighters {
    padding-top: 104px;
  }

  .mini-app-shell[data-screen="fight"] .battle-stage__center {
    top: 104px;
  }

  .mini-app-shell[data-screen="fight"] .fighter-loadout {
    grid-template-columns: 22px minmax(0, 1fr) 22px;
  }

  .mini-app-shell[data-screen="fight"] .battle-action legend {
    padding-inline: 5px;
  }

  .mini-app-shell[data-screen="fight"] .battle-action legend > i {
    width: 25px;
    height: 25px;
  }

  .mini-app-shell[data-screen="fight"] .battle-zone label {
    min-height: 52px;
    grid-template-columns: 25px minmax(0, 1fr);
    column-gap: 4px;
  }

  .mini-app-shell[data-screen="fight"] .battle-zone label > span {
    width: 25px;
    height: 25px;
  }
}

@media (min-height: 860px) {
  .mini-app-shell[data-screen="fight"] .arena-shell {
    min-height: 390px;
  }

  .mini-app-shell[data-screen="fight"] .paper-doll-wrap {
    height: 225px;
  }
}

/* Iteration T: battle typography audit and unobscured equipment */

.mini-app-shell[data-screen="fight"] .arena-shell::after {
  display: none;
}

.mini-app-shell[data-screen="fight"] .combat-form {
  padding-top: 8px;
}

.mini-app-shell[data-screen="fight"] .fighter-health em,
.mini-app-shell[data-screen="fight"] .fighter-nameplate span,
.mini-app-shell[data-screen="fight"] .battle-action legend small,
.mini-app-shell[data-screen="fight"] .battle-zone label small {
  font-size: 11px;
}

.mini-app-shell[data-screen="fight"] .battle-stage__waiting {
  min-height: 34px;
  font-size: 12px;
}

.mini-app-shell[data-screen="fight"] .arena-impact b {
  font-size: 16px;
}

.mini-app-shell[data-screen="fight"] .arena-impact small {
  font-size: 10px;
}

.mini-app-shell[data-screen="fight"] .battle-state-panel__heading b {
  font-size: 17px;
}

.mini-app-shell[data-screen="fight"] .battle-state-panel__heading small {
  font-size: 11px;
}

.mini-app-shell[data-screen="fight"] .locked-choices > div > small {
  font-size: 10px;
}

.mini-app-shell[data-screen="fight"] .choice-badge {
  min-height: 42px;
  font-size: 12px;
}

.mini-app-shell[data-screen="fight"] .choice-badge small {
  font-size: 10px;
}

.mini-app-shell[data-screen="fight"] .reveal-heading p {
  font-size: 11px;
}

.mini-app-shell[data-screen="fight"] .reveal-heading h2 {
  font-size: 20px;
}

.mini-app-shell[data-screen="fight"] .combat-explanation p {
  min-height: 42px;
  font-size: 12px;
}

@media (max-width: 360px) {
  .mini-app-shell[data-screen="fight"] .fighter-health em {
    font-size: 11px;
  }
}

/* Iteration U: illustrated equipment and a taller phone arena */

.mini-app-shell[data-screen="fight"] .arena-shell {
  min-height: clamp(405px, 58dvh, 500px);
}

.mini-app-shell[data-screen="fight"] .paper-doll-wrap {
  height: clamp(245px, 35dvh, 300px);
}

.mini-app-shell[data-screen="fight"] .gear-slot {
  box-sizing: border-box;
  min-width: 0;
  padding: 1px;
}

.mini-app-shell[data-screen="fight"] .fighter-loadout {
  grid-template-columns: 29px minmax(0, 1fr) 29px;
}

.mini-app-shell[data-screen="fight"] .gear-rail {
  align-self: center;
}

.mini-app-shell[data-screen="fight"] .gear-slot--masterwork::after,
.mini-app-shell[data-screen="fight"] .gear-slot--rare::after,
.mini-app-shell[data-screen="fight"] .gear-slot--uncommon::after {
  inset: 1px;
}

.gear-sprite {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% + 1px);
  height: calc(100% + 1px);
  max-width: none;
  display: block;
  object-fit: contain;
  pointer-events: none;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 86%)) brightness(1.17) saturate(1.1) contrast(1.04);
}

.arena-fighter--opponent .gear-sprite {
  filter: drop-shadow(0 1px 1px rgb(0 0 0 / 88%)) brightness(1.14) saturate(1.14) contrast(1.06);
}

/* Iteration W: equipment dossier and directional exchange summary */

.exchange-summary {
  display: grid;
  gap: 6px;
}

.exchange-row {
  padding: 7px;
  display: grid;
  gap: 5px;
  color: #e7dece;
  background: rgb(8 10 10 / 62%);
  border: 1px solid rgb(181 160 118 / 24%);
  border-left-width: 3px;
  border-radius: 5px;
}

.exchange-row--hit {
  border-left-color: var(--battle-attack);
}

.exchange-row--blocked {
  border-left-color: var(--battle-defense);
}

.exchange-row--dodged {
  border-left-color: #79aaa8;
}

.exchange-row--critical {
  border-left-color: #e2bd68;
}

.exchange-row--skipped {
  border-left-color: #847b6c;
}

.exchange-row header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.exchange-row header b {
  min-width: 0;
  font-family: var(--battle-display);
  font-size: 14px;
}

.exchange-row header b span {
  color: var(--battle-brass-light);
}

.exchange-row header small {
  flex: none;
  max-width: 48%;
  overflow: hidden;
  color: var(--battle-muted);
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exchange-row header strong {
  color: var(--battle-ink);
  font-size: 12px;
}

.exchange-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr) minmax(58px, .72fr);
  align-items: stretch;
  gap: 4px;
}

.exchange-track > i {
  display: grid;
  place-items: center;
  color: var(--battle-brass);
  font-size: 14px;
  font-style: normal;
}

.exchange-token,
.exchange-outcome {
  min-width: 0;
  min-height: 40px;
  padding: 4px 5px;
  display: grid;
  align-content: center;
  border: 1px solid rgb(177 162 127 / 25%);
  border-radius: 4px;
}

.exchange-token {
  background: linear-gradient(180deg, rgb(55 52 47 / 86%), rgb(25 27 26 / 92%));
}

.exchange-token--attack {
  border-color: rgb(205 112 94 / 38%);
}

.exchange-token--guard {
  border-color: rgb(100 165 159 / 38%);
}

.exchange-token small,
.exchange-outcome small {
  color: var(--battle-muted);
  font-size: 9px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.exchange-token b,
.exchange-outcome b {
  margin-top: 3px;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exchange-token--attack b {
  color: #e5aa9b;
}

.exchange-token--guard b {
  color: #a9d2cd;
}

.exchange-outcome {
  text-align: center;
  background: rgb(17 19 18 / 94%);
}

.exchange-row--hit .exchange-outcome {
  border-color: #b85d50;
  background: rgb(92 40 36 / 62%);
}

.exchange-row--hit .exchange-outcome b {
  color: #ffb5a4;
}

.exchange-row--blocked .exchange-outcome {
  border-color: #5d918b;
  background: rgb(31 71 68 / 62%);
}

.exchange-row--blocked .exchange-outcome b {
  color: #b9dfda;
}

.exchange-row--dodged .exchange-outcome {
  border-color: #6da6a6;
  background: rgb(30 66 70 / 66%);
}

.exchange-row--dodged .exchange-outcome b {
  color: #bde6e2;
}

.exchange-row--critical .exchange-outcome {
  border-color: #c39c4e;
  background: rgb(89 65 25 / 68%);
}

.exchange-row--critical .exchange-outcome b {
  color: #f2d58c;
}

.item-dialog form {
  padding: 16px;
  gap: 14px;
  justify-items: stretch;
  text-align: left;
}

.item-dialog__layout {
  display: grid;
  grid-template-columns: minmax(96px, 112px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
}

.item-dialog__art {
  width: 100%;
  aspect-ratio: 1;
  padding: 5px;
  display: grid;
  place-items: center;
  color: #e0c67f;
  background:
    radial-gradient(circle at 45% 38%, rgb(112 92 55 / 76%), rgb(20 22 21 / 96%) 70%);
  border: 1px solid #9e824e;
  border-radius: 8px;
  box-shadow: inset 0 0 18px #000, 0 5px 14px rgb(0 0 0 / 45%);
}

.item-dialog__sprite {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgb(0 0 0 / 70%)) brightness(1.12) saturate(1.08);
}

.item-dialog__art svg {
  width: 76%;
  height: 76%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 3px 3px #000);
}

.item-dialog__meta {
  min-width: 0;
}

.item-dialog__rarity {
  padding: 3px 7px;
  display: inline-flex;
  color: #f0d897;
  background: rgb(117 89 41 / 44%);
  border: 1px solid rgb(214 179 97 / 46%);
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}

.item-dialog--masterwork {
  border-color: #a98ac2;
  box-shadow:
    0 18px 55px rgb(0 0 0 / 72%),
    inset 0 0 0 1px rgb(218 181 108 / 34%),
    inset 0 1px rgb(255 255 255 / 12%);
}

.item-dialog--masterwork .item-dialog__art {
  border-color: #a88ac0;
  background:
    radial-gradient(circle at 45% 38%, rgb(99 69 123 / 74%), rgb(20 18 24 / 97%) 70%);
}

.item-dialog__rarity--masterwork {
  gap: 5px;
  color: #ead8ff;
  background: rgb(92 57 119 / 54%);
  border-color: rgb(190 147 220 / 58%);
}

.item-dialog__rarity--masterwork::before {
  content: "✦";
  color: #e4c681;
  font-size: 9px;
}

.item-dialog .eyebrow {
  margin: 9px 0 3px;
  font-size: 11px;
}

.item-dialog h2 {
  font-size: 21px;
  line-height: 1.08;
}

.item-dialog__properties,
.item-dialog__property-list {
  display: grid;
  gap: 6px;
}

.item-dialog__property-list:empty {
  display: none;
}

.item-dialog__property {
  min-height: 52px;
  padding: 6px 10px 6px 7px;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 11px;
  align-items: center;
  gap: 10px;
  color: #c5dcd8;
  background:
    linear-gradient(90deg, rgb(28 64 61 / 67%), rgb(13 26 25 / 76%));
  border: 1px solid rgb(91 145 139 / 46%);
  border-radius: 5px;
  box-shadow: inset 0 1px rgb(255 255 255 / 4%);
}

.item-dialog__property--primary {
  color: #ead9ae;
  background:
    linear-gradient(90deg, rgb(91 69 33 / 72%), rgb(28 26 20 / 82%));
  border-color: rgb(204 174 111 / 58%);
}

.item-dialog__property-value {
  min-width: 46px;
  min-height: 38px;
  display: grid;
  place-items: center;
  color: #dfefec;
  background:
    radial-gradient(circle at 50% 18%, rgb(112 171 164 / 25%), transparent 62%),
    rgb(8 18 17 / 84%);
  border: 1px solid rgb(102 157 150 / 58%);
  border-radius: 4px;
  font-family: var(--battle-display);
  font-size: 21px;
  line-height: 1;
  text-shadow: 0 2px 5px #000;
}

.item-dialog__property--primary .item-dialog__property-value {
  color: var(--battle-brass-light);
  background:
    radial-gradient(circle at 50% 18%, rgb(210 171 88 / 27%), transparent 62%),
    rgb(30 24 13 / 88%);
  border-color: rgb(211 177 99 / 66%);
}

.item-dialog__property-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.item-dialog__property-copy strong {
  color: currentColor;
  font-family: var(--battle-display);
  font-size: 15px;
  line-height: 1.05;
}

.item-dialog__property-copy small {
  color: #94afa9;
  font-size: 10px;
  line-height: 1.2;
}

.item-dialog__property--primary .item-dialog__property-copy small {
  color: #b9aa89;
}

.item-dialog__property i {
  width: 8px;
  height: 8px;
  justify-self: center;
  border: 1px solid #6d9b96;
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgb(83 150 143 / 42%);
}

.item-dialog__property--primary i {
  background: #d0af69;
  border-color: #f0d694;
  box-shadow: 0 0 7px rgb(223 177 79 / 58%);
}

.item-dialog__lore {
  margin: 0;
  padding: 10px 11px 0;
  position: relative;
  color: #bdb3a4;
  border-top: 1px solid rgb(181 160 118 / 25%);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-style: italic;
  line-height: 1.35;
}

.item-dialog__lore::before {
  content: "“";
  position: absolute;
  left: 0;
  top: 5px;
  color: var(--battle-brass);
  font-size: 20px;
  font-style: normal;
}

@media (max-width: 360px) {
  .item-dialog form {
    padding: 14px;
    gap: 12px;
  }

  .item-dialog__layout {
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 10px;
  }

  .item-dialog h2 {
    font-size: 19px;
  }

  .item-dialog__property {
    grid-template-columns: 44px minmax(0, 1fr) 10px;
    gap: 8px;
    padding-right: 8px;
  }

  .item-dialog__property-value {
    min-width: 44px;
  }
}

/* Iteration X: full-body avatars inside caravan arena niches */

.mini-app-shell[data-screen="fight"] .paper-doll.fighter-niche {
  --niche-accent: var(--battle-defense);
  --niche-deep: rgb(17 45 44 / 82%);
  --niche-glow: rgb(104 165 160 / 32%);
  position: relative;
  width: 100%;
  max-width: none;
  height: 100%;
  display: block;
  overflow: visible;
  transform: none;
  filter: drop-shadow(0 10px 7px rgb(0 0 0 / 76%));
}

.mini-app-shell[data-screen="fight"] .fighter-niche--opponent {
  --niche-accent: var(--battle-attack);
  --niche-deep: rgb(67 27 26 / 82%);
  --niche-glow: rgb(198 110 93 / 32%);
}

.fighter-niche__arch {
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 7px;
  width: clamp(88px, 29vw, 116px);
  height: calc(100% - 3px);
  border: 1px solid rgb(205 177 112 / 62%);
  border-bottom: 0;
  border-radius: 52% 52% 9px 9px / 18% 18% 7px 7px;
  background:
    linear-gradient(90deg, transparent 48%, rgb(225 194 126 / 13%) 50%, transparent 52%),
    radial-gradient(ellipse at 50% 27%, var(--niche-glow), transparent 56%),
    linear-gradient(180deg, rgb(12 14 14 / 20%), var(--niche-deep));
  box-shadow:
    inset 0 0 0 2px rgb(15 15 13 / 70%),
    inset 0 0 18px rgb(0 0 0 / 62%),
    0 0 0 1px rgb(20 18 14 / 76%),
    0 7px 14px rgb(0 0 0 / 46%);
  transform: translateX(-50%);
  opacity: .82;
}

.fighter-niche__arch::before,
.fighter-niche__arch::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 9px;
  width: 3px;
  background:
    linear-gradient(90deg, #332a1b, #b59655 48%, #3a2f1d 52%, #171713);
  box-shadow: 0 0 5px rgb(0 0 0 / 70%);
}

.fighter-niche__arch::before { left: -2px; }
.fighter-niche__arch::after { right: -2px; }

.fighter-avatar {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 6px;
  width: auto;
  max-width: none;
  height: calc(100% + 1px);
  display: block;
  object-fit: contain;
  object-position: center bottom;
  transform: translateX(-50%);
  filter:
    drop-shadow(-1px 0 0 rgb(227 196 128 / 14%))
    drop-shadow(0 8px 5px rgb(0 0 0 / 78%));
  pointer-events: none;
  user-select: none;
}

.fighter-niche__plinth {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0;
  width: clamp(92px, 29vw, 118px);
  height: 13px;
  border: 1px solid #6f5731;
  border-radius: 8px 8px 3px 3px / 5px 5px 3px 3px;
  background:
    linear-gradient(90deg, transparent 9%, rgb(218 185 111 / 28%) 10% 12%, transparent 13% 87%, rgb(218 185 111 / 28%) 88% 90%, transparent 91%),
    linear-gradient(180deg, #9c7a43, #342a1c 45%, #151514 52%, #5c472a);
  box-shadow:
    inset 0 1px rgb(245 218 153 / 42%),
    0 3px 7px rgb(0 0 0 / 74%);
  transform: translateX(-50%);
}

.arena-fighter--opponent .paper-doll.fighter-niche {
  transform: none;
}

/* Iteration Y: stable combat HUD and inspectable fighters */

.mini-app-shell[data-screen="fight"] .duel-hud {
  min-height: 104px;
}

.mini-app-shell[data-screen="fight"] .turn-progress--idle > span {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 20%), transparent 50%),
    linear-gradient(90deg, #425b59, #718c87);
  border-right-color: #a9c6bf;
  opacity: .7;
}

.mini-app-shell[data-screen="fight"] .turn-progress--locked > span {
  background:
    repeating-linear-gradient(135deg, rgb(255 255 255 / 12%) 0 5px, transparent 5px 10px),
    linear-gradient(90deg, #386863, #78aaa3);
  border-right-color: #bde1da;
  box-shadow: 0 0 7px rgb(104 165 160 / 42%);
}

.mini-app-shell[data-screen="fight"] .turn-progress--resolved > span {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 26%), transparent 50%),
    linear-gradient(90deg, #6f5b35, #b99d5f);
  border-right-color: #efd99d;
}

.mini-app-shell[data-screen="fight"] .fighter-health {
  width: 100%;
  min-width: 0;
  padding: 2px 3px 3px;
  color: inherit;
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 5px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.mini-app-shell[data-screen="fight"] .fighter-health:hover,
.mini-app-shell[data-screen="fight"] .fighter-health:focus-visible {
  background: rgb(218 198 151 / 10%);
  border-color: rgb(220 200 151 / 34%);
  outline: none;
}

.mini-app-shell[data-screen="fight"] .fighter-health__identity {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 5px;
}

.mini-app-shell[data-screen="fight"] .fighter-health__identity b {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 5px;
}

.mini-app-shell[data-screen="fight"] .fighter-health__identity b::after {
  content: "ⓘ";
  flex: none;
  color: var(--battle-brass-light);
  font-family: var(--battle-ui);
  font-size: 10px;
  font-weight: 600;
  opacity: .78;
}

.mini-app-shell[data-screen="fight"] .fighter-health__identity b i {
  flex: none;
  color: var(--battle-muted);
  font-family: var(--battle-ui);
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: .02em;
}

.mini-app-shell[data-screen="fight"] .fighter-health--opponent {
  text-align: right;
}

.mini-app-shell[data-screen="fight"] .fighter-health--opponent .fighter-health__identity b {
  justify-content: flex-end;
}

.mini-app-shell[data-screen="fight"] .fighter-health__meter {
  height: 9px;
  margin-top: 4px;
  display: block;
  overflow: hidden;
}

.mini-app-shell[data-screen="fight"] .battle-stage__fighters {
  padding-top: 104px;
}

.mini-app-shell[data-screen="fight"] .battle-stage__center {
  top: 104px;
}

.mini-app-shell[data-screen="fight"] .paper-doll-wrap {
  height: clamp(263px, 38dvh, 322px);
}

.mini-app-shell[data-screen="fight"] .fighter-niche--opponent .fighter-avatar {
  transform: translateX(-50%) scaleX(-1);
}

.combatant-dialog {
  width: min(calc(100% - 28px), 360px);
  max-height: calc(100dvh - 28px);
  padding: 0;
  color: #eee4d2;
  background:
    linear-gradient(180deg, rgb(42 38 32 / 99%), rgb(14 16 16 / 99%));
  border: 1px solid #6d9b96;
  border-radius: 9px;
  box-shadow: 0 18px 55px rgb(0 0 0 / 76%), inset 0 1px rgb(255 255 255 / 10%);
}

.combatant-dialog--opponent {
  border-color: #a65c51;
}

.combatant-dialog::backdrop {
  background: rgb(4 6 7 / 76%);
  backdrop-filter: blur(3px);
}

.combatant-dialog form {
  padding: 16px;
  display: grid;
  gap: 13px;
}

.combatant-dialog__header {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.combatant-dialog__header > span:last-child {
  min-width: 0;
}

.combatant-dialog__header small {
  color: var(--battle-muted);
  font-size: 11px;
}

.combatant-dialog__header h2 {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--battle-ink);
  font-family: var(--battle-display);
  font-size: 24px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combatant-dialog__sigil {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  color: #172524;
  background: linear-gradient(145deg, #b7d0c9, #527a76);
  border: 1px solid #c8ddd8;
  border-radius: 50%;
  box-shadow: inset 0 1px rgb(255 255 255 / 28%), 0 4px 12px rgb(0 0 0 / 45%);
  font-family: var(--battle-display);
  font-size: 20px;
  font-weight: 700;
}

.combatant-dialog--opponent .combatant-dialog__sigil {
  color: #311a19;
  background: linear-gradient(145deg, #d39a87, #83433d);
  border-color: #e0ac9d;
}

.combatant-stats {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.combatant-stats > div {
  min-width: 0;
  padding: 9px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 8px;
  background: rgb(8 10 10 / 58%);
  border: 1px solid rgb(181 160 118 / 26%);
  border-radius: 5px;
}

.combatant-stats dt {
  color: #ddd3c1;
  font-size: 12px;
  font-weight: 700;
}

.combatant-stats dd {
  margin: 0;
  color: var(--battle-brass-light);
  font-family: var(--battle-display);
  font-size: 20px;
  font-weight: 700;
}

.combatant-stats small {
  grid-column: 1 / -1;
  color: var(--battle-muted);
  font-size: 10px;
}

.combatant-dialog__summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.combatant-dialog__summary span {
  padding: 8px 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  background: rgb(79 111 106 / 17%);
  border-left: 3px solid var(--battle-defense);
}

.combatant-dialog--opponent .combatant-dialog__summary span {
  background: rgb(128 65 58 / 17%);
  border-left-color: var(--battle-attack);
}

.combatant-dialog__summary small {
  color: var(--battle-muted);
  font-size: 10px;
}

.combatant-dialog__summary b {
  flex: none;
  color: var(--battle-ink);
  font-size: 14px;
}

.combatant-dialog__note {
  margin: 0;
  padding: 9px 10px;
  color: #c5baa8;
  background: rgb(8 10 10 / 44%);
  border-left: 3px solid var(--battle-brass);
  font-size: 11px;
  line-height: 1.35;
}

.combatant-dialog .primary-button {
  width: 100%;
  min-height: 46px;
}

@media (max-width: 360px) {
  .mini-app-shell[data-screen="fight"] .duel-hud {
    min-height: 103px;
  }

  .mini-app-shell[data-screen="fight"] .paper-doll-wrap {
    height: clamp(260px, 38dvh, 268px);
  }

  .combatant-dialog form {
    padding: 14px;
    gap: 10px;
  }
}

@keyframes arena-hit-right {
  45% {
    transform: translateX(7px) rotate(1.5deg);
    filter: brightness(1.45) sepia(.3);
  }
}

@media (max-width: 360px) {
  .fighter-niche__arch {
    width: 86px;
  }

  .fighter-niche__plinth {
    width: 90px;
  }
}

/* Iteration Z: centered arena, separated vitals and game-facing overlays */

.mini-app-shell[data-screen="fight"] .duel-hud__fighters {
  grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr);
  gap: 6px;
}

.mini-app-shell[data-screen="fight"] .duel-hud__fighter,
.mini-app-shell[data-screen="fight"] .duel-hud__fighter--opponent {
  display: block;
}

.mini-app-shell[data-screen="fight"] .fighter-health__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.mini-app-shell[data-screen="fight"] .fighter-health__heading b {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-app-shell[data-screen="fight"] .fighter-health__heading b::after {
  content: "›";
  flex: none;
  color: var(--battle-brass-light);
  font-family: var(--battle-ui);
  font-size: 13px;
  line-height: 1;
  opacity: .72;
}

.mini-app-shell[data-screen="fight"] .fighter-health__heading > span {
  flex: none;
  padding: 1px 4px;
  color: #d9c58f;
  background: rgb(148 116 63 / 20%);
  border: 1px solid rgb(201 172 111 / 30%);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02em;
}

.mini-app-shell[data-screen="fight"] .fighter-health--opponent .fighter-health__heading {
  flex-direction: row-reverse;
}

.mini-app-shell[data-screen="fight"] .fighter-health__life {
  margin-top: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
}

.mini-app-shell[data-screen="fight"] .fighter-health--opponent .fighter-health__life {
  grid-template-columns: auto minmax(0, 1fr);
}

.mini-app-shell[data-screen="fight"] .fighter-health--opponent .fighter-health__meter {
  grid-column: 2;
}

.mini-app-shell[data-screen="fight"] .fighter-health--opponent .fighter-health__life small {
  grid-column: 1;
  grid-row: 1;
}

.mini-app-shell[data-screen="fight"] .fighter-health__meter {
  width: 100%;
  margin-top: 0;
}

.mini-app-shell[data-screen="fight"] .fighter-health__life small {
  color: #d8cfbf;
  font-family: var(--battle-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .01em;
}

.mini-app-shell[data-screen="fight"] .fighter-health:hover,
.mini-app-shell[data-screen="fight"] .fighter-health:focus-visible {
  background: rgb(218 198 151 / 8%);
}

.mini-app-shell[data-screen="fight"] .battle-stage__fighters {
  padding-top: 104px;
  padding-bottom: 0;
}

.mini-app-shell[data-screen="fight"] .arena-fighter {
  justify-content: center;
}

.mini-app-shell[data-screen="fight"] .combat-form {
  padding-top: 5px;
  padding-bottom: max(3px, env(safe-area-inset-bottom));
  gap: 5px;
}

.mini-app-shell[data-screen="fight"] .battle-stage__center {
  bottom: 0;
}

.battle-action__type-icon {
  width: 28px;
  height: 28px;
  padding: 5px;
  display: grid;
  place-items: center;
  flex: none;
  color: #a9d4ce;
  background: rgb(9 17 17 / 55%);
  border: 1px solid rgb(149 197 190 / 35%);
  border-radius: 50%;
}

.battle-action--attack .battle-action__type-icon {
  color: #e7a18e;
  border-color: rgb(224 146 126 / 35%);
}

.battle-action__type-icon .gear-icon {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.battle-action__type-icon .gear-icon__solid {
  fill: rgb(255 255 255 / 8%);
}

.mini-app-shell[data-screen="fight"] .battle-zone label {
  grid-template-columns: 30px minmax(0, 1fr);
}

.mini-app-shell[data-screen="fight"] .zone-diagram {
  width: 28px;
  height: 31px;
  padding: 3px 5px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  border-radius: 5px;
}

.zone-diagram i {
  display: block;
  background: rgb(219 226 218 / 13%);
  border: 1px solid rgb(219 226 218 / 18%);
  border-radius: 2px;
}

.battle-action--block .zone-diagram--upper i:nth-child(-n + 2),
.battle-action--block .zone-diagram--lower i:nth-child(n + 2),
.battle-action--block .zone-diagram--split i:nth-child(1),
.battle-action--block .zone-diagram--split i:nth-child(3),
.battle-action--block .zone-diagram--head i:nth-child(1),
.battle-action--block .zone-diagram--body i:nth-child(2),
.battle-action--block .zone-diagram--legs i:nth-child(3) {
  background: var(--battle-defense);
  border-color: #b3d7d2;
  box-shadow: 0 0 4px rgb(104 165 160 / 45%);
}

.battle-action--attack .zone-diagram--head i:nth-child(1),
.battle-action--attack .zone-diagram--body i:nth-child(2),
.battle-action--attack .zone-diagram--legs i:nth-child(3) {
  background: var(--battle-attack);
  border-color: #efb2a2;
  box-shadow: 0 0 4px rgb(198 110 93 / 48%);
}

.battle-zone input:checked + label > .zone-diagram {
  background: rgb(12 24 23 / 56%);
}

.battle-action--attack .battle-zone input:checked + label > .zone-diagram {
  background: rgb(48 22 21 / 62%);
}

.combatant-dialog {
  inset: auto 0 0;
  width: min(100%, 390px);
  max-width: none;
  max-height: calc(100dvh - max(20px, env(safe-area-inset-top)));
  margin: 0 auto;
  overflow: auto;
  color: #eee4d2;
  background:
    linear-gradient(180deg, rgb(45 41 34 / 99%), rgb(13 15 15 / 100%));
  border: 1px solid #887348;
  border-bottom: 0;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -12px 42px rgb(0 0 0 / 72%), inset 0 1px rgb(255 255 255 / 10%);
}

.combatant-dialog--opponent {
  border-color: #8d554d;
}

.combatant-dialog form {
  padding: 0 14px max(16px, env(safe-area-inset-bottom));
  gap: 0;
}

.combatant-dialog__header {
  position: sticky;
  top: 0;
  z-index: 2;
  min-height: 70px;
  padding: 13px 0 11px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 38px;
  align-items: center;
  gap: 9px;
  background: linear-gradient(180deg, rgb(45 41 34 / 100%), rgb(39 36 31 / 98%));
  border-bottom: 1px solid rgb(201 172 111 / 24%);
}

.combatant-dialog__title {
  min-width: 0;
}

.combatant-dialog__title small {
  color: var(--battle-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.combatant-dialog__title h2 {
  margin: 2px 0 0;
  overflow: hidden;
  color: var(--battle-ink);
  font-family: var(--battle-display);
  font-size: 25px;
  line-height: 1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.combatant-dialog__level {
  padding: 5px 7px;
  display: grid;
  justify-items: center;
  color: var(--battle-muted);
  background: rgb(8 10 10 / 42%);
  border: 1px solid rgb(201 172 111 / 24%);
  border-radius: 5px;
  font-size: 8px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.combatant-dialog__level b {
  margin-top: 3px;
  color: var(--battle-brass-light);
  font-family: var(--battle-display);
  font-size: 17px;
  line-height: 1;
}

.combatant-dialog__close {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #d8cdbb;
  background: rgb(10 12 12 / 45%);
  border: 1px solid rgb(210 194 158 / 24%);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}

.combatant-dialog__vitals {
  padding: 13px 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: rgb(198 169 108 / 20%);
  border-bottom: 1px solid rgb(201 172 111 / 24%);
}

.combatant-dialog__vitals span {
  min-width: 0;
  padding: 3px 8px;
  display: grid;
  justify-items: center;
  gap: 3px;
  background: rgb(20 20 18 / 92%);
}

.combatant-dialog__vitals small {
  color: var(--battle-muted);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .045em;
}

.combatant-dialog__vitals b {
  color: var(--battle-brass-light);
  font-family: var(--battle-display);
  font-size: 23px;
  line-height: 1;
}

.combatant-dialog__vitals b i {
  color: var(--battle-muted);
  font-family: var(--battle-ui);
  font-size: 11px;
  font-style: normal;
}

.combatant-dialog__attributes {
  padding: 13px 0 4px;
}

.combatant-dialog__attributes h3 {
  margin: 0 0 7px;
  color: #d5c9b5;
  font-family: var(--battle-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

.combatant-stats {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgb(181 160 118 / 22%);
}

.combatant-stats > div {
  min-height: 54px;
  padding: 7px 4px;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgb(181 160 118 / 18%);
  border-radius: 0;
}

.combatant-stat-icon {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  color: #d8c27f;
  background: rgb(116 91 51 / 22%);
  border: 1px solid rgb(201 172 111 / 30%);
  border-radius: 50%;
  font-size: 15px;
}

.combatant-stat-icon--agility { color: #9dc7c2; }
.combatant-stat-icon--mastery { color: #d4aa76; }
.combatant-stat-icon--stamina { color: #d68c7c; }

.combatant-stats dt {
  color: #e2d9c9;
  font-size: 13px;
  font-weight: 700;
}

.combatant-stats dt small {
  margin-top: 2px;
  display: block;
  color: var(--battle-muted);
  font-size: 10px;
  font-weight: 500;
}

.combatant-stats dd {
  min-width: 29px;
  margin: 0;
  color: var(--battle-brass-light);
  font-family: var(--battle-display);
  font-size: 22px;
  font-weight: 700;
  text-align: right;
}

.combatant-stats dd small {
  display: block;
  color: var(--battle-muted);
  font-family: var(--battle-ui);
  font-size: 9px;
  line-height: 1;
}

@media (max-width: 360px) {
  .mini-app-shell[data-screen="fight"] .duel-hud__fighters {
    gap: 3px;
  }

  .mini-app-shell[data-screen="fight"] .fighter-health {
    padding-inline: 1px;
  }

  .mini-app-shell[data-screen="fight"] .fighter-health__heading b {
    font-size: 13px;
  }

  .mini-app-shell[data-screen="fight"] .fighter-health__heading > span {
    padding-inline: 3px;
    font-size: 8px;
  }

  .combatant-dialog form {
    padding-inline: 12px;
  }
}

/* Iteration AA: unified modal placement and stronger touch affordances */

.mini-app-shell[data-screen="fight"] .gear-rail {
  gap: clamp(3px, .7dvh, 5px);
}

.mini-app-shell[data-screen="fight"] .fighter-avatar {
  bottom: -12px;
}

.battle-action__type-icon .gear-icon {
  stroke-width: 2.2;
}

.battle-action__type-icon .gear-icon__solid {
  fill: rgb(255 255 255 / 16%);
}

.mini-app-shell[data-screen="fight"] .battle-zone label {
  grid-template-columns: 32px minmax(0, 1fr);
}

.mini-app-shell[data-screen="fight"] .zone-diagram {
  width: 30px;
  height: 34px;
  padding: 2px 4px;
  gap: 2px;
  background: rgb(6 9 9 / 32%);
  border-width: 2px;
}

.zone-diagram i {
  min-height: 6px;
  background: rgb(219 226 218 / 25%);
  border-width: 2px;
  border-color: rgb(219 226 218 / 30%);
}

.battle-action--block .zone-diagram--upper i:nth-child(-n + 2),
.battle-action--block .zone-diagram--lower i:nth-child(n + 2),
.battle-action--block .zone-diagram--split i:nth-child(1),
.battle-action--block .zone-diagram--split i:nth-child(3) {
  background: #74aaa4;
  border-color: #c6e1dd;
  box-shadow: 0 0 5px rgb(104 165 160 / 62%);
}

.battle-action--attack .zone-diagram--head i:nth-child(1),
.battle-action--attack .zone-diagram--body i:nth-child(2),
.battle-action--attack .zone-diagram--legs i:nth-child(3) {
  background: #cf725f;
  border-color: #f4b9aa;
  box-shadow: 0 0 5px rgb(198 110 93 / 65%);
}

.combatant-dialog {
  inset: 0;
  width: min(calc(100% - 28px), 360px);
  max-height: calc(100dvh - 28px);
  margin: auto;
  border: 1px solid #887348;
  border-radius: 9px;
  box-shadow: 0 18px 55px rgb(0 0 0 / 76%), inset 0 1px rgb(255 255 255 / 10%);
}

.combatant-dialog--opponent {
  border-color: #8d554d;
}

.combatant-dialog form {
  padding-bottom: 14px;
}

.combatant-dialog__header {
  border-radius: 8px 8px 0 0;
}

@media (max-width: 360px) {
  .mini-app-shell[data-screen="fight"] .gear-rail {
    gap: 4px;
  }
}

/* Sequential exchange reveal: hit, block and skip resolve without reflowing the arena. */

.battle-stage .fighter-avatar {
  transition: filter 180ms ease;
}

.arena-fighter[data-fx-sh="off"] .fighter-avatar {
  filter:
    drop-shadow(-1px 0 0 rgb(227 196 128 / 0%))
    drop-shadow(0 8px 5px rgb(0 0 0 / 0%));
}

.arena-fighter[data-fx-elev="on"] {
  z-index: 8;
}

.arena-fighter[data-fx-elev="on"] .paper-doll-wrap {
  z-index: 6;
}

.arena-fighter[data-fx="atk"] .fighter-avatar {
  animation: fxr-atk-l 900ms cubic-bezier(.3, .1, .3, 1) both;
}

.arena-fighter--opponent[data-fx="atk"] .fighter-avatar {
  animation-name: fxr-atk-r;
}

.arena-fighter[data-fx="atkb"] .fighter-avatar {
  animation: fxr-atkb-l 900ms cubic-bezier(.3, .1, .3, 1) both;
}

.arena-fighter--opponent[data-fx="atkb"] .fighter-avatar {
  animation-name: fxr-atkb-r;
}

.arena-fighter[data-fx="hit"] .fighter-avatar {
  animation: fxr-hit-l 380ms cubic-bezier(.2, .8, .4, 1) both;
}

.arena-fighter--opponent[data-fx="hit"] .fighter-avatar {
  animation-name: fxr-hit-r;
}

.arena-fighter[data-fx="brace"] .fighter-avatar {
  animation: fxr-brace-l 320ms ease-out both;
}

.arena-fighter--opponent[data-fx="brace"] .fighter-avatar {
  animation-name: fxr-brace-r;
}

.arena-fighter[data-fx="dodge"] .fighter-avatar {
  animation: fxr-dodge-l 420ms cubic-bezier(.2, .75, .3, 1) both;
}

.arena-fighter--opponent[data-fx="dodge"] .fighter-avatar {
  animation-name: fxr-dodge-r;
}

.arena-fighter[data-fx="falter"] .fighter-avatar {
  animation: fxr-falter-l 520ms ease-in-out both;
}

.battle-stage[data-fx-shake="on"] {
  animation: fxr-shake 340ms linear both;
}

@keyframes fxr-atk-l {
  0% { transform: translateX(-50%); }
  22% { transform: translateX(calc(-50% - 12px)) rotate(-3deg) scale(1.05); }
  40%, 58% { transform: translateX(calc(-50% + 34px)) rotate(4deg) scale(1.14); }
  100% { transform: translateX(-50%); }
}

@keyframes fxr-atk-r {
  0%, 100% { transform: translateX(-50%) scaleX(-1); }
  22% { transform: translateX(calc(-50% + 12px)) scaleX(-1) rotate(-3deg) scale(1.05); }
  40%, 58% { transform: translateX(calc(-50% - 34px)) scaleX(-1) rotate(4deg) scale(1.14); }
}

@keyframes fxr-atkb-l {
  0%, 100% { transform: translateX(-50%); }
  22% { transform: translateX(calc(-50% - 12px)) rotate(-3deg) scale(1.05); }
  40%, 46% { transform: translateX(calc(-50% + 34px)) rotate(4deg) scale(1.14); }
  64% { transform: translateX(calc(-50% - 18px)) rotate(-3deg); }
  82% { transform: translateX(calc(-50% - 4px)); }
}

@keyframes fxr-atkb-r {
  0%, 100% { transform: translateX(-50%) scaleX(-1); }
  22% { transform: translateX(calc(-50% + 12px)) scaleX(-1) rotate(-3deg) scale(1.05); }
  40%, 46% { transform: translateX(calc(-50% - 34px)) scaleX(-1) rotate(4deg) scale(1.14); }
  64% { transform: translateX(calc(-50% + 18px)) scaleX(-1) rotate(-3deg); }
  82% { transform: translateX(calc(-50% + 4px)) scaleX(-1); }
}

@keyframes fxr-hit-l {
  0%, 100% { transform: translateX(-50%); }
  15% { transform: translateX(calc(-50% - 14px)) rotate(-5deg); }
  35% { transform: translateX(calc(-50% + 8px)) rotate(2deg); }
  55% { transform: translateX(calc(-50% - 5px)) rotate(-1.5deg); }
  75% { transform: translateX(calc(-50% + 2px)); }
}

@keyframes fxr-hit-r {
  0%, 100% { transform: translateX(-50%) scaleX(-1); }
  15% { transform: translateX(calc(-50% + 14px)) scaleX(-1) rotate(-5deg); }
  35% { transform: translateX(calc(-50% - 8px)) scaleX(-1) rotate(2deg); }
  55% { transform: translateX(calc(-50% + 5px)) scaleX(-1) rotate(-1.5deg); }
  75% { transform: translateX(calc(-50% - 2px)) scaleX(-1); }
}

@keyframes fxr-brace-l {
  0%, 100% { transform: translateX(-50%); }
  30% { transform: translateX(calc(-50% + 6px)) translateY(3px) rotate(1.5deg); }
}

@keyframes fxr-brace-r {
  0%, 100% { transform: translateX(-50%) scaleX(-1); }
  30% { transform: translateX(calc(-50% - 6px)) translateY(3px) scaleX(-1) rotate(-1.5deg); }
}

@keyframes fxr-dodge-l {
  0%, 100% { transform: translateX(-50%); }
  35%, 62% { transform: translateX(calc(-50% - 18px)) translateY(-2px) rotate(-2deg); }
}

@keyframes fxr-dodge-r {
  0%, 100% { transform: translateX(-50%) scaleX(-1); }
  35%, 62% { transform: translateX(calc(-50% + 18px)) translateY(-2px) scaleX(-1) rotate(-2deg); }
}

@keyframes fxr-falter-l {
  0%, 100% { transform: translateX(-50%); }
  30% { transform: translateX(calc(-50% - 7px)) translateY(2px) rotate(-2.5deg); }
  60% { transform: translateX(calc(-50% - 5px)) translateY(2px) rotate(-2deg); }
}

@keyframes fxr-shake {
  0%, 100% { transform: none; }
  20% { transform: translate(5px, -3px) scale(1.02); }
  40% { transform: translate(-4px, 5px) scale(1.02); }
  60% { transform: translate(2px, 2px) scale(1.01); }
}

.fx-anchor {
  position: absolute;
  z-index: 8;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.fx-anchor--head { top: 12%; }
.fx-anchor--body { top: 42%; }
.fx-anchor--legs { top: 69%; }

.fx-burst {
  position: absolute;
  left: -45px;
  top: -45px;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 222 150 / 95%), rgb(255 140 80 / 50%) 45%, transparent 70%);
  animation: fxr-burst 480ms ease-out both;
}

.fx-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 76px;
  height: 76px;
  border: 2px solid #7fb0a8;
  border-radius: 50%;
  box-shadow: 0 0 18px rgb(104 165 160 / 55%), inset 0 0 12px rgb(104 165 160 / 40%);
  animation: fxr-ring 520ms ease-out both;
}

.fx-spark {
  position: absolute;
  left: -3px;
  top: -3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffe9b0, #c66e5d);
  animation: fxr-spark 460ms ease-out both;
}

.fx-spark--guard {
  background: radial-gradient(circle, #e8f4ef, #68a5a0);
}

.fx-dmg {
  position: absolute;
  left: -60px;
  top: -64px;
  width: 120px;
  text-align: center;
  font-family: var(--battle-display);
  font-weight: 700;
  font-size: 30px;
  color: #ffd98a;
  text-shadow: 0 2px 0 #5e241f, 0 0 4px #3a120e, 0 0 16px rgb(255 120 60 / 65%);
  animation: fxr-dmg 1150ms cubic-bezier(.2, .7, .3, 1) both;
}

.fx-stamp {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  padding: 5px 12px;
  background: rgb(27 65 63 / 94%);
  border: 1px solid #7fb0a8;
  border-radius: 4px;
  box-shadow: 0 3px 10px rgb(0 0 0 / 60%);
  animation: fxr-stamp 1400ms ease-out both;
}

.fx-stamp b {
  font-family: var(--battle-display);
  font-size: 15px;
  letter-spacing: .06em;
  color: #e4f0ea;
}

.fx-stamp small {
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9fc4bd;
}

.fx-stamp--skip {
  background: rgb(24 26 26 / 92%);
  border-color: #6b665a;
}

.fx-stamp--skip b { color: #d8d2bd; }
.fx-stamp--skip small { color: #8f887a; }

.fx-stamp--dodge {
  background: rgb(35 67 73 / 94%);
  border-color: #91c6c3;
}

.fx-stamp--dodge b {
  color: #d7f0ec;
}

@keyframes fxr-burst {
  0% { transform: scale(.25); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: scale(1.35); opacity: 0; }
}

@keyframes fxr-ring {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: .95; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

@keyframes fxr-spark {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(.35); opacity: 0; }
}

@keyframes fxr-dmg {
  0% { transform: translateY(0) scale(.4); opacity: 0; }
  14% { transform: translateY(-4px) scale(1.25); opacity: 1; }
  28% { transform: translateY(-8px) scale(1); }
  70% { opacity: 1; }
  100% { transform: translateY(-46px) scale(.95); opacity: 0; }
}

@keyframes fxr-stamp {
  0% { transform: translate(-50%, -50%) rotate(-9deg) scale(1.7); opacity: 0; }
  16% { transform: translate(-50%, -50%) rotate(-4deg) scale(.94); opacity: 1; }
  22% { transform: translate(-50%, -50%) rotate(-4deg) scale(1.04); }
  27% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); }
  80% { transform: translate(-50%, -50%) rotate(-4deg) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) rotate(-4deg) scale(.97); opacity: 0; }
}

.reveal-screen .fighter-health__meter i {
  transition: width 500ms cubic-bezier(.2, .7, .3, 1);
}

.fx-hpflash {
  position: absolute;
  inset: 0;
  background: rgb(255 86 54 / 85%);
  animation: fxr-hpflash 450ms ease-out both;
}

.exchange-summary--live .exchange-row {
  opacity: 0;
}

.exchange-summary--live .exchange-row.is-revealed {
  animation: fxr-row 350ms ease-out both;
}

@keyframes fxr-hpflash {
  0% { opacity: .95; }
  100% { opacity: 0; }
}

@keyframes fxr-row {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .arena-fighter[data-fx] .fighter-avatar,
  .battle-stage[data-fx-shake] {
    animation: none;
  }
}

/* Shared combat typography and icon language across choice, wait and reveal. */

.mini-app-shell[data-screen="fight"] .choice-badges {
  display: grid;
  gap: 4px;
}

.mini-app-shell[data-screen="fight"] .choice-badge {
  min-width: 0;
  min-height: 52px;
  padding: 5px 6px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-areas:
    "icon value"
    "icon label";
  column-gap: 6px;
  font-size: 14px;
}

.mini-app-shell[data-screen="fight"] .choice-badge__icon {
  grid-area: icon;
  align-self: center;
  width: 28px;
  height: 28px;
  padding: 5px;
}

.mini-app-shell[data-screen="fight"] .choice-badge__icon--attack {
  color: #e7a18e;
  border-color: rgb(224 146 126 / 35%);
}

.mini-app-shell[data-screen="fight"] .choice-badge__icon--block {
  color: #a9d4ce;
  border-color: rgb(149 197 190 / 35%);
}

.mini-app-shell[data-screen="fight"] .choice-badge small {
  grid-area: label;
  align-self: start;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-app-shell[data-screen="fight"] .choice-badge b {
  grid-area: value;
  align-self: end;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mini-app-shell[data-screen="fight"] .opponent-choice-sealed {
  min-height: 108px;
}

.opponent-choice-sealed__icons {
  display: flex;
  gap: 4px;
}

.mini-app-shell[data-screen="fight"] .opponent-choice-sealed__icons .battle-action__type-icon {
  width: 25px;
  height: 25px;
  padding: 5px;
  color: #9f9686;
  border-color: rgb(181 160 118 / 30%);
}

.mini-app-shell[data-screen="fight"] .opponent-choice-sealed b {
  font-size: 14px;
}

.mini-app-shell[data-screen="fight"] .opponent-choice-sealed small {
  font-size: 11px;
}

.mini-app-shell[data-screen="fight"] .battle-state-panel__heading b,
.mini-app-shell[data-screen="fight"] .reveal-heading h2 {
  font-size: 18px;
}

.mini-app-shell[data-screen="fight"] .exchange-token small,
.mini-app-shell[data-screen="fight"] .exchange-outcome small {
  font-size: 10px;
}

.mini-app-shell[data-screen="fight"] .exchange-token b,
.mini-app-shell[data-screen="fight"] .exchange-outcome b {
  font-size: 14px;
}

/* Battle memory: the last three revealed exchanges stay beside the decision. */

.battle-memory {
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 5px;
  display: grid;
  gap: 4px;
  color: #ddd4c3;
  appearance: none;
  text-align: left;
  background:
    linear-gradient(180deg, rgb(55 51 44 / 96%), rgb(24 25 23 / 98%));
  border: 1px solid rgb(192 169 116 / 48%);
  border-radius: 6px;
  box-shadow: inset 0 1px rgb(255 255 255 / 7%), 0 2px 5px rgb(0 0 0 / 25%);
  cursor: pointer;
}

.battle-memory:hover {
  border-color: rgb(224 196 132 / 72%);
}

.battle-memory:focus-visible {
  outline: 2px solid var(--battle-brass-light);
  outline-offset: 2px;
}

.battle-memory__heading {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.battle-memory__heading b {
  color: #eee4d2;
  font-family: var(--battle-display);
  font-size: 12px;
  line-height: 1;
}

.battle-memory__heading small {
  color: #d5bd7d;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.battle-memory__rounds {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(var(--memory-count), minmax(0, 1fr));
  gap: 3px;
}

.battle-memory-round {
  position: relative;
  min-width: 0;
  padding: 3px 2px 2px;
  display: grid;
  gap: 2px;
  background: rgb(8 11 11 / 48%);
  border: 1px solid rgb(165 151 116 / 28%);
  border-radius: 4px;
}

.battle-memory-round.is-latest {
  background:
    linear-gradient(90deg, rgb(95 77 40 / 28%), rgb(11 15 14 / 62%));
  border-color: #c8a85e;
  box-shadow: inset 2px 0 #e1c47e;
}

.battle-memory-round__number {
  position: absolute;
  z-index: 1;
  top: -3px;
  right: 2px;
  min-width: 13px;
  height: 13px;
  padding: 0 2px;
  display: grid;
  place-items: center;
  color: #d8c89e;
  background: #292720;
  border: 1px solid rgb(199 173 111 / 38%);
  border-radius: 2px;
  font-family: var(--battle-ui);
  font-size: 8px;
  line-height: 1;
}

.battle-memory-round.is-latest .battle-memory-round__number {
  color: #211b11;
  background: #d1b36e;
  border-color: #eed58f;
}

.battle-memory-action {
  min-width: 0;
  min-height: 17px;
  display: grid;
  grid-template-columns: 21px minmax(19px, 1fr) minmax(24px, 1.15fr) minmax(21px, .9fr);
  align-items: center;
  gap: 1px;
  color: #cfc7b8;
  font-size: 8px;
  line-height: 1;
}

.battle-memory-action > b {
  color: #a9d4ce;
  font-size: 8px;
}

.battle-memory-action--opponent > b {
  color: #e1a08f;
}

.battle-memory-action__move {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 1px;
}

.battle-memory-action__move i {
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  flex: none;
  color: #c7bbb0;
  font-style: normal;
}

.battle-memory-action__move--attack i {
  color: #dc8c78;
}

.battle-memory-action__move--block i {
  color: #86bbb5;
}

.battle-memory-action__move svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.battle-memory-action__move strong {
  overflow: hidden;
  color: #e4dccd;
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-memory-action em {
  overflow: hidden;
  color: #bdb4a4;
  font-size: 8px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-memory-action--hit em { color: #e49a84; }
.battle-memory-action--blocked em { color: #94c8c1; }
.battle-memory-action--skipped em { color: #a9a398; }

.battle-memory__pattern {
  min-height: 20px;
  padding: 3px 5px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 5px;
  color: #c4bbab;
  background: rgb(181 154 94 / 9%);
  border-top: 1px solid rgb(195 170 111 / 20%);
}

.battle-memory__pattern > span {
  min-width: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3px;
}

.battle-memory__pattern small,
.battle-memory__pattern b {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-memory__pattern small { color: #9f9789; }
.battle-memory__pattern b { color: #d9c37f; }
.battle-memory__pattern > i { width: 1px; height: 14px; background: rgb(192 169 116 / 28%); }

.battle-memory__pending {
  overflow: hidden;
  color: #9f9789;
  font-size: 9px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-memory--empty {
  min-height: 58px;
}

.battle-memory__empty-copy {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.battle-memory__empty-copy > i {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: #d0b36f;
  border: 1px solid rgb(208 179 111 / 42%);
  border-radius: 50%;
  font-style: normal;
}

.battle-memory__empty-copy b,
.battle-memory__empty-copy small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-memory__empty-copy b {
  color: #ddd4c3;
  font-size: 10px;
}

.battle-memory__empty-copy small {
  margin-top: 2px;
  color: #9f9789;
  font-size: 9px;
}

/* Full journal uses the same centered modal system as character details. */

.battle-journal-dialog {
  inset: 0;
  width: min(calc(100% - 20px), 430px);
  max-height: calc(100dvh - 20px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: #ded5c5;
  background: #171a19;
  border: 1px solid #887348;
  border-radius: 9px;
  box-shadow: 0 18px 55px rgb(0 0 0 / 78%), inset 0 1px rgb(255 255 255 / 8%);
}

.battle-journal-dialog::backdrop {
  background: rgb(5 8 9 / 78%);
  backdrop-filter: blur(1px);
}

.battle-journal-dialog form {
  max-height: calc(100dvh - 22px);
  padding: 0 10px 10px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 8px;
  overflow: hidden;
}

.battle-journal-dialog__header {
  min-height: 58px;
  margin-inline: -10px;
  padding: 8px 8px 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: linear-gradient(180deg, #33383a, #222728);
  border-bottom: 1px solid rgb(202 174 112 / 42%);
}

.battle-journal-dialog__header small,
.battle-journal-dialog__header h2 {
  display: block;
  margin: 0;
}

.battle-journal-dialog__header small {
  color: #bbaa81;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.battle-journal-dialog__header h2 {
  margin-top: 2px;
  color: #f0e6d4;
  font-family: var(--battle-display);
  font-size: 20px;
}

.battle-journal-dialog__header button {
  width: 44px;
  height: 44px;
  padding: 0;
  flex: none;
  color: #e7dcc9;
  background: rgb(12 15 15 / 55%);
  border: 1px solid rgb(201 174 111 / 42%);
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
}

.battle-journal-dialog__header button:focus-visible {
  outline: 2px solid var(--battle-brass-light);
  outline-offset: 2px;
}

.battle-journal-pattern {
  padding: 7px;
  display: grid;
  gap: 6px;
  background: linear-gradient(180deg, rgb(75 65 44 / 42%), rgb(37 34 28 / 70%));
  border: 1px solid rgb(196 168 105 / 42%);
  border-radius: 6px;
}

.battle-journal-pattern > header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 7px;
}

.battle-journal-pattern header small,
.battle-journal-pattern header b {
  display: block;
}

.battle-journal-pattern header small {
  color: #a99b7a;
  font-size: 8px;
  text-transform: uppercase;
}

.battle-journal-pattern header b {
  margin-top: 2px;
  color: #e8dbc1;
  font-size: 12px;
}

.battle-journal-pattern header em {
  color: #d7bc77;
  font-size: 10px;
  font-style: normal;
  white-space: nowrap;
}

.battle-journal-pattern__group > small {
  display: block;
  margin-bottom: 3px;
  color: #c1b7a7;
  font-size: 9px;
}

.battle-journal-pattern__group > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

.battle-journal-pattern__group span {
  min-height: 29px;
  padding: 3px 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  background: rgb(7 10 10 / 38%);
  border: 1px solid rgb(171 151 109 / 24%);
  border-radius: 3px;
}

.battle-journal-pattern__group span b { font-size: 10px; }
.battle-journal-pattern__group span small { color: #e0c57f; font-size: 12px; }

.battle-journal-pattern--pending {
  min-height: 48px;
  align-content: center;
}

.battle-journal-pattern--pending b,
.battle-journal-pattern--pending small {
  display: block;
}

.battle-journal-pattern--pending b { font-size: 11px; }
.battle-journal-pattern--pending small { color: #a99f90; font-size: 9px; }

.battle-journal-list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.battle-journal-round {
  padding: 6px;
  display: grid;
  gap: 4px;
  background: rgb(43 42 37 / 82%);
  border: 1px solid rgb(156 145 117 / 30%);
  border-radius: 5px;
}

.battle-journal-round.is-latest {
  border-color: #b99a55;
  box-shadow: inset 3px 0 #d6b86f;
}

.battle-journal-round > header {
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
}

.battle-journal-round > header b {
  color: #e1c77f;
  font-size: 11px;
}

.battle-journal-round > header small {
  overflow: hidden;
  color: #aaa193;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-action {
  min-width: 0;
  min-height: 45px;
  padding: 4px;
  display: grid;
  grid-template-columns: 38px minmax(50px, .8fr) minmax(78px, 1.25fr) 58px;
  align-items: center;
  gap: 3px;
  background: rgb(12 21 20 / 62%);
  border: 1px solid rgb(103 158 151 / 22%);
  border-radius: 4px;
}

.journal-action--opponent {
  background: rgb(30 17 17 / 62%);
  border-color: rgb(194 108 90 / 22%);
}

.journal-action > b {
  overflow: hidden;
  color: #a7d1cb;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-action--opponent > b { color: #e0a08f; }

.journal-action__move {
  min-width: 0;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
}

.journal-action__move > i {
  width: 17px;
  height: 17px;
  display: grid;
  place-items: center;
  color: #d78c79;
  font-style: normal;
}

.journal-action__move--block > i { color: #82b9b2; }

.journal-action__move svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.journal-action__move small,
.journal-action__move strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.journal-action__move small {
  color: #938b7e;
  font-size: 7px;
  white-space: nowrap;
}

.journal-action__move strong {
  color: #ded5c5;
  font-size: 9px;
  line-height: 1.05;
}

.journal-action > em {
  color: #c5bcac;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

.journal-action--hit > em { color: #e69c88; }
.journal-action--blocked > em { color: #96cbc4; }
.journal-action--skipped > em { color: #aaa398; }

.battle-journal-empty {
  min-height: 150px;
  padding: 18px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  color: #d8cdb9;
  text-align: center;
  background: rgb(45 42 35 / 62%);
  border: 1px dashed rgb(194 167 107 / 38%);
  border-radius: 6px;
}

.battle-journal-empty > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #d2b26a;
  border: 1px solid rgb(210 178 103 / 48%);
  border-radius: 50%;
}

.battle-journal-empty b { font-size: 13px; }
.battle-journal-empty p { margin: 0; color: #aaa092; font-size: 10px; line-height: 1.35; }

@media (max-width: 360px) {
  .battle-memory { padding-inline: 4px; }
  .battle-memory__heading b { font-size: 11px; }
  .battle-memory-action {
    grid-template-columns: 20px minmax(18px, 1fr) minmax(23px, 1.1fr) minmax(20px, .85fr);
  }
  .battle-memory-action > b,
  .battle-memory-action__move strong,
  .battle-memory-action em { font-size: 7px; }
  .battle-memory__pattern small,
  .battle-memory__pattern b { font-size: 8px; }
  .journal-action {
    grid-template-columns: 34px minmax(47px, .8fr) minmax(72px, 1.2fr) 52px;
  }
  .journal-action > em { font-size: 8px; }
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .arena-shell {
  min-height: clamp(405px, 50dvh, 450px);
}

@media (max-height: 760px) {
  .mini-app-shell[data-screen="fight"] .fight-screen--choice .arena-shell {
    min-height: 300px;
  }

  .mini-app-shell[data-screen="fight"] .fight-screen--choice .paper-doll-wrap {
    height: 168px;
  }
}

/* Iteration AL: image-first battle notation with a restored phone arena. */

.battle-memory {
  padding: 4px;
  gap: 4px;
}

.battle-memory__heading {
  min-height: 16px;
}

.battle-memory__heading b {
  font-size: 11px;
}

.battle-memory__heading small {
  font-size: 10px;
}

.battle-memory__pattern {
  min-height: 0;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: 0;
}

.battle-memory-pattern-token {
  min-width: 29px;
  height: 16px;
  padding: 1px 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #d8cdb9;
  background: rgb(8 12 12 / 46%);
  border: 1px solid rgb(183 160 108 / 25%);
  border-radius: 3px;
}

.battle-memory-pattern-token > i {
  width: 11px;
  height: 11px;
  display: grid;
  place-items: center;
  color: #d08a78;
}

.battle-memory-pattern-token + .battle-memory-pattern-token > i {
  color: #82b9b2;
}

.battle-memory-pattern-token svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.3;
}

.battle-memory-pattern-token > b {
  color: #d9c37f;
  font-size: 9px;
  line-height: 1;
}

.battle-memory-pattern-token .memory-zone-glyph {
  width: 8px;
  height: 12px;
  padding: 0;
}

.battle-memory__rounds {
  gap: 4px;
}

.battle-memory-round {
  min-height: 55px;
  padding: 14px 3px 3px;
  grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: stretch;
  gap: 2px;
}

.battle-memory-round__number {
  top: 1px;
  right: auto;
  left: 50%;
  min-width: 16px;
  height: 12px;
  transform: translateX(-50%);
  font-size: 9px;
}

.battle-memory-round__divider {
  width: 1px;
  height: 100%;
  background: linear-gradient(transparent, rgb(203 181 126 / 42%), transparent);
}

.battle-memory-action {
  min-width: 0;
  min-height: 38px;
  padding: 2px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 10px minmax(20px, 1fr);
  align-items: center;
  gap: 1px;
  background: rgb(37 83 78 / 22%);
  border-radius: 3px;
}

.battle-memory-action--opponent {
  background: rgb(102 48 42 / 20%);
}

.battle-memory-action > b {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  font-size: 9px;
  line-height: 1;
}

.battle-memory-action__moves {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}

.battle-memory-action__move {
  min-width: 0;
  min-height: 22px;
  padding: 2px;
  display: grid;
  grid-template-columns: 11px minmax(8px, 1fr);
  align-items: center;
  gap: 1px;
  background: rgb(6 9 9 / 48%);
  border: 1px solid rgb(193 177 140 / 16%);
  border-radius: 3px;
}

.battle-memory-action__move > i {
  width: 11px;
  height: 14px;
}

.battle-memory-action em {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  font-size: 9px;
  line-height: 1;
}

.memory-zone-glyph {
  width: 11px;
  height: 17px;
  padding: 1px;
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 1px;
  flex: none;
  background: rgb(3 6 7 / 62%);
  border: 1px solid rgb(203 191 159 / 24%);
  border-radius: 3px;
}

.memory-zone-glyph > i {
  min-height: 2px;
  background: rgb(213 209 194 / 22%);
  border-radius: 2px;
}

.memory-zone-glyph--head > i:nth-child(1),
.memory-zone-glyph--body > i:nth-child(2),
.memory-zone-glyph--legs > i:nth-child(3) {
  background: #e49a84;
  box-shadow: 0 0 3px rgb(228 154 132 / 55%);
}

.memory-zone-glyph--upper > i:nth-child(-n + 2),
.memory-zone-glyph--lower > i:nth-child(n + 2),
.memory-zone-glyph--split > i:nth-child(1),
.memory-zone-glyph--split > i:nth-child(3) {
  background: #94c8c1;
  box-shadow: 0 0 3px rgb(148 200 193 / 48%);
}

.memory-zone-glyph--skipped > i {
  background: rgb(213 209 194 / 12%);
}

.battle-journal-duel {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.journal-action {
  min-width: 0;
  min-height: 105px;
  padding: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}

.journal-action > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.journal-action > header b {
  overflow: hidden;
  color: #a7d1cb;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journal-action--opponent > header b {
  color: #e0a08f;
}

.journal-action > header em {
  color: #c5bcac;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
  text-align: right;
}

.journal-action--hit > header em { color: #e69c88; }
.journal-action--critical > header em { color: #edc66f; }
.journal-action--dodged > header em { color: #9ed3cf; }
.journal-action--blocked > header em { color: #96cbc4; }
.journal-action--skipped > header em { color: #aaa398; }

.journal-action__moves {
  min-width: 0;
  display: grid;
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 4px;
}

.journal-action__move {
  min-width: 0;
  min-height: 36px;
  padding: 3px;
  grid-template-columns: 20px 18px minmax(0, 1fr);
  gap: 4px;
  background: rgb(6 9 9 / 36%);
  border: 1px solid rgb(176 160 125 / 18%);
  border-radius: 4px;
}

.journal-action__move > i {
  width: 19px;
  height: 19px;
}

.journal-action__move .memory-zone-glyph {
  width: 17px;
  height: 25px;
}

.journal-action__move small {
  font-size: 8px;
}

.journal-action__move strong {
  font-size: 12px;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .arena-shell {
  min-height: clamp(350px, 50dvh, 430px);
}

@media (max-height: 760px) {
  .mini-app-shell[data-screen="fight"] .fight-screen--choice .arena-shell {
    min-height: 350px;
  }

  .mini-app-shell[data-screen="fight"] .fight-screen--choice .paper-doll-wrap {
    height: 220px;
  }

  .mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-action legend {
    height: 50px;
  }

  .mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-zone label {
    min-height: 48px;
  }
}

@media (max-width: 360px) {
  .battle-memory-action > b,
  .battle-memory-action em {
    font-size: 9px;
  }

  .journal-action {
    padding: 5px;
  }

  .journal-action__move {
    grid-template-columns: 18px 16px minmax(0, 1fr);
    gap: 3px;
  }
}

/* Iteration AL.3: final cascade for full-width exchange rows. */

.battle-memory {
  padding: 2px;
  gap: 2px;
}

.battle-memory__heading {
  min-height: 14px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.battle-memory__sides {
  min-width: 0;
  padding-inline: 27px 7px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  text-align: center;
}

.battle-memory__sides b {
  overflow: hidden;
  font-family: var(--battle-ui);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-memory__sides b:first-child { color: #a9d4ce; }
.battle-memory__sides b:last-child { color: #e1a08f; }

.battle-memory__rounds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
}

.battle-memory-round {
  min-height: 22px;
  padding: 1px 3px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 1px minmax(0, 1fr);
  align-items: center;
  gap: 3px;
}

.battle-memory-round__number {
  position: static;
  min-width: 20px;
  height: 18px;
  transform: none;
  font-size: 10px;
}

.battle-memory-round__divider { height: 18px; }

.battle-memory-action {
  min-height: 18px;
  padding: 0 3px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 30px;
  grid-template-rows: minmax(0, 1fr);
  gap: 3px;
}

.battle-memory-action > b { display: none; }

.battle-memory-action__moves {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(27px, 1fr));
  gap: 3px;
}

.battle-memory-action__move {
  min-height: 18px;
  padding: 0 2px;
  grid-template-columns: 13px 13px;
  justify-content: center;
  gap: 2px;
}

.battle-memory-action__move > i {
  width: 13px;
  height: 15px;
}

.battle-memory-action__move .memory-zone-glyph {
  width: 13px;
  height: 16px;
}

.battle-memory-action em {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: 10px;
  text-align: center;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .arena-shell {
  min-height: clamp(330px, 48dvh, 420px);
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-action legend b {
  font-size: 16px;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-zone label b {
  font-size: 15px;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-zone label small {
  font-size: 11px;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-action--attack .battle-zone label {
  align-content: center;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-action--attack .battle-zone label small {
  display: none;
}

@media (max-height: 760px) {
  .mini-app-shell[data-screen="fight"] .fight-screen--choice .arena-shell {
    min-height: 326px;
  }

  .mini-app-shell[data-screen="fight"] .fight-screen--choice .paper-doll-wrap {
    height: 246px;
  }

  .mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-action legend {
    height: 44px;
  }

  .mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-zone label {
    min-height: 44px;
  }

  .mini-app-shell[data-screen="fight"] .fight-screen--choice .combat-form {
    padding-top: 2px;
  }
}

/* Iteration AM.1: authoritative short-screen arena and journal rows. */

.battle-journal-dialog.fight-overlay form {
  grid-template-rows: auto minmax(0, 1fr);
}

@media (max-height: 760px) {
  .mini-app-shell[data-screen="fight"] .fight-screen--choice .arena-shell {
    min-height: 370px;
  }

  .mini-app-shell[data-screen="fight"] .fight-screen--choice .paper-doll-wrap {
    height: 290px;
  }
}

/* Iteration AN: fighters and readable history share one stable arena viewport. */

.mini-app-shell[data-screen="fight"] .battle-round {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 108px auto;
  align-items: center;
  gap: 6px;
}

.mini-app-shell[data-screen="fight"] .battle-round > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.battle-view-switch {
  height: 30px;
  padding: 2px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 2px;
  color: #aaa293;
  background: rgb(5 8 8 / 72%);
  border: 1px solid rgb(188 163 107 / 34%);
  border-radius: 5px;
  box-shadow: inset 0 1px 3px #000;
}

.battle-view-switch button {
  position: relative;
  min-width: 0;
  padding: 0 4px;
  color: inherit;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 3px;
  font-family: var(--battle-ui);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .02em;
  cursor: pointer;
}

.battle-view-switch button::before {
  content: "";
  position: absolute;
  inset: -7px 0;
}

.battle-view-switch button[aria-pressed="true"] {
  color: #201c15;
  background: linear-gradient(180deg, #dbc27d, #95723a);
  box-shadow: inset 0 1px rgb(255 255 255 / 28%), 0 1px 3px #000;
}

.battle-view-switch button:focus-visible {
  outline: 2px solid var(--battle-brass-light);
  outline-offset: 3px;
}

.battle-view-switch i {
  min-width: 13px;
  height: 13px;
  margin-left: 3px;
  padding-inline: 3px;
  display: inline-grid;
  place-items: center;
  color: #ded1ad;
  background: rgb(10 13 13 / 72%);
  border-radius: 7px;
  font-size: 8px;
  font-style: normal;
  line-height: 1;
}

.battle-view-switch button[aria-pressed="true"] i {
  color: #eadba9;
  background: rgb(42 34 20 / 76%);
}

.battle-arena-view {
  position: absolute;
  z-index: 1;
  inset: 0;
}

.mini-app-shell[data-screen="fight"] .battle-round {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.battle-view-toggle {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 22px;
  width: 42px;
  height: 34px;
  padding: 6px 10px;
  display: grid;
  place-items: center;
  color: #d8bd78;
  appearance: none;
  background:
    linear-gradient(180deg, rgb(67 61 49 / 96%), rgb(25 26 23 / 98%));
  border: 1px solid rgb(215 183 109 / 62%);
  border-radius: 5px 5px 3px 3px;
  box-shadow:
    inset 0 1px rgb(255 255 255 / 10%),
    0 3px 7px rgb(0 0 0 / 72%);
  transform: translateX(-50%);
  cursor: pointer;
}

.battle-view-toggle::before {
  content: "";
  position: absolute;
  inset: -6px -4px;
}

.battle-view-toggle[aria-pressed="true"] {
  color: #a8d2cc;
  background: linear-gradient(180deg, rgb(43 74 70 / 96%), rgb(18 30 29 / 98%));
  border-color: rgb(137 191 183 / 68%);
}

.battle-view-toggle svg {
  grid-area: 1 / 1;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.battle-view-toggle__fighters,
.battle-view-toggle[aria-pressed="true"] .battle-view-toggle__journal {
  display: none;
}

.battle-view-toggle[aria-pressed="true"] .battle-view-toggle__fighters {
  display: block;
}

.battle-view-toggle:focus-visible {
  outline: 2px solid var(--battle-brass-light);
  outline-offset: 3px;
}

.battle-view-toggle:active {
  transform: translate(-50%, 1px);
}

.battle-history-stage {
  position: absolute;
  z-index: 3;
  inset: 104px 0 0;
  padding: 4px 8px 58px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 7px;
  overflow: hidden;
  color: #ded5c5;
  background:
    linear-gradient(180deg, rgb(7 10 10 / 88%), rgb(16 19 18 / 97%)),
    url("../assets/optimized/caravan-duel-arena-1152.webp") center 39% / 100% auto no-repeat;
}

.battle-history-stage[hidden],
.battle-arena-view[hidden] {
  display: none !important;
}

.battle-history-stage__header {
  min-height: 36px;
  padding: 2px 4px 5px 7px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgb(191 164 103 / 30%);
}

.battle-history-stage__header small,
.battle-history-stage__header b {
  display: block;
}

.battle-history-stage__header small {
  color: #9e937e;
  font-size: 10px;
  letter-spacing: .02em;
}

.battle-history-stage__header b {
  margin-bottom: 1px;
  color: #e5dac6;
  font-family: var(--battle-display);
  font-size: 15px;
}

.battle-history-stage__header button {
  min-height: 34px;
  padding: 5px 10px;
  color: #d6c28e;
  background: rgb(16 19 18 / 72%);
  border: 1px solid rgb(200 173 111 / 38%);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 700;
}

.battle-history-stage__header button:focus-visible {
  outline: 2px solid var(--battle-brass-light);
  outline-offset: 2px;
}

.battle-history-stage__list {
  min-height: 0;
  display: grid;
  align-content: start;
  gap: 6px;
  grid-auto-rows: clamp(58px, 7.25dvh, 66px);
  overflow: hidden;
}

.battle-history-stage .battle-journal-empty {
  min-height: 170px;
}

.compact-history-round {
  min-width: 0;
  min-height: 0;
  padding: 4px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  align-items: stretch;
  gap: 5px;
  background: rgb(34 34 30 / 82%);
  border: 1px solid rgb(158 145 112 / 28%);
  border-radius: 5px;
}

.compact-history-round.is-latest {
  background: linear-gradient(90deg, rgb(91 73 37 / 38%), rgb(25 27 24 / 90%) 38%);
  border-color: rgb(215 184 111 / 72%);
  box-shadow: inset 2px 0 #e0bf6c;
}

.compact-history-round__number {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  color: #b8aa8b;
  border-right: 1px solid rgb(199 172 111 / 24%);
}

.compact-history-round__number b {
  display: block;
}

.compact-history-round__number b {
  color: #dec27d;
  font-family: var(--battle-display);
  font-size: 20px;
  line-height: 1;
}

.compact-history-round__duel {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}

.compact-history-action {
  --compact-history-outer-gutter: 5px;
  --compact-history-center-gutter: 8px;
  min-width: 0;
  height: 100%;
  padding: 1px var(--compact-history-center-gutter) 2px var(--compact-history-outer-gutter);
  display: grid;
  grid-template-rows: 15px 34px;
  gap: 1px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-sizing: border-box;
}

.compact-history-action--opponent {
  position: relative;
  padding-right: var(--compact-history-outer-gutter);
  padding-left: var(--compact-history-center-gutter);
}

.compact-history-action--opponent::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 1px;
  background: rgb(171 155 119 / 24%);
  content: "";
  pointer-events: none;
}

.compact-history-action > header {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3px;
}

.compact-history-action > header b {
  overflow: hidden;
  color: #a8d2cc;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.compact-history-action--opponent > header b {
  color: #e1a08f;
}

.compact-history-action > header em {
  flex: none;
  color: #c8bfae;
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.compact-history-action--hit > header em { color: #eda18d; }
.compact-history-action--critical > header em { color: #f0ca73; }
.compact-history-action--dodged > header em { color: #a0d8d3; }
.compact-history-action--blocked > header em { color: #9bd1ca; }
.compact-history-action--skipped > header em { color: #aaa398; }

.compact-history-action__moves {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 7px;
}

.compact-history-action__moves > span {
  min-width: 0;
  display: grid;
  grid-template-columns: 26px 28px;
  place-items: center;
  justify-content: center;
  gap: 3px;
  width: 57px;
  height: 34px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

.compact-history-action--opponent .compact-history-action__moves > span {
  grid-template-columns: 28px 26px;
}

.compact-history-action__moves > .battle-action--attack {
  background: transparent;
  border-color: transparent;
}

.compact-history-action__moves > .battle-action--block {
  background: transparent;
  border-color: transparent;
}

.compact-history-action__type-icon {
  width: 26px;
  height: 26px;
  padding: 4px;
}

.compact-history-action__type-icon .gear-icon,
.battle-journal-dialog .journal-action__type-icon .gear-icon {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
}

.journal-action__move--attack {
  background: rgb(56 25 23 / 46%);
  border-color: rgb(205 112 94 / 28%);
}

.journal-action__move--block {
  background: rgb(15 39 37 / 48%);
  border-color: rgb(100 165 159 / 28%);
}

.journal-action__move {
  grid-template-columns: 26px 28px minmax(0, 1fr);
}

.journal-action--opponent .journal-action__move {
  grid-template-columns: minmax(0, 1fr) 28px 26px;
}

.journal-action--opponent .journal-action__copy {
  text-align: right;
}

.battle-journal-dialog .journal-action__type-icon {
  width: 26px;
  height: 26px;
  padding: 4px;
}

.reveal-heading--pending h2 {
  opacity: 0;
  transform: translateY(6px);
}

.reveal-heading h2.is-revealed {
  animation: reveal-title-in 280ms cubic-bezier(.2, .8, .25, 1) both;
}

@keyframes reveal-title-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.battle-view-toggle:disabled {
  opacity: .52;
  cursor: wait;
}

@media (max-width: 360px) {
  .mini-app-shell[data-screen="fight"] .battle-round {
    grid-template-columns: minmax(0, 1fr) 100px auto;
    gap: 4px;
  }

  .battle-view-switch button {
    padding-inline: 2px;
    font-size: 8px;
  }

  .battle-history-stage {
    padding-inline: 5px;
  }

  .battle-history-stage__header {
    padding-left: 4px;
  }

  .battle-history-stage__list {
    grid-auto-rows: 56px;
  }

  .compact-history-round {
    grid-template-columns: 24px minmax(0, 1fr);
    gap: 3px;
  }

  .compact-history-action {
    --compact-history-outer-gutter: 3px;
    --compact-history-center-gutter: 5px;
    padding-block: 1px;
    grid-template-rows: 14px 29px;
  }

  .compact-history-action__moves > span {
    grid-template-columns: 23px 25px;
    gap: 2px;
    width: 50px;
    height: 29px;
  }

  .compact-history-action--opponent .compact-history-action__moves > span {
    grid-template-columns: 25px 23px;
  }

  .compact-history-action__type-icon {
    width: 23px;
    height: 23px;
    padding: 3px;
  }

  .battle-journal-dialog .journal-action__move {
    grid-template-columns: 23px 25px minmax(0, 1fr);
  }

  .battle-journal-dialog .journal-action--opponent .journal-action__move {
    grid-template-columns: minmax(0, 1fr) 25px 23px;
  }

  .battle-journal-dialog .journal-action__type-icon {
    width: 23px;
    height: 23px;
    padding: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-heading h2.is-revealed {
    animation: none;
  }
}

/* Iteration AN.1: restore the pre-journal choice geometry. */

.mini-app-shell[data-screen="fight"] .fight-screen--choice .arena-shell {
  min-height: clamp(405px, 58dvh, 500px);
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-action legend {
  height: 46px;
  min-height: 46px;
  padding: 6px 7px;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-action legend b {
  font-size: 15px;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-action legend small {
  min-height: 0;
  font-size: 10px;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-zone label {
  min-height: 52px;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-zone label b {
  font-size: 14px;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-zone label small {
  display: block;
  font-size: 10px;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-action--attack .battle-zone label small {
  display: block;
}

.mini-app-shell[data-screen="fight"] .fight-screen--choice .combat-form {
  padding-top: 5px;
  gap: 5px;
}

@media (max-width: 360px) {
  .mini-app-shell[data-screen="fight"] .fight-screen--choice .paper-doll-wrap {
    height: clamp(260px, 38dvh, 268px);
  }

  .mini-app-shell[data-screen="fight"] .fight-screen--choice .battle-action legend {
    padding-inline: 5px;
  }
}

/* Journal entries reuse the original choice pictogram without overriding it. */
.mini-app-shell[data-screen="fight"] .compact-history-action__moves .zone-diagram,
.battle-journal-dialog .journal-action__move .zone-diagram {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 2px 4px;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  place-items: center;
  gap: 1px;
  background: rgb(6 9 9 / 32%);
  border: 2px solid rgb(100 165 159 / 38%);
  border-radius: 5px;
}

.mini-app-shell[data-screen="fight"] .compact-history-action__moves > .battle-action--attack .zone-diagram,
.battle-journal-dialog .journal-action__move--attack .zone-diagram {
  border-color: rgb(205 112 94 / 38%);
}

@media (max-width: 360px) {
  .mini-app-shell[data-screen="fight"] .compact-history-action__moves .zone-diagram,
  .battle-journal-dialog .journal-action__move .zone-diagram {
    width: 25px;
    height: 25px;
  }
}

/* Every three-part zone scale must stay inside its frame at both phone breakpoints. */
.mini-app-shell[data-screen="fight"] .zone-diagram,
.battle-journal-dialog .journal-action__move .zone-diagram {
  gap: 1px;
}

@media (max-width: 360px) {
  .mini-app-shell[data-screen="fight"] .zone-diagram i,
  .battle-journal-dialog .journal-action__move .zone-diagram i {
    min-height: 5px;
    height: 5px;
  }
}

/* Static fighter geometry is identical in choice, wait and reveal. */
.mini-app-shell[data-screen="fight"] .fight-screen .arena-shell {
  min-height: clamp(405px, 58dvh, 500px);
}

.mini-app-shell[data-screen="fight"] .fight-screen .paper-doll-wrap {
  height: clamp(263px, 38dvh, 322px);
}

@media (max-width: 360px) {
  .mini-app-shell[data-screen="fight"] .fight-screen .paper-doll-wrap {
    height: clamp(260px, 38dvh, 268px);
  }
}