/* PlayerBar — horizontal bar of player pills for battle card games. */

.player-bar {
    display: flex;
    gap: 8px;
    padding: 8px 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: var(--game-surface, #16213e);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.player-bar::-webkit-scrollbar {
    display: none;
}

.player-bar-pill {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 2px solid transparent;
    background: rgba(255, 255, 255, 0.06);
    color: var(--game-text, #eee);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    -webkit-user-select: none;
}

.player-bar-pill:active {
    opacity: 0.8;
}

.player-bar-pill.is-you {
    background: rgba(255, 255, 255, 0.12);
}

.player-bar-pill.is-you .player-bar-star {
    display: inline;
}

.player-bar-star {
    display: none;
    font-size: 0.75rem;
}

.player-bar-pill.viewing {
    border-color: #d4a017;
    background: rgba(212, 160, 23, 0.12);
}

.player-bar-pill.current-turn::after {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--game-success, #27ae60);
    flex-shrink: 0;
}

.player-bar-pill.targetable {
    border-color: var(--target-color, #f84);
    box-shadow: var(--target-glow, 0 0 12px rgba(255, 136, 68, 0.27));
    animation: player-bar-pulse 1.5s ease-in-out infinite;
}

@keyframes player-bar-pulse {
    0%, 100% { box-shadow: var(--target-glow, 0 0 12px rgba(255, 136, 68, 0.27)); }
    50% { box-shadow: 0 0 20px rgba(255, 136, 68, 0.5); }
}

.player-bar-stats {
    color: var(--game-text-muted, #aaa);
    font-weight: 400;
    font-size: 0.8rem;
}