#character-container {
  position: absolute;
  z-index: 5;
  transition: transform var(--jump-duration) ease-out;
  will-change: transform;
  /* Center the square sprite within the zone cell */
  display: flex;
  align-items: center;
  justify-content: center;
}

#character-sprite {
  width: var(--tile-size);
  height: var(--tile-size);
  background-color: transparent;
  border-radius: 4px;
  transform: scale(1.8);
  transition: background-color 0.15s, border-radius 0.15s, opacity 0.15s, border 0.15s;
}

#character-sprite.facing-left {
  transform: scale(-1.8, 1.8);
}

#character-shield-aura {
  position: absolute;
  inset: -1.5rem;
  border: 3px solid rgba(68, 136, 255, 0.7);
  border-radius: 50%;
  opacity: 1;
  animation: shieldPulse 1.2s ease-in-out infinite;
  box-shadow:
    0 0 8px 2px rgba(68, 136, 255, 0.5),
    0 0 20px 6px rgba(68, 136, 255, 0.25),
    inset 0 0 12px 3px rgba(68, 136, 255, 0.15);
  background: radial-gradient(circle, rgba(68, 136, 255, 0.08) 0%, transparent 70%);
}

/* Expiration warning — applied by JS when shield has < 1.5s remaining */
#character-shield-aura.shield-expiring {
  animation: shieldExpiring 0.25s ease-in-out infinite;
  border-color: rgba(255, 140, 50, 0.9);
  box-shadow:
    0 0 8px 2px rgba(255, 140, 50, 0.5),
    0 0 20px 6px rgba(255, 140, 50, 0.25),
    inset 0 0 12px 3px rgba(255, 140, 50, 0.15);
  background: radial-gradient(circle, rgba(255, 140, 50, 0.08) 0%, transparent 70%);
}

/* Ripple burst pseudo-element — triggered by shield-block */
#character-shield-aura.shield-ripple::after {
  content: '';
  position: absolute;
  inset: -0.25rem;
  border: 2px solid rgba(68, 136, 255, 0.8);
  border-radius: 50%;
  animation: shieldRippleBurst 0.4s ease-out forwards;
  pointer-events: none;
}

#character-powerup-timer {
  position: absolute;
  bottom: -0.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 0.1875rem;
  background: #333;
  border-radius: 2px;
}
#character-powerup-timer::after {
  content: '';
  display: block;
  height: 100%;
  background: var(--health-green);
  border-radius: 2px;
  width: var(--powerup-timer-pct, 100%);
  transition: width 0.1s linear;
}