* { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #f4f5f7; --card: #ffffff; --card2: #eef0f5; /* secondary surface: picker tags, end-note */ --ink: #15181d; --muted: #6b7280; --line: #e6e8ec; --accent: #0a7d3e; --accent-ink: #ffffff; /* text/icon sitting on an accent fill */ --accent-soft: #e8f3ec; /* faint accent wash */ --note-bg: #eef6f0; --note-ink: #2f5d40; --shadow: 0 4px 16px rgba(0,0,0,0.07); --error: #b00020; --focus-ring: rgba(10,125,62,0.12); --glow: none; } /* Dark theme — set via (defaults to the OS, overridable in the footer). */ :root[data-theme="dark"] { --bg: #0c0e12; --card: #15181f; --card2: #1b1f27; --ink: #eef1f5; --muted: #8b94a3; --line: #242a33; --accent: #19c37d; --accent-ink: #04130c; --accent-soft: rgba(25,195,125,0.14); --note-bg: #2a2410; --note-ink: #f0c040; --shadow: 0 8px 26px rgba(0,0,0,0.45); --error: #ff6b6b; --focus-ring: rgba(25,195,125,0.22); --glow: radial-gradient(1100px 360px at 50% -130px, rgba(25,195,125,0.10), transparent); } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); background-image: var(--glow); background-repeat: no-repeat; color: var(--ink); line-height: 1.4; min-height: 100vh; overflow-x: hidden; /* belt-and-suspenders: never let a long name force a sideways scroll */ -webkit-font-smoothing: antialiased; } @font-face { font-family: 'Caveat'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/caveat.woff2') format('woff2'); } @font-face { font-family: 'Poppins'; font-style: normal; font-weight: 800; font-display: swap; src: url('fonts/poppins-800.woff2') format('woff2'); } .site-header { background: var(--card); border-bottom: 1px solid var(--line); padding: 18px 20px; text-align: center; position: relative; overflow: hidden; } /* Header account chip — alerts/account entry point, sits left of the sun/moon toggle. */ .account-chip { position: absolute; top: 14px; right: 56px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--muted); font-weight: 700; font-size: .95rem; cursor: pointer; z-index: 5; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: all .15s; } .account-chip[hidden] { display: none; } .account-chip:hover { border-color: var(--accent); color: var(--accent); } .account-chip.chip-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .account-chip.chip-paused { background: var(--card2); color: var(--muted); border: 1px solid var(--line); } /* Header sun/moon quick-toggle (top-right) — one-tap light/dark; the footer toggle stays for Auto. */ .theme-quick { position: absolute; top: 14px; right: 14px; background: transparent; border: 0; color: var(--muted); cursor: pointer; padding: 8px; border-radius: 10px; font-size: 1.2rem; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .theme-quick:hover { color: var(--accent); background: rgba(128,128,128,.12); } [data-theme="dark"] .theme-quick .i-moon { display: none; } [data-theme="light"] .theme-quick .i-sun { display: none; } /* Narrow screens: the centered wordmark needs both shoulders — the account chip keeps the top-right corner alone and the sun/moon toggle moves to the top-left. (Must come AFTER the base .theme-quick rule: same specificity, last-one-wins.) */ @media (max-width: 520px) { .account-chip { right: 12px; top: 12px; width: 31px; height: 31px; font-size: .85rem; } .theme-quick { right: auto; left: 10px; top: 12px; } } /* One-time "add to home screen" nudge — mobile only, dismissible, never if already installed. */ .a2hs-hint { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 1200; display: flex; align-items: center; gap: 10px; background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: 14px; padding: 11px 12px 11px 15px; box-shadow: 0 8px 28px rgba(0,0,0,.22); font-size: 0.88rem; transform: translateY(160%); transition: transform 0.28s ease; } .a2hs-hint.in { transform: translateY(0); } .a2hs-hint span { flex: 1; line-height: 1.35; } .a2hs-hint a { color: var(--accent); font-weight: 700; text-decoration: none; white-space: nowrap; } .a2hs-x { border: 0; background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer; padding: 4px 6px; line-height: 1; } .brand { display: inline-flex; align-items: center; gap: 10px; font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; color: inherit; } .site-logo { height: 46px; width: auto; display: block; } .tagline { font-family: 'Caveat', 'Segoe Script', cursive; color: #BB0006; font-size: 2.3rem; font-weight: 700; margin-top: 0; line-height: 1.05; letter-spacing: 0.01em; } /* Stylized wordmark (Poppins) + the hand-brushed underline under "True". */ .wm { font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-weight: 800; letter-spacing: -0.02em; white-space: nowrap; } .wm-true { position: relative; } .th-brush { position: absolute; left: -5%; width: 110%; height: auto; bottom: -0.04em; transform-origin: left center; pointer-events: none; } @keyframes th-wipe { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* ---- Signature intro: a soccer ball spins across the header, then the logo pops in. ---- */ .kick-ball, .kick-ball-2 { display: none; } @keyframes th-kick { 0% { transform: translateX(-62vw) rotate(0deg); opacity: 0; } 9% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(62vw) rotate(1080deg); opacity: 0; } } @keyframes th-pop { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.09); } 100% { opacity: 1; transform: scale(1); } } @keyframes th-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes th-kick-back { 0% { transform: translateX(62vw) rotate(0deg); opacity: 0; } 12% { opacity: 1; } 84% { opacity: 1; } 100% { transform: translateX(-62vw) rotate(-900deg); opacity: 0; } } /* The intro animations run only when is set (fresh-ish visit) + motion is OK. */ @media (prefers-reduced-motion: no-preference) { .intro .kick-ball, .intro .kick-ball-2 { display: block; position: absolute; left: 50%; text-align: center; pointer-events: none; z-index: 4; will-change: transform; } .intro .kick-ball { top: 40%; width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 40px; line-height: 44px; animation: th-kick 1.05s cubic-bezier(.34,.66,.4,1) forwards; } .intro .kick-ball-2 { top: 74%; width: 28px; height: 28px; margin: -14px 0 0 -14px; font-size: 24px; line-height: 28px; animation: th-kick-back 1.0s cubic-bezier(.34,.66,.4,1) 1.2s both; } .intro .brand { animation: th-pop 0.3s ease-out 0.3s backwards; } .intro .th-brush { animation: th-wipe 0.42s ease-out 0.32s both; } .intro .tagline { animation: th-fade 0.5s ease-out 1.7s backwards; } } /* Narrow screens: keep the now-bigger logo on a single line, clear of the sun toggle. */ @media (max-width: 480px) { .brand { font-size: 1.5rem; gap: 8px; } .site-logo { height: 40px; } } /* min-height reserves a full viewport while data loads so the footer starts below the fold instead of flashing high and getting shoved down ~1000px when the list renders (kills the Cumulative Layout Shift: footer was 0.222×19, match-list 0.666×6). */ #app { max-width: 780px; margin: 0 auto; padding: 20px 16px 60px; min-height: 100vh; } .loading, .empty, .error, .load-error { text-align: center; color: var(--muted); padding: 40px 0; } .error { color: var(--error); } /* Inline retry shown when a competition's data fails to load — tapping re-runs the fetch. */ .load-error { cursor: pointer; -webkit-user-select: none; user-select: none; text-decoration: underline; text-underline-offset: 3px; } .load-error:hover, .load-error:focus { color: var(--ink); outline: none; } .league-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 22px; } .league-tab { border: 1px solid var(--line); background: var(--card); color: var(--ink); padding: 7px 14px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: all 0.15s; } .league-tab:hover:not(:disabled) { border-color: var(--accent); } .league-tab.active { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .league-tab.disabled, .league-tab:disabled { opacity: 0.45; cursor: not-allowed; } .search-bar { max-width: 780px; margin: 0 auto 16px; padding: 0 4px; } .team-search { width: 100%; box-sizing: border-box; padding: 11px 16px; font-size: 0.95rem; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--ink); } .team-search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus-ring); } .comp-tag { margin-left: 8px; flex-shrink: 0; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--muted); background: var(--bg); padding: 3px 7px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; } .date-header { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 22px 4px 10px; } /* Section labels splitting a competition into "Coming up" (upcoming teaser) + "Recent highlights". */ .section-head { font-size: 1.05rem; font-weight: 800; color: var(--ink); margin: 26px 4px 4px; padding-top: 16px; border-top: 1px solid var(--line); } .section-head:first-child { border-top: 0; padding-top: 0; margin-top: 6px; } .mg-upcoming-hdr { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; } .mg-upcoming-hdr:hover { color: var(--accent); } .mg-upcoming-caret { font-size: 0.75rem; flex-shrink: 0; } .match-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; cursor: pointer; transition: box-shadow 0.15s, transform 0.05s; } .match-card:hover { box-shadow: var(--shadow); } :root[data-theme="dark"] .match-card:hover { border-color: #2e6e52; } .match-card:active { transform: scale(0.997); } .match-card.open { border-color: var(--accent); border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .match-card.unavailable { cursor: default; opacity: 0.6; } .match-card.unavailable:hover { box-shadow: none; } .team { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0; } .team.home { justify-content: flex-end; text-align: right; } .team.away { justify-content: flex-start; } .team-name { font-weight: 600; font-size: 0.97rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .logo { height: 30px; width: 30px; object-fit: contain; flex-shrink: 0; } .vs { color: var(--muted); font-size: 0.8rem; font-weight: 600; flex-shrink: 0; } .play-hint { color: var(--accent); font-size: 0.82rem; font-weight: 700; flex-shrink: 0; width: 64px; text-align: right; } .ph-icon { margin-right: 4px; } .match-card.unavailable .play-hint { color: var(--muted); } @media (max-width: 520px) { #app { padding-left: 10px; padding-right: 10px; } .lp-pill { padding: 7px 11px; font-size: 0.82rem; } .lp-comp { padding: 6px 9px; font-size: 0.8rem; } .match-card { padding: 12px 10px; gap: 6px; } .logo { height: 24px; width: 24px; } .team { gap: 6px; } .team-name { font-size: 0.9rem; } .vs { font-size: 0.72rem; } .play-hint { width: auto; min-width: 18px; } .ph-label { display: none; } .comp-tag { font-size: 0.54rem; padding: 2px 5px; margin-left: 5px; } .match-card { gap: 5px; } .team { gap: 5px; } } .player-panel { background: var(--card); border: 1px solid var(--accent); border-top: none; border-radius: 0 0 12px 12px; margin: -10px 0 10px; padding: 14px; overflow: hidden; } .player-frame { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; background: #000; border-radius: 8px; overflow: hidden; } .player-frame iframe, .player-frame .yt-mount { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* Embed-resilience fallback (app.js showPlayerFallback) — fills the 16:9 frame when a video won't play. */ .player-frame .embed-fallback { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; text-align: center; } .player-frame .embed-fallback p { margin: 0; color: #cfcfcf; } .embed-fallback-link { color: #fff; font-weight: 600; text-decoration: none; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; padding: 8px 16px; } .embed-fallback-link:hover, .embed-fallback-link:focus { background: rgba(255,255,255,.12); } /* Theater mode — break the player out to full viewport width (still in-page, not OS fullscreen). */ .player-panel.theater { overflow: visible; } .player-panel.theater .player-frame { width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding-bottom: 0; height: min(56.25vw, 82vh); border-radius: 0; } /* Floating mini-player — when the open frame scrolls out of view, the panel docks to a fixed bottom-right player that keeps playing (app.js enterMini/exitMini). Same DOM/iframe node as the inline player (no reload) — only this class is added. */ .player-panel.mini { position: fixed; bottom: 16px; right: 16px; z-index: 1000; width: min(340px, 72vw); margin: 0; padding: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 28px rgba(0,0,0,.35); } /* The inline spoiler crop scrolls the YT title strip above the viewport, which a fixed mini can't do — so for spoiler-risky (protected) titles, crop the strip purely with CSS: shift the iframe up and grow it inside the overflow:hidden frame. No overlay → TOS-safe. */ .player-panel.mini.protected .player-frame .yt-mount, .player-panel.mini.protected .player-frame iframe { top: -24%; height: 130%; } /* Compact controls: drop seek/time/theater/fullscreen, keep just play-pause + close. */ .player-panel.mini .seek, .player-panel.mini .time, .player-panel.mini .theater, .player-panel.mini .fs, .player-panel.mini .title-note, .player-panel.mini .end-note { display: none; } .player-panel.mini .player-controls { margin: 0; padding: 6px 8px; gap: 8px; justify-content: space-between; background: var(--card); } .player-controls { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .ctrl { border: 1px solid var(--line); background: var(--card); color: var(--ink); height: 38px; min-width: 38px; padding: 0 10px; border-radius: 8px; font-size: 0.95rem; font-weight: 700; cursor: pointer; flex-shrink: 0; } .ctrl:hover { border-color: var(--accent); } .ctrl.pp { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .time { font-variant-numeric: tabular-nums; font-size: 0.8rem; color: var(--muted); min-width: 38px; text-align: center; flex-shrink: 0; } .seek { flex: 1; min-width: 0; height: 6px; -webkit-appearance: none; appearance: none; background: var(--line); border-radius: 999px; cursor: pointer; accent-color: var(--accent); } .seek::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); cursor: pointer; } .seek::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--accent); cursor: pointer; } .title-note { background: var(--note-bg); color: var(--note-ink); border-radius: 8px; padding: 11px 14px; font-size: 0.95rem; line-height: 1.5; margin-top: 12px; /* Draw the eye when it appears: a few slow amber pulses, then settle. */ animation: spoilerFlash 1.25s ease-in-out 3; } @keyframes spoilerFlash { 0%, 100% { background: var(--note-bg); color: var(--note-ink); box-shadow: 0 0 0 0 rgba(255, 176, 32, 0); } 50% { background: #ffce47; color: #5a3d00; box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.45); } } /* Spoiler-protected playback scrolls the whole video (poster + title) out of view, so the play button is the user's entry point. On mobile autoplay is blocked, so pulse it until playback starts to make the required tap obvious. On desktop autoplay fires instantly, so the pulse clears right away. */ .player-panel.awaiting-play .ctrl.pp { animation: ppPulse 1.3s ease-in-out infinite; } @keyframes ppPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(10, 125, 62, 0.5); } 50% { box-shadow: 0 0 0 7px rgba(10, 125, 62, 0); } } .bottom-spacer { height: 0; } .end-note { background: var(--card2); color: var(--ink); border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; margin-top: 12px; font-weight: 600; } .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .modal-box { background: var(--card); border-radius: 14px; padding: 22px; max-width: 440px; width: 100%; box-shadow: 0 14px 48px rgba(0,0,0,0.25); } .modal-box h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; } .modal-box p { font-size: 0.9rem; color: var(--ink); line-height: 1.5; } .modal-check { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--muted); margin: 16px 0 4px; cursor: pointer; } .modal-check input { cursor: pointer; } .modal-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 14px; } .modal-buttons .ctrl { flex-shrink: 1; min-width: 0; max-width: 100%; } /* "Near-fullscreen" layout: the whole panel goes fullscreen so our custom controls (play, seek, time, fullscreen toggle, close) stay visible. */ .player-panel.is-fullscreen { background: #000; padding: 0; margin: 0; border: none; border-radius: 0; display: flex; flex-direction: column; width: 100vw; height: 100vh; position: relative; } .player-panel.is-fullscreen .player-frame { flex: 1 1 100%; height: 100%; padding-bottom: 0; border-radius: 0; } /* Controls OVERLAY the video (instead of taking their own row) so the video gets the full viewport height — the key win on mobile, where the browser chrome already eats space. Gradient scrim keeps them legible; env(safe-area-inset-bottom) clears the iOS home bar. */ .player-panel.is-fullscreen .player-controls { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; z-index: 2; background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.45) 60%, transparent); border-top: none; padding: 18px 18px calc(16px + env(safe-area-inset-bottom, 0px)); } .player-panel.is-fullscreen .title-note, .player-panel.is-fullscreen .end-note { display: none; } .player-panel.is-fullscreen .ctrl { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: rgba(255, 255, 255, 0.2); } .player-panel.is-fullscreen .ctrl:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.35); } .player-panel.is-fullscreen .ctrl.pp { background: var(--accent); border-color: var(--accent); } .player-panel.is-fullscreen .time { color: #ddd; } .player-panel.is-fullscreen .seek { background: rgba(255, 255, 255, 0.25); } /* Pseudo-fullscreen — fallback for browsers without the Fullscreen API on non-