/* ── Theme tokens ────────────────────────────────────────────── * Same custom-property vocabulary as the demo-casino frontend (--accent --bar1 * --bar2 --panel2/3 --line --odd --on-hero*, color-mix on top of them), so a * parent brand can re-skin this sportsbook by overriding these on :root — the * default values below ARE the current green theme (= the "emerald" palette), * nothing else changes. * The full casino appearance system is ported below: 6 palettes on * , 3 modes on data-color-mode, 6 action colors on * data-action-color and 4 typefaces on data-font-family (features/theme). * Embedding note: a host that themes the iframe only needs to set those * attributes on (or inject `:root { --accent: … }`); no markup or class * names are involved. */ /* self-hosted typefaces for the appearance switcher (same files as demo-casino) */ @font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/rubik-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Rubik"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/rubik-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/roboto-condensed-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Roboto Condensed"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/roboto-condensed-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Literata"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/literata-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Literata"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("fonts/literata-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* surfaces */ --bg: #11201a; --bg-deep: #0b1712; --bar1: #0a5c3b; --bar2: #07301f; --tabs: #16241d; --panel: #1b2a23; --panel2: #16221c; --panel3: #20332a; --head: #172019; --line: #2a3c33; --line-soft: #26372f; /* odds / actions */ --odd: #ffd23f; --odd-soft: #ffdf70; --odd-bg: #233029; --odd-bg-h: #2f4338; --on-action: #2b2100; --action-hover: #ffdf70; --action-border: #ffd23f; --action-on-dark: var(--odd); /* action color as readable on bar surfaces */ /* text */ --text: #e9f0ec; --muted: #8aa094; --muted-light: #b7c7bf; --on-bar: #ffffff; --on-hero: #ffffff; --on-hero-muted: #c7d9d0; --on-accent: #06140f; /* brand + state */ --accent: #2bbd72; --accent-dark: #168553; --danger: #e25b5b; --info: #5b8fd2; --up: #2e9e5b; --down: var(--danger); --focus-ring: var(--odd); /* derived surfaces — hand-tuned for the emerald default; every OTHER palette/mode recomputes them from its own tokens (block further down) */ --day1: #1f6038; /* competition/day header gradient (bet365 green bar) */ --day2: #103a22; --trk1: #1f6b46; /* tracker pitch gradient */ --trk2: #0c3f28; /* shape */ --radius: 6px; --radius-lg: 12px; --shadow: 0 16px 38px #030b0770; /* legacy aliases (kept so older rules keep resolving) */ --comp: #233a52; --comp2: #3f2a30; } /* ── Typeface + palette templates (ported 1:1 from demo-casino) ────────────── Palette blocks override only what differs from the emerald :root defaults. */ :root[data-font-family="system"] { --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } :root[data-font-family="rounded"] { --font-ui: "Rubik", system-ui, sans-serif; } :root[data-font-family="compact"] { --font-ui: "Roboto Condensed", "Arial Narrow", sans-serif; } :root[data-font-family="editorial"] { --font-ui: "Literata", Georgia, serif; } :root[data-theme="casino-blue"] { --bg: #0c1624; --bg-deep: #07101b; --bar1: #164f7a; --bar2: #0a2843; --tabs: #111d2d; --panel: #172638; --panel2: #121f30; --panel3: #1d3046; --line: #30465f; --line-soft: #263a51; --odd: #f4c95d; --odd-soft: #ffe19a; --action-hover: #ffe19a; --text: #edf5ff; --muted: #91a5bd; --muted-light: #bdcce0; --accent: #54b9ff; --accent-dark: #278bc9; --info: #8aa5ff; --shadow: 0 16px 38px #02081280; } :root[data-theme="royal"] { --bg: #1b1725; --bg-deep: #100d18; --bar1: #513a7f; --bar2: #291d45; --tabs: #211b2e; --panel: #2a2336; --panel2: #221c2d; --panel3: #372d47; --line: #473a58; --line-soft: #3c324c; --odd: #f6c85f; --odd-soft: #f9da8d; --action-hover: #f9da8d; --text: #f4effa; --muted: #a99db8; --muted-light: #d1c7dc; --accent: #bd8cff; --accent-dark: #805ac2; --info: #8aa9ff; --shadow: 0 16px 38px #09061180; } :root[data-theme="ember"] { --bg: #221815; --bg-deep: #140e0c; --bar1: #74372f; --bar2: #3b1c18; --tabs: #281d1a; --panel: #312521; --panel2: #281e1b; --panel3: #3d2d29; --line: #503b35; --line-soft: #45332e; --odd: #ffd166; --odd-soft: #ffe092; --action-hover: #ffe092; --text: #f7efec; --muted: #ad9890; --muted-light: #d6c6c0; --accent: #ff8a61; --accent-dark: #bc573c; --info: #77a6df; --shadow: 0 16px 38px #0e060480; } :root[data-theme="burgundy"] { --bg: #21141c; --bg-deep: #130b10; --bar1: #762c54; --bar2: #40162c; --tabs: #281820; --panel: #301e27; --panel2: #27171f; --panel3: #402a35; --line: #593849; --line-soft: #49303c; --odd: #ffd061; --odd-soft: #ffe092; --action-hover: #ffe092; --text: #fff0f6; --muted: #b59aa8; --muted-light: #dec7d2; --accent: #ff83bd; --accent-dark: #c94c84; --info: #7ba8e6; --shadow: 0 16px 38px #10050b80; } :root[data-theme="graphite"] { --bg: #181b20; --bg-deep: #0e1014; --bar1: #414754; --bar2: #252a33; --tabs: #1d2127; --panel: #252a31; --panel2: #20242a; --panel3: #333943; --line: #4c5563; --line-soft: #3e4652; --odd: #f5ca62; --odd-soft: #ffdf91; --action-hover: #ffdf91; --text: #f2f5fa; --muted: #9da7b4; --muted-light: #cbd2dc; --accent: #8dc5ff; --accent-dark: #5690ca; --info: #89a7ff; --shadow: 0 16px 38px #0305098c; } /* ── Color modes (light / gray), per-palette bar+accent overrides ──────────── */ :root[data-color-mode="light"] { color-scheme: light; --bg: #eef4f1; --bg-deep: #ffffff; --tabs: #f8fbf9; --panel: #ffffff; --panel2: #e8f0ec; --panel3: #dce8e2; --line: #728b7e; --line-soft: #d1ddd7; --text: #10241b; --muted: #5b7066; --muted-light: #354d42; --bar1: #087443; --bar2: #064b2c; --accent: #087443; --accent-dark: #056039; --odd: #d69b00; --odd-soft: #edbc3e; --action-hover: color-mix(in srgb, var(--odd) 84%, white); --action-border: #8a6500; --on-action: #2b2100; --action-on-dark: #ffd23f; --danger: #b43f3f; --info: #356fae; --up: #087443; --on-hero-muted: #d2e1da; --on-accent: #ffffff; --focus-ring: var(--accent); --shadow: 0 16px 38px #142c2029; } :root[data-color-mode="light"][data-theme="casino-blue"] { --bar1: #176da1; --bar2: #0d4165; --accent: #0873ab; --accent-dark: #075783; --odd: #d49a16; --odd-soft: #edbd56; --info: #526fc0; } :root[data-color-mode="light"][data-theme="royal"] { --bar1: #654596; --bar2: #392658; --accent: #7350a5; --accent-dark: #583b82; --odd: #c78f12; --odd-soft: #e4b84d; --info: #456eb9; } :root[data-color-mode="light"][data-theme="ember"] { --bar1: #98442f; --bar2: #5e281b; --accent: #ad452c; --accent-dark: #873522; --odd: #c58b12; --odd-soft: #e2b54e; --info: #3e70ad; } :root[data-color-mode="light"][data-theme="burgundy"] { --bar1: #8f2e5e; --bar2: #591a38; --accent: #9b2f67; --accent-dark: #77204d; --odd: #c58b12; --odd-soft: #e2b54e; --info: #3f70b4; } :root[data-color-mode="light"][data-theme="graphite"] { --bar1: #3f5875; --bar2: #273a51; --accent: #285f9b; --accent-dark: #1f4b7c; --odd: #bd850e; --odd-soft: #deb044; --info: #4f6eb8; } :root[data-color-mode="gray"] { color-scheme: dark; --bg: #464f50; --bg-deep: #303738; --tabs: #394142; --panel: #3c4546; --panel2: #414a4b; --panel3: #4c5657; --line: #a4aeaf; --line-soft: #657071; --text: #f4f7f7; --muted: #c2cdce; --muted-light: #e3e9ea; --bar1: #17684d; --bar2: #25433a; --accent: #55df9a; --accent-dark: #37c981; --on-accent: #07170f; --info: #91c2ff; --on-hero-muted: #d7e1dd; --focus-ring: var(--accent); --shadow: 0 16px 38px #151b1b80; } :root[data-color-mode="gray"][data-theme="casino-blue"] { --bar1: #23688e; --bar2: #294555; --accent: #79cbff; --accent-dark: #52b5ed; } :root[data-color-mode="gray"][data-theme="royal"] { --bar1: #6b4d89; --bar2: #43394f; --accent: #d5b5ff; --accent-dark: #b68bea; } :root[data-color-mode="gray"][data-theme="ember"] { --bar1: #8c4b3c; --bar2: #513b36; --accent: #ffad91; --accent-dark: #ee8665; } :root[data-color-mode="gray"][data-theme="burgundy"] { --bar1: #8c3f69; --bar2: #543744; --accent: #ffadd3; --accent-dark: #ef83b7; } :root[data-color-mode="gray"][data-theme="graphite"] { --bar1: #596273; --bar2: #3d444e; --accent: #b7d7ff; --accent-dark: #8cbbed; } /* ── Action colors (odds / CTA / highlight family) ─────────────────────────── */ :root[data-action-color="gold"] { --odd: #ffd23f; --odd-soft: #ffdf70; --action-hover: #ffdf70; --action-border: #ffd23f; --on-action: #2b2100; --action-on-dark: #ffd23f; } :root[data-action-color="coral"] { --odd: #ff806d; --odd-soft: #ffab9f; --action-hover: #ffab9f; --action-border: #ff806d; --on-action: #2b0d08; --action-on-dark: #ff806d; } :root[data-action-color="aqua"] { --odd: #55d9e6; --odd-soft: #8ae8ef; --action-hover: #8ae8ef; --action-border: #55d9e6; --on-action: #052126; --action-on-dark: #55d9e6; } :root[data-action-color="lime"] { --odd: #a5df58; --odd-soft: #c3ec8a; --action-hover: #c3ec8a; --action-border: #a5df58; --on-action: #142307; --action-on-dark: #a5df58; } :root[data-action-color="violet"] { --odd: #c5a3ff; --odd-soft: #d7c0ff; --action-hover: #d7c0ff; --action-border: #c5a3ff; --on-action: #1b0a32; --action-on-dark: #c5a3ff; } :root[data-action-color="rose"] { --odd: #ff8fc8; --odd-soft: #ffb6d8; --action-hover: #ffb6d8; --action-border: #ff8fc8; --on-action: #320d20; --action-on-dark: #ff8fc8; } /* on light surfaces the action family flips to its dark, readable variant */ :root[data-color-mode="light"][data-action-color="gold"] { --odd: #d69b00; --odd-soft: #edbc3e; --action-hover: #edbc3e; --action-border: #8a6500; --on-action: #2b2100; --action-on-dark: #ffd23f; } :root[data-color-mode="light"][data-action-color="coral"] { --odd: #a94033; --odd-soft: #8f342a; --action-hover: #8f342a; --action-border: #a94033; --on-action: #ffffff; --action-on-dark: #ffc0c9; } :root[data-color-mode="light"][data-action-color="aqua"] { --odd: #006f80; --odd-soft: #005d6b; --action-hover: #005d6b; --action-border: #006f80; --on-action: #ffffff; --action-on-dark: #8be9f2; } :root[data-color-mode="light"][data-action-color="lime"] { --odd: #4b7418; --odd-soft: #3d6012; --action-hover: #3d6012; --action-border: #4b7418; --on-action: #ffffff; --action-on-dark: #c3ec8a; } :root[data-color-mode="light"][data-action-color="violet"] { --odd: #6d3fc0; --odd-soft: #5930a2; --action-hover: #5930a2; --action-border: #6d3fc0; --on-action: #ffffff; --action-on-dark: #dccbff; } :root[data-color-mode="light"][data-action-color="rose"] { --odd: #a72c69; --odd-soft: #8d2458; --action-hover: #8d2458; --action-border: #a72c69; --on-action: #ffffff; --action-on-dark: #ffc4df; } :root[data-color-mode="gray"][data-action-color="coral"] { --action-on-dark: #ffc0c9; } :root[data-color-mode="gray"][data-action-color="aqua"] { --action-on-dark: #8be9f2; } :root[data-color-mode="gray"][data-action-color="lime"] { --action-on-dark: #c3ec8a; } :root[data-color-mode="gray"][data-action-color="violet"] { --action-on-dark: #dccbff; } :root[data-color-mode="gray"][data-action-color="rose"] { --action-on-dark: #ffc4df; } /* ── Sportsbook-only derived surfaces ─────────────────────────────────────── The casino has no odds cells, day headers or pitch tracker, so these tokens don't exist there. For every palette/mode EXCEPT the hand-tuned emerald+dark default they are derived from the active palette with color-mix, so all six palettes stay coherent across league pages, event pages and the tracker. */ :root[data-theme="casino-blue"], :root[data-theme="royal"], :root[data-theme="ember"], :root[data-theme="burgundy"], :root[data-theme="graphite"], :root[data-color-mode="light"], :root[data-color-mode="gray"] { --head: color-mix(in srgb, var(--panel2) 75%, var(--bg-deep)); --odd-bg: color-mix(in srgb, var(--panel3) 60%, var(--panel)); --odd-bg-h: color-mix(in srgb, var(--panel3) 88%, var(--text)); --day1: color-mix(in srgb, var(--bar1) 90%, var(--text)); --day2: color-mix(in srgb, var(--bar2) 78%, var(--bar1)); --trk1: color-mix(in srgb, var(--accent) 25%, var(--bar1)); --trk2: color-mix(in srgb, var(--bar2) 85%, var(--accent)); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } * { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--bg); color: var(--text); font: 13px/1.4 var(--font-ui); display: flex; flex-direction: column; height: 100vh; } .topbar, .sporttabs { flex: none; } /* ── Top bar ───────────────────────────────────────────────── */ .topbar { display: flex; align-items: center; gap: 28px; height: 52px; padding: 0 18px; background: linear-gradient(180deg, var(--bar1), var(--bar2)); border-bottom: 1px solid color-mix(in srgb, var(--bg-deep) 60%, transparent); } .brand { font-size: 22px; font-weight: 800; letter-spacing: -.5px; display: flex; align-items: center; } .brand-a { color: #fff; } .brand-b { color: var(--action-on-dark); } /* stays readable on the bar in light mode */ /* An operator logo (features/brand) replaces the wordmark in place. Bounded by the topbar's own 52px height so a tall or wide upload can never push the header around; the wordmark stays in the DOM, hidden, as the 's fallback so a logo that 404s leaves a readable header rather than an empty box. */ .brand-logo { max-height: 34px; max-width: 180px; width: auto; height: auto; object-fit: contain; display: block; } .brand-wordmark[hidden] { display: none; } .topnav { display: flex; gap: 22px; font-weight: 600; color: var(--on-hero-muted); } .topnav .active { color: var(--on-bar); border-bottom: 2px solid var(--accent); padding-bottom: 4px; } .conn { margin-left: auto; display: flex; align-items: center; gap: 7px; color: color-mix(in srgb, var(--on-bar) 74%, transparent); font-size: 12px; } .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); } .dot.live { background: var(--accent); box-shadow: 0 0 8px var(--accent); } .dot.mock { background: var(--action-on-dark); } /* ── Appearance switcher (casino header selector, sized for the 52px bar) ── */ .header-mode-options { height: 38px; flex: none; display: flex; align-items: center; gap: 3px; padding: 1px; border: 1px solid #ffffff25; border-radius: 8px; background: color-mix(in srgb, var(--bar2) 72%, transparent); } .header-mode-options button { height: 34px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 0 8px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: color-mix(in srgb, #fff 72%, var(--muted-light)); font: inherit; font-size: 10px; font-weight: 750; cursor: pointer; } .header-mode-options button:hover { color: #fff; background: #ffffff12; } .header-mode-options button[data-selected] { border-color: #ffffff45; background: #ffffff1d; color: #fff; box-shadow: inset 0 -2px 0 var(--action-on-dark); } .header-mode-options button:focus-visible { outline: 2px solid var(--action-on-dark); outline-offset: 1px; } .header-mode-options svg { width: 15px; height: 15px; flex: none; } .header-theme { position: relative; flex: none; } .header-theme > summary { min-width: 38px; height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 9px; border: 1px solid #ffffff25; border-radius: 8px; background: color-mix(in srgb, var(--bar2) 72%, transparent); color: #fff; font-size: 10px; font-weight: 750; cursor: pointer; list-style: none; } .header-theme > summary::-webkit-details-marker { display: none; } .header-theme > summary:hover, .header-theme[open] > summary { border-color: #ffffff55; background: color-mix(in srgb, var(--bar2) 88%, transparent); } .header-theme > summary:focus-visible { outline: 2px solid var(--action-on-dark); outline-offset: 2px; } .header-theme > summary > svg { width: 16px; height: 16px; color: color-mix(in srgb, var(--accent) 48%, white); } .header-theme-preview { width: 28px; height: 20px; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid #ffffff42; border-radius: 5px; } .header-theme-preview i:nth-child(1) { background: var(--bar1); } .header-theme-preview i:nth-child(2) { background: var(--accent); } .header-theme-preview i:nth-child(3) { background: var(--odd); } .header-theme-popover { position: absolute; right: 0; top: calc(100% + 9px); z-index: 85; width: 320px; display: grid; gap: 9px; padding: 13px; max-height: calc(100dvh - 76px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; border: 1px solid var(--line); border-radius: 10px; background: var(--tabs); color: var(--text); box-shadow: var(--shadow); } .header-theme-popover > small { color: var(--muted); font-size: 9px; line-height: 1.35; } .header-mode-compact:empty { display: none; } .header-mode-compact:not(:empty) { display: grid; gap: 6px; padding-bottom: 9px; border-bottom: 1px solid var(--line-soft); } .header-mode-compact .header-mode-options { width: 100%; height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; border: 0; background: transparent; } .header-mode-compact .header-mode-options button { width: auto; min-width: 0; height: 40px; } .header-theme-label { display: flex; align-items: center; gap: 7px; color: var(--text); font-size: 11px; font-weight: 750; } .header-theme-label svg { width: 16px; height: 16px; color: var(--accent); } .palette-options, .action-options { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .font-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .palette-options button, .action-options button, .font-options button { min-width: 0; min-height: 44px; display: flex; align-items: center; gap: 7px; padding: 6px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--bg-deep); color: var(--muted-light); font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; text-align: left; } .font-options button { min-height: 52px; flex-direction: column; justify-content: center; gap: 2px; text-align: center; } .palette-options button:hover, .action-options button:hover, .font-options button:hover { border-color: color-mix(in srgb, var(--accent) 52%, var(--line)); color: var(--text); } .palette-options button[data-selected] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-deep)); color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); } .action-options button[data-selected] { border-color: var(--action-border); background: color-mix(in srgb, var(--odd) 12%, var(--bg-deep)); color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--odd) 12%, transparent); } .font-options button[data-selected] { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-deep)); color: var(--text); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 12%, transparent); } .palette-options button:focus-visible, .action-options button:focus-visible, .font-options button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; } .header-action-label, .header-typography-label { margin-top: 2px; padding-top: 9px; border-top: 1px solid var(--line-soft); } .font-sample { color: var(--accent); font-size: 16px; font-weight: 750; line-height: 1; } [data-font-option="system"] { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } [data-font-option="rounded"] { font-family: "Rubik", system-ui, sans-serif; } [data-font-option="compact"] { font-family: "Roboto Condensed", "Arial Narrow", sans-serif; } [data-font-option="editorial"] { font-family: "Literata", Georgia, serif; } .palette-swatch { width: 28px; height: 22px; flex: none; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 5px; } .palette-swatch i { display: block; } .palette-swatch i:nth-child(3) { background: var(--odd); } [data-theme-option="emerald"] .palette-swatch i:nth-child(1) { background: #0a5c3b; } [data-theme-option="emerald"] .palette-swatch i:nth-child(2) { background: #2bbd72; } [data-theme-option="casino-blue"] .palette-swatch i:nth-child(1) { background: #164f7a; } [data-theme-option="casino-blue"] .palette-swatch i:nth-child(2) { background: #54b9ff; } [data-theme-option="royal"] .palette-swatch i:nth-child(1) { background: #513a7f; } [data-theme-option="royal"] .palette-swatch i:nth-child(2) { background: #bd8cff; } [data-theme-option="ember"] .palette-swatch i:nth-child(1) { background: #74372f; } [data-theme-option="ember"] .palette-swatch i:nth-child(2) { background: #ff8a61; } [data-theme-option="burgundy"] .palette-swatch i:nth-child(1) { background: #762c54; } [data-theme-option="burgundy"] .palette-swatch i:nth-child(2) { background: #ff83bd; } [data-theme-option="graphite"] .palette-swatch i:nth-child(1) { background: #414754; } [data-theme-option="graphite"] .palette-swatch i:nth-child(2) { background: #8dc5ff; } .action-swatch { width: 28px; height: 22px; flex: none; border: 1px solid var(--line); border-radius: 5px; } [data-action-color-option="gold"] .action-swatch { background: linear-gradient(135deg, #ffd23f 0 50%, #ffd23f 50%); } [data-action-color-option="coral"] .action-swatch { background: linear-gradient(135deg, #ff806d 0 50%, #a94033 50%); } [data-action-color-option="aqua"] .action-swatch { background: linear-gradient(135deg, #55d9e6 0 50%, #006f80 50%); } [data-action-color-option="lime"] .action-swatch { background: linear-gradient(135deg, #a5df58 0 50%, #4b7418 50%); } [data-action-color-option="violet"] .action-swatch { background: linear-gradient(135deg, #c5a3ff 0 50%, #6d3fc0 50%); } [data-action-color-option="rose"] .action-swatch { background: linear-gradient(135deg, #ff8fc8 0 50%, #a72c69 50%); } @media (max-width: 1120px) { .header-mode-copy { display: none; } .header-mode-options button { padding: 0; } } @media (max-width: 920px) { /* the standalone mode switch docks inside the popover (theme-ui relocation) */ .topbar > .header-mode-options { display: none; } .header-theme-copy, .header-theme > summary > svg { display: none; } .header-theme > summary { width: 38px; padding: 0; justify-content: center; } } @media (max-width: 620px) { .header-theme-popover { position: fixed; top: 56px; right: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); width: min(320px, calc(100vw - 16px)); max-height: none; } } /* ── Sport tabs ────────────────────────────────────────────── */ .sporttabs { display: flex; gap: 4px; padding: 0 12px; background: var(--tabs); border-bottom: 1px solid var(--line); overflow-x: auto; } .sporttab { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 76px; padding: 10px 6px 8px; cursor: pointer; color: var(--muted); border-bottom: 3px solid transparent; user-select: none; } .sporttab:hover { color: var(--text); } .sporttab.active { color: var(--text); border-bottom-color: var(--accent); } .sporttab img { width: 22px; height: 22px; filter: grayscale(1) brightness(1.6) opacity(.55); transition: filter .15s; } /* passive = grey-whitish */ .sporttab:hover img { filter: grayscale(1) brightness(1.6) opacity(.8); } .sporttab.active img { filter: none; } /* selected = real colour */ .sporttab span { font-size: 10px; font-weight: 600; white-space: nowrap; } /* one line always — bar itself scrolls */ /* ── Layout: events list + detail panel ────────────────────── */ .view { flex: 1; min-height: 0; } .layout { display: grid; grid-template-columns: 1fr 400px; height: 100%; } .list-wrap { height: 100%; display: flex; flex-direction: column; } .list-wrap .layout { flex: 1; min-height: 0; height: auto; } /* landing market tabs */ .mkt-tabs { display: flex; gap: 20px; padding: 9px 14px 0; background: var(--panel); border-bottom: 1px solid var(--line); font-size: 13px; color: var(--muted); flex: none; } .mkt-tabs span { cursor: pointer; padding: 2px 0 9px; white-space: nowrap; } .mkt-tabs span.on { color: var(--text); font-weight: 600; box-shadow: inset 0 -2px 0 var(--accent); } .events { overflow-y: auto; padding: 10px 12px 40px; } .detail { background: var(--panel2); border-left: 1px solid var(--line); overflow-y: auto; } .loading { padding: 40px; color: var(--muted); } /* A prematch page whose match / sport was withdrawn while it was open: an honest end state with a route back, never a frozen page holding odds we can't serve. */ .gone-box { padding: 44px 20px; text-align: center; } .gone-box .gone-t { font-size: 17px; font-weight: 800; } .gone-box .gone-s { color: var(--muted); margin-top: 6px; font-size: 13px; } .gone-box .gone-a { margin-top: 18px; } .gone-btn { padding: 9px 18px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: var(--fg); font: inherit; font-weight: 700; cursor: pointer; } .gone-btn:hover { border-color: var(--accent); color: var(--accent); } /* a slip item the server just refused (its event is no longer offered) */ .slip-item.si-dead { background: color-mix(in srgb, var(--down) 9%, transparent); } .slip-item.si-dead .si-odd { text-decoration: line-through; color: var(--muted); } .slip-item .si-dead-tag { display: block; color: var(--down); font-size: 11px; font-weight: 700; margin-top: 2px; } /* Place-time revalidation: a re-priced pick shows the old price struck through next to the one it will actually be placed at. Wraps under its own line on a narrow phone rather than squeezing the odds column. */ .slip-item .si-odd .si-was { color: var(--muted); font-weight: 600; font-size: 12px; } .slip-item .si-odd .si-new { color: var(--accent); } /* …and the button says what the next tap accepts. */ .slip-place.confirm { background: var(--accent); color: var(--on-accent); } /* ── Competition group ─────────────────────────────────────── */ .comp { margin-bottom: 12px; } .comp-h { display: flex; align-items: center; padding: 8px 12px; font-weight: 700; font-size: 12px; background: linear-gradient(90deg, var(--day1), var(--day2)); border-radius: var(--radius) var(--radius) 0 0; color: #eaf4ee; } .comp-name { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; } .comp-name span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .comp-h .star { color: #ffffff88; flex: none; } /* "1 X 2" labels — widths match the odds columns below so they line up */ .comp-cols { display: flex; align-items: center; gap: 8px; flex: none; color: #cfe3d8; font-weight: 600; } .cl-group { display: flex; gap: 5px; } .cl-group .cl { width: 54px; text-align: center; } .cl-group.goals { gap: 6px; } .cl-group.goals .cl2 { width: 66px; text-align: center; } .cl-ico { width: 30px; flex: none; } .comp-body { border: 1px solid var(--line); border-top: none; border-radius: 0 0 var(--radius) var(--radius); } /* ── Event row ─────────────────────────────────────────────── */ .event { display: flex; align-items: center; gap: 14px; padding: 10px 12px; cursor: pointer; border-bottom: 1px solid var(--line); background: var(--panel); } .event:last-child { border-bottom: none; } .event:hover { background: var(--panel3); } /* no auto-highlight on the selected row — all landing rows look uniform */ .ev-main { min-width: 0; flex: 1; } .ev-teams { display: flex; flex-direction: column; gap: 6px; } .team { display: flex; align-items: center; gap: 8px; } .kit { width: 9px; height: 9px; border-radius: 50%; flex: none; border: 1px solid #0006; } .serve { color: var(--accent); font-size: 10px; width: 8px; flex: none; } .team .nm-wrap { width: 170px; flex: none; display: flex; align-items: center; gap: 5px; min-width: 0; } .team .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* soccer red card badge after the team name */ .team .rc { display: none; flex: none; min-width: 9px; height: 12px; padding: 0 2px; box-sizing: border-box; background: #e2453a; border-radius: 1.5px; font: 700 9px/12px system-ui, sans-serif; font-style: normal; color: #fff; text-align: center; } /* score boxes, right next to the team name */ .team .ts { display: flex; gap: 6px; font-variant-numeric: tabular-nums; } .team .ts b { min-width: 22px; padding: 1px 4px; text-align: center; font-weight: 700; color: var(--text); background: color-mix(in srgb, var(--panel3) 62%, var(--line)); border-radius: 3px; } /* tennis games/points after the first column: no box, plain text */ .team .ts b.plain { min-width: 14px; padding: 1px 2px; background: transparent; color: var(--muted-light); font-weight: 600; } .ev-meta { margin-top: 7px; color: var(--muted); font-size: 11px; display: flex; gap: 8px; align-items: center; } .min { color: var(--accent); font-weight: 700; } /* right group: odds (fixed widths) + sport icon — aligns with the header labels */ .ev-right { display: flex; align-items: center; gap: 8px; flex: none; } .ev-odds { display: flex; gap: 5px; margin-left: auto; flex: none; transition: opacity .15s ease; } /* cold row scrolled back into view — odds dim until the fresh snapshot lands (~100ms) */ .event.warming .ev-odds { opacity: .5; } /* Match Goals tab: two stacked columns (BTTS Yes/No, 1st Half Over/Under) */ .ev-odds.goals { gap: 6px; } .ev-odds.goals .gcol { display: flex; flex-direction: column; gap: 4px; } .ev-odds.goals .odd { width: 66px; } .odd { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 54px; height: 38px; padding: 2px 4px; background: var(--odd-bg); border: 1px solid var(--line); border-radius: 4px; color: var(--odd); font-weight: 700; cursor: pointer; } .odd:hover { background: var(--odd-bg-h); } .odd .ol { color: var(--muted); font-size: 10px; font-weight: 600; } .odd.empty { color: var(--muted); background: transparent; } .ev-ico { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; } .ev-ico img { width: 24px; height: 24px; opacity: .8; } /* ── Suspended odds (padlock) + Market Suspended ───────────── */ .ov { position: relative; display: inline-block; min-width: 1em; } .ov.susp { color: transparent !important; } .ov.susp::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 14px; opacity: .85; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='14' viewBox='0 0 12 14' fill='none' stroke='%238aa094' stroke-width='1.4'%3E%3Crect x='1.5' y='6' width='9' height='6.5' rx='1'/%3E%3Cpath d='M3.5 6V4.2a2.5 2.5 0 0 1 5 0V6'/%3E%3C/svg%3E") center/contain no-repeat; } .susp-cell { cursor: default !important; } .odd.susp-cell, .mcell.susp-cell { background: color-mix(in srgb, var(--panel) 55%, #000); } .sel.susp-cell .sel-n { color: var(--muted); } /* market header label */ .market-h .market-r { display: flex; align-items: center; } .susp-label { display: none; color: var(--muted); font-weight: 600; font-size: 11px; } .market-h.susp .bb { display: none; } .market-h.susp .susp-label { display: inline; } .market-h.susp .mh-name { color: var(--muted); } /* odds flash */ @keyframes flashUp { 0% { background: var(--up); color: #fff; } 100% {} } @keyframes flashDown { 0% { background: var(--down); color: #fff; } 100% {} } .flash-up { animation: flashUp .7s ease-out; } .flash-down { animation: flashDown .7s ease-out; } /* ── Detail panel ──────────────────────────────────────────── */ .d-empty { padding: 50px 20px; color: var(--muted); text-align: center; } .d-head { padding: 14px 16px; border-bottom: 1px solid var(--line); } .d-comp { color: var(--muted); font-size: 11px; margin-bottom: 8px; } .d-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; } .d-team { font-weight: 700; font-size: 15px; } .d-team.away { text-align: right; } .d-big { text-align: center; } .d-big .sc { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; } .d-big .mn { color: var(--accent); font-size: 12px; font-weight: 700; } .d-tracker { height: 120px; margin: 12px 16px; border-radius: 8px; background: radial-gradient(120% 100% at 50% 0%, var(--trk1), var(--trk2)); display: flex; align-items: center; justify-content: center; color: #ffffffcc; font-size: 12px; letter-spacing: 1px; position: relative; overflow: hidden; } .d-tracker::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #ffffff10 0 2px, transparent 2px 60px); } .d-tracker .tg { z-index: 1; text-transform: uppercase; } /* ── Live match tracker (game view: real tracker.geniusfeeds.live iframe) ──── */ .trk { margin: 12px 16px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--panel2); } .trk.dead { display: none; } /* iframe error/timeout → panel gone, no grey box */ .trk-bar { display: flex; width: 100%; align-items: center; justify-content: space-between; padding: 9px 12px; border: 0; background: var(--head); color: var(--text); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; user-select: none; } .trk-bar .tl .dot { color: var(--accent); margin-right: 6px; } .trk-bar .cv { color: var(--muted); transition: transform .2s; } .trk.off .trk-bar .cv { transform: rotate(-90deg); } /* height fits the tracker's EMBEDDED layout (it drops its own header/footer inside a frame: tab bar + pitch ≈ 256px at the ~400px column/mobile width); the ground matches the tracker page's own dark body — no flash while loading */ .trk-frame { height: 300px; background: #111729; overflow: hidden; } .trk.off .trk-frame { display: none; } .trk-frame iframe { display: block; width: 100%; height: 100%; border: 0; opacity: 0; transition: opacity .25s; } .trk-frame iframe.on { opacity: 1; } .trk-mock { height: 100%; display: flex; align-items: center; justify-content: center; background: radial-gradient(120% 100% at 50% 0%, var(--trk1), var(--trk2)); color: #ffffffcc; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; } .d-stats { padding: 6px 16px 12px; } .d-stat { display: grid; grid-template-columns: 40px 1fr 40px; gap: 8px; align-items: center; padding: 7px 0; } .d-stat .l, .d-stat .r { font-weight: 700; font-variant-numeric: tabular-nums; } .d-stat .r { text-align: right; } .d-stat .c { text-align: center; color: var(--muted); font-size: 11px; } .d-bar { height: 5px; border-radius: 3px; background: #ffffff14; overflow: hidden; display: flex; } .d-bar i { background: var(--accent); } .d-bar i.away { background: var(--info); } .d-markets { padding: 8px 14px 36px; } .market { margin-bottom: 10px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .market-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--head); font-weight: 700; font-size: 13px; } .bb { background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 10px; letter-spacing: .5px; padding: 2px 6px; border-radius: 3px; } .market-row { display: grid; grid-template-columns: repeat(3, 1fr); } .market-row.two { grid-template-columns: repeat(2, 1fr); } .sel { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); cursor: pointer; min-width: 0; } .market-row .sel:nth-child(3n+1) { border-left: none; } .market-row.two .sel:nth-child(2n+1) { border-left: none; } .sel:hover { background: var(--panel3); } .sel-n { color: var(--muted-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sel-o { color: var(--odd); font-weight: 700; flex: none; } /* filler cell for wrapped markets — keeps the grid borders, no content/hover */ .sel-pad { cursor: default; } .sel-pad:hover { background: transparent; } /* lined market: same market, one row per handicap/total line */ .ml-head, .ml-row { display: grid; grid-template-columns: 120px repeat(var(--cols), 1fr); } .ml-head { padding: 7px 0; color: var(--muted); font-size: 11px; font-weight: 600; text-align: center; border-top: 1px solid var(--line); } .ml-row { border-top: 1px solid var(--line); } .ml-line { display: flex; align-items: center; padding-left: 14px; color: var(--muted-light); font-weight: 700; font-variant-numeric: tabular-nums; } .mcell { display: flex; align-items: center; justify-content: center; padding: 12px 6px; border-left: 1px solid var(--line); color: var(--odd); font-weight: 700; cursor: pointer; } .mcell:hover { background: var(--panel3); } .mcell.empty { color: var(--muted); cursor: default; } .mcell .mc-ln { color: var(--muted-light); font-weight: 600; margin-right: 7px; } /* ── Full game-details view ────────────────────────────────── */ .game { display: flex; flex-direction: column; height: 100%; } .game-body { display: grid; grid-template-columns: 1fr 400px; flex: 1; min-height: 0; } .game-main { overflow-y: auto; min-width: 0; } /* min-width: the chip bar must scroll inside, never widen the grid */ .game-side { background: var(--panel2); border-left: 1px solid var(--line); overflow-y: auto; } .game-top { display: flex; align-items: center; justify-content: center; position: relative; padding: 12px 16px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 2; } .back { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; flex: none; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; } .back:hover { background: var(--panel3); } .game-title { font-weight: 700; font-size: 16px; text-align: center; } .game-title .gc { color: var(--muted); font-size: 11px; font-weight: 600; margin-bottom: 3px; } .game-main .d-markets { padding: 12px 16px 50px; } /* ── Market category tabs (bet365-style chips on the event pages) ──────────── One row of chips fed by the market-categories dictionary; the BAR pans horizontally inside itself on narrow screens, so the page never gains page-level overflow. Active chip = the --accent family (theme-safe). */ .cat-tabs { display: flex; gap: 7px; align-items: center; flex: none; padding: 10px 14px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .cat-tabs::-webkit-scrollbar { display: none; } .cat-tab { flex: none; padding: 6px 13px; border-radius: 15px; cursor: pointer; user-select: none; border: 1px solid var(--line); background: var(--panel); color: var(--muted-light); font-weight: 600; font-size: 12px; white-space: nowrap; } .cat-tab:hover { color: var(--text); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); } .cat-tab.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; } /* ── Top-level view tabs: Live | Prelive | My Tickets ──────── */ .viewtabs { flex: none; display: flex; gap: 4px; padding: 0 12px; background: var(--panel2); border-bottom: 1px solid var(--line); } .viewtab { display: flex; align-items: center; gap: 7px; padding: 9px 14px 8px; cursor: pointer; user-select: none; color: var(--muted); font-weight: 600; border-bottom: 3px solid transparent; } .viewtab:hover { color: var(--text); } .viewtab.active { color: var(--text); border-bottom-color: var(--accent); } .viewtab .vt-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } .viewtab .vt-badge { min-width: 17px; height: 17px; padding: 0 5px; border-radius: 9px; background: var(--odd); color: var(--on-accent); font-size: 10px; font-weight: 800; display: none; align-items: center; justify-content: center; } .viewtab .vt-badge.on { display: flex; } /* ── Prelive: upcoming events list ─────────────────────────── */ .pre-day { padding: 12px 12px 2px; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; } .pre-list { overflow-y: auto; padding: 0 12px 40px; height: 100%; } .pre-group { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; } /* prelive detail has no live tracker/stats column — markets take the full width */ .game-body.pre { grid-template-columns: 1fr; } /* waiting on a lazily-hydrated event body: skeleton markets + spinner, then Retry */ .pre-wait { padding: 12px 16px 40px; } .pre-wait .msg { display: flex; align-items: center; gap: 9px; padding: 4px 2px 12px; color: var(--muted); } .pre-wait .loading { padding: 20px 2px 14px; } .spinner { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .skel { display: inline-block; height: 12px; width: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--panel) 25%, var(--line-soft) 37%, var(--panel) 63%); background-size: 400% 100%; animation: skel 1.4s ease infinite; } @keyframes skel { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .skel-market { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; } .skel-market .h { display: flex; align-items: center; height: 39px; padding: 0 14px; background: var(--head); } .skel-row { display: grid; grid-template-columns: repeat(3, 1fr); } .skel-row .c { padding: 14px; border-left: 1px solid var(--line); } .skel-row .c:first-child { border-left: none; } .retry { padding: 9px 18px; border-radius: 6px; cursor: pointer; font: inherit; font-weight: 700; border: 1px solid var(--line); background: var(--panel); color: var(--text); } .retry:hover { background: var(--panel3); } .event.pre { align-items: stretch; } .pre-when { width: 62px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border-right: 1px solid var(--line); margin-right: 4px; } .pre-when .t { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .pre-when .d { color: var(--muted); font-size: 10px; } .pre-lg { margin-top: 7px; color: var(--muted); font-size: 11px; display: flex; gap: 6px; align-items: center; } .pre-lg .co { color: color-mix(in srgb, var(--accent) 25%, var(--muted-light)); } /* compact 1x2 strip on flat-list rows, painted straight from the header's `ho` (absent ho → no strip; the row's height is set by .ev-main either way) */ .pre-ho { align-self: center; grid-template-columns: repeat(var(--n, 3), 48px); } .pre-ho .odd { height: 38px; } /* ── Prelive: competitions nav (bet365 model) ────────────────── Popular section + one collapsible row per country. Rows are plain flex so the same markup works on a phone (390px) and on a wide desktop column. */ .pre-wrap { height: 100%; overflow-y: auto; display: flex; flex-direction: column; } .crumbs { display: flex; align-items: center; gap: 10px; flex: none; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--panel2); } .crumb, .crumb-alt { color: var(--muted); text-decoration: none; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .crumb:hover, .crumb-alt:hover { color: var(--text); } .crumb .chev { color: var(--accent); font-size: 15px; line-height: 1; } .crumb-here { color: var(--text); font-weight: 700; } .crumb-alt { margin-left: auto; color: var(--accent); } .crumb-alt .chev { font-size: 15px; line-height: 1; } .nav-list { padding: 0 0 40px; } .nav-sec { border-bottom: 1px solid var(--line); } .nav-h { display: flex; align-items: center; gap: 10px; padding: 13px 14px; cursor: pointer; user-select: none; font-weight: 700; font-size: 14px; color: var(--text); } .nav-h:hover { background: var(--panel2); } .nav-h:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; } .nav-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-n { color: var(--muted); font-size: 11px; font-weight: 700; } .nav-h .nav-ico { width: 20px; height: 20px; flex: none; color: var(--accent); } .nav-h .flag { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--panel3); border: 1px solid var(--line); color: var(--muted-light); font-size: 9px; font-weight: 800; letter-spacing: .3px; } /* chevron: points down when closed, up when open */ .nav-h .chev { width: 9px; height: 9px; flex: none; margin-left: 2px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; } .nav-sec.open .nav-h .chev { transform: rotate(-135deg) translate(-2px, -2px); } .nav-body { display: none; padding-bottom: 6px; } .nav-sec.open .nav-body { display: block; } .nav-lg { display: flex; align-items: center; gap: 10px; padding: 11px 14px 11px 46px; color: var(--text); text-decoration: none; cursor: pointer; border-top: 1px solid var(--line-soft); } .nav-lg:hover { background: var(--panel2); } .nav-lg .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-lg .cnt { flex: none; display: inline-flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 3px; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; } .nav-lg .cnt i { font-style: normal; opacity: .8; } .nav-sec .nav-h .skel { height: 14px; } /* ── Prelive: league page ────────────────────────────────────── Day header rows carry the market tab's column labels (1 X 2), and every match row puts the same-width odds cells underneath them so the columns line up. */ .league { display: flex; flex-direction: column; height: 100%; overflow-y: auto; } .league .crumbs { position: sticky; top: 0; z-index: 3; } .league .game-top { position: relative; } /* the crumbs stick, not the title — but the back button anchors here */ .league .mkt-tabs { position: sticky; top: 0; z-index: 2; overflow-x: auto; } .lg-list { height: auto; overflow: visible; padding: 10px 12px 40px; } .lg-group { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin-bottom: 12px; } .lg-day { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(90deg, var(--day1), var(--day2)); color: #eaf4ee; font-weight: 700; font-size: 12px; } .lg-day-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lg-cols { display: grid; grid-template-columns: repeat(var(--n, 3), 54px); gap: 5px; } .lg-cols .cl { width: auto; text-align: center; } .lg-row { align-items: center; } .lg-row .ev-teams { gap: 5px; } .lg-row .team .nm-wrap { width: auto; flex: 1; } .lg-row .team .nm { font-weight: 600; } .lg-when { margin-top: 7px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; } .lg-when .t { color: var(--muted-light); font-weight: 700; font-variant-numeric: tabular-nums; } .lg-odds { display: grid; grid-template-columns: repeat(var(--n, 3), 54px); gap: 5px; } .lg-odds .odd { width: auto; } .lg-odds .odd .ol:empty { display: none; } .lg-odds .odd.empty { background: transparent; border-style: dashed; cursor: default; } .ev-odds .odd.picked, .sel.picked, .mcell.picked { background: var(--accent); border-color: var(--accent); } .ev-odds .odd.picked, .ev-odds .odd.picked .ol, .sel.picked .sel-n, .sel.picked .sel-o, .mcell.picked, .mcell.picked .ov, .mcell.picked .mc-ln, .odd.picked .ov { color: var(--on-accent) !important; } /* ── Betslip drawer ────────────────────────────────────────── */ .slip { position: fixed; right: 18px; bottom: 18px; width: 340px; z-index: 40; font-size: 13px; } .slip-fab { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-radius: 24px; cursor: pointer; width: max-content; background: var(--accent); color: var(--on-accent); font-weight: 800; box-shadow: 0 6px 18px #0006; border: none; } .slip-fab .n { background: var(--on-accent); color: var(--odd); border-radius: 10px; padding: 1px 7px; font-size: 11px; } .slip-panel { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px #0007; overflow: hidden; display: flex; flex-direction: column; max-height: min(70vh, 560px); } .slip-h { display: flex; align-items: center; gap: 8px; padding: 11px 14px; background: var(--head); font-weight: 700; border-bottom: 1px solid var(--line); } .slip-h .n { color: var(--muted); font-weight: 600; } .slip-h .x { margin-left: auto; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; } .slip-h .x:hover { color: var(--text); } .slip-note { padding: 8px 14px; background: color-mix(in srgb, var(--accent) 8%, var(--panel2)); color: color-mix(in srgb, var(--accent) 25%, var(--muted-light)); font-size: 11px; border-bottom: 1px solid var(--line); } .slip-body { overflow-y: auto; flex: 1; min-height: 0; } .slip-empty { padding: 26px 14px; color: var(--muted); text-align: center; } .slip-item { padding: 10px 14px; border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; } .slip-item .si-main { min-width: 0; } .slip-item .si-ev { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slip-item .si-comp { color: color-mix(in srgb, var(--accent) 25%, var(--muted-light)); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .slip-item .si-mk { color: var(--muted); font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .si-src { display: inline-block; margin-right: 6px; padding: 1px 5px; border-radius: 3px; font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; background: color-mix(in srgb, var(--line) 55%, var(--panel)); color: var(--muted-light); } .si-src.live { background: color-mix(in srgb, var(--accent) 18%, var(--bg-deep)); color: var(--accent); } .slip-item .si-odd { color: var(--odd); font-weight: 800; font-variant-numeric: tabular-nums; } .slip-item .si-x { color: var(--muted); cursor: pointer; padding: 0 2px; } .slip-item .si-x:hover { color: var(--down); } .slip-foot { padding: 12px 14px; border-top: 1px solid var(--line); background: var(--panel2); flex: none; } .slip-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; color: var(--muted); } .slip-row b { color: var(--text); font-variant-numeric: tabular-nums; } .slip-row .win { color: var(--odd); } .slip-stake { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .slip-stake label { color: var(--muted); flex: none; } .slip-stake input { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 5px; border: 1px solid var(--line); background: var(--bg-deep); color: var(--text); font: inherit; font-weight: 700; font-variant-numeric: tabular-nums; } .slip-stake input:focus { outline: none; border-color: var(--accent); } .slip-place { width: 100%; padding: 11px; border: none; border-radius: 6px; cursor: pointer; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 800; } .slip-place:hover { filter: brightness(1.08); } .slip-place:disabled { background: color-mix(in srgb, var(--line) 55%, var(--panel)); color: var(--muted); cursor: not-allowed; filter: none; } .slip-err { color: var(--down); font-size: 11px; margin-top: 8px; min-height: 0; } /* ── Toasts ────────────────────────────────────────────────── */ .toasts { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; } .toast { padding: 10px 16px; border-radius: 20px; font-weight: 700; font-size: 12px; background: var(--accent); color: var(--on-accent); box-shadow: 0 6px 18px #0007; animation: toastIn .2s ease-out; } .toast.err { background: var(--down); color: #fff; } @keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* ── My Tickets ────────────────────────────────────────────── */ .tickets { overflow-y: auto; height: 100%; padding: 14px 12px 40px; } .tk-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .tk-head h2 { margin: 0; font-size: 16px; } .tk-head .sub { color: var(--muted); font-size: 11px; } .ticket { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; background: var(--panel); overflow: hidden; max-width: 760px; } .tk-h { display: flex; align-items: center; gap: 10px; padding: 9px 14px; background: var(--head); border-bottom: 1px solid var(--line); } .tk-h .when { color: var(--muted); font-size: 11px; } .tk-h .id { color: var(--muted); font-size: 11px; margin-left: auto; font-variant-numeric: tabular-nums; } .badge { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; background: color-mix(in srgb, var(--line) 55%, var(--panel)); color: var(--muted-light); } .badge.open { background: color-mix(in srgb, var(--accent) 18%, var(--bg-deep)); color: var(--accent); } .badge.won { background: var(--accent); color: var(--on-accent); } .badge.lost { background: color-mix(in srgb, var(--danger) 22%, var(--bg-deep)); color: var(--down); } /* Settlement states from the real MTS (backend src/mts.js). VOID reads as a neutral "no result"; PAYABLE is a quiet outline chip beside a WON ticket — it reports the payout side, so it must not compete with the verdict itself. */ .badge.void { background: color-mix(in srgb, var(--line) 70%, var(--panel)); color: var(--muted-light); } .badge.payable { background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); padding: 1px 7px; } /* A ticket MTS does not sell (market outside its dictionary): a quiet note, not a badge — there is no settlement state to report, and never will be. */ /* ── Acceptance (did the settlement system take this ticket?) ────────────── A chip, not a badge: it reports a DIFFERENT axis from won/lost, so it must read as secondary to the verdict beside it. "rejected" is the one demo status outside the win/lose vocabulary — the bet never existed and the money is back. */ .tk-acc { display: inline-flex; align-items: center; gap: 5px; padding: 1px 7px; border-radius: 10px; font-size: 10px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; cursor: help; } .tk-acc.ok { color: var(--muted-light); background: color-mix(in srgb, var(--line) 55%, var(--panel)); } .tk-acc.wait { color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--bg-deep)); } .tk-acc.no { color: var(--on-accent); background: var(--danger); } /* the pending chip breathes, so "waiting" reads as motion rather than a state */ .tk-acc.wait i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: tkPulse 1.1s ease-in-out infinite; } @keyframes tkPulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } } .badge.rejected { background: color-mix(in srgb, var(--danger) 22%, var(--bg-deep)); color: var(--down); } /* the money line on a refunded ticket */ .tk-refund { padding: 8px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--danger) 8%, transparent); color: var(--down); font-size: 12px; font-weight: 600; } /* A placement is a two-stage answer: stored+debited first, accepted/rejected a few seconds later. The pending toast holds its place until the verdict lands. */ .toast.pending { display: flex; align-items: center; gap: 8px; } .toast.pending .tspin { width: 11px; height: 11px; flex: none; border-radius: 50%; border: 2px solid color-mix(in srgb, currentColor 25%, transparent); border-top-color: currentColor; animation: tkSpin .7s linear infinite; } @keyframes tkSpin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .tk-acc.wait i, .toast.pending .tspin { animation: none; } } .tk-uncovered { color: var(--muted); font-size: 10px; font-style: italic; cursor: help; } /* Per-selection verdict, in front of the price. */ .tk-sel .od .tk-r { font-style: normal; font-weight: 800; margin-right: 6px; } .tk-sel .od .tk-r.won { color: var(--accent); } .tk-sel .od .tk-r.lost { color: var(--down); } .tk-sel .od .tk-r.void { color: var(--muted); } .tk-sel { display: grid; grid-template-columns: 1fr auto; gap: 10px; padding: 9px 14px; border-bottom: 1px solid var(--line); align-items: center; } .tk-sel .ev { font-weight: 700; } .tk-sel .cmp { color: color-mix(in srgb, var(--accent) 25%, var(--muted-light)); font-size: 11px; margin-top: 2px; } .tk-sel .mk { color: var(--muted); font-size: 11px; margin-top: 2px; } .tk-sel .od { color: var(--odd); font-weight: 800; font-variant-numeric: tabular-nums; } .tk-f { display: flex; gap: 22px; padding: 10px 14px; background: var(--panel2); flex-wrap: wrap; } .tk-f div { color: var(--muted); font-size: 11px; } .tk-f b { display: block; color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; margin-top: 2px; } .tk-f .win b { color: var(--odd); } /* ══ HOME — hero carousel + per-sport featured sliders ═══════════════════════ The hero clones the demo-casino .casino-hero pattern (track / slide / arrow / dots, transform-driven) so the two products read as one system. All slide art is pure CSS gradient + an existing sport SVG — no external images, which keeps the iframe embed same-origin and CSP-friendly. */ .home { height: 100%; overflow-y: auto; padding: 14px 16px 48px; } .sb-hero { position: relative; height: clamp(190px, 19vw, 224px); overflow: hidden; border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line)); border-radius: var(--radius-lg); background: var(--bar2); box-shadow: 0 12px 34px color-mix(in srgb, var(--bg-deep) 68%, transparent); touch-action: pan-y; } .sb-hero:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .sb-hero-skel { height: clamp(190px, 19vw, 224px); border-radius: var(--radius-lg); } .hero-track { display: flex; width: 100%; height: 100%; transition: transform .45s cubic-bezier(.22,.7,.25,1); will-change: transform; } .hero-slide { position: relative; flex: 0 0 100%; width: 100%; height: 100%; overflow: hidden; } /* gradient art per slide (--sb-art-* mirrors the casino's hero-slide-N palettes) */ .sb-art-live { background: radial-gradient(100% 140% at 75% 40%, color-mix(in srgb, var(--accent) 48%, var(--bar1)) 0, var(--bar1) 46%, color-mix(in srgb, var(--bar2) 74%, #000) 100%); } .sb-art-soon { background: radial-gradient(110% 150% at 76% 40%, #3b4479 0, #232a51 45%, #0c1023 100%); } .sb-art-builder { background: radial-gradient(110% 150% at 76% 40%, #71423a 0, #40251f 45%, #16100d 100%); } .hero-art { position: absolute; inset: 0; overflow: hidden; } .hero-art::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--bar2) 72%, #000) 0%, color-mix(in srgb, var(--bar2) 55%, transparent) 38%, transparent 68%); } .hero-art::after { content: ""; position: absolute; width: 420px; height: 420px; right: -90px; top: -140px; border-radius: 50%; border: 70px solid color-mix(in srgb, var(--odd) 7%, transparent); box-shadow: 0 0 0 45px color-mix(in srgb, var(--accent) 5%, transparent), inset 0 0 90px color-mix(in srgb, var(--odd) 11%, transparent); transform: rotate(-15deg); } .hero-deco { position: absolute; right: 46px; top: 50%; width: 150px; height: 150px; transform: translateY(-50%) rotate(-8deg); opacity: .3; filter: saturate(.6); } .hero-copy { position: relative; z-index: 2; width: min(570px, 68%); height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 22px clamp(24px, 5vw, 56px); } .hero-eyebrow { color: var(--odd); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 6px; } .hero-copy h1 { margin: 0 0 6px; color: var(--on-hero); font-size: clamp(26px, 3.4vw, 42px); line-height: 1; letter-spacing: -1.2px; text-shadow: 0 3px 12px #000; } .hero-copy p { max-width: 450px; margin: 0 0 14px; color: var(--on-hero-muted); font-size: clamp(12px, 1.3vw, 14px); } .hero-actions { display: flex; align-items: center; gap: 9px; } .hero-cta { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--radius); background: var(--odd); color: var(--on-action); font-weight: 800; text-decoration: none; cursor: pointer; border: 1px solid var(--odd); } .hero-cta:hover { background: var(--odd-soft); border-color: var(--odd-soft); } .hero-cta.ghost { background: transparent; border-color: #ffffff3b; color: var(--on-hero-muted); cursor: default; font-weight: 700; } .hero-arrow { position: absolute; top: 50%; z-index: 4; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; transform: translateY(-50%); border: 1px solid #ffffff3b; border-radius: 50%; background: color-mix(in srgb, var(--bar2) 78%, transparent); color: #fff; box-shadow: 0 5px 15px #0006; font-size: 26px; line-height: 1; cursor: pointer; } .hero-arrow:hover { border-color: #ffffff7a; background: color-mix(in srgb, var(--panel3) 86%, transparent); } .hero-arrow-previous { left: 12px; } .hero-arrow-next { right: 12px; } .hero-dots { position: absolute; left: 50%; bottom: 2px; z-index: 4; display: flex; align-items: center; transform: translateX(-50%); } .hero-dots button { position: relative; width: 34px; height: 34px; padding: 0; border: 0; background: transparent; cursor: pointer; } .hero-dots button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; border-radius: 4px; background: #ffffff61; transform: translate(-50%, -50%); transition: width .2s, background .2s; } .hero-dots button[aria-current="true"]::before { width: 22px; background: var(--odd); } @media (prefers-reduced-motion: reduce) { .hero-track { transition: none; } } /* ── Featured sliders ──────────────────────────────────────── */ .sb-rows { margin-top: 22px; } .sb-row { margin-bottom: 26px; } .sb-row-h { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; } .sb-row-ico { width: 24px; height: 24px; flex: none; } .sb-row-h h2 { margin: 0; font-size: 17px; letter-spacing: -.2px; } .sb-row-sub { color: var(--muted); font-size: 11px; display: flex; align-items: center; gap: 5px; } .sb-row-sub .dot.live { width: 6px; height: 6px; } .sb-row-nav { margin-left: auto; display: flex; gap: 5px; } .sb-row-nav.hidden { visibility: hidden; } .sb-arrow { width: 30px; height: 30px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: var(--panel); color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; } .sb-arrow:hover:not(:disabled) { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--panel3); } .sb-arrow:disabled { opacity: .28; cursor: default; } .sb-cards { display: grid; grid-auto-flow: column; grid-auto-columns: 250px; gap: 10px; overflow-x: auto; padding: 1px 1px 8px; scroll-snap-type: x proximity; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } @media (prefers-reduced-motion: reduce) { .sb-cards { scroll-behavior: auto; } } .sb-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 9px; min-width: 0; padding: 10px 11px 11px; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 4px 14px color-mix(in srgb, var(--bg-deep) 48%, transparent); transition: transform .15s, border-color .15s, box-shadow .15s; } .sb-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); } .sb-card-h { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted); font-size: 11px; } .sb-card-h .sb-comp { margin-left: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* league crest inside the card header's comp label — smaller than the nav's, inline so the nowrap ellipsis still clips the TEXT, never the icon */ .sb-card-h .lg-ico { width: 14px; height: 14px; margin-right: 4px; vertical-align: -3px; } .sb-badge { flex: none; padding: 2px 6px; border-radius: 3px; font-size: 9px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; background: var(--panel3); color: var(--muted-light); } .sb-badge.live { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent); } .sb-when { flex: none; color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .sb-card.is-live .sb-when { color: var(--accent); } .sb-card-teams { display: flex; flex-direction: column; gap: 5px; } .sb-team { display: flex; align-items: center; gap: 8px; min-width: 0; } .sb-team .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .sb-team .sc { flex: none; min-width: 20px; padding: 1px 4px; text-align: center; border-radius: 3px; background: var(--panel3); color: var(--text); font-variant-numeric: tabular-nums; } .sb-card-odds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: auto; } .sb-card-odds .odd { width: auto; height: 36px; } .sb-card-odds.empty { display: flex; align-items: center; justify-content: center; height: 36px; border: 1px dashed var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; } /* loading state — same card silhouette so the row doesn't jump when data lands */ .sb-card-skel { gap: 11px; cursor: default; pointer-events: none; } .sb-card-skel .skel { height: 11px; } .sb-card-skel .skel.wide { height: 36px; margin-top: auto; } /* ── Mobile (≤ 820px) ──────────────────────────────────────── */ @media (max-width: 820px) { .topnav { display: none; } .conn { font-size: 11px; } .brand { font-size: 19px; } .topbar { height: 48px; padding: 0 12px; gap: 12px; } .view { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 60px; } /* list: single column, no preview panel — fit, no horizontal swipe */ .layout { grid-template-columns: 1fr; height: auto; min-height: 100%; } .list-wrap { height: auto; } .list-wrap .layout { flex: none; min-height: 0; } .mkt-tabs { position: sticky; top: 0; z-index: 5; gap: 14px; overflow-x: auto; } .layout .detail { display: none; } .events { height: auto; overflow-y: visible; overflow-x: hidden; padding: 6px; } .event { gap: 8px; padding: 10px 8px; } .comp-h { padding: 7px 8px; } .team .nm-wrap { width: auto; flex: 1; } .team .ts { gap: 4px; } .team .ts b { min-width: 18px; padding: 1px 3px; } .ev-odds { gap: 4px; } .ev-odds .odd { width: 46px; min-width: 0; height: 40px; } .comp-cols { gap: 4px; } .cl-group { gap: 4px; } .cl-group .cl { width: 46px; } /* game details: header on top, then tracker/stats, then markets */ .game { height: auto; min-height: 100%; } .game-body { display: flex; flex-direction: column; flex: none; } .game-main, .game-side { overflow: visible; height: auto; } .game-side { order: -1; border-left: none; border-bottom: 1px solid var(--line); } .d-tracker { margin: 12px; height: 150px; } .trk { margin: 10px 12px; } .game-main .d-markets { padding: 10px 12px 40px; } .cat-tabs { padding: 9px 8px; gap: 6px; } /* simple market cells stack (label over odds, centered) */ .market-row .sel { flex-direction: column; align-items: center; text-align: center; gap: 5px; padding: 12px 6px; } .market-row .sel .sel-n { white-space: normal; } /* view tabs stay one row, tighter */ .viewtabs { overflow-x: auto; padding: 0 6px; } .viewtab { padding: 9px 10px 8px; font-size: 12px; } /* prelive list */ .pre-list { height: auto; overflow-y: visible; padding: 0 6px 10px; } .pre-when { width: 50px; } .pre-ho { grid-template-columns: repeat(var(--n, 3), 38px); gap: 4px; } .pre-ho .odd { height: 38px; padding: 2px; } .pre-day { padding: 10px 8px 2px; } /* competitions nav + league page: the view itself scrolls, so these don't */ .pre-wrap, .league { height: auto; overflow: visible; } .crumbs { padding: 9px 10px; } .nav-h { padding: 12px 10px; } .nav-lg { padding: 11px 10px 11px 42px; } .lg-list { padding: 6px 6px 10px; } .lg-day { padding: 7px 8px; } .lg-cols, .lg-odds { grid-template-columns: repeat(var(--n, 3), 46px); gap: 4px; } .lg-row { padding: 10px 8px; gap: 8px; } .lg-odds .odd { height: 40px; } /* betslip becomes a bottom sheet above the bottom nav */ .slip { left: 0; right: 0; bottom: env(safe-area-inset-bottom, 0); width: auto; padding: 0 8px 8px; } .slip-panel { max-height: 72vh; border-radius: 10px 10px 0 0; } .slip-fab { margin: 0 0 0 auto; } .tickets { height: auto; padding: 10px 8px 20px; } .ticket { max-width: none; } /* home: hero shrinks, sliders keep native touch scrolling (arrows hidden); the ≤620px block below drops the hero arrows too — swipe + dots take over */ .home { height: auto; overflow-y: visible; padding: 10px 10px 20px; } .sb-hero, .sb-hero-skel { height: 210px; border-radius: 10px; } .hero-copy { width: 100%; padding: 18px 16px 26px; } .hero-copy h1 { font-size: 26px; } .hero-copy p { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .hero-deco { right: -18px; width: 120px; height: 120px; opacity: .22; } .hero-arrow { width: 34px; height: 34px; font-size: 21px; } .hero-arrow-previous { left: 6px; } .hero-arrow-next { right: 6px; } .hero-copy { width: calc(100% - 84px); } .sb-rows { margin-top: 16px; } .sb-row-nav { display: none; } .sb-cards { grid-auto-columns: 78vw; gap: 8px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .sb-row-h h2 { font-size: 15px; } } /* ── Phones (≤ 620px) ──────────────────────────────────────── */ @media (max-width: 620px) { /* the hero is swipeable and has dots — arrows would sit on top of the copy */ .hero-arrow { display: none; } .hero-copy { width: 100%; padding: 18px 16px 30px; } .hero-copy h1 { font-size: 23px; } .hero-cta { width: 100%; justify-content: center; } } /* ── Logos: team crests + country badges (logo dictionary) ───── Crests are rendered ONLY for ids the backend reports a logo for, and an that 404s removes itself — so an absent/failed logo leaves NO element and NO gap, and the odds columns never shift. */ /* Crests sit on a light disc so dark/black club logos stay visible on the dark theme (bet365 does the same). box-sizing keeps the visual size at 16px. */ .crest { width: 20px; height: 20px; flex: none; object-fit: contain; box-sizing: border-box; padding: 0; border-radius: 50%; background: #f4f6f8; box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent); } .game-title .crest { vertical-align: -5px; margin-right: 5px; } .lg-ico { box-sizing: border-box; padding: 0; border-radius: 50%; background: #f4f6f8; box-shadow: 0 0 0 1px color-mix(in srgb, var(--line) 70%, transparent); } /* country badge covers the two-letter chip; if it fails, the letters resurface */ .nav-h .flag { position: relative; overflow: hidden; } .nav-h .flag-svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: var(--panel3); } .nav-h .flag-svg.round { background: transparent; } /* circle-flags are already round with transparent corners */ .lg-ico { width: 20px; height: 20px; flex: none; object-fit: contain; margin-right: 8px; vertical-align: -4px; } .lg-ico.big { width: 22px; height: 22px; margin-right: 6px; } .nav-lg .lg-ico { margin-right: 0; } /* ══ BET BUILDER (roadmap §3.3, slices 2–4) ═══════════════════ Mode toggle pill in the chip row, per-cell leg/blocked states on the odds grids, and the legs panel — a sticky bottom sheet on phones, a fixed right panel from 1024px up. Only theme tokens: every palette/mode stays coherent. */ /* chip bar + pill share one row; the chips pan inside themselves, the pill keeps its place on the right (mobile and desktop alike) */ .cat-row { display: flex; align-items: center; gap: 8px; padding-right: 10px; border-bottom: 1px solid var(--line); } .cat-row .cat-tabs { flex: 1; min-width: 0; border-bottom: none; } .bb-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 15px; cursor: pointer; border: 1px solid var(--action-border); background: transparent; color: var(--odd); font: inherit; font-size: 12px; font-weight: 800; white-space: nowrap; } .bb-pill svg { width: 13px; height: 13px; } .bb-pill:hover { background: color-mix(in srgb, var(--odd) 12%, transparent); } .bb-pill.on { background: var(--odd); border-color: var(--odd); color: var(--on-action); } .bb-pill .bb-cnt { background: var(--on-action); color: var(--odd); border-radius: 9px; padding: 0 6px; font-size: 10px; } /* builder mode: markets whose category can't join a builder dim with a hint */ .bb-na-hint { display: none; color: var(--muted); font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: .4px; margin-right: 8px; } .market.bb-na { opacity: .45; } .market.bb-na .market-r .bb { display: none; } .market.bb-na .bb-na-hint { display: inline; } .market.bb-na .sel, .market.bb-na .mcell { cursor: default; } /* a pick that IS a leg — the gold action family, distinct from the green betslip .picked, so the two selection kinds never read as one */ .sel.bb-on-cell, .mcell.bb-on-cell, .odd.bb-on-cell { background: var(--odd) !important; border-color: var(--odd); } .sel.bb-on-cell .sel-n, .sel.bb-on-cell .sel-o, .mcell.bb-on-cell, .mcell.bb-on-cell .ov, .mcell.bb-on-cell .mc-ln, .odd.bb-on-cell .ov, .odd.bb-on-cell .ol { color: var(--on-action) !important; } /* proactively blocked: this pick conflicts with a current leg (bet365 parity); the title attribute carries the reason, taps toast it */ .bb-blocked { opacity: .32; cursor: not-allowed !important; } .sel.bb-blocked:hover, .mcell.bb-blocked:hover { background: transparent; } .odd.bb-blocked:hover { background: var(--odd-bg); } /* ── Dynamic Odds (feed constraints) ── implied: guaranteed by the current legs — subtly outlined, STILL addable; open: a tiny badge shows the would-be combined price right on the cell */ .sel, .mcell { position: relative; } .bb-implied { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--odd) 55%, transparent); } .sel.bb-implied .sel-o, .mcell.bb-implied .ov { opacity: .75; } .bb-wodd { position: absolute; top: 2px; right: 3px; pointer-events: none; font-size: 9px; font-weight: 800; line-height: 1; padding: 2px 4px; border-radius: 3px; color: color-mix(in srgb, var(--odd) 70%, var(--text)); background: color-mix(in srgb, var(--odd) 14%, transparent); font-variant-numeric: tabular-nums; } /* "Dynamic" hint next to the combined price when the FEED priced it */ .bb-model { margin-left: 7px; padding: 2px 6px; border-radius: 8px; vertical-align: 1px; font-size: 9px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; color: var(--odd); background: color-mix(in srgb, var(--odd) 16%, transparent); cursor: help; } /* ── The legs panel — mobile-first: sticky bottom sheet ── */ .bbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 0 8px calc(8px + env(safe-area-inset-bottom, 0px)); pointer-events: none; } .bbar:empty { display: none; } .bb-panel { pointer-events: auto; display: flex; flex-direction: column; overflow: hidden; max-height: 58vh; border-radius: 12px 12px 0 0; background: var(--panel); border: 1px solid var(--action-border); border-bottom: none; box-shadow: 0 -8px 30px #0008; } .bb-h { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--head); border-bottom: 1px solid var(--line); font-weight: 800; } .bb-tag { background: var(--odd); color: var(--on-action); font-weight: 800; font-size: 10px; letter-spacing: .5px; padding: 2px 6px; border-radius: 3px; } .bb-h .bb-n { color: var(--muted); font-weight: 600; font-size: 12px; } .bb-h .bb-x { margin-left: auto; cursor: pointer; color: var(--muted); font-size: 16px; line-height: 1; } .bb-h .bb-x:hover { color: var(--text); } .bb-stale { display: flex; align-items: center; gap: 8px; padding: 7px 14px; background: color-mix(in srgb, var(--odd) 14%, var(--panel2)); color: color-mix(in srgb, var(--odd) 55%, var(--text)); font-size: 12px; font-weight: 700; border-bottom: 1px solid var(--line); } .bb-legs { overflow-y: auto; flex: 1; min-height: 0; } .bb-empty { padding: 18px 14px; color: var(--muted); font-size: 12px; } .bb-leg-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line-soft); cursor: pointer; } .bb-leg-row:hover { background: var(--panel3); } .bb-leg-row .bl-mk { color: var(--muted); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bb-leg-row .bl-pk { font-weight: 700; } .bb-leg-row .bl-odd { color: var(--odd); font-weight: 800; font-variant-numeric: tabular-nums; } .bb-leg-row .bl-x { color: var(--muted); padding: 0 2px; } .bb-leg-row:hover .bl-x { color: var(--down); } .bb-leg-row.dead .bl-mk, .bb-leg-row.dead .bl-pk { text-decoration: line-through; color: var(--muted); } .bb-leg-row.dead .bl-dead { font-style: normal; color: var(--down); font-size: 10px; font-weight: 700; text-decoration: none; display: inline-block; margin-left: 4px; } .bb-leg-row.clash { box-shadow: inset 3px 0 0 var(--down); background: color-mix(in srgb, var(--danger) 10%, var(--panel)); } .bb-foot { padding: 10px 14px 12px; border-top: 1px solid var(--line); background: var(--panel2); flex: none; } .bb-price-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; color: var(--muted); font-weight: 600; } .bb-price { color: var(--odd); font-size: 17px; font-variant-numeric: tabular-nums; } .bb-skel { width: 58px; height: 17px; } .bb-need { color: var(--muted); font-size: 11px; margin-bottom: 8px; } .bb-err { color: var(--down); font-size: 11px; font-weight: 600; margin-bottom: 8px; } .bb-add { width: 100%; padding: 11px; border: none; border-radius: 6px; cursor: pointer; background: var(--odd); color: var(--on-action); font: inherit; font-weight: 800; } .bb-add:hover:not(:disabled) { background: var(--odd-soft); } .bb-add:disabled { background: color-mix(in srgb, var(--line) 55%, var(--panel)); color: var(--muted); cursor: not-allowed; } /* builder mode: the slip yields (its content returns on "Add to betslip"), and the scrolling content keeps clear of the bottom sheet */ body.bb-on .slip { display: none; } @media (max-width: 1023px) { body.bb-on .view { padding-bottom: 320px; } body.bb-on .game-main .d-markets, body.bb-on .game-body.pre .d-markets { padding-bottom: 340px; } } @media (min-width: 1024px) { .bbar { left: auto; right: 18px; bottom: 18px; width: 340px; padding: 0; } .bb-panel { border-radius: 10px; border-bottom: 1px solid var(--action-border); max-height: min(72vh, 640px); box-shadow: 0 10px 30px #0007; } } /* builder items on the betslip + My Tickets: legs stacked under ONE price */ .si-src.bb { background: color-mix(in srgb, var(--odd) 22%, var(--bg-deep)); color: var(--odd); } .si-legs, .tk-legs { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; } .si-leg, .tk-leg { display: flex; align-items: baseline; gap: 6px; font-size: 11px; color: var(--muted); min-width: 0; } .si-leg i, .tk-leg i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--odd); align-self: center; } .si-leg .lg-m, .tk-leg .lg-m { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .si-leg b, .tk-leg b { color: var(--text); flex: none; } .tk-leg .lg-o { margin-left: auto; flex: none; color: var(--muted-light); font-variant-numeric: tabular-nums; } .slip-item.builder .si-odd, .tk-sel.builder .od { color: var(--odd); } /* ══ BET BOOSTER ══════════════════════════════════════════════ COMBOBOOST betslip panel (Betby parity) + home Bet Boost cards (bet365 parity). Theme tokens only — --accent carries the boost green in every palette, --odd the boosted price. */ .boost { padding: 10px 14px 12px; background: color-mix(in srgb, var(--accent) 7%, var(--panel2)); border-top: 1px solid var(--line); flex: none; } .boost-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .boost-chip { flex: none; padding: 2px 8px; border-radius: 3px; background: var(--accent); color: var(--on-accent); font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; } .boost-min { flex: none; padding: 2px 7px; border-radius: 3px; background: var(--panel3); color: var(--muted-light); font-size: 10px; font-weight: 700; letter-spacing: .4px; } .boost-msg { font-size: 12px; font-weight: 700; margin-bottom: 9px; } /* the segmented bar: one segment per qualifying bet, boxed in pairs, the tier's multiplier above the pair that completes it — the active tier is the chip */ .boost-bar { display: flex; gap: 6px; } .boost-grp { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .boost-lab { align-self: center; min-height: 17px; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; } .boost-lab.on { background: var(--accent); color: var(--on-accent); } .boost-segs { display: flex; gap: 3px; } .boost-segs i { flex: 1; height: 7px; border-radius: 2px; background: color-mix(in srgb, var(--line) 80%, var(--panel3)); } .boost-segs i.fill { background: var(--accent); } /* a selection that doesn't count toward the boost: dimmed bolt beside its odd */ .boost-nq { display: inline-block; margin-right: 4px; color: var(--muted); opacity: .55; vertical-align: -1px; cursor: help; } .boost-nq svg { width: 11px; height: 11px; fill: currentColor; display: inline-block; } /* multiplier note on the total-odds line when a tier is active */ .boost-x { color: var(--accent); font-size: 11px; font-weight: 800; white-space: nowrap; } /* BET BOOST card active: struck plain total » boosted (slip footer + My Tickets) */ .slip-row b s, .tk-f b s { color: var(--muted); font-weight: 600; } .slip-row b .chev, .tk-f b .chev { color: var(--accent); font-weight: 800; } .badge.boost { background: var(--accent); color: var(--on-accent); } /* PARLAY BOOSTER: the sealed "N Fold" slip item + the My Tickets coupon. One compact card — struck » boosted headline, team names on one wrapping line, no per-leg controls (the single ✕ removes the whole coupon). */ .si-src.pb { background: color-mix(in srgb, var(--accent) 18%, var(--bg-deep)); color: var(--accent); } .slip-item.parlay .si-ev { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; white-space: normal; } .pb-line { font-variant-numeric: tabular-nums; font-weight: 800; } .pb-line s { color: var(--muted); font-weight: 600; font-size: 12px; } .pb-line .chev { color: var(--accent); font-weight: 800; } .pb-line b { color: var(--odd); } .pb-teams { margin-top: 3px; font-size: 12px; font-weight: 600; line-height: 1.45; color: color-mix(in srgb, var(--accent) 72%, var(--text)); overflow-wrap: anywhere; } .tk-sel.parlay .od { white-space: nowrap; } .tk-sel.parlay .od s { color: var(--muted); font-weight: 600; font-size: 12px; } .tk-sel.parlay .od .chev { color: var(--accent); font-weight: 800; } /* home Bet Boost cards — same rail mechanics as the featured sliders */ .boost-row .sb-row-h h2 { font-size: 17px; } .boost-cards { grid-auto-columns: 240px; } .boost-card { scroll-snap-align: start; display: flex; flex-direction: column; gap: 7px; min-width: 0; padding: 12px; cursor: pointer; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); box-shadow: 0 4px 14px color-mix(in srgb, var(--bg-deep) 48%, transparent); transition: transform .15s, border-color .15s; } .boost-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--accent) 42%, var(--line)); } .bc-title { font-weight: 800; font-size: 14px; letter-spacing: .2px; text-transform: uppercase; } .bc-market { color: var(--muted-light); font-weight: 700; font-size: 12px; margin-top: -4px; } .bc-legs { display: flex; flex-direction: column; gap: 6px; margin: 3px 0 2px; } .bc-leg { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; min-width: 0; } .bc-leg .crest { width: 16px; height: 16px; } .bc-leg .bl-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .bl-vs { color: var(--muted); font-weight: 500; } .bc-cta { margin-top: auto; color: var(--accent); font-weight: 800; font-size: 12px; letter-spacing: .4px; } .bc-odds { border: 1px solid var(--line-soft); border-radius: 6px; background: var(--panel2); padding: 8px 10px; text-align: center; } .bc-line { display: flex; align-items: baseline; justify-content: center; gap: 7px; font-variant-numeric: tabular-nums; } .bc-line s { color: var(--muted); font-size: 12px; } .bc-line .chev { color: var(--muted); font-weight: 800; } .bc-line b { color: var(--odd); font-size: 18px; font-weight: 800; } .bc-ret { color: var(--muted); font-size: 11px; margin-top: 2px; } @media (max-width: 820px) { .boost-cards { grid-auto-columns: 66vw; } } /* ══ WEEKLY JACKPOT ═══════════════════════════════════════════ Home banner (odometer counter + draw countdown), betslip opt-in row and the My Tickets badge. Theme tokens only — the banner reuses the hero's accent radial + ring art so it reads as the same family, one register quieter. */ .jp-skel { height: 104px; border-radius: var(--radius-lg); margin-top: 14px; } .sb-jackpot { position: relative; overflow: hidden; margin-top: 14px; display: flex; align-items: center; gap: 14px 22px; flex-wrap: wrap; padding: 16px clamp(18px, 4vw, 32px); border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line)); border-radius: var(--radius-lg); background: radial-gradient(120% 175% at 80% 30%, color-mix(in srgb, var(--accent) 44%, var(--bar1)) 0, var(--bar1) 48%, color-mix(in srgb, var(--bar2) 76%, #000) 100%); box-shadow: 0 12px 34px color-mix(in srgb, var(--bg-deep) 68%, transparent); } .sb-jackpot::after { /* echo of the hero's ring art, quieter */ content: ""; position: absolute; width: 300px; height: 300px; right: -70px; top: -105px; border-radius: 50%; border: 46px solid color-mix(in srgb, var(--odd) 8%, transparent); box-shadow: inset 0 0 70px color-mix(in srgb, var(--odd) 10%, transparent); transform: rotate(-15deg); pointer-events: none; } .jp-main { min-width: 0; position: relative; z-index: 1; } .jp-eyebrow { color: var(--odd); font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; } .jp-amount { display: flex; margin: 5px 0 6px; color: var(--on-hero); font-size: clamp(30px, 5.4vw, 46px); font-weight: 800; line-height: 1; letter-spacing: -1px; font-variant-numeric: tabular-nums; text-shadow: 0 3px 12px #0008; } .jp-d { display: inline-block; } .jp-d.tick { animation: jp-roll .3s ease; } @keyframes jp-roll { 0% { transform: translateY(34%); opacity: .15; } 100% { transform: none; opacity: 1; } } .jp-sub { color: var(--on-hero-muted); font-size: clamp(12px, 1.3vw, 13px); } .jp-sub b { color: var(--on-hero); } .jp-clock { margin-left: auto; display: flex; flex-direction: column; gap: 2px; text-align: right; position: relative; z-index: 1; } .jp-left { color: var(--odd); font-weight: 800; font-size: clamp(17px, 2.2vw, 22px); font-variant-numeric: tabular-nums; letter-spacing: .3px; } .jp-until { color: var(--on-hero-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; } @media (max-width: 560px) { .jp-clock { margin-left: 0; flex-direction: row; align-items: baseline; gap: 8px; text-align: left; } } @media (prefers-reduced-motion: reduce) { .jp-d.tick { animation: none; } } /* betslip opt-in row (top of the footer, above stake/total) */ .slip-jackpot { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; padding: 8px 10px; border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--accent) 9%, var(--panel)); cursor: pointer; transition: background .15s, border-color .15s; } .slip-jackpot.on { border-color: color-mix(in srgb, var(--accent) 60%, var(--line)); background: color-mix(in srgb, var(--accent) 17%, var(--panel)); } .slip-jackpot input { width: 16px; height: 16px; flex: none; margin: 0; accent-color: var(--accent); cursor: pointer; } .slip-jackpot .jp-star { flex: none; font-size: 14px; line-height: 1; } .slip-jackpot .jp-txt { display: flex; flex-direction: column; min-width: 0; } .slip-jackpot .jp-txt b { color: var(--text); font-size: 12px; } .slip-jackpot .jp-txt small { color: var(--muted); font-size: 11px; margin-top: 1px; } /* total-cost line while opted in: stake + fee, in the action color */ .slip-row.jp-total b { color: var(--odd); } /* My Tickets: entry badge beside the stake */ .badge.jackpot { background: var(--odd); color: var(--on-action); } .tk-f .badge.jackpot { align-self: center; cursor: help; } /* ══ CORRECT SCORE picker (features/correct-score) ═══════════════════════════ Mobile-first (390px): two big steppers side by side, the price on one full- width bar under them, and an "All" view of every offered score grouped 1 / X / 2. Cells are plain `.sel`s, so .picked / .bb-on-cell / .bb-blocked / .susp-cell all inherit their existing looks with no extra rules. */ .cs { border-top: 1px solid var(--line); } .cs-tabs { display: flex; gap: 6px; padding: 8px 10px; background: var(--panel2); border-bottom: 1px solid var(--line); } .cs-tab { flex: 1; min-height: 36px; padding: 7px 10px; border-radius: var(--radius); border: 1px solid var(--line); background: transparent; color: var(--muted-light); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap; } .cs-tab:hover { background: var(--panel3); } .cs-tab.on { background: var(--odd); border-color: var(--odd); color: var(--on-action); } /* ── stepper ───────────────────────────────────────────────────────────────*/ .cs-sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 4px; padding: 14px 8px 12px; } /* the ":" sits on the STEPPER row, not on the column's centre (the team name above and the cap below would drag it low) — hence the explicit offset */ .cs-vs { align-self: start; margin-top: 35px; color: var(--muted); font-size: 26px; font-weight: 800; line-height: 1; } .cs-side { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; } /* fixed height: one side having a crest and the other not must NOT push the two steppers out of line with each other */ .cs-team { display: flex; align-items: center; justify-content: center; gap: 5px; height: 20px; max-width: 100%; min-width: 0; color: var(--muted-light); font-size: 12px; font-weight: 700; } .cs-team .crest { flex: none; width: 18px; height: 18px; } .cs-team-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-ctl { display: flex; align-items: center; gap: 4px; } .cs-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; border: 1px solid var(--action-border); background: transparent; color: var(--odd); font: inherit; font-size: 22px; font-weight: 700; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: manipulation; -webkit-user-select: none; user-select: none; transition: background .12s, opacity .12s; } .cs-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--odd) 14%, transparent); } .cs-btn:active:not(:disabled) { background: color-mix(in srgb, var(--odd) 26%, transparent); } .cs-btn:disabled { opacity: .26; cursor: not-allowed; border-color: var(--line); color: var(--muted); } .cs-num { min-width: 46px; text-align: center; color: var(--text); font-size: 30px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .cs-cap { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; } .cs-pickrow { border-top: 1px solid var(--line); } .sel.cs-pick { min-height: 52px; padding: 12px 14px; border-top: none; border-left: none; } .sel.cs-pick .sel-n { color: var(--text); font-weight: 700; } .sel.cs-pick .sel-o { font-size: 17px; } /* a hole in the offered set — stated plainly, and nothing is priced */ .cs-off { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; } .cs-off-msg { color: var(--muted-light); font-size: 12.5px; } .cs-off-sc { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; } .cs-near { margin-left: auto; min-height: 34px; padding: 6px 11px; border-radius: 999px; border: 1px dashed var(--action-border); background: transparent; color: var(--muted-light); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .cs-near:hover { background: color-mix(in srgb, var(--odd) 12%, transparent); } .cs-near b { color: var(--text); font-variant-numeric: tabular-nums; } .cs-near-o { color: var(--odd); font-weight: 800; } /* ── All: 1 / X / 2 ────────────────────────────────────────────────────────*/ .cs-grp + .cs-grp { border-top: 1px solid var(--line); } .cs-grp-h { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel2); } .cs-badge { flex: none; width: 20px; height: 20px; border-radius: 4px; background: var(--odd); color: var(--on-action); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; } .cs-badge.other { background: var(--line); color: var(--muted-light); } .cs-grp-n { color: var(--muted-light); font-size: 12px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cs-cnt { margin-left: auto; flex: none; color: var(--muted); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; } .cs-cells { display: grid; grid-template-columns: repeat(3, 1fr); max-height: 244px; overflow-y: auto; overscroll-behavior: contain; } .cs-cells.wide { grid-template-columns: repeat(2, 1fr); } .sel.cs-cell { min-height: 46px; padding: 10px 11px; gap: 6px; justify-content: space-between; } .sel.cs-cell .sel-n { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; } .sel.cs-cell .sel-o { font-size: 12.5px; } .cs-cells .sel:nth-child(3n+1) { border-left: none; } .cs-cells.wide .sel { border-left: none; } .cs-cells.wide .sel:nth-child(2n) { border-left: 1px solid var(--line); } @media (max-width: 380px) { .cs-btn { width: 40px; height: 40px; } .cs-num { min-width: 38px; font-size: 26px; } .sel.cs-cell { padding: 10px 7px; font-size: 12px; } } /* desktop: more columns and centred cell content (a full-width row would strand the score at one end and the price at the other); the steppers stay thumb-sized and sit in the middle instead of drifting to the far edges */ @media (min-width: 700px) { .cs-cells { grid-template-columns: repeat(6, 1fr); max-height: 300px; } .cs-cells .sel:nth-child(3n+1) { border-left: 1px solid var(--line); } .cs-cells .sel:nth-child(6n+1) { border-left: none; } .sel.cs-cell { justify-content: center; gap: 12px; } .cs-cells.wide { grid-template-columns: repeat(3, 1fr); } .cs-cells.wide .sel { border-left: 1px solid var(--line); justify-content: space-between; } .cs-cells.wide .sel:nth-child(3n+1) { border-left: none; } .cs-sides { max-width: 560px; margin: 0 auto; padding: 18px 14px 14px; } .cs-tabs .cs-tab { flex: 0 0 auto; min-width: 130px; } .sel.cs-pick { justify-content: center; gap: 18px; } } /* ══ ACCOUNTS (features/auth) ═══════════════════════════════════════════════ * The demo-casino account experience, ported onto THIS sportsbook's tokens: a * centred modal over a blurred scrim, a 44px-minimum touch target on every * control, one inline error banner per form, and a header balance pill. * Nothing new is invented — --panel/--panel2/--line/--odd/--accent/--radius-lg * are the same custom properties the rest of this file already themes with, so * a brand overriding :root re-skins the account UI for free. * NB the casino sets `:root { font-size: 13px }` and sizes in odd rems; this * stylesheet sizes in px (body is `font: 13px/1.4`), so the casino's rem values * appear here as their px equivalents. */ /* ── Header: sign-in CTA · balance pill · account menu ───────────────────── */ .account { position: relative; flex: none; display: flex; align-items: center; } .auth-cta { min-height: 38px; display: inline-flex; align-items: center; gap: 7px; padding: 0 13px; border: 1px solid var(--action-border); border-radius: 8px; background: var(--odd); color: var(--on-action); font: inherit; font-weight: 800; cursor: pointer; transition: transform .12s, filter .12s; } .auth-cta:hover { transform: translateY(-1px); filter: brightness(1.06); } .auth-cta:focus-visible { outline: 2px solid var(--action-on-dark); outline-offset: 2px; } .auth-cta svg { width: 15px; height: 15px; flex: none; } .balance-pill { min-height: 38px; display: inline-flex; align-items: center; gap: 8px; padding: 0 9px 0 6px; border: 1px solid #ffffff25; border-radius: 8px; background: color-mix(in srgb, var(--bar2) 72%, transparent); color: var(--on-bar); font: inherit; cursor: pointer; text-align: left; } .balance-pill:hover { background: #ffffff1d; border-color: #ffffff45; } .balance-pill:focus-visible { outline: 2px solid var(--action-on-dark); outline-offset: 1px; } .account-avatar { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 7px; background: var(--odd); color: var(--on-action); font-size: 12px; font-weight: 900; } .account-avatar.lg { width: 38px; height: 38px; border-radius: 10px; font-size: 17px; } .balance-copy { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; } .balance-copy small { color: color-mix(in srgb, var(--on-bar) 66%, transparent); font-size: 10px; font-weight: 700; max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .balance-copy strong { font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--action-on-dark); } .balance-pill .chevron { color: color-mix(in srgb, var(--on-bar) 60%, transparent); font-size: 11px; } .account-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; width: min(280px, calc(100vw - 16px)); display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel), var(--panel2)); box-shadow: var(--shadow); color: var(--text); } .account-menu[hidden] { display: none; } .account-menu-head { display: flex; align-items: center; gap: 10px; padding-bottom: 4px; } .account-menu-head strong { display: block; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-menu-head small { color: var(--muted); font-size: 11px; } .account-menu-balance { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-deep); color: var(--muted-light); } .account-menu-balance b { color: var(--odd); font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; } /* ── Shared button vocabulary (casino .button primary/secondary/ghost) ───── */ .button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 16px; border: 1px solid transparent; border-radius: var(--radius); font: inherit; font-weight: 700; cursor: pointer; transition: transform .12s, background .12s, border-color .12s, filter .12s; } .button:hover { transform: translateY(-1px); } .button:disabled { opacity: .55; cursor: wait; transform: none; } .button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } /* the primary CTA is the ODDS colour, as in the casino — --accent stays the link/icon/focus colour so the two never compete */ .button.primary { background: var(--odd); color: var(--on-action); border-color: var(--action-border); } .button.primary:hover { background: var(--action-hover); } .button.secondary { background: var(--panel3); color: var(--text); border-color: var(--line); } .button.ghost { background: color-mix(in srgb, var(--bg-deep) 76%, transparent); color: var(--text); border-color: var(--line); } /* ── The auth modal ─────────────────────────────────────────────────────── */ body.auth-open { overflow: hidden; } .auth-layer { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; overflow-y: auto; background: color-mix(in srgb, var(--bg-deep) 78%, transparent); backdrop-filter: blur(5px); } .auth-layer[hidden] { display: none; } .auth-dialog { position: relative; width: min(430px, 100%); padding: 26px; max-height: min(760px, calc(100dvh - 32px)); overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(180deg, var(--panel), var(--panel2)); box-shadow: var(--shadow); } .auth-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--panel3); color: var(--text); box-shadow: 0 4px 14px #0004; font-size: 22px; line-height: 1; cursor: pointer; } .auth-close:hover { color: var(--down); border-color: color-mix(in srgb, var(--danger) 45%, var(--line)); } .auth-mark { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 14px; border-radius: 11px; background: var(--odd); color: var(--on-action); font-size: 15px; font-weight: 900; letter-spacing: -.5px; box-shadow: 0 8px 20px #03080570; } .auth-kicker { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; } .auth-dialog h2 { margin: 3px 36px 5px 0; font-size: 23px; line-height: 1.2; letter-spacing: -.4px; } .auth-description { margin: 0 0 20px; color: var(--muted-light); } .auth-form { display: grid; gap: 14px; } .auth-field { display: grid; gap: 6px; } .auth-field label { color: var(--text); font-size: 12px; font-weight: 700; } .auth-field input { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-deep); color: var(--text); font: inherit; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; } .auth-field input:focus { border-color: var(--accent); background: color-mix(in srgb, var(--bg-deep) 88%, var(--accent)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); } .auth-field input[aria-invalid="true"] { border-color: var(--danger); } .auth-hint { margin: -1px 0 0; color: var(--muted); font-size: 10px; } .auth-error { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 10px 11px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: var(--radius); background: color-mix(in srgb, var(--danger) 16%, var(--bg-deep)); color: color-mix(in srgb, var(--danger) 30%, #ffe6e6); font-size: 12px; } .auth-error[hidden] { display: none; } .auth-error svg { width: 16px; height: 16px; flex: none; margin-top: 1px; } .auth-form .button { width: 100%; margin-top: 2px; } .auth-links { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; color: var(--muted-light); font-size: 12px; } .auth-link { display: inline-flex; min-height: 44px; align-items: center; padding: 0 6px; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; } .auth-link:hover { text-decoration: underline; } .auth-secure-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 0; color: var(--muted); font-size: 10px; } .auth-secure-note svg { width: 13px; height: 13px; flex: none; } /* ── Betslip: the logged-out place button ────────────────────────────────── */ /* Same slot, same size as .slip-place — only the words and the colour change, so signing in never moves the button out from under the punter's thumb. */ .slip-place.signin { background: var(--odd); color: var(--on-action); } .slip-place.signin:disabled { background: var(--odd); color: var(--on-action); cursor: pointer; opacity: 1; } /* ── My Tickets: won, but the payout is not confirmed yet ────────────────── */ /* A quiet outline chip, deliberately the sibling of .badge.payable: one says the money is ready, this one says it is still being confirmed. */ .badge.awaiting { background: transparent; padding: 1px 7px; border: 1px dashed color-mix(in srgb, var(--odd) 45%, transparent); color: var(--odd-soft); } .tk-h .tk-credited { color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .3px; } @media (max-width: 920px) { /* the bar is tight below 920 — the pill keeps the balance, drops the name */ .balance-copy small { display: none; } .balance-copy strong { font-size: 13px; } .auth-cta span { display: none; } .auth-cta { padding: 0 10px; } .auth-cta svg { width: 17px; height: 17px; } /* …and the connection state keeps its DOT and loses its words: adding the account pill to a 52px bar is what finally made "connecting…" wrap. The dot carries the same information (grey/green/gold) in 9px. */ #conn-label { display: none; } .conn { gap: 0; } } @media (max-width: 620px) { .account-menu { position: fixed; top: 56px; right: 8px; left: auto; width: min(320px, calc(100vw - 16px)); } .auth-layer { padding: 14px; align-items: end; } .auth-dialog { padding: 22px 18px; max-height: calc(100dvh - 28px); } .auth-dialog h2 { font-size: 21px; } } @media (max-width: 470px) { .auth-links { flex-direction: column; align-items: center; gap: 0; } } @media (prefers-reduced-motion: reduce) { .button:hover, .auth-cta:hover { transform: none; } }