:root {
    /* Clean white palette (light theme) */
    --bg-primary:    #f5f5f5;
    --bg-secondary:  #ebebeb;
    --bg-card:       #ffffff;
    --bg-card-alt:   #eeeeee;
    --text-primary:  #1a1a1a;
    --text-secondary:#666666;
    --text-dim:      #999999;
    --accent-four:   #0ea5e9;
    --accent-six:    #ec4899;
    --accent-wicket: #ef4444;
    --accent-live:   #10b981;
    --accent-extra:  #f59e0b;
    --accent-finished:#10b981;
    --accent-link:   #3b82f6;
    --border:        rgba(0, 0, 0, 0.09);

    /* Ball badge backgrounds */
    --ball-bg-run:   #2a3555;
    --ball-bg-dot:   #232d42;
    --ball-bg-grey:  #858b97;

    /* Status colors */
    --color-win:     #10b981;
    --color-loss:    #ef4444;
    --color-amber:   #d97706;
    --color-dim-text:#6b7280;

    /* Telegram safe area insets */
    --safe-top: var(--tg-content-safe-area-inset-top, 0px);
    --safe-bottom: var(--tg-safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
    --bg-primary:    #1c2330;
    --bg-secondary:  #161d29;
    --bg-card:       #242f3d;
    --bg-card-alt:   #2d3a4a;
    --text-primary:  #f5f5f5;
    --text-secondary:#8b9ab0;
    --text-dim:      #576175;
    --border:        rgba(255, 255, 255, 0.07);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

#app {
    max-width: 480px;
    margin: 0 auto;
    padding: calc(8px + var(--safe-top)) 0 calc(24px + var(--safe-bottom));
}

/* Tabs */
.tabs-bar {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
}
.tabs-bar::-webkit-scrollbar { display: none; }
.tabs-list {
    display: flex;
    padding: 0 4px;
    gap: 0;
    white-space: nowrap;
}
.tab-btn {
    flex-shrink: 0;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}
.tab-btn.tab-active {
    color: var(--text-primary);
    border-bottom-color: var(--accent-live);
    font-weight: 600;
}
.tab-pane { display: none; }
.tab-hidden { display: none; }
.tab-pane.tab-pane-active { display: block; }
.tab-wrap { padding: 8px 12px 16px; max-width: 100%; }
.tab-empty {
    text-align: center;
    color: var(--text-dim);
    font-size: 14px;
    padding: 48px 24px;
}

/* ========== PREVIEW TAB ========== */
.pv-wrap { padding: 8px 12px 16px; }
.pv-card {
    background: var(--bg-card);
    border-radius: 14px;
    padding: 15px 12px;
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pv-block { display: flex; flex-direction: column; gap: 8px; margin-bottom: 15px; }
.pv-block-models { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; margin-bottom: 15px; }
.pv-block + .pv-block-models { margin-top: -10px; gap: 0;}
.rp-model-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.rp-model-row:last-child { border-bottom: none; }
.pv-block-performers { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); overflow: hidden; }
.rp-tables-wrap { display: flex; flex-direction: column; gap: 10px; margin: -15px 0 15px; }
.rp-section-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 8px; border-bottom: 1px solid var(--border); }
.rp-col-heads { display: flex; font-size: 10px; color: var(--text-dim); font-family: ui-monospace, monospace; }
.rp-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--border); }
.rp-row:last-child { border-bottom: none; }
.rp-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--bg-secondary); }
.rp-avatar-fb { display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 600; color: var(--text-dim); }
.rp-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rp-player-name { font-size: 14px; font-weight: 500; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-player-sub { display: flex; align-items: center; gap: 5px; }
.rp-pos { font-size: 12px; color: var(--text-dim); }
.rp-stats { display: flex; align-items: center; font-size: 13px; font-family: ui-monospace, monospace; flex-shrink: 0; }
.rp-s1 { width: 36px; text-align: center; color: var(--text-secondary); }
.rp-s2 { width: 30px; text-align: center; color: var(--text-secondary); }
.rp-s3 { width: 30px; text-align: right; color: var(--text-secondary); }
.rp-bold { color: var(--text-primary); font-weight: 600; }
.rp-team-tag { font-size: 10px; font-weight: 700; color: var(--text-dim); background: var(--bg-secondary); border-radius: 4px; padding: 1px 5px; flex-shrink: 0; }
.pv-block:last-child { margin-bottom: 0px; }
.pv-h1 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0;
}
.pv-h2 {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    margin: 0;
}
.pv-h2-team {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pv-intro { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.pv-toss-pitch { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0; }
.pv-toss-line { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.pv-weather { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pv-weather-item {
    font-size: 12px;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2px 7px;
}
[data-theme="light"] .pv-weather-item {
    border-color: rgba(0, 0, 0, 0.13);
}

/* H2H */
/* Quote block — left accent bar + subtle bg */
.pv-quote {
    border-left: 2px solid var(--accent-live);
    background: var(--bg-card-alt);
    border-radius: 0 8px 8px 0;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pv-h2h-intro { font-size: 13px; color: var(--text-secondary); margin: 0; }
.pv-h2h-matches { display: flex; flex-direction: column; gap: 0; }
.pv-h2h-match { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-top: 1px solid var(--border); }
.pv-h2h-match:first-child { padding-top: 0; border-top: none; }
.pv-h2h-match:last-child { padding-bottom: 0; }
.pv-h2h-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; gap: 8px; }
.pv-h2h-team { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); min-width: 0; }
.pv-h2h-team.pv-h2h-win { color: var(--text-primary); font-weight: 600; }
.pv-h2h-logo { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; }
.pv-h2h-logo-fb { width: 20px; height: 20px; flex-shrink: 0; color: var(--text-dim); font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.pv-h2h-logo-hidden { display: none; }
.pv-h2h-score { color: var(--text-secondary); font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.pv-h2h-score.pv-h2h-win { color: var(--text-primary); font-weight: 600; }
/* Currently-batting team's score in a live match — same green cue as the match header. */
.pv-h2h-score.lb-score-live { color: var(--accent-live); font-weight: 700; }
.pv-h2h-meta { font-size: 11px; color: var(--text-dim); margin-top: 1px; }
.pv-h2h-avg { font-size: 12px; color: var(--text-dim); }

/* Team */
.pv-team-intro { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.pv-team-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 4px; }
.pv-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border-radius: 4px;
    padding: 2px 6px;
}
.pv-meta-tag-form { gap: 5px; }
.mh-wl-card .pv-meta-tag-form { min-width: 260px; overflow-x: auto; flex-wrap: nowrap; }
.pv-meta-form-arrow { font-size: 11px; color: var(--text-dim); line-height: 1; }
.pv-matches { display: flex; flex-direction: column; gap: 0; padding: 0 10px; }
.pv-match-item { position: relative; display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-top: 1px solid var(--border); }
.pv-match-item:first-child { border-top: none; }
.pv-match-win::after,
.pv-match-loss::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 60%;
    border-radius: 1px;
}
.pv-match-win::after  { background: var(--accent-live); }
.pv-match-loss::after { background: var(--accent-wicket); }

/* Key Stats */
.pv-stats-table { display: flex; flex-direction: column; gap: 0; }
.pv-stats-header, .pv-stats-row {
    display: grid;
    grid-template-columns: 1fr 56px 56px;
    align-items: center;
    padding: 6px 0;
}
.pv-stats-row { border-top: 1px solid var(--border); }
.pv-stats-header {
    font-size: 11px;
    font-weight: 700;
    text-align: right;
    padding-top: 0;
    padding-bottom: 4px;
}
.pv-stats-header span:first-child { text-align: left; }
.pv-stats-code-l { color: var(--accent-live); }
.pv-stats-code-r { color: var(--accent-wicket); }
.pv-stats-label { font-size: 13px; color: var(--text-secondary); }
.pv-stats-val { font-size: 13px; color: var(--text-dim); text-align: right; }
.pv-stats-val.pv-stats-win { color: var(--text-primary); font-weight: 600; }
.pv-stats-total {
    background: rgba(16, 185, 129, 0.1);
    margin: 0 -10px -8px;
    padding: 6px 10px;
    border-radius: 0 0 7px 0;
}
.pv-stats-total .pv-stats-label { font-weight: 600; color: var(--accent-live); }
.pv-stats-total .pv-stats-val { font-size: 14px; font-weight: 700; color: var(--text-dim); }
.pv-stats-total .pv-stats-val.pv-stats-win { color: var(--accent-live); }

/* Win Probability bars */
.pv-models-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pv-model-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: var(--bg-secondary);
    color: var(--text-secondary);
}
.pv-chip-hit  { background: rgba(34,197,94,0.12);  color: #4ade80; }
.pv-chip-miss { background: rgba(239,68,68,0.12);  color: #f87171; }
.pv-model-hit  { font-size: 13px; font-weight: 600; color: #4ade80; }
.pv-model-miss { font-size: 13px; font-weight: 600; color: #f87171; }
.pv-model-push { font-size: 13px; font-weight: 600; color: var(--text-dim); }

/* Win Probability (Preview tab) */
.pv-prob-wrap { background: var(--bg-card-alt); border-radius: 8px; padding: 8px 10px; margin-top: 5px; }
.pv-prob-header { display: flex; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.pv-prob-team-l { color: var(--accent-live); }
.pv-prob-team-r { color: var(--accent-wicket); }
.pv-prob-table { display: flex; flex-direction: column; gap: 8px; }
.pv-prob-row { display: flex; flex-direction: column; gap: 3px; }
.pv-prob-nums { display: flex; justify-content: space-between; align-items: baseline; }
.pv-prob-label { font-size: 11px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.05em; }
.pv-prob-num { font-size: 13px; font-weight: 600; color: var(--text-dim); min-width: 36px; font-variant-numeric: tabular-nums; }
.pv-prob-nums .pv-prob-num:last-child { text-align: right; }
.pv-prob-num.pv-prob-win { color: var(--text-primary); font-weight: 700; }
.pv-prob-track { width: 100%; height: 5px; border-radius: 3px; overflow: hidden; display: flex; gap: 1px; background: var(--bg-secondary); }
.pv-prob-fill-l { height: 100%; background: var(--accent-live); border-radius: 3px 0 0 3px; transition: width 0.4s ease; }
.pv-prob-fill-r { height: 100%; background: var(--accent-wicket); border-radius: 0 3px 3px 0; flex: 1; transition: width 0.4s ease; }

/* Collapsible */
.pv-collapse { display: flex; flex-direction: column; }
.pv-collapse-body {
    max-height: 100px;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pv-collapse-open .pv-collapse-body { max-height: 2000px; }
.pv-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20px;
    margin-top: 6px;
    background: var(--bg-card-alt);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}
.pv-collapse-btn:active { background: var(--bg-secondary); }
.pv-collapse-arrow {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1;
    transition: transform 0.3s ease;
}
.pv-collapse-open .pv-collapse-arrow { transform: rotate(180deg); }

/* Playing XI */
.pv-xi { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pv-xi-col { display: flex; flex-direction: column; gap: 0; }
.pv-xi-header { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 4px; }
.pv-xi-player { display: flex; align-items: center; gap: 4px; padding: 4px 0; border-top: 1px solid var(--border); }
.pv-xi-player:first-of-type { border-top: none; }
.pv-xi-name { font-size: 12px; color: var(--text-secondary); flex: 1; }
.pv-xi-badge { font-size: 9px; font-weight: 700; color: var(--text-dim); background: var(--bg-secondary); border-radius: 3px; padding: 1px 4px; }

/* Facts */
.pv-facts { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.pv-facts li { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
.pv-facts li::before { content: "• "; color: var(--text-dim); }

/* Verdict */
.pv-verdict { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0 0 10px; }
.pv-verdict:last-child,
.pv-verdict:has(+ .pv-prob-wrap) { margin-bottom: 0; }
.pv-verdict + .pv-prob-wrap { margin-top: 8px; }

/* Loading */
#loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 60vh;
    color: var(--text-secondary);
    font-size: 14px;
}

.loading-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent-live);
    animation: pulse 1.2s ease-in-out infinite;
}

/* Error */
#error {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 60vh;
    color: var(--accent-wicket);
    font-size: 14px;
    padding: 0 24px;
    text-align: center;
}

/* Card */
.card {
    background: var(--bg-card);
    border-radius: 14px;
    margin: 8px 0;
    padding: 14px 16px;
    border: 1px solid var(--border);
}

/* ========== HEADER ========== */
.mh-wrap {
    padding: 8px 12px 0;
}

.mh-card {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 12px 12px 0 12px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.mh-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.mh-league-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mh-league {
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
}

.mh-dot {
    color: var(--text-dim);
    font-size: 12px;
}

.mh-round {
    color: var(--text-secondary);
    font-size: 12px;
}

#mh-badge {
    display: flex;
}

/* Team rows */
.mh-team {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mh-team-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex: 1;
}

/* Score slot: win badge + box, right-aligned */
.mh-score-slot {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Status badge */
.mh-status {
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mh-green { color: var(--accent-live); }
.mh-amber { color: var(--accent-extra); }
.mh-red   { color: var(--accent-wicket); }
.mh-dim   { color: var(--text-secondary); }

.mh-timer {
    color: var(--text-secondary);
    font-size: 12px;
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-live);
    animation: pulse 1.2s ease-in-out infinite;
    flex-shrink: 0;
}

/* Logo */
.mh-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 2px;
    box-sizing: border-box;
    background: var(--bg-secondary);
    border-radius: 10px;
}

.mh-logo {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.mh-logo-fb {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-card-alt);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
}

.mh-win-badge {
    width: 20px;
    height: 20px;
    background: var(--accent-live);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}

.mh-team-name {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mh-standing {
    color: var(--text-secondary);
    font-size: 11px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.mh-form {
    display: inline-flex;
    gap: 2px;
}

.mh-form-w, .mh-form-l, .mh-form-d, .mh-form-n {
    font-size: 9px;
    font-weight: 700;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.mh-form-w { background: var(--accent-live); }
.mh-form-l { background: var(--accent-wicket); }
.mh-form-d { background: var(--text-dim); }
.mh-form-n { background: var(--text-dim); }

/* Score boxes */
.mh-box {
    width: 66px;
    height: 44px;
    padding: 0;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.mh-box-dim {
    background: var(--bg-secondary);
}

.mh-box-active {
    background: rgba(16, 185, 129, 0.12);
    border: 1.5px solid rgba(16, 185, 129, 0.35);
}

.mh-box-finished {
    border: none;
}

.mh-box-score {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.mh-box-ov {
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 1px;
}

.mh-green-text { color: var(--accent-live); font-weight: 700; }

.mh-team-loser .mh-team-name,
.mh-team-loser .mh-standing {
    color: var(--color-dim-text);
}

/* Bottom bar */
.mh-bottom {
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

.mh-b-green {
    background: rgba(16, 185, 129, 0.1);
    color: var(--accent-live);
}

.mh-b-amber {
    background: rgba(245, 158, 11, 0.1);
    color: var(--color-amber);
}

.mh-b-red {
    background: rgba(239, 68, 68, 0.1);
    color: var(--accent-wicket);
}

.mh-b-dim {
    background: var(--bg-card-alt);
    color: var(--text-dim);
    font-weight: 400;
}

/* ========== SCORECARD WIDGET ========== */
.sc-wrap {
    background: var(--bg-card);
    border-radius: 16px;
    margin: 0 0 8px 0;
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    overflow: hidden;
}

/* Team switcher */
.sc-switcher {
    display: flex;
    gap: 3px;
    padding: 12px 12px 0;
    background: transparent;
}

.sc-switcher-wrap {
    display: inline-flex;
    gap: 3px;
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 3px;
}

.sc-btn {
    padding: 4px 12px;
    border: none;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--text-dim);
    transition: background 0.15s, color 0.15s;
}

.sc-btn-active {
    background: var(--bg-card);
    color: var(--text-primary);
}

/* Overs scroll strip */
.sc-overs-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.sc-overs-scroll::-webkit-scrollbar { display: none; }

.sc-over {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
}

.sc-over-num {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
}
.sc-over-num-cur { color: var(--accent-live); font-weight: 600; }

.sc-balls {
    display: flex;
    gap: 4px;
}

.sc-ball {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sc-b-grey   { background: var(--ball-bg-grey); color: #fff; }
.sc-b-four   { background: var(--accent-link);  color: #fff; font-weight: 600; }
.sc-b-six    { background: var(--accent-six);   color: #fff; font-weight: 600; }
.sc-b-wicket { background: var(--accent-wicket);color: #fff; font-weight: 700; }
.sc-b-pulse {
    background: transparent;
    position: relative;
}
.sc-b-pulse::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-dim);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    animation: pulse-dot 2s ease-in-out infinite;
    animation-delay: var(--pulse-delay, 0ms);
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 0.3; transform: translate(-50%, -50%) scale(0.5); }
}

.sc-over-runs {
    color: var(--text-dim);
    font-size: 10px;
}
.sc-over-runs-cur { color: var(--accent-live); font-weight: 500; }

.sc-sep {
    width: 1px;
    background: var(--border);
    margin: 6px 0;
    align-self: stretch;
    flex-shrink: 0;
}

/* Batting / Bowling sections */
.sc-section {
    padding: 12px 12px;
}
.sc-section-border {
    border-top: 1px solid var(--border);
}

.sc-section-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.sc-label {
    color: var(--text-secondary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sc-col-heads {
    display: flex;
}
.sc-col {
    text-align: center;
    font-size: 10px;
    color: var(--text-dim);
}

.sc-player-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.sc-player-row:last-child { margin-bottom: 0; }

.sc-player-left {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    flex: 1;
}

.sc-marker {
    color: var(--accent-live);
    font-size: 12px;
    line-height: 1;
}

.sc-name {
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sc-name-on { color: var(--text-primary); font-weight: 500; }
.sc-name-dim { color: var(--text-dim); }
/* SO button in switcher */
.sc-sw-div { width: 1px; background: var(--border); margin: 4px 3px; align-self: stretch; flex-shrink: 0; }
.sc-btn-so { display: flex; align-items: center; gap: 3px; }
.sc-btn-so-active { background: rgba(245,158,11,0.15); color: #f59e0b; }
.sc-so-tag { font-size: 8px; font-weight: 700; background: rgba(245,158,11,0.25); color: #f59e0b; border-radius: 3px; padding: 1px 3px; line-height: 1.2; letter-spacing: 0.03em; }
.sc-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 20px;
    background: var(--bg-card-alt);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s;
}
.sc-expand-btn:active { background: var(--bg-secondary); }
.sc-expand-arrow {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1;
    transition: transform 0.3s ease;
}
.sc-expand-arrow.sc-expand-open { transform: rotate(180deg); }

/* Scoring Breakdown Widget */
.sb-wrap {
    background: var(--bg-card);
    border-radius: 16px;
    margin: 0 0 8px 0;
    border: 1px solid var(--border);
    padding: 10px 14px 6px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.sb-head {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}
.sb-code {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: right;
    letter-spacing: 0.03em;
}
.sb-row {
    display: grid;
    grid-template-columns: 1fr 80px 80px;
    padding: 5px 0;
    border-top: 1px solid var(--border);
    align-items: center;
}
.sb-row:first-of-type { border-top: none; }
.sb-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    align-self: center;
}
.sb-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}
.sb-val {
    font-size: 12px;
    color: var(--text-primary);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.sb-val-win {
    color: var(--accent-live);
    font-weight: 600;
}
.sb-rr {
    font-size: 11px;
    color: var(--text-dim);
}
.sb-val-win .sb-rr {
    color: var(--accent-live);
    opacity: 0.7;
}

.sc-stats {
    display: flex;
    font-size: 13px;
    font-family: ui-monospace, monospace;
    flex-shrink: 0;
}
.sc-stat { text-align: center; color: var(--text-secondary); }
.sc-bold  { color: var(--text-primary); font-weight: 600; }

/* Fixed column widths matching HTML prototype */
.sc-w28 { width: 28px; }
.sc-w24 { width: 24px; }
.sc-w36 { width: 36px; }

/* ========== RUNS WIDGET ========== */
.rg-wrap {
    background: var(--bg-card);
    border-radius: 16px;
    padding: 12px;
    margin: 8px 0;
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.rg-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.rg-title {
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
}

.rg-legend {
    display: flex;
    gap: 16px;
}

.rg-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-secondary);
}

.rg-dot {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}

.rg-chart {
    position: relative;
    height: 180px;
}

/* ========== SCOREBOARD ========== */
.scoreboard {
    padding: 10px 16px 6px;
}

.innings-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 6px 0;
}

.innings-row.current {
    font-weight: 600;
}

.innings-row.past {
    color: var(--text-secondary);
}

.team-score {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.team-code {
    font-size: 15px;
    font-weight: 700;
    min-width: 36px;
}

.score-value {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.innings-row.past .score-value {
    font-size: 17px;
}

.overs {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 400;
}

.run-rate {
    font-size: 12px;
    color: var(--text-secondary);
}

/* Target line */
.target-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    margin: 4px 0;
    background: rgba(0, 212, 255, 0.08);
    border-radius: 8px;
    font-size: 13px;
    color: var(--accent-four);
}

/* ========== CURRENT OVER ========== */
.over-section {
    padding-bottom: 4px;
}

.over-label {
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-weight: 500;
}

.over-balls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ball-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 700;
    background: var(--ball-bg-run);
    color: var(--text-secondary);
    transition: transform 0.2s;
}

.ball-badge.run {
    background: var(--ball-bg-run);
    color: var(--text-primary);
}

.ball-badge.four {
    background: var(--accent-four);
    color: var(--bg-secondary);
}

.ball-badge.six {
    background: var(--accent-six);
    color: #fff;
}

.ball-badge.wicket {
    background: var(--accent-wicket);
    color: #fff;
}

.ball-badge.extra {
    background: rgba(255, 165, 0, 0.2);
    color: var(--accent-extra);
}

/* ========== LAST BALL ========== */
.last-ball {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    margin: 8px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    transition: background 0.4s;
}

.last-ball.flash-four {
    animation: flash-four 0.8s ease-out;
}

.last-ball.flash-six {
    animation: flash-six 0.8s ease-out;
}

.last-ball.flash-wicket {
    animation: flash-wicket 0.8s ease-out;
}

.last-ball-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.last-ball-text {
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.last-ball-text strong {
    color: var(--text-primary);
}

.last-ball-desc {
    font-weight: 700;
}

.last-ball-desc.four { color: var(--accent-four); }
.last-ball-desc.six { color: var(--accent-six); }
.last-ball-desc.wicket { color: var(--accent-wicket); }

/* ========== PLAYERS ========== */
.players-section {
    padding-top: 2px;
}

.section-label {
    font-size: 11px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 8px;
}

.player-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;
}

.player-name {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    min-width: 0;
    flex: 1;
}

.player-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.strike-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent-four);
    flex-shrink: 0;
}

.player-stats {
    display: flex;
    align-items: baseline;
    gap: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.player-runs {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    min-width: 32px;
    text-align: right;
}

.player-balls {
    font-size: 12px;
    color: var(--text-secondary);
    min-width: 28px;
    text-align: left;
}

.player-sr {
    font-size: 12px;
    color: var(--text-dim);
    min-width: 36px;
    text-align: right;
}

.player-boundaries {
    font-size: 11px;
    color: var(--text-dim);
    min-width: 48px;
    text-align: right;
}

/* Bowler divider */
.bowler-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 8px 0;
}

/* Bowler stats */
.bowler-stats {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: var(--text-secondary);
}

.bowler-stat {
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.bowler-stat-val {
    font-weight: 600;
    color: var(--text-primary);
}

/* ========== INNINGS BREAK ========== */
.innings-break-banner {
    text-align: center;
    padding: 18px 16px;
    margin: 8px 12px;
    background: rgba(255, 165, 0, 0.08);
    border: 1px solid rgba(255, 165, 0, 0.2);
    border-radius: 14px;
}

.innings-break-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent-extra);
    margin-bottom: 6px;
}

.innings-break-target {
    font-size: 15px;
    color: var(--text-secondary);
}

.innings-break-target strong {
    color: var(--text-primary);
    font-size: 18px;
}

/* ========== RESULT NOTE ========== */
.result-note {
    text-align: center;
    padding: 10px 16px;
    margin: 8px 12px;
    background: rgba(76, 175, 80, 0.1);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--accent-finished);
}

/* ========== UPDATE INDICATOR ========== */
.update-bar {
    display: flex;
    justify-content: center;
    padding: 6px 0 2px;
    font-size: 11px;
    color: var(--text-dim);
}

/* ========== ANIMATIONS ========== */
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

@keyframes flash-four {
    0% { background: rgba(0, 212, 255, 0.25); }
    100% { background: var(--bg-card); }
}

@keyframes flash-six {
    0% { background: rgba(255, 0, 110, 0.25); }
    100% { background: var(--bg-card); }
}

@keyframes flash-wicket {
    0% { background: rgba(255, 48, 64, 0.25); }
    100% { background: var(--bg-card); }
}

.ball-badge.dot {
    background: var(--ball-bg-dot);
    font-size: 18px;
    color: var(--text-secondary);
}

.ball-badge.ball-pulse {
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ball-badge.ball-pulse::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-live);
    animation: pulse 1.2s ease-in-out infinite;
    animation-delay: var(--pulse-delay, 0ms);
}

/* ========== MATCH INFO ========== */
.mi-card {
    padding: 4px 0;
}

.mi-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--border);
}

.mi-row:last-child {
    border-bottom: none;
}

.mi-icon {
    font-size: 16px;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
    margin-top: 1px;
}

.mi-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mi-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
}

.mi-value {
    font-size: 13px;
    color: var(--text-primary);
    line-height: 1.3;
}
.mi-weather { margin-top: 4px; }

/* ========== MATCHES TAB ========== */
.mh-h2h-summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 14px 16px;
    gap: 16px;
}
.mh-h2h-top {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}
.mh-h2h-row2 {
    display: flex;
    align-items: center;
    width: 100%;
}
.mh-h2h-side {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    color: var(--text-dim);
}
.mh-h2h-side-right { justify-content: flex-end; }
.mh-h2h-side.mh-h2h-leader { color: var(--text-primary); }
.mh-h2h-side-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}
.mh-h2h-side-info-right { align-items: flex-end; }
.mh-h2h-wins {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
    color: var(--text-dim);
}
.mh-h2h-leader .mh-h2h-wins { color: var(--accent-live); }
.mh-h2h-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
}
.mh-h2h-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
    flex-shrink: 0;
}
.mh-h2h-draws {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-dim);
}
.mh-h2h-summary .pv-h2h-logo,
.mh-h2h-summary .pv-h2h-logo-fb { width: 44px; height: 44px; font-size: 14px; }
.mh-h2h-totals {
    display: flex;
    align-items: flex-end;
    width: 100%;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.mh-h2h-total-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}
.mh-h2h-total-center { align-items: center; }
.mh-h2h-total-right  { align-items: flex-end; }
.mh-h2h-total-val {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.mh-h2h-total-lbl {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 3px;
}
.mh-h2h-stats {
    display: flex;
    width: 100%;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.mh-h2h-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
}
.mh-h2h-stat-center { align-items: center; }
.mh-h2h-stat-right  { align-items: flex-end; }
.mh-h2h-stat-val {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
}
.mh-h2h-stat-lbl {
    font-size: 10px;
    color: var(--text-dim);
    margin-top: 3px;
}

/* W/L card for team tabs */
.mh-wl-card { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }
.mh-wl-cols { display: flex; justify-content: space-between; }
.mh-wl-col { display: flex; align-items: center; gap: 6px; }
.mh-wl-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.mh-wl-dot-w { background: var(--accent-live); }
.mh-wl-dot-l { background: var(--accent-wicket); }
.mh-wl-count { font-size: 14px; font-weight: 700; line-height: 1; }
.mh-wl-count-w { color: var(--accent-live); }
.mh-wl-count-l { color: var(--accent-wicket); }
.mh-wl-lbl { font-size: 13px; color: var(--text-secondary); }
.mh-wl-bar-wrap { display: flex; height: 20px; border-radius: 4px; overflow: hidden; gap: 2px; }
.mh-wl-bar-w, .mh-wl-bar-l {
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 600; color: #fff;
    border-radius: 3px; transition: width 0.3s;
    min-width: 24px;
}
.mh-wl-bar-w { background: var(--accent-live); }
.mh-wl-bar-l { background: var(--accent-wicket); }
.mh-wl-form-row { display: flex; justify-content: space-between; }
.mh-wl-card .mh-form-w,
.mh-wl-card .mh-form-l { width: 20px; height: 20px; font-size: 12px; border-radius: 6px; }

/* Stats card (H2H + team) */
.ms-card { padding: 12px 14px; }

.ms-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.ms-header-single { margin-bottom: 10px; }
.ms-title {
    flex: 1;
    text-align: center;
    font-size: 11px;
    color: var(--text-dim);
    font-weight: 500;
}
.ms-team-lbl {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    width: 40px;
}
.ms-team-lbl-right { text-align: right; }

.ms-row {
    display: flex;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}
.ms-row:last-child { border-bottom: none; }
.ms-row-single {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 0;
    border-bottom: 1px solid var(--border);
}
.ms-row-single:last-child { border-bottom: none; }
.ms-lbl {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: var(--text-dim);
}
.ms-val {
    width: 56px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: left;
}
.ms-row .ms-val:last-child { text-align: right; }
.ms-row-single .ms-val { width: auto; color: var(--text-primary); }
.ms-better { color: var(--accent-live) !important; }
.ms-worse  { color: var(--text-dim) !important; }

.mh-match-card { padding: 10px 12px 8px; }

.mh-match-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 0;
    color: var(--text-secondary);
}
.mh-match-row.mh-match-win {
    color: var(--text-primary);
    font-weight: 600;
}
.mh-match-team {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    min-width: 0;
}
.mh-match-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mh-match-score {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    margin-left: 8px;
}
.mh-match-meta {
    font-size: 11px;
    color: var(--text-dim);
    margin-top: 5px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.mh-match-league {
    background: var(--bg-secondary);
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 10px;
    color: var(--text-dim);
}
.mh-match-note { color: var(--text-dim); }

/* ========== SQUADS TAB ========== */
.sq-switcher {
    display: flex;
    gap: 3px;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 3px;
    margin-bottom: 8px;
}

/* Lobby day switcher — horizontally scrollable when tabs don't fit */
.lb-day-switcher {
    display: flex;
    gap: 3px;
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 3px;
    margin-bottom: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}
.lb-day-switcher::-webkit-scrollbar { display: none; }
.lb-day-switcher .sq-team-btn {
    flex: 0 0 auto;
    min-width: 56px;
    scroll-snap-align: center;
}

.sq-team-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 5px 12px;
    border: none;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    color: var(--text-dim);
    transition: background 0.15s, color 0.15s;
}

.sq-team-btn.sq-team-active {
    background: var(--bg-card);
    color: var(--text-primary);
}

.sq-team-logo {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 50%;
}

.sq-block {
    margin: 8px 0px;
    padding: 0;
    overflow: hidden;
}

.sq-block-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border);
}

