* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: #0a0a1a; color: #fff; direction: rtl; }

/* ACCESSIBILITY - Skip navigation */
.skip-nav {
    position: absolute; top: -100px; right: 0; left: auto;
    background: #00d4ff; color: #000; padding: 10px 18px;
    border-radius: 0 0 8px 8px; font-weight: bold; z-index: 9999;
    text-decoration: none; font-size: 0.95rem;
    transition: top 0.2s;
}
.skip-nav:focus { top: 0; }

/* ACCESSIBILITY - Focus indicators (WCAG 2.4.7) */
:focus-visible {
    outline: 3px solid #00d4ff;
    outline-offset: 2px;
    border-radius: 4px;
}
button:focus-visible, a:focus-visible { outline: 3px solid #00d4ff; outline-offset: 2px; }

/* FOOTER */
.site-footer {
    text-align: center; padding: 24px 16px; margin-top: 40px;
    border-top: 1px solid #222; color: #555; font-size: 0.82rem;
}
.site-footer a { color: #555; text-decoration: none; margin: 0 4px; }
.site-footer a:hover, .site-footer a.active { color: #00d4ff; }

/* NAVBAR */
.navbar {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid #00d4ff;
    position: sticky; top: 0; z-index: 100;
    flex-wrap: wrap; gap: 8px;
}
.nav-brand { font-size: 1.3rem; font-weight: bold; color: #00d4ff; white-space: nowrap; }
.nav-links { display: flex; gap: 6px; flex-wrap: wrap; }
.nav-links a { color: #aaa; text-decoration: none; padding: 5px 10px; border-radius: 6px; transition: all 0.2s; font-size: 0.85rem; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { color: #fff; background: #00d4ff22; }
.btn-refresh { background: #00d4ff22; border: 1px solid #00d4ff; color: #00d4ff !important; }
.nav-user { display: flex; gap: 8px; align-items: center; font-size: 0.8rem; color: #aaa; flex-wrap: wrap; }
.nav-user a { color: #ff4444; text-decoration: none; }
.points { color: #ffd700; font-weight: bold; }

/* AUTH */
.auth-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 16px; }
.auth-container {
    background: #1a1a2e;
    border: 1px solid #00d4ff33;
    border-radius: 16px;
    padding: 32px 24px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 0 40px #00d4ff22;
}
.auth-container.wide { max-width: 480px; }
.form-row { display: flex; gap: 12px; }
.form-row .form-group { flex: 1; }
.logo { text-align: center; margin-bottom: 28px; }
.logo h1 { font-size: 2rem; color: #00d4ff; }
.logo p { color: #aaa; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; margin-bottom: 6px; color: #aaa; font-size: 0.9rem; }
.form-group input, .form-group select {
    width: 100%; padding: 12px; background: #0a0a1a;
    border: 1px solid #333; border-radius: 8px; color: #fff; font-size: 1rem;
}
.form-group input:focus, .form-group select:focus { outline: 2px solid #00d4ff; outline-offset: 1px; border-color: #00d4ff; }
.btn { width: 100%; padding: 14px; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; margin-top: 8px; }
.btn-primary { background: linear-gradient(135deg, #00d4ff, #0088cc); color: #fff; font-weight: bold; }
.btn-primary:hover { opacity: 0.9; }
.auth-link { text-align: center; margin-top: 16px; color: #aaa; }
.auth-link a { color: #00d4ff; text-decoration: none; }
.alert { padding: 12px; border-radius: 8px; margin-bottom: 16px; }
.alert.error { background: #ff000022; border: 1px solid #ff4444; color: #ff4444; }
.alert.success { background: #00ff6622; border: 1px solid #00ff66; color: #00ff66; }

/* CONTAINER */
.container { max-width: 900px; margin: 0 auto; padding: 16px; }
h2 { margin-bottom: 20px; color: #00d4ff; }
h3 { color: #00d4ff; }

/* LEAGUE HEADER */
.league-header {
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    padding: 10px 16px; border-radius: 8px;
    margin: 20px 0 10px; color: #ffd700;
    font-weight: bold; border-right: 4px solid #ffd700;
    font-size: 0.95rem;
}

/* MATCH CARD */
.match-card {
    background: #1a1a2e;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}
.match-card:hover { border-color: #00d4ff44; }
.match-card.bet-placed { border-color: #00d4ff66; background: #0d1929; }
.match-time { font-size: 0.78rem; color: #666; margin-bottom: 8px; line-height: 1.5; }
.match-teams { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 12px; }
.team { font-size: 0.9rem; font-weight: bold; flex: 1; }
.team.home { text-align: right; }
.team.away { text-align: left; }
.vs { color: #666; font-size: 0.8rem; white-space: nowrap; }
.team-meta { font-size: 0.7rem; color: #aaa; margin-top: 3px; font-weight: normal; }

/* ODDS BUTTONS */
.odds-buttons { display: flex; gap: 6px; justify-content: center; }
.odds-btn {
    flex: 1; padding: 10px 6px; background: #0a0a1a;
    border: 2px solid #333; border-radius: 8px; color: #fff;
    cursor: pointer; transition: all 0.2s; text-align: center;
}
.odds-btn:hover:not(:disabled) { border-color: #00d4ff; background: #00d4ff11; }
.odds-btn.selected { border-color: #00d4ff; background: #00d4ff22; color: #00d4ff; }
.odds-btn:disabled { opacity: 0.7; cursor: default; }
.odds-btn.draw { border-color: #ffd70044; }
.odds-btn.draw:hover:not(:disabled) { border-color: #ffd700; background: #ffd70011; }
.bet-label { display: block; font-size: 1rem; font-weight: bold; }
.odds-val { display: block; font-size: 0.82rem; color: #00d4ff; margin-top: 2px; }
.dept-bets { display: block; font-size: 0.72rem; color: #ffd700; margin-top: 2px; }
.bet-status { text-align: center; margin-top: 10px; font-size: 0.82rem; color: #00d4ff; }

/* SCORE PRED */
.score-pred { text-align: center; margin-bottom: 10px; }

/* LEADERBOARD */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.tab { padding: 8px 14px; background: #1a1a2e; border: 1px solid #333; border-radius: 8px; color: #aaa; cursor: pointer; font-size: 0.85rem; }
.tab.active { border-color: #00d4ff; color: #00d4ff; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.leaderboard-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.leaderboard-table th { background: #16213e; padding: 10px 8px; text-align: right; color: #aaa; font-size: 0.8rem; }
.leaderboard-table td { padding: 10px 8px; border-bottom: 1px solid #222; }
.leaderboard-table tr.gold td { color: #ffd700; }
.leaderboard-table tr.silver td { color: #c0c0c0; }
.leaderboard-table tr.bronze td { color: #cd7f32; }

/* BET CARDS */
.bet-card { background: #1a1a2e; border: 1px solid #333; border-radius: 12px; padding: 14px; margin-bottom: 10px; }
.bet-card.won { border-color: #00ff66; border-width: 2px; background: #00ff6608; }
.bet-card.lost { border-color: #ff4444; border-width: 2px; background: #ff444408; }
.bet-league { font-size: 0.78rem; color: #666; margin-bottom: 6px; }
.bet-match { font-weight: bold; margin-bottom: 8px; font-size: 0.95rem; }
.bet-info { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.85rem; }
.bet-result.won { color: #00ff66; }
.bet-result.lost { color: #ff4444; }

/* STAGE BADGE */
.stage-badge {
    display: inline-block; background: #ffd70022; color: #ffd700;
    border: 1px solid #ffd70044; border-radius: 4px;
    font-size: 0.72rem; padding: 2px 6px; margin-right: 6px;
}

/* NO DATA */
.no-matches, .no-data { text-align: center; padding: 40px; color: #666; }

/* ── GOAL ANIMATION ── */
.goal-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    z-index: 9999; background: rgba(0,0,0,0.85);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.3s;
    direction: rtl;
}
.goal-overlay.show { opacity: 1; }
.goal-overlay.fade-out { opacity: 0; transition: opacity 0.5s; }
.goal-content { text-align: center; }
.goal-ball {
    font-size: 5rem;
    animation: goalBounce 0.5s ease-in-out 6;
}
.goal-text {
    font-size: 3.5rem; font-weight: 900; color: #ffd700;
    text-shadow: 0 0 30px #ffd700, 0 0 60px #ff8800;
    animation: goalPulse 0.5s ease-in-out 6;
    margin: 10px 0;
}
.goal-team {
    font-size: 1.5rem; color: #fff; margin-top: 10px;
    animation: goalPulse 0.5s ease-in-out 6;
}
@keyframes goalBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-40px); }
}
@keyframes goalPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ── DISALLOWED GOAL ── */
.disallowed-overlay { background: rgba(50,0,0,0.9) !important; }
.disallowed-text {
    color: #ff4444 !important;
    text-shadow: 0 0 30px #ff4444, 0 0 60px #ff0000 !important;
}

/* ── PROVISIONAL POINTS ── */
.provisional-points {
    text-align: center; padding: 4px 8px; margin: 4px 0;
    border-radius: 6px; font-size: 0.82rem;
}
.prov-winning {
    color: #00ff66; font-weight: bold;
    background: #00ff6612; padding: 3px 10px; border-radius: 4px;
}
.prov-bull {
    color: #ffd700; font-weight: bold;
    background: #ffd70012; padding: 3px 10px; border-radius: 4px;
}
.prov-losing {
    color: #ff6644; font-size: 0.78rem;
}

/* ── MOBILE ── */
@media (max-width: 600px) {
    .navbar { padding: 8px 12px; }
    .nav-brand { font-size: 1.1rem; }
    .nav-links { gap: 4px; }
    .nav-links a { padding: 4px 8px; font-size: 0.78rem; }
    .nav-user { font-size: 0.75rem; gap: 6px; }

    .auth-container { padding: 24px 16px; }
    .form-row { flex-direction: column; gap: 0; }
    .logo h1 { font-size: 1.6rem; }

    .container { padding: 10px; }

    .match-teams { gap: 6px; }
    .team { font-size: 0.8rem; }
    .team-meta { font-size: 0.65rem; }
    .match-time { font-size: 0.72rem; }

    .odds-btn { padding: 8px 4px; }
    .bet-label { font-size: 0.9rem; }
    .odds-val { font-size: 0.75rem; }

    .leaderboard-table th, .leaderboard-table td { padding: 8px 4px; font-size: 0.75rem; }

    .tabs { gap: 4px; }
    .tab { padding: 7px 10px; font-size: 0.78rem; }

    h2 { font-size: 1.2rem; }

    .score-pred input { width: 44px !important; padding: 5px !important; }
}