.cpl-statistics-page {
    padding: 20px;
}

    .cpl-stat-title {
        margin-bottom: 20px;    
        font-size: 30px;
        font-weight: 900;
        color: #f5c542;
        letter-spacing: 0.5px;
        text-shadow:
            0 0 6px rgba(245,197,66,0.5),
            0 0 12px rgba(245,197,66,0.4),
            0 0 18px rgba(245,197,66,0.3);
    }
/* player */
.cpl-stat-player {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* avatar */
.cpl-stat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffd800;
    color: #000;
    font-weight: bold;
    position: relative;
}

.cpl-stat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cpl-stat-avatar-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* text */
.cpl-stat-meta {
    display: flex;
    flex-direction: column;
}

.cpl-stat-meta strong {
    color: #fff;
}

.cpl-stat-meta span {
    color: #aaa;
    font-size: 12px;
}

/* value */
.cpl-stat-value {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cpl-stat-value strong {
    color: #ffd800;
    font-size: 18px;
}

/* empty */
.cpl-stat-empty {
    color: #999;
}


.cpl-statistics-title {
    font-size: 30px;
    font-weight: 900;
    color: #f5c542;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    text-shadow:
        0 0 6px rgba(245,197,66,0.5),
        0 0 12px rgba(245,197,66,0.4),
        0 0 18px rgba(245,197,66,0.3);
}


/* GRID */
.cpl-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 20px;
}

/* BOX */
.cpl-stat-box {
    background: linear-gradient(135deg, #0b1020, #111a35);
    border: 2px solid #ffd800;
    border-radius: 14px;
    padding: 16px;
    color: #fff;
}

.cpl-stat-box h3 {
    margin-bottom: 12px;
    color: #ffd800;
    font-size: 18px;
}

/* LIST */
.cpl-stat-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* ROW */
.cpl-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
}

/* PLAYER */
.cpl-stat-player {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cpl-stat-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #ffd800;
    color: #000;
    font-weight: bold;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;
    position: relative;
}

.cpl-stat-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cpl-stat-avatar-fallback {
    position: absolute;
    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

/* META */
.cpl-stat-meta strong {
    display: block;
}

.cpl-stat-meta span {
    color: #aaa;
    font-size: 12px;
}

/* VALUE */
.cpl-stat-value {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cpl-stat-value strong {
    color: #ffd800;
    font-size: 16px;
}

.cpl-stat-empty {
    color: #aaa;
    padding: 20px;
}
.cpl-rank-1 {
    border-color: gold;
    box-shadow: 0 0 12px rgba(255,215,0,0.6);
}

.cpl-rank-2 {
    border-color: silver;
}

.cpl-rank-3 {
    border-color: #cd7f32;
}
.cpl-stat-back {
    margin-bottom: 15px;
    text-align: right;
}

.cpl-stat-back a {
    color: #ffd800;
    text-decoration: none;
    font-weight: bold;
}

.cpl-stat-back a:hover {
    text-decoration: underline;
}
.cpl-stat-cards {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
    justify-content: space-between;
}

.cpl-stat-card {
    flex: 1;
    min-width: 0;
    background: linear-gradient(145deg, #1b1f2a, #0f131c);
    border-radius: 16px;
    padding: 18px 16px;
    text-align: center;
    color: #fff;
    box-shadow: 0 10px 22px rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.06);
    transition: 0.2s;

}

    .cpl-stat-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(0,0,0,0.45);
    }

/* ✅ الأيقونة */
.cpl-stat-icon {
    font-size: 26px;
    margin-bottom: 8px;
    display: block;
}

/* ✅ الرقم */
.cpl-stat-number {
    font-size: 30px;
    font-weight: 900;
    color: #f5c542;
    margin-bottom: 4px;
    text-shadow: 
            0 0 6px rgba(245,197,66,0.5),
            0 0 12px rgba(245,197,66,0.4),
            0 0 18px rgba(245,197,66,0.3);
}

/* ✅ النص */
.cpl-stat-label {
    font-size: 13px;
    font-weight: 600;
    color: #cbd5e1;
    letter-spacing: 0.3px;
}

/* ✅ تحسين ألوان مخصصة لكل كارت */
.cpl-stat-card:nth-child(1) .cpl-stat-icon {
    color: #f5c542; /* goals */
}

.cpl-stat-card:nth-child(2) .cpl-stat-icon {
    color: #facc15; /* yellow */
}

.cpl-stat-card:nth-child(3) .cpl-stat-icon {
    color: #ef4444; /* red */
}


@media (max-width: 640px) {
    .cpl-stat-cards {
        flex-direction: column;
    }
}
/* ✅ Glow Animation */
@keyframes glowPulse {
    0% {
        text-shadow:
            0 0 6px rgba(245,197,66,0.4),
            0 0 12px rgba(245,197,66,0.3);
    }
    50% {
        text-shadow:
            0 0 10px rgba(245,197,66,0.7),
            0 0 20px rgba(245,197,66,0.5);
    }
    100% {
        text-shadow:
            0 0 6px rgba(245,197,66,0.4),
            0 0 12px rgba(245,197,66,0.3);
    }
}

/* ✅ Apply animation */
.cpl-stat-number {
    animation: glowPulse 2.5s infinite;
}
.cpl-stat-main-title {
    font-size: 30px;
    font-weight: 900;
    color: #f5c542;
    margin-bottom: 15px;
    letter-spacing: 0.5px;

    text-align: left;

    text-shadow:
        0 0 6px rgba(245,197,66,0.5),
        0 0 12px rgba(245,197,66,0.4),
        0 0 18px rgba(245,197,66,0.3);
}