/* Current-turn hero highlight — 5 swappable styles.
   Style is selected in JS via CURRENT_TURN_HIGHLIGHT_STYLE in
   js/subcomponents/mapDrawerSubcomponents/currentTurnHighlighter.js */

.current-turn-highlight {
    position: absolute;
    pointer-events: none;
    box-sizing: border-box;
}

/* ============================================================
   Style 1: pulsing_ring
   A clean ring that scales/fades like a heartbeat.
   ============================================================ */
.current-turn-pulsing-ring {
    inset: -10%;
    border-radius: 50%;
    border: 3px solid;
    z-index: 6;
    animation: ctPulsingRing 1.4s ease-in-out infinite;
}
@keyframes ctPulsingRing {
    0%, 100% { transform: scale(1);    opacity: 0.95; }
    50%      { transform: scale(1.18); opacity: 0.55; }
}

/* ============================================================
   Style 2: target_lock
   A dashed circle that rotates, plus 4 corner brackets.
   ============================================================ */
.current-turn-target-lock {
    inset: -18%;
    z-index: 6;
}
.current-turn-target-lock-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed;
    animation: ctTargetSpin 4s linear infinite;
}
.current-turn-target-lock-bracket {
    position: absolute;
    width: 22%;
    height: 22%;
    border: 3px solid;
    animation: ctTargetBracketPulse 1.6s ease-in-out infinite;
}
.current-turn-target-lock-bracket.bracket-0 { top: 0;     left: 0;     border-right: none;  border-bottom: none; }
.current-turn-target-lock-bracket.bracket-1 { top: 0;     right: 0;    border-left: none;   border-bottom: none; }
.current-turn-target-lock-bracket.bracket-2 { bottom: 0;  right: 0;    border-left: none;   border-top: none;    }
.current-turn-target-lock-bracket.bracket-3 { bottom: 0;  left: 0;     border-right: none;  border-top: none;    }
@keyframes ctTargetSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes ctTargetBracketPulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* ============================================================
   Style 3: glowing_aura
   A soft radial halo pulsating beneath the hero.
   ============================================================ */
.current-turn-glowing-aura {
    inset: -35%;
    border-radius: 50%;
    z-index: 0;
    filter: blur(2px);
    animation: ctAuraBreath 1.8s ease-in-out infinite;
}
@keyframes ctAuraBreath {
    0%, 100% { transform: scale(0.92); opacity: 0.55; }
    50%      { transform: scale(1.1);  opacity: 1;    }
}

/* ============================================================
   Style 4: orbiting_orbs (crazier)
   4 glowing orbs orbit the hero, with a soft halo behind.
   ============================================================ */
.current-turn-orbiting-orbs {
    inset: -30%;
    z-index: 6;
}
.current-turn-orbits-glow {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    filter: blur(3px);
    animation: ctOrbsHalo 1.6s ease-in-out infinite;
    z-index: -1;
}
.current-turn-orbits-ring {
    position: absolute;
    inset: 0;
    animation: ctOrbsSpin 3.2s linear infinite;
}
.current-turn-orb {
    position: absolute;
    width: 16%;
    height: 16%;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    margin: -8% 0 0 -8%;
    animation: ctOrbPulse 1.2s ease-in-out infinite;
}
/* placed via translate after rotate so they sit on a circle.
   Per-orb pulse stagger is set in JS via applyAnchor() so it stays
   in sync with the session-wide animation anchor. */
.current-turn-orb.orb-0 { transform: rotate(0deg)   translate(0, -50%) rotate(0deg);   }
.current-turn-orb.orb-1 { transform: rotate(90deg)  translate(0, -50%) rotate(-90deg);  }
.current-turn-orb.orb-2 { transform: rotate(180deg) translate(0, -50%) rotate(-180deg); }
.current-turn-orb.orb-3 { transform: rotate(270deg) translate(0, -50%) rotate(-270deg); }
@keyframes ctOrbsSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes ctOrbPulse {
    0%, 100% { opacity: 0.7; filter: brightness(1); }
    50%      { opacity: 1;   filter: brightness(1.4); }
}
@keyframes ctOrbsHalo {
    0%, 100% { opacity: 0.55; transform: scale(0.95); }
    50%      { opacity: 0.95; transform: scale(1.1);  }
}

/* ============================================================
   Style 5: runic_vortex (craziest)
   Multi-layer magic circle: breathing core glow, a rotating
   conic-gradient energy swirl, and an outer counter-rotating
   ring of runes.
   ============================================================ */
.current-turn-runic-vortex {
    inset: -45%;
    z-index: 6;
}
.current-turn-runic-core {
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    filter: blur(2px);
    z-index: -1;
    animation: ctRunicCoreBreath 1.6s ease-in-out infinite;
}
.current-turn-runic-swirl {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    -webkit-mask: radial-gradient(circle, transparent 52%, #000 55%, #000 78%, transparent 80%);
            mask: radial-gradient(circle, transparent 52%, #000 55%, #000 78%, transparent 80%);
    animation: ctRunicSwirlSpin 2.4s linear infinite;
    opacity: 0.85;
}
.current-turn-runic-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    animation: ctRunicRingSpin 9s linear infinite;
    /* keeps text non-selectable on accidental hover */
    user-select: none;
}
.current-turn-rune-spoke {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.current-turn-rune {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -25%);
    font-size: 0.85em;
    line-height: 1;
    text-shadow: 0 0 6px currentColor, 0 0 10px currentColor;
    animation: ctRuneFlicker 2.2s ease-in-out infinite;
}
@keyframes ctRunicCoreBreath {
    0%, 100% { transform: scale(0.95); opacity: 0.6; }
    50%      { transform: scale(1.12); opacity: 1;   }
}
@keyframes ctRunicSwirlSpin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}
@keyframes ctRunicRingSpin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(-360deg); }
}
@keyframes ctRuneFlicker {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1;   }
}