/* Jersey10 display font */
@font-face {
    font-family: 'Jersey10';
    src: url('Jersey10-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Light theme (default) */
:root {
    --background: 25 40% 94%;
    --foreground: 15 20% 18%;
    --card: 25 40% 94%;
    --card-foreground: 15 20% 18%;
    --popover: 25 40% 94%;
    --popover-foreground: 15 20% 18%;
    --primary: 20 65% 45%;
    --primary-foreground: 0 0% 98%;
    --secondary: 28 35% 84%;
    --secondary-foreground: 15 20% 18%;
    --muted: 28 35% 84%;
    --muted-foreground: 22 15% 44%;
    --accent: 28 35% 84%;
    --accent-foreground: 15 20% 18%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 35 20% 82%;
    --input: 35 20% 82%;
    --ring: 25 70% 45%;
    --radius: 0.5rem;

    --line-color: hsl(var(--border));
    --secondary-text-color: hsl(var(--muted-foreground));
    --live-color: #ea3e23;
    --bg-color: hsl(var(--background));
}

/* Dark theme */
.dark {
    --background: 0 0% 6%;
    --foreground: 0 0% 98%;
    --card: 0 0% 10%;
    --card-foreground: 0 0% 98%;
    --popover: 0 0% 10%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
}

.dark .input,
.dark select,
.dark input[type="text"] {
    background-color: hsl(0 0% 22%);
    border: 1px solid hsl(0 0% 35%);
    color: hsl(var(--foreground));
}

.dark input[type="search"] {
    background-color: transparent;
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
}

.dark .input:focus,
.dark select:focus,
.dark input[type="text"]:focus,
.dark input[type="search"]:focus {
    border-color: hsl(210 70% 50%);
    outline: none;
    box-shadow: 0 0 0 1px hsl(210 70% 50%);
}

/* Light theme input styles */
.input,
select,
input[type="text"] {
    background-color: hsl(40 30% 96%);
    border: 1px solid hsl(30 10% 80%);
    color: hsl(var(--foreground));
}

input[type="search"] {
    background-color: transparent;
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
}

.input:focus,
select:focus,
input[type="text"]:focus,
input[type="search"]:focus {
    border-color: hsl(210 60% 60%);
    outline: none;
    box-shadow: 0 0 0 1px hsl(210 60% 60%);
}

body {
    background-color: var(--bg-color);
    color: hsl(var(--foreground));
    font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
}

nav.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--bg-color);
    z-index: 100;
    padding: 0.5rem 1rem 0;
    height: 51px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

nav.top-nav .nav-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

nav.top-nav .nav-center {
    flex: 1;
    max-width: 300px;
    margin: 0 1rem;
}

nav.top-nav .nav-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Mobile search icon button — hidden by default, shown only on mobile */
#mobile-search-btn {
    display: none;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
    color: hsl(var(--foreground));
    align-items: center;
}

#mobile-search-btn svg {
    width: 20px;
    height: 20px;
}

#mobile-search-btn:hover {
    opacity: 0.8;
}

/* Language/globe nav button */
#language-button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
    color: hsl(var(--foreground));
    display: flex;
    align-items: center;
}

#language-button svg {
    width: 20px;
    height: 20px;
}

#language-button:hover {
    opacity: 0.8;
}

#nav-share-button {
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
}

/* Nav Search Autocomplete */
.nav-search-wrapper {
    position: relative;
    width: 100%;
}

#nav-search-input {
    border: 1px solid hsl(var(--border));
}

#nav-search-input:focus {
    outline: none;
}

.nav-autocomplete-list {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 8px;
    max-height: 400px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    box-shadow: 0 4px 12px hsla(var(--foreground), 0.15);
}

.nav-autocomplete-list.show {
    display: block;
}

.nav-autocomplete-item {
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid hsl(var(--border));
    transition: background-color 0.2s ease;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    position: relative;
}

.nav-autocomplete-item:last-child {
    border-bottom: none;
}

.nav-autocomplete-item:hover {
    background-color: hsl(var(--accent));
}

.nav-autocomplete-item .league-name {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

.nav-autocomplete-item .team-name {
    font-size: 0.875rem;
    font-weight: 500;
    flex: 1;
}

.nav-autocomplete-item .remove-recent {
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: color 0.2s ease;
    margin-left: auto;
}

.nav-autocomplete-item .remove-recent:hover {
    color: hsl(var(--destructive));
}

main.container {
    padding-top: 4.2rem;
    margin: 0 auto;
    padding-left: 2rem;
    padding-right: 2rem;
}

.match-info {
    margin-bottom: 1rem;
}

/* Enhanced Match Card Styles */
.match-card {
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
    position: relative;
}

/* Upcoming match list (collapsed by default) */
.upcoming-matches-card {
    margin-bottom: 0.5rem;
}

.upcoming-match-row {
    padding: 1rem 1.25rem;
    position: relative;
}

.upcoming-match-row.expandable {
    cursor: pointer;
}


.upcoming-match-divider {
    height: 1px;
    background-color: hsl(var(--border));
}

.upcoming-match-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.upcoming-match-summary .match-teams-row {
    flex: 1;
    margin-bottom: 0;
}

.upcoming-match-details {
    padding-top: 0.5rem;
}

.upcoming-expand-icon {
    flex-shrink: 0;
    color: hsl(var(--muted-foreground));
    transition: transform 0.2s ease;
}

.upcoming-expand-icon.expanded {
    transform: rotate(180deg);
}

/* Match Card Layout */
.match-teams-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.match-team {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.match-team-home {
    justify-content: flex-end;
    text-align: right;
}

.match-team-away {
    justify-content: flex-start;
    text-align: left;
}

.match-team-logo-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.match-team-home .match-team-logo-group {
    flex-direction: row-reverse;
}

.match-team-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

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

.match-team-prob {
    font-size: 1.1rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    flex-shrink: 0;
}

.match-team-prob-favourite {
    background-color: #16a34a;
    color: #fff;
    padding: 0.2em 0.55em;
    border-radius: 999px;
}

.match-team-prob-slight {
    background-color: #6b7280;
    color: #fff;
    padding: 0.2em 0.55em;
    border-radius: 999px;
}

.match-team-logo {
    width: 56px;
    height: 56px;
    object-fit: contain;
    flex-shrink: 0;
}

.flag-emoji-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    object-fit: unset;
}

.match-team-logo.flag-emoji-logo { font-size: 42px; }
.live-team-logo.flag-emoji-logo { font-size: 22px; }
.finished-team-logo.flag-emoji-logo { font-size: 18px; }
.week-team-logo.flag-emoji-logo { font-size: 27px; }

.match-center-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
    min-width: 140px;
}

.match-time-center {
    font-size: 1.75rem;
    font-weight: 700;
    color: hsl(var(--foreground));
    text-align: center;
}

