/* Football on TV - Professional Design */

:root {
    --bg: #f8f9fa;
    --card-bg: #ffffff;
    --text: #1a1a2e;
    --text-secondary: #4a4a5a;
    --text-muted: #8a8a9a;
    --border: #e5e7eb;
    --accent: #1a73e8;
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    /* The tab-change slide translates content sideways briefly; clip it so it
       can't flash a horizontal scrollbar on narrow screens. */
    overflow-x: hidden;
}

.page-header {
    max-width: 720px;
    margin: 0 auto;
    padding: 18px 24px 20px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg);
    box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.12);
}

/* Underline tab bar: full-width row, active tab in accent blue with a
   3px underline indicator; the bottom border doubles as the divider
   separating the nav from the fixture list. */
.tab-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
}

.tab {
    flex: 1;
    padding: 14px 8px;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: 0.2px;
}

.tab:not(.active):hover {
    color: var(--text);
}

.tab.active {
    color: var(--accent);
    font-weight: 700;
    border-bottom-color: var(--accent);
}

/* Tab-change transition: the incoming tab's content slides in from the side
   it came from (later tab → from the right, earlier tab → from the left), or
   just fades on first load. The direction class is set in JS after render. */
@keyframes tab-slide-right {
    from { opacity: 0; transform: translateX(22px); }
    to   { opacity: 1; transform: none; }
}

@keyframes tab-slide-left {
    from { opacity: 0; transform: translateX(-22px); }
    to   { opacity: 1; transform: none; }
}

@keyframes tab-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

#matches.tab-anim-right { animation: tab-slide-right 240ms cubic-bezier(0.22, 0.61, 0.36, 1); }
#matches.tab-anim-left  { animation: tab-slide-left  240ms cubic-bezier(0.22, 0.61, 0.36, 1); }
#matches.tab-anim-fade  { animation: tab-fade 220ms ease-out; }

@media (prefers-reduced-motion: reduce) {
    #matches.tab-anim-right,
    #matches.tab-anim-left,
    #matches.tab-anim-fade {
        animation: none;
    }
}

main {
    max-width: 720px;
    margin: 0 auto;
    padding: 16px 24px 24px;
}

.date-group {
    margin-bottom: 20px;
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    border: 1px solid var(--border);
}

.date-group:last-child {
    margin-bottom: 0;
}

.date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: #F8F8F8;
    border-bottom: 1px solid var(--border);
}

.date-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.date-header.today {
    background: #F0EBFF;
    border-bottom-color: #D1C4E9;
}

.date-header.today .date-label {
    color: #512DA8;
}

.matches-list {
    display: flex;
    flex-direction: column;
}

.match-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
}

/* Symmetry spacer: mirrors .match-meta on the left so the kickoff time
   lands at the true horizontal centre of the row on desktop. The mobile
   grid layout overrides display:flex, so this pseudo-element is harmless
   there (no flex context → ignored). */
.match-row::before {
    content: '';
    flex: 0 0 150px;
}

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

/* Match in progress: subtle green wash + a thin accent edge. Purely
   time-based (kickoff → +120min); see isLiveNow() in app.js. Works in
   both the desktop flex row and the mobile grid row. */
.match-row.live {
    background: #F1F8F2;
    box-shadow: inset 3px 0 0 #2E9E5B;
}

.match-row.live + .match-details {
    background: #F1F8F2;
    box-shadow: inset 3px 0 0 #2E9E5B;
}

/* Played, still retained on the tab. The row's content is muted rather than
   hidden — the kickoff time and channel stay useful, and there's no score to
   replace them with. Dimming is applied to the content rather than the whole
   row so the FT tag is exempt: it's the one element that should get MORE
   prominent when a match finishes, and a parent opacity would fade it too.
   At 0.62 the team names and time (both var(--text)) stay above the WCAG AA
   4.5:1 floor in each theme — 4.8:1 light, 6.0:1 dark. */
