/* Battle position map and active-turn animation. */
/* Relative battle position map */
.battle-map-card { grid-column: 1 / -1; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px; background: var(--panel-2); }
.battle-map-heading { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 10px; }
.battle-map-heading > div { min-width: 0; }
.battle-map-heading .eyebrow { display: block; margin-bottom: 3px; }
.battle-map-heading strong { display: block; font-size: 15px; }
.battle-map-summary { color: var(--muted); font-size: 11px; text-align: right; font-variant-numeric: tabular-nums; }
.battle-map-stage { position: relative; min-height: 210px; overflow: hidden; border: 1px solid rgba(105,213,255,.18); border-radius: 12px; background: radial-gradient(circle at center, rgba(105,213,255,.055), transparent 58%), #09111e; }
.battle-map-grid { position: absolute; inset: 0; opacity: .48; background-image: linear-gradient(rgba(105,213,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(105,213,255,.08) 1px, transparent 1px); background-size: 40px 40px; }
.battle-map-stage::before, .battle-map-stage::after { content: ''; position: absolute; background: rgba(105,213,255,.13); pointer-events: none; }
.battle-map-stage::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.battle-map-stage::after { top: 50%; left: 0; right: 0; height: 1px; }
.battle-map-marker { position: absolute; z-index: 2; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 5px; transition: left .28s ease, top .28s ease; }
.battle-map-marker[hidden] { display: none; }
.battle-map-symbol { position: relative; display: grid; place-items: center; width: 50px; height: 34px; }
.battle-map-dot { position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid rgba(255,255,255,.78); transition: width .15s ease, height .15s ease; }
.battle-map-marker.player .battle-map-dot { background: var(--good); box-shadow: 0 0 15px rgba(92,227,164,.72); }
.battle-map-marker.boss .battle-map-dot { width: 18px; height: 18px; background: var(--bad); box-shadow: 0 0 17px rgba(255,126,136,.72); }
.battle-map-arrow { position: absolute; top: 50%; color: #fff; font-size: 17px; line-height: 1; transform: translateY(-52%); text-shadow: 0 1px 3px #000; }
.battle-map-marker.facing-left .battle-map-arrow { right: 27px; }
.battle-map-marker.facing-right .battle-map-arrow { left: 27px; }
.battle-map-marker.facing-unknown .battle-map-arrow { left: 50%; transform: translate(-50%, -52%); font-size: 12px; }
.battle-map-label { max-width: 210px; padding: 3px 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--line); border-radius: 7px; background: rgba(7,13,23,.9); font-size: 10px; font-variant-numeric: tabular-nums; }
.battle-map-empty { display: none; position: absolute; inset: 0; place-items: center; color: var(--muted); font-size: 12px; }
.battle-map-stage.empty .battle-map-empty { display: grid; }
.battle-map-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; color: var(--muted); font-size: 10px; }
.battle-map-legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-dot.player { background: var(--good); }
.legend-dot.boss { background: var(--bad); }
@media (max-width: 560px) {
  .battle-map-heading { align-items: flex-start; flex-direction: column; gap: 5px; }
  .battle-map-summary { text-align: left; }
  .battle-map-stage { min-height: 180px; }
  .battle-map-label { max-width: 130px; }
}

/* Integer turn countdown rendered directly on the active entity dot. */
.battle-map-turn-countdown { display: none; position: absolute; z-index: 4; left: 50%; top: 50%; min-width: 20px; transform: translate(-50%, -50%); color: #fff; font-size: 9px; font-weight: 900; line-height: 1; text-align: center; font-variant-numeric: tabular-nums; text-shadow: 0 1px 3px rgba(0,0,0,.95); pointer-events: none; }
.battle-map-marker.turn-active .battle-map-turn-countdown { display: block; }
.battle-map-marker.turn-active .battle-map-dot { width: 24px; height: 24px; border-color: rgba(255,255,255,.94); }
.battle-map-marker.boss.turn-active .battle-map-dot { width: 26px; height: 26px; }
.battle-map-marker.turn-active.facing-left .battle-map-arrow { right: 32px; }
.battle-map-marker.turn-active.facing-right .battle-map-arrow { left: 32px; }
.battle-map-marker.turn-active .battle-map-symbol::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 50%;
  opacity: .92;
  transform: scale(.65);
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform, opacity;
  animation: turn-marker-pulse 1.2s cubic-bezier(.22, .61, .36, 1) infinite;
  animation-delay: var(--turn-pulse-delay, 0ms);
}
.battle-map-marker.player.turn-active { color: var(--good); }
.battle-map-marker.boss.turn-active { color: var(--bad); }
.battle-map-marker.urgent .battle-map-turn-countdown { color: #fff3b0; animation: turn-countdown-pulse .45s ease-in-out infinite alternate; }
.battle-map-marker.expired .battle-map-turn-countdown { color: var(--bad); }
@keyframes turn-marker-pulse { 0% { transform: scale(.65); opacity: .95; } 68% { opacity: .30; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes turn-countdown-pulse { from { transform: translate(-50%, -50%) scale(1); } to { transform: translate(-50%, -50%) scale(1.18); } }