.match-score-center {
    color: hsl(var(--foreground));
}

.match-live-label {
    color: #ef4444;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05em;
}

.match-round-center {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
    max-width: 180px;
}

/* Draw probability shown in center of match card (football only) */
.match-draw-prob {
    font-size: 0.75rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    text-align: center;
}
.match-draw-prob.match-draw-prob-favourite {
    background-color: #6b7280;
    color: #fff;
    padding: 0.15em 0.5em;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.8rem;
}

.match-venue-center {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
    max-width: 180px;
}

.venue-name,
.venue-city {
    display: block;
}

.venue-name {
    margin-bottom: 0.125rem;
}

/* Table name full/short switching */
.table-name-short {
    display: none;
}

/* Match Broadcasters */
.match-broadcasters {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid hsl(var(--border));
}

.broadcaster-link {
    display: flex;
    align-items: center;
    justify-content: center;
}

.broadcaster-logo {
    height: 20px;
    width: auto;
    max-width: 60px;
    object-fit: contain;
}

/* Remove double border when buttons follow broadcasters */
.match-broadcasters + .match-buttons {
    border-top: none;
    margin-top: 0;
    padding-top: 0.75rem;
}

/* Match Card Buttons */
.match-buttons {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
    margin-top: 1rem;
}

.match-btn.outline {
    background: transparent;
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-block;
}

.match-btn.outline:hover {
    background: hsl(var(--accent));
    border-color: hsl(var(--primary));
    color: hsl(var(--foreground));
}

.match-btn.outline.external-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.match-btn.outline.external-link svg {
    flex-shrink: 0;
}

/* Responsive adjustments for match card */
@media (max-width: 600px) {
    .match-card {
        padding: 1rem;
    }

    .upcoming-match-row {
        padding: 0.75rem 1rem;
    }

    .match-teams-row {
        gap: 0.5rem;
    }

    .match-team {
        gap: 0.4rem;
        min-width: 0;
        align-items: center;
    }

    .match-team-logo-group {
        flex-direction: column !important;
        align-items: center;
        gap: 0.25rem;
    }

    .match-center-info {
        min-width: 70px;
        gap: 0.15rem;
    }

    .match-time-center {
        font-size: 1rem;
        font-weight: 600;
    }

    .match-round-center {
        font-size: 0.6rem;
        max-width: 70px;
    }

    .match-venue-center {
        font-size: 0.6rem;
        max-width: 70px;
        line-height: 1.2;
    }

    .venue-name {
        display: none;
    }

    .table-name-full {
        display: none;
    }

    .table-name-short {
        display: inline;
    }

    .match-team-logo {
        width: 56px;
        height: 56px;
    }

    .match-team-name {
        font-size: 0.75rem;
        font-weight: 600;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70px;
    }

    .match-team-home .match-team-name {
        text-align: center;
    }

    .match-team-prob {
        font-size: 0.85rem;
        font-weight: 700;
        flex-shrink: 0;
        min-width: 36px;
        text-align: center;
    }

    .match-broadcasters {
        gap: 0.6rem;
        padding-top: 0.5rem;
        margin-top: 0.5rem;
    }

    .broadcaster-logo {
        height: 16px;
        max-width: 50px;
    }

    .match-buttons {
        flex-wrap: wrap;
        gap: 0.35rem;
        padding-top: 0.75rem;
        margin-top: 0.75rem;
    }

    .match-btn.outline {
        font-size: 0.65rem;
        padding: 0.35rem 0.5rem;
    }
}

/* Matches Section */
#matches-section {
    padding-bottom: 80px;
}

/* Team Lists Section */
.team-lists-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

.teamlist-table {
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 0 auto;
}

.teamlist-table thead th {
    padding: 0.5rem 0.5rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    border-bottom: 1px solid hsl(var(--border));
    letter-spacing: 0.5px;
}

.teamlist-table thead th.teamlist-home {
    text-align: right;
}

.teamlist-table thead th.teamlist-center {
    text-align: center;
    width: 40px;
}

.teamlist-table thead th.teamlist-away {
    text-align: left;
}

.teamlist-table tbody tr {
    border-bottom: 1px solid hsl(var(--border));
}

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

.teamlist-table td {
    padding: 0.4rem 0.5rem;
    vertical-align: middle;
    white-space: nowrap;
}

.teamlist-table td.teamlist-home {
    text-align: right;
}

.teamlist-table td.teamlist-away {
    text-align: left;
}

.teamlist-table .teamlist-name {
    font-size: 0.85rem;
}

.teamlist-table .teamlist-name .player-last {
    font-weight: 600;
}

.teamlist-table .teamlist-number {
    font-size: 0.9rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    text-align: center;
    width: 40px;
}

.teamlist-table .teamlist-position {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    width: 80px;
}

.teamlist-table .teamlist-position.teamlist-home {
    padding-right: 0.25rem;
}

.teamlist-table .teamlist-position.teamlist-away {
    padding-left: 0.25rem;
}

.player-first {
    font-size: 0.85rem;
    color: hsl(var(--foreground));
}