.match-row.finished > .team,
.match-row.finished > .match-time,
.match-row.finished .match-meta > *:not(.ft-tag) {
    opacity: 0.62;
}

.match-row.finished .team-logo,
.match-row.finished .wc-flag-circle {
    filter: grayscale(0.5);
}

/* Hidden by default and revealed on .finished, so refreshLiveMatches can flip
   a row's state with a class toggle alone — no re-render on a page that may
   sit open across a kickoff. */
.ft-tag {
    display: none;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 2px 5px;
    border-radius: 3px;
    background: var(--border);
    color: var(--text-secondary);
    line-height: 1.4;
}

.match-row.finished .ft-tag {
    display: inline-flex;
}

.match-row.expandable {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.04);
}

.match-row.expanded {
    border-bottom-color: transparent;
}

.match-details {
    padding: 14px 16px 16px;
    background: #FAFAFA;
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.04);
    border-bottom: 1px solid var(--border);
    text-align: center;
    color: var(--text);
    animation: md-fade 140ms ease-out;
}

.match-details .md-stadium {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.1px;
    line-height: 1.25;
}

.match-details .md-stadium .md-icon {
    margin-right: 6px;
    opacity: 0.85;
}

.match-details .md-location {
    margin-top: 3px;
    font-size: 13px;
    color: var(--text-muted);
}

.match-details .md-tenants {
    margin-top: 8px;
    font-size: 12px;
    color: var(--text);
    line-height: 1.4;
}

.match-details .md-stats {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
}

.match-details .md-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    color: var(--text);
}