.sq-player {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
}

.sq-player:last-child {
    border-bottom: none;
}

.sq-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bg-secondary);
}

.sq-avatar-fb {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dim);
}

.sq-avatar.sq-avatar-err {
    visibility: hidden;
}

.sq-player-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sq-player-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.sq-player-pos {
    font-size: 12px;
    color: var(--text-dim);
}

.sq-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.03em;
}

.sq-badge-c {
    background: var(--color-amber);
    color: #000;
}

.sq-badge-wk {
    background: var(--bg-secondary);
    color: var(--text-dim);
}

/* ========== STANDINGS TAB ========== */
.st-wrap {
    padding: 0;
}


.st-table {
    padding: 0;
    overflow: hidden;
}

.st-header,
.st-row {
    display: flex;
    align-items: center;
    padding: 0 8px;
}

.st-header {
    padding-top: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.st-header span {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    text-align: center;
    justify-content: center;
}

.st-header .st-col-team {
    text-align: left;
    justify-content: flex-start;
}

.st-row {
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border);
}

.st-row:last-child {
    border-bottom: none;
}

.st-row-match {
    background: color-mix(in srgb, var(--color-win) 8%, transparent);
}

.st-row-cutoff {
    border-bottom: none;
    box-shadow: 0 2px 0 var(--text-dim);
}

