/* Home page ("Scoreboard" redesign): navy hero with the group card, scoreboard results, leagues as a list.
   Palette tokens live in layout.html (:root); type is Archivo, wide for display and condensed for labels. */
.fx-home {
    --fx-navy: var(--tfl-navy);
    --fx-lime: var(--tfl-lime);
    --fx-paper: var(--tfl-bg);
    --fx-line: var(--tfl-line);
    --fx-soft: #e9e6da;
    --fx-muted: var(--tfl-muted);
    background: var(--fx-paper);
    color: var(--fx-navy);
    font-size: 17px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
    margin-top: -1px;
    padding-bottom: 72px;
}
.fx-home h1, .fx-home h2, .fx-home h3 { color: inherit; margin: 0; font-weight: 800; font-stretch: 112%; letter-spacing: -.025em; }
.fx-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.fx-kicker, .fx-eyebrow { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-stretch: 85%; }
.fx-home h2.fx-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .14em; font-stretch: 85%; color: var(--fx-muted); }
.fx-muted { color: var(--fx-muted); }

/* Buttons */
.fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.fx-btn:hover { transform: translateY(-1px); }
.fx-btn:focus-visible { outline: 3px solid var(--fx-navy); outline-offset: 3px; }
.fx-hero .fx-btn:focus-visible, .fx-cta .fx-btn:focus-visible, .fx-hero a:focus-visible { outline: 3px solid var(--fx-lime); outline-offset: 3px; }
.fx-group .fx-btn:focus-visible, .fx-group a:focus-visible { outline-color: var(--fx-navy); }
.fx-btn-lg { min-height: 56px; padding: 0 28px; font-size: 18px; font-weight: 800; }
.fx-btn-sm { min-height: 44px; font-size: 15px; padding: 0 20px; }
.fx-btn-lime { background: var(--fx-lime); color: var(--fx-navy); }
.fx-btn-lime:hover { color: var(--fx-navy); box-shadow: 0 6px 18px rgba(216, 245, 60, .35); }
.fx-btn-ghost { border-color: rgba(255, 255, 255, .32); color: #fff; font-weight: 600; }
.fx-btn-ghost:hover { color: #fff; border-color: #fff; }
.fx-btn-navy { background: var(--fx-navy); color: #fff; }
.fx-btn-navy:hover { color: #fff; }
.fx-btn-outline { border-color: var(--fx-navy); color: var(--fx-navy); min-height: 44px; font-size: 15px; padding: 0 18px; }
.fx-btn-outline:hover { background: var(--fx-navy); color: #fff; }
.fx-link { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: rgba(255, 255, 255, .45); }
.fx-link:hover { color: var(--fx-lime); }

/* Hero */
.fx-hero { background: var(--fx-navy); color: #fff; padding: 56px 0 88px; }
.fx-hero--member { padding: 44px 0 104px; }
.fx-hero-grid { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px 56px; }
.fx-hero-main { flex: 1 1 520px; min-width: 0; }
.fx-hero .fx-kicker { color: var(--fx-lime); }
.fx-hero h1 { margin-top: 14px; font-stretch: 120%; font-size: clamp(40px, 6.4vw, 84px); line-height: .98; letter-spacing: -.04em; }
.fx-hero--member h1 { font-size: clamp(38px, 5vw, 64px); }
.fx-hero h1 em { font-style: normal; color: var(--fx-lime); }
.fx-hero-lead { margin: 24px 0 0; max-width: 520px; font-size: 20px; color: rgba(255, 255, 255, .84); }
.fx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 32px; }
.fx-home .alert { margin-bottom: 20px; }
.fx-chips { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fx-chips li { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); font-weight: 600; }
.fx-chips strong { font-weight: 800; }
.fx-chips a { color: var(--fx-lime); text-decoration: none; }
.fx-chips a:hover { text-decoration: underline; }

/* Visitor stats under the hero copy */
.fx-stats { list-style: none; margin: 44px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 16px 36px; }
.fx-stats li { display: flex; flex-direction: column; }
.fx-stat-num { font-weight: 800; font-stretch: 118%; font-size: 40px; line-height: 1; color: #fff; }
.fx-stat-label { color: rgba(255, 255, 255, .74); font-weight: 500; }

/* "Who are you playing next?" */
.fx-group { flex: 0 1 440px; min-width: 0; background: #fff; color: var(--fx-navy); border-radius: 24px; padding: 24px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); }
.fx-group-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fx-group-all { min-height: 44px; display: inline-flex; align-items: center; font-weight: 700; color: var(--fx-navy); text-underline-offset: 4px; }
.fx-group-title { margin: 0; font-weight: 800; font-stretch: 112%; font-size: 24px; line-height: 1.15; letter-spacing: -.02em; }
.fx-group-lead { margin: 6px 0 14px; color: var(--fx-muted); font-size: 16px; }
.fx-group-list { list-style: none; margin: 0; padding: 0; }
.fx-group-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--fx-soft); }
.fx-avatar { flex: none; width: 42px; height: 42px; border-radius: 999px; background: var(--fx-soft); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; }
.fx-group-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fx-group-name { font-weight: 800; color: var(--fx-navy); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-group-name:hover { text-decoration: underline; color: var(--fx-navy); }
.fx-group-skill { font-size: 14px; color: var(--fx-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* "Skill level 4.0" and "Skill rating 1580" break at the dot, not inside a pair, except on the
   narrowest phones, where a pair is wider than the column and would be clipped. */
.fx-skill-pair { white-space: nowrap; }
@media (max-width: 359.98px) { .fx-skill-pair { white-space: normal; } }
.fx-group-why { font-size: 14px; color: var(--fx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-icon-btn { flex: none; width: 44px; height: 44px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid var(--fx-navy); color: var(--fx-navy); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; text-decoration: none; }
.fx-icon-btn:hover { background: var(--fx-paper); color: var(--fx-navy); }
.fx-icon-btn--solid { background: var(--fx-navy); color: #fff; }
.fx-icon-btn--solid:hover { background: #1a3563; color: #fff; }

/* Visitor preview (decorative) */
.fx-preview { flex: 0 1 440px; min-width: 0; position: relative; padding: 16px 0 104px; }
.fx-preview-board { background: #fff; color: var(--fx-navy); border-radius: 24px; padding: 22px; box-shadow: 0 30px 70px rgba(0, 0, 0, .35); transform: rotate(-2deg); }
.fx-preview-row { margin-top: 12px; display: flex; align-items: center; gap: 10px; font-size: 19px; color: #3b4556; }
.fx-preview-row.is-winner { color: var(--fx-navy); font-weight: 800; }
.fx-preview-row:not(.is-winner) .fx-dot { visibility: hidden; }
.fx-preview-name { flex: 1 1 auto; }
.fx-preview .fx-set { width: 40px; height: 40px; font-size: 20px; }
.fx-preview-standing { position: absolute; right: -6px; bottom: 0; width: 250px; background: var(--fx-lime); color: var(--fx-navy); border-radius: 20px; padding: 16px 18px; box-shadow: 0 20px 50px rgba(0, 0, 0, .3); transform: rotate(3deg); font-weight: 600; }
.fx-preview-big { font-weight: 800; font-stretch: 115%; font-size: 30px; line-height: 1.05; }

/* Shared scoreboard pieces */
.fx-board-top { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-stretch: 85%; color: var(--fx-muted); }
.fx-dot { display: inline-block; flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--fx-lime); box-shadow: 0 0 0 1.5px var(--fx-navy); }
.fx-set { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--fx-soft); color: var(--fx-navy); font-weight: 600; font-size: 17px; }
.fx-set.is-won { background: var(--fx-navy); color: #fff; font-weight: 800; }
.fx-set sup { font-size: 10px; margin-left: 1px; }

/* Promo sits between hero and dashboard */
.fx-promo-wrap { padding-top: 28px; }
.fx-hero--member + .fx-promo-wrap { margin-top: -72px; padding-top: 0; position: relative; }

/* Member dashboard */
.fx-dash { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 28px; }
.fx-hero--member + .fx-dash { margin-top: -64px; position: relative; }
.fx-card { background: #fff; border: 1px solid var(--fx-line); border-radius: 24px; padding: 28px; min-width: 0; }
.fx-card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.fx-card-head--end { align-items: flex-start; }
.fx-card-title { font-size: 28px; line-height: 1.1; }
.fx-leagues { grid-column: 1 / -1; }
.fx-boards { margin-top: 20px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.fx-results .fx-board-top > :first-child { min-width: 0; overflow-wrap: anywhere; }
.fx-results .fx-board-meta { display: flex; flex: none; flex-direction: column; align-items: flex-end; gap: 3px; }
.fx-results .fx-board-meta time { white-space: nowrap; }
.fx-board { display: block; color: var(--fx-navy); text-decoration: none; border: 1px solid var(--fx-line); border-radius: 16px; padding: 14px 16px; background: #fbfaf6; }
.fx-board:hover { border-color: var(--fx-navy); color: var(--fx-navy); }
.fx-board:focus-visible { outline: 3px solid var(--fx-navy); outline-offset: 2px; }
.fx-provisional { display: inline-flex; padding: 0 8px; border-radius: 999px; background: #ffe08a; color: var(--fx-navy); letter-spacing: .06em; }
.fx-board-table { width: 100%; margin-top: 8px; border-collapse: separate; border-spacing: 0 6px; }
.fx-board-table td { padding: 0; vertical-align: middle; }
.fx-board-dot { width: 18px; }
.fx-board-name { overflow-wrap: anywhere; padding-right: 8px; color: #3b4556; font-weight: 500; }
.is-winner .fx-board-name { color: var(--fx-navy); font-weight: 800; }
.fx-board-set { width: 40px; text-align: right; }
.fx-rating-num { margin-top: 4px; font-weight: 800; font-stretch: 118%; font-size: 60px; line-height: 1; letter-spacing: -.04em; }
.fx-soft-pill { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: 999px; background: var(--fx-lime); color: var(--fx-navy); font-size: 13px; font-weight: 700; }
.fx-chart { position: relative; height: 170px; margin-top: 16px; }
.fx-league-list { list-style: none; margin: 14px 0 0; padding: 0; }
.fx-league-list li { border-top: 1px solid var(--fx-soft); }
.fx-league-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; min-height: 64px; padding: 12px 4px; color: var(--fx-navy); text-decoration: none; }
.fx-league-row:hover { background: var(--fx-paper); color: var(--fx-navy); }
.fx-league-name { flex: 1 1 260px; min-width: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-weight: 800; font-size: 19px; }
.fx-league-status { flex: 0 0 170px; display: inline-flex; }
.fx-league-dates { flex: 1 1 220px; color: var(--fx-muted); font-weight: 500; }
.fx-league-city { flex: 0 0 auto; color: var(--fx-muted); font-weight: 500; }
.fx-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; white-space: nowrap; padding: 0 12px; border-radius: 999px; background: var(--fx-navy); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fx-pill::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--fx-lime); }
.fx-pill--upcoming { background: #ffe08a; color: var(--fx-navy); }
.fx-pill--upcoming::before { background: var(--fx-navy); }
.fx-pill--closed { background: var(--fx-soft); color: #3b4556; }
.fx-pill--closed::before { background: #8a93a3; }
.fx-tag { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 12px; background: var(--fx-lime); border-radius: 999px; font-weight: 700; font-size: 13px; }

/* How it works / levels / closing CTA */
.fx-how { padding-top: 88px; }
.fx-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; }
.fx-section-head h2, .fx-levels h2 { font-stretch: 118%; font-size: clamp(34px, 4.4vw, 52px); line-height: 1; letter-spacing: -.035em; }
.fx-section-head p { margin: 0; max-width: 420px; color: var(--fx-muted); }
.fx-steps { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 20px; }
.fx-step { background: #fff; border: 1px solid var(--fx-line); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.fx-step-top { display: flex; align-items: center; justify-content: space-between; }
.fx-step-num { font-weight: 800; font-stretch: 120%; font-size: 56px; line-height: 1; letter-spacing: -.04em; }
.fx-step-icon { width: 56px; height: 56px; border-radius: 999px; background: var(--fx-lime); display: inline-flex; align-items: center; justify-content: center; font-size: 24px; }
.fx-step h3 { font-size: 26px; }
.fx-step p { margin: 0; color: var(--fx-muted); }
.fx-levels { padding-top: 88px; }
.fx-level-grid { margin-top: 36px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); border-top: 2px solid var(--fx-navy); }
.fx-level { padding: 26px 24px 26px 0; border-bottom: 1px solid var(--fx-line); }
.fx-level + .fx-level { padding-left: 24px; border-left: 1px solid var(--fx-line); }
.fx-level-big { font-weight: 800; font-stretch: 118%; font-size: clamp(36px, 4vw, 52px); line-height: 1; letter-spacing: -.035em; }
.fx-level p { margin: 10px 0 0; color: var(--fx-muted); }
.fx-cta-wrap { padding-top: 88px; }
.fx-cta { background: var(--fx-navy); color: #fff; border-radius: 32px; padding: clamp(28px, 5vw, 56px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.fx-cta h2 { font-stretch: 118%; font-size: clamp(32px, 4.2vw, 52px); line-height: 1.02; letter-spacing: -.035em; }
.fx-cta h2 em { font-style: normal; color: var(--fx-lime); }
.fx-cta p { margin: 14px 0 0; max-width: 480px; color: rgba(255, 255, 255, .84); font-size: 19px; }

/* Wide enough for columns: status, dates and city line up row to row instead of following each name's length. */
@media (min-width: 1200px) {
    .fx-league-row { display: grid; grid-template-columns: minmax(0, 1fr) 170px 230px 230px 18px; gap: 6px 20px; }
    .fx-league-city { text-align: right; }
}
@media (max-width: 991.98px) {
    .fx-preview { display: none; }
    .fx-dash { grid-template-columns: minmax(0, 1fr); }
    .fx-group { flex-basis: 100%; }
}
@media (max-width: 767.98px) {
    .fx-hero { padding: 36px 0 64px; }
    .fx-hero--member { padding: 28px 0 88px; }
    .fx-hero-lead { font-size: 18px; }
    .fx-stat-num { font-size: 32px; }
    .fx-card, .fx-group { padding: 20px; border-radius: 22px; }
    .fx-card-title { font-size: 24px; }
    .fx-league-status { flex-basis: auto; }
    .fx-league-row .bi-chevron-right { display: none; }
    .fx-group-skill, .fx-group-why { white-space: normal; }
    .fx-level, .fx-level + .fx-level { padding: 22px 0; border-left: 0; }
    .fx-how, .fx-levels, .fx-cta-wrap { padding-top: 64px; }
}

/* New score reporting is available to members with or without a league. */
.fx-score-announcement { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin: 1.5rem 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--tfl-line); border-radius: 16px; background: var(--tfl-navy, #112c40); color: #fff; }
.fx-score-announcement > div { min-width: 0; max-width: 48rem; }
.fx-score-announcement .fx-eyebrow { color: #d7ef91; margin-bottom: .5rem; }
.fx-score-announcement h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); margin: 0 0 .65rem; }
.fx-score-announcement p:last-child { margin: 0; line-height: 1.6; }
.fx-score-announcement .fx-btn { flex-shrink: 0; }
@media (max-width: 575.98px) { .fx-score-announcement { flex-direction: column; align-items: flex-start; gap: 1rem; } }

/* Tournament obligations lead the home suggestions, with readable deadlines on phones. */
.fx-group-list .fx-home-fixture { display: block; }
.fx-home-fixture .fx-group-name, .fx-home-fixture .fx-group-why { white-space: normal; overflow-wrap: anywhere; }
.fx-home-deadline { font-size: 14px; }
.fx-home-fixture-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; }
.fx-home-result { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--fx-navy); }