@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&family=Outfit:wght@400;600;800&display=swap');

/* ══════════════════════════════════════════════
   DESIGN TOKENS — Color Palette
   Primary:  #51C4D3  (Cyan)
   Mid:      #126E82  (Deep Teal)
   Dark:     #132C33  (Dark Green)
   White:    #ffffff
   ══════════════════════════════════════════════ */
:root {
    --spp-bg:           #0d1f24;          /* darker than #132C33 for depth */
    --spp-bg-alt:       #132C33;
    --spp-card:         rgba(18, 44, 51, 0.85);
    --spp-card-border:  rgba(81, 196, 211, 0.18);
    --spp-accent:       #51C4D3;
    --spp-accent-rgb:   81, 196, 211;
    --spp-mid:          #126E82;
    --spp-mid-rgb:      18, 110, 130;
    --spp-dark:         #132C33;
    --spp-dark-rgb:     19, 44, 51;
    --spp-text:         #ffffff;
    --spp-text-muted:   rgba(255, 255, 255, 0.55);
    --spp-glass:        rgba(81, 196, 211, 0.06);
    --spp-glass-border: rgba(81, 196, 211, 0.15);
    --spp-shadow:       0 10px 35px -8px rgba(0, 0, 0, 0.45);
    --spp-glow:         0 0 30px rgba(81, 196, 211, 0.35);
    --spp-glow-mid:     0 0 30px rgba(18, 110, 130, 0.4);
    --spp-font-ar:      'Cairo', sans-serif;
    --spp-font-en:      'Outfit', sans-serif;
    --spp-radius:        20px;
    --spp-radius-sm:     12px;
}

/* ══════════════  KEYFRAME ANIMATIONS  ══════════════ */

@keyframes sppFadeInUp {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}

@keyframes sppFadeInDown {
    from { opacity: 0; transform: translateY(-28px); }
    to   { opacity: 1; transform: translateY(0);     }
}

@keyframes sppFadeInLeft {
    from { opacity: 0; transform: translateX(-28px); }
    to   { opacity: 1; transform: translateX(0);     }
}

@keyframes sppFadeInRight {
    from { opacity: 0; transform: translateX(28px); }
    to   { opacity: 1; transform: translateX(0);    }
}

@keyframes sppScaleIn {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1);    }
}

@keyframes sppPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(81, 196, 211, 0.55); }
    50%      { box-shadow: 0 0 0 12px rgba(81, 196, 211, 0);  }
}

@keyframes sppPulseLive {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
    50%      { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
}

@keyframes sppSpin {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

@keyframes sppShimmer {
    0%   { background-position: -200% center; }
    100% { background-position:  200% center; }
}

@keyframes sppFloat {
    0%, 100% { transform: translateY(0px);   }
    50%       { transform: translateY(-8px);  }
}

@keyframes sppGlowPulse {
    0%, 100% { opacity: 0.6; }
    50%      { opacity: 1.0; }
}

@keyframes sppBounceIn {
    0%   { opacity: 0; transform: scale(0.3);  }
    50%  { opacity: 1; transform: scale(1.05); }
    70%  { transform: scale(0.9);  }
    100% { transform: scale(1);    }
}

@keyframes sppBarFill {
    from { width: 0 !important; }
    to   { /* width stays as set inline */ }
}

@keyframes sppTypingDot {
    0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
    40%           { transform: scale(1);   opacity: 1;   }
}

/* ══════════════  ANIMATION HELPERS  ══════════════ */

.spp-animate-fade-in        { animation: sppFadeInUp   0.65s ease both; }
.spp-animate-fade-in-down   { animation: sppFadeInDown 0.65s ease both; }
.spp-animate-fade-in-left   { animation: sppFadeInLeft 0.65s ease both; }
.spp-animate-fade-in-right  { animation: sppFadeInRight 0.65s ease both; }
.spp-animate-scale-in       { animation: sppScaleIn    0.55s cubic-bezier(0.175, 0.885, 0.32, 1.275) both; }
.spp-animate-bounce-in      { animation: sppBounceIn   0.75s cubic-bezier(0.215, 0.61, 0.355, 1) both; }
.spp-animate-float          { animation: sppFloat      4s ease-in-out infinite; }
.spp-animate-glow-pulse     { animation: sppGlowPulse  2.5s ease-in-out infinite; }

/* Stagger helpers */
.spp-d100  { animation-delay: 0.10s; }
.spp-d200  { animation-delay: 0.20s; }
.spp-d300  { animation-delay: 0.30s; }
.spp-d400  { animation-delay: 0.40s; }
.spp-d500  { animation-delay: 0.50s; }
.spp-d600  { animation-delay: 0.60s; }

/* ══════════════  GLASSMORPHISM UTILITY  ══════════════ */
.spp-glass {
    background:             var(--spp-glass);
    backdrop-filter:        blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border:                 1px solid var(--spp-glass-border);
    box-shadow:             var(--spp-shadow);
}

/* ══════════════  PREMIUM CARD  ══════════════ */
.spp-premium-card {
    background:    linear-gradient(145deg, rgba(18,110,130,0.22), rgba(19,44,51,0.88));
    border:        1px solid var(--spp-card-border);
    border-radius: var(--spp-radius);
    padding:       24px;
    box-shadow:    var(--spp-shadow);
    transition:    transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    position:      relative;
    overflow:      hidden;
}

.spp-premium-card::before {
    content:   '';
    position:  absolute;
    inset:     0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(81,196,211,0.08) 0%, transparent 60%);
    pointer-events: none;
}

.spp-premium-card:hover {
    transform:    translateY(-4px);
    box-shadow:   0 20px 50px -10px rgba(0, 0, 0, 0.55), var(--spp-glow);
    border-color: rgba(81, 196, 211, 0.35);
}

/* ══════════════  TYPOGRAPHY  ══════════════ */
.spp-font-ar { font-family: var(--spp-font-ar); }
.spp-font-en { font-family: var(--spp-font-en); }

/* ══════════════  GLOBAL CONTAINER  ══════════════ */
.spp-layout-wrapper {
    font-family:      var(--spp-font-ar);
    background-color: var(--spp-bg);
    color:            var(--spp-text);
    min-height:       100vh;
    direction:        rtl;
    overflow-x:       hidden;
}

/* ══════════════  MATCH HERO  ══════════════ */
.spp-match-hero {
    position:      relative;
    padding:       90px 0 120px;
    background:
        radial-gradient(ellipse 80% 60% at 50% -20%, rgba(81,196,211,0.22) 0%, transparent 70%),
        radial-gradient(ellipse 50% 40% at 0%  100%, rgba(18,110,130,0.18) 0%, transparent 60%),
        linear-gradient(160deg, #0d2229 0%, #132C33 50%, #0a1a1f 100%);
    border-bottom: 1px solid var(--spp-card-border);
    overflow:      hidden;
}

/* animated mesh / grid background */
.spp-match-hero::before {
    content:         '';
    position:        absolute;
    inset:           0;
    background-image:
        linear-gradient(rgba(81,196,211,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(81,196,211,0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    animation:       sppGlowPulse 6s ease-in-out infinite;
}

/* glowing orb top-right */
.spp-match-hero::after {
    content:   '';
    position:  absolute;
    top:  -80px;
    right:-80px;
    width:  360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(81,196,211,0.18) 0%, transparent 70%);
    pointer-events: none;
    animation: sppFloat 8s ease-in-out infinite;
}

/* ══════════════  SCORE  ══════════════ */
.spp-score-huge {
    font-family:   var(--spp-font-en);
    font-size:     6rem;
    font-weight:   900;
    line-height:   1;
    letter-spacing:-3px;
    background:    linear-gradient(160deg, #ffffff 0%, var(--spp-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter:        drop-shadow(0 0 18px rgba(81,196,211,0.5));
    animation:     sppScaleIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* shimmer effect on score */
.spp-score-huge.spp-shimmer {
    background: linear-gradient(120deg, #fff 30%, var(--spp-accent) 50%, #fff 70%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: sppShimmer 3s linear infinite, sppScaleIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

/* ══════════════  TEAM LOGOS  ══════════════ */
.spp-team-logo-lg {
    width:         110px;
    height:        110px;
    background:    rgba(81,196,211,0.07);
    border:        2px solid var(--spp-glass-border);
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    padding:       14px;
    margin-bottom: 14px;
    box-shadow:    var(--spp-shadow);
    transition:    transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease, border-color 0.4s ease;
}

.spp-team-logo-lg:hover {
    transform:    scale(1.1) rotate(5deg);
    box-shadow:   var(--spp-glow);
    border-color: var(--spp-accent);
}

.spp-team-logo-lg img {
    max-width:   100%;
    max-height:  100%;
    object-fit:  contain;
}

/* ══════════════  FOOTBALL PITCH  ══════════════ */
.spp-pitch-container {
    background: linear-gradient(to bottom, #1a6b2a 0%, #1e7a30 50%, #1a6b2a 100%);
    background-image:
        repeating-linear-gradient(0deg, rgba(0,0,0,0.06) 0px, rgba(0,0,0,0.06) 1px, transparent 1px, transparent 40px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 150'%3E%3Crect fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1' x='0' y='0' width='100' height='150'/%3E%3Cline x1='0' y1='75' x2='100' y2='75' stroke='rgba(255,255,255,0.4)' stroke-width='1'/%3E%3Ccircle cx='50' cy='75' r='15' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1'/%3E%3Ccircle cx='50' cy='75' r='1' fill='rgba(255,255,255,0.4)'/%3E%3Crect x='20' y='0' width='60' height='25' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1'/%3E%3Crect x='35' y='0' width='30' height='10' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1'/%3E%3Crect x='20' y='125' width='60' height='25' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1'/%3E%3Crect x='35' y='140' width='30' height='10' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='1'/%3E%3C/svg%3E");
    background-size: cover;
    border:        3px solid rgba(81,196,211,0.4);
    border-radius: var(--spp-radius);
    aspect-ratio:  2/3;
    position:      relative;
    overflow:      hidden;
    margin:        20px 0;
    box-shadow:    inset 0 0 80px rgba(0,0,0,0.35), 0 15px 45px rgba(0,0,0,0.5), var(--spp-glow);
}

.spp-pitch-center-circle { display: none; }
.spp-pitch-container::after { display: none; }

.spp-pitch-container::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.25) 100%);
    pointer-events: none;
    z-index:        1;
}

/* ══════════════  PLAYER MARKERS  ══════════════ */
.spp-player-marker {
    width:         34px;
    height:        34px;
    background:    #fff;
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    font-weight:   800;
    font-size:     11px;
    box-shadow:    0 4px 12px rgba(0,0,0,0.4);
    border:        2px solid transparent;
    transition:    all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index:       10;
    cursor:        pointer;
}

.spp-player-marker:hover {
    transform: translate(-50%, -50%) scale(1.25) !important;
    z-index:   100;
}

.spp-player-name {
    position:      absolute;
    top:           100%;
    left:          50%;
    transform:     translateX(-50%);
    background:    rgba(13, 31, 36, 0.88);
    color:         #fff;
    padding:       2px 7px;
    border-radius: 5px;
    font-size:     10px;
    white-space:   nowrap;
    margin-top:    4px;
    backdrop-filter: blur(6px);
    border:        1px solid rgba(81,196,211,0.2);
    z-index:       99;
}

.team-a .spp-player-marker {
    background:   var(--spp-accent);
    color:        #132C33;
    border-color: #fff;
    animation:    sppBounceIn 0.5s both;
}

.team-b .spp-player-marker {
    background:   #f59e0b;
    color:        #132C33;
    border-color: #fff;
    animation:    sppBounceIn 0.5s both;
}

/* ══════════════  SMALL TEAM LOGO  ══════════════ */
.spp-team-logo-sm {
    width:           54px;
    height:          54px;
    background:      rgba(81,196,211,0.07);
    border:          1px solid var(--spp-glass-border);
    border-radius:   50%;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         8px;
    transition:      transform 0.3s ease;
}

.spp-team-logo-sm:hover { transform: scale(1.08); }

.spp-team-logo-sm img {
    max-width:  100%;
    max-height: 100%;
    object-fit: contain;
}

/* ══════════════  STAT BARS  ══════════════ */
.spp-stat-bar-fill {
    animation: sppBarFill 1.2s ease both;
}

/* ══════════════  BADGES & PILLS  ══════════════ */
.spp-badge-accent {
    background:    linear-gradient(135deg, var(--spp-accent), var(--spp-mid));
    color:         var(--spp-dark);
    font-weight:   700;
    border-radius: 999px;
    padding:       4px 14px;
}

/* ══════════════  LIVE PULSE BADGE  ══════════════ */
.animation-pulse {
    animation: sppPulseLive 1.5s ease-in-out infinite;
}

/* ══════════════  PLAYER PAGE  ══════════════ */
.spp-player-hero {
    position:   relative;
    padding:    80px 0;
    overflow:   hidden;
    background: radial-gradient(circle at 70% 30%, rgba(var(--spp-accent-rgb), 0.15), transparent 40%),
                radial-gradient(circle at 30% 70%, rgba(var(--spp-mid-rgb), 0.12), transparent 50%),
                linear-gradient(160deg, #0d2229 0%, #132C33 100%);
}

.spp-player-avatar {
    width:         180px;
    height:        180px;
    border-radius: 50%;
    border:        5px solid var(--spp-accent);
    box-shadow:    var(--spp-glow), var(--spp-shadow);
    object-fit:    cover;
    background:    var(--spp-card);
    animation:     sppScaleIn 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

.spp-stat-value {
    font-family: var(--spp-font-en);
    font-size:   3.2rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    background:  linear-gradient(to bottom, #ffffff, var(--spp-accent));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.spp-stat-label {
    font-size:      1rem;
    color:          var(--spp-text-muted);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ══════════════  FOOTER  ══════════════ */
footer.border-top {
    border-top-color: var(--spp-card-border) !important;
    background:       linear-gradient(180deg, transparent, rgba(13,28,34,0.6));
}

footer a { transition: color 0.25s ease, transform 0.25s ease; display: inline-block; }
footer a:hover { color: var(--spp-accent) !important; transform: translateY(-2px); }

/* ══════════════  HOVER-GLOW ON UPCOMING  ══════════════ */
.hover-glow {
    transition: box-shadow 0.35s ease, background 0.35s ease;
}
.hover-glow:hover {
    box-shadow:  var(--spp-glow);
    background:  rgba(81,196,211,0.12) !important;
}

/* ══════════════  TABLE OVERRIDES  ══════════════ */
.table-dark {
    --bs-table-bg:           transparent;
    --bs-table-hover-bg:     rgba(81, 196, 211, 0.08);
    --bs-table-color:        #fff;
    --bs-table-border-color: rgba(81,196,211,0.12);
}

/* ══════════════  RESPONSIVE  ══════════════ */
@media (max-width: 991px) {
    .spp-match-hero  { padding: 50px 0 80px; }
    .spp-score-huge  { font-size: 3.5rem; }
    .spp-team-logo-lg { width: 80px; height: 80px; }
}

@media (max-width: 575px) {
    .spp-score-huge  { font-size: 2.8rem; }
    .spp-team-logo-lg { width: 65px; height: 65px; }
}

/* ══════════════  ARCHIVE GRID  ══════════════ */
.spp-archive-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap:                   24px;
}

/* ══════════════  SCROLLBAR  ══════════════ */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--spp-bg); }
::-webkit-scrollbar-thumb { background: var(--spp-mid); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--spp-accent); }