/* ==========================================================================
   Soccer Predictions Hub — site-updates.css
   Supplementary stylesheet layered on top of site.css / general-pages.css.
   Kept separate (rather than hand-editing the minified files) so every
   change here stays readable, reviewable and easy to revert. Loaded last,
   so same-specificity rules here win by source order; !important is only
   used where noted.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Fix: elements toggled via the `hidden` attribute (lineup pitch/list
   switch, teams/leagues search filter) not actually disappearing. Several
   of those elements (.football-pitch, .lineup-list-grid, .team-directory-card,
   .league-directory-card) set an explicit `display` value in site.css, which
   has the same specificity as the browser's built-in `[hidden]{display:none}`
   rule and — being an author rule loaded after the user-agent stylesheet —
   wins the tie. The JS was setting `.hidden = true` correctly the whole time;
   nothing was ever rendering it. This one rule fixes both reported bugs.
   -------------------------------------------------------------------------- */
[hidden] {
    display: none !important;
}

.date-navigation [aria-disabled="true"] {
    opacity: .4;
    cursor: not-allowed;
}
.date-picker-button svg {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   1. Fix: match-preview tab panels rendering behind the sticky tab bar.
   Clicking a tab calls nav.scrollIntoView({block:'start'}) on a position:
   sticky element. Browsers compute that scroll target from the element's
   static offset, which overshoots against its own sticky "top" reservation,
   landing the very next panel almost exactly under the tab bar instead of
   below it. scroll-margin-top (read by scrollIntoView) closes that gap
   without touching the click handler. Value matches .detail-tabs' sticky
   top offset (90px) in site.css.
   -------------------------------------------------------------------------- */
.detail-tabs {
    scroll-margin-top: 90px;
}

/* --------------------------------------------------------------------------
   2. Breadcrumbs — was unstyled muted text with no visual hierarchy between
   links, separators and the current page. Restyled as a compact pill trail.
   -------------------------------------------------------------------------- */
.breadcrumbs {
    padding: 14px 0;
    gap: 4px;
    font-size: 0.82rem;
}
.breadcrumbs a {
    color: var(--muted);
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    transition: background-color .15s ease, color .15s ease;
}
.breadcrumbs a:hover {
    color: var(--yellow-2);
    background: color-mix(in srgb, var(--yellow) 12%, transparent);
}
.breadcrumbs span[aria-current="page"] {
    color: var(--text);
    font-weight: 800;
    padding: 5px 10px;
    max-width: 40vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.breadcrumbs > span:not([aria-current="page"]) {
    color: var(--muted);
    opacity: .55;
    font-size: .78rem;
}
.breadcrumbs a:first-child {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* --------------------------------------------------------------------------
   3. Reduce vertical sizing of match cards (fixtures / live scores / predictions)
   so more matches fit on screen without losing legibility.
   -------------------------------------------------------------------------- */
.fixture-time {
    padding: 10px 8px;
}
.fixture-teams {
    padding: 8px 12px;
    gap: 6px;
}
.fixture-team img {
    width: 26px;
    height: 26px;
}
.fixture-team {
    grid-template-columns: 26px minmax(0, 1fr) auto;
    gap: 8px;
}
.fixture-card-league {
    padding: 7px 12px;
    font-size: .78rem;
}
.fixture-card-league img {
    width: 18px;
    height: 18px;
}
.mini-tip {
    padding: 6px 12px;
    font-size: .76rem;
}
.favorite-button {
    padding: 6px 12px;
    font-size: 1.3rem;
    width: 68px;
    flex-shrink: 0;
    box-sizing: border-box;
    text-align: center;
}
.prediction-match-card .prediction-meta {
    padding: 10px 14px 0;
}
.prediction-match-card .prediction-teams {
    padding: 10px 14px;
}
.prediction-match-card .prediction-pick {
    padding: 10px 14px;
}

/* --------------------------------------------------------------------------
   4. Navbar icons — .primary-nav links are already flex with a gap, so the
   sport-icon component just needs consistent sizing/opacity once icons are
   added in the markup.
   -------------------------------------------------------------------------- */
.primary-nav > a .sport-icon,
.nav-dropdown > button .sport-icon {
    width: 17px;
    height: 17px;
    opacity: .78;
    flex-shrink: 0;
}
.primary-nav > a:hover .sport-icon,
.primary-nav > a.active .sport-icon,
.nav-dropdown > button:hover .sport-icon,
.nav-dropdown > button.active .sport-icon {
    opacity: 1;
}
.nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
}
.nav-dropdown-menu a .sport-icon {
    width: 15px;
    height: 15px;
    opacity: .7;
}

/* --------------------------------------------------------------------------
   5. Logo — the source PNG has a solid square background baked in that only
   matches the light-theme nav color, so it shows a faint mismatched corner
   box in the site's default dark theme. Clipping to a circle removes the
   flat corners entirely; the mark itself is comfortably inscribed within it.
   -------------------------------------------------------------------------- */
.brand img {
    border-radius: 50%;
}
.footer-brand .brand img {
    border-radius: 50%;
}

/* --------------------------------------------------------------------------
   6. Custom date picker (replaces the bare native <input type="date">
   overlay) — see partials/date-picker.blade.php and site.js for behaviour.
   -------------------------------------------------------------------------- */
.custom-datepicker {
    position: relative;
}
.custom-datepicker .date-picker-button {
    width: 100%;
    cursor: pointer;
}
.custom-datepicker .date-picker-button input[type="date"] {
    /* Native input stays for no-JS / accessibility fallback, visually hidden. */
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}
.datepicker-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 60;
    width: 300px;
    max-width: calc(100vw - 32px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    padding: 14px;
}
.datepicker-panel[hidden] {
    display: none;
}
.datepicker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    font-weight: 800;
}
.datepicker-head button {
    border: 0;
    background: var(--surface-2);
    color: var(--text);
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-weight: 900;
}
.datepicker-head button:hover {
    background: var(--yellow);
    color: #07101f;
}
.datepicker-weekdays,
.datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    text-align: center;
}
.datepicker-weekdays span {
    font-size: .68rem;
    color: var(--muted);
    font-weight: 800;
    padding: 4px 0;
}
.datepicker-days button {
    border: 0;
    background: transparent;
    color: var(--text);
    border-radius: 8px;
    height: 32px;
    font-weight: 700;
    font-size: .84rem;
}
.datepicker-days button:disabled {
    color: var(--muted);
    opacity: .35;
    cursor: not-allowed;
}
.datepicker-days button:not(:disabled):hover {
    background: var(--surface-2);
}
.datepicker-days button.is-today {
    box-shadow: inset 0 0 0 1.5px var(--yellow-2);
}
.datepicker-days button.is-selected {
    background: var(--yellow);
    color: #07101f;
}
.datepicker-days button.is-outside {
    color: var(--muted);
    opacity: .4;
}
.datepicker-foot {
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}
.datepicker-foot button {
    border: 0;
    background: transparent;
    color: var(--yellow-2);
    font-weight: 800;
    font-size: .82rem;
}

/* --------------------------------------------------------------------------
   7. Right sidebar reused on the fixtures listing page — the sidebar
   component already has its own styling; this only governs the two-column
   shell when the fixtures toolbar/filter form sits in the narrower column.
   -------------------------------------------------------------------------- */
.fixtures-page .filter-panel {
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   8. Defensive responsive hardening — global safety net against horizontal
   overflow on small screens, plus specific long-text guards (team/league
   names of unpredictable length coming from live data).
   -------------------------------------------------------------------------- */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}
.fixture-team strong,
.prediction-match-card strong,
.league-group-head strong,
.team-directory-card h2,
.league-directory-card h2 {
    overflow-wrap: break-word;
}
@media (max-width: 720px) {
    .header-row {
        gap: 14px;
    }
    .hero-badge-row,
    .general-hero-actions {
        flex-wrap: wrap;
    }
    .date-navigation {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
    }
    .date-navigation .today-link {
        order: -1;
        grid-column: 1 / -1;
    }
    .filter-panel {
        grid-template-columns: 1fr 1fr;
    }
}

/* --------------------------------------------------------------------------
   9a. "Nearest available date" fallback notices (predictions category page
   and homepage prediction sections) when today has no rows yet.
   -------------------------------------------------------------------------- */
.fallback-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: color-mix(in srgb, var(--yellow) 12%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--yellow) 35%, var(--line));
    color: var(--text);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: .9rem;
}
.fallback-notice .sport-icon {
    flex-shrink: 0;
    color: var(--yellow-2);
}
.fallback-inline {
    color: var(--yellow-2) !important;
    font-weight: 700;
    font-size: .84rem !important;
    margin-top: 6px;
}

/* --------------------------------------------------------------------------
   9. Follow button restored alongside Favorites on team/league hero rows
   (see teams/show.blade.php, leagues/show.blade.php, site.js). Kept for the
   flex-basis these rows relied on either way.
   -------------------------------------------------------------------------- */
.team-profile-main,
.league-profile-hero > div:first-child {
    flex: 1;
}

