/* mod_fixture_page — fixture_page.css v1.23
   Brand tokens mirror user.css: green #2e6a32, charcoal #2F3336, grey #F4F4F4
   v1.07: Match Preview cards now IMAGE-TOP / TEXT-BELOW, 2-up on desktop,
          1-up on mobile (home-page card style). */

#fwf-fixture-page {
    font-family: Arial, sans-serif;
    width: 100%;
    padding: 0 0 40px;
    color: #2F3336;
    background: #F4F4F4;
}

.fwf-fx-notice {
    padding: 40px;
    text-align: center;
    color: #888;
    font-style: italic;
    font-family: Arial, sans-serif;
}

/* ── HERO ── */
.fwf-fx-hero {
    color: #fff;
    padding: 18px 40px 30px;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.fwf-fx-league {
    font-size: 0.8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.85;
    margin-bottom: 20px;
}
.fwf-fx-teams {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.fwf-fx-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 1;
    max-width: 240px;
}
.fwf-fx-crest {
    width: 110px;
    height: 110px;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.35));
}
.fwf-fx-team-name {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.2;
}
.fwf-fx-vs {
    font-size: 1.4rem;
    font-weight: 800;
    opacity: 0.7;
    flex-shrink: 0;
}
/* v1.23: full-time result in the hero (replaces the "v") */
.fwf-fx-result { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; }
.fwf-fx-result-score { font-size: 2.1rem; font-weight: 800; line-height: 1; letter-spacing: 0.02em; }
.fwf-fx-result-dash { opacity: 0.6; margin: 0 6px; }
.fwf-fx-result-ft { font-size: 0.62rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; background: rgba(0,0,0,0.28); padding: 3px 10px; border-radius: 20px; }
.fwf-fx-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 20px;
    margin-top: 24px;
    font-size: 0.9rem;
    font-weight: 600;
}
.fwf-fx-meta-item {
    background: rgba(0,0,0,0.22);
    padding: 6px 14px;
    border-radius: 20px;
}
.fwf-fx-meta-icon {
    height: 24px;
    width: 24px;
    object-fit: contain;
    vertical-align: -6px;
    margin-right: 2px;
}

/* ── SECTIONS ── */
.fwf-fx-section {
    background: #fff;
    border-radius: 10px;
    padding: 20px 24px;
    margin-bottom: 20px;
    box-shadow: 7px 9px 11px -8px rgba(0,0,0,0.1);
}
.fwf-fx-section-title {
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #2F3336;
    margin: 0 0 16px;
}

/* ── PREVIEW CARDS (v1.12: 2+ = image-top card grid; 1 = old horizontal, full width) ── */
.fwf-fx-previews { gap: 16px; }
.fwf-fx-previews-multi {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.fwf-fx-previews-single {
    display: flex;
    flex-direction: column;
}
.fwf-fx-preview-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: #fff;
    border: 1.5px solid #e8e8f0;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.fwf-fx-preview-card:hover {
    border-color: #2e6a32;
    box-shadow: 0 4px 14px rgba(46,106,50,0.15);
    transform: translateY(-2px);
}
.fwf-fx-preview-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.fwf-fx-preview-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
/* SINGLE preview → horizontal card (image left, text right), full width, no lopsided gap */
.fwf-fx-previews-single .fwf-fx-preview-card { flex-direction: row; }
.fwf-fx-previews-single .fwf-fx-preview-card:hover { transform: none; }
.fwf-fx-previews-single .fwf-fx-preview-img {
    width: 200px;
    aspect-ratio: auto;
    min-height: 130px;
    flex-shrink: 0;
}
.fwf-fx-previews-single .fwf-fx-preview-body { justify-content: center; }