.player-last {
    font-size: 0.85rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

@media (max-width: 600px) {
    .team-lists-section {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .teamlist-table {
        font-size: 0.7rem;
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
        margin: 0 auto;
    }

    .teamlist-table td,
    .teamlist-table th {
        padding: 0.3rem 0.15rem;
    }

    .teamlist-table thead th {
        font-size: 0.6rem;
    }

    .teamlist-table .teamlist-position {
        display: none;
    }

    .teamlist-table th,
    .teamlist-table td {
        text-align: center !important;
    }

    .teamlist-table th.teamlist-home,
    .teamlist-table td.teamlist-home,
    .teamlist-table .teamlist-name.teamlist-home {
        width: 45%;
    }

    .teamlist-table th.teamlist-away,
    .teamlist-table td.teamlist-away,
    .teamlist-table .teamlist-name.teamlist-away {
        width: 45%;
    }

    .teamlist-table .teamlist-center,
    .teamlist-table td.teamlist-center,
    .teamlist-table th.teamlist-center,
    .teamlist-table .teamlist-number {
        width: 10%;
    }
}

/* Tryscorers Section */
.tryscorers-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

.tryscorers-table {
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 0 auto;
}

.tryscorers-table thead th {
    padding: 0.5rem 0.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    border-bottom: 1px solid hsl(var(--border));
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tryscorers-table tbody tr {
    border-bottom: 1px solid hsl(var(--border));
}

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

.tryscorers-table td {
    padding: 0.5rem 0.5rem;
    vertical-align: middle;
    white-space: nowrap;
}

.tryscorers-table .tryscorer-name {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.tryscorers-table .tryscorer-name .player-last {
    font-weight: 600;
}

.tryscorer-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.tryscorers-table .tryscorer-position {
    font-size: 0.8rem;
    color: hsl(var(--muted-foreground));
}

.tryscorers-table .tryscorer-form {
    white-space: nowrap;
}

.form-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25em;
    height: 1.25em;
    border-radius: 3px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-right: 2px;
}

.form-dot:last-child {
    margin-right: 0;
}

.form-zero {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

.form-try {
    background: hsl(142 55% 45% / 0.18);
    color: hsl(142 60% 22%);
}

.form-multi {
    background: hsl(142 55% 45% / 0.32);
    color: hsl(142 60% 18%);
}

html.dark .form-try {
    background: hsl(142 55% 45% / 0.25);
    color: hsl(142 60% 68%);
}

html.dark .form-multi {
    background: hsl(142 55% 45% / 0.4);
    color: hsl(142 60% 72%);
}

.form-empty {
    color: hsl(var(--muted-foreground));
}

.res-badge {
    font-size: 0.65rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--muted));
    border-radius: 3px;
    padding: 1px 4px;
    margin-left: 4px;
    letter-spacing: 0.03em;
    vertical-align: middle;
    white-space: nowrap;
}

.tryscorers-table .tryscorer-avg {
    font-size: 0.8rem;
    color: hsl(var(--muted-foreground));
}

.tryscorers-table .tryscorer-pct {
    font-size: 0.8rem;
    color: hsl(var(--muted-foreground));
}

.tryscorers-table .tryscorer-probability {
    font-size: 0.9rem;
    font-weight: 700;
    color: hsl(var(--foreground));
}

@media (max-width: 600px) {
    .tryscorers-table {
        font-size: 0.7rem;
    }

    .tryscorers-table td,
    .tryscorers-table th {
        padding: 0.35rem 0.2rem;
    }

    .tryscorers-table thead th {
        font-size: 0.65rem;
    }

    .tryscorer-pos-col,
    .tryscorer-avg-col,
    .tryscorer-pos-pct-col,
    .tryscorer-opp-col {
        display: none;
    }

    .tryscorers-table .player-first {
        display: none;
    }
}

/* ── Edge rankings ─────────────────────────────────────────────────────────── */

.edge-rankings-wrapper {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid hsl(var(--border));
}

.edge-rankings {
    display: flex;
    gap: 1rem;
    max-width: 680px;
    margin: 0 auto;
}

.edge-block {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr 1fr 1fr;
    grid-template-rows: auto auto auto auto auto auto;
    column-gap: 0.25rem;
    row-gap: 0.15rem;
    align-items: center;
}

.edge-lbl {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: hsl(var(--muted-foreground));
    display: flex;
    justify-content: center;
}

.edge-lbl-top {
    padding-bottom: 0.15rem;
}

.edge-lbl-bot {
    padding-top: 0.15rem;
}

.edge-team {
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--foreground));
    white-space: nowrap;
    padding-right: 0.4rem;
}

.edge-role {
    font-size: 0.65rem;
    font-weight: 400;
    color: hsl(var(--muted-foreground));
}

.edge-rank {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18em 0.3em;
    border-radius: 4px;
    text-align: center;
}

.edge-form-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
}

.edge-form-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    height: 1.2em;
    border-radius: 3px;
    font-size: 0.62rem;
    font-weight: 700;
}

.edge-form-group.rank-good .edge-form-dot {
    background: hsl(142 55% 45% / 0.18);
    color: hsl(142 60% 22%);
}

.edge-form-group.rank-mid .edge-form-dot {
    background: hsl(25 100% 50% / 0.15);
    color: hsl(25 90% 30%);
}

.edge-form-group.rank-poor .edge-form-dot {
    background: hsl(0 70% 50% / 0.15);
    color: hsl(0 65% 32%);
}

html.dark .edge-form-group.rank-good .edge-form-dot {
    background: hsl(142 55% 45% / 0.25);
    color: hsl(142 60% 68%);
}

html.dark .edge-form-group.rank-mid .edge-form-dot {
    background: hsl(25 100% 50% / 0.22);
    color: hsl(25 100% 65%);
}

html.dark .edge-form-group.rank-poor .edge-form-dot {
    background: hsl(0 70% 50% / 0.22);
    color: hsl(0 70% 68%);
}

/* Attack matchup column */
.tryscorers-table .tryscorer-attack {
    white-space: nowrap;
}

.atk-matchup {
    display: inline-flex;
    align-items: center;
    gap: 0.15rem;
}

.atk-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.12em 0.3em;
    border-radius: 3px;
}

.atk-sep {
    font-size: 0.7rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
}

/* Light mode rank colours */
.edge-rank.rank-good,
.atk-badge.rank-good {
    background: hsl(142 55% 45% / 0.18);
    color: hsl(142 60% 22%);
}

.edge-rank.rank-mid,
.atk-badge.rank-mid {
    background: hsl(25 100% 50% / 0.15);
    color: hsl(25 90% 30%);
}

.edge-rank.rank-poor,
.atk-badge.rank-poor {
    background: hsl(0 70% 50% / 0.15);
    color: hsl(0 65% 32%);
}

/* Dark mode rank colours */
html.dark .edge-rank.rank-good,
html.dark .atk-badge.rank-good {
    background: hsl(142 55% 45% / 0.25);
    color: hsl(142 60% 68%);
}

html.dark .edge-rank.rank-mid,
html.dark .atk-badge.rank-mid {
    background: hsl(25 100% 50% / 0.22);
    color: hsl(25 100% 65%);
}

html.dark .edge-rank.rank-poor,
html.dark .atk-badge.rank-poor {
    background: hsl(0 70% 50% / 0.22);
    color: hsl(0 70% 68%);
}

@media (max-width: 600px) {
    .edge-rankings {
        flex-direction: column;
        gap: 0.75rem;
    }

    .edge-block + .edge-block {
        border-top: 1px solid hsl(var(--border));
        padding-top: 0.75rem;
    }

    .edge-lbl {
        font-size: 0.6rem;
    }

    .edge-rank {
        font-size: 0.65rem;
        padding: 0.15em 0.2em;
    }

    .edge-form-dot {
        font-size: 0.57rem;
        width: 1.15em;
        height: 1.15em;
    }
}

/* ── Score Prediction block ───────────────────────────────────────────────── */
/* wrapper is full-width and owns the bottom border + spacing */
.score-pred-wrapper {
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid hsl(var(--border));
}

/* grid is capped and centred inside the wrapper */
.score-pred {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto 1fr auto auto auto;
    grid-template-rows: auto auto auto;
    align-items: center;
    text-align: center;
    column-gap: 0.35rem;
    row-gap: 0.25rem;
    max-width: 580px;
    margin: 0 auto;
}

.score-pred .pred-total {
    grid-column: 1 / -1;
    font-size: 0.65rem;
    color: hsl(var(--muted-foreground));
    padding-top: 0.1rem;
}