.match-details .md-chip-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.match-details .md-chip-val {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@keyframes md-fade {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.match-time {
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    padding: 0 4px;
}

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

.team.home {
    justify-content: flex-end;
}

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

/* All viewports: the name fills its cell so the badge is pinned to the
   outer edge of the team (far left for home, far right for away), and
   the name text hugs the centre next to the kickoff time. */
.team .team-name {
    flex: 1;
    min-width: 0;
}

.team.home .team-name {
    text-align: right;
}

.team.away .team-name {
    text-align: left;
}

/* Multi-word names (e.g. "South Korea", "Manchester United") may wrap to
   a 2nd line so they're not chopped by the narrower team cell. Single-
   word names keep nowrap+ellipsis from .team-name so a long single word
   never splits mid-letter — breaks only ever happen at a space. */
.team-name.multi {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.25;
}

.team-logo,
.team-flag {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.team-logo {
    object-fit: contain;
    border-radius: 50%;
    border: 2px solid var(--border);
}

.wc-flag-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--border);
    display: block;
}

.team-flag {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.match-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    flex: 0 0 150px;
}

.comp-badge {
    font-size: 10px;
    font-weight: 600;
    color: #fff;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.4;
}

/* Competition pill + tournament stage, kept together at the right end of a
   date header (see .date-header's space-between). */
.date-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

/* Tournament round ("Group Stage", "Semi-Final") on the internationals tab.
   Deliberately unpilled — the coloured pill next to it names the competition,
   and a second pill would compete with it. */
.stage-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- World Cup results panel --- */
/* Final score, mirrors .match-time's slot but a touch bolder. */
.match-score {
    font-size: 15px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    padding: 0 4px;
    white-space: nowrap;
}

.score-pens {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
}


.channel-icon {
    width: 48px;
    height: 18px;
    object-fit: contain;
    object-position: center;
    border-radius: 3px;
    flex-shrink: 0;
}

.channel-pill {
    font-size: 10px;
    font-weight: 600;
    color: #424242;
    background: #E0E0E0;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.4;
}

@media (max-width: 640px) {
    main {
        padding: 12px;
    }

    .page-header {
        padding: 14px 12px 16px;
    }

    .date-group {
        margin-bottom: 14px;
        border-radius: 12px;
    }

    .date-header {
        padding: 10px 14px;
        /* A dated header ("TUESDAY, 16 SEPTEMBER") plus a competition pill and
           a stage runs ~30-80px past a phone's width. Everything here is
           white-space: nowrap except .stage-label, whose overflow: hidden lets
           it shrink below its content — so without this the stage is the one
           thing that gets ellipsised away. Wrap instead, dropping the pill +
           stage onto their own right-aligned line when they don't fit. */
        flex-wrap: wrap;
        row-gap: 6px;
    }

    .date-meta {
        margin-left: auto;
    }

    .match-row {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "home time away"
            "home meta away";
        align-items: center;
        column-gap: 18px;
        row-gap: 2px;
        padding: 12px 14px;
    }

    .match-row::before {
        display: none;
    }

    .team.home {
        grid-area: home;
    }

    .team.away {
        grid-area: away;
    }

    .match-time,
    .match-score {
        grid-area: time;
        justify-self: center;
        padding: 0 2px;
    }

    .match-time {
        font-size: 13px;
    }

    .match-score {
        font-size: 14px;
    }

    .match-meta {
        grid-area: meta;
        justify-self: center;
        flex: initial;
        justify-content: center;
        margin: 0;
    }

    .channel-icon {
        width: 58px;
        height: 22px;
    }

    .team-name {
        font-size: 13px;
    }

    /* Badge-to-outer-edge + name text-align + multi-word wrap now apply
       at all widths (moved to the base rules). */

    .team-logo,
    .team-flag {
        width: 20px;
        height: 20px;
        font-size: 16px;
    }

    .wc-flag-circle {
        width: 28px;
        height: 28px;
    }
}

/* Matchnight: UK-time note + late-kickoff divider/tag (World Cup tab) */
.tz-note {
    max-width: 720px;
    margin: 18px auto 0;
    padding: 0 4px;
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.night-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 16px;
    background: #FAFAFA;
    border-bottom: 1px solid var(--border);
}

.night-divider::before,
.night-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.night-divider span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--text-muted);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0f172a;
        --card-bg: #1e293b;
        --text: #f1f5f9;
        --text-secondary: #cbd5e1;
        --text-muted: #94a3b8;
        --border: #334155;
        --accent: #60a5fa;
    }

    .page-header {
        box-shadow: 0 4px 12px -6px rgba(0, 0, 0, 0.6);
    }

    .date-group {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
    }

    /* Slightly lighter than the card so headers/dividers read as a distinct
       surface, matching how the light theme uses a faint grey. */
    .date-header,
    .match-details,
    .night-divider {
        background: #243244;
    }

    .date-header.today {
        background: #2e2a5e;
        border-bottom-color: #4f46e5;
    }

    .date-header.today .date-label {
        color: #c7d2fe;
    }

    .match-row.live,
    .match-row.live + .match-details {
        background: #16301f;
    }

    .match-details .md-chip {
        background: #334155;
    }

    .channel-pill {
        background: #334155;
        color: #e2e8f0;
    }

    /* Channel logos are dark brand marks designed for a white surface (BBC,
       ITV, HBO, Disney are near-black) — invisible on a dark card. Put each
       on a light chip so every logo reads, exactly as on the light theme's
       white card. */
    .channel-icon {
        background: #f5f6f8;
        padding: 2px 5px;
        border-radius: 4px;
    }
}

/* Pull-to-refresh indicator — visible only in iOS standalone mode (injected by
   app.js when window.navigator.standalone is true). Starts hidden 52px above
   the top of the viewport and slides down as the user pulls. */
.ptr-indicator {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-52px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--card-bg);
    border: 1.5px solid var(--border);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    opacity: 0;
    pointer-events: none;
    z-index: 999;
}

.ptr-indicator.ptr-ready {
    color: var(--accent);
}

.ptr-indicator.ptr-refreshing svg {
    animation: ptr-spin 0.7s linear infinite;
}

@keyframes ptr-spin {
    to { transform: rotate(360deg); }
}