/* =============================================
   IPL Live Score – Public Frontend Styles
   ============================================= */

:root {
    --ils-pub-bg:       #0a0f1e;
    --ils-pub-card:     #111827;
    --ils-pub-border:   #1f2937;
    --ils-pub-text:     #e2e8f0;
    --ils-pub-muted:    #6b7280;
    --ils-pub-live:     #ef4444;
    --ils-pub-accent:   #f59e0b;
    --ils-pub-four:     #3b82f6;
    --ils-pub-six:      #8b5cf6;
    --ils-pub-radius:   12px;
    --ils-pub-shadow:   0 4px 24px rgba(0,0,0,0.5);
}

/* ── Homepage ── */
.ils-hp-wrap {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    padding: 24px 0;
}
.ils-hp-header { text-align: center; margin-bottom: 28px; }
.ils-hp-title {
    font-size: 1.8rem;
    font-weight: 800;
    color: #1e3a8a;
    margin: 0 0 6px;
}
.ils-hp-subtitle { color: var(--ils-pub-muted); font-size: 0.95rem; margin: 0; }

.ils-hp-matches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.ils-hp-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: var(--ils-pub-radius);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.2s, box-shadow 0.2s;
}
.ils-hp-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.ils-hp-status-live { border: 2px solid var(--ils-pub-live); }

/* Thumbnail */
.ils-hp-thumb { position: relative; }
.ils-hp-thumb img { width: 100%; height: 180px; object-fit: cover; display: block; }
.ils-hp-live-overlay {
    position: absolute;
    top: 12px;
    left: 12px;
}
.ils-hp-live-badge {
    background: var(--ils-pub-live);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 1px;
    animation: ils-hp-live-pulse 1.2s infinite;
}

