.player-card {
    border: 1px solid rgba(213, 166, 66, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.92);
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease;
    height: 210px;
}

@media (min-width: 1920px) {
    section.panel-card-left.hide-on-mobile > div.panel-card.player-card {
        width: 377px !important;
        max-width: 377px !important;
        min-width: 377px !important;
        height: 160px !important;
    }
    section.panel-card-left.hide-on-mobile > div.panel-card.available-moves-card {
        width: 377px !important;
        max-width: 377px !important;
        min-width: 377px !important;
    }
}

.player-card--wide {
    width: 420px !important;
    max-width: 420px !important;
    min-width: 420px !important;
    height: 160px !important;
    min-height: 160px !important;
    max-height: 160px !important;
}

.player-card--active {
    border-color: rgba(213, 166, 66, 0.65);
    border-width: 2px;
    box-shadow: 0 0 14px rgba(213, 166, 66, 0.12);
    transform: scale(1.025);
    transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease border-width 200ms ease;
}

/* ── Header: emblem, name/faction, timer ── */
.player-card__header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.75rem;
    background: rgba(213, 166, 66, 0.03);
}

.player-card__emblem {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    font-size: 1rem;
}

.player-card__emblem--sun {
    border: 1.5px solid #d5a642;
    background: radial-gradient(circle at 40% 35%, rgba(255, 232, 160, 0.12), transparent 60%), rgba(10, 9, 8, 0.9);
    color: #d5a642;
    box-shadow: 0 0 10px rgba(213, 166, 66, 0.15);
}

.player-card__emblem--moon {
    border: 1.5px solid rgba(160, 180, 200, 0.4);
    background: radial-gradient(circle at 60% 35%, rgba(160, 180, 200, 0.1), transparent 60%), rgba(10, 9, 8, 0.9);
    color: rgba(180, 200, 220, 0.7);
    box-shadow: 0 0 10px rgba(160, 180, 200, 0.1);
}

.player-card__info {
    flex: 1;
    min-width: 0;
}

.player-card__name-row {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
}

.player-card__name {
    font-family: 'Cinzel', serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #f7ead0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
    .player-card__name.player-name--eliminated {
        text-decoration: line-through;
        text-decoration-color: rgba(200, 60, 60, 0.7);
        color: rgba(200, 200, 205, 0.7) !important;
    }

.player-card__elo {
    font-size: 0.65rem;
    color: rgba(247, 234, 208, 0.4);
    flex-shrink: 0;
}

.player-card__white, .player-card__black, .player-card__red, .player-card__blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.13rem 0.42rem;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-transform: uppercase;
    white-space: nowrap;
    line-height: 1;
}
/* White player badge */
.player-card__white {
    color: #fff3c4;
    background: linear-gradient( 180deg, rgba(255, 240, 180, 0.18), rgba(125, 92, 24, 0.16) );
    border: 1px solid rgba(255, 215, 110, 0.55);
    box-shadow: inset 0 0 8px rgba(255, 225, 150, 0.16), 0 0 8px rgba(255, 200, 80, 0.12);
    text-shadow: 0 0 5px rgba(255, 220, 140, 0.35);
}
/* Black player badge */
.player-card__black {
    color: #cddcff;
    background: linear-gradient( 180deg, rgba(80, 110, 165, 0.18), rgba(15, 22, 38, 0.38) );
    border: 1px solid rgba(105, 135, 200, 0.55);
    box-shadow: inset 0 0 8px rgba(120, 155, 220, 0.14), 0 0 8px rgba(80, 120, 200, 0.11);
    text-shadow: 0 0 5px rgba(120, 155, 230, 0.35);
}
/* Red player badge */
.player-card__red {
    color: #ffd0c4;
    background: linear-gradient( 180deg, rgba(255, 150, 120, 0.18), rgba(125, 30, 24, 0.30) );
    border: 1px solid rgba(230, 105, 90, 0.55);
    box-shadow: inset 0 0 8px rgba(230, 120, 100, 0.15), 0 0 8px rgba(210, 70, 55, 0.12);
    text-shadow: 0 0 5px rgba(235, 120, 100, 0.35);
}

/* Blue player badge */
.player-card__blue {
    color: #c4e6ff;
    background: linear-gradient( 180deg, rgba(110, 175, 230, 0.18), rgba(20, 55, 110, 0.34) );
    border: 1px solid rgba(90, 150, 220, 0.55);
    box-shadow: inset 0 0 8px rgba(110, 170, 235, 0.15), 0 0 8px rgba(60, 120, 210, 0.12);
    text-shadow: 0 0 5px rgba(110, 165, 235, 0.35);
}

.player-card__faction-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.1rem;
}

.player-card__faction-icon {
    font-size: 0.6rem;
}

.player-card__faction {
    font-family: 'Cinzel', serif;
    font-size: 0.55rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(213, 166, 66, 0.5);
}

.player-card__rank {
    font-size: 0.55rem;
    color: rgba(247, 234, 208, 0.3);
}

