/* The scene fills the viewport. The transparent interaction grid retains its
   original coordinates; only intentional range and danger cues reveal it. */
.app.battle-started {
  --battle-scene-image: url("../assets/battle-backgrounds/old-trees-level-distance.jpg");
  --battle-scene-position: 64% 56%;
}

.app.battle-started .board-panel,
.app.device-mobile.battle-started.mobile-battle-workspace .board-panel {
  background:
    radial-gradient(ellipse at 24% 22%, rgba(148, 132, 105, .12), transparent 58%),
    radial-gradient(ellipse at 78% 44%, rgba(129, 130, 110, .09), transparent 60%),
    radial-gradient(ellipse at 46% 88%, rgba(111, 91, 60, .16), transparent 62%),
    linear-gradient(175deg, #23231e, #222018 56%, #151510);
}

/* Museum open-access landscapes stay beneath the complete battle surface;
   overscan hides the scroll mounting without changing any input geometry. */
.app.battle-started .board-panel::before {
  content: "";
  position: absolute;
  inset: -10% -4%;
  z-index: 0;
  background: var(--battle-scene-image) var(--battle-scene-position) / cover no-repeat;
  opacity: var(--battle-scene-opacity, .64);
  filter: saturate(.68) contrast(.92);
  transform: scale(var(--battle-scene-zoom, 1));
  transform-origin: var(--battle-scene-position);
  pointer-events: none;
}

.app.battle-started .board-panel > .battle-board-wrap {
  z-index: 1;
  isolation: isolate;
}

/* Wide screens otherwise expose the unpainted mounting at the scroll's left. */
@media (min-aspect-ratio: 9/5) {
  .app.battle-started .board-panel::before {
    transform: scale(var(--battle-scene-wide-zoom, 1.4));
  }
}

.app.battle-started #board {
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Focus is shown in the status HUD; its enlarged portrait must not become a
   second, rectangular battlefield backdrop when the grid surface is clear. */
.app.battle-started #selectedPortrait {
  display: none;
}

.app.battle-started #board .cell.focus::before {
  background: transparent;
  filter: none;
}

.app.battle-started #board .board-shape-svg {
  inset: var(--board-grid-inset-y, 3px) var(--board-grid-inset-x, 3px);
  width: calc(100% - 2 * var(--board-grid-inset-x, 3px));
  height: calc(100% - 2 * var(--board-grid-inset-y, 3px));
}

.app.battle-started #board .piece-plinth {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 5%;
  height: 18%;
  z-index: 0;
  border: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(10, 9, 6, .48), transparent 72%);
  box-shadow: none;
  pointer-events: none;
}

.app.battle-started #board .piece {
  width: 76%;
  height: 76%;
  margin: 3% auto 0;
  padding: 2px;
  border-radius: 12% 12% 5% 5%;
  border: 1px solid rgba(170, 164, 140, .24);
  background-color: rgba(30, 29, 22, .38);
  overflow: visible;
}

.app.battle-started #board .piece-action-ring {
  top: -4px;
  right: -4px;
}

.app.battle-started #board .cell:not(.aoe-victim) .piece:not(.piece-in-danger):not(.piece-recovery-flash) {
  box-shadow: none;
}

/* Keep the turn cue quiet without replacing cast, recovery or danger motion. */
@keyframes piece-current-pulse {
  0%, 100% { box-shadow: none; border-color: rgba(204, 186, 137, .38); }
  50% { box-shadow: none; border-color: rgba(204, 186, 137, .55); }
}

.app.battle-started #board .piece-art-img {
  filter: saturate(.82) contrast(.98);
}

.app.battle-started #board .piece-fallback-name {
  display: -webkit-box;
  max-width: 100%;
  max-height: 2.2em;
  overflow: hidden;
  overflow-wrap: anywhere;
  font-size: clamp(7px, 1.05vw, 10px);
  line-height: 1.1;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.app.battle-started #board .piece-art::after {
  background: linear-gradient(0deg, rgba(22, 20, 14, .7), transparent 46%);
  box-shadow: none;
}

.app.battle-started #board .piece-label {
  left: 2px;
  right: 2px;
  bottom: 2px;
  padding: 2px 1px;
  border-radius: 3px;
  border: 0;
  background: transparent;
  color: #e2d7bd;
  text-shadow: 0 1px 3px #100f0b;
  font-size: clamp(7px, 1.05vw, 10px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app.battle-started #board .telegraph-cast-range {
  fill: rgba(198, 181, 136, .04);
  stroke: rgba(218, 202, 160, .6);
  stroke-width: 1px;
}

/* Movement proxies animate independently; the departure floor must clear. */
.app.battle-started #board .cell:has(.piece-moving-source) .piece-plinth {
  visibility: hidden;
}