/* * Matchday interface layer. * The structure and behaviour below this stylesheet remain the established LMS * application; these rules implement the approved Stitch visual direction. */ /* Palette and type follow the Last One Standing Matchday design spec: a neutral editorial base (warm paper canvas, deep charcoal ink) that turns competition-specific once a Premier League or NFL context is active, rather than one flat grey theme everywhere. */ :root { --page: #f4f4f0; --surface: #ffffff; --surface-alt: #eceae4; --ink: #111820; --muted: #5b6470; --muted-2: #8b95a5; --line: #d3d7dc; --accent: #111820; --accent-2: #5b6470; --accent-ink: #ffffff; /* Same as --accent in light mode (no visual change) - dark mode redefines this to a legible brightened tint, since --accent itself stays the deep brand fill colour (purple/navy) that only works as text when the page behind it is light. Anything using --accent as text-on-page (not as a filled button/badge background with --accent-ink on top) should reference this instead. */ --accent-text: var(--accent); --success: #157a47; --danger: #b4202a; --pending: #a86400; --live: #d71920; --status-through-bg: #e6f4ec; --status-through-text: #157a47; --status-through-border: #157a47; --status-eliminated-bg: #fbe9ea; --status-eliminated-text: #b4202a; --status-eliminated-border: #b4202a; --status-pending-bg: #f7eee0; --status-pending-text: #a86400; --status-pending-border: #a86400; --radius: 4px; --radius-lg: 8px; --shadow: 0 1px 2px rgba(18, 24, 32, .06); --shadow-lg: 0 4px 12px rgba(18, 24, 32, .08); --body-font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif; --display-font: "Barlow Condensed", "Source Sans 3", system-ui, -apple-system, sans-serif; } * { box-sizing: border-box; } html { background: var(--page); color-scheme: light; } body { min-height: 100vh; margin: 0; color: var(--ink); background: var(--page); background-image: none; font-family: var(--body-font); font-size: 16px; line-height: 1.45; } body[data-sport="premier-league"] { --page: #f5f1f7; --surface-alt: #eee7f2; --line: #d2c4d9; --accent: #3d195b; --accent-2: #00ff85; --accent-ink: #ffffff; background: var(--page); background-image: none; font-family: var(--body-font); } body[data-sport="nfl"] { --page: #f1f3f6; --surface-alt: #e6eaf0; --line: #c4ccd6; --accent: #013369; --accent-2: #d50a0a; --accent-ink: #ffffff; background: var(--page); background-image: none; font-family: var(--body-font); } /* Dark mode. Three states, set as data-theme on by a synchronous inline boot script in (before first paint) and by the switcher in pwa.js: "light" (forced), "dark" (forced), or "system"/absent (follow the OS via the media query below). An explicit choice always wins over the media query because [data-theme="dark"] is a plain attribute selector, unconditionally more specific than one guarded with :not([data-theme= "light"]) - light and dark stay mutually exclusive either way. */ html[data-theme="dark"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { color-scheme: dark; } } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) { --page: #0e1318; --surface: #161f2a; --surface-alt: #1c2634; --ink: #f4f4f0; --muted: #94a3b8; --muted-2: #64748b; --line: #263140; --accent: #2c394a; --accent-2: #64748b; --accent-ink: #f4f4f0; --accent-text: color-mix(in srgb, var(--accent) 55%, white); --success: #34d399; --danger: #f87171; --pending: #fbbf24; --live: #ff334b; --status-through-bg: #073b22; --status-through-text: #00ff85; --status-through-border: #00ff85; --status-eliminated-bg: #380c14; --status-eliminated-text: #ff4d6d; --status-eliminated-border: #e90052; --status-pending-bg: #382305; --status-pending-text: #ffb020; --status-pending-border: #f7a823; --shadow: 0 1px 3px rgba(0, 0, 0, .45); --shadow-lg: 0 4px 18px rgba(0, 0, 0, .65); } html:not([data-theme="light"]) body[data-sport="premier-league"] { --page: #140b1e; --surface-alt: #241432; --line: #33203f; } html:not([data-theme="light"]) body[data-sport="nfl"] { --page: #0a1522; --surface-alt: #16283c; --line: #1f3348; --accent-2: #ff3b30; } } html[data-theme="dark"] { --page: #0e1318; --surface: #161f2a; --surface-alt: #1c2634; --ink: #f4f4f0; --muted: #94a3b8; --muted-2: #64748b; --line: #263140; --accent: #2c394a; --accent-2: #64748b; --accent-ink: #f4f4f0; --accent-text: color-mix(in srgb, var(--accent) 55%, white); --success: #34d399; --danger: #f87171; --pending: #fbbf24; --live: #ff334b; --status-through-bg: #073b22; --status-through-text: #00ff85; --status-through-border: #00ff85; --status-eliminated-bg: #380c14; --status-eliminated-text: #ff4d6d; --status-eliminated-border: #e90052; --status-pending-bg: #382305; --status-pending-text: #ffb020; --status-pending-border: #f7a823; --shadow: 0 1px 3px rgba(0, 0, 0, .45); --shadow-lg: 0 4px 18px rgba(0, 0, 0, .65); } html[data-theme="dark"] body[data-sport="premier-league"] { --page: #140b1e; --surface-alt: #241432; --line: #33203f; } html[data-theme="dark"] body[data-sport="nfl"] { --page: #0a1522; --surface-alt: #16283c; --line: #1f3348; --accent-2: #ff3b30; } /* A handful of rules use a hardcoded colour rather than a token (an exact value picked once, or a light-mode-only tint), so they don't adapt automatically the way anything using var(--page)/var(--ink)/etc. does. Dark-specific replacements for each, grouped here rather than scattered next to their light-mode rule, since every one of them is reachable only through this same pair of selectors. */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) input, html:not([data-theme="light"]) select, html:not([data-theme="light"]) textarea { border-color: #3d4c5e; background: var(--surface-alt); color: var(--ink); } html:not([data-theme="light"]) .message:not(:empty) { background: rgba(52, 211, 153, .14); color: #6ee7b7; } html:not([data-theme="light"]) .admin-heading { background: var(--surface-alt); color: var(--ink); } html:not([data-theme="light"]) .whatsapp-link { background: rgba(0, 168, 132, .16); color: #5eead4; } html:not([data-theme="light"]) .whatsapp-link:hover { background: rgba(0, 168, 132, .26); } html:not([data-theme="light"]) .football-specials-link { background: rgba(93, 133, 255, .18); color: #a9bdff; } html:not([data-theme="light"]) .football-specials-link:hover { background: rgba(93, 133, 255, .28); } html:not([data-theme="light"]) button:focus-visible, html:not([data-theme="light"]) a:focus-visible, html:not([data-theme="light"]) input:focus-visible, html:not([data-theme="light"]) select:focus-visible, html:not([data-theme="light"]) textarea:focus-visible, html:not([data-theme="light"]) summary:focus-visible { outline-color: var(--accent-2); } html:not([data-theme="light"]) tbody tr:nth-child(even) { background: var(--surface-alt); } html:not([data-theme="light"]) .check-good > span { background: color-mix(in srgb, var(--success) 22%, var(--surface)); } html:not([data-theme="light"]) .check-warn > span { background: color-mix(in srgb, var(--pending) 22%, var(--surface)); } html:not([data-theme="light"]) .notification-history-list li.unread { background: color-mix(in srgb, var(--accent-text) 16%, var(--surface)); } } html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { border-color: #3d4c5e; background: var(--surface-alt); color: var(--ink); } html[data-theme="dark"] .message:not(:empty) { background: rgba(52, 211, 153, .14); color: #6ee7b7; } html[data-theme="dark"] .admin-heading { background: var(--surface-alt); color: var(--ink); } html[data-theme="dark"] .whatsapp-link { background: rgba(0, 168, 132, .16); color: #5eead4; } html[data-theme="dark"] .whatsapp-link:hover { background: rgba(0, 168, 132, .26); } html[data-theme="dark"] .football-specials-link { background: rgba(93, 133, 255, .18); color: #a9bdff; } html[data-theme="dark"] .football-specials-link:hover { background: rgba(93, 133, 255, .28); } html[data-theme="dark"] button:focus-visible, html[data-theme="dark"] a:focus-visible, html[data-theme="dark"] input:focus-visible, html[data-theme="dark"] select:focus-visible, html[data-theme="dark"] textarea:focus-visible, html[data-theme="dark"] summary:focus-visible { outline-color: var(--accent-2); } html[data-theme="dark"] tbody tr:nth-child(even) { background: var(--surface-alt); } html[data-theme="dark"] .check-good > span { background: color-mix(in srgb, var(--success) 22%, var(--surface)); } html[data-theme="dark"] .check-warn > span { background: color-mix(in srgb, var(--pending) 22%, var(--surface)); } html[data-theme="dark"] .notification-history-list li.unread { background: color-mix(in srgb, var(--accent-text) 16%, var(--surface)); } /* Nostalgic theme: a joke option modelled on an early-2000s PowerPoint clip-art deck - Comic Sans, a diagonal two-tone page background, dashed borders, and beveled Windows-98-era buttons. No dark variant: dark mode wasn't a thing back then. Same variable set as every other theme, so nothing downstream needs to know it exists. */ html[data-theme="nostalgic"] { --page: #fff9d6; --surface-alt: #fff2b0; --ink: #1a0a3d; --muted: #6b2d8c; --muted-2: #9b4fc4; --line: #ff66cc; --accent: #7b1fa2; --accent-2: #00c853; --accent-ink: #ffffff; --success: #009900; --danger: #ff0033; --pending: #ff9900; --live: #ff0033; --shadow: 2px 2px 0 #ff66cc; --shadow-lg: 3px 3px 0 #0099ff; --body-font: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive, sans-serif; --display-font: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive, sans-serif; } html[data-theme="nostalgic"] body[data-sport="premier-league"], html[data-theme="nostalgic"] body[data-sport="nfl"] { --page: #fff9d6; --surface-alt: #fff2b0; --line: #ff66cc; --accent: #7b1fa2; --accent-2: #00c853; --accent-ink: #ffffff; } html[data-theme="nostalgic"] body { background: radial-gradient(#ffcc00 1px, transparent 1px) 0 0 / 22px 22px, repeating-linear-gradient(45deg, #fff9d6, #fff9d6 24px, #ffe8f7 24px, #ffe8f7 48px); } /* A rainbow
-style bar under every heading - the classic homemade divider graphic, minus the actual animated GIF. */ html[data-theme="nostalgic"] h2::after, html[data-theme="nostalgic"] h3::after, html[data-theme="nostalgic"] .league-name::after { content: ""; display: block; height: 4px; margin-top: 4px; background: linear-gradient(90deg, #ff0066, #ff9900, #ffee00, #33cc33, #0099ff, #9900ff); -webkit-text-stroke: 0; } html[data-theme="nostalgic"] .site-header, html[data-theme="nostalgic"] body[data-sport="premier-league"] .site-header, html[data-theme="nostalgic"] body[data-sport="nfl"] .site-header { background: linear-gradient(90deg, #ff0066, #ff9900, #ffee00, #33cc33, #0099ff, #9900ff); border-bottom: 4px dashed #fff200; } /* WordArt: a rainbow gradient fill with a hard outline, using -webkit-text-stroke (it renders independently of the transparent fill colour, and every current browser - Firefox included - supports the -webkit- prefixed property) plus a drop-shadow for the chunky "Word 97 Arch" look, on a slight skew to stretch the letters like a real WordArt banner. */ html[data-theme="nostalgic"] .topbar-home { background: linear-gradient(90deg, #ff0066, #ff9900, #ffee00, #33cc33, #0099ff, #9900ff); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-stroke: 2px #1a0a3d; transform: skewY(-3deg); filter: drop-shadow(3px 3px 0 #1a0a3d); } html[data-theme="nostalgic"] h2, html[data-theme="nostalgic"] h3, html[data-theme="nostalgic"] .league-name { background: linear-gradient(90deg, #ff0066, #ff9900, #ffee00, #33cc33, #0099ff, #9900ff); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-stroke: 1px #1a0a3d; } html[data-theme="nostalgic"] .card, html[data-theme="nostalgic"] .split > section, html[data-theme="nostalgic"] .session-summary, html[data-theme="nostalgic"] .session-rounds, html[data-theme="nostalgic"] .admin-game, html[data-theme="nostalgic"] .auth, html[data-theme="nostalgic"] .stat-highlights, html[data-theme="nostalgic"] .public-game, html[data-theme="nostalgic"] .public-intro { border: 3px dashed #ff66cc; } html[data-theme="nostalgic"] button:not(.theme-switcher button):not(.clippy-bubble-close):not(.clippy-dismiss):not(.problem-launcher-dismiss) { border: 3px outset #ffee00; box-shadow: 2px 2px 0 #1a0a3d; } html[data-theme="nostalgic"] button:not(.theme-switcher button):not(.clippy-bubble-close):not(.clippy-dismiss):not(.problem-launcher-dismiss):active { border-style: inset; } /* Clippy: mounted once by pwa.js and toggled with [hidden] rather than by this theme's own attribute selector, so it only ever exists in the DOM (and only ever needs styling) while the theme is actually Nostalgic. */ .clippy-widget { position: fixed; left: calc(14px + env(safe-area-inset-left, 0px)); bottom: 18px; z-index: 35; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .clippy-widget[hidden] { display: none; } .clippy-face-wrap { position: relative; } .clippy-face { display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border-radius: 50%; background: #fff9d6; cursor: pointer; overflow: hidden; } .clippy-dismiss { position: absolute; top: -4px; right: -4px; width: 22px; height: 22px; padding: 0; border: 1px solid #1a0a3d; border-radius: 50%; background: #fff; color: #1a0a3d; font-size: 13px; line-height: 1; display: grid; place-items: center; cursor: pointer; } .clippy-bubble { position: relative; max-width: 220px; padding: 10px 26px 10px 12px; border: 2px solid #1a0a3d; border-radius: 10px; background: #ffffe0; box-shadow: 2px 2px 0 #1a0a3d; font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive, sans-serif; font-size: .82rem; color: #1a0a3d; } .clippy-bubble[hidden] { display: none; } .clippy-bubble p { margin: 0; } .clippy-bubble::after { content: ""; position: absolute; left: 20px; bottom: -8px; border: 8px solid transparent; border-top-color: #1a0a3d; } .clippy-bubble-close { position: absolute; top: 2px; right: 6px; padding: 0; border: 0; background: transparent; font-size: 1rem; line-height: 1; color: #1a0a3d; cursor: pointer; } @media (max-width: 640px) { .clippy-widget { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); } } /* The marquee and footer strip, same "mounted once, toggled with [hidden]" pattern as Clippy above. */ .nostalgic-marquee { overflow: hidden; border-bottom: 4px dashed #ff66cc; background: #1a0a3d; color: #ffee00; } .nostalgic-marquee[hidden] { display: none; } .nostalgic-marquee-track { display: inline-block; padding-left: 100%; white-space: nowrap; font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive, sans-serif; font-weight: 700; font-size: .82rem; padding-top: 6px; padding-bottom: 6px; animation: nostalgic-scroll 16s linear infinite; } @keyframes nostalgic-scroll { from { transform: translateX(0); } to { transform: translateX(-100%); } } @media (prefers-reduced-motion: reduce) { .nostalgic-marquee-track { animation: none; padding-left: 12px; } } /* The obnoxious flashing "you won a prize" banner ad every early-2000s site had wedged in somewhere. Clicking it goes to Clippy, same as the guestbook badge. */ .nostalgic-banner-ad { display: block; width: 100%; padding: 8px 12px; border: 0; border-bottom: 4px dashed #1a0a3d; background: #ffee00; color: #cc0000; font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive, sans-serif; font-weight: 700; font-size: .78rem; text-align: center; cursor: pointer; animation: nostalgic-flash 1s step-start infinite; } .nostalgic-banner-ad[hidden] { display: none; } @keyframes nostalgic-flash { 0%, 49% { background: #ffee00; color: #cc0000; } 50%, 100% { background: #cc0000; color: #ffee00; } } @media (prefers-reduced-motion: reduce) { .nostalgic-banner-ad { animation: none; } } .nostalgic-flash-badge { border-color: #cc0000; color: #cc0000; } .nostalgic-flash-badge:hover { background: #cc0000; color: #ffee00; border-color: #ffee00; } .nostalgic-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; padding: 14px; border-top: 4px dashed #ff66cc; background: #fff9d6; font-family: "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive, sans-serif; } .nostalgic-footer[hidden] { display: none; } .nostalgic-counter { padding: 6px 10px; border: 2px inset #999; border-radius: 3px; background: #000; color: #33ff33; font-family: "Courier New", monospace; font-weight: 700; font-size: .78rem; letter-spacing: .05em; } .nostalgic-badges { display: flex; flex-wrap: wrap; gap: 10px; } /* The Dreamweaver "rollover image" trick, minus the two separate GIFs it used to take: swap to an inverted colour scheme on hover/focus. */ .nostalgic-badge { display: block; padding: 5px 8px; border: 2px outset #9900ff; background: #ffffff; color: #1a0a3d; font-size: .62rem; font-weight: 700; line-height: 1.35; text-align: center; cursor: pointer; } .nostalgic-badge:hover { background: #1a0a3d; color: #ffee00; border-color: #ffee00; } .meta, .stat-highlight strong, .my-stats-grid strong, #deadline-countdown, .stats-table-wrap td, .stats-table-wrap th { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent-2) 70%, white); outline-offset: 2px; } /* A brief press-down on tap/click gives buttons and cards tactile feedback, rather than the flat state-change a native app avoids. */ button, .card { transition: transform .1s ease-out; } button:active, .card:active { transform: scale(.97); } @media (prefers-reduced-motion: reduce) { button, .card { transition: none; } button:active, .card:active { transform: none; } } /* Branded splash shown while the app boots. Hidden by JS (hideSplash() in app-secure.js) once the first real screen has rendered. The rest of this app already renders entirely via JS with no noscript fallback, so there's nothing meaningful to show if JS never runs regardless of this splash. */ .app-splash { position: fixed; inset: 0; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; background: #111820; color: #fff; opacity: 1; transform: scale(1); transition: opacity .5s ease, transform .5s ease; } .app-splash-icon { width: 88px; height: 88px; border-radius: 20px; box-shadow: var(--shadow-lg); } .app-splash-title { margin: 0; font-family: "Barlow Condensed", Arial, sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: .06em; text-transform: uppercase; } .app-splash.is-hidden { opacity: 0; transform: scale(1.04); pointer-events: none; } @media (prefers-reduced-motion: reduce) { .app-splash { transition: none; } } /* Simple, non-flashy cross-fade when the main content area swaps views (competitions list, a game, statistics, etc). */ #games, #game { animation: view-fade-in .2s ease-out; } @keyframes view-fade-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { #games, #game { animation: none; } } /* viewport-fit=cover (index.html/public.html) lets iOS extend the page under the notch/dynamic island and the screen's rounded corners instead of leaving an unstyled system-drawn gap there - safe-area-inset-top keeps the header itself clear of that area once it does. */ main { width: min(1180px, calc(100% - 32px)); margin: 0 auto; padding: calc(20px + env(safe-area-inset-top, 0px)) 0 88px; } .site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; min-height: 92px; margin: 0 0 14px; padding: 14px 28px; border: 0; border-radius: var(--radius); background: #111820; box-shadow: var(--shadow); color: #fff; } body[data-sport="premier-league"] .site-header { background: #3d195b; border-bottom: 3px solid #00ff85; } body[data-sport="nfl"] .site-header { background: #013369; border-bottom: 3px solid #d50a0a; } .home-heading, .home-lockup, .topbar-lockup { min-height: 76px; width: 100%; } .topbar-lockup { display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; align-items: center; justify-items: center; gap: 22px; } .topbar-lockup h1 { margin: 0; width: 100%; height: 100%; } .topbar-home { width: 100%; height: 100%; border: 0; padding: 0; background: transparent; color: #fff; font-family: var(--display-font); font-size: clamp(2rem, 5.1vw, 4rem); font-weight: 900; line-height: .95; letter-spacing: .025em; text-align: center; text-transform: uppercase; cursor: pointer; } .topbar-home:hover { opacity: .85; } .topbar-logo { display: flex; width: 100%; height: 72px; align-items: center; justify-content: center; border: 0; padding: 0; background: transparent; cursor: pointer; } .topbar-logo img { display: block; max-width: 100%; max-height: 68px; object-fit: contain; } .topbar-logo:hover img { opacity: .85; } .pl-topbar-logo img { width: 105px; } .nfl-topbar-logo img { width: 58px; } body[data-sport="premier-league"] .nfl-topbar-logo { opacity: .38; } body[data-sport="nfl"] .pl-topbar-logo { opacity: .38; } .app-utilities { display: flex; min-height: 52px; margin: 0 0 10px; align-items: center; justify-content: flex-end; gap: 8px; } .app-utilities[hidden] { display: none; } /* Always rendered, unlike .app-utilities (hidden until sign-in) - the theme choice should be available on the sign-in screen and the public board too, not just once signed in. */ .theme-bar { display: flex; justify-content: flex-end; margin: 0 0 10px; } .theme-switcher { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-alt); } .theme-switcher button { display: grid; place-items: center; width: 28px; height: 28px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; font-size: .92rem; line-height: 1; } .theme-switcher button.active { background: var(--surface); box-shadow: var(--shadow); } .home-nav, .competition-tabs { display: flex; width: 100%; margin: 0 0 18px; padding: 0; gap: 24px; border: 0; border-bottom: 1px solid var(--line); background: transparent; box-shadow: none; } .home-nav button, .competition-tabs button { min-height: 46px; padding: 8px 2px 9px; border: 0; border-bottom: 4px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-weight: 800; } .home-nav button:hover, .competition-tabs button:hover { color: var(--ink); background: transparent; } .home-nav button.active, .competition-tabs button.active { border-bottom-color: var(--accent-2); color: var(--accent-text); background: transparent; } h1, h2, h3, h4, .card strong, .stat-highlight strong { font-family: var(--display-font); font-weight: 800; letter-spacing: -.01em; } h2 { margin: 0 0 8px; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.06; } h3 { margin: 0 0 10px; font-size: 1.35rem; line-height: 1.15; } h4 { margin: 0 0 8px; } p { margin: 0 0 12px; } .league-name { margin: 0 0 5px; color: var(--accent-text); font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } .meta, small { color: var(--muted); } .warning { color: var(--danger); font-weight: 600; } /* #games and #game are toggled via the hidden attribute to switch between the competitions list and a competition's detail view. Without this, .cards/#game's own `display` rules below outrank the browser's default [hidden]{display:none} (an author stylesheet always wins over the user agent one), so both views render on top of each other at once. */ #games[hidden], #game[hidden] { display: none !important; } .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .cards > .home-nav, .cards > .statistics-choice, .cards > .account-footer, .cards > .auth { grid-column: 1 / -1; } .card { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); color: var(--ink); text-align: left; text-decoration: none; } .card .brand-logo, .card .nfl-logo, .card .pl-logo { flex-shrink: 0; width: 56px; height: 56px; padding: 10px; box-sizing: border-box; object-fit: contain; border-radius: var(--radius); } .card.premier-league .brand-logo { background: #3d195b; } .card.nfl .brand-logo { background: var(--surface); border: 1px solid var(--line); } /* Each tournament kind gets its own accent rather than reading as generic "Football"/"NFL" - a gold World Cup, blue Euros, the NFL's own colours for the Playoff Special - carried onto both its card and its own page's league-lockup banner below. */ .card.special-kind-world-cup { border-left: 4px solid #c9a227; } .card.special-kind-euros { border-left: 4px solid #003399; } .card.special-kind-nfl-playoff { border-left: 4px solid #013369; } .card-body { display: flex; flex-direction: column; min-width: 0; } .card strong { max-width: 100%; font-size: 1.2rem; line-height: 1.15; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card span { margin-top: 2px; color: var(--muted); font-style: normal; font-size: .92rem; } .card em { margin-top: 8px; color: var(--muted); font-style: normal; font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; } .card:hover { border-color: var(--accent-2); background: var(--surface-alt); } #game { width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .back { display: inline-block; margin: 0 0 14px; padding: 8px 0; border: 0; background: transparent; color: var(--accent-text); font-weight: 800; text-decoration: none; } .league-lockup { position: relative; display: flex; min-height: 92px; margin: 0 0 14px; padding: 18px 20px; align-items: center; gap: 18px; overflow: hidden; border: 0; border-left: 7px solid var(--accent-2); border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-lg); } .league-lockup .league-name { color: color-mix(in srgb, var(--accent-2) 70%, white); } .league-lockup.special-kind-world-cup { border-left-color: #c9a227; } .league-lockup.special-kind-euros { border-left-color: #003399; } .league-lockup.special-kind-nfl-playoff { border-left-color: #013369; } .league-lockup h2 { margin: 0; color: inherit; } .league-lockup .brand-logo { width: auto; max-width: 120px; height: 58px; object-fit: contain; } .league-lockup .nfl-logo { width: 48px; } /* A large, faded version of the competition mark bleeding off the banner's edge - background texture rather than a duplicate readable logo, the way broadcast apps dress up an otherwise flat colour block. */ .league-lockup::after { content: ''; position: absolute; top: 50%; right: -22px; width: 150px; height: 150px; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: .16; transform: translateY(-50%) rotate(-10deg); pointer-events: none; } body[data-sport="premier-league"] .league-lockup::after { background-image: url(/assets/premier-league-white.png); } body[data-sport="nfl"] .league-lockup::after { background-image: url(/assets/nfl.svg); } .auth, .statistics-choice, .rules-card, .session-summary, .session-rounds, .admin-game, .my-stats-card, .public-intro, .special-event-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .auth, .statistics-choice, .rules-card, .session-summary, .session-rounds, .admin-game, .my-stats-card, .public-intro, .special-event-card { padding: 22px; } .special-event-card { margin: 0 0 14px; } .special-event-card.special-kind-world-cup { border-left: 4px solid #c9a227; } .special-event-card.special-kind-euros { border-left: 4px solid #003399; } .special-event-card.special-kind-nfl-playoff { border-left: 4px solid #013369; } .auth { max-width: 680px; margin: 18px auto; } .welcome { margin-inline: auto; } .join-request-details { max-width: 680px; margin: 0 auto 18px; } .join-request-details .competition-ticks { margin: 10px 0; } .signin-footer { max-width: 680px; margin: 0 auto; text-align: center; } .signin-footer a { color: var(--muted); font-weight: 800; text-decoration: none; } .signin-footer a:hover { color: var(--accent-text); } .statistics-choice { display: flex; align-items: center; justify-content: space-between; gap: 20px; } .statistics-choice .league-lockup { flex: 1; margin: 0; } .stats-scope { display: flex; flex-wrap: wrap; gap: 8px; } button, .stats-button, a.stats-button { min-height: 42px; padding: 9px 15px; border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-weight: 800; text-decoration: none; } form button, body[data-sport="premier-league"] form button, body[data-sport="nfl"] form button { border: 1px solid var(--accent); border-radius: 4px; background: var(--accent); color: var(--accent-ink); box-shadow: none; } button:hover, .stats-button:hover, a.stats-button:hover { filter: brightness(1.08); } button:disabled { cursor: not-allowed; opacity: .48; filter: grayscale(.3); } .stats-button, .back, .account-action, .dialog-close { cursor: pointer; } .stats-button { background: var(--surface); color: var(--accent-text); } label { display: grid; gap: 6px; margin: 0 0 14px; font-weight: 800; } input, select, textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid #8f99a2; border-radius: 4px; background: #fff; color: #10161d; } select { position: relative; z-index: 1; cursor: pointer; touch-action: manipulation; appearance: auto; } textarea { min-height: 120px; resize: vertical; } input[type="checkbox"] { width: 22px; min-height: 22px; accent-color: var(--accent-text); } .payment-check, .membership-toggle, .competition-ticks label { display: flex; align-items: center; gap: 9px; } .competition-ticks { border: 1px solid var(--line); border-radius: 4px; } .message:not(:empty) { margin-top: 12px; padding: 10px 12px; border-left: 4px solid var(--success); background: #e8f6f0; color: #064d39; font-weight: 800; } .split { display: grid; grid-template-columns: minmax(240px, .8fr) minmax(0, 1.4fr); gap: 14px; margin: 14px 0; } .split > section { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .split ul { margin: 0; padding: 0; list-style: none; } /* Kickoff time/date on the left, both teams stacked on the right - fixed shape regardless of team name length, instead of cramming the date and both names onto one line together. */ .split li { display: flex; align-items: center; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--line); } .split li:last-child { border-bottom: 0; } .fixture-when { display: flex; flex: 0 0 auto; flex-direction: column; gap: 2px; color: var(--muted); font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; } .fixture-time { font-size: .95rem; font-weight: 800; color: var(--ink); } .fixture-date { font-size: .72rem; font-weight: 700; } .fixture-teams { display: flex; flex: 0 1 auto; min-width: 0; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; } .fixture-team { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; font-weight: 700; } /* Fixed (not shrink-to-fit) width, so the venue text's length doesn't push the team-name column left or right row to row - both columns then line up cleanly down the list regardless of how long each stadium name is. */ .fixture-venue { display: flex; flex: 0 0 128px; width: 128px; flex-direction: column; text-align: right; line-height: 1.25; } .fixture-venue-name { font-size: .68rem; font-weight: 700; color: var(--muted); } .fixture-venue-place { margin-top: 2px; font-size: .62rem; font-weight: 600; color: var(--muted-2); } /* Broadcast-style score line: kickoff time/date (or FT / a live clock) in its own column on the left, matching the Entry page's fixture list, then each team gets its own row (crest, name, score) alongside it. */ .score-list { display: flex; flex-direction: column; } .score-row { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; align-items: stretch; gap: 14px; } .score-list > .score-row:last-child { border-bottom: 0; } /* Narrower than the Entry page's own .fixture-when: this row can also have a pickers list competing for space, so a long live-status word (e.g. "Second quarter") needs to wrap onto two lines here rather than forcing a wide column that squeezes the team names next to it. */ .score-row .fixture-when { max-width: 72px; align-self: center; } .score-row-main { flex: 1 1 auto; min-width: 0; align-self: center; } /* Who picked which side of this fixture - stretched to the row's full height and split top/bottom (not one centred list) so each name sits level with the team - home pickers up by the home team, away pickers down by the away team - rather than leaving which side they picked ambiguous. */ .score-row-pickers { flex: 0 0 auto; max-width: 42%; display: flex; flex-direction: column; justify-content: space-between; } .score-row-pickers ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .score-row-pickers li { font-size: .72rem; font-weight: 700; color: var(--muted); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .score-row-team { display: flex; align-items: center; gap: 8px; padding: 1px 0; } .score-row-team .team-with-crest { min-width: 0; flex: 1 1 auto; font-weight: 700; } .score-row-value { flex-shrink: 0; min-width: 1.4em; font-family: var(--display-font); font-size: 1.2rem; font-weight: 800; text-align: right; color: var(--ink); font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; } .score-row.is-live .fixture-when .fixture-time { color: var(--live); } .live-dot { display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--live); animation: live-pulse 1.6s ease-in-out infinite; } @keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } } /* Loading skeleton: placeholder shapes shown the instant a route is entered, replaced by real content once its data arrives - stands in for the blank/stale-content flash that otherwise shows while awaiting fetch. */ .skeleton-block { border-radius: var(--radius); background: linear-gradient(100deg, var(--surface-alt) 30%, var(--line) 50%, var(--surface-alt) 70%); background-size: 220% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; } @keyframes skeleton-shimmer { 0% { background-position: 180% 0; } 100% { background-position: -20% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton-block { animation: none; background: var(--surface-alt); } } .skeleton-lockup { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; } .skeleton-lockup .skeleton-block:first-child { flex-shrink: 0; width: 56px; height: 56px; } .skeleton-lockup .skeleton-block:last-child { height: 26px; width: min(220px, 60%); } .skeleton-line { height: 14px; margin: 0 0 10px; width: 70%; } .skeleton-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin: 12px 0 18px; } .skeleton-stats .skeleton-block { height: 92px; } .skeleton-rows { display: flex; flex-direction: column; gap: 14px; margin: 0 0 18px; } .skeleton-rows .skeleton-block { height: 52px; } /* Route/content swap transition: applied to #game and #games right after real markup replaces a skeleton or a previous screen, so new content settles in instead of popping in instantly. */ @keyframes content-settle { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .content-enter { animation: content-settle .22s ease-out; } @media (prefers-reduced-motion: reduce) { .content-enter { animation: none; } } .stat-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 0; margin: 12px 0 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; } .stat-highlight { min-height: 92px; padding: 15px; border: 0; border-right: 1px solid var(--line); border-radius: 0; background: transparent; box-shadow: none; } .stat-highlight:last-child { border-right: 0; } .stat-highlight span { display: block; color: var(--muted); font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .stat-highlight strong { display: block; margin-top: 4px; color: var(--accent-text); font-size: 1.8rem; } .stat-highlight small { display: block; margin-top: 3px; } .used-teams { margin: 0 0 18px; } .used-teams h3 { margin: 0 0 8px; } .used-teams ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .used-teams li { padding: 6px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-alt); font-size: .85rem; font-weight: 700; color: var(--muted); } .your-pick-card { margin: 14px 0; padding: 16px; border: 1px solid var(--line); border-left: 5px solid var(--accent-2); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); } .your-pick-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .your-pick-heading > span { color: var(--muted); font-size: .78rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; } .your-pick-card .score-row { padding: 6px 0 0; border-bottom: 0; } .my-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); } .my-stats-grid > div { min-height: 100px; padding: 16px; background: var(--surface); } .my-stats-grid span { display: block; color: var(--muted); font-weight: 800; } .my-stats-grid strong { display: block; margin-top: 6px; color: var(--accent-text); font-family: var(--display-font); font-size: 1.65rem; } .season-picker { max-width: 310px; margin: 16px 0; } .stats-table-wrap { width: 100%; margin-top: 14px; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } .stats-table-wrap table, table { width: 100%; min-width: 0; border-collapse: collapse; border-spacing: 0; } th, td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; } /* Letting header/cell text wrap inside a table is fine for a 2-4 column table, but the all-time stats table has 9 columns — on a narrow screen that meant every header wrapped into a vertical stack of single words ("LON GES T RUN"), completely illegible. Keep text on one line and let the wrapper's existing horizontal scroll handle width instead. The round-by-round "Who picked who" table is only 3-4 columns, so it doesn't need that treatment - its Status column holds long pill text ("Through to next game week") that would otherwise force the whole table wider than the screen and scroll the Status column out of view on mobile, so let it wrap onto a second line instead. */ .stats-table-wrap th, .stats-table-wrap td { white-space: nowrap; } .roundpicks-table th, .roundpicks-table td { white-space: normal; } thead th { position: sticky; top: 0; z-index: 1; background: var(--accent); color: var(--accent-ink); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; } tr.is-you { background: var(--status-through-bg); } tr.is-you small { margin-left: 4px; color: var(--status-through-text); font-weight: 800; text-transform: uppercase; font-size: .68rem; } tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; } tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-alt) 55%, white); } tbody tr:hover { background: var(--surface-alt); } .status-pill { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 10px; border: 1px solid transparent; border-radius: 999px; font-size: .78rem; font-weight: 800; white-space: nowrap; text-align: center; } .roundpicks-table .status-pill { white-space: normal; } .status-pill-through { background: var(--status-through-bg); color: var(--status-through-text); border-color: var(--status-through-border); } .status-pill-eliminated { background: var(--status-eliminated-bg); color: var(--status-eliminated-text); border-color: var(--status-eliminated-border); } .status-pill-pending { background: var(--status-pending-bg); color: var(--status-pending-text); border-color: var(--status-pending-border); } .session-summary, .session-rounds { margin: 0 0 14px; } .week-overview { margin: 0 0 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); overflow: hidden; } .week-overview summary { display: flex; min-height: 50px; padding: 12px 14px; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; font-weight: 900; } .week-overview summary::marker { color: var(--accent-2); } .week-overview[open] summary { border-bottom: 1px solid var(--line); background: var(--surface-alt); } .week-overview-body { padding: 14px; } .live-standings { border-left: 6px solid var(--danger); } .status-overview { margin-top: 12px; } .admin-heading { margin: 0 0 14px; padding: 18px 20px; border-left: 7px solid #e2b714; background: #111820; color: #fff; } .admin-heading .league-name { color: #e2b714; } .admin-game { margin: 0 0 14px; } .readiness-grid, .platform-health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .readiness-card, .platform-health-card { padding: 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); } .health-good { border-left: 5px solid var(--success); } .health-warn { border-left: 5px solid var(--pending); } .readiness-card > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .readiness-card h4 { margin: 0; } .readiness-card ul { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 9px; } .readiness-card li { display: flex; align-items: flex-start; gap: 9px; } .readiness-card li > span { display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; font-weight: 900; } .readiness-card li small { display: block; color: var(--muted); } .check-good > span { background: color-mix(in srgb, var(--success) 18%, white); color: var(--success); } .check-warn > span { background: color-mix(in srgb, var(--pending) 18%, white); color: var(--pending); } .platform-health-card span, .platform-health-card strong, .platform-health-card small { display: block; } .platform-health-card span { color: var(--muted); font-size: .72rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .platform-health-card strong { margin: 7px 0 4px; font-size: 1.18rem; } .platform-health-card small { color: var(--muted); line-height: 1.3; } .my-stats-card { border-top: 5px solid var(--accent); } #game .auth { margin-top: 20px; border-top: 5px solid var(--accent-2); } .problem-report { display: flex; padding: 12px 0; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); } .account-footer { display: flex; min-width: 0; margin-top: 28px; padding: 16px 0; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); color: var(--muted); } .account-name { min-height: auto; padding: 0; border: 0; background: transparent; color: var(--accent-text); } .account-action { background: transparent; color: var(--accent-text); } .problem-launcher-wrap { position: fixed; right: calc(18px + env(safe-area-inset-right, 0px)); bottom: 18px; z-index: 20; display: flex; align-items: center; gap: 6px; } .problem-launcher-wrap[hidden] { display: none; } .problem-launcher { min-height: 38px; padding: 7px 11px; box-shadow: var(--shadow); font-size: .82rem; } .problem-launcher-dismiss { flex: 0 0 auto; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); font-size: 14px; line-height: 1; display: grid; place-items: center; cursor: pointer; } .bottom-nav, .bottom-nav[hidden] { display: none; } dialog { max-width: min(620px, calc(100% - 28px)); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0,0,0,.3); } dialog::backdrop { background: rgba(10,14,19,.67); } .dialog-close { width: 42px; min-width: 42px; padding: 0; border: 1px solid var(--line); background: transparent; color: var(--ink); } .public-board { display: grid; gap: 14px; max-width: none; margin: 0; padding: 0; } /* Without this, a grid track sizes itself to the widest child's unshrinkable content and stretches every sibling to match, pushing them past the actual container width - the same fix .card-body already uses. */ .public-board > * { min-width: 0; } .public-intro { margin: 0; } .public-game { display: block; } .public-game .league-lockup { margin-bottom: 14px; } .public-game .session-summary, .public-game .session-rounds { margin-bottom: 14px; } .team-with-crest { display: inline-flex; min-width: 0; align-items: center; gap: 8px; } /* Without this, a team name squeezed for space (e.g. a live status and picker list both competing for room in the same fixture row) overflows its shrunk box and visually overlaps the score next to it, instead of truncating cleanly. */ .team-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .team-crest-shell { position: relative; display: inline-grid; width: 28px; height: 28px; flex: 0 0 28px; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--surface-alt); overflow: hidden; } .team-crest-shell::before { content: attr(data-initials); color: var(--muted); font-size: .65rem; font-weight: 900; } .team-crest { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--surface); } .header-install, .header-notifications { display: flex; align-items: center; min-height: 42px; } .notification-bell, .notification-settings { display: flex; align-items: center; justify-content: center; } .notification-bell svg, .notification-settings svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; } .header-install { justify-content: flex-end; } .app-utilities .install-app-button, .app-utilities .notification-bell, .app-utilities .notification-settings { min-height: 42px; border: 1px solid var(--accent-text); border-radius: 4px; background: var(--surface); color: var(--accent-text); box-shadow: none; } /* Everything below is a complete, standalone rule for a component this stylesheet is now the sole source of styling for (this file no longer loads alongside an older stylesheet underneath it — every class the app actually renders gets its full definition here, not a partial patch). */ .problem-dialog form > button:last-child, .direct-push-button { min-height: 50px; border: 0; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-weight: 850; box-shadow: none; } .direct-push-button:hover { filter: brightness(1.08); } .direct-push-button.enabled { background: var(--accent); } .phone-notification-panel { display: grid; gap: 13px; margin-top: 18px; } .phone-notification-panel .direct-push-button { width: 100%; min-height: 50px; } .phone-notification-panel .meta { margin: 0; } .my-stats-card.premier-league .brand-logo { background: var(--accent); } body[data-sport="premier-league"] .league-lockup, body[data-sport="nfl"] .league-lockup { padding: 18px 20px; border-radius: var(--radius); background: var(--accent); } .admin-button { display: inline-flex; align-items: center; min-height: 38px; padding: 7px 14px; border: 0; border-radius: 4px; background: var(--accent); color: var(--accent-ink); font-weight: 800; } .admin-button:hover { filter: brightness(1.08); } .stats-scope button { min-height: 40px; padding: 8px 14px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-weight: 850; } .stats-scope button.active { background: var(--accent); color: var(--accent-ink); box-shadow: none; } .notification-tabs { display: flex; gap: 4px; margin: 18px 0 0; padding: 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface-alt); } .notification-tabs button { flex: 1; min-height: 38px; padding: 8px 10px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font: inherit; font-size: .83rem; font-weight: 850; } .notification-tabs button.active { background: var(--accent); color: var(--accent-ink); box-shadow: none; } .notification-history-list { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; max-height: min(58vh, 520px); overflow: auto; } .notification-history-list li { padding: 13px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); } .notification-history-list li.unread { border-left: 4px solid var(--accent); background: color-mix(in srgb, var(--accent) 8%, white); } .notification-history-list li > strong { display: block; margin-bottom: 5px; color: var(--accent-text); font-size: .88rem; } .notification-history-list p { margin: 0; color: var(--ink); font-weight: 700; line-height: 1.42; } .notification-history-list time { display: block; margin-top: 7px; color: var(--muted); font-size: .78rem; font-weight: 700; } .account-signout, .install-app-button, .notification-bell, .account-action { border-radius: 4px; box-shadow: none; } .account-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 9px; } .problem-dialog-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; } /* Sign-in / join request */ .login-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .login-actions button { margin: 0; flex: 1 1 190px; } .competition-ticks { display: flex; flex-wrap: wrap; gap: 14px; min-height: 50px; margin: 0; padding: 9px 13px; border: 1px solid var(--line); border-radius: 4px; } .competition-ticks legend { padding: 0 4px; font-size: .74rem; font-weight: 800; color: var(--ink); } .competition-ticks label, .membership-toggle { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: .88rem; font-weight: 750; white-space: nowrap; } .competition-ticks input, .membership-toggle input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--accent-text); } .passkey-panel .push-device-list, .push-device-list { padding: 0; margin: 0; list-style: none; } .push-device-list li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); } .push-device-list li:last-child { border-bottom: 0; } .push-device-list span { display: grid; gap: 3px; } .preference-list { display: grid; gap: 10px; margin: 18px 0; } .preference-list label { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 4px; } .preference-list input { width: 20px; height: 20px; margin: 0; } /* Competition entry / rules */ .rule { margin: 22px 0; padding: 16px 18px; border-left: 5px solid var(--accent-2); border-radius: 0 var(--radius) var(--radius) 0; background: var(--surface-alt); font-weight: 750; line-height: 1.55; } .rules-list { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; } .rules-list li { padding: 0 0 13px; border-bottom: 1px solid var(--line); color: var(--ink); line-height: 1.5; } .rules-list li:last-child { padding-bottom: 0; border-bottom: 0; } .rules-list strong { color: var(--ink); } .stats-note { margin: 16px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.5; } .stats-note.mechanic-note { margin-top: 6px; padding: 10px 12px; border: 1px solid var(--status-pending-border); border-radius: var(--radius); background: var(--status-pending-bg); color: var(--status-pending-text); font-weight: 700; } .community-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 20px; } .community-actions .whatsapp-link { margin: 0; } .whatsapp-link { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; padding: 11px 14px; border-radius: 4px; background: #e6f8ef; color: #075e54; font-weight: 850; text-decoration: none; } .whatsapp-link:hover { background: #ccefdc; } .whatsapp-link span { font-size: 1.15em; } .football-specials-link { background: #e7edfb; color: #1d3a8f; } .football-specials-link:hover { background: #d3ddf7; } .football-specials-link small { font-weight: 700; opacity: .8; } /* Admin */ .delete-player { min-height: 36px; padding: 7px 10px; border: 1px solid var(--danger); border-radius: 4px; background: var(--surface); color: var(--danger); font-weight: 850; white-space: nowrap; } .delete-player:hover { background: color-mix(in srgb, var(--danger) 8%, white); } .push-device-row .delete-player { flex: 0 0 auto; padding: 8px 11px; } .readiness-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .audit-log summary { display: flex; justify-content: space-between; cursor: pointer; } .audit-log code { white-space: normal; overflow-wrap: anywhere; font-size: .78rem; } .device-coverage { margin: 14px 0; border: 1px solid var(--line); border-radius: var(--radius); } .device-coverage > summary { cursor: pointer; padding: 13px 15px; font-weight: 850; } .device-coverage .stats-table-wrap { margin: 0 12px 12px; } .round-tools, .round-tools form { width: 100%; max-width: none; } .round-tools { padding: 0; overflow: hidden; } .round-tools summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; cursor: pointer; list-style: none; } .round-tools summary::-webkit-details-marker { display: none; } .round-tools summary strong { display: block; color: var(--accent-text); font-size: 1.05rem; } .round-tools summary small { display: block; margin-top: 4px; color: var(--muted); font-size: .84rem; font-weight: 600; } .round-tools .disclosure { padding: 7px 10px; border-radius: 4px; background: var(--surface-alt); color: var(--accent-text); font-size: .78rem; font-weight: 850; } .round-tools-body { padding: 0 22px 22px; border-top: 1px solid var(--line); } .round-tools .stats-table-wrap { width: 100%; overflow-x: auto; } .problem-reports { border-left: 5px solid var(--danger); } .problem-reports h3 { display: flex; align-items: center; gap: 9px; } .report-count { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: var(--danger); color: #fff; font-size: .8rem; } .problem-report-list { display: grid; gap: 11px; margin-top: 14px; } @media (max-width: 640px) { .notification-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .round-tools summary { padding: 16px; } .round-tools-body { padding: 0 16px 16px; } } @media (max-width: 720px) { main { width: min(100% - 20px, 1180px); padding-top: calc(10px + env(safe-area-inset-top, 0px)); } .site-header { min-height: 82px; padding: 12px 14px; } .home-heading, .home-lockup, .topbar-lockup { min-height: 54px; } .topbar-lockup { grid-template-columns: 64px minmax(0, 1fr) 50px; gap: 8px; } .topbar-home { font-size: clamp(1.36rem, 7vw, 2rem); letter-spacing: .01em; } .topbar-logo { height: 52px; } .topbar-logo img { max-height: 47px; } .pl-topbar-logo img { width: 62px; } .nfl-topbar-logo img { width: 40px; } .app-utilities { min-height: 44px; } .bottom-nav:not([hidden]) { display: flex; position: fixed; inset: auto 0 0 0; z-index: 40; padding: 4px calc(4px + env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) calc(4px + env(safe-area-inset-left, 0px)); gap: 2px; background: var(--surface); border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(18, 24, 32, .09); } body[data-signed-in="true"] main { padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)); } .bottom-nav button { flex: 1; display: grid; justify-items: center; gap: 3px; min-height: 56px; padding: 6px 2px; border: 0; border-top: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); font-size: .66rem; font-weight: 800; letter-spacing: .01em; } .bottom-nav button svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .bottom-nav button.active { border-top-color: var(--accent-2); color: var(--accent-text); } .problem-launcher-wrap { bottom: calc(74px + env(safe-area-inset-bottom, 0px)); } /* The bottom nav bar takes over primary navigation on mobile, so the top tab row would just be showing the same destinations twice. */ .home-nav, .competition-tabs { display: none; } .cards { grid-template-columns: 1fr; gap: 10px; } .league-lockup { min-height: 78px; padding: 14px; } .league-lockup .brand-logo { max-width: 92px; height: 46px; } .league-lockup .nfl-logo { width: 40px; } .statistics-choice, .split { grid-template-columns: 1fr; } .statistics-choice { display: grid; } .split { display: grid; } .stat-highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat-highlight:nth-child(2n) { border-right: 0; } .stat-highlight { min-height: 80px; } .auth, .statistics-choice, .rules-card, .session-summary, .session-rounds, .admin-game, .my-stats-card, .public-intro { padding: 16px; } .week-overview-body { padding: 10px; } .problem-report, .account-footer { align-items: stretch; flex-direction: column; } .stats-table-wrap { border-radius: 3px; } th, td { padding: 9px 8px; font-size: .88rem; } .team-crest-shell { width: 24px; height: 24px; flex-basis: 24px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }