/* Placeholder images for team logos */
.team-logo {
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    text-transform: uppercase;
}

/* Team specific colors */
.team-fenerbahce { background: linear-gradient(135deg, #0066FF 0%, #004499 100%); }
.team-galatasaray { background: linear-gradient(135deg, #FF6B35 0%, #e55a2b 100%); }
.team-besiktas { background: linear-gradient(135deg, #000000 0%, #333333 100%); }
.team-trabzonspor { background: linear-gradient(135deg, #8B0000 0%, #a52a2a 100%); }
.team-manchester-united { background: linear-gradient(135deg, #DA020E 0%, #b71c1c 100%); }
.team-liverpool { background: linear-gradient(135deg, #C8102E 0%, #a91b1b 100%); }
.team-manchester-city { background: linear-gradient(135deg, #6CABDD 0%, #4a90a4 100%); }
.team-chelsea { background: linear-gradient(135deg, #034694 0%, #023871 100%); }
.team-arsenal { background: linear-gradient(135deg, #EF0107 0%, #c41e3a 100%); }
.team-tottenham { background: linear-gradient(135deg, #132257 0%, #0f1a4a 100%); }
.team-real-madrid { background: linear-gradient(135deg, #FEBE10 0%, #f39c12 100%); }
.team-barcelona { background: linear-gradient(135deg, #A50044 0%, #8b0037 100%); }
.team-juventus { background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%); }
.team-inter-milan { background: linear-gradient(135deg, #0066CC 0%, #004499 100%); }
.team-bayern-munich { background: linear-gradient(135deg, #DC052D 0%, #b71c1c 100%); }
.team-psg { background: linear-gradient(135deg, #004170 0%, #003366 100%); }

/* Pattern backgrounds */
.pattern-dots {
    background-image: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

.pattern-grid {
    background-image: 
        linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 20px 20px;
}

.pattern-diagonal {
    background-image: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.03) 10px,
        rgba(255,255,255,0.03) 20px
    );
}

/* Card backgrounds with patterns */
.card-pattern-1 {
    background: var(--background-secondary);
    position: relative;
    overflow: hidden;
}

.card-pattern-1::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--pattern-dots);
    opacity: 0.5;
    z-index: 0;
}

.card-pattern-1 > * {
    position: relative;
    z-index: 1;
}

/* Gradient overlays */
.gradient-overlay {
    position: relative;
    overflow: hidden;
}

.gradient-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0,102,255,0.1) 0%, rgba(0,217,163,0.1) 100%);
    pointer-events: none;
}

/* Hero background patterns */
.hero-pattern {
    background: 
        radial-gradient(circle at 20% 80%, rgba(0,102,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(0,217,163,0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255,107,53,0.05) 0%, transparent 50%),
        var(--gradient-background);
}

/* Section backgrounds */
.section-pattern {
    background: var(--background-secondary);
    position: relative;
}

.section-pattern::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect width="100" height="100" fill="none"/><circle cx="50" cy="50" r="40" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="1"/><circle cx="50" cy="50" r="30" fill="none" stroke="rgba(255,255,255,0.02)" stroke-width="1"/><circle cx="50" cy="50" r="20" fill="none" stroke="rgba(255,255,255,0.01)" stroke-width="1"/></svg>');
    background-size: 100px 100px;
    opacity: 0.5;
}

/* Animated patterns */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.pattern-animated {
    background: 
        radial-gradient(circle at 25% 25%, rgba(0,102,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(0,217,163,0.1) 0%, transparent 50%);
    animation: float 6s ease-in-out infinite;
}