/* Animated battle overlay + staged reveal panels. */

#battle-layer {
  position: fixed; inset: 0; z-index: 70;
  background: #0a0e07;
  display: flex; flex-direction: column;
}
#battle-layer canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.battle-hud {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: calc(10px + env(safe-area-inset-top)) 12px 0;
  pointer-events: none;
}
.battle-hud .bh-side { width: min(38vw, 300px); pointer-events: none; }
.battle-hud .bh-side.right { text-align: right; }
.bh-name { font-weight: 800; font-size: clamp(12px, 2.6vw, 16px); text-shadow: 0 2px 6px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-name small { display: block; font-weight: 600; color: #cbd6b6; font-size: clamp(10px, 2vw, 12px); }
.bh-bar { height: 12px; margin-top: 5px; background: #00000088; border: 1px solid #ffffff33; border-radius: 7px; overflow: hidden; }
.bh-bar i { display: block; height: 100%; width: 100%; transition: width .6s ease; border-radius: 6px; }
.bh-side.right .bh-bar i { margin-left: auto; }

.battle-ctrl {
  position: absolute; bottom: calc(12px + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  z-index: 6; display: flex; gap: 8px;
  background: #10150ecc; border: 1px solid #37452a; border-radius: 999px;
  padding: 7px 9px; backdrop-filter: blur(8px);
}
.battle-ctrl button {
  min-width: 42px; height: 38px; padding: 0 13px; border-radius: 999px;
  background: #1c2614; border: 1px solid #37452a; font-weight: 800; font-size: 14px;
}
.battle-ctrl button:hover { border-color: #667e42; }
.battle-ctrl button.lit { background: #3c5420; border-color: #7a9a4c; }

.battle-msg {
  position: absolute; left: 50%; top: 18%; transform: translateX(-50%) scale(.9);
  z-index: 5; pointer-events: none; opacity: 0; transition: all .35s;
  background: #10150ee0; border: 1px solid var(--gold); color: var(--gold2);
  font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: clamp(13px, 2.6vw, 17px);
  padding: 10px 22px; border-radius: 999px; white-space: nowrap; max-width: 92vw;
  overflow: hidden; text-overflow: ellipsis;
  box-shadow: 0 0 30px #e6b94f33;
}
.battle-msg.show { opacity: 1; transform: translateX(-50%) scale(1); }
.battle-msg.def { border-color: var(--blue); color: #a9dff0; box-shadow: 0 0 30px #58aec733; }

/* mid-battle + reveal overlays share panel styling */
.battle-panel-wrap {
  position: absolute; inset: 0; z-index: 8;
  display: flex; align-items: center; justify-content: center;
  background: #05080399; backdrop-filter: blur(4px);
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.battle-panel {
  width: min(calc(100vw - 24px), 560px);
  max-height: calc(100dvh - 32px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #232e17f5, #171f0ef5);
  border: 1px solid #55683c; border-radius: 20px;
  padding: 22px; box-shadow: 0 14px 50px #000c;
  animation: popIn .3s;
}
.battle-panel h2 { text-align: center; margin-bottom: 4px; }
.battle-panel .bp-sub { text-align: center; color: var(--dim); font-size: 13px; margin-bottom: 14px; }
.deploy-summary {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
  margin: 0 0 14px;
}
.deploy-summary > div {
  border: 1px solid #55683c; border-radius: 12px; background: #17200f;
  padding: 10px; text-align: center; min-width: 0;
}
.deploy-summary small {
  display: block; color: var(--dim2); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}
.deploy-summary b {
  display: block; color: var(--ink); font-size: 21px; font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.mid-cols { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin: 14px 0; }
.mid-cols .mc-side { text-align: center; }
.mid-cols .mc-side b { font-size: 26px; display: block; font-variant-numeric: tabular-nums; }
.mid-cols .mc-side small { font-size: 11.5px; }
.mid-vs { font-size: 20px; font-weight: 900; color: var(--dim2); }
.adv-banner {
  text-align: center; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; font-size: 14px;
  padding: 9px; border-radius: 11px; margin-top: 6px;
}
.adv-banner.att { background: #2c4a1d; color: #c8e88a; border: 1px solid #55813a; }
.adv-banner.def { background: #17323f; color: #a9dff0; border: 1px solid #3d6a8f; }
.adv-banner.even { background: #3a3a22; color: #e8dc9a; border: 1px solid #8f843f; }
.mid-choice-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 14px;
}
.mid-choice {
  display: flex;
  min-width: 0;
  min-height: 96px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 9px 7px;
  border: 1px solid #4a6033;
  border-radius: 12px;
  background: #17200f;
  color: var(--ink);
  text-align: center;
}
.mid-choice:hover { border-color: var(--gold); background: #202b15; }
.mid-choice span {
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 999px;
  background: #10150e;
  color: var(--gold2);
  font-weight: 900;
}
.mid-choice b { font-size: 12px; line-height: 1.1; }
.mid-choice small {
  color: var(--dim2);
  font-size: 10.5px;
  line-height: 1.18;
  overflow-wrap: anywhere;
}
.commentary-list {
  display: grid;
  gap: 7px;
}
.commentary-list p {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #2f3d22;
  border-radius: 10px;
  background: #12190d;
  color: var(--dim);
  font-size: 13px;
}

.reveal-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed #2c3820; font-size: 14px; opacity: 0; transform: translateY(8px); transition: all .4s; }
.reveal-row.in { opacity: 1; transform: none; }
.reveal-row:last-child { border-bottom: 0; }
.reveal-row .rv-num { margin-left: auto; font-weight: 800; font-variant-numeric: tabular-nums; font-size: 16px; }

.reward-big { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 16px 0 4px; }
.reward-big > div {
  background: #17200f; border: 1px solid #55683c; border-radius: 14px;
  padding: 13px 18px; text-align: center; min-width: 104px;
  opacity: 0; transform: scale(.8); transition: all .35s;
}
.reward-big > div.in { opacity: 1; transform: none; }
.reward-big b { display: block; font-size: 21px; font-variant-numeric: tabular-nums; }
.reward-big small { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
.reward-big .rw-coin b { color: var(--gold2); }
.reward-big .rw-sup b { color: var(--green); }
.reward-big .rw-pts b { color: var(--blue); }

.rank-line { text-align: center; margin-top: 12px; font-size: 15px; opacity: 0; transition: opacity .4s; }
.rank-line.in { opacity: 1; }
.rank-line b { color: var(--gold2); font-size: 18px; }

body.reduced-motion .battle-msg { transition: none; }
body.reduced-motion .reveal-row, body.reduced-motion .reward-big > div { transition: none; }

@media (max-width: 640px) {
  .battle-hud .bh-side { width: 44vw; }
  .battle-ctrl button { min-width: 38px; padding: 0 10px; }
  .battle-panel { padding: 18px; border-radius: 14px; }
  .battle-panel .btn-row {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .battle-panel .btn-row .btn {
    width: 100%;
    white-space: normal;
  }
  .reveal-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .reveal-row .rv-num {
    width: 100%;
    margin-left: 0;
  }
  .mid-choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mid-choice {
    min-height: 82px;
  }
}