/* styles.css — World Cup 2026 dashboard (single stylesheet) Modern dark skin: charcoal-to-black gradient ground with soft amber/blue glows, translucent "glass" panels, hairline borders, gradient-gold accents. Keeps the FT charcoal/amber DNA. Merged from the base sheet + the modern skin so there's only one file to maintain. */ :root { --bg: #0b0d12; /* near-black page ground */ --panel: rgba(255, 255, 255, 0.070); /* glass surface */ --panel-2: rgba(255, 255, 255, 0.045); /* dimmer glass */ --border: rgba(255, 255, 255, 0.115); /* hairline border */ --text: #f6f7fb; --text-dim: #adb3bf; --gold: #f6b93f; /* FT amber — winners & qualification */ --on-gold: #111318; /* dark text on a gold bar */ --live: #ff4d57; /* LIVE indicator */ --radius: 14px; /* "Metric"/"Financier" are FT's licensed fonts; system fonts otherwise. */ --font: "Metric", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif: "Financier Display", Georgia, "Times New Roman", serif; } * { box-sizing: border-box; } /* Root horizontal-overflow containment. The document itself must NEVER pan sideways on mobile — only the intentional inner scrollers (group nav, matchday strip, knockout bracket) may scroll horizontally. - width/max-width pinned to 100% so the root box can't grow past the viewport. - overflow-x: clip clamps horizontal overflow WITHOUT creating a scroll container, so it does NOT break the position:sticky nav (plain hidden can). `hidden` is declared first as the fallback for pre-2022 engines; clip wins where supported. - overscroll-behavior-x: none kills the horizontal rubber-band/pan gesture on iOS even if a stray pixel of overflow sneaks through. */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; overflow-x: clip; } /* Contain the horizontal overscroll chain so the page can't rubber-band/"wiggle" sideways. Kept to the x-axis only, so normal vertical scrolling and the pull-to-refresh gesture are untouched. */ html { overscroll-behavior-x: none; } body { overscroll-behavior-x: none; } html { overflow-x: hidden; overflow-x: clip; } body { overflow-x: hidden; overflow-x: clip; } html { background: var(--bg); } body { margin: 0; min-height: 100vh; font-family: var(--font); color: var(--text); line-height: 1.45; background: radial-gradient(circle at 50% -18rem, rgba(246, 185, 63, 0.13), transparent 36rem), radial-gradient(circle at 82% 6rem, rgba(80, 125, 255, 0.08), transparent 32rem), linear-gradient(180deg, #111318 0%, var(--bg) 46%, #090a0e 100%); -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } /* ---- Header ---------------------------------------------------------- */ .site-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px; max-width: 1200px; margin: 0 auto; padding: 26px 24px 14px; /* No bottom rule — the header bleeds straight into the nav below. */ } .title-block h1 { margin: 0; font-size: clamp(1.75rem, 2.3vw, 2.25rem); font-weight: 750; letter-spacing: -0.04em; } .subtitle { margin: 3px 0 0; color: var(--text-dim); font-size: 0.85rem; } /* Intro reveal — the .intro class is set statically on in index.html, so this runs on every full page load (present before first paint, so no flash). It never replays on in-app navigation because the SPA only swaps panels — the

is never re-created. Animates only opacity / transform / filter, so there is NO layout shift, and the real

text stays selectable. Reduced-motion users get no movement. / @keyframes wc-intro-reveal { from { opacity: 0; transform: translateY(16px) scale(0.97); filter: blur(9px); } 60% { opacity: 1; } to { opacity: 1; transform: none; filter: none; } } .intro .title-block h1 { animation: wc-intro-reveal 1.0s cubic-bezier(0.2, 0.7, 0.2, 1) both; transform-origin: left center; } .intro .title-block .subtitle { animation: wc-intro-reveal 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.22s both; } @media (prefers-reduced-motion: reduce) { .intro .title-block h1, .intro .title-block .subtitle { animation: none; } } .status-bar { display: flex; align-items: center; gap: 12px; font-size: 0.8rem; } .poll-status { color: var(--text-dim); } .call-counter { color: var(--text-dim); font-variant-numeric: tabular-nums; } / Mode badge: MOCK keeps a small gold pill; LIVE is borderless status text. / .badge { display: inline-flex; align-items: center; justify-content: center; line-height: 1; padding: 4px 9px 2px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.4px; border: 1px solid var(--border); color: var(--text-dim); } .badge--mock { background: rgba(246, 185, 63, 0.12); color: var(--gold); border-color: rgba(246, 185, 63, 0.4); } .badge--live { gap: 0.42rem; padding: 0; border: 0; background: transparent; color: var(--live); box-shadow: none; } .badge--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; margin-bottom: 1px; / gentle geometry-based lift (computed identically in every browser) / box-shadow: 0 0 0 0 rgba(255, 77, 87, 0.45); animation: live-pulse 1.8s ease-out infinite; } @keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 77, 87, 0.45); } 70% { box-shadow: 0 0 0 6px rgba(255, 77, 87, 0); } 100% { box-shadow: 0 0 0 0 rgba(255, 77, 87, 0); } } @media (prefers-reduced-motion: reduce) { .badge--live::before { animation: none; } } / ---- Layout ---------------------------------------------------------- / main { max-width: 1200px; margin: 0 auto; padding: 24px; } .dashboard { display: grid; / min 0 (not the default min-content) so a wide child can't force the column — and thus the page — wider than the viewport. The 300/340 ideal widths only apply as the MAX, via clamp, so the grid still looks the same on desktop but can always shrink on narrow screens. / grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px; align-items: start; } .col { min-width: 0; } section { margin-bottom: 28px; } @media (max-width: 860px) { .dashboard { grid-template-columns: minmax(0, 1fr); } } / ---- Tournament navigation (scrollable chip bar) --------------------- / .tournament-nav { position: -webkit-sticky; / iOS Safari ≤12 (e.g. iPhone 6) needs the prefix / position: sticky; top: 0; z-index: 20; background: rgba(11, 13, 18, 0.82); border-bottom: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .tournament-nav::before, .tournament-nav::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 1; } .tournament-nav::before { left: 0; background: linear-gradient(to right, var(--bg), rgba(11, 13, 18, 0)); } .tournament-nav::after { right: 0; background: linear-gradient(to left, var(--bg), rgba(11, 13, 18, 0)); } .tournament-nav.can-scroll-left::before { opacity: 1; } .tournament-nav.can-scroll-right::after { opacity: 1; } / Scroll arrows — second cue alongside the fades. / .nav-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: none; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text-dim); cursor: pointer; opacity: 0.75; -webkit-appearance: none; appearance: none; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; } .nav-arrow:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); color: var(--text); } .nav-arrow svg { width: 14px; height: 14px; display: block; } .nav-arrow--left { left: 8px; } .nav-arrow--right { right: 8px; } .tournament-nav.can-scroll-left .nav-arrow--left { display: inline-flex; } .tournament-nav.can-scroll-right .nav-arrow--right { display: inline-flex; } .nav-scroll { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 24px; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .nav-scroll::-webkit-scrollbar { display: none; } .nav-chip { flex: 0 0 auto; scroll-snap-align: center; display: inline-flex; align-items: center; justify-content: center; height: 34px; line-height: 1; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--text-dim); background: rgba(255, 255, 255, 0.064); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 1px 14px 0; / tiny top pad: optical-centre nudge (with .chip-label) / cursor: pointer; white-space: nowrap; -webkit-appearance: none; appearance: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 8px 24px rgba(0, 0, 0, 0.12); transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .nav-chip--group { width: 34px; height: 34px; min-width: 34px; padding: 1px 0 0; border-radius: 50%; } / Consistent cross-browser optical centring of chip labels (1px nudge). / .chip-label { display: inline-block; transform: translateY(1px); } .nav-chip:hover { color: var(--text); background: rgba(255, 255, 255, 0.095); border-color: rgba(255, 255, 255, 0.18); } .nav-chip.is-active { background: linear-gradient(180deg, #ffc95a 0%, var(--gold) 100%); border-color: rgba(246, 185, 63, 0.95); color: var(--on-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 10px 28px rgba(246, 185, 63, 0.16); } .nav-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } / ---- Phase-aware nav emphasis (knockout phase) ----------------------- / / Once the knockout phase begins, the Knockout chip becomes the primary destination (gold outline, slightly stronger) and the Groups A–L chips read as secondary/archive (dimmer). Group access is preserved — only emphasis changes. Active state still wins, so the current view is always clear. / .nav-chip--primary:not(.is-active) { color: var(--gold); border-color: rgba(246, 185, 63, 0.55); background: rgba(246, 185, 63, 0.10); font-weight: 700; } .nav-chip--primary:not(.is-active):hover { background: rgba(246, 185, 63, 0.18); color: var(--gold); } .nav--knockout-phase .nav-chip--group:not(.is-active) { opacity: 0.55; } .nav--knockout-phase .nav-chip--group:not(.is-active):hover { opacity: 1; } .nav--knockout-phase .nav-label { opacity: 0.7; } / Knockout is a primary destination at all times now (sits 2nd, after Today), so give it a subtle always-on gold hint — the phase class makes it stronger. / .nav-chip--knockout:not(.is-active) { color: var(--gold); border-color: rgba(246, 185, 63, 0.4); } .nav-chip--knockout:not(.is-active):hover { background: rgba(246, 185, 63, 0.14); color: var(--gold); border-color: rgba(246, 185, 63, 0.6); } .nav-label { flex: 0 0 auto; display: inline-flex; align-items: center; height: 34px; line-height: 1; padding-top: 1px; font-size: 0.68rem; letter-spacing: 0.5px; text-transform: uppercase; color: #bdc2cc; } .nav-sep { flex: 0 0 auto; width: 1px; height: 20px; background: rgba(255, 255, 255, 0.13); margin: 0 4px; } h2 { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.075em; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); color: #c2c7d0; } .scores-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } .standings-grid { display: grid; grid-template-columns: 1fr; gap: 18px; } / ---- Glass surfaces (cards, tables, placeholders, bracket ties) ------ / .placeholder, .match-card, .group-table, .ko-tie { background: linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.045)); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 18px 44px rgba(0, 0, 0, 0.18); } .placeholder { color: var(--text-dim); font-style: italic; padding: 18px; } / ---- Match card ------------------------------------------------------ / .match-card { overflow: hidden; } .match-cardmeta { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; font-size: 0.7rem; color: var(--text-dim); background: rgba(255, 255, 255, 0.035); border-bottom: 1px solid rgba(255, 255, 255, 0.095); } .match-cardctx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } / date + kickoff time / status, right-aligned in the card header / .match-cardwhen { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .match-date { color: var(--text-dim); font-variant-numeric: tabular-nums; } .match-cardwhen .match-status { flex: 0 0 auto; } .team-row { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; background: rgba(255, 255, 255, 0.035); } .team-row + .team-row { border-top: 1px solid rgba(255, 255, 255, 0.095); } .team-rowside { display: flex; align-items: center; gap: 9px; min-width: 0; } .team-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); } .team-score { font-weight: 700; font-variant-numeric: tabular-nums; margin-left: 10px; color: var(--text); } / Winner: gradient gold bar with dark text / .team-row--winner { background: linear-gradient(90deg, var(--gold), #ffd06b); color: var(--on-gold); } .team-row--winner .team-name, .team-row--winner .team-score { color: var(--on-gold); } .team-row--lost { color: var(--text-dim); } .flag { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex: none; background: var(--panel-2); } .match-status { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; } .match-status--live::before { content: "\25CF "; } .match-status--live { color: var(--live); } .match-status--upcoming { color: var(--text-dim); } .match-status--finished { color: var(--text-dim); } / Post-kickoff grace: subtle "checking", not alarmist / .match-status--checking { color: var(--text-dim); font-style: italic; opacity: 0.85; } / ---- Matchday date strip (inside the Today view) --------------------- / .md-strip { display: flex; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 2px 12px; margin-bottom: 2px; scrollbar-width: none; } .md-strip::-webkit-scrollbar { display: none; } .md-chip { flex: 0 0 auto; padding: 6px 14px; border-radius: 999px; cursor: pointer; background: var(--panel-2); border: 1px solid var(--border); color: var(--text-dim); font: inherit; font-size: 0.78rem; font-weight: 600; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .md-chip:hover { color: var(--text); } .md-chip.is-active { background: linear-gradient(180deg, #ffc95a 0%, var(--gold) 100%); color: var(--on-gold); border-color: transparent; } .md-chip:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } / ---- Find-team affordance + finder overlay --------------------------- / / Icon-only trigger — the SVG is optically centred purely with flexbox, so there's no text baseline/line-height/padding centring to go wrong. / .find-bar { display: flex; justify-content: flex-end; max-width: 1200px; margin: 0 auto; padding: 8px 20px 0; } .team-search-trigger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--text-dim); transition: background 0.15s ease, color 0.15s ease; } .team-search-trigger:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); } .team-search-trigger svg { display: block; } .team-search-trigger:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } / overflow:hidden clips the panel's off-screen (translated) closed state so it can't extend the page box / cause sideways drift mid-transition. / .tf-overlay { position: fixed; inset: 0; z-index: 1100; overflow: hidden; } .tf-overlay[hidden] { display: none; } .tf-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 10, 0.55); opacity: 0; transition: opacity 0.25s ease; } .tf-overlay.is-open .tf-backdrop { opacity: 1; } .tf-panel { position: absolute; left: 50%; top: 10vh; width: min(460px, 92vw); display: flex; flex-direction: column; max-height: 78vh; background: rgba(17, 20, 27, 0.96); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); opacity: 0; transform: translateX(-50%) translateY(-6px); transition: opacity 0.2s ease, transform 0.2s ease; } .tf-overlay.is-open .tf-panel { opacity: 1; transform: translateX(-50%) translateY(0); } .tf-head { flex: 0 0 auto; display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .tf-input { flex: 1 1 auto; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); color: var(--text); font: inherit; font-size: 0.95rem; } .tf-input:focus { outline: none; border-color: var(--gold); } .tf-close { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--border); color: var(--text); } .tf-close:hover { background: rgba(255, 255, 255, 0.14); } .tf-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; } .tf-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: none; background: none; border-radius: 8px; cursor: pointer; text-align: left; color: var(--text); font: inherit; } .tf-row:hover, .tf-row.is-active { background: rgba(255, 255, 255, 0.07); } .tf-row .flag { width: 22px; height: 22px; flex: 0 0 auto; } .tf-rowname { flex: 1 1 auto; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tf-rowmeta { flex: 0 0 auto; color: var(--text-dim); font-size: 0.74rem; } .tf-empty { padding: 18px; text-align: center; color: var(--text-dim); } body.tf-open { overflow: hidden; } / Page scroll lock. The JS pins with position:fixed at the saved offset, so the BACKGROUND can't scroll. We deliberately DON'T put `touch-action:none` on the body — that was too broad and blocked touch-scrolling INSIDE the panels (stats body / finder results) on iOS. position:fixed already stops the background; the panels keep their own touch scroll (see their touch-action). / html.is-scroll-locked, body.is-scroll-locked { overflow: hidden; overscroll-behavior: none; } / The dimmed backdrops swallow touch gestures so dragging the background moves nothing — but they are NOT the body, so the panels above them still scroll. / .tf-backdrop, .md-backdrop { touch-action: none; } / The scrollable panel bodies own their vertical scroll explicitly. pan-y + overscroll-behavior:contain means: scroll inside the panel, and the scroll chain stops at the panel edge (no leaking to the locked page = no wiggle). / .tf-results, .md-body { touch-action: pan-y; -webkit-overflow-scrolling: touch; / momentum scroll on iOS / overscroll-behavior: contain; } @media (max-width: 560px) { / TOP-ANCHORED near-full-screen panel (NOT a bottom sheet) so it never fights the on-screen keyboard: input sits near the top below the safe area, the results list scrolls independently beneath it. 100dvh tracks the visible viewport when the keyboard is up; 100vh is the fallback for older engines. / .tf-panel { top: 0; bottom: auto; left: 0; width: 100%; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; / slide in from the top instead of the bottom / transform: translateX(0) translateY(-8px); padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); } .tf-overlay.is-open .tf-panel { transform: translateX(0) translateY(0); } .tf-head { padding: 12px 12px 10px; } .tf-input { height: 44px; } / comfortable tap target / .tf-results { / fill the space under the head; the list scrolls, the page does not / flex: 1 1 auto; padding-bottom: max(12px, env(safe-area-inset-bottom)); } .tf-close { width: 44px; height: 44px; } } @media (prefers-reduced-motion: reduce) { .tf-backdrop, .tf-panel { transition: none; } } / ---- Team tournament status + path ----------------------------------- / .team-status { margin: 2px 0 14px; padding: 12px 14px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 13px; } .team-statusblock { display: flex; flex-direction: column; gap: 2px; } .team-statuslabel { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); } .team-statusmain { font-size: 0.95rem; font-weight: 700; color: var(--text); } .team-statusdetail { font-size: 0.78rem; color: var(--text-dim); } .team-statussentence { font-size: 0.82rem; color: var(--text); margin-top: 3px; } .team-pathtitle { margin: 4px 0 8px; font-size: 0.8rem; color: var(--text-dim); font-weight: 700; letter-spacing: 0.3px; } .qual-legend { margin: 10px 2px 0; color: var(--text-dim); font-size: 0.68rem; line-height: 1.4; } / Team-view RIGHT column knockout panel (knockout phase) — leads the column; the group-stage record drops below it as reference. / .ko-side { margin: 2px 0 16px; padding: 14px; background: rgba(246, 185, 63, 0.10); border: 1px solid rgba(246, 185, 63, 0.30); border-radius: 12px; } .ko-sidehead { font-size: 1rem; font-weight: 800; color: var(--gold); margin-bottom: 6px; } .ko-sidematch { font-size: 0.95rem; font-weight: 600; color: var(--text); } .ko-sidewhen { color: var(--text-dim); font-size: 0.82rem; margin-top: 3px; } .ko-sidevenue { color: var(--text-dim); font-size: 0.78rem; margin-top: 1px; } .ko-siderow { color: var(--text); font-size: 0.85rem; margin-top: 4px; } .ko-sidetbd { color: var(--text-dim); font-style: italic; } .ko-sidenone { color: var(--text-dim); font-style: italic; margin: 0; } / "View knockout bracket" — a clear way out, never a dead end. / .ko-sideback { margin-top: 10px; font: inherit; font-size: 0.8rem; font-weight: 600; cursor: pointer; color: var(--gold); background: transparent; border: none; padding: 2px 0; } .ko-sideback:hover { text-decoration: underline; } .ko-sideback:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; } / Path to the final — compact route list (active teams). / .ko-route { margin: 0 0 14px; } .ko-routerow { display: grid; grid-template-columns: minmax(0, auto) 1fr; align-items: baseline; gap: 10px; padding: 5px 8px; font-size: 0.82rem; border-left: 3px solid transparent; border-radius: 4px; } .ko-routerow + .ko-routerow { border-top: 1px solid rgba(255, 255, 255, 0.06); } .ko-routerow.is-now { background: rgba(246, 185, 63, 0.10); border-left-color: var(--gold); } .ko-routeround { color: var(--text-dim); font-weight: 600; white-space: nowrap; } .ko-routerow.is-now .ko-routeround { color: var(--gold); } .ko-routedetail { color: var(--text); min-width: 0; overflow-wrap: anywhere; text-align: right; } .ko-routetbd { color: var(--text-dim); font-style: italic; } .ko-route .team-link { cursor: pointer; } .ko-route .team-link:hover { text-decoration: underline; } .ko-route .team-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } .ko-side .team-link { cursor: pointer; } .ko-side .team-link:hover { text-decoration: underline; } .ko-side .team-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } / "Group-stage record" sub-heading above the (now secondary) group table / .ko-siderec-title { margin: 4px 0 8px; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); font-weight: 700; } / Compact group-stage summary line (knockout phase) — the record at a glance, above the full final table which now sits lower as reference. / .ko-sidegrp { margin: 0 0 10px; padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; } .ko-sidegrp-pos { font-weight: 700; color: var(--text); font-size: 0.9rem; } .ko-sidegrp-rec { color: var(--text-dim); font-size: 0.8rem; margin-top: 2px; font-variant-numeric: tabular-nums; } .ko-sidegrp-qual { color: var(--text-dim); font-size: 0.78rem; margin-top: 2px; } .ko-sidetable-title { margin: 12px 0 8px; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); font-weight: 700; } .group-note { margin: 8px 13px 0; padding-bottom: 10px; color: var(--text-dim); font-size: 0.68rem; font-style: italic; } / Knockout right column = ROUND OVERVIEW (the whole round grouped by date, with the selected date highlighted). Deliberately lighter than the left match cards so it reads as context, not a duplicate. Real teams are clickable; placeholders are muted, non-interactive text. / .ko-ov { margin-bottom: 16px; } .ko-ovtitle { margin: 0 0 10px; font-size: 0.8rem; font-weight: 700; } / "Winners advance to the …" feed-through caption above a round's overview. / .ko-ovfeed { margin: 0 0 10px; font-size: 0.72rem; font-weight: 600; color: var(--gold); } .ko-ovday { margin-bottom: 10px; padding: 6px 8px; border-radius: 8px; } .ko-ovdate { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-dim); margin-bottom: 5px; } .ko-ovtie { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 5px 8px; font-size: 0.8rem; border-left: 3px solid transparent; / reserves space so selected rows don't shift / border-radius: 4px; } .ko-ovtie + .ko-ovtie { border-top: 1px solid rgba(255, 255, 255, 0.06); } / Selected fixture = part of the operational matchday chosen on the left. Shown as a faint amber tint + a slim gold left accent — NO text badge, no tiny pill, nothing that depends on centring small text. Stays correct even when the selected matchday spans two calendar-date headings. / .ko-ovtie.is-selected { background: rgba(246, 185, 63, 0.10); border-left-color: var(--gold); } .ko-ovt { display: flex; align-items: center; gap: 7px; min-width: 0; } .ko-ovt--away { justify-content: flex-end; text-align: right; } .ko-ovname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ko-ovt .flag { width: 18px; height: 18px; flex: 0 0 auto; } / Real-team token: clickable, same subtle hover as team links elsewhere. / .ko-ovt.team-link { cursor: pointer; border-radius: 6px; } .ko-ovt.team-link:hover .ko-ovname { text-decoration: underline; color: var(--text); } .ko-ovt.team-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } / Placeholder token: clearly NOT clickable. / .ko-ovt--tbd { color: var(--text-dim); } .ko-ovt--tbd .ko-ovname { font-style: italic; } .ko-ovsc { color: var(--text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; } .ko-ovtie.is-finished .ko-ovsc { color: var(--text); font-weight: 700; } .ko-ovtie.is-live .ko-ovsc { color: var(--live); font-weight: 700; } .ko-tietbc { font-size: 0.6rem; color: var(--text-dim); text-align: center; margin-top: 2px; } / Goalscorers under a card (home left, away right) — ESPN provider only / .match-goals { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; border-top: 1px solid rgba(255, 255, 255, 0.095); font-size: 0.7rem; color: var(--text-dim); } .match-goalsside { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .match-goalsside--away { text-align: right; align-items: flex-end; } .match-goals .goal { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } / ---- Match details (expandable drawer) ------------------------------- / .match-details-toggle { display: block; width: 100%; padding: 6px 12px; font: inherit; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; text-align: center; color: var(--text-dim); background: rgba(255, 255, 255, 0.025); border: none; border-top: 1px solid rgba(255, 255, 255, 0.095); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .match-details-toggle:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); } .match-details-toggle[aria-expanded="true"] { color: var(--gold); } / Teaser variant — surfaces a data hint so readers notice there's more. / .match-details-toggle.md-teaser { display: flex; align-items: center; gap: 10px; text-transform: none; letter-spacing: 0; text-align: left; font-size: 0.72rem; font-weight: 600; padding: 8px 12px; } .md-teaserbar { flex: 0 0 auto; width: 60px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.14); overflow: hidden; } .md-teaserfill { display: block; height: 100%; background: var(--gold); } .md-teasertxt { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .md-teasercta { margin-left: auto; flex: 0 0 auto; color: var(--gold); font-weight: 700; white-space: nowrap; } .match-details-toggle.md-teaser:hover .md-teasercta { text-decoration: underline; } .match-drawer { padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, 0.095); background: rgba(0, 0, 0, 0.18); font-size: 0.72rem; } .match-drawer[hidden] { display: none; } .match-drawerhead { color: var(--text-dim); margin-bottom: 8px; } .match-drawernote { color: var(--gold); font-weight: 600; margin-bottom: 8px; } / Event timeline / .match-events { list-style: none; margin: 0 0 4px; padding: 0; max-height: 260px; overflow-y: auto; } .match-event { display: flex; align-items: center; gap: 8px; padding: 3px 0; } .match-event--away { flex-direction: row-reverse; text-align: right; } .match-eventmin { flex: 0 0 auto; min-width: 34px; color: var(--text-dim); font-variant-numeric: tabular-nums; } .match-event--away .match-eventmin { text-align: right; } .match-eventtxt { min-width: 0; } .match-eventplayer { color: var(--text); } .match-eventlabel { color: var(--text-dim); } .ev-icon { flex: 0 0 auto; display: inline-block; } .ev-icon--goal { width: 9px; height: 9px; border-radius: 50%; background: #e9edf3; } .ev-icon--yellow { width: 8px; height: 11px; border-radius: 1px; background: #f4c20d; } .ev-icon--red { width: 8px; height: 11px; border-radius: 1px; background: #e1483b; } / Team-stat comparison / .match-stats { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); display: flex; flex-direction: column; gap: 7px; } .stat-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 8px; font-variant-numeric: tabular-nums; } .stat-rowhome { text-align: left; color: var(--text); font-weight: 600; } .stat-rowaway { text-align: right; color: var(--text); font-weight: 600; } .stat-rowname { color: var(--text-dim); font-size: 0.68rem; } .stat-bar { grid-column: 1 / -1; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); overflow: hidden; margin-top: 2px; } .stat-barhome { display: block; height: 100%; background: var(--gold); } / ---- Match-details slide-in panel (non-destructive; no layout shift) --- / / Desktop = right drawer; mobile = floating bottom sheet. The panel is a translucent glass surface (rgba background + backdrop blur), NOT opacity on the element — so the dashboard is subtly visible behind it while text stays fully opaque/readable. Fixed header (teams + close) over a scrolling body. / / overflow:hidden clips the drawer's off-screen translateX(100%) closed state so it can't extend the page box / cause sideways drift mid-transition. / .md-overlay { position: fixed; inset: 0; z-index: 1000; overflow: hidden; } .md-overlay[hidden] { display: none; } .md-backdrop { position: absolute; inset: 0; background: rgba(4, 6, 10, 0.5); opacity: 0; transition: opacity 0.25s ease; } .md-overlay.is-open .md-backdrop { opacity: 1; } .md-panel { position: absolute; top: 0; right: 0; height: 100%; width: min(440px, 92vw); display: flex; flex-direction: column; background: rgba(17, 20, 27, 0.92); -webkit-backdrop-filter: blur(16px) saturate(120%); backdrop-filter: blur(16px) saturate(120%); border-left: 1px solid var(--border); box-shadow: -24px 0 64px rgba(0, 0, 0, 0.5); transform: translateX(100%); transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); } .md-overlay.is-open .md-panel { transform: none; } / Fixed header — stays visible while the body scrolls / .md-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; padding-top: max(12px, env(safe-area-inset-top)); padding-right: max(14px, env(safe-area-inset-right)); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .md-headteams { flex: 1 1 auto; min-width: 0; } .md-close { flex: 0 0 auto; width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border); color: var(--text); font: inherit; line-height: 0; padding: 0; } .md-close svg { display: block; } / geometry-centred X — no glyph metrics / .md-close:hover { background: rgba(255, 255, 255, 0.16); } .md-body { flex: 1 1 auto; / min-height:0 is REQUIRED: a flex child defaults to min-height:auto (its content height), so without this it refuses to shrink and overflow-y:auto never engages — the tall stats list then gets clipped instead of scrolling. This is the fix for "View stats won't scroll" on mobile. / min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; / iOS momentum scroll / touch-action: pan-y; / allow the panel body's own vertical scroll / padding: 12px 16px 24px; padding-bottom: max(24px, env(safe-area-inset-bottom)); } .md-teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } .md-team { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 600; } .md-team--away { justify-content: flex-end; text-align: right; } .md-teamname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .md-team .flag { width: 22px; height: 22px; } .md-score { font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .md-scoresep { color: var(--text-dim); margin: 0 5px; } .md-sub { color: var(--text-dim); font-size: 0.72rem; text-align: center; margin-top: 4px; } .md-body .match-events { max-height: none; } / the body scrolls, not the list / @media (max-width: 560px) { .md-panel { top: auto; inset: auto 10px max(10px, env(safe-area-inset-bottom)) 10px; / floating sheet, side gaps / width: auto; height: auto; max-height: 86vh; max-height: min(86dvh, 720px); border: 1px solid var(--border); border-radius: 18px; background: rgba(17, 20, 27, 0.85); / a touch more see-through on mobile / box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55); transform: translateY(110%); } .md-overlay.is-open .md-panel { transform: none; } .md-close { width: 44px; height: 44px; } / 44px tap target / } @media (prefers-reduced-motion: reduce) { .md-backdrop, .md-panel { transition: none; } } / ---- Standings table ------------------------------------------------- / .group-table { overflow: hidden; } .group-table h3 { margin: 0; padding: 9px 13px; font-size: 0.85rem; font-weight: 700; background: rgba(255, 255, 255, 0.035); border-bottom: 1px solid rgba(255, 255, 255, 0.095); display: flex; align-items: center; gap: 8px; } / "Live · as it stands" tag on a provisionally-recomputed group table. / .group-tablelive { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; color: var(--live); border: 1px solid rgba(255, 77, 87, 0.5); border-radius: 999px; padding: 1px 7px; white-space: nowrap; } .group-table.is-live { border-color: rgba(255, 77, 87, 0.3); } .group-table table { width: 100%; border-collapse: collapse; font-size: 0.8rem; } .group-table th, .group-table td { padding: 7px 9px; text-align: center; } .group-table th { color: #aeb3bf; font-weight: 600; border-bottom: 1px solid rgba(255, 255, 255, 0.095); } .group-table td { color: var(--text); } .group-table td:nth-child(2) { text-align: left; } .group-table th:nth-child(2) { text-align: left; } .group-table tbody tr:not(:last-child) td { border-bottom: 1px solid rgba(255, 255, 255, 0.095); } .group-table .team-cell { display: flex; align-items: center; gap: 8px; } .group-table .team-cell .flag { width: 18px; height: 18px; } .group-table .pts { font-weight: 700; } / Qualification (top two of each group) — gold accent / .group-table tr.qualify td:first-child { border-left: 3px solid var(--gold); } .group-table tr.qualify .rank { color: var(--gold); font-weight: 700; } .group-table tr.team-highlight td { background: rgba(246, 185, 63, 0.12); } / On very narrow phones, drop the W/D/L columns to keep tables readable / @media (max-width: 480px) { .col-wdl { display: none; } } / ---- Knockout view --------------------------------------------------- / / minmax(0,1fr) (not bare 1fr) so a wide internal scroller — the mobile hybrid bracket — can never blow the single column out past the viewport and start the body panning sideways. The track is allowed to shrink to 0. / .dashboard--knockout { grid-template-columns: minmax(0, 1fr); } .dashboard--knockout #standings-section { display: none; } .dashboard--knockout #scores-section, .dashboard--knockout #scores { min-width: 0; } / "Where we are" current-round summary strip (above the bracket / round list). / .ko-current { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 14px; margin: 0 2px 14px; padding: 10px 14px; background: rgba(246, 185, 63, 0.10); border: 1px solid rgba(246, 185, 63, 0.35); border-radius: 10px; } .ko-currentround { font-weight: 800; color: var(--gold); font-size: 0.95rem; letter-spacing: 0.2px; } .ko-currentalive { color: var(--text-dim); font-size: 0.8rem; } / "Winners advance to the …" — the desktop bracket's one context line. / .ko-currentfeed { color: var(--text-dim); font-size: 0.8rem; } .ko-currentfeed::before { content: "· "; opacity: 0.6; } / Current-round emphasis in the desktop bracket header + mobile round chip. / .ko-round-header.is-current { color: var(--gold); font-weight: 800; } .ko-now { font-size: 0.58rem; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--on-gold); background: var(--gold); border-radius: 999px; padding: 1px 6px; margin-left: 4px; } .ko-chip--current:not(.is-active) { border-color: rgba(246, 185, 63, 0.6); color: var(--gold); } / Reusable horizontal scroller (fades + arrows) — shared with the nav / .h-scroll-wrap { position: relative; } .h-scroll { overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .h-scroll::-webkit-scrollbar { display: none; } .h-scroll-wrap::before, .h-scroll-wrap::after { content: ""; position: absolute; top: 0; bottom: 0; width: 44px; pointer-events: none; opacity: 0; transition: opacity 0.15s ease; z-index: 3; } .h-scroll-wrap::before { left: 0; background: linear-gradient(to right, var(--bg), rgba(11, 13, 18, 0)); } .h-scroll-wrap::after { right: 0; background: linear-gradient(to left, var(--bg), rgba(11, 13, 18, 0)); } .h-scroll-wrap.can-scroll-left::before { opacity: 1; } .h-scroll-wrap.can-scroll-right::after { opacity: 1; } .h-scroll-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 4; display: none; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); color: var(--text-dim); cursor: pointer; opacity: 0.85; -webkit-appearance: none; appearance: none; transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease; } .h-scroll-arrow svg { width: 16px; height: 16px; display: block; } .h-scroll-arrow:hover { opacity: 1; background: rgba(255, 255, 255, 0.16); color: var(--text); } .h-scroll-arrow--left { left: 6px; } .h-scroll-arrow--right { right: 6px; } .h-scroll-wrap.can-scroll-left .h-scroll-arrow--left { display: inline-flex; } .h-scroll-wrap.can-scroll-right .h-scroll-arrow--right { display: inline-flex; } / The bracket canvas (absolutely-positioned boxes over an SVG line layer) / .bracket-scroll { padding: 4px 0 12px; } .bracket { position: relative; } .bracket-lines { position: absolute; top: 0; left: 0; pointer-events: none; } .bracket-lines path { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 1.5; } .ko-round-header { position: absolute; top: 0; text-align: center; font-size: 0.72rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); } .ko-tie { position: absolute; overflow: hidden; z-index: 2; display: flex; flex-direction: column; } / Compact team lines: small flag, tight padding, name ellipsises, score right. / .ko-tie .team-row { padding: 3px 9px; flex: 1 1 auto; min-height: 0; } .ko-tie .team-rowside { gap: 7px; } .ko-tie .flag { width: 16px; height: 16px; } .ko-tie .team-name { font-size: 0.78rem; } .ko-tie .team-score { font-size: 0.82rem; } / Thin top bar: status / kick-off on the left, an ICON "View stats" on the right (only when there's detail). Same data as the mobile cards, far less ink. / .ko-tiebar { display: flex; align-items: center; justify-content: space-between; padding: 2px 9px; min-height: 15px; line-height: 1; background: rgba(255, 255, 255, 0.025); border-bottom: 1px solid rgba(255, 255, 255, 0.07); } .ko-tiewhen { font-size: 0.58rem; letter-spacing: 0.2px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ko-tiewhen--finished { color: var(--text); font-weight: 700; } .ko-tiewhen--live { color: var(--live); font-weight: 700; } .ko-tiewhen--live::before { content: ""; display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 4px; vertical-align: 1px; } .ko-tiestats { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 16px; margin-left: 6px; padding: 0; color: var(--text-dim); background: transparent; border: 0; cursor: pointer; -webkit-appearance: none; appearance: none; } .ko-tiestats:hover { color: var(--gold); } .ko-tiedate { padding: 16px 10px; text-align: center; font-size: 0.78rem; color: var(--text-dim); } .ko-clickable { cursor: pointer; } .ko-clickable:hover .team-name { text-decoration: underline; } / Third-place play-off, shown beneath the bracket / .ko-third { margin-top: 22px; } .ko-thirdlabel { font-size: 0.72rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; } .ko-third .match-card { max-width: 320px; } / ---- Mobile knockout: segmented stage selector + round panel --------- / / A compact, horizontally-scrollable round selector (R32 · R16 · QF · SF · F · 3rd) inspired by the bracket-app stage tabs. Scrolls INTERNALLY only — the page body never moves (overflow-x:auto on this element, clamped page root). / / The selector lives in a wrapper so it can become a STICKY band on mobile (an opaque rectangle that keeps the round tabs reachable while a long bracket scrolls beneath it). On desktop/tablet the wrapper is just a plain block. / .ko-segwrap { margin-bottom: 14px; } @media (max-width: 760px) { .ko-segwrap { position: -webkit-sticky; / iOS Safari ≤12 needs the prefix / position: sticky; / sit directly under the sticky site nav; --wc-nav-h is the live nav height (set in knockout.js), so it tracks the area below any iOS safe-area inset the nav already occupies. 52px is a safe fallback if JS hasn't run. / top: var(--wc-nav-h, 52px); z-index: 15; / below the nav (z-index 20), above the cards / margin: 0 0 12px; padding: 6px 0; / opaque-ish backdrop so cards scrolling under stay hidden; the blur is a progressive nicety (older Safari falls back to the solid colour). / background: rgba(11, 13, 18, 0.92); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } } .ko-seg { display: flex; gap: 4px; padding: 4px; margin: 0; background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ko-seg::-webkit-scrollbar { display: none; } .ko-segbtn { flex: 1 0 auto; min-width: 52px; display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px; font: inherit; font-size: 0.8rem; font-weight: 600; white-space: nowrap; color: var(--text-dim); background: transparent; border: 0; border-radius: 9px; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background 0.15s ease, color 0.15s ease; } .ko-segbtn:hover { color: var(--text); } .ko-segbtn.is-active { color: var(--on-gold); background: linear-gradient(180deg, #ffc95a 0%, var(--gold) 100%); } / the live round gets a subtle gold ring when not the active tab / .ko-segbtn.is-current:not(.is-active) { color: var(--gold); box-shadow: inset 0 0 0 1px rgba(246, 185, 63, 0.5); } .ko-segbtn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } / the chip-label nudge used elsewhere keeps text optically centred / .ko-segbtn .chip-label { transform: translateY(1px); } / ONE round heading (name) + ONE context sub-line (count · where winners go). Replaces the old separate "Round of 32 · 16 ties" strip on mobile. / .ko-mobilehead { margin: 0 0 12px; } .ko-mobileround { margin: 0; font-size: 1rem; font-weight: 800; letter-spacing: 0.2px; color: var(--text); } .ko-mobilesub { margin-top: 3px; font-size: 0.74rem; color: var(--text-dim); } .ko-mobilecount { color: var(--text-dim); } .ko-mobiledot { color: var(--text-dim); opacity: 0.6; } .ko-mobilefeed { font-weight: 600; color: var(--gold); } / Round switching is INSTANT: the panel is swapped in place and the sticky selector is never re-mounted, so taps/swipes change the round immediately with no flash or scroll jump. The only motion is a barely-there opacity fade on the new panel — opacity ONLY, no transform, so there is zero layout shift and zero lateral movement; robust on old Safari. Disabled under reduced-motion. / @keyframes ko-fade-in { from { opacity: 0; } to { opacity: 1; } } .ko-mobilepanel { animation: ko-fade-in 0.12s ease-out both; } @media (prefers-reduced-motion: reduce) { .ko-mobilepanel { animation: none; } } / Honest feed disclosure (desktop + mobile): ties are listed by kick-off, and each carries its own feed label — we don't draw position-based "A plays B" lines that could pair the wrong teams. / .ko-note { margin: 0 0 14px; padding: 8px 11px; font-size: 0.72rem; line-height: 1.45; color: var(--text-dim); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-left: 3px solid rgba(246, 185, 63, 0.5); border-radius: 8px; } / Selected round (full cards) + the next round's ties as a LABELLED feed list — no positional pairing, so nothing implies a tie that the data can't confirm. / .ko-rounds { display: block; } .ko-roundcol + .ko-roundcol { margin-top: 20px; } .ko-roundcollist { display: block; } .ko-roundcol--current .ko-roundcollist > + * { margin-top: 12px; } .ko-roundcol--next .ko-roundcollist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 10px; gap: 10px; } @media (max-width: 460px) { .ko-roundcol--next .ko-roundcollist { grid-template-columns: minmax(0, 1fr); } } /* Flow card — a knockout node rendered in normal flow (mobile feeders/targets, the third-place card). Reuses the shared status bar (.ko-tiebar) + team rows. Inert slot labels are dimmed; resolved teams stay full-strength + clickable. / .ko-fc { background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .ko-fc .team-row { padding: 6px 10px; } .ko-fc .team-name { font-size: 0.84rem; } .ko-fc--compact .team-name { font-size: 0.78rem; } .ko-fc--compact .ko-tiebar { min-height: 14px; } .team-rowside.ko-slot { cursor: default; } .team-rowside.ko-slot .team-name { color: var(--text-dim); font-weight: 500; } .ko-third .ko-fc { max-width: 340px; } / ==================================================================== HYBRID MOBILE BRACKET — two columns joined by CSS connectors. Pairing is the CANONICAL FIFA feed-through (each next-round tie sits beside its two official feeder matches), so the connectors are correct by construction. Fits the viewport (no internal h-scroll), so a finger-swipe is an unambiguous round change and the body never pans. ==================================================================== / .ko-bracket { max-width: 100%; overflow: hidden; / fits the viewport — nothing to scroll sideways / padding-bottom: 6px; } .ko-bracketinner { width: 100%; min-width: 0; } / Each feed row: [ current cards | connector | next-round target ]. Grid (not flex-gap, which iOS<14 lacks) so the single target centres against its two feeders automatically, whatever their heights. minmax(0,1fr) gives the current cards the room and lets them shrink to fit; the next column stays a compact fixed width, so the whole row fits a 375px screen with no scroll. / .ko-feedrow { display: grid; grid-template-columns: minmax(0, 1fr) 18px 122px; -webkit-box-align: center; align-items: center; } / Long placeholder labels (e.g. "Round of 32 1 Winner") wrap instead of forcing width, so the narrow current column never overflows / clips. / .ko-feedrowleft .match-card .team-name { white-space: normal; overflow-wrap: anywhere; } .ko-feedrowleft .match-card .team-rowside { min-width: 0; } .ko-feedrow + .ko-feedrow { margin-top: 14px; } .ko-feedrow--head { -webkit-box-align: end; align-items: end; margin-bottom: 4px; } .ko-colhead { display: block; padding: 0 2px 4px; font-size: 0.68rem; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; } .ko-feedrowleft { min-width: 0; } .ko-feedrowleft > + * { margin-top: 10px; } /* stack the 2 feeders (no flex gap) / .ko-feedrowleft .match-card { margin: 0; width: 100%; } .ko-feedrowright { min-width: 0; -webkit-align-self: center; align-self: center; } .ko-card--empty { min-height: 1px; background: transparent; border: 0; } / CSS bracket connector — a "]" that brackets the two feeders, with an arm to the target. Subtle gold, no SVG/canvas. align-self:stretch makes the cell fill the row so the % anchors resolve against the full row height. / .ko-conn { position: relative; -webkit-align-self: stretch; align-self: stretch; min-height: 36px; } .ko-conn--pair::before { content: ""; position: absolute; left: 5px; right: 50%; top: 25%; bottom: 25%; border: 2px solid rgba(246, 185, 63, 0.32); border-left: 0; border-radius: 0 10px 10px 0; } .ko-conn--pair::after, .ko-conn--single::before { content: ""; position: absolute; right: 0; top: 50%; height: 2px; -webkit-transform: translateY(-1px); transform: translateY(-1px); background: rgba(246, 185, 63, 0.32); } .ko-conn--pair::after { left: 50%; } .ko-conn--single::before { left: 5px; } / Compact next-round target card (date + the two slots). / .ko-card { background: var(--panel-2); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .ko-card--target { font-size: 0.84rem; } .ko-cardwhen { padding: 6px 10px; font-size: 0.7rem; color: var(--text-dim); border-bottom: 1px solid var(--border); } .ko-cardteam { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; padding: 7px 10px; } .ko-cardteam .flag { width: 20px; height: 20px; flex: 0 0 auto; margin-right: 8px; } .ko-cardname { -webkit-box-flex: 1; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .ko-cardscore { margin-left: 8px; font-weight: 700; min-width: 12px; text-align: right; } .ko-cardteam.is-tbc .ko-cardname { color: var(--text-dim); font-weight: 500; } .ko-cardteam.is-winner .ko-cardname { color: var(--gold); } .ko-cardteam.is-lost { opacity: 0.58; } .ko-cardteam.ko-clickable { cursor: pointer; } .ko-cardteam.ko-clickable:hover .ko-cardname { text-decoration: underline; } .ko-card--stub { display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; min-height: 60px; border-style: dashed; } .ko-cardstub { padding: 10px; font-size: 0.7rem; color: var(--text-dim); text-align: center; } / Finale (Final + champions note + third-place) and the SF third-place aside. / .ko-finale { max-width: 360px; margin: 0 auto; } .ko-finalefinal .match-card { margin: 0; } .ko-finalenote { margin-top: 8px; text-align: center; font-size: 0.82rem; font-weight: 800; color: var(--gold); } .ko-finalethird { margin-top: 20px; } .ko-mobileaside { max-width: 360px; margin: 20px auto 0; } .ko-mobileasidesub { font-size: 0.7rem; color: var(--text-dim); margin: -2px 0 8px; } / (legacy) generic mobile round-list — kept for any non-knockout reuse / .ko-round-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .ko-round-bar .nav-chip { cursor: pointer; } / ---- Clickable teams + team detail view ------------------------------ / .team-link { cursor: pointer; } .team-link:hover .team-name { text-decoration: underline; } .group-table .team-link:hover { text-decoration: underline; } .team-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; min-width: 0; max-width: 100%; } .team-headid { display: flex; align-items: center; gap: 10px; min-width: 0; } .team-headid .flag { width: 30px; height: 30px; flex: 0 0 auto; } / wrap a long country name instead of forcing the row (and page) wider / .team-headname { font-size: 1.2rem; font-weight: 700; min-width: 0; overflow-wrap: anywhere; } .back-btn { flex: 0 0 auto; display: inline-flex; align-items: center; height: 32px; line-height: 1; font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); background: rgba(255, 255, 255, 0.064); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 1px 14px 0; / same optical-centring recipe as the nav chips / cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 8px 24px rgba(0, 0, 0, 0.12); transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease; } .back-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.095); border-color: rgba(255, 255, 255, 0.18); } / ---- Footer ---------------------------------------------------------- / .brand-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; max-width: 1200px; margin: 0 auto; padding: 18px 24px 30px; border-top: 1px solid rgba(255, 255, 255, 0.10); } .source-credit { font-size: 0.72rem; color: var(--text-dim); } / BUILD: v46-2026-06-29 */