/* Token Animations, Hopping, Confetti & Turn Timer */

/* Step Hopping Animation (Animated on inner .pawn-piece in board.css so .token-pawn stays strictly at translate(-50%, -50%)) */
.token-pawn.hopping {
    z-index: 50;
}

/* Capture / Kill Blast */
.capture-blast {
    position: absolute;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(239, 68, 68, 0.9) 0%, rgba(245, 158, 11, 0.6) 50%, transparent 80%);
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.2);
    animation: blastPop 0.45s ease-out forwards;
    z-index: 60;
}

@keyframes blastPop {
    0% { transform: translate(-50%, -50%) scale(0.2); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.4); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}

/* Turn Timer SVG Ring */
.timer-svg {
    position: absolute;
    top: -4px;
    left: -4px;
    width: 50px;
    height: 50px;
    pointer-events: none;
    transform: rotate(-90deg);
}

.timer-circle {
    fill: none;
    stroke: var(--gold);
    stroke-width: 3;
    stroke-dasharray: 138;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 0.25s linear;
}

/* Confetti Canvas */
#confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 999;
}