/* Battle UI: one information rail, one control deck, a clear arena between. */
.battle-screen {
  --hud-gap: clamp(14px, 2.2vw, 32px);
  --hud-top: 18px;
  --hud-height: 72px;
  --ink: #211e1b;
  --panel: #24211ded;
  --edge: #d5ba7b40;
  --quiet: #c2b7a1;
  --accent: #e7c780;
  color: #f7efdd;
}
.battle-screen::before, .battle-screen::after {
  content: ""; position: absolute; left: 0; right: 0; pointer-events: none;
}
.battle-screen::before { top: 0; height: 156px; background: linear-gradient(#16171180, transparent); }
.battle-screen::after { bottom: 0; height: 116px; background: linear-gradient(transparent, #171711bd); }
.hud {
  position: absolute; top: var(--hud-top); left: var(--hud-gap); right: var(--hud-gap);
  height: var(--hud-height); display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px; padding: 10px 16px; z-index: 3;
  border: 1px solid var(--edge); border-radius: 12px; background: var(--panel);
  box-shadow: 0 8px 24px #16120e26; pointer-events: none;
}
.hero-panel { display: flex; align-items: center; gap: 12px; width: min(100%, 282px); min-width: 0; }
.avatar { width: 46px; height: 46px; flex: 0 0 46px; border: 1px solid #d6b86b66; border-radius: 10px; overflow: hidden; background: #554832; }
.avatar img { width: 100%; height: 145%; object-fit: cover; object-position: top; }
.vitals { flex: 1; min-width: 0; }
.hero-line, .energy-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hero-line { margin-bottom: 6px; font-size: 13px; }
.hero-line b, .hero-line span { white-space: nowrap; }
.hero-line span { color: #e1d5bd; font-size: 11px; font-variant-numeric: tabular-nums; }
.health-track, .energy-track { height: 6px; background: #10120e; border-radius: 2px; overflow: hidden; }
.health-track i, .energy-track i { display: block; width: 100%; height: 100%; transition: width .15s; }
.health-track i { background: #b4c589; }
.energy-caption { margin: 5px 0 3px; font-size: 9px; color: var(--quiet); }
.energy-caption b { color: var(--accent); font-weight: 500; }
.energy-track { height: 3px; }
.energy-track i { background: #e3bd69; }
.zone-panel { text-align: center; min-width: 180px; }
.zone-panel > span { display: block; font-size: 9px; letter-spacing: .18em; color: var(--accent); }
.zone-panel > b { display: block; font-size: 20px; line-height: 1.45; letter-spacing: .08em; }
.zone-panel #objectiveText { display: none; }
.wave-text { display: block; font-size: 10px; color: var(--quiet); line-height: 1.5; font-variant-numeric: tabular-nums; }
.hud-right { justify-self: end; display: flex; align-items: center; gap: 8px; pointer-events: auto; }
.battle-clock { display: grid; gap: 3px; text-align: right; padding-right: 16px; margin-right: 6px; border-right: 1px solid var(--edge); }
.battle-clock small { font-size: 9px; letter-spacing: .08em; color: var(--quiet); }
.battle-clock span { font-size: 20px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.battle-screen .icon-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid #c9b78e30; background: #ffffff06; font-size: 19px; }
.battle-screen .icon-btn:hover { background: #d6ba7a1a; }
.boss-panel {
  position: absolute; top: calc(var(--hud-top) + var(--hud-height) + 12px); left: 50%; transform: translateX(-50%);
  width: min(440px, 45%); padding: 9px 13px; z-index: 3; pointer-events: none;
  border: 1px solid #d5ba7b40; border-radius: 9px; background: var(--panel);
}
.boss-panel > div:first-child { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; font-size: 11px; }
.boss-panel b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.boss-panel span { white-space: nowrap; font-variant-numeric: tabular-nums; color: #e1c8b4; }
.boss-track { height: 6px; border-radius: 2px; overflow: hidden; background: #130e10; }
.boss-track i { display: block; width: 100%; height: 100%; background: #d58e8b; transition: width .12s; }
.boss-panel > small { display: block; margin-top: 5px; color: var(--quiet); font-size: 9px; line-height: 1.5; text-align: center; }
.dialogue, .toast {
  position: absolute; top: calc(var(--hud-top) + var(--hud-height) + 14px); left: var(--hud-gap);
  width: max-content; max-width: min(310px, 29%); padding: 9px 12px;
  z-index: 4; pointer-events: none; background: #26251fe8; border-left: 2px solid var(--accent);
  border-radius: 0 6px 6px 0; color: #f2e6cd; font-size: 11px; line-height: 1.65;
}
.battle-screen:has(.toast:not(.hidden)) .dialogue { visibility: hidden; }
@media (orientation: landscape), (min-width: 701px) {
  .battle-screen:has(.boss-panel:not(.hidden)) .toast,
  .battle-screen:has(.boss-panel:not(.hidden)) .dialogue {
    max-width: calc(27.5% - var(--hud-gap) - 12px);
  }
}
.chapter-toast {
  position: absolute; top: calc(var(--hud-top) + var(--hud-height) + 20px); left: 50%; transform: translateX(-50%);
  width: 260px; text-align: center; padding: 12px 20px; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent, #232019d9, transparent); animation: fadeOut 3.5s forwards;
}
.chapter-toast span { display: none; }
.chapter-toast h2 { font-size: 26px; margin: 0 0 5px; letter-spacing: .12em; color: #f6e2b4; }
.chapter-toast small { font-size: 11px; color: #e2d3b7; }
.battle-screen:has(.boss-panel:not(.hidden)) .chapter-toast { display: none; }
.field-status {
  position: absolute; left: 50%; top: calc(var(--hud-top) + var(--hud-height) + 92px); transform: translateX(-50%);
  max-width: 70%; padding: 6px 12px; z-index: 4; pointer-events: none; border: 1px solid #8ac9d566;
  border-radius: 6px; background: #202629eb; color: #c5e9ec; font-size: 11px; text-align: center;
}
.field-status.warning { border-color: #d8bd78; color: #f3dfab; }
.touch-controls { position: absolute; inset: 0; z-index: 4; pointer-events: none; user-select: none; -webkit-user-select: none; }
.control-deck {
  position: absolute; bottom: 14px; left: var(--hud-gap); right: var(--hud-gap);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.desktop-hint { display: flex; align-items: center; gap: 14px; color: #eee3cd; font-size: 12px; text-shadow: 0 1px 4px #17130f; }
.desktop-hint b { font-weight: 600; }
.desktop-hint small { display: block; color: #d1c5ae; font-size: 10px; margin-top: 5px; }
.movement-keys { display: grid; justify-items: center; gap: 3px; }
.movement-keys span { display: flex; gap: 3px; }
.movement-keys kbd { display: grid; place-items: center; width: 22px; height: 20px; font: 10px ui-monospace, monospace; border: 1px solid #dbc79955; border-radius: 4px; background: #25221edb; }
.action-bar {
  display: grid; grid-template-columns: repeat(4, 102px) 108px; gap: 6px; padding: 7px;
  background: #211f1ce8; border: 1px solid var(--edge); border-radius: 12px; box-shadow: 0 6px 24px #17130f3d;
}
.skill, .touch-action {
  position: relative; width: 100%; height: 66px; display: grid; grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: 1fr auto; align-content: center; align-items: center; column-gap: 5px; padding: 15px 8px 8px;
  border: 1px solid #cbb47e26; border-radius: 7px; background: #37332c; color: #eee4cf;
  pointer-events: auto; touch-action: none; user-select: none; overflow: hidden;
  transition: background .15s, border-color .15s, transform .15s;
}
.skill > b, .touch-action > b { grid-row: 1 / 3; font-size: 22px; line-height: 1; font-weight: 500; color: #dbc48e; }
.skill > b > img, .touch-action > b > img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; filter: drop-shadow(0 2px 1px #17120c55); transition: transform .15s, opacity .15s; }
.skill.cooldown > b > img, .touch-action.cooldown > b > img { opacity: .48; filter: saturate(.35); }
.skill.pressed > b > img, .touch-action.pressed > b > img { transform: scale(1.08); }
.skill.laugh.ready > b > img { filter: drop-shadow(0 0 5px #edc66d80); }
.skill > span, .touch-action > span { font-size: 11px; font-weight: 600; white-space: nowrap; }
.skill > small, .touch-action > small { display: block; min-height: 12px; margin-top: 2px; font-size: 9px; line-height: 1.4; color: #c5bba6; white-space: nowrap; font-variant-numeric: tabular-nums; }
.touch-action.dash > small { white-space: pre-line; line-height: 1.2; }
.skill > kbd, .touch-action > kbd { position: absolute; top: 4px; right: 6px; color: #b6a789; font: 8px ui-monospace, monospace; }
.skill::after, .touch-action::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: #dcc68e; transform: scaleX(var(--skill-progress, 1)); transform-origin: left;
  pointer-events: none; opacity: .65;
}
.skill.attack::after { background: #735724; }
.skill.laugh.cooldown::after { opacity: 1; }
.skill.attack { background: #d7bb77; border-color: #ebd29b; color: #31281b; }
.skill.attack b, .skill.attack small, .skill.attack kbd { color: #57472c; }
.skill.laugh.ready { background: #5d4e30; border-color: #e0c283; }
.skill.cooldown, .touch-action.cooldown { background: #2b2925; color: #c3bbae; }
.skill.cooldown b, .touch-action.cooldown b { color: #a69c87; }
.skill:hover, .touch-action:hover { border-color: #e3cc98; }
.skill:active, .touch-action:active, .skill.pressed, .touch-action.pressed { transform: translateY(1px); background: #66573b; border-color: #f2d89b; }
.skill.attack:active, .skill.attack.pressed { background: #f0d394; }
.joystick { display: none; position: relative; width: 94px; height: 94px; flex: 0 0 94px; border-radius: 50%; border: 1px solid #d9c79a66; background: #211e1c99; box-shadow: inset 0 0 0 12px #c9b47b0a; pointer-events: auto; touch-action: none; }
.joystick-knob { position: absolute; width: 42%; height: 42%; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; border: 1px solid #dec58d99; background: #655a46e8; pointer-events: none; }
.joystick > span { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: 10px; color: #c9bda3; }
.orientation-hint { display: none; }
@media (pointer: coarse), (max-width: 900px) {
  .desktop-hint { display: none; }
  .joystick { display: block; }
}
@media (max-width: 1100px) {
  .hud { gap: 12px; padding: 10px 12px; }
  .hero-panel { gap: 9px; }
  .hero-line { font-size: 12px; }
  .action-bar { grid-template-columns: repeat(4, 94px) 102px; }
  .skill, .touch-action { grid-template-columns: 26px minmax(0, 1fr); }
  .skill, .touch-action { column-gap: 3px; padding-left: 6px; padding-right: 6px; }
  .skill > span, .touch-action > span { font-size: 11px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .battle-screen { --hud-gap: 14px; --hud-top: 10px; --hud-height: 54px; }
  .hud { padding: 7px 11px; }
  .avatar { width: 34px; height: 34px; flex-basis: 34px; }
  .hero-panel { max-width: 235px; }
  .hero-line { font-size: 10px; margin-bottom: 4px; }
  .hero-line span { font-size: 9px; }
  .health-track { height: 4px; }
  .energy-caption { font-size: 8px; margin: 3px 0 2px; }
  .energy-track { height: 2px; }
  .zone-panel { min-width: 150px; }
  .zone-panel > span { font-size: 8px; }
  .zone-panel > b { font-size: 16px; line-height: 1.3; }
  .wave-text { font-size: 9px; }
  .battle-clock { padding-right: 8px; margin-right: 0; }
  .battle-clock small { display: none; }
  .battle-clock span { font-size: 16px; }
  .battle-screen .icon-btn { width: 32px; height: 32px; }
  .boss-panel { padding: 6px 10px; width: 42%; }
  .boss-panel > small { font-size: 8px; }
  .boss-panel > div:first-child { font-size: 10px; margin-bottom: 4px; }
  .field-status { top: 133px; font-size: 9px; }
  .dialogue, .toast { font-size: 9px; padding: 6px 9px; }
  .chapter-toast { padding: 6px 12px; top: 80px; }
  .chapter-toast h2 { font-size: 21px; }
  .chapter-toast small { font-size: 9px; }
  .control-deck { bottom: 12px; }
  .action-bar { padding: 5px; gap: 5px; grid-template-columns: repeat(4, 80px) 84px; }
  .skill, .touch-action { height: 52px; grid-template-columns: 20px minmax(0, 1fr); padding: 13px 5px 5px; }
  .skill > b, .touch-action > b { font-size: 17px; }
  .skill > span, .touch-action > span { font-size: 10px; }
  .skill > small, .touch-action > small { font-size: 8px; }
  .skill > kbd, .touch-action > kbd { font-size: 7px; top: 3px; }
  .joystick { width: 72px; height: 72px; flex-basis: 72px; margin-left: 10px; margin-bottom: 8px; }
  .joystick > span { bottom: -14px; font-size: 9px; }
}
@media (max-width: 700px) and (orientation: portrait) {
  .stage { --arena-top: 202px; height: max(650px, 100dvh); }
  .stage:has(.battle-screen:not(.hidden)) {
    --arena-top: calc(max(12px, env(safe-area-inset-top)) + 166px);
    height: min(100dvh, max(650px, calc(var(--arena-top) + 56.25vw + 180px)));
    min-height: 540px;
  }
  .battle-screen { --hud-gap: 16px; --hud-top: max(12px, env(safe-area-inset-top)); --hud-height: 100px; }
  .battle-screen { background: transparent; }
  .hud { height: var(--hud-height); grid-template-columns: 1fr auto; gap: 12px 8px; align-content: center; padding: 12px; }
  .hero-panel { width: 100%; gap: 8px; }
  .avatar { width: 36px; height: 36px; flex-basis: 36px; }
  .hero-line { font-size: 11px; }
  .hero-line span { font-size: 9px; }
  .energy-caption { font-size: 8px; }
  .hud-right { grid-column: 2; grid-row: 1; gap: 5px; }
  .battle-clock { display: none; }
  .battle-screen .icon-btn { width: 32px; height: 32px; }
  .zone-panel { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; min-width: 0; border-top: 1px solid var(--edge); padding-top: 8px; }
  .zone-panel > span { font-size: 8px; }
  .zone-panel > b { font-size: 17px; grid-column: 1; }
  .zone-panel .wave-text { grid-column: 2; grid-row: 1 / 3; font-size: 9px; }
  .boss-panel { top: calc(var(--hud-top) + var(--hud-height) + 10px); left: 16px; transform: none; width: calc(100% - 32px); padding: 6px 10px; }
  .boss-panel > div:first-child { font-size: 10px; }
  .boss-panel > small { font-size: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .chapter-toast { top: calc(var(--hud-top) + var(--hud-height) + 10px); padding: 5px 12px; width: 260px; }
  .chapter-toast h2 { font-size: 20px; }
  .chapter-toast small { font-size: 10px; }
  .dialogue, .toast { top: calc(var(--arena-top) + 56.25vw + 8px); left: 16px; right: 16px; width: auto; max-width: none; font-size: 10px; padding: 6px 10px; }
  .field-status { top: calc(var(--arena-top) + 8px); max-width: calc(100% - 24px); width: max-content; font-size: 9px; padding: 5px 8px; }
  .battle-screen::after { height: 250px; background: linear-gradient(transparent, #17191680); }
  .control-deck { left: 20px; right: 20px; bottom: max(28px, env(safe-area-inset-bottom)); gap: 24px; align-items: center; }
  .joystick { display: block; width: 88px; height: 88px; flex-basis: 88px; }
  .action-bar { flex: 1; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px; gap: 5px; }
  .skill, .touch-action { height: 64px; display: flex; flex-direction: column; justify-content: center; padding: 5px 2px; gap: 3px; }
  .skill > kbd, .touch-action > kbd { display: none; }
  .skill > b, .touch-action > b { font-size: 20px; }
  .skill > b > img, .touch-action > b > img { width: 22px; height: 22px; }
  .skill > span, .touch-action > span { font-size: 10px; }
  .skill > small, .touch-action > small { font-size: 9px; margin: 0; }
  .touch-action.summon { grid-column: 1 / 3; height: 46px; display: grid; grid-template-columns: 24px 1fr; grid-template-rows: 1fr 1fr; column-gap: 4px; padding: 5px 8px; }
  .touch-action.summon b { grid-row: 1 / 3; }
  .touch-action.dash { grid-column: 3; height: 46px; display: grid; grid-template-columns: 18px 1fr; grid-template-rows: 1fr 1fr; gap: 1px 2px; padding: 5px 3px; }
  .touch-action.dash b { display: block; grid-row: 1 / 3; }
  .touch-action.dash b img { width: 18px; height: 22px; }
  .touch-action.dash small { font-size: 8px; }
  .orientation-hint { display: block; position: absolute; bottom: 5px; left: 0; right: 0; margin: 0; text-align: center; font-size: 10px; color: #a99f8b; }
}
@media (max-width: 360px) and (orientation: portrait) {
  .battle-screen { --hud-gap: 12px; }
  .avatar { display: none; }
  .hero-line { font-size: 10px; }
  .control-deck { left: 14px; right: 14px; gap: 14px; }
  .joystick { width: 72px; height: 72px; flex-basis: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .skill, .touch-action, .skill > b > img, .touch-action > b > img, .health-track i, .energy-track i, .boss-track i { transition: none; }
}