/* ============================================================
   Mage tower renderer
   A floating arcane tower that plays out in three stages as the
   castle value climbs:
     Stage 1 — rises from the ground (its <img> slides up inside a
       fixed clipping box, like the tents).
     Stage 2 — lifts off and HOVERS (.mage-tower-hovering toggles a
       gentle float on the .mage-tower-hover wrapper).
     Stage 3 — POWER-UP (.mage-tower-powered toggles a pulsing
       arcane aura + an energised charge on the tower).
   The shell reuses the .image-container footprint so it scales with
   the responsive gameplay castle sizing.
   ============================================================ */

.mage-tower-shell {
  position: relative;
}

.mage-tower-ground {
  position: absolute;
  inset: 0;
}

/* Hover wrapper — carries the value-driven float LIFT (a translateY set by JS /
   inline). It eases by default; the JS clears the transition when entering the
   hover zone so the tower SNAPS off the ground. Kept separate from the bob and
   the rise so none of the transforms fight. */
.mage-tower-hover {
  position: absolute;
  inset: 0;
  transition: transform 0.6s ease-out;
}

/* Bob wrapper — a gentle continuous float around the lifted baseline. */
.mage-tower-bob {
  position: absolute;
  inset: 0;
}

.mage-tower-hovering .mage-tower-bob {
  animation: mage-tower-bob 3.4s ease-in-out infinite;
}

@keyframes mage-tower-bob {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

/* Clipping box for the stage-1 rise: full shell height, tower-shaped width,
   centred and anchored to the ground. */
.mage-tower-unit {
  position: absolute;
  left: 50%;
  bottom: 0;
  height: 100%;
  aspect-ratio: 388 / 600;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}

.mage-tower-unit img {
  display: block;
  width: 100%;
  height: auto;
  will-change: transform;
}

/* Stage 3 — the tower charges up, scaled by --mage-power (0 at the power
   threshold → 1 at 100) so it's faint near 70 and full near 100.
   brightness/saturate stay within the element, so they aren't clipped by the
   unit's overflow:hidden. */
.mage-tower-powered .mage-tower-unit img {
  animation: mage-tower-charge 1.8s ease-in-out infinite;
}

@keyframes mage-tower-charge {
  0%,
  100% {
    filter: brightness(1) saturate(1);
  }
  50% {
    filter: brightness(calc(1 + var(--mage-power, 1) * 0.28))
      saturate(calc(1 + var(--mage-power, 1) * 0.55));
  }
}

/* Arcane aura behind the tower — only visible (and pulsing) in stage 3. */
.mage-tower-glow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 96%;
  aspect-ratio: 1;
  transform: translateX(-50%) scale(0.95);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(95, 180, 255, 0.55) 0%,
    rgba(150, 95, 255, 0.3) 42%,
    transparent 68%
  );
  filter: blur(5px);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

.mage-tower-powered .mage-tower-glow {
  animation: mage-tower-aura 1.8s ease-in-out infinite;
}

/* Aura strength scales with --mage-power, so it grows from a faint hint near
   the power threshold to a strong pulse near 100. */
@keyframes mage-tower-aura {
  0%,
  100% {
    opacity: calc(var(--mage-power, 1) * 0.42);
    transform: translateX(-50%) scale(calc(0.92 + var(--mage-power, 1) * 0.06));
  }
  50% {
    opacity: calc(var(--mage-power, 1) * 0.9);
    transform: translateX(-50%) scale(calc(1.04 + var(--mage-power, 1) * 0.18));
  }
}

/* Magic wall — a barrier pinned at the tower base (it lives inside .mage-tower-
   bob, so it hovers with the tower). It does NOT move/grow; the <img> is
   revealed from the bottom up via a clip-path (inset from the top) driven by
   the wall value. */
.mage-tower-wall {
  position: absolute;
  left: 50%;
  bottom: 18%;
  width: 94%;
  transform: translateX(-50%);
  z-index: 2; /* in front of the tower (z 1), behind the castle HP (z 6) */
  pointer-events: none;
}

.mage-tower-wall-img {
  display: block;
  width: 100%;
  height: auto;
  will-change: clip-path;
}

.wall-image-hp.mage-tower-wall-hp {
  bottom: 2px;
  z-index: 6;
}

/* HP label near the top of the tower (the spires reach the top of the shell). */
.castle-image-hp.mage-tower-hp {
  bottom: auto;
  top: 4%;
  z-index: 6;
}

.mage-tower-shield-glow,
.mage-tower-shield-core {
  z-index: 6;
}

/* ── Mage tower test harness ──
   The shared .castle-renderer-harness-board scales its castle 2.7x; cancel that
   and pin the shell to a representative size (portrait, with hover headroom). */
.mage-tower-board .castle-visual-group {
  transform: none;
}

.mage-tower-board .mage-tower-shell {
  flex: 0 0 auto;
  width: 260px;
  height: 340px;
}

.mage-tower-stage-readout {
  display: flex;
  gap: 8px;
  margin-top: 4px;
  font-weight: 600;
}

.mage-tower-stage-chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(17, 12, 8, 0.55);
  opacity: 0.5;
}

.mage-tower-stage-chip.active {
  opacity: 1;
  border-color: #5fb4ff;
  color: #5fb4ff;
  box-shadow: 0 0 10px rgba(95, 180, 255, 0.4);
}