.pred-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.18em 0.4em;
    border-radius: 4px;
    white-space: nowrap;
}

.pred-badge.pred-rank1 {
    background: hsl(142 60% 45% / 0.15);
    color: hsl(142 55% 35%);
}

.pred-badge.pred-rank23 {
    background: hsl(32 90% 42% / 0.15);
    color: hsl(32 90% 42%);
}

.pred-badge.pred-rank4 {
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

.pred-pct {
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.pred-pct.pred-rank1 {
    font-size: 0.78rem;
    color: hsl(142 55% 35%);
}

.pred-pct.pred-rank23 {
    color: hsl(32 90% 42%);
}

.pred-pct.pred-rank4 {
    color: hsl(var(--muted-foreground));
}

.pred-team {
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--foreground));
}

.pred-sep-cell {
    font-size: 0.8rem;
    font-weight: 300;
    color: hsl(var(--muted-foreground));
}

.pred-range {
    font-size: 0.82rem;
    font-weight: 700;
    color: hsl(var(--foreground));
}

html.dark .pred-badge.pred-rank1 {
    background: hsl(142 50% 45% / 0.20);
    color: hsl(142 60% 60%);
}

html.dark .pred-badge.pred-rank23 {
    background: hsl(32 80% 42% / 0.20);
    color: hsl(32 90% 62%);
}

html.dark .pred-pct.pred-rank1 {
    color: hsl(142 60% 60%);
}

html.dark .pred-pct.pred-rank23 {
    color: hsl(32 90% 62%);
}

/* Active state for match buttons */
.match-btn.outline.active {
    background: hsl(var(--foreground));
    color: hsl(var(--background));
    border-color: hsl(var(--foreground));
}

/* Casualty Ward / Fantasy Section */
.casualty-ward-section,
.fantasy-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

.casualty-table {
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 0 auto;
}

.casualty-table thead th {
    padding: 0.5rem 0.5rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    border-bottom: 1px solid hsl(var(--border));
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.casualty-table tbody tr {
    border-bottom: 1px solid hsl(var(--border));
}

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

.casualty-table td {
    padding: 0.5rem 0.5rem;
    vertical-align: middle;
    white-space: nowrap;
}

.casualty-table .casualty-name {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.casualty-table .casualty-name .player-last {
    font-weight: 600;
}

.casualty-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

.casualty-table .casualty-injury {
    font-size: 0.8rem;
    color: hsl(var(--muted-foreground));
}

.casualty-table .casualty-return {
    font-size: 0.8rem;
    color: hsl(var(--muted-foreground));
}

@media (max-width: 600px) {
    .casualty-table {
        font-size: 0.7rem;
    }

    .casualty-table td,
    .casualty-table th {
        padding: 0.35rem 0.2rem;
    }

    .casualty-table thead th {
        font-size: 0.65rem;
    }
}

/* Team Changes (INS / OUTS) */
.team-changes {
    max-width: 680px;
    margin: 0 auto 0;
    font-size: 0.85rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid hsl(var(--border));
    margin-bottom: 1rem;
}

.changes-row {
    display: grid;
    grid-template-columns: 1fr 3.5rem 1fr;
    gap: 0.5rem 0.75rem;
    padding: 0.65rem 0.5rem;
    border-bottom: 1px solid hsl(var(--border));
    align-items: start;
}

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

.changes-players {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.changes-home {
    text-align: right;
    align-items: flex-end;
}

.changes-away {
    text-align: left;
    align-items: flex-start;
}

.changes-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-align: center;
    padding-top: 0.1rem;
    white-space: nowrap;
}

.changes-label-ins {
    color: hsl(142 71% 45%);
}

.changes-label-outs {
    color: hsl(var(--muted-foreground));
}

.changes-player .player-last {
    font-weight: 600;
}

@media (max-width: 600px) {
    .team-changes {
        font-size: 0.78rem;
    }
    .changes-row {
        grid-template-columns: 1fr 2.8rem 1fr;
        padding: 0.5rem 0.2rem;
    }
    .changes-label {
        font-size: 0.62rem;
    }
}

/* Milestones Section */
.milestones-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}

.milestone-item {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem 0.3rem;
    padding: 0.45rem 0.5rem;
    font-size: 0.85rem;
    border-bottom: 1px solid hsl(var(--border));
}

.milestone-item:last-child {
    border-bottom: none;
}

.milestone-player {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 600;
}

.milestone-sep {
    font-weight: 400;
    color: hsl(var(--muted-foreground));
}

.milestone-suffix {
    color: hsl(var(--muted-foreground));
}

.milestones-note {
    margin: 0.6rem 0 0;
    font-size: 0.72rem;
    font-style: italic;
    color: hsl(var(--muted-foreground));
}

/* H2H Section */
.h2h-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

.h2h-quick-view {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.h2h-quick-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.h2h-quick-draw {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--muted));
    border-radius: 50%;
}