.player-card__timer {
    font-family: 'Cinzel', serif;
    font-size: 1.3rem;
    font-weight: 900;
    color: #ffe8a0;
    text-shadow: 0 0 10px rgba(213, 166, 66, 0.2);
    flex-shrink: 0;
    min-width: 52px;
    text-align: right;
    margin-left: auto;
}
    .player-card__timer.player-timer--eliminated {
        color: rgba(200, 90, 90, 0.85) !important;
        font-weight: 600;
        letter-spacing: 0.04em;
    }

.player-card__timer--inactive {
    color: rgba(247, 234, 208, 0.3);
    text-shadow: none;
}
/* ── Captures section ── */
.player-card__captures {
    padding: 0.4rem 0.75rem 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.03);
    min-height: 32px;
}

.player-card__captures-empty {
    font-size: 0.65rem;
    color: rgba(247, 234, 208, 0.25);
    font-style: italic;
}

.player-card__captures-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.player-card__capture {
    width: 22px;
    height: 100%;
    display: grid;
    place-items: center;
    opacity: 0.8;
    transition: opacity 140ms ease;
    background: rgba(92, 92, 92, 0.2);
    border-radius: 5px;
    padding: 1px;
}

    .player-card__capture:hover {
        opacity: 1;
    }

.player4-card  .player-card__capture {
    width: 30px !important;
    min-width: 30px !important;
}

.player-card__capture-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 0 1.5px rgba(213, 166, 66, 0.4)) drop-shadow(0 0 2px rgba(213, 166, 66, 0.15));
}
/* ── Active turn pulse on emblem ── */
.player-card--active .player-card__emblem--sun {
    animation: activeTurnPulse 2s ease-in-out infinite;
}

.player-card--active .player-card__emblem--moon {
    animation: activeTurnPulseMoon 2s ease-in-out infinite;
}

@keyframes activeTurnPulse {
    0%, 100% {
        box-shadow: 0 0 10px rgba(213, 166, 66, 0.15);
    }

    50% {
        box-shadow: 0 0 18px rgba(213, 166, 66, 0.35);
    }
}

@keyframes activeTurnPulseMoon {
    0%, 100% {
        box-shadow: 0 0 10px rgba(160, 180, 200, 0.1);
    }

    50% {
        box-shadow: 0 0 18px rgba(160, 180, 200, 0.25);
    }
}

.hide-on-desktop {
    display: none;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    .hide-on-desktop {
        display: unset;
    }

    .player-card-mobile {
        width: 100%;
    }

    .player-card {
        height: 70px;
        margin: 1px 6px;
    }

    .player-card__header {
        padding: 0.5rem 0.6rem;
        gap: 0.5rem;
    }

    .player-card__emblem {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }

    .player-card__name {
        font-size: 0.72rem;
    }

    .player-card__elo {
        font-size: 0.58rem;
    }

    .player-card__timer {
        font-size: 1rem;
    }

    .player-card__captures {
        padding: 0 !important;
        border-top: none !important;
    }

    .player-card__capture {
        width: 16px;
    }

    .player-card__captures-empty {
        display: none;
    }
}

.player4-card {
    border: 1px solid rgba(213, 166, 66, 0.2);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.92);
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease;
    height: 235px;
}
    .player4-card.player-card--active {
        transform: scale(1.035);
        border-color: rgba(213, 166, 66, 0.65);
        border-width: 1px;
        filter: brightness(1.5);
    }
    .player4-card.player-card--active::before {
        content: "";
        position: absolute;
        inset: -2px; /* border thickness — the glow ring sits just outside */
        border-radius: inherit; /* match the card's corner radius */
        padding: 3px; /* ring thickness */
        background: conic-gradient( from var(--angle), transparent 0deg, transparent 270deg, rgba(255, 215, 110, 0.9) 320deg, /* the bright "head" of the chase */
        rgba(255, 240, 180, 1) 350deg, transparent 360deg );
        /* Mask so only the ring (not the fill) shows — classic gradient-border trick */
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        animation: spin-border 4s linear infinite;
        pointer-events: none;
    }
    .player4-card.player-card--eliminated {
        opacity: 0.85; /* recede — clearly "out" */
        filter: grayscale(0.5) contrast(0.85); /* washed-out, hue-independent */
        box-shadow: none; /* strip the gold active-turn glow */
        border-color: rgba(120, 120, 130, 0.2) !important;
    }

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

@keyframes spin-border {
    to {
        --angle: 360deg;
    }
}

.player-card-slot {
    position: absolute;
}

.player-card-slot--bottom-left {
    bottom: 0;
    left: -65px;
    z-index: 999;
}

.player-card-slot--bottom-right {
    bottom: 0;
    right: -65px;
    z-index: 999;
}

.player-card-slot--top-left {
    top: 0;
    left: -65px;
    z-index: 999;
}

.player-card-slot--top-right {
    top: 0;
    right: -65px;
    z-index: 999;
}