/* --------------------------------------------------------------------------
   11. Homepage long-form SEO content section.
   -------------------------------------------------------------------------- */
.homepage-guide-section .content-card {
    padding: 36px;
}
.homepage-guide-grid > div {
    max-width: 820px;
}
.homepage-guide-grid h3 {
    margin: 28px 0 10px;
    font-size: 1.15rem;
}
.homepage-guide-grid h3:first-child {
    margin-top: 0;
}
.homepage-guide-grid p {
    line-height: 1.75;
    margin: 0 0 14px;
}
.homepage-guide-grid ul {
    margin: 0 0 14px;
    padding-left: 20px;
    line-height: 1.7;
}
.homepage-guide-grid li {
    margin-bottom: 8px;
}
.homepage-guide-grid li strong {
    color: var(--text);
}
.guide-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.guide-stat {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 18px;
    text-align: center;
}
.guide-stat strong {
    display: block;
    font-size: 1.7rem;
    font-weight: 900;
    color: var(--yellow-2);
}
.guide-stat span {
    font-size: .8rem;
    color: var(--muted);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   10. League/live-score groups beyond the first ten start collapsed (see
   fixtures/index.blade.php and live/index.blade.php). No new rule needed —
   .league-group.collapsed is already defined in site.css — this only adds
   a lightweight "show more" affordance styling.
   -------------------------------------------------------------------------- */
.league-groups-more {
    display: flex;
    justify-content: center;
    margin-top: 4px;
}
.league-groups-more button {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-weight: 800;
    padding: 12px 22px;
    border-radius: 999px;
}
.league-groups-more button:hover {
    border-color: var(--yellow-2);
    color: var(--yellow-2);
}

/* --------------------------------------------------------------------------
   13. Pagination (teams.index / leagues.index).
   -------------------------------------------------------------------------- */
.pagination-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.pagination-arrow {
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    font-weight: 800;
    font-size: .85rem;
    padding: 10px 16px;
    border-radius: 12px;
    white-space: nowrap;
}
.pagination-arrow:hover {
    border-color: var(--yellow-2);
    color: var(--yellow-2);
}
.pagination-arrow.is-disabled {
    opacity: .35;
    pointer-events: none;
}
.pagination-pages {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.pagination-page,
.pagination-dots {
    min-width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-weight: 700;
    font-size: .85rem;
    color: var(--muted);
}
.pagination-page:hover {
    background: var(--surface-2);
    color: var(--text);
}
.pagination-page.is-current {
    background: var(--yellow);
    color: #07101f;
    font-weight: 900;
}
@media (max-width: 560px) {
    .pagination-nav {
        justify-content: center;
    }
    .pagination-arrow {
        order: 2;
    }
}

/* --------------------------------------------------------------------------
   14. Fix: long team names not truncating and instead pushing the form-badges
   / score out of line. `.fixture-team strong` sits inside a flex (desktop) or
   grid (mobile) container with `white-space:nowrap`. Flex/grid items default
   to `min-width:auto`, which for a no-wrap text node equals its *full*
   unwrapped width — so the browser refuses to shrink it below that, and
   `overflow:hidden;text-overflow:ellipsis` never actually gets a chance to
   apply. Confirmed by rendering both versions side by side. `min-width:0`
   removes that floor; `flex-shrink:0` on the form-badges keeps the W/D/L
   strip itself from being squeezed once the name starts giving way.
   -------------------------------------------------------------------------- */
.fixture-team strong {
    min-width: 0;
    flex: 1 1 auto;
}
.fixture-team .form-badges {
    flex-shrink: 0;
}
.fixture-team > b {
    flex-shrink: 0;
}
@media (max-width: 650px) {
    /* site.css sets display:grid here with no columns defined, which defaults
       to one implicit column — stacking the name above the form badges
       instead of side by side. This is the mobile half of the "not always
       inline" bug; the desktop half is the min-width:0 fix above. */
    .fixture-team > div {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
    }
}

/* --------------------------------------------------------------------------
   15. Further reduce match card vertical height (fixtures / live scores /
   predictions all share .fixture-card) — third pass, tighter than before.
   -------------------------------------------------------------------------- */
.fixture-time {
    padding: 7px 6px;
}
.fixture-time strong {
    font-size: .92rem;
}
.fixture-time span {
    font-size: .72rem;
}
.fixture-time small {
    font-size: .66rem;
}
.fixture-teams {
    padding: 6px 10px;
    gap: 4px;
}
.fixture-team {
    grid-template-columns: 22px minmax(0, 1fr) auto;
    gap: 6px;
}
.fixture-team img {
    width: 22px;
    height: 22px;
}
.fixture-team strong {
    font-size: .84rem;
}
.fixture-team .form-badges span {
    width: 16px;
    height: 16px;
    font-size: .58rem;
}
.fixture-card-league {
    padding: 6px 10px;
    font-size: .74rem;
}
.fixture-card-league img {
    width: 16px;
    height: 16px;
}
.mini-tip {
    padding: 5px 10px;
    font-size: .72rem;
}
.favorite-button {
    padding: 5px 10px;
    font-size: 1.15rem;
}
.prediction-match-card .prediction-teams {
    padding: 14px 14px;
}
.prediction-match-card .prediction-teams img {
    width: 44px;
    height: 44px;
}

/* --------------------------------------------------------------------------
   16. Predictions nav item opens its dropdown on hover for mouse/trackpad
   users, in addition to the existing click toggle (kept as-is for touch and
   keyboard). Scoped to hover-capable pointers only, so touchscreens keep
   relying purely on the tap-to-open behaviour already in site.js.
   -------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
    .nav-dropdown:hover > .nav-dropdown-menu,
    .nav-dropdown:focus-within > .nav-dropdown-menu {
        display: grid;
    }
}

/* --------------------------------------------------------------------------
   Production UI fixes — 24 July 2026
   -------------------------------------------------------------------------- */

/* Keep every two-column page inside its assigned grid track. Horizontal
   carousels can otherwise force the content column beneath the sticky sidebar. */
.content-with-sidebar > *,
.content-with-sidebar > div,
.saved-items-content,
.league-team-scroller {
    min-width: 0;
    max-width: 100%;
}
.league-team-scroller {
    width: 100%;
    overscroll-behavior-inline: contain;
}

/* Tighter page introductions while preserving the existing wording and hierarchy. */
.page-hero {
    padding: 34px 0 28px;
}
.page-hero h1 {
    margin: 7px 0 8px;
}
.page-hero p {
    margin-bottom: 0;
}
.general-hero {
    padding: 54px 0 50px;
}
.team-profile-hero,
.league-profile-hero {
    padding: 34px 0;
}

/* The action-row divider must line up with the time/team divider above it.
   Desktop cards use a 68px time column; mobile cards use 58px. */
.fixture-card-actions {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: stretch;
}
.fixture-card-actions .favorite-button {
    width: 100%;
    min-width: 0;
    height: 100%;
    border-right: 1px solid var(--line);
    padding-inline: 0;
    display: grid;
    place-items: center;
}
.fixture-card-actions .mini-tip {
    max-width: none;
    border-left: 0;
    min-width: 0;
}

/* Saved-items menu in the navbar. */
.saved-nav-menu {
    position: relative;
}
.saved-nav-menu > .icon-button.active {
    color: var(--yellow);
    border-color: rgba(255, 220, 0, .45);
}
.saved-nav-panel {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;
    width: 245px;
    padding: 8px;
    display: grid;
    gap: 4px;
    background: var(--nav-2);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 15px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .35);
    z-index: 120;
}
.saved-nav-panel[hidden] {
    display: none !important;
}
.saved-nav-panel a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: #d8e1ec;
    font-weight: 750;
}
.saved-nav-panel a:hover {
    background: rgba(255, 255, 255, .08);
    color: var(--yellow);
}
.saved-nav-panel b {
    min-width: 27px;
    height: 27px;
    padding-inline: 7px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: .75rem;
}