.st-col-pos {
    width: 20px;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
}

.st-pos-match {
    color: var(--accent);
    font-weight: 700;
}

.st-col-team {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding-left: 4px;
}

.st-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 50%;
    flex-shrink: 0;
}

.st-team-code {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-col-num {
    width: 24px;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
}

.st-col-wl {
    width: 34px;
    flex-shrink: 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.st-col-nrr {
    width: 44px;
    flex-shrink: 0;
    text-align: center;
    font-size: 11px;
    color: var(--text-dim);
    font-variant-numeric: tabular-nums;
}

.st-col-pts {
    width: 26px;
    flex-shrink: 0;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
}

.st-pts-match {
    color: var(--accent);
}

.st-col-form-hd {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
}

/* Report tab */
.rp-para {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}
.rp-hit-emoji {
    font-size: 14px;
    width: 22px;
    flex-shrink: 0;
}
.pv-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

/* ========== DAILY PAGE ========== */
.daily-loading {
    padding: 40px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
}

.daily-header-block {
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 0 !important;
}

.daily-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dr-col-wt     { padding: 0 5px; white-space: nowrap; text-align: center; color: var(--text-secondary); font-size: 13px; font-family: ui-monospace, monospace; }
.dr-col-acc    { padding: 0 5px; white-space: nowrap; text-align: center; color: var(--text-secondary); font-size: 13px; font-family: ui-monospace, monospace; }
.dr-col-roi    { padding: 0 5px; white-space: nowrap; text-align: center; color: var(--text-secondary); font-size: 13px; font-family: ui-monospace, monospace; }
.dr-col-profit { padding: 0 5px; white-space: nowrap; text-align: center; color: var(--text-secondary); font-size: 13px; font-family: ui-monospace, monospace; }

/* Daily report: grid so columns size to widest cell and stay aligned across rows */
.dr-models { display: grid; grid-template-columns: 1fr repeat(4, max-content); }
.dr-models .rp-model-row { display: contents; }
.dr-models .rp-stats { display: contents; }
/* every grid cell (label + 4 stat cols) gets the row's padding & divider */
.dr-models .pv-prob-label,
.dr-models .dr-col-wt,
.dr-models .dr-col-acc,
.dr-models .dr-col-roi,
.dr-models .dr-col-profit {
    display: flex;
    align-items: center;
    padding-top: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border);
}
.dr-models .rp-model-row:last-child .pv-prob-label,
.dr-models .rp-model-row:last-child .dr-col-wt,
.dr-models .rp-model-row:last-child .dr-col-acc,
.dr-models .rp-model-row:last-child .dr-col-roi,
.dr-models .rp-model-row:last-child .dr-col-profit { border-bottom: none; }
.dr-models .dr-col-wt,
.dr-models .dr-col-acc,
.dr-models .dr-col-roi,
.dr-models .dr-col-profit { justify-content: center; }
.dr-models .pv-prob-label { padding-left: 12px; }
.dr-models .dr-col-profit { padding-right: 12px; }

/* Verdict table (match report): same grid layout as daily report */
.vr-models { display: grid; grid-template-columns: 1fr repeat(3, max-content); }
.vr-models .rp-model-row { display: contents; }
.vr-models .rp-stats { display: contents; }
.vr-models .pv-prob-label,
.vr-models .rp-s1,
.vr-models .rp-s2,
.vr-models .rp-s3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 9px 5px;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.vr-models .rp-model-row:last-child .pv-prob-label,
.vr-models .rp-model-row:last-child .rp-s1,
.vr-models .rp-model-row:last-child .rp-s2,
.vr-models .rp-model-row:last-child .rp-s3 { border-bottom: none; }
.vr-models .pv-prob-label { justify-content: flex-start; padding-left: 12px; }
.vr-models .rp-s3 { padding-right: 12px; }

.rp-model-row-head { border-bottom: 1px solid var(--border); }
.rp-model-row-head .pv-prob-label,
.rp-model-row-head .dr-col-wt,
.rp-model-row-head .dr-col-acc,
.rp-model-row-head .dr-col-roi,
.rp-model-row-head .dr-col-profit {
    color: var(--text-dim);
    font-size: 10px;
    letter-spacing: 0.06em;
    font-family: inherit;
}

.daily-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.daily-table thead tr {
    border-bottom: 1px solid var(--border);
}

.daily-table th {
    padding: 10px 12px 8px;
    text-align: right;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.daily-table th:first-child,
.daily-table td:first-child {
    text-align: left;
}

.daily-table td {
    padding: 10px 12px;
    text-align: right;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border);
}

.daily-table tbody tr:last-child td {
    border-bottom: none;
}

.dr-model {
    font-weight: 600;
}

.dr-pos {
    color: var(--color-win);
    font-weight: 600;
}

.dr-neg {
    color: var(--color-loss);
    font-weight: 600;
}

.daily-legend {
    font-size: 12px;
}

.dl-row {
    display: flex;
    gap: 8px;
    padding: 3px 0;
    color: var(--text-secondary);
}

.dl-key {
    font-weight: 600;
    color: var(--text-primary);
    min-width: 44px;
    flex-shrink: 0;
}

.dl-val {
    color: var(--text-secondary);
}

/* ---------------------
   Lobby
   --------------------- */
.lb-gear-fab {
    position: fixed;
    bottom: calc(20px + var(--safe-bottom));
    right: 16px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    cursor: pointer;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: background 0.15s;
}
.lb-gear-fab:active { background: var(--bg-card-alt); }

.lb-channel-link {
    position: fixed;
    bottom: calc(20px + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%);
    height: 44px;
    padding: 0 18px;
    border-radius: 22px;
    background: var(--bg-card);
    border: 1px solid var(--accent-link);
    box-shadow: 0 2px 12px rgba(0,0,0,0.18);
    color: var(--accent-link);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    white-space: nowrap;
    z-index: 100;
    transition: background 0.15s, transform 0.15s;
    animation: lb-channel-pulse 2.4s ease-in-out infinite;
    will-change: transform, box-shadow;
}
.lb-channel-link:active {
    background: var(--bg-card-alt);
    transform: translateX(-50%) scale(0.96);
    animation-play-state: paused;
}

@keyframes lb-channel-pulse {
    0%, 100% {
        transform: translateX(-50%) scale(1);
        box-shadow: 0 2px 12px rgba(0,0,0,0.18), 0 0 0 0 rgba(59,130,246,0.45);
    }
    50% {
        transform: translateX(-50%) scale(1.04);
        box-shadow: 0 2px 16px rgba(0,0,0,0.22), 0 0 0 8px rgba(59,130,246,0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lb-channel-link { animation: none; }
}

/* Settings drawer */
.lb-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 100;
}
.lb-drawer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg-card);
    border-radius: 20px 20px 0 0;
    padding: 8px 20px calc(24px + var(--safe-bottom));
    z-index: 101;
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.lb-drawer-open { transform: translateY(0); }
.lb-drawer-handle {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    margin: 4px auto 16px;
}
.lb-drawer-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
}
.lb-drawer-section {
    margin-bottom: 20px;
}
.lb-drawer-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.lb-list {
    padding: 0;
    /* room for the fixed "Follow Channel" button so it never covers the last match */
    padding-bottom: calc(80px + var(--safe-bottom));
}