/* ── FAN PREDICTIONS (v1.18: badge in the label row, full-width dynamic names) ── */
.fwf-fx-pred { margin: 0; }
.fwf-fx-pred-divider { border-top: 1px solid #eee; padding-top: 18px; margin-top: 18px; }
.fwf-fx-pred-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fwf-fx-pred-crest { width: 42px; height: 42px; object-fit: contain; flex-shrink: 0; }
.fwf-fx-pred-label { font-size: 1rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #7DAA68; }
.fwf-fx-pred-score { font-size: 1.15rem; font-weight: 800; color: #2F3336; white-space: nowrap; }
.fwf-fx-pred-dash { color: #bbb; }
/* home: badge + label left, score pushed to the right edge */
.fwf-fx-pred-home .fwf-fx-pred-score { margin-left: auto; }
/* away: score left, label + badge pushed to the right edge (mirror) */
.fwf-fx-pred-head-r .fwf-fx-pred-label { margin-left: auto; }
.fwf-fx-pred-bars { display: grid; grid-template-columns: max-content 1fr; column-gap: 10px; row-gap: 6px; align-items: center; }
.fwf-fx-pred-bars-r { grid-template-columns: 1fr max-content; }
.fwf-fx-pred-bar { display: contents; }
.fwf-fx-pred-team { font-size: 0.82rem; font-weight: 700; color: #555; white-space: nowrap; }
.fwf-fx-pred-team-r { text-align: left; }
.fwf-fx-pred-track { min-width: 0; height: 13px; background: #eee; border-radius: 7px; overflow: hidden; }
.fwf-fx-pred-track-r { display: flex; justify-content: flex-end; }
.fwf-fx-pred-fill { display: block; height: 100%; border-radius: 7px; }
.fwf-fx-pred-fill-home { background: #2e6a32; }
.fwf-fx-pred-fill-away { background: #9ec49a; }

/* ── GOAL TIMELINE (v1.21) — home goals left, away right, running score centre ── */
.fwf-fx-timeline { position: relative; }
/* v1.28: removed old ::before centre-line — the new circle/vertical/horizontal timeline draws its own axes; the leftover line struck through the visuals and tabs. */
.fwf-fx-tl-head { display: flex; justify-content: space-between; margin-bottom: 12px; }
.fwf-fx-tl-head-home, .fwf-fx-tl-head-away { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: #2e6a32; max-width: 45%; }
.fwf-fx-tl-head-away { text-align: right; }
.fwf-fx-tl-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 10px; margin: 8px 0; position: relative; }
.fwf-fx-tl-cell-home { text-align: right; }
.fwf-fx-tl-cell-away { text-align: left; }
.fwf-fx-tl-goal { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 700; color: #1a1a2e; }
.fwf-fx-tl-min { color: #2e6a32; font-weight: 800; }
.fwf-fx-tl-score { position: relative; z-index: 1; background: #2e6a32; color: #fff; font-weight: 800; font-size: 0.82rem; padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
@media (max-width: 600px) {
    .fwf-fx-pred-crest { width: 40px; height: 40px; }
    .fwf-fx-pred-label { font-size: 0.9rem; }
    .fwf-fx-pred-team { font-size: 0.76rem; }
}
.fwf-fx-preview-dom {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    color: #7DAA68;
    margin-bottom: 4px;
}
.fwf-fx-preview-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.3;
    margin-bottom: 4px;
}
.fwf-fx-preview-desc {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── CLUB LINKS ── */
.fwf-fx-clublinks {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.fwf-fx-clublink {
    color: #2e6a32;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.95rem;
}
.fwf-fx-clublink:hover { text-decoration: underline; }

/* ── MOBILE ── */
@media (max-width: 600px) {
    .fwf-fx-hero { padding: 14px 16px 22px; }
    .fwf-fx-teams { gap: 12px; }
    .fwf-fx-crest { width: 76px; height: 76px; }
    .fwf-fx-team-name { font-size: 0.9rem; }
    .fwf-fx-previews-multi { grid-template-columns: 1fr; }
    .fwf-fx-previews-single .fwf-fx-preview-card { flex-direction: column; }
    .fwf-fx-previews-single .fwf-fx-preview-img { width: 100%; aspect-ratio: 16 / 9; min-height: 0; }
    .fwf-fx-section { padding: 16px; }
}

/* ── TICKETS ── */
.fwf-fx-tstatus {
    font-size: 0.7rem;
    font-weight: 800;
    color: #fff;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 10px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fwf-fx-onsale { font-size: 0.9rem; color: #b45309; font-weight: 600; margin: 0 0 12px; }
.fwf-fx-ticket-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
.fwf-fx-ticket-table td { padding: 10px 4px; border-bottom: 1px solid #eee; }
.fwf-fx-ticket-table tr:last-child td { border-bottom: none; }
.fwf-fx-tclass { font-weight: 700; color: #2F3336; }
.fwf-fx-tnote { display: block; font-size: 0.78rem; font-weight: 400; color: #888; }
.fwf-fx-tprice { text-align: right; font-weight: 800; color: #2e6a32; white-space: nowrap; font-size: 1.05rem; }
.fwf-fx-tinfo { font-size: 0.9rem; color: #555; line-height: 1.5; margin: 0 0 14px; }
.fwf-fx-tlinks { display: flex; flex-wrap: wrap; gap: 10px; }
.fwf-fx-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    background: #F4F4F4;
    color: #2F3336;
    border: 1.5px solid #e0e0e0;
    transition: all 0.15s;
}
.fwf-fx-btn:hover { border-color: #2e6a32; color: #2e6a32; }
.fwf-fx-btn-primary { background: #fff; color: #2e6a32; border-color: #2e6a32; }
.fwf-fx-btn-primary:hover { background: #2e6a32; color: #fff; border-color: #2e6a32; }
.fwf-fx-btn-muted { background: #f4f4f4; color: #aaa; border-color: #eee; cursor: default; }
.fwf-fx-btn-sm { padding: 7px 14px; font-size: 0.82rem; margin: 4px 0 2px; }
.fwf-fx-btn-primary.fwf-fx-btn-sm:hover { color: #fff; }

/* ── PREDICT THE SCORE (guest hook) ── */
.fwf-fx-predict-sub { font-size: 0.92rem; color: #555; margin: 0 0 14px; }

/* v1.59: SCOREBOARD look — dark panel, LED-style digit boxes for the score dropdowns.
   flex-wrap is explicitly NEVER allowed (nowrap always, even on mobile) — team columns
   use min-width:0 + ellipsis on the name so a long club name shrinks/truncates rather
   than forcing a second line. The score boxes never shrink (flex-shrink:0) since they're
   the whole point of the row; the team columns are what flex to make room. */
.fwf-fx-predict-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: linear-gradient(180deg, #2F3336 0%, #1c1e20 100%);
    border-radius: 12px;
    padding: 12px 10px;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.fwf-fx-predict-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1 1 0;
    min-width: 0;
    max-width: 150px;
    background: none;
    border: 1.5px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    padding: 6px 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: inherit;
}
.fwf-fx-predict-fanlabel {
    font-size: 0.6rem;
    color: rgba(255,255,255,0.45);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
    white-space: nowrap;
}
.fwf-fx-predict-crest {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin: 2px 0;
    background: #fff;
    border-radius: 50%;
    padding: 5px;
    flex-shrink: 0;
}
.fwf-fx-predict-teamname {
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
    text-align: center;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fwf-fx-predict-team.fwf-fx-fanof-active { background: rgba(125,170,104,0.25); border-color: #7DAA68; }
.fwf-fx-predict-team.fwf-fx-fanof-active .fwf-fx-predict-fanlabel { color: #9cc98a; }
.fwf-fx-predict-team.fwf-fx-fanof-active .fwf-fx-predict-teamname { color: #9cc98a; }
/* v1.66: plain crest identifier for logged-in users — same look, no button behaviour */
.fwf-fx-predict-team-static { cursor: default; }
.fwf-fx-predict-team-static:not(.fwf-fx-fanof-active) { border-color: rgba(255,255,255,0.18); background: none; }

/* LED-style digit boxes — the visual anchor of the whole row, never shrinks */
.fwf-fx-predict-scores {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.fwf-fx-predict-select {
    appearance: none;
    -webkit-appearance: none;
    width: 52px;
    height: 60px;
    text-align: center;
    text-align-last: center;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 8px;
    background: #0f1110;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.6);
    font-size: 2rem;
    font-weight: 800;
    color: #7DAA68;
    font-family: 'Courier New', Courier, monospace;
    cursor: pointer;
}
.fwf-fx-predict-select:focus { outline: none; box-shadow: inset 0 2px 4px rgba(0,0,0,0.6), 0 0 0 2px #7DAA68; }
.fwf-fx-predict-select option { font-size: 1rem; font-family: Arial, sans-serif; color: #000; }
.fwf-fx-predict-dash { font-size: 1.4rem; font-weight: 800; color: rgba(255,255,255,0.35); flex-shrink: 0; }
@media (max-width: 500px) {
    .fwf-fx-predict-row { gap: 4px; padding: 10px 6px; }
    .fwf-fx-predict-team { padding: 4px 2px; gap: 2px; }
    .fwf-fx-predict-crest { width: 30px; height: 30px; padding: 4px; }
    .fwf-fx-predict-fanlabel { font-size: 0.52rem; }
    .fwf-fx-predict-teamname { font-size: 0.68rem; }
    .fwf-fx-predict-scores { gap: 3px; }
    .fwf-fx-predict-select { width: 38px; height: 46px; font-size: 1.5rem; }
    .fwf-fx-predict-dash { font-size: 1.1rem; }
}
@media (max-width: 360px) {
    .fwf-fx-predict-crest { width: 24px; height: 24px; padding: 3px; }
    .fwf-fx-predict-teamname { font-size: 0.6rem; }
    .fwf-fx-predict-select { width: 32px; height: 42px; font-size: 1.3rem; }
}

.fwf-fx-predict-email-input {
    flex: 1;
    min-width: 180px;
    padding: 10px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 24px;
    font-size: 0.9rem;
}
.fwf-fx-predict-email-input:focus { outline: none; border-color: #2e6a32; }
.fwf-fx-predict-skip {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    color: #888;
    font-size: 0.8rem;
    text-decoration: underline;
    cursor: pointer;
    padding: 8px 0 2px;
    font-family: inherit;
}
.fwf-fx-predict-skip:hover { color: #2e6a32; }
.fwf-fx-predict-msg { font-size: 0.82rem; margin-top: 8px; min-height: 1.2em; }
.fwf-fx-predict-msg-err { color: #e11d48; }
@media (max-width: 500px) {
    .fwf-fx-predict-row { gap: 10px; }
    .fwf-fx-predict-num { width: 44px; height: 40px; font-size: 1.2rem; }
}

/* ── GETTING THERE ── */
.fwf-fx-travel-rows { display: flex; flex-direction: column; gap: 14px; margin-bottom: 16px; }
.fwf-fx-travel-row { display: flex; gap: 14px; align-items: flex-start; }
.fwf-fx-travel-ico { font-size: 1.3rem; flex-shrink: 0; width: 28px; text-align: center; }
.fwf-fx-travel-ico img { width: 26px; height: 26px; object-fit: contain; vertical-align: middle; }
.fwf-fx-travel-row strong { color: #2F3336; font-size: 0.95rem; }
.fwf-fx-travel-row a { color: #2e6a32; font-weight: 700; text-decoration: none; }
.fwf-fx-travel-row a:hover { text-decoration: underline; }
.fwf-fx-travel-sub { font-size: 0.82rem; color: #999; margin-left: 6px; }
.fwf-fx-parking-list { margin: 6px 0 0; padding-left: 0; list-style: none; }
.fwf-fx-parking-list li { padding: 4px 0; font-size: 0.9rem; color: #444; }
.fwf-fx-pk-name { font-weight: 700; color: #2F3336; }
.fwf-fx-pk-detail { color: #777; }
/* v1.32: parking tag chips */
.fwf-fx-pk-tags { display: inline-block; margin-left: 2px; }
.fwf-fx-pk-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; color: #2e6a32; background: #e6f0e2; border: 1px solid #cbe0c4; padding: 1px 8px; border-radius: 10px; margin: 2px 4px 0 0; }
/* v1.63: "Get directions" dropdown — one lozenge button (matches .fwf-fx-btn-primary),
   opening a small self-contained menu (not Bootstrap — see JS/PHP comments for why). */
.fwf-fx-mapdrop { display: block; position: relative; margin-top: 6px; }
.fwf-fx-mapdrop-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 40;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.18);
    min-width: 190px;
    padding: 6px;
}
.fwf-fx-mapdrop-menu.open { display: block; }
.fwf-fx-mapdrop-group {
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #aaa;
    padding: 8px 10px 4px;
}
.fwf-fx-mapdrop-item {
    display: block;
    padding: 8px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #2F3336;
    text-decoration: none;
}
.fwf-fx-mapdrop-item:hover { background: #f4f4f4; }

/* Distance / postcode lozenges on each car park row */
.fwf-fx-pk-pill {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    color: #555;
    background: #eceef0;
    padding: 2px 9px;
    border-radius: 10px;
    margin: 2px 4px 0 0;
}
.fwf-fx-pk-pill-copy {
    position: relative;
    cursor: pointer;
    transition: background 0.15s;
}
.fwf-fx-pk-pill-copy:hover { background: #dfe2e5; }
.fwf-fx-pk-pill-copy.is-copied::after {
    content: attr(data-copied);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #1a1a2e;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 5px;
    white-space: nowrap;
    pointer-events: none;
}
#fwf-fx-map { height: 280px; border-radius: 10px; margin-top: 8px; z-index: 0; }

/* ── CYA FOOTER ── */
.fwf-fx-cya-note { font-size: 0.9rem; color: #666; line-height: 1.5; margin: 0 0 14px; }

@media (max-width: 600px) {
    #fwf-fx-map { height: 220px; }
    .fwf-fx-btn { padding: 9px 14px; font-size: 0.85rem; }
}

/* ── CYA lozenges: home left, league right ── */
.fwf-fx-cya-links { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; }
.fwf-fx-lozenge {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 24px;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    background: #fff;
    color: #2F3336;
    border: 1.5px solid #e0e0e0;
    transition: all 0.15s;
}
.fwf-fx-lozenge:hover { border-color: #2e6a32; color: #2e6a32; }
.fwf-fx-lozenge-home { margin-right: auto; }
.fwf-fx-lozenge-away { margin-left: auto; }
@media (max-width: 600px) {
    .fwf-fx-cya-links { flex-direction: column; align-items: stretch; }
    .fwf-fx-lozenge { text-align: center; }
}

/* Bottom club links — lozenges on the grey background, with breathing room */
.fwf-fx-clublinks { padding: 4px 4px 0; }

/* ── v1.57: scoreboard-style Fan Predictions chart ──────────────────────────
   One continuous bar per row on a recessed "tally" track, crests flanking the whole
   card. Colours match the existing key dots exactly (green/amber/charcoal). */
.fwf-fx-sboard {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}
.fwf-fx-sboard-crest {
    width: 46px;
    height: 46px;
    object-fit: contain;
    flex-shrink: 0;
}
.fwf-fx-sboard-tracks {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}
.fwf-fx-sboard-track {
    position: relative;
    height: 44px;
    background: #eceef0;
    border-radius: 10px;
    box-shadow: inset 0 1px 4px rgba(0,0,0,0.12);
    overflow: hidden;
}
/* decorative tally ticks — a fixed ruler texture, not tied 1:1 to goal count */
.fwf-fx-sboard-tally {
    position: absolute;
    inset: 0;
    display: flex;
}
.fwf-fx-sboard-tally span {
    flex: 1;
    border-right: 1px solid rgba(0,0,0,0.055);
}
.fwf-fx-sboard-tally span:last-child { border-right: none; }
.fwf-fx-sboard-bar {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 10px;
    transition: left 0.2s, width 0.2s;
}
.fwf-fx-sboard-track-home   .fwf-fx-sboard-bar { background: #7DAA68; }
.fwf-fx-sboard-track-away   .fwf-fx-sboard-bar { background: #E0A43B; }
.fwf-fx-sboard-track-actual .fwf-fx-sboard-bar { background: #2F3336; }
/* v1.58: the pill is a SIBLING of the bar, not a child — fixed dead-centre of the
   track always (matches the old blocks design, where the pill never moved regardless
   of how many blocks sat on each side). The bar's own span still shows the h/a magnitude
   correctly; only the pill's position needed to stop drifting with it. */
.fwf-fx-sboard-pill {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 800;
    color: #2F3336;
    background: #fff;
    border-radius: 8px;
    padding: 4px 12px;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.fwf-fx-sboard-pill-v { color: #aaa; font-weight: 700; font-size: 0.8rem; margin: 0 5px; }
@media (max-width: 500px) {
    .fwf-fx-sboard { gap: 8px; }
    .fwf-fx-sboard-crest { width: 34px; height: 34px; }
    .fwf-fx-sboard-track { height: 38px; }
    .fwf-fx-sboard-pill { font-size: 0.88rem; padding: 3px 9px; }
}
/* colour key */
.fwf-fx-dv-key {
    display: flex; justify-content: center; flex-wrap: wrap;
    margin-top: 14px; padding-top: 12px; border-top: 1px solid #eee;
    font-size: 0.76rem; font-weight: 700; color: #777;
}
.fwf-fx-dv-key-item { display: inline-flex; align-items: center; margin: 0 9px; }  /* Safari<14.1 gap fallback (≈18px between) */
.fwf-fx-dv-key-dot { margin-right: 6px; }  /* Safari<14.1: replaces item inner gap */
.fwf-fx-dv-key-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.fwf-fx-dv-dot-home   { background: #7DAA68; }
.fwf-fx-dv-dot-away   { background: #E0A43B; }
.fwf-fx-dv-dot-actual { background: #2F3336; }

/* ── v1.44: Postponed / cancelled fixture styling ─────────────────────────────
   Greys the hero crests and shows a banner + "P-P" instead of the v / score. */
.fwf-fx-postbanner {
    display: inline-block; margin: 0 auto 10px; padding: 4px 16px;
    background: #f59e0b; color: #fff; font-weight: 800; font-size: 0.82rem;
    text-transform: uppercase; letter-spacing: 0.06em; border-radius: 20px;
}
.fwf-fx-hero-postponed .fwf-fx-crest {
    filter: grayscale(100%) opacity(55%);   /* grey out the logos */
}
.fwf-fx-hero-postponed .fwf-fx-team-name { opacity: 0.6; }
.fwf-fx-vs-pp {
    color: #f59e0b !important; font-weight: 800; letter-spacing: 0.04em;
}

/* ── v1.68: Weather block ── */
.fwf-fx-weather { display: flex; gap: 16px; align-items: center; }
.fwf-fx-weather-icon { flex: none; width: 64px; height: 64px; }
.fwf-fx-weather-info { flex: 1; min-width: 0; }
.fwf-fx-weather-headline { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fwf-fx-weather-temp { font-size: 1.6rem; font-weight: 800; color: #2F3336; }
.fwf-fx-weather-text { font-size: 0.98rem; color: #2F3336; }
.fwf-fx-weather-sub { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 4px; font-size: 0.85rem; color: #6b7280; }
.fwf-fx-weather-note { margin-top: 6px; font-size: 0.78rem; color: #9aa39a; }
.fwf-fx-weather-feelslike { font-size: 0.82rem; color: #6b7280; }
.fwf-fx-weather-sunset-warn { color: #b45309; font-weight: 700; }