/* Favorites and Following pages. */
.saved-items-content {
    display: grid;
    gap: 20px;
}
.saved-items-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 17px;
    box-shadow: var(--shadow);
}
.saved-items-toolbar > div {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.saved-items-toolbar strong {
    color: var(--yellow-2);
    font-size: 1.55rem;
}
.saved-items-toolbar span {
    color: var(--muted);
    font-weight: 700;
}
.saved-loading {
    min-height: 180px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 13px;
    color: var(--muted);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
}
.saved-loading span {
    width: 34px;
    height: 34px;
    border: 3px solid var(--line);
    border-top-color: var(--yellow-2);
    border-radius: 50%;
    animation: saved-spin .8s linear infinite;
}
@keyframes saved-spin { to { transform: rotate(360deg); } }
.saved-items-content [hidden] {
    display: none !important;
}
.saved-follow-section + .saved-follow-section {
    margin-top: 30px;
}
.saved-follow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.saved-follow-card {
    min-width: 0;
    overflow: hidden;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow);
}
.saved-follow-card > a {
    min-width: 0;
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    padding: 15px;
}
.saved-follow-card > a:hover {
    background: var(--surface-2);
}
.saved-follow-card img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    padding: 5px;
    background: #fff;
    border-radius: 14px;
}
.saved-follow-card h3 {
    margin: 3px 0 4px;
    font-size: 1.03rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.saved-follow-card small,
.saved-follow-card p {
    color: var(--muted);
    margin: 0;
    font-size: .8rem;
}
.saved-follow-card > a > span {
    color: var(--yellow-2);
    font-weight: 800;
    white-space: nowrap;
}
.saved-follow-card > button {
    width: calc(100% - 30px);
    margin: 0 15px 15px;
}
.saved-follow-card > button.saved {
    color: #07101f;
    background: var(--yellow);
    border-color: var(--yellow);
}

@media (max-width: 650px) {
    .page-hero {
        padding: 27px 0 23px;
    }
    .general-hero {
        padding: 42px 0 40px;
    }
    .team-profile-hero,
    .league-profile-hero {
        padding: 28px 0;
    }
    .fixture-card-actions {
        grid-template-columns: 58px minmax(0, 1fr);
    }
    .saved-items-toolbar {
        align-items: stretch;
        flex-direction: column;
    }
    .saved-items-toolbar .button {
        width: 100%;
    }
    .saved-follow-grid {
        grid-template-columns: 1fr;
    }
    .saved-follow-card > a {
        grid-template-columns: 54px minmax(0, 1fr);
    }
    .saved-follow-card img {
        width: 52px;
        height: 52px;
    }
    .saved-follow-card > a > span {
        grid-column: 2;
        justify-self: start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .saved-loading span {
        animation: none;
    }
}

/* --------------------------------------------------------------------------
   Performance and card refinements — 24 July 2026
   -------------------------------------------------------------------------- */

/* Keep desktop navigation on one line. Long labels yield gracefully instead of
   wrapping and increasing the header height. */
.primary-nav,
.primary-nav > a,
.nav-dropdown,
.nav-dropdown > button {
    min-width: 0;
}
.primary-nav > a,
.nav-dropdown > button {
    white-space: nowrap;
    overflow: hidden;
}
.primary-nav .nav-label {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (min-width: 901px) and (max-width: 1280px) {
    .header-row { gap: 16px; }
    .primary-nav { gap: 2px; }
    .primary-nav > a,
    .nav-dropdown > button { padding-inline: 9px; max-width: 112px; }
    .brand strong { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 900px) {
    .primary-nav > a,
    .nav-dropdown > button { max-width: none; overflow: visible; }
    .primary-nav .nav-label { overflow: visible; text-overflow: clip; }
}

/* Prediction cards use a stable footer layout: the prediction takes the flexible
   column and Preview owns a fixed-width right column. Long picks are ellipsised. */
.prediction-match-card {
    min-width: 0;
    overflow: hidden;
}
.prediction-match-card .prediction-meta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}
.prediction-match-card .prediction-meta > span:first-child {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prediction-match-card .prediction-pick {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 104px;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-top: 1px solid var(--line);
}
.prediction-match-card .prediction-pick > strong {
    min-width: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 13px 14px;
}
.prediction-match-card .prediction-pick > a {
    width: 104px;
    min-width: 104px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border-left: 1px solid var(--line);
    color: var(--yellow-2);
    font-weight: 850;
    white-space: nowrap;
}
.prediction-versus {
    min-width: 42px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
}
.prediction-versus b { color: var(--text); font-size: 1.05rem; }
.prediction-versus i { color: var(--muted); font-style: normal; }
.prediction-teams > div { min-width: 0; }
.prediction-teams > div > strong {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Browser-only followed state. The server remains shared and deterministic; the
   final priority and indicator are applied from localStorage after render. */
.league-followed-chip {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--yellow) 18%, transparent);
    color: var(--yellow-2);
    font-size: .68rem;
    font-style: normal;
    font-weight: 900;
    white-space: nowrap;
}
.league-followed-chip[hidden],
.fixture-followed-flag[hidden] { display: none !important; }
.league-group.is-followed {
    border-color: color-mix(in srgb, var(--yellow) 52%, var(--line));
    box-shadow: 0 10px 34px rgba(255, 220, 0, .08);
}
.fixture-card { position: relative; }
.fixture-followed-flag {
    position: absolute;
    z-index: 3;
    top: 6px;
    right: 8px;
    max-width: 135px;
    padding: 3px 7px;
    border-radius: 999px;
    background: var(--nav-2);
    color: var(--yellow);
    box-shadow: 0 4px 15px rgba(0,0,0,.16);
    font-size: .62rem;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fixture-card.is-followed { border-color: color-mix(in srgb, var(--yellow) 48%, var(--line)); }

/* Incremental team/league directories. */
.directory-search-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto auto;
    align-items: center;
    gap: 10px;
}
.directory-search-form > label { min-width: 0; }
.directory-search-form > strong { white-space: nowrap; }
.directory-load-more {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding-top: 24px;
}
.directory-load-more[hidden] { display: none !important; }
.directory-load-more small { color: var(--muted); text-align: center; }
.directory-load-more button { min-width: 210px; }
.directory-load-more button.is-loading i { animation: directory-bounce .65s ease-in-out infinite alternate; }
@keyframes directory-bounce { to { transform: translateY(4px); } }
.team-directory-card p {
    margin: 3px 0 0;
    color: var(--muted);
    font-size: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.directory-insight-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-top: 34px;
}
.directory-insight-grid article {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 20px;
    background: linear-gradient(145deg, var(--surface), var(--surface-2));
    border: 1px solid var(--line);
    border-radius: 18px;
}
.directory-insight-grid article > span {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    background: var(--nav-2);
    color: var(--yellow);
    font-size: .78rem;
    font-weight: 900;
}
.directory-insight-grid h2 { margin: 0 0 7px; font-size: 1rem; }
.directory-insight-grid p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.6; }

@media (max-width: 900px) {
    .directory-insight-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
    .directory-search-form { grid-template-columns: 1fr 1fr; }
    .directory-search-form > label,
    .directory-search-form > strong { grid-column: 1 / -1; }
    .prediction-match-card .prediction-pick { grid-template-columns: minmax(0, 1fr) 92px; }
    .prediction-match-card .prediction-pick > a { width: 92px; min-width: 92px; }
    .league-followed-chip { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
}

/* --------------------------------------------------------------------------
   Standalone soccer trivia experience
   -------------------------------------------------------------------------- */
.trivia-page-section { padding-top: 30px; }
.trivia-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 24px;
}
.trivia-web-game {
    position: relative;
    min-width: 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 8% 4%, rgba(255, 222, 2, .12), transparent 24%),
        linear-gradient(145deg, var(--surface), var(--surface-2));
    border: 1px solid var(--line);
    border-radius: 26px;
    box-shadow: var(--shadow-lg, 0 28px 80px rgba(5, 14, 32, .12));
}
.trivia-scoreboard {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
    gap: 1px;
    background: var(--line);
    border-bottom: 1px solid var(--line);
}
.trivia-scoreboard > div,
.trivia-scoreboard > button {
    min-width: 0;
    min-height: 72px;
    display: grid;
    align-content: center;
    justify-items: center;
    padding: 11px 16px;
    background: var(--nav-2);
    color: #fff;
    border: 0;
}
.trivia-scoreboard small {
    color: rgba(255,255,255,.65);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.trivia-scoreboard strong { color: var(--yellow); font-size: 1.45rem; line-height: 1.1; }
.trivia-scoreboard > button {
    min-width: 112px;
    cursor: pointer;
    color: var(--yellow);
    font: inherit;
    font-weight: 850;
    transition: background .2s ease;
}
.trivia-scoreboard > button:hover { background: #142642; }
.trivia-stage-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    padding: 16px;
    border-bottom: 1px solid var(--line);
}
.trivia-stage-tabs button {
    min-width: 0;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 9px;
    padding: 12px;
    text-align: left;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 15px;
    cursor: pointer;
    transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.trivia-stage-tabs button:hover { transform: translateY(-2px); border-color: var(--yellow); }
.trivia-stage-tabs button.active {
    color: #07101f;
    background: var(--yellow);
    border-color: var(--yellow);
    box-shadow: 0 12px 26px rgba(255, 216, 0, .2);
}
.trivia-stage-tabs button > span {
    grid-row: 1 / 3;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: var(--yellow);
    background: var(--nav-2);
    font-size: .68rem;
    font-weight: 900;
}
.trivia-stage-tabs strong,
.trivia-stage-tabs small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trivia-stage-tabs strong { font-size: .86rem; }
.trivia-stage-tabs small { color: var(--muted); font-size: .64rem; }
.trivia-stage-tabs button.active small { color: rgba(7,16,31,.68); }
.trivia-progress-panel { padding: 14px 18px 7px; }
.trivia-progress-panel > div:first-child {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: .78rem;
    font-weight: 750;
}
.trivia-progress-track {
    height: 9px;
    overflow: hidden;
    background: var(--surface-3, rgba(130,145,170,.2));
    border-radius: 999px;
}
.trivia-progress-track i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--yellow), #ff9f1a);
    transition: width .35s ease;
}
.trivia-step-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; padding-top: 10px; }
.trivia-step-dots i { height: 4px; border-radius: 99px; background: var(--line); }
.trivia-step-dots i.done { background: #20b65b; }
.trivia-step-dots i.active { background: var(--yellow); box-shadow: 0 0 0 3px rgba(255,222,2,.13); }
.trivia-loading,
.trivia-error {
    min-height: 500px;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 14px;
    padding: 42px;
    text-align: center;
}
.trivia-loading[hidden], .trivia-error[hidden], .trivia-play-card[hidden],
.trivia-result-modal[hidden], .trivia-profile-modal[hidden] { display: none !important; }
.trivia-loading span {
    width: 48px;
    height: 48px;
    border: 4px solid var(--line);
    border-top-color: var(--yellow);
    border-radius: 50%;
    animation: trivia-spin .75s linear infinite;
}
.trivia-error > span { font-size: 2.7rem; }
.trivia-error h2 { margin: 0; }
.trivia-error p { max-width: 520px; margin: 0 0 8px; color: var(--muted); }
@keyframes trivia-spin { to { transform: rotate(360deg); } }
.trivia-play-card { padding: 18px 22px 24px; }
.trivia-image-stage {
    position: relative;
    isolation: isolate;
    width: min(245px, 72vw);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin: 12px auto 22px;
    padding: 30px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.98), rgba(244,247,251,.92));
    border: 1px solid rgba(151,163,181,.34);
    border-radius: 28px;
    box-shadow: 0 24px 58px rgba(7,16,31,.14);
}
.trivia-image-stage::before,
.trivia-image-stage::after {
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(255,222,2,.28);
    border-radius: inherit;
    inset: 9px;
}
.trivia-image-stage::after { inset: 20px; border-style: dashed; }
.trivia-image-stage img { width: 100%; height: 100%; object-fit: contain; }
.trivia-image-stage > span {
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    min-width: max-content;
    padding: 6px 12px;
    color: var(--yellow);
    background: var(--nav-2);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.trivia-image-stage > button {
    position: absolute;
    top: 9px;
    right: 9px;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: #07101f;
    background: var(--yellow);
    border: 0;
    border-radius: 11px;
    cursor: pointer;
    font-size: 1.25rem;
}
.trivia-glow {
    position: absolute;
    z-index: -2;
    inset: 18%;
    background: var(--yellow);
    filter: blur(35px);
    opacity: .18;
}
.trivia-question-area { text-align: center; }
.trivia-question-area h2 { margin: 4px 0 4px; font-size: clamp(1.35rem, 3vw, 1.9rem); }
.trivia-question-area > p { max-width: 610px; margin: 0 auto 18px; color: var(--muted); font-size: .88rem; }
.trivia-answer-slots {
    min-height: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 5px;
    margin: 0 auto 12px;
}
.trivia-answer-slot {
    width: clamp(27px, 4vw, 39px);
    height: clamp(38px, 5vw, 48px);
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--text);
    background: var(--surface);
    border: 0;
    border-bottom: 3px solid var(--line);
    border-radius: 8px 8px 3px 3px;
    font: inherit;
    font-size: clamp(.85rem, 2vw, 1.08rem);
    font-weight: 900;
    cursor: pointer;
}
.trivia-answer-slot:not(:empty) { border-color: var(--yellow); background: rgba(255,222,2,.08); }
.trivia-answer-slots.shake { animation: trivia-shake .45s ease; }
@keyframes trivia-shake { 20%,60% { transform: translateX(-8px); } 40%,80% { transform: translateX(8px); } }
.trivia-feedback {
    min-height: 40px;
    display: grid;
    place-items: center;
    max-width: 660px;
    margin: 0 auto 10px;
    padding: 8px 12px;
    border-radius: 11px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
}
.trivia-feedback:empty { padding: 0; min-height: 20px; }
.trivia-feedback.error { color: #d52e37; background: rgba(213,46,55,.09); }
.trivia-feedback.warning { color: #9c6500; background: rgba(255,177,0,.12); }
.trivia-feedback.success { color: #128541; background: rgba(18,133,65,.1); }
.trivia-feedback.hint { color: var(--text); background: rgba(255,222,2,.13); border: 1px solid rgba(255,222,2,.36); }
.trivia-keyboard {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px;
    max-width: 690px;
    margin: 0 auto 18px;
}
.trivia-keyboard button {
    min-width: 0;
    aspect-ratio: 1.08;
    display: grid;
    place-items: center;
    padding: 0;
    color: #fff;
    background: var(--nav-2);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 9px;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
    cursor: pointer;
    font: inherit;
    font-size: .78rem;
    font-weight: 900;
    transition: transform .12s ease, background .12s ease;
}
.trivia-keyboard button:hover { color: #07101f; background: var(--yellow); transform: translateY(-2px); }
.trivia-keyboard button:active { transform: translateY(1px); box-shadow: none; }
.trivia-controls {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    max-width: 690px;
    margin: auto;
}
.trivia-controls button {
    min-width: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 8px;
    padding: 10px 11px;
    text-align: left;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 13px;
    cursor: pointer;
}
.trivia-controls button > span { grid-row: 1 / 3; font-size: 1.2rem; }
.trivia-controls strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .79rem; }
.trivia-controls small { color: var(--muted); font-size: .62rem; }
.trivia-controls button:last-child { color: #07101f; background: var(--yellow); border-color: var(--yellow); }
.trivia-web-game button:disabled { cursor: wait; opacity: .65; }
.trivia-guide-sidebar { display: grid; gap: 16px; position: sticky; top: 100px; }
.trivia-guide-sidebar .sidebar-card { overflow: hidden; }
.trivia-how-card ol { display: grid; gap: 12px; margin: 18px 0 0; padding: 0; counter-reset: trivia-how; }
.trivia-how-card li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.76);
    font-size: .82rem;
    line-height: 1.45;
    list-style: none;
    counter-increment: trivia-how;
}
.trivia-how-card li::before {
    content: counter(trivia-how);
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    color: #07101f;
    background: var(--yellow);
    border-radius: 9px;
    font-weight: 900;
}
.trivia-live-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: center; }
.trivia-live-card > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 15px; background: rgba(255,222,2,.12); font-size: 1.45rem; }
.trivia-live-card p { margin: 5px 0 0; color: rgba(255,255,255,.65); font-size: .77rem; }
.trivia-result-modal,
.trivia-profile-modal {
    position: fixed;
    z-index: 1002;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(3,9,20,.78);
    backdrop-filter: blur(7px);
}
.trivia-result-card,
.trivia-profile-card {
    position: relative;
    z-index: 2;
    width: min(440px, 100%);
    padding: 30px;
    text-align: center;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 25px;
    box-shadow: 0 32px 90px rgba(0,0,0,.3);
}
.trivia-result-card > span {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    margin: -58px auto 16px;
    color: #07101f;
    background: var(--yellow);
    border: 7px solid var(--surface);
    border-radius: 50%;
    font-size: 1.35rem;
    font-weight: 900;
}
.trivia-result-card h2 { margin: 0 0 17px; }
.trivia-result-card img { width: 126px; height: 126px; object-fit: contain; padding: 10px; background: #fff; border-radius: 22px; }
.trivia-result-card > strong { display: block; margin-top: 12px; font-size: 1.12rem; }
.trivia-result-card p { color: var(--muted); }
.trivia-confetti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.trivia-confetti i {
    position: absolute;
    top: -8%;
    left: var(--x);
    color: var(--yellow);
    font-style: normal;
    animation: trivia-confetti var(--duration) var(--delay) ease-in forwards;
}
.trivia-confetti i:nth-child(3n) { color: #20b65b; }
.trivia-confetti i:nth-child(4n) { color: #ed3b43; }
.trivia-confetti i:nth-child(5n) { color: #fff; }
@keyframes trivia-confetti { to { transform: translateY(115vh) rotate(var(--rotation)); opacity: .15; } }
.trivia-profile-card { text-align: left; }
.trivia-profile-card > button[data-trivia-profile-close] {
    position: absolute;
    top: 13px;
    right: 13px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: var(--surface-2);
    color: var(--text);
    cursor: pointer;
    font-size: 1.25rem;
}
.trivia-profile-card h2 { margin: 5px 0 18px; }
.trivia-profile-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.trivia-profile-stats div { padding: 15px 8px; text-align: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; }
.trivia-profile-stats strong { display: block; font-size: 1.25rem; }
.trivia-profile-stats span { color: var(--muted); font-size: .7rem; }
.trivia-profile-position { display: grid; gap: 4px; margin: 14px 0; padding: 14px; background: rgba(255,222,2,.1); border-radius: 13px; }
.trivia-profile-position span { color: var(--muted); font-size: .72rem; }
.trivia-profile-card > .button { width: 100%; }
.trivia-benefit-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.trivia-benefit-grid article {
    position: relative;
    min-width: 0;
    overflow: hidden;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 20px;
}
.trivia-benefit-grid article::after {
    content: '⚽';
    position: absolute;
    right: -10px;
    bottom: -22px;
    font-size: 5.2rem;
    opacity: .045;
}
.trivia-benefit-grid article > span { color: var(--yellow-2); font-size: .66rem; font-weight: 900; letter-spacing: .13em; }
.trivia-benefit-grid h3 { margin: 9px 0 8px; font-size: 1rem; }
.trivia-benefit-grid p { margin: 0; color: var(--muted); font-size: .82rem; line-height: 1.6; }
.trivia-complete-card { min-height: 500px; display: grid; justify-items: center; align-content: center; gap: 12px; padding: 38px; text-align: center; }
.trivia-complete-card > span { font-size: 4rem; }
.trivia-complete-card h2 { max-width: 570px; margin: 0; }
.trivia-complete-card p { max-width: 620px; margin: 0 0 10px; color: var(--muted); }

@media (max-width: 1050px) {
    .trivia-layout { grid-template-columns: minmax(0, 1fr); }
    .trivia-guide-sidebar { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .trivia-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .trivia-page-section { padding-top: 20px; }
    .trivia-web-game { border-radius: 18px; }
    .trivia-scoreboard { grid-template-columns: repeat(3, 1fr); }
    .trivia-scoreboard > button { grid-column: 1 / -1; min-height: 42px; }
    .trivia-scoreboard > div { min-height: 62px; }
    .trivia-stage-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 11px; }
    .trivia-play-card { padding-inline: 12px; }
    .trivia-keyboard { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
    .trivia-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trivia-guide-sidebar { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
    .trivia-stage-tabs button { padding: 9px; }
    .trivia-stage-tabs small { display: none; }
    .trivia-image-stage { width: min(205px, 66vw); padding: 24px; border-radius: 22px; }
    .trivia-keyboard { grid-template-columns: repeat(8, minmax(0, 1fr)); }
    .trivia-keyboard button { border-radius: 7px; font-size: .7rem; }
    .trivia-answer-slot { width: 27px; height: 38px; }
    .trivia-benefit-grid { grid-template-columns: 1fr; }
    .trivia-result-card, .trivia-profile-card { padding: 24px 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .trivia-loading span, .trivia-confetti i { animation: none !important; }
    .trivia-stage-tabs button, .trivia-keyboard button, .trivia-progress-track i { transition: none; }
}

/* SEO-friendly homepage guide widgets: visually scannable while retaining the
   detailed explanatory copy and internal links in the document flow. */
.feature-grid .feature-card-link {
    min-width: 0;
    display: block;
    padding: 24px;
    color: var(--text);
    background: linear-gradient(145deg, var(--surface), var(--surface-2));
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    transition: transform .2s ease, border-color .2s ease;
}
.feature-grid .feature-card-link:hover { transform: translateY(-4px); border-color: var(--yellow); }
.feature-grid .feature-card-link > span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 16px; color: #07101f; background: var(--yellow); border-radius: 13px; font-weight: 900; }
.feature-grid .feature-card-link h3 { margin: 0 0 8px; }
.feature-grid .feature-card-link p { color: var(--muted); }
.feature-grid .feature-card-link b { color: var(--yellow-2); font-size: .78rem; }
.homepage-guide-widgets { display: grid; gap: 16px; }
.guide-topic-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 22px;
    padding: clamp(22px, 4vw, 34px);
    background: linear-gradient(145deg, var(--surface), var(--surface-2));
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
}
.guide-topic-primary { background: radial-gradient(circle at 100% 0, rgba(255,222,2,.12), transparent 34%), linear-gradient(145deg, var(--surface), var(--surface-2)); }
.guide-topic-icon {
    width: 82px;
    height: 82px;
    display: grid;
    place-items: center;
    align-content: center;
    color: var(--yellow);
    background: var(--nav-2);
    border-radius: 22px;
    box-shadow: 0 15px 30px rgba(6,14,29,.15);
}
.guide-topic-icon span { font-size: 1.45rem; font-weight: 900; line-height: 1; }
.guide-topic-icon b { margin-top: 5px; font-size: .58rem; letter-spacing: .14em; }
.guide-topic-card h3 { margin: 6px 0 10px; font-size: clamp(1.2rem, 2.4vw, 1.65rem); }
.guide-topic-card p { margin: 0 0 11px; color: var(--muted); line-height: 1.72; }
.guide-topic-card a { color: var(--yellow-2); font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.guide-signal-row, .guide-metric-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.guide-signal-row span { padding: 7px 10px; color: var(--text); background: var(--surface); border: 1px solid var(--line); border-radius: 999px; font-size: .72rem; font-weight: 800; }
.guide-market-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.guide-market-grid article { min-width: 0; display: flex; flex-direction: column; padding: 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.guide-market-grid article > span { width: 40px; height: 40px; display: grid; place-items: center; color: #07101f; background: var(--yellow); border-radius: 12px; font-size: .71rem; font-weight: 900; }
.guide-market-grid h3 { margin: 13px 0 7px; font-size: .98rem; }
.guide-market-grid p { flex: 1; margin: 0 0 12px; color: var(--muted); font-size: .79rem; line-height: 1.55; }
.guide-market-grid a { color: var(--yellow-2); font-size: .72rem; font-weight: 850; }
.guide-workflow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.guide-workflow span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: 11px; font-size: .73rem; font-weight: 800; }
.guide-workflow span b { width: 22px; height: 22px; display: grid; place-items: center; color: #07101f; background: var(--yellow); border-radius: 7px; }
.guide-workflow i { color: var(--muted); font-style: normal; }
.guide-metric-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.guide-metric-strip span { display: grid; gap: 3px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 13px; color: var(--muted); font-size: .74rem; }
.guide-metric-strip b { color: var(--text); font-size: .7rem; letter-spacing: .08em; }
@media (max-width: 1100px) { .guide-market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
    .guide-topic-card { grid-template-columns: 1fr; gap: 14px; }
    .guide-topic-icon { width: 64px; height: 64px; border-radius: 18px; }
    .guide-market-grid { grid-template-columns: 1fr 1fr; }
    .guide-metric-strip { grid-template-columns: 1fr; }
}
@media (max-width: 460px) { .guide-market-grid { grid-template-columns: 1fr; } .guide-workflow i { display: none; } }
@media (min-width: 1101px) {
    .fan-tools-section .feature-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ========================================================================== 
   Match status, ID-safe previews, combined lineup pitch and theme refinements
   ========================================================================== */
.match-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    max-width: 100%;
    width: max-content;
    padding: 5px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}
.match-status i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 16%, transparent);
    animation: status-pulse 1.6s ease-in-out infinite;
}
.match-status-live { color: #c91f2b; background: #fff0f1; border-color: #ffc8cd; }
.match-status-finished { color: #17703a; background: #ebf8f0; border-color: #bce5c9; }
.match-status-upcoming { color: #526176; background: var(--surface-3); border-color: var(--line); }
.match-status-inactive { color: #8b5c00; background: #fff6db; border-color: #f2d58a; }
.match-status-compact { padding: 4px 7px; font-size: .64rem; }
@keyframes status-pulse { 50% { opacity: .45; transform: scale(.78); } }
html[data-theme="dark"] .match-status-live { color: #ff8b94; background: rgba(239,68,68,.13); border-color: rgba(255,139,148,.28); }
html[data-theme="dark"] .match-status-finished { color: #77e29a; background: rgba(50,180,74,.13); border-color: rgba(119,226,154,.25); }
html[data-theme="dark"] .match-status-upcoming { color: #c8d1de; }
html[data-theme="dark"] .match-status-inactive { color: #ffd36a; background: rgba(255,177,0,.12); border-color: rgba(255,211,106,.24); }

.fixture-time { align-content: center; gap: 7px; }
.fixture-time .match-status { margin-inline: auto; }
.prediction-meta {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto;
    align-items: center;
}
.prediction-meta > span:last-child { text-align: right; }

/* One vertical field for both starting elevens, matching the mobile-app lineup flow. */
.combined-lineup-wrap { display: block; max-width: 760px; margin-inline: auto; }
.combined-lineup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 15px;
    color: #07101f;
    background: #dff2d8;
    border: 1px solid #b8d7b0;
}
.combined-lineup-head.home { border-radius: 16px 16px 0 0; }
.combined-lineup-head.away { border-radius: 0 0 16px 16px; }
.combined-lineup-head > span { min-width: 0; display: flex; align-items: center; gap: 10px; }
.combined-lineup-head img { width: 30px; height: 30px; object-fit: contain; }
.combined-lineup-head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combined-lineup-head b { flex: 0 0 auto; font-size: .85rem; }
.combined-football-pitch {
    position: relative;
    isolation: isolate;
    min-height: 820px;
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    grid-template-rows: repeat(12,minmax(54px,1fr));
    gap: 2px 5px;
    padding: 25px 13px;
    overflow: hidden;
    background: repeating-linear-gradient(0deg,#337f47 0,#337f47 68px,#3e8e52 68px,#3e8e52 136px);
    border: 3px solid rgba(255,255,255,.72);
    box-shadow: inset 0 0 0 1px rgba(5,35,17,.24), 0 20px 50px rgba(7,16,31,.13);
}
.combined-football-pitch .pitch-marking {
    position: absolute;
    z-index: 1;
    display: block;
    pointer-events: none;
    border-color: rgba(255,255,255,.68);
}
.combined-football-pitch .pitch-marking.halfway {
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: rgba(255,255,255,.68);
    transform: translateY(-1px);
}
.combined-football-pitch .pitch-marking.center-circle {
    left: 50%;
    top: 50%;
    width: 142px;
    height: 142px;
    border: 2px solid rgba(255,255,255,.68);
    border-radius: 50%;
    transform: translate(-50%,-50%);
}
.combined-football-pitch .pitch-marking.center-spot {
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    background: rgba(255,255,255,.8);
    border-radius: 50%;
    transform: translate(-50%,-50%);
}
.combined-football-pitch .pitch-marking.penalty-box {
    left: 20%;
    width: 60%;
    height: 14%;
    border: 2px solid rgba(255,255,255,.68);
}
.combined-football-pitch .pitch-marking.goal-box {
    left: 34%;
    width: 32%;
    height: 6.5%;
    border: 2px solid rgba(255,255,255,.68);
}
.combined-football-pitch .pitch-marking.top { top: -2px; border-top: 0; }
.combined-football-pitch .pitch-marking.bottom { bottom: -2px; border-bottom: 0; }
.pitch-half-label {
    position: absolute;
    z-index: 2;
    left: 9px;
    max-width: calc(100% - 18px);
    padding: 4px 8px;
    overflow: hidden;
    color: rgba(255,255,255,.9);
    background: rgba(5,18,11,.36);
    border-radius: 8px;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .63rem;
    font-weight: 850;
}
.pitch-half-label.home { top: 8px; }
.pitch-half-label.away { bottom: 8px; }
.combined-football-pitch .pitch-player {
    position: relative;
    z-index: 3;
    min-width: 0;
    display: grid;
    place-items: center;
    align-self: center;
    justify-self: stretch;
    text-align: center;
}
.combined-football-pitch .pitch-player > span {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    color: var(--player-text,#07101f);
    background: var(--player-color,#ffdc00);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,.3);
    text-shadow: 0 1px 2px rgba(0,0,0,.14);
    font-size: .75rem;
    font-weight: 950;
}
.combined-football-pitch .pitch-player > small {
    max-width: 106px;
    margin-top: 4px;
    padding: 3px 7px;
    overflow: hidden;
    color: #07101f;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(7,16,31,.12);
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,.13);
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .62rem;
    font-weight: 800;
    line-height: 1.2;
}
.pitch-support-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 15px; }
.pitch-support-grid article { min-width: 0; padding: 14px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; }
.pitch-support-grid p { margin: 10px 0 0; color: var(--muted); font-size: .78rem; }

/* Team and league profile heroes remain compact and balanced on small screens. */
.team-profile-hero .shell,
.league-profile-hero .shell {
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
}
.team-profile-main { min-width: 0; }
.team-profile-main > div { min-width: 0; }
.team-profile-main h1,
.league-profile-hero h1 { overflow-wrap: anywhere; }
.team-profile-hero,
.league-profile-hero { position: relative; overflow: hidden; }
.team-profile-hero::after,
.league-profile-hero::after {
    content: '';
    position: absolute;
    right: -80px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    border: 1px solid rgba(255,220,0,.18);
    border-radius: 50%;
    pointer-events: none;
}

/* Light/dark contrast audit for trivia and reusable prose/sidebar cards. */
.trivia-how-card li { color: var(--muted); }
.trivia-live-card p { color: var(--muted); }
.trivia-how-card h2,
.trivia-live-card h3 { color: var(--text); }
html[data-theme="dark"] .trivia-how-card li,
html[data-theme="dark"] .trivia-live-card p { color: #b6c2d2; }
.content-card p,
.sidebar-card p { overflow-wrap: anywhere; }

@media (max-width: 700px) {
    .prediction-meta { grid-template-columns: minmax(0,1fr) auto; }
    .prediction-meta .match-status { grid-row: 2; grid-column: 1 / -1; justify-self: start; margin-top: 3px; }
    .combined-lineup-head { padding: 9px 11px; }
    .combined-lineup-head img { width: 25px; height: 25px; }
    .combined-lineup-head strong { font-size: .82rem; }
    .combined-lineup-head b { font-size: .7rem; }
    .combined-football-pitch {
        min-height: 690px;
        grid-template-rows: repeat(12,minmax(43px,1fr));
        gap: 1px 2px;
        padding: 20px 4px;
    }
    .combined-football-pitch .pitch-marking.center-circle { width: 104px; height: 104px; }
    .combined-football-pitch .pitch-player > span { width: 27px; height: 27px; font-size: .65rem; }
    .combined-football-pitch .pitch-player > small { max-width: 61px; font-size: .51rem; padding: 2px 3px; }
    .pitch-half-label { display: none; }
    .pitch-support-grid { grid-template-columns: 1fr; }
    .team-profile-hero .shell,
    .league-profile-hero .shell { grid-template-columns: 1fr; gap: 18px; }
    .team-profile-main,
    .league-profile-hero .shell > div { display: grid; grid-template-columns: 76px minmax(0,1fr); gap: 14px; align-items: center; }
    .team-profile-main > img,
    .league-profile-hero img { width: 76px; height: 76px; padding: 7px; border-radius: 17px; }
    .team-profile-main h1,
    .league-profile-hero h1 { margin-block: 4px; font-size: clamp(1.55rem,8vw,2.2rem); }
    .team-profile-main p,
    .league-profile-hero p { margin-bottom: 10px; font-size: .88rem; }
    .team-profile-main .button { padding: 10px 13px; font-size: .82rem; }
    .team-rating-ring { position: absolute; right: 16px; bottom: 18px; width: 78px; height: 78px; border-width: 7px; }
    .team-rating-ring strong { font-size: 1.25rem; }
    .team-rating-ring span { font-size: .58rem; }
    .team-profile-hero { padding-bottom: 112px; }
    .league-profile-hero .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .match-status i { animation: none; } }
.fixture-time .match-status,
.fixture-time .match-status span { font-size: .64rem; }
.fixture-time .match-status-live,
.fixture-time .match-status-live span { color: #c91f2b; }
.fixture-time .match-status-finished,
.fixture-time .match-status-finished span { color: #17703a; }
.fixture-time .match-status-upcoming,
.fixture-time .match-status-upcoming span { color: #526176; }
.fixture-time .match-status-inactive,
.fixture-time .match-status-inactive span { color: #8b5c00; }
html[data-theme="dark"] .fixture-time .match-status-live,
html[data-theme="dark"] .fixture-time .match-status-live span { color: #ff8b94; }
html[data-theme="dark"] .fixture-time .match-status-finished,
html[data-theme="dark"] .fixture-time .match-status-finished span { color: #77e29a; }
html[data-theme="dark"] .fixture-time .match-status-upcoming,
html[data-theme="dark"] .fixture-time .match-status-upcoming span { color: #c8d1de; }
html[data-theme="dark"] .fixture-time .match-status-inactive,
html[data-theme="dark"] .fixture-time .match-status-inactive span { color: #ffd36a; }
.prediction-meta .match-status span { overflow: visible; color: inherit; }

/* Final mobile profile polish and light-mode contrast safeguards. */
html:not([data-theme="dark"]) .trivia-how-card,
html:not([data-theme="dark"]) .trivia-live-card,
html:not([data-theme="dark"]) .sidebar-card:not(.accent-card) {
    color: var(--text);
}
html:not([data-theme="dark"]) .trivia-how-card li,
html:not([data-theme="dark"]) .trivia-live-card p,
html:not([data-theme="dark"]) .sidebar-card:not(.accent-card) p {
    color: #526176;
}
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) textarea {
    color: var(--text);
}
html:not([data-theme="dark"]) input::placeholder,
html:not([data-theme="dark"]) textarea::placeholder { color: #6b7789; opacity: 1; }

@media (max-width: 700px) {
    .team-profile-hero,
    .league-profile-hero {
        padding: 18px 0 22px;
        background:
            radial-gradient(circle at 92% 8%, rgba(255,220,0,.18), transparent 32%),
            linear-gradient(145deg,#07101f,#102846);
        border-bottom: 3px solid rgba(255,220,0,.78);
    }
    .team-profile-hero .shell,
    .league-profile-hero .shell {
        position: relative;
        padding: 16px;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.1);
        border-radius: 22px;
        box-shadow: 0 18px 45px rgba(0,0,0,.18);
    }
    .team-profile-main,
    .league-profile-hero .shell > div {
        grid-template-columns: 70px minmax(0,1fr);
        gap: 12px;
        align-items: center;
    }
    .team-profile-main > img,
    .league-profile-hero img {
        width: 70px;
        height: 70px;
        padding: 7px;
        border: 1px solid rgba(255,255,255,.2);
        box-shadow: 0 10px 24px rgba(0,0,0,.2);
    }
    .team-profile-main h1,
    .league-profile-hero h1 {
        margin: 3px 0 5px;
        font-size: clamp(1.42rem,7.2vw,2rem);
        line-height: 1.06;
    }
    .team-profile-main .eyebrow,
    .league-profile-hero small { font-size: .65rem; }
    .team-profile-main p,
    .league-profile-hero p {
        margin: 0 0 9px;
        color: #c4cfdd;
        font-size: .78rem;
        line-height: 1.35;
    }
    .team-profile-main .button,
    .league-profile-hero .button {
        min-height: 40px;
        padding: 9px 12px;
        border-radius: 11px;
        font-size: .76rem;
    }
    .team-rating-ring {
        right: 17px;
        bottom: 17px;
        width: 72px;
        height: 72px;
    }
    .team-rating-ring::before { inset: 7px; }
    .team-profile-hero { padding-bottom: 18px; }
    .team-profile-hero .shell { padding-bottom: 102px; }
    .league-profile-hero .button { margin-top: 2px; }
}


/* ========================================================================== 
   2026-07-26 fixture date, compact provider status, card-time and goalkeeper fixes
   ========================================================================== */
.match-status-compact {
    max-width: 48px;
    min-width: 0;
    padding-inline: 6px;
}
.match-status-compact > span {
    max-width: 34px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fixture-time {
    grid-auto-flow: row;
    grid-auto-rows: min-content;
    align-content: center;
    justify-items: center;
    min-width: 68px;
    row-gap: 4px;
}
.fixture-time .fixture-date {
    display: block;
    color: var(--muted);
    font-size: .62rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}
.fixture-time > strong {
    line-height: 1.05;
    white-space: nowrap;
}
.fixture-time .match-status {
    margin: 0;
}

/* League and original provider status occupy the first row; kick-off time is centred
   on its own row so it never collides with a long league name or status badge. */
.prediction-match-card .prediction-meta {
    grid-template-columns: minmax(0, 1fr) auto !important;
    grid-template-areas:
        "league status"
        "time time";
    column-gap: 8px;
    row-gap: 5px;
    align-items: center;
    min-height: 52px;
    padding: 8px 14px 7px;
}
.prediction-meta .prediction-league {
    grid-area: league;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.prediction-meta .prediction-status {
    grid-area: status;
    justify-self: end;
}
.prediction-meta .prediction-time {
    grid-area: time;
    justify-self: center;
    color: var(--muted);
    font-weight: 750;
    line-height: 1;
    white-space: nowrap;
}

/* Keep both goalkeepers centred inside the marked six-yard goal areas. */
.combined-football-pitch .pitch-player.goalkeeper {
    align-self: center;
    justify-self: stretch;
    z-index: 4;
}
.combined-football-pitch .pitch-player.goalkeeper > span {
    box-shadow: 0 0 0 3px rgba(255,255,255,.24), 0 5px 14px rgba(0,0,0,.34);
}

@media (max-width: 700px) {
    .prediction-match-card .prediction-meta {
        grid-template-columns: minmax(0, 1fr) auto !important;
        grid-template-areas:
            "league status"
            "time time";
    }
    .prediction-meta .prediction-status {
        grid-row: auto;
        grid-column: auto;
        margin-top: 0;
    }
    .fixture-card-main {
        grid-template-columns: 72px minmax(0,1fr) auto;
    }
}


/* 2026-07-29 production log-fix release: visible SEO guide widgets */
.content-guide-section{padding-top:clamp(2.5rem,5vw,4.5rem);padding-bottom:clamp(2.5rem,5vw,4.5rem)}
.content-guide-heading{max-width:780px;margin-bottom:1.5rem}
.content-guide-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.content-guide-grid article{display:flex;gap:1rem;min-height:190px;padding:1.35rem;border:1px solid var(--line,#dfe6ef);border-radius:22px;background:linear-gradient(145deg,var(--surface,#fff),var(--surface-alt,#f4f7fb));box-shadow:0 18px 45px rgba(7,16,31,.08)}
.content-guide-grid article>span{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:14px;background:#ffda00;color:#07101f;font-weight:900;letter-spacing:.05em}
.content-guide-grid h3{margin:.1rem 0 .55rem;font-size:1.08rem;line-height:1.2;color:var(--text,#07101f)}
.content-guide-grid p{margin:0;color:var(--muted,#64748b);line-height:1.65}
.content-guide-links{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.25rem}
.content-guide-links a{display:inline-flex;align-items:center;justify-content:space-between;gap:1rem;min-width:190px;padding:.85rem 1rem;border:1px solid var(--line,#dfe6ef);border-radius:14px;background:var(--surface,#fff);color:var(--text,#07101f);font-weight:800;text-decoration:none}
.content-guide-links a span{color:#c5a900}
.content-guide-links a:hover{transform:translateY(-2px);border-color:#ffda00}
[data-theme="dark"] .content-guide-grid article{background:linear-gradient(145deg,#0d1a2f,#111f36);border-color:#23324b;box-shadow:0 18px 45px rgba(0,0,0,.22)}
[data-theme="dark"] .content-guide-grid h3,[data-theme="dark"] .content-guide-links a{color:#f8fafc}
[data-theme="dark"] .content-guide-grid p{color:#b8c4d6}
[data-theme="dark"] .content-guide-links a{background:#0d1a2f;border-color:#23324b}
.trivia-how-card,.trivia-how-card h2,.trivia-how-card li{color:var(--text,#07101f)}
[data-theme="dark"] .trivia-how-card,[data-theme="dark"] .trivia-how-card h2,[data-theme="dark"] .trivia-how-card li{color:#f8fafc}
@media(max-width:1050px){.content-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.content-guide-section{padding-top:2rem;padding-bottom:2rem}.content-guide-grid{grid-template-columns:1fr}.content-guide-grid article{min-height:auto;padding:1.1rem;border-radius:18px}.content-guide-links{display:grid;grid-template-columns:1fr}.content-guide-links a{min-width:0;width:100%}}

/* ========================================================================== 
   2026-07-29 directory navigation, mobile profile, statistics and saved-card fixes
   ========================================================================== */
.featured-directory-carousel {
    min-width: 0;
    max-width: 100%;
    margin-bottom: 24px;
    overflow: hidden;
}
.featured-directory-carousel .section-heading {
    max-width: 100%;
    margin-bottom: 16px;
}
.featured-directory-carousel .section-heading p {
    max-width: 680px;
    margin: 8px 0 0;
}
.carousel-controls {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}
.carousel-controls button {
    width: 42px;
    height: 42px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface);
    color: var(--text);
    font-weight: 900;
    box-shadow: 0 8px 22px rgba(7,16,31,.08);
}
.carousel-controls button:hover:not(:disabled) {
    border-color: var(--yellow);
    background: var(--yellow);
    color: #07101f;
    transform: translateY(-1px);
}
.carousel-controls button:disabled {
    opacity: .38;
    cursor: default;
    box-shadow: none;
}
.featured-directory-carousel:not(.can-scroll) .scroll-indicator { opacity: .35; }
.league-team-scroller {
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scroll-snap-type: x proximity;
}
.league-team-scroller > a { scroll-snap-align: start; }

/* Stable profile-hero structure. These rules intentionally come after the legacy
   selectors so old broad `.league-profile-hero .shell > div` declarations cannot
   distort the new mobile card. */
.team-profile-hero .profile-hero-card,
.league-profile-hero .profile-hero-card {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    align-items: center !important;
    gap: 26px !important;
}
.team-profile-main,
.league-profile-main {
    min-width: 0;
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
}
.team-profile-main > img,
.league-profile-main > img {
    flex: 0 0 112px;
    width: 112px !important;
    height: 112px !important;
    object-fit: contain;
    padding: 11px !important;
    border-radius: 24px !important;
    background: #fff;
}
.profile-hero-copy { min-width: 0; }
.profile-hero-copy h1 {
    margin: 5px 0 7px;
    overflow-wrap: anywhere;
}
.profile-hero-copy p { margin-bottom: 13px; }
.profile-hero-side,
.profile-hero-actions {
    min-width: 150px;
    display: grid !important;
    justify-items: center;
    gap: 9px;
    text-align: center;
}
.profile-hero-side small,
.profile-hero-actions small {
    max-width: 170px;
    color: #bfcbd9;
    font-size: .76rem;
    line-height: 1.35;
}
.profile-hero-actions .button { min-width: 150px; }

/* Keep final scores in a dedicated third column instead of allowing the number to
   merge visually with the last W/D/L badge on dynamically rendered favorite cards. */
.fixture-team-score {
    min-width: 25px;
    height: 25px;
    display: inline-grid;
    place-items: center;
    justify-self: end;
    margin-left: 4px;
    padding: 0 5px;
    border-left: 1px solid var(--line);
    color: var(--text);
    font-size: 1rem !important;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.saved-fixture-grid .fixture-card { min-width: 0; }
.saved-fixture-grid .fixture-team > div { min-width: 0; }
.saved-fixture-grid .fixture-team .form-badges { margin-left: auto; }

/* Readable provider statistic labels: title case, no underscores, and enough room
   for names such as Goalkeeper Saves and Expected Goals. */
.stats-row > div > strong {
    display: block;
    overflow-wrap: anywhere;
    text-transform: none;
    letter-spacing: 0;
}

@media (max-width: 700px) {
    .featured-directory-carousel .section-heading.split {
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        align-items: end;
        gap: 12px;
    }
    .featured-directory-carousel .section-heading p { display: none; }
    .carousel-controls button { width: 38px; height: 38px; }

    .team-profile-hero,
    .league-profile-hero {
        padding: 14px 0 18px !important;
    }
    .team-profile-hero .profile-hero-card,
    .league-profile-hero .profile-hero-card {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 15px !important;
        border-radius: 21px;
        background: linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
        border: 1px solid rgba(255,255,255,.13);
        box-shadow: 0 18px 38px rgba(0,0,0,.22);
    }
    .team-profile-main,
    .league-profile-main {
        display: grid !important;
        grid-template-columns: 72px minmax(0,1fr) !important;
        align-items: center !important;
        gap: 13px !important;
    }
    .team-profile-main > img,
    .league-profile-main > img {
        width: 72px !important;
        height: 72px !important;
        flex-basis: 72px;
        padding: 7px !important;
        border-radius: 17px !important;
    }
    .profile-hero-copy h1 {
        margin: 3px 0 5px;
        font-size: clamp(1.45rem,7.2vw,2rem) !important;
        line-height: 1.04;
    }
    .profile-hero-copy p {
        margin: 0 0 9px;
        color: #c5cfdd;
        font-size: .79rem;
        line-height: 1.35;
    }
    .profile-hero-copy .eyebrow { font-size: .65rem; }
    .profile-hero-copy .button {
        width: 100%;
        min-height: 39px;
        padding: 8px 11px;
        font-size: .78rem;
        border-radius: 11px;
    }
    .profile-hero-side {
        min-width: 0;
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding-top: 13px;
        border-top: 1px solid rgba(255,255,255,.12);
        text-align: left;
    }
    .profile-hero-side .team-rating-ring {
        order: 2;
        flex: 0 0 82px;
        width: 82px;
        height: 82px;
    }
    .profile-hero-side .team-rating-ring strong { font-size: 1.35rem; }
    .profile-hero-side .team-rating-ring span { font-size: .62rem; }
    .profile-hero-side small {
        max-width: 190px;
        font-size: .73rem;
        text-align: left;
    }
    .profile-hero-actions {
        min-width: 0;
        display: grid !important;
        grid-template-columns: 1fr auto;
        align-items: center;
        gap: 12px;
        padding-top: 13px;
        border-top: 1px solid rgba(255,255,255,.12);
        text-align: left;
    }
    .profile-hero-actions .button {
        width: 100%;
        min-width: 0;
        min-height: 40px;
        padding: 9px 12px;
        font-size: .78rem;
    }
    .profile-hero-actions small { max-width: 105px; text-align: right; }

    .fixture-team-score {
        min-width: 22px;
        height: 22px;
        margin-left: 2px;
        padding-inline: 4px;
        font-size: .88rem !important;
    }
    .stats-head,
    .stats-row { grid-template-columns: 62px minmax(0,1fr) 62px; }
    .stats-row > div { padding-inline: 8px; }
    .stats-row > div > strong { font-size: .78rem; line-height: 1.2; }
}

/* ==========================================================================
   2026-07-30 favorite cards use the same full-width list layout as match cards.
   Time/status, teams/form, scores and action each occupy a dedicated column.
   ========================================================================== */
.saved-fixture-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px;
    width: 100%;
}
.saved-fixture-grid .fixture-card-saved {
    width: 100%;
    min-width: 0;
}
.saved-fixture-grid .fixture-card-saved .fixture-card-main {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 54px minmax(108px, 136px);
    align-items: stretch;
    min-width: 0;
}
.saved-fixture-grid .fixture-card-saved.no-score .fixture-card-main {
    grid-template-columns: 96px minmax(0, 1fr) minmax(108px, 136px);
}
.saved-fixture-grid .fixture-card-saved .fixture-time {
    grid-column: 1;
    min-width: 0;
    padding: 12px 8px;
    border-right: 1px solid var(--line);
}
.saved-fixture-grid .fixture-card-saved .fixture-teams {
    grid-column: 2;
    display: grid;
    grid-template-rows: repeat(2, minmax(30px, auto));
    align-content: center;
    gap: 7px;
    min-width: 0;
    padding: 10px 16px;
}
.saved-fixture-grid .fixture-card-saved .fixture-team {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    min-width: 0;
}
.saved-fixture-grid .fixture-card-saved .fixture-team img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}
.saved-fixture-grid .fixture-card-saved .fixture-team > strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .92rem;
}
.saved-fixture-grid .fixture-card-saved .fixture-team .form-badges {
    display: flex;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    margin: 0;
    overflow: visible;
}
.saved-fixture-grid .fixture-card-saved .fixture-score-column {
    grid-column: 3;
    display: grid;
    grid-template-rows: repeat(2, minmax(30px, auto));
    align-content: center;
    place-items: center;
    gap: 7px;
    padding: 10px 8px;
    border-left: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}
.saved-fixture-grid .fixture-card-saved .fixture-score-column b {
    display: grid;
    place-items: center;
    width: 100%;
    min-width: 0;
    min-height: 28px;
    color: var(--text);
    font-size: 1.03rem;
    line-height: 1;
}
.saved-fixture-grid .fixture-card-saved .preview-button {
    grid-column: 4;
    min-width: 0;
    padding-inline: 14px;
    white-space: nowrap;
}
.saved-fixture-grid .fixture-card-saved.no-score .preview-button {
    grid-column: 3;
}
.saved-fixture-grid .fixture-card-saved .fixture-card-actions {
    min-height: 48px;
}
.saved-fixture-grid .fixture-card-saved .favorite-button {
    width: 96px;
    min-width: 96px;
    align-self: stretch;
    border-right: 1px solid var(--line);
}
.saved-fixture-grid .fixture-card-saved .mini-tip {
    flex: 1 1 auto;
    max-width: none;
    min-width: 0;
    border-left: 0;
}
.saved-fixture-grid .fixture-card-saved .mini-tip strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .saved-fixture-grid .fixture-card-saved .fixture-card-main {
        grid-template-columns: 72px minmax(0, 1fr) 40px 78px;
    }
    .saved-fixture-grid .fixture-card-saved.no-score .fixture-card-main {
        grid-template-columns: 72px minmax(0, 1fr) 78px;
    }
    .saved-fixture-grid .fixture-card-saved .fixture-time { padding: 9px 5px; }
    .saved-fixture-grid .fixture-card-saved .fixture-teams { padding: 8px 9px; gap: 5px; }
    .saved-fixture-grid .fixture-card-saved .fixture-team {
        grid-template-columns: 24px minmax(0, 1fr) auto;
        gap: 6px;
    }
    .saved-fixture-grid .fixture-card-saved .fixture-team img { width: 24px; height: 24px; }
    .saved-fixture-grid .fixture-card-saved .fixture-team > strong { font-size: .79rem; }
    .saved-fixture-grid .fixture-card-saved .fixture-team .form-badges span {
        width: 15px;
        height: 15px;
        font-size: .54rem;
    }
    .saved-fixture-grid .fixture-card-saved .fixture-score-column { padding: 8px 4px; gap: 5px; }
    .saved-fixture-grid .fixture-card-saved .fixture-score-column b { font-size: .9rem; }
    .saved-fixture-grid .fixture-card-saved .preview-button { padding-inline: 7px; font-size: .8rem; }
    .saved-fixture-grid .fixture-card-saved .favorite-button { width: 72px; min-width: 72px; }
}

@media (max-width: 480px) {
    .saved-fixture-grid .fixture-card-saved .fixture-card-main {
        grid-template-columns: 64px minmax(0, 1fr) 34px 62px;
    }
    .saved-fixture-grid .fixture-card-saved.no-score .fixture-card-main {
        grid-template-columns: 64px minmax(0, 1fr) 62px;
    }
    .saved-fixture-grid .fixture-card-saved .fixture-teams { padding-inline: 7px; }
    .saved-fixture-grid .fixture-card-saved .fixture-team { grid-template-columns: 22px minmax(0, 1fr) auto; gap: 5px; }
    .saved-fixture-grid .fixture-card-saved .fixture-team img { width: 22px; height: 22px; }
    .saved-fixture-grid .fixture-card-saved .fixture-team > strong { font-size: .73rem; }
    .saved-fixture-grid .fixture-card-saved .fixture-team .form-badges span:nth-child(-n+2) { display: none; }
    .saved-fixture-grid .fixture-card-saved .preview-button { font-size: .72rem; padding-inline: 4px; }
    .saved-fixture-grid .fixture-card-saved .favorite-button { width: 64px; min-width: 64px; }
    .saved-fixture-grid .fixture-card-saved .mini-tip { padding-inline: 9px; }
    .saved-fixture-grid .fixture-card-saved .mini-tip span { display: none; }
}