/* Status badge */
.lb-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.lb-live     { background: rgba(16,185,129,0.15); color: #10b981; }
.lb-finished { background: rgba(100,116,139,0.12); color: var(--text-dim); }
.lb-upcoming { background: rgba(59,130,246,0.12); color: #3b82f6; }
.lb-delay    { background: rgba(245,158,11,0.12); color: #d97706; }

/* Tournament group — card with header + entity list (mirrors report's performer blocks) */
.lb-group {
    background: var(--bg-card);
    border-radius: 12px;
    border: 1px solid var(--border);
    overflow: hidden;
    margin-bottom: 8px;
}
.lb-group:last-child { margin-bottom: 0; }
.lb-group-head {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--border);
}
.lb-group-name {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.lb-group-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dim);
    background: var(--bg-secondary);
    border-radius: 10px;
    padding: 1px 7px;
}
.lb-group .pv-h2h-matches { padding: 4px 12px; }

.lb-match-row {
    cursor: pointer;
    transition: background 0.15s;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.lb-match-row:active { background: var(--bg-card-alt); }
.lb-match-time-col {
    flex-shrink: 0;
    width: 46px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
/* Live state: status badge shown in the left column instead of a time */
.lb-tc-live {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent-live);
}
/* Live over counter — slightly tighter so "19.5 ov" fits the 46px column */
.lb-tc-overs {
    font-size: 10px;
    letter-spacing: -0.2px;
    white-space: nowrap;
}
.lb-tc-status {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-amber);
}
.lb-tc-status.lb-tc-status-dim { color: var(--text-dim); }
.lb-match-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
/* FRO — Final Result Only badge (lobby match row, no live ball-by-ball data) */
.lb-fro {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-dim);
    background: var(--bg-card-alt);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 1px 5px;
}
/* FRO badge in a lobby match row — vertically centred next to the time column */
.lb-match-row > .lb-fro {
    flex-shrink: 0;
    margin-left: 8px;
}

.lb-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-dim);
    font-size: 15px;
}