/* ── The match ──────────────────────────────────────────────────────── */

.screen--battle { align-items: stretch; }

.battle {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  background: var(--bg);
  padding:
    calc(var(--sat) + 8px)
    calc(var(--sar) + 10px)
    calc(var(--sab) + 8px)
    calc(var(--sal) + 10px);
  transform-origin: 50% 74%;
  animation: battle-open .62s cubic-bezier(.2, .8, .3, 1) both;
}

/* the screen pulls back from your own grid to the whole table */
@keyframes battle-open {
  from { transform: scale(1.75); opacity: .25; }
  to { transform: none; opacity: 1; }
}

.battle.is-shaken { animation: board-shake .42s ease; }

@keyframes board-shake {
  0%, 100% { translate: 0; }
  20% { translate: -4px 2px; }
  45% { translate: 4px -2px; }
  70% { translate: -2px 1px; }
}

/* ── One player's side ──────────────────────────────────────────────── */

.army {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(3px, .7vh, 7px);
  flex: 1;
  min-height: 0;
}

/* the far side belongs to the player facing you across the screen */
.army--rival { transform: rotate(180deg); }

.army__id {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  font-size: clamp(11px, 3.1vw, 13.5px);
  font-weight: 750;
}

.army__name { display: inline-flex; align-items: center; gap: 6px; letter-spacing: -.01em; }

.army__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--tone);
}

.army__clock {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--ink-mid);
  font-variant-numeric: tabular-nums;
}

.army__clock svg { width: 12px; height: 12px; }
.army.is-active .army__clock { background: var(--tone); color: #fff; box-shadow: none; }

/* ── Defences destroyed ─────────────────────────────────────────────── */

.score {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  max-width: 420px;
  font-size: clamp(9px, 2.6vw, 11px);
  font-weight: 700;
  color: var(--ink-soft);
}

.score__label { white-space: nowrap; }

.score__bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(18, 20, 26, .09);
  overflow: hidden;
}

.score__bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: var(--tone);
  transition: width .55s cubic-bezier(.2, .8, .3, 1);
}

.score__count {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Boards ─────────────────────────────────────────────────────────── */

.army__board {
  flex: 1;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

.army.is-active .board__grid { box-shadow: 0 0 0 3px rgba(18, 20, 26, .07); }
.army--you .board__grid { cursor: default; }
.army--rival.is-active .cell:not([class*="cell--"]) { cursor: crosshair; }

.cell__mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.cell__mark svg { width: 56%; height: 56%; }

/* a searched square */
.cell--miss { background: #e8ebf0; }
.cell--miss .cell__mark svg { color: #98a2b2; width: 46%; height: 46%; }

/* a defence tile burns until the whole unit is uncovered */
.cell--fire {
  background: radial-gradient(circle at 50% 78%, #ffd36b, #f2662f 58%, #cf3524 100%);
}

.cell--fire .cell__mark svg {
  color: #fff3d6;
  animation: flicker 1.15s ease-in-out infinite;
}

@keyframes flicker {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.14); opacity: 1; }
}

/* then it is revealed for what it was */
.cell--down { background: var(--tone); }
.cell--down .cell__mark { display: none; }

.cell--mine-hit { background: #2b1218; }
.cell--mine-hit .cell__mark svg { color: #ff7a4d; }

.cell--pop { animation: cell-pop .32s cubic-bezier(.2, .9, .3, 1); }

@keyframes cell-pop {
  0% { transform: scale(.55); }
  60% { transform: scale(1.12); }
  100% { transform: none; }
}

.cell--boom { animation: cell-boom .55s ease; }

@keyframes cell-boom {
  0% { filter: brightness(2.4); }
  100% { filter: none; }
}

.cell--again { animation: nudge .3s ease; }

/* ── Mine proximity ─────────────────────────────────────────────────── */

.hint {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150%;
  height: 150%;
  translate: -50% -50%;
  rotate: var(--angle);
  pointer-events: none;
}

.hint::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 4%;
  width: 40%;
  height: 34%;
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 100%, rgba(244, 55, 70, .9), rgba(244, 55, 70, 0) 72%);
  animation: hint-breathe 1.8s ease-in-out infinite;
}

@keyframes hint-breathe {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* ── The duel ───────────────────────────────────────────────────────── */

.duel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 3vw, 22px);
  flex: none;
  padding: clamp(2px, .6vh, 6px) 0;
}

.cannon {
  display: block;
  width: clamp(56px, 17vw, 96px);
  color: var(--tone);
}

.cannon__art { width: 100%; height: auto; overflow: visible; }

.cannon__barrel {
  transform-origin: 32px 45px;
  transition: rotate .24s cubic-bezier(.2, .8, .3, 1);
}

/* Mirroring would invert the aim angle, so both cannons face right and
   simply rotate: the rival sits left and fires down, you sit right and
   fire up. */
.cannon--rival .cannon__barrel { rotate: 42deg; }
.cannon--you .cannon__barrel { rotate: -138deg; }
.cannon.is-firing .cannon__barrel { animation: recoil .32s ease-out; }

@keyframes recoil {
  35% { translate: -8px 0; }
  100% { translate: 0; }
}

.duel__mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: clamp(96px, 30vw, 160px);
}

.duel__vs {
  font-size: clamp(16px, 5vw, 24px);
  font-weight: 850;
  letter-spacing: -.03em;
  color: var(--ink);
}

.duel__say {
  min-height: 1.2em;
  font-size: clamp(9.5px, 2.8vw, 12px);
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.2;
}

/* ── Fleet strip ────────────────────────────────────────────────────── */

.stock {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
  flex: none;
}

.stock__unit {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--tone);
  font-size: clamp(9px, 2.5vw, 11px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition: opacity .3s ease;
}

.stock__unit svg { width: clamp(11px, 3vw, 14px); height: auto; }
.stock__unit b { color: var(--ink); }
.stock__unit.is-down { opacity: .32; }
.stock__unit.is-down b { text-decoration: line-through; }

/* ── Shots in flight ────────────────────────────────────────────────── */

.shots { position: fixed; inset: 0; pointer-events: none; z-index: 50; }

.shot {
  position: fixed;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--tone);
  box-shadow: 0 0 12px var(--tone);
}

/* ── Result ─────────────────────────────────────────────────────────── */

.verdict {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(251, 251, 253, .82);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  animation: verdict-in .4s ease both;
}

@keyframes verdict-in { from { opacity: 0; } to { opacity: 1; } }

.verdict__card {
  width: min(100%, 320px);
  padding: clamp(22px, 4vh, 30px) 22px;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 2px 6px rgba(17, 24, 39, .08), 0 22px 50px rgba(17, 24, 39, .16);
  text-align: center;
}

.verdict__kicker {
  margin: 0;
  font-size: clamp(11px, 3.2vw, 13px);
  font-weight: 750;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.verdict__title {
  margin: 6px 0 18px;
  font-size: clamp(26px, 8vw, 38px);
  font-weight: 830;
  letter-spacing: -.03em;
}

.verdict.is-flawless .verdict__title {
  background: linear-gradient(95deg, var(--c-blue-btn), var(--ball-purple) 55%, var(--c-red-ink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .battle, .verdict { animation: none; }
  .cell--fire .cell__mark svg, .hint::before { animation: none; }
}