.h2h-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.h2h-quick-year {
    font-size: 0.65rem;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

.h2h-table {
    border-collapse: collapse;
    font-size: 0.85rem;
    margin: 0 auto;
}

.h2h-table thead th {
    padding: 0.4rem 0.75rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    border-bottom: 1px solid hsl(var(--border));
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.h2h-table thead th:nth-child(1) { text-align: left; }
.h2h-table thead th:nth-child(2) { text-align: right; }
.h2h-table thead th:nth-child(3) { text-align: center; }
.h2h-table thead th:nth-child(4) { text-align: left; }

.h2h-table tbody tr {
    border-bottom: 1px solid hsl(var(--border));
}

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

.h2h-table td {
    padding: 0.4rem 0.75rem;
    vertical-align: middle;
    white-space: nowrap;
}

.h2h-table .h2h-date {
    font-size: 0.8rem;
    color: hsl(var(--muted-foreground));
}

.h2h-table .h2h-home {
    font-size: 0.85rem;
    text-align: right;
    font-weight: 500;
}

.h2h-table .h2h-score {
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
}

.h2h-table .h2h-away {
    font-size: 0.85rem;
    text-align: left;
    font-weight: 500;
}

.h2h-table .h2h-loser {
    color: hsl(var(--muted-foreground));
    font-weight: 400;
}

.h2h-table .h2h-winner {
    font-weight: 700;
}

/* H2H Rating Section (under table) */
.h2h-rating-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

.h2h-rating-section .h2h-legend {
    margin-bottom: 0.5rem;
}

.h2h-rating-section .h2h-chart {
    min-width: 280px;
}

/* H2H Charts */
.h2h-charts {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

.h2h-legend {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.h2h-legend-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.h2h-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.h2h-legend-team1 {
    background-color: hsl(var(--primary));
}

.h2h-legend-team2 {
    background-color: hsl(var(--muted-foreground));
}

.h2h-charts-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

.h2h-chart {
    flex: 0 1 auto;
}

.h2h-chart-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0.25rem;
    color: hsl(var(--foreground));
}

.h2h-chart-svg {
    width: 280px;
    height: 120px;
    display: block;
}

.h2h-axis {
    stroke: hsl(var(--border));
    stroke-width: 1;
}

.h2h-grid {
    stroke: hsl(var(--border));
    stroke-width: 0.5;
    stroke-dasharray: 2, 2;
}

.h2h-line {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.h2h-line-team1 {
    stroke: hsl(var(--primary));
}

.h2h-line-team2 {
    stroke: hsl(var(--muted-foreground));
}

.h2h-point {
    stroke-width: 0;
}

.h2h-point-team1 {
    fill: hsl(var(--primary));
}

.h2h-point-team2 {
    fill: hsl(var(--muted-foreground));
}

.h2h-label {
    font-size: 9px;
    fill: hsl(var(--muted-foreground));
}

.h2h-label-y {
    text-anchor: end;
}

.h2h-label-x {
    text-anchor: middle;
}

@media (max-width: 600px) {
    .h2h-table {
        font-size: 0.7rem;
    }

    .h2h-table td,
    .h2h-table th {
        padding: 0.35rem 0.2rem;
    }

    .h2h-table thead th {
        font-size: 0.65rem;
    }

    .h2h-chart-svg {
        width: 240px;
        height: 100px;
    }

    .h2h-chart-title {
        font-size: 0.7rem;
    }

    .h2h-legend {
        gap: 1rem;
    }

    .h2h-legend-item {
        font-size: 0.7rem;
    }
}

/* Stats Section */
.stats-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

.stats-headlines {
    max-width: 500px;
    margin: 0 auto 3rem;
}

.stats-block {
    margin-bottom: 3rem;
}

.stats-block-title {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: hsl(var(--foreground));
    margin-bottom: 6px;
    padding: 0 2px;
    text-align: center;
}

.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.stats-result {
    font-weight: 700;
    font-size: 0.8rem;
    text-align: center;
}

.stats-result-w { color: #22c55e; }
.stats-result-l { color: #ef4444; }

.stats-venue-cell {
    color: hsl(var(--muted-foreground));
    font-size: 0.78rem;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .stats-venue-cell {
        max-width: 80px;
    }
}

#finished-more-container {
    transition: opacity 0.3s ease;
}

#finished-more-button {
    min-width: 120px;
}

/* League Filter Bar Styles */
/* Main Tab Bar: league/team filters (left) + results tabs (right) */
#main-tab-bar-container {
    position: fixed;
    top: 51px;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: hsl(var(--background));
}

/* Add spacing when the tab bar is visible */
body.filter-bar-visible .container {
    padding-top: calc(51px + 2.65rem);
}

.main-tab-bar {
    display: flex;
    align-items: stretch;
    margin: 0 auto;
    padding: 0 1rem;
    border-bottom: 1px solid hsl(var(--border));
}

.main-tab-group {
    display: flex;
    align-items: stretch;
}

/* Left group: followed leagues + teams, horizontally scrollable */
.main-tab-filters {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.main-tab-filters::-webkit-scrollbar {
    display: none;
}

/* Right group: results tabs, pinned to the right */
.main-tab-results {
    flex: 0 0 auto;
    padding-left: 0.6rem;
    margin-left: 0.4rem;
    background-color: hsl(var(--background));
}

.main-tab {
    flex-shrink: 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.5rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: color 0.15s ease;
}

.main-tab:hover {
    color: hsl(var(--foreground));
}

.main-tab.active {
    color: hsl(var(--foreground));
    border-bottom-color: hsl(var(--foreground));
}

/* Team filter tabs: keep room for the live dot */
.main-tab-team {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* Team pills with live matches - keep same border, just show dot */
.team-pill-live-dot {
    width: 6px;
    height: 6px;
    background-color: var(--live-color);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
    flex-shrink: 0;
}

.divider {
    margin: 1rem 0;
    border: 0;
    border-top: 1px solid var(--line-color);
}

.hero {
    font-size: 1rem;
    text-align: center;
    margin-bottom: 2rem;
}

.hero p {
    margin: 0.5rem 0;
}

.date-separator {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--secondary-text-color);
    margin: 2rem 0;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    font-weight: 600;
}

.options-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 0;
}

/* Setup Pages */
.setup-page {
    width: 100%;
}

.setup-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    padding: 2rem;
    max-width: 680px;
    margin: 2rem auto;
}

.setup-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0 0 1.5rem 0;
    color: hsl(var(--foreground));
}

/* Suggested sections */
.suggested-section {
    margin-bottom: 1rem;
}

.suggested-label {
    font-size: 0.9rem;
    color: hsl(var(--muted-foreground));
    display: block;
    margin-bottom: 0.5rem;
}

.suggested-items {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Expandable sections */
.expandable-section {
    margin-bottom: 0;
}

.expandable-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.75rem 0;
    font-size: 1rem;
    font-weight: 500;
    color: hsl(var(--foreground));
    cursor: pointer;
    text-align: left;
}

.expandable-header:hover {
    opacity: 0.8;
}

.expandable-icon {
    transition: transform 0.2s ease;
}

.expandable-header.expanded .expandable-icon {
    transform: rotate(180deg);
}

.expandable-content {
    padding-top: 1rem;
}

.setup-intro {
    margin-bottom: 0;
}

.setup-intro p {
    margin: 0;
    color: hsl(var(--muted-foreground));
    font-size: 0.95rem;
    line-height: 1.6;
}

.setup-divider {
    height: 1px;
    background-color: hsl(var(--border));
    margin: 1.5rem 0;
}

.setup-card .options-container {
    grid-template-columns: 1fr;
    gap: 1rem;
}

.setup-card .field {
    margin-bottom: 0;
}

.save-btn-row {
    display: flex;
    justify-content: center;
}

#sport-options-page .date-separator:first-child {
    margin-top: 0;
}

.support {
    text-align: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.live {
    color: #ea3e23;
}

.today {
    color: #6bc5a2;
}

.date-separator::before,
.date-separator::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--line-color);
}
.date-separator:not(:empty)::before {
    margin-right: 1em;
}
.date-separator:not(:empty)::after {
    margin-left: 1em;
}

/* First separator at the top of a list: show only the text, no divider lines */
.date-separator.bare::before,
.date-separator.bare::after {
    border-bottom: none;
}

/* Live Match Card Styles */
.live-match-card {
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    transition: all 0.2s ease;
}

.live-match-card:hover {
    border-color: var(--live-color);
    box-shadow: 0 4px 12px rgba(234, 62, 35, 0.15);
}

