.coins {
    display: flex;
    justify-content: center;
    gap: 22px;
    margin: 35px 0;
}

.coin-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: unset;
}

.coin {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 25%, #ffffff 0%, #cfd4da 20%, #8c949e 55%, #4b525b 100%);
    border: 3px solid #d9dee5;
    box-shadow: inset 0 0 8px rgba(255,255,255,0.8), inset 0 -8px 12px rgba(0,0,0,0.45), 0 5px 12px rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1f2933;
    font-weight: 800;
    position: relative;
}

    .coin.active {
        border-color: #00bfff;
        box-shadow: 0 0 15px #00bfff, 0 0 35px rgba(0,191,255,0.8), inset 0 5px 12px rgba(255,255,255,0.6);
        animation: coinPulse 1.5s infinite;
    }

    .coin.sequence {
        transform: scale(1.15);
        animation: coinGlow 1s infinite alternate;
    }

    /* Current pointer should override sequence glow */
    .coin.active.sequence {
        border-color: #00bfff;
        box-shadow: 0 0 15px #00bfff, 0 0 35px rgba(0,191,255,0.8), inset 0 5px 12px rgba(255,255,255,0.6);
    }

@keyframes coinGlow {

    from {
        box-shadow: 0 0 10px gold;
        border-color: gold;
    }

    to {
        box-shadow: 0 0 28px orange;
        border-color: #ffd700;
    }
}
@keyframes coinPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}