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

:root {
    --bg-color: #0b0f19;
    --card-bg: #151a28;
    --text-primary: #ffffff;
    --text-secondary: #8b95a5;
    --accent-blue: #3b82f6;
    --accent-red: #ef4444;
    --accent-green: #10b981;
    --border-color: #1e293b;
    --header-bg: rgba(11, 15, 25, 0.9);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Outfit', sans-serif; -webkit-tap-highlight-color: transparent; }
body { background-color: #000; color: var(--text-primary); display: flex; justify-content: center; }
.app-container { width: 100%; max-width: 480px; min-height: 100vh; background-color: var(--bg-color); position: relative; box-shadow: 0 0 30px rgba(0,0,0,0.5); display: flex; flex-direction: column; }

/* Ads */
.ad-banner { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 90px; background-color: #000; overflow: hidden; }
.top-banner { position: sticky; top: 0; z-index: 100; }
.ad-side { display: none; }

/* Header & Categories */
.header-wrapper { position: sticky; top: 90px; z-index: 99; background: var(--header-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-color); }
.categories-scroll { display: flex; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 16px; gap: 12px; }
.categories-scroll::-webkit-scrollbar { display: none; }
.category-btn { background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-secondary); padding: 10px 20px; border-radius: 24px; font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
.category-btn:hover { background: #1e293b; color: #fff; }
.category-btn.active { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); color: #fff; border-color: transparent; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); }

/* Main Content */
.content { flex: 1; padding: 20px 16px; display: flex; flex-direction: column; gap: 16px; }

/* Match Cards */
.match-card { background: var(--card-bg); border-radius: 20px; padding: 20px; display: flex; flex-direction: column; gap: 16px; cursor: pointer; text-decoration: none; color: inherit; transition: transform 0.2s, box-shadow 0.2s; border: 1px solid var(--border-color); position: relative; overflow: hidden; }
.match-card:active { transform: scale(0.98); }
.match-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); }

.match-header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.live-badge { background: #ff0000; color: #ffffff; padding: 4px 10px; border-radius: 12px; display: flex; align-items: center; gap: 6px; font-weight: 700; box-shadow: 0 0 10px rgba(255, 0, 0, 0.4); }
.pulsing-dot { width: 6px; height: 6px; background-color: #ffffff; border-radius: 50%; animation: pulse 1.5s infinite; }

.match-teams { display: flex; justify-content: space-between; align-items: center; }
.team-side { display: flex; flex-direction: column; align-items: center; gap: 12px; flex: 1; }
.team-flag { font-size: 32px; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.team-name { font-size: 15px; font-weight: 600; text-align: center; }
.match-score-center { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 20px; }
.score-numbers { font-size: 32px; font-weight: 800; letter-spacing: 2px; color: #fff; text-shadow: 0 2px 10px rgba(0,0,0,0.5); }
.match-time { font-size: 13px; color: var(--accent-green); font-weight: 600; }

/* Non-Team Sports Card */
.event-card { display: flex; align-items: center; gap: 16px; padding: 20px; background: var(--card-bg); border-radius: 20px; border: 1px solid var(--border-color); cursor: pointer; text-decoration: none; color: inherit; transition: transform 0.2s; }
.event-card:active { transform: scale(0.98); }
.event-icon { width: 50px; height: 50px; background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border-radius: 14px; display: flex; justify-content: center; align-items: center; font-size: 24px; border: 1px solid rgba(255,255,255,0.05); }
.event-info { flex: 1; }
.event-info h3 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.event-info p { font-size: 13px; color: var(--text-secondary); font-weight: 500; }

/* Player Page */
.player-nav { display: flex; align-items: center; padding: 16px 20px; gap: 16px; position: sticky; top: 90px; background: var(--header-bg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); z-index: 99; }
.back-btn { text-decoration: none; color: #fff; font-size: 24px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--card-bg); transition: background 0.2s; }
.back-btn:hover { background: #1e293b; }
.player-title { font-size: 16px; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.video-container { width: 100%; aspect-ratio: 16/9; background: #000; position: relative; }
.video-container iframe { width: 100%; height: 100%; border: none; }
.play-overlay { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.2) 100%); z-index: 10; flex-direction: column; gap: 16px; }
.play-btn { width: 70px; height: 70px; background: var(--accent-red); border-radius: 50%; display: flex; justify-content: center; align-items: center; color: #fff; font-size: 24px; cursor: pointer; border: none; box-shadow: 0 0 20px rgba(239, 68, 68, 0.4); transition: transform 0.2s; }
.play-btn:active { transform: scale(0.9); }
.play-text { font-size: 14px; font-weight: 600; letter-spacing: 1px; color: #fff; }

.player-details { padding: 20px; }
.player-details h1 { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
.player-details .meta { color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; display: flex; gap: 12px; align-items: center; }

.servers-section { display: flex; flex-direction: column; gap: 16px; }
.servers-title { font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px; }
.server-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.server-btn { background: var(--card-bg); border: 1px solid var(--border-color); padding: 16px; border-radius: 16px; font-size: 15px; font-weight: 600; color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: all 0.2s; }
.server-btn:active { transform: scale(0.98); }
.server-btn .status { width: 8px; height: 8px; border-radius: 50%; background: #4b5563; }
.server-btn.active-server { border-color: var(--accent-blue); background: rgba(59, 130, 246, 0.1); }
.server-btn.active-server .status { background: var(--accent-green); box-shadow: 0 0 10px rgba(16, 185, 129, 0.5); }
.server-btn.backup { border-style: dashed; }

/* Ad Overlay */
.ad-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 9999; display: none; flex-direction: column; justify-content: center; align-items: center; padding: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ad-overlay.active { display: flex; animation: fadeIn 0.3s ease; }
.ad-content { width: 100%; max-width: 320px; aspect-ratio: 4/3; background: #111; border-radius: 12px; display: flex; justify-content: center; align-items: center; font-size: 18px; color: #666; margin-bottom: 30px; border: 1px solid #333; text-align: center; }
.ad-info { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.countdown-text { font-size: 16px; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.countdown-number { color: var(--accent-red); font-size: 20px; font-weight: 800; }
.skip-btn { background: #fff; color: #000; border: none; padding: 14px 32px; border-radius: 30px; font-size: 16px; font-weight: 700; cursor: pointer; display: none; transform: translateY(10px); animation: slideUp 0.3s forwards; }
.skip-btn.visible { display: flex; align-items: center; gap: 8px; }

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

@keyframes pulseScale {
    0% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.4)); }
    50% { transform: scale(1.08); filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.9)); }
    100% { transform: scale(1); filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.4)); }
}

.live-btn-pulse {
    animation: pulseScale 1.5s infinite ease-in-out;
}