/* Card banner (no thumb) */
.ils-hp-card-banner {
    background: linear-gradient(135deg, var(--c1,#003791) 0%, #111 50%, var(--c2,#d71920) 100%);
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 28px 20px;
}
.ils-hp-team-short {
    font-size: 2.2rem;
    font-weight: 900;
    text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.ils-hp-vs-block { text-align: center; }
.ils-hp-vs-text { color: rgba(255,255,255,0.7); font-size: 0.9rem; font-weight: 600; display: block; }
.ils-hp-live-badge-sm {
    display: inline-block;
    margin-top: 4px;
    background: var(--ils-pub-live);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 1px;
    animation: ils-hp-live-pulse 1.2s infinite;
}

/* Card body */
.ils-hp-card-body { padding: 14px 16px; }
.ils-hp-match-title { font-size: 0.85rem; color: #6b7280; margin-bottom: 8px; }
.ils-hp-teams-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ils-hp-team-name {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--tc, #1e293b);
}
.ils-hp-vs { color: #9ca3af; font-size: 0.8rem; font-weight: 500; }
.ils-hp-meta { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: #4b5563; }
.ils-hp-live-text { color: var(--ils-pub-live); font-weight: 700; font-size: 0.85rem; }
.ils-hp-result { color: #059669; font-weight: 600; }
.ils-hp-done { color: #6b7280; }
.ils-hp-venue { color: #9ca3af; }

/* Score preview */
.ils-hp-score-preview { margin-top: 10px; padding-top: 8px; border-top: 1px solid #f3f4f6; }
.ils-hp-score-line { font-size: 0.88rem; font-weight: 600; color: #1f2937; }
.ils-hp-bat-team { color: #6b7280; font-weight: 500; }
.ils-hp-ov { color: #9ca3af; font-size: 0.78rem; }

/* Card footer */
.ils-hp-card-footer { padding: 12px 16px; background: #f9fafb; border-top: 1px solid #e5e7eb; }
.ils-hp-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    justify-content: center;
    padding: 10px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.2s;
    cursor: pointer;
    border: none;
}
.ils-hp-btn-live {
    background: #fee2e2;
    color: var(--ils-pub-live);
    border: 2px solid var(--ils-pub-live);
}
.ils-hp-btn-live:hover { background: var(--ils-pub-live); color: #fff; }
.ils-hp-btn-score { background: #eff6ff; color: #1d4ed8; border: 2px solid #93c5fd; }
.ils-hp-btn-score:hover { background: #1d4ed8; color: #fff; }

/* Countdown */
.ils-hp-countdown { font-size: 0.85rem; color: #6b7280; text-align: center; padding: 8px; }
.ils-hp-countdown strong { color: var(--ils-pub-accent); font-size: 1rem; }

/* ── Live Score Page ── */
.ils-ls-wrap {
    font-family: 'Segoe UI', system-ui, sans-serif;
    background: var(--ils-pub-bg);
    color: var(--ils-pub-text);
    border-radius: var(--ils-pub-radius);
    overflow: hidden;
}

.ils-ls-header {
    background: linear-gradient(135deg, #0b1426 0%, #1e3a8a 100%);
    padding: 18px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 2px solid #1e3a8a;
}
.ils-ls-match-title { font-size: 1.05rem; font-weight: 700; color: #fff; }
.ils-ls-venue { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-top: 2px; }
.ils-ls-toss { font-size: 0.8rem; color: var(--ils-pub-accent); margin-top: 4px; flex: 0 0 100%; }

.ils-ls-live-badge {
    display: flex;
    align-items: center;
    gap: 7px;
    background: rgba(239,68,68,0.15);
    border: 1px solid var(--ils-pub-live);
    border-radius: 20px;
    padding: 5px 14px;
    font-size: 0.82rem;
    font-weight: 800;
    color: var(--ils-pub-live);
    letter-spacing: 2px;
}
.ils-ls-live-dot {
    width: 8px;
    height: 8px;
    background: var(--ils-pub-live);
    border-radius: 50%;
    animation: ils-hp-live-pulse 1s infinite;
}

/* Teams Banner */
.ils-ls-teams-banner {
    background: linear-gradient(135deg, #0b1426 0%, #162032 100%);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 20px;
    gap: 16px;
}
.ils-ls-team { text-align: center; }
.ils-ls-team-left { text-align: right; }
.ils-ls-team-right { text-align: left; }
.ils-ls-team-name { font-size: 1rem; font-weight: 700; }
.ils-ls-team-short { font-size: 0.75rem; color: rgba(255,255,255,0.5); margin-top: 2px; }

.ils-ls-score-center { text-align: center; }
.ils-ls-main-score { font-size: 2.8rem; font-weight: 900; color: #fff; line-height: 1; }
.ils-ls-overs { font-size: 0.9rem; color: rgba(255,255,255,0.6); margin-top: 4px; }
.ils-ls-target { font-size: 0.85rem; color: var(--ils-pub-accent); margin-top: 4px; font-weight: 600; }
.ils-ls-upcoming-time { font-size: 0.9rem; color: var(--ils-pub-accent); text-align: center; }

.ils-ls-result-banner {
    background: #065f46;
    text-align: center;
    padding: 10px;
    font-weight: 700;
    font-size: 0.95rem;
    color: #6ee7b7;
}

/* Over balls */
.ils-ls-current-over {
    background: var(--ils-pub-card);
    padding: 14px 18px;
    border-bottom: 1px solid var(--ils-pub-border);
}
.ils-ls-section-title { font-size: 0.75rem; color: var(--ils-pub-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; }
.ils-ls-over-balls { display: flex; gap: 8px; flex-wrap: wrap; }

.ils-ls-ball {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.82rem;
    background: #374151;
    color: #fff;
    border: 2px solid #4b5563;
}
.ils-ls-empty { background: transparent; border: 2px dashed #374151; }
.ils-ls-four { background: #1e3a8a; border-color: var(--ils-pub-four); }
.ils-ls-six  { background: #3b1f7d; border-color: var(--ils-pub-six); }
.ils-ls-wide { background: #0c4a6e; border-color: #0ea5e9; font-size: 0.7rem; }
.ils-ls-nb   { background: #78350f; border-color: #f59e0b; font-size: 0.7rem; }
.ils-ls-wkt  { background: #7f1d1d; border-color: var(--ils-pub-live); }

/* Players row */
.ils-ls-players-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 1px;
    background: var(--ils-pub-border);
    border-bottom: 1px solid var(--ils-pub-border);
}
.ils-ls-player-card {
    background: var(--ils-pub-card);
    padding: 12px 14px;
}
.ils-ls-pc-label { font-size: 0.72rem; color: var(--ils-pub-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 4px; }
.ils-ls-strike-indicator { color: var(--ils-pub-accent); font-weight: 900; }
.ils-ls-pc-name { font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 6px; }
.ils-ls-pc-stats { display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.78rem; color: var(--ils-pub-muted); }
.ils-ls-pc-stats strong { color: var(--ils-pub-text); }

/* Tabs */
.ils-ls-tabs {
    display: flex;
    background: var(--ils-pub-card);
    border-bottom: 2px solid var(--ils-pub-border);
}
.ils-ls-tab {
    padding: 12px 20px;
    background: none;
    border: none;
    color: var(--ils-pub-muted);
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.ils-ls-tab:hover { color: var(--ils-pub-text); }
.ils-ls-tab-active { color: var(--ils-pub-accent) !important; border-bottom-color: var(--ils-pub-accent) !important; }

/* Tab panels */
.ils-ls-tab-panel { background: var(--ils-pub-bg); padding: 0; }

/* Tables */
.ils-ls-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}
.ils-ls-table th {
    background: #111827;
    color: var(--ils-pub-muted);
    padding: 10px 12px;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--ils-pub-border);
}
.ils-ls-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(31,41,55,0.7);
    color: var(--ils-pub-text);
}
.ils-ls-out { opacity: 0.65; }
.ils-ls-striker td:first-child { color: #60a5fa; }
.ils-ls-striker { background: rgba(30,58,138,0.15); }
.ils-ls-cur-bowler { background: rgba(16,163,74,0.1); }
.ils-ls-strike-star { color: var(--ils-pub-accent); font-weight: 900; margin-right: 2px; }
.ils-ls-dismissal-text { font-size: 0.72rem; color: var(--ils-pub-muted); margin-top: 2px; }
.ils-ls-batting-status { font-size: 0.72rem; color: #10b981; }
.ils-ls-bowling-tag { display: inline-block; background: rgba(16,163,74,0.2); color: #10b981; font-size: 0.65rem; padding: 1px 6px; border-radius: 8px; margin-left: 6px; }

.ils-ls-extras-row td { font-size: 0.8rem; color: var(--ils-pub-muted); background: #0f172a; }
.ils-ls-total-row td { background: #111827; font-size: 0.9rem; }

/* Innings block */
.ils-ls-innings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #1e3a8a;
    color: #fff;
    font-weight: 700;
    font-size: 0.9rem;
}

/* Error */
.ils-ls-error { padding: 30px; text-align: center; color: #ef4444; }
.ils-hp-empty { text-align: center; padding: 40px; color: var(--ils-pub-muted); grid-column: 1/-1; }

/* Animations */
@keyframes ils-hp-live-pulse { 0%,100% { opacity:1; } 50% { opacity:0.4; } }
@keyframes ils-score-pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } }
.ils-score-pop { animation: ils-score-pop 0.35s ease; }

/* Responsive */
@media (max-width: 640px) {
    .ils-hp-matches { grid-template-columns: 1fr; }
    .ils-ls-teams-banner { grid-template-columns: 1fr; text-align: center; }
    .ils-ls-team-left, .ils-ls-team-right { text-align: center; }
    .ils-ls-players-row { grid-template-columns: 1fr; }
    .ils-ls-main-score { font-size: 2.2rem; }
    .ils-ls-tab { padding: 10px 12px; font-size: 0.82rem; }
}