.live-match-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid hsl(var(--border));
}

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--live-color);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.live-dot {
    width: 8px;
    height: 8px;
    background-color: var(--live-color);
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

.live-score-container {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.live-team-name {
    font-size: 1.25rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.live-team-left {
    text-align: right;
    justify-content: flex-end;
    flex-direction: row;
}

.live-team-right {
    text-align: left;
    justify-content: flex-start;
    flex-direction: row;
}

.live-team-logo {
    width: 28px;
    height: 28px;
    object-fit: contain;
    flex-shrink: 0;
}

.live-score-display {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.live-score {
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
}

.live-time {
    color: var(--live-color);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Live Stats Visualization */
.live-stats-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
}

.stat-row {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.875rem;
}

.stat-label {
    color: hsl(var(--muted-foreground));
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
}

.stat-values {
    display: flex;
    gap: 1rem;
}

.stat-value-home,
.stat-value-away {
    font-weight: 700;
    font-size: 0.875rem;
}

.stat-value-home {
    color: #3b82f6;
}

.stat-value-away {
    color: #f59e0b;
}

.dark .stat-value-home {
    color: #60a5fa;
}

.dark .stat-value-away {
    color: #fbbf24;
}

.stat-comparison-bar {
    display: flex;
    height: 6px;
    background-color: hsl(var(--muted));
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}

.stat-bar-home,
.stat-bar-away {
    height: 100%;
    transition: width 0.6s ease;
}

.stat-bar-home {
    background: linear-gradient(90deg, #3b82f6, #60a5fa);
}

.stat-bar-away {
    background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.dark .stat-bar-home {
    background: linear-gradient(90deg, #2563eb, #3b82f6);
}

.dark .stat-bar-away {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

/* Light theme bar colors */
.probability-fill.home {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.probability-fill.away {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

.confidence-fill.high {
    background: linear-gradient(90deg, #ca8a04, #eab308);
}

.confidence-fill.medium {
    background: linear-gradient(90deg, #ea580c, #f97316);
}

.confidence-fill.low {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.confidence-value.high {
    color: #ca8a04;
}

.confidence-value.medium {
    color: #ea580c;
}

.stat-bar-home {
    background: linear-gradient(90deg, #dc2626, #ef4444);
}

.stat-bar-away {
    background: linear-gradient(90deg, #d97706, #f59e0b);
}

.stat-value-home {
    color: #dc2626;
}

/* THIS WEEK prediction row */
.week-row {
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.week-icons {
    display: flex;
    gap: 0.15rem;
    flex-wrap: wrap;
    align-items: center;
}
.week-empty {
    padding: 0.75rem 1rem;
    font-size: 0.85rem;
    color: hsl(var(--muted-foreground));
}

/* Finished matches compact card */
.finished-matches-card {
    border-radius: 0.75rem;
    overflow: hidden;
}

.finished-match-row {
    padding: 0.75rem 1rem;
}

.finished-match-row.expandable {
    cursor: pointer;
}

.finished-match-divider {
    height: 1px;
    background-color: hsl(var(--border));
    margin: 0;
}

.finished-show-more-wrap {
    display: flex;
    justify-content: center;
    padding: 0.6rem 1rem;
}

.finished-show-more-wrap .finished-show-more-btn {
    font-size: 0.8rem;
    padding: 0.3rem 1rem;
    margin: 0;
    width: fit-content;
}

.upcoming-show-more-wrap {
    display: flex;
    justify-content: center;
    padding: 1rem;
}

.upcoming-show-more-wrap .upcoming-show-more-btn {
    font-size: 0.8rem;
    padding: 0.3rem 1rem;
    margin: 0;
    width: fit-content;
}

.finished-match-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.finished-match-center {
    flex: 1;
    display: flex;
    align-items: center;
}

.finished-home-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.finished-away-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
}

.finished-prediction-col {
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.finished-team-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex-shrink: 0;
}

.finished-league-label {
    font-size: 0.85rem;
    font-weight: 400;
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 3.5rem;
    flex-shrink: 0;
}

.finished-team-name {
    font-size: 0.85rem;
    font-weight: 500;
    white-space: nowrap;
}

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

.finished-team-name.finished-winner {
    font-weight: 700;
}

.finished-team-name.finished-loser {
    opacity: 0.6;
}

.finished-score {
    font-size: 1rem;
    font-weight: 600;
    min-width: 1.25rem;
    text-align: center;
}

.finished-score.finished-winner {
    font-weight: 700;
}

.finished-score.finished-loser {
    opacity: 0.6;
}

.finished-prediction-correct,
.finished-prediction-wrong,
.finished-prediction-unsure {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    margin: 0 0.15rem;
}

.finished-prediction-correct {
    background-color: #22c55e;
}

.finished-prediction-wrong {
    background-color: #ef4444;
}

.finished-prediction-unsure {
    background-color: #6b7280;
}

.finished-prediction-correct svg,
.finished-prediction-wrong svg,
.finished-prediction-unsure svg {
    width: 11px;
    height: 11px;
}

/* TIPS tab: logo + optional result icon stacked */
.week-tip-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    flex-shrink: 0;
    margin: 0 0.1rem;
    position: relative;
}

/* Small "D" badge for draw predictions in the tips tab */
.week-draw-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #6b7280;
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* Slight dimming for draw-predicted logos (no clear favourite) */
.week-tip-draw .week-team-logo,
.week-tip-draw .flag-emoji-logo {
    opacity: 0.7;
}

.week-team-logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* Larger prediction icon in today's score display (non-mobile only) */
@media (min-width: 601px) {
    .match-score-center .finished-prediction-correct,
    .match-score-center .finished-prediction-wrong,
    .match-score-center .finished-prediction-unsure {
        width: 27px;
        height: 27px;
        border-radius: 50%;
    }

    .match-score-center .finished-prediction-correct svg,
    .match-score-center .finished-prediction-wrong svg,
    .match-score-center .finished-prediction-unsure svg {
        width: 17px;
        height: 17px;
    }
}

.finished-expand-icon {
    flex-shrink: 0;
    color: hsl(var(--muted-foreground));
    transition: transform 0.2s ease;
    margin-left: auto;
}

.finished-expand-icon.expanded {
    transform: rotate(180deg);
}

.finished-match-details {
    padding-top: 0.75rem;
    margin-top: 0.5rem;
    border-top: 1px solid hsl(var(--border) / 0.5);
}

.finished-match-details .match-buttons {
    justify-content: center;
    padding-top: 0;
    border-top: none;
    margin-top: 0;
}

/* Legacy styles for backward compatibility */
.live-match-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    text-align: center;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: hsl(var(--card));
}

.team-name {
    font-size: 1.25rem;
    font-weight: 600;
}

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

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

.score-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.score {
    font-size: 2rem;
    font-weight: 700;
}

.time-status {
    color: var(--secondary-text-color);
    font-size: 0.875rem;
}

/* RTL-specific overrides */
html[dir="rtl"] .team-left {
    text-align: right;
}
html[dir="rtl"] .team-right {
    text-align: left;
}
html[dir="rtl"] .options-container,
html[dir="rtl"] .sport-columns-container {
    text-align: right;
}

.sport-columns-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
}

.sport-column h4 {
    margin-bottom: 1rem;
    font-weight: 600;
    font-size: 1.125rem;
}

.sport-column label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
}

.button-container {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 4rem;
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.btn {
    background-color: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border: none;
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.btn:hover {
    opacity: 0.9;
}

.btn:active {
    opacity: 0.8;
}

.btn-outline {
    background-color: transparent;
    color: hsl(var(--foreground));
    border: 1px solid hsl(var(--border));
    padding: 0.75rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-outline:hover {
    background-color: hsl(var(--accent));
}

/* Team Selection Styles */
.team-selection-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.team-input-section,
.team-list-section {
    display: flex;
    flex-direction: column;
}

.team-input-section h4,
.team-list-section h4 {
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.team-autocomplete-wrapper {
    position: relative;
}

#team-search-input {
    width: 100%;
}

.team-autocomplete-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-top: none;
    border-radius: 0 0 8px 8px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}

.team-autocomplete-list.show {
    display: block;
}

.team-autocomplete-item {
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid hsl(var(--border));
    transition: background-color 0.2s ease;
}

.team-autocomplete-item:last-child {
    border-bottom: none;
}

.team-autocomplete-item:hover {
    background-color: hsl(var(--accent));
}

.team-autocomplete-item .league-name {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
    margin-right: 0.5rem;
}

.team-autocomplete-item .team-name {
    font-size: 0.875rem;
    font-weight: 500;
}

/* Combobox for Country and Timezone */
.combobox-wrapper {
    position: relative;
}

.combobox-wrapper input {
    width: 100%;
}

.combobox-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    max-height: 250px;
    overflow-y: auto;
    z-index: 100;
    display: none;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

.combobox-list.show {
    display: block;
}

.combobox-item {
    padding: 0.75rem;
    cursor: pointer;
    border-bottom: 1px solid hsl(var(--border));
    transition: background-color 0.15s ease;
    font-size: 0.875rem;
}

.combobox-item:last-child {
    border-bottom: none;
}

.combobox-item:hover,
.combobox-item.highlighted {
    background-color: hsl(var(--accent));
}

.combobox-item.selected {
    background-color: hsl(var(--primary) / 0.1);
    font-weight: 500;
}

.selected-teams-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 100px;
}

.selected-team-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    background-color: hsl(var(--muted));
    border-radius: 8px;
    gap: 0.5rem;
}

.selected-team-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

.selected-team-info .league-name {
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

.selected-team-info .team-name {
    font-size: 0.875rem;
    font-weight: 500;
}

.remove-team-btn {
    background: none;
    border: none;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s ease;
}

.remove-team-btn:hover {
    color: hsl(var(--destructive));
}

@media (max-width: 768px) {
    .team-selection-container {
        grid-template-columns: 1fr;
    }
}

#settings-button {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0.5rem;
    color: hsl(var(--foreground));
    display: flex;
    align-items: center;
}

#settings-button svg {
    width: 20px;
    height: 20px;
}

#settings-button:hover {
    opacity: 0.8;
}

/* Welcome Card */
/* Welcome screen — hide chrome and match content for first-time visitors */
body.welcome-mode #main-tab-bar-container,
body.welcome-mode .nav-center,
body.welcome-mode #mobile-search-btn,
body.welcome-mode #settings-button,
body.welcome-mode #feedback-container,
body.welcome-mode #results-section,
body.welcome-mode #live-matches-container,
body.welcome-mode #today-matches-container,
body.welcome-mode #upcoming-matches-container,
body.welcome-mode #no-matches-container {
    display: none !important;
}

body.welcome-mode nav.top-nav {
    justify-content: flex-end;
}

body.welcome-mode nav.top-nav .nav-left {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

body.welcome-mode main.container {
    padding-top: calc(51px + 1rem);
}

#welcome-card {
    margin: 0 0 1rem;
}

#welcome-card,
#welcome-faq {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

#welcome-faq {
    margin-bottom: 1.5rem;
}

.welcome-info-card {
    border: 1px solid var(--line-color);
    border-radius: 12px;
    overflow: hidden;
}

.welcome-info-section {
    padding: 1.1rem 1.25rem;
}

.welcome-info-heading {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0 0 0.4rem;
    color: hsl(var(--foreground));
}

.welcome-info-body {
    font-size: 0.875rem;
    line-height: 1.65;
    color: hsl(var(--muted-foreground));
    margin: 0;
}

.welcome-info-divider {
    height: 1px;
    background: var(--line-color);
}

.welcome-card-inner {
    background-color: transparent;
    border: 1px solid var(--line-color);
    border-radius: 16px;
    overflow: hidden;
    padding: 2rem 1.75rem;
}

.welcome-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
}

.welcome-tagline {
    color: hsl(var(--foreground));
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
}

.welcome-subtitle {
    color: hsl(var(--muted-foreground));
    font-size: 0.9rem;
    margin: -0.25rem 0 0;
}

.welcome-leagues {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
}

.welcome-league-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.8rem;
    border-radius: 10px;
    border: 1px solid hsl(var(--border));
    background: transparent;
    color: hsl(var(--foreground));
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease;
    user-select: none;
    line-height: 1;
}

.welcome-league-chip.selected {
    background: transparent;
    border-color: #22c55e;
}

.welcome-league-chip .chip-check {
    width: 13px;
    height: 13px;
    border: 1.5px solid hsl(var(--border));
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.welcome-league-chip.selected .chip-check {
    background: #22c55e;
    border-color: #22c55e;
}

.welcome-league-chip.selected .chip-check::after {
    content: '';
    display: block;
    width: 7px;
    height: 4px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.welcome-league-chip.has-logo {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
    min-width: 64px;
}

.chip-logo {
    width: 30px;
    height: 30px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.chip-logo-placeholder {
    width: 30px;
    height: 30px;
    border-radius: 6px;
    background: hsl(var(--muted));
    flex-shrink: 0;
}

.chip-bottom {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

/* Sport option chips (in the Leagues expandable section) */
.sport-chip-section {
    margin-bottom: 1.5rem;
}

.sport-chip-section:last-child {
    margin-bottom: 0;
}

.sport-chip-heading {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: hsl(var(--muted-foreground));
    margin: 0 0 0.5rem 0;
}

.sport-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.sport-option-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 0.8rem;
    border-radius: 10px;
    border: 1px solid hsl(var(--border));
    background: transparent;
    color: hsl(var(--foreground));
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease;
    user-select: none;
    line-height: 1;
    flex: 0 0 auto;
}

.sport-option-chip.selected {
    background: transparent;
    border-color: #22c55e;
}

.sport-option-chip:hover {
    opacity: 0.85;
}

.sport-chip-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}

.sport-chip-logo-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: hsl(var(--muted));
    flex-shrink: 0;
}

.sport-chip-bottom {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.sport-chip-label {
    white-space: nowrap;
}

.sport-chip-check {
    width: 13px;
    height: 13px;
    border: 1.5px solid hsl(var(--border));
    border-radius: 3px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.sport-option-chip.selected .sport-chip-check {
    background: #22c55e;
    border-color: #22c55e;
}

.sport-option-chip.selected .sport-chip-check::after {
    content: '';
    display: block;
    width: 7px;
    height: 4px;
    border-left: 1.5px solid #fff;
    border-bottom: 1.5px solid #fff;
    transform: rotate(-45deg) translateY(-1px);
}

.welcome-cta-row {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.welcome-cta {
    align-self: center;
    background-color: hsl(var(--primary));
    border: none;
    color: hsl(var(--primary-foreground));
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.welcome-cta.welcome-cta-outline {
    background-color: transparent;
    border: 1px solid hsl(var(--border));
    color: hsl(var(--foreground));
}

.welcome-cta:hover {
    opacity: 0.9;
}

@media (max-width: 500px) {
    .welcome-card-inner {
        padding: 1.5rem 1.25rem;
    }

    .welcome-cta {
        white-space: normal;
    }
}

#feedback-container {
    text-align: center;
    padding: 2rem 0 1rem;
}

#setup-section {
    padding-bottom: 2rem;
}

.sports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0 3rem;
}

.sport-category {
    background: hsl(var(--muted));
    border-radius: 8px;
    padding: 1.5rem;
}

.sport-category-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: hsl(var(--foreground));
    display: flex;
    align-items: center;
}

.sport-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sport-list li {
    padding: 0.5rem 0;
    color: hsl(var(--muted-foreground));
    font-size: 0.9rem;
    border-bottom: 1px solid hsl(var(--border));
}

.sport-list li:last-child {
    border-bottom: none;
}

.contact-section {
    padding: 2rem 0 3rem;
}

/* Empty State Card */
.empty-state-card {
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border));
    border-radius: 12px;
    padding: 3rem 2rem;
    text-align: center;
    max-width: 600px;
    margin: 2rem auto;
}

.empty-state-icon {
    font-size: 4rem;
    margin-bottom: 1.5rem;
    opacity: 0.8;
}

.empty-state-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: hsl(var(--foreground));
}

.empty-state-message {
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 0.75rem;
    line-height: 1.6;
}

.empty-state-hint {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    opacity: 0.8;
    margin: 0;
}

@media (max-width: 768px) {
    .sports-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

.logo-text {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-family: 'Jersey10', monospace;
    font-weight: normal;
    font-size: 1.6rem;
    color: hsl(var(--foreground));
    text-decoration: none;
    letter-spacing: 0.02em;
    line-height: 1;
}

.logo-hash {
    color: #2C67F6;
}

.logo-text:hover {
    opacity: 0.9;
}

/* Logo # animations */
@keyframes logoGlitch {
    0%   { transform: translateX(0);    color: #2C67F6; }
    17%  { transform: translateX(-5px); color: #00ff7a; }
    33%  { transform: translateX(4px);  color: #ff2d78; }
    50%  { transform: translateX(-2px); color: #00ff7a; }
    67%  { transform: translateX(4px);  color: #ff2d78; }
    83%  { transform: translateX(-1px); color: #2C67F6; }
    100% { transform: translateX(0);    color: #2C67F6; }
}

@keyframes logoHeartbeat {
    0%   { transform: scale(1);    opacity: 1;    color: #2C67F6; }
    14%  { transform: scale(0.76); opacity: 0.48; color: #2C67F6; }
    32%  { transform: scale(1.4);  opacity: 1;    color: #7aaeff; }
    50%  { transform: scale(0.91); opacity: 0.82; color: #2C67F6; }
    66%  { transform: scale(1.11); opacity: 1;    color: #2C67F6; }
    82%  { transform: scale(0.98); opacity: 0.96; }
    100% { transform: scale(1);    opacity: 1;    color: #2C67F6; }
}

.hash-combo {
    display: inline-block;
}

/* Light mode: solid save buttons use brand brown */
html:not(.dark) .btn:not(.btn-outline),
html:not(.dark) .welcome-cta:not(.welcome-cta-outline) {
    background-color: #372925;
    color: #fff;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.field label {
    font-weight: 500;
    font-size: 0.875rem;
}

.radio-group {
    display: flex;
    gap: 1rem;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

/* Custom radio button styling (BasecoatUI doesn't include this) */
input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    border: 2px solid hsl(var(--border));
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;
    margin: 0;
}

input[type="radio"]:checked {
    border-color: hsl(var(--primary));
    background-color: transparent;
}

input[type="radio"]:checked::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background-color: hsl(var(--primary));
    transform: translate(-50%, -50%);
}

input[type="radio"]:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
}

input[type="search"] {
    width: 100%;
}

@media (max-width: 768px) {
    /* Hide search input, show search icon button */
    nav.top-nav .nav-center {
        display: none;
    }

    #mobile-search-btn {
        display: flex;
    }

    nav.top-nav .nav-left {
        margin-right: 0;
    }

    /* Mobile search active state: expand input, hide icon buttons */
    nav.top-nav.mobile-search-active .nav-center {
        display: flex;
        flex: 1;
        max-width: none;
        margin: 0 0.5rem;
    }

    nav.top-nav.mobile-search-active #mobile-search-btn,
    nav.top-nav.mobile-search-active #settings-button,
    nav.top-nav.mobile-search-active #language-button {
        display: none;
    }

    /* Pin autocomplete to viewport below the nav so it's never clipped */
    .nav-autocomplete-list {
        position: fixed;
        top: 51px;
        left: 0;
        right: 0;
        border-radius: 0 0 8px 8px;
        max-height: 60vh;
        z-index: 200;
    }

    main.container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

@media (max-width: 480px) {
    .finished-match-row {
        padding: 0.5rem 0.5rem;
    }

    .finished-match-summary {
        gap: 0.35rem;
    }

    .finished-team-logo {
        width: 20px;
        height: 20px;
    }

    .finished-team-name {
        font-size: 0.75rem;
    }

    .finished-score {
        font-size: 0.85rem;
        min-width: 1rem;
    }

    .finished-prediction-correct,
    .finished-prediction-wrong,
    .finished-prediction-unsure {
        width: 16px;
        height: 16px;
    }

    .finished-prediction-correct svg,
    .finished-prediction-wrong svg,
    .finished-prediction-unsure svg {
        width: 10px;
        height: 10px;
    }

    .finished-expand-icon {
        width: 14px;
        height: 14px;
    }
}