/* ========================================
   ZW SOCCER PREMIUM DESIGN SYSTEM
   Brand Color: #faa000 (Gold)
   Version: 1.0
   ======================================== */

:root {
    /* Brand Colors */
    --gold: #faa000;
    --gold-light: #fcb42e;
    --gold-dark: #c47d00;
    --gold-glow: rgba(250, 160, 0, 0.3);
    --gold-gradient: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%);
    
    /* Dark Theme Backgrounds */
    --pitch-black: #0a0a0a;
    --surface-dark: #141414;
    --surface-card: rgba(20, 20, 20, 0.85);
    --surface-hover: rgba(30, 30, 30, 0.95);
    
    /* Borders */
    --border-subtle: rgba(255, 255, 255, 0.06);
    --border-gold: rgba(250, 160, 0, 0.2);
    
    /* Status Colors */
    --live-green: #00C853;
    --success-green: #00E676;
    --error-red: #FF5252;
    --success-gradient: linear-gradient(135deg, var(--success-green) 0%, var(--live-green) 100%);
    --error-gradient: linear-gradient(135deg, var(--error-red) 0%, #FF3B30 100%);
    
    /* Text Colors */
    --text-primary: #FFFFFF;
    --text-secondary: #A0A0A0;
    --text-muted: #7a7a7a;
    
    /* Spacing */
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 24px;
    
    /* Type Scale - six sizes, no exceptions.
       xs: micro labels, captions, badges, table headers
       sm: secondary body text, descriptions
       md: primary body text, names, prominent single-line labels
       lg: subheadings, section headers, prominent stat numbers
       xl: page titles, list-card scores
       display: the one hero number per screen */
    --fs-xs: 0.75rem;      /* 12px at default OS text size */
    --fs-sm: 0.9375rem;    /* 15px */
    --fs-md: 1.0625rem;    /* 17px */
    --fs-lg: 1.3125rem;    /* 21px */
    --fs-xl: 1.875rem;     /* 30px */
    --fs-display: 2.5rem;  /* 40px */
    
    /* Radius */
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 48px;
}

/* ========== BASE STYLES ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

/* Keyboard/assistive-tech focus only - :focus-visible is how the browser
   tells "this got focus from Tab/switch-control/etc" apart from "this got
   focus from a touch tap", so tapping a card on a phone never shows this,
   but navigating with a keyboard or switch control always does. One rule
   covers every interactive element site-wide (nav, tabs, buttons, links,
   any custom control with a tabindex) rather than styling each one. */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}

body {
    background: var(--pitch-black);
    background-image: radial-gradient(ellipse at 50% 0%, #1a1508 0%, #0a0a0a 100%);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    padding: var(--space-md);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
    min-height: 100vh;
}

/* ========== PREMIUM CARDS ========== */
.premium-card {
    background: var(--surface-card);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    transition: all 0.3s cubic-bezier(0.2, 0.9, 0.4, 1.1);
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.premium-card:active {
    transform: scale(0.98);
}

/* Gold border is reserved for matches actually live right now -
   the one card on the page that genuinely deserves the brand accent. */
.gold-border-live {
    border-color: var(--border-gold) !important;
    box-shadow: 0 0 0 1px var(--gold-glow);
}

/* Live match pulse animation */
@keyframes gold-pulse {
    0% { box-shadow: 0 0 0 0 var(--gold-glow); }
    70% { box-shadow: 0 0 0 8px rgba(250, 160, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(250, 160, 0, 0); }
}

/* ========== BUTTONS ========== */
.btn-gold {
    background: var(--gold-gradient);
    border: none;
    border-radius: var(--radius-full);
    padding: 14px var(--space-xl);
    font-weight: 700;
    font-size: var(--fs-md);
    color: var(--pitch-black);
    width: 100%;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.btn-gold:active {
    transform: scale(0.96);
}

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--border-gold);
    border-radius: var(--radius-full);
    padding: 12px var(--space-xl);
    color: var(--gold);
    font-weight: 600;
    width: 100%;
    cursor: pointer;
}

/* ========== TABS ========== */
.tabs {
    display: flex;
    gap: var(--space-sm);
    background: var(--surface-dark);
    padding: 6px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-lg);
    overflow-x: auto;
    scrollbar-width: none;
    position: relative;
}

.tabs::-webkit-scrollbar {
    display: none;
}

.tab {
    padding: 10px var(--space-lg);
    background: transparent;
    border: 1.5px solid transparent;
    color: var(--text-secondary);
    font-weight: 600;
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: all 0.2s ease;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    position: relative;
    z-index: 2;
}

.tab.active {
    background: transparent;
    color: var(--gold);
}

/* ========== LIVE INDICATOR ========== */
.live-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--live-green);
    border-radius: 50%;
    margin-right: 6px;
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.live-badge {
    background: var(--live-green);
    color: white;
    padding: 2px var(--space-sm);
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 700;
}

/* ========== VIP BADGE ========== */
.vip-badge {
    background: var(--gold-gradient);
    color: var(--pitch-black);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: var(--fs-xs);
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ========== STANDINGS TABLE ========== */
.standings-table {
    width: 100%;
    border-collapse: collapse;
}

.standings-table th {
    text-align: left;
    padding: 12px var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: 600;
    border-bottom: 1px solid var(--border-subtle);
}

.standings-table td {
    padding: 12px var(--space-sm);
    border-bottom: 1px solid var(--border-subtle);
}

.favorite-row {
    background: rgba(250, 160, 0, 0.1);
    border-left: 3px solid var(--gold);
}

/* ========== SCORE DISPLAY ========== */
.match-score {
    font-size: 28px;
    font-weight: 800;
    font-family: 'SF Mono', 'Courier New', monospace;
    letter-spacing: 2px;
}

/* ========== LOADING SPINNER ========== */
/* Every <div class="loader-gold"></div> across the app is empty markup -
   the ball glyph is injected via ::before so this is a pure visual swap,
   no HTML changes needed anywhere it's already used. Class name kept as
   loader-gold to avoid touching ~25 call sites across 13 pages for what
   is purely a cosmetic change. */
.loader-gold {
    width: 40px;
    height: 40px;
    margin: var(--space-xl) auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader-gold::before {
    content: '⚽';
    display: inline-block;
    font-size: 32px;
    line-height: 1;
    animation: ballApproach 1.1s ease-in-out infinite;
}

/* Spins a full turn while pulsing small -> large -> small, so the ball
   reads as rolling toward the viewer rather than just spinning in place. */
@keyframes ballApproach {
    0%   { transform: rotate(0deg) scale(0.55); opacity: 0.75; }
    50%  { transform: rotate(180deg) scale(1.25); opacity: 1; }
    100% { transform: rotate(360deg) scale(0.55); opacity: 0.75; }
}

/* ========== TEAM CRESTS & PLAYER AVATARS ========== */
.crest-wrap, .avatar-wrap {
    position: relative;
    flex-shrink: 0;
}

.crest-img {
    object-fit: contain;
    display: block;
}

.crest-fallback {
    background: var(--surface-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 6px;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-secondary);
}

.avatar-img {
    object-fit: cover;
    border-radius: 50%;
    display: block;
}

.avatar-fallback {
    background: var(--surface-dark);
    border: 1px solid var(--border-subtle);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--text-secondary);
}

/* ========== SCROLLBAR ========== */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: var(--surface-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--gold);
    border-radius: 4px;
}

/* ========== RESPONSIVE ========== */
@media (min-width: 768px) {
    body {
        max-width: 500px;
        margin: 0 auto;
    }
}