/* --- Themes ------------------------------------------------------------- * * Themes are CSS-variable presets selected by an attribute on : * (default) * * * * The data-theme attribute is set by an inline script in base.html that reads * ?theme=… from the URL. The default (no attribute / unknown value) is dark. * * Variables that begin with --canvas-* are read by renderer-horse.js so the * race surface, lane dividers, and finish line also follow the theme. * * To add a theme: add a new selector below with all the variables defined, * then update the allow-list in base.html. */ :root { --topbar-height: 46px; --sidebar-width: 224px; } :root, [data-theme="dark"] { --bg: #0b0d10; --bg-elev: #14181c; --bg-elev-2: #1c2128; --fg: #e6e8eb; --fg-muted: #8b94a0; --accent: #ffb703; --accent-2: #fb8500; --border: #232932; --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-size: 14px; --letter-spacing: normal; --radius: 6px; --radius-sm: 4px; --canvas-bg-1: #1a1f25; --canvas-bg-2: #141a1f; --canvas-lane-divider: #2a313b; --canvas-lane-number: #2f3742; --canvas-finish-light: #e6e8eb; --canvas-finish-dark: #0b0d10; } [data-theme="light"] { --bg: #f5f6f8; --bg-elev: #ffffff; --bg-elev-2: #ebedf1; --fg: #1a1d22; --fg-muted: #6c7686; --accent: #d97706; --accent-2: #ea580c; --border: #d8dade; --canvas-bg-1: #e7e9ee; --canvas-bg-2: #d4d7dc; --canvas-lane-divider: #bcc1c8; --canvas-lane-number: #aab0b8; --canvas-finish-light: #ffffff; --canvas-finish-dark: #1a1d22; } [data-theme="pixel"] { --bg: #1a1c2c; --bg-elev: #29274c; --bg-elev-2: #3a3a6a; --fg: #f4f4f4; --fg-muted: #8e9bb5; --accent: #ffe66d; --accent-2: #ff6b6b; --border: #5d5d8a; --font-stack: 'Press Start 2P', ui-monospace, monospace; --font-size: 11px; --letter-spacing: 0.4px; --radius: 0; --radius-sm: 0; --canvas-bg-1: #29274c; --canvas-bg-2: #1a1c2c; --canvas-lane-divider: #5d5d8a; --canvas-lane-number: #ffe66d; --canvas-finish-light: #f4f4f4; --canvas-finish-dark: #1a1c2c; } /* Pixel theme — disable text/image smoothing for a chunkier feel. */ [data-theme="pixel"] #race-canvas { image-rendering: pixelated; image-rendering: crisp-edges; } [data-theme="pixel"] h1 { font-size: 18px; } [data-theme="pixel"] h2 { font-size: 14px; } [data-theme="pixel"] h3 { font-size: 11px; } [data-theme="pixel"] p, [data-theme="pixel"] a, [data-theme="pixel"] .runner-pos { line-height: 1.5; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-stack); font-size: var(--font-size); line-height: 1.45; letter-spacing: var(--letter-spacing); background: var(--bg); color: var(--fg); min-height: 100vh; display: flex; flex-direction: column; } a { color: inherit; text-decoration: none; } .muted { color: var(--fg-muted); } .topbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--bg-elev); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 30; } .brand { font-weight: 700; letter-spacing: 2px; color: var(--accent); flex: 0 0 auto; /* All-caps brand has no descenders, so its visible center sits ~1px above mixed-case nav items ("Sign in" has the 'g' descender). Nudge down to match. transform keeps it out of layout flow. */ transform: translateY(1px); } .topbar-actions { display: flex; gap: 16px; margin-left: auto; align-items: center; } @media (hover: hover) { .topbar-actions a:hover { color: var(--accent); } } .nav-toggle { display: inline-flex; background: none; border: none; color: var(--fg); cursor: pointer; padding: 6px; margin: -2px 0 -2px -4px; border-radius: var(--radius-sm); align-items: center; } @media (hover: hover) { .nav-toggle:hover { color: var(--accent); } } .page-layout { display: grid; grid-template-columns: var(--sidebar-width, 224px) 1fr; flex: 1; width: 100%; min-width: 0; } /* Desktop: user can hide the sidebar via the hamburger. State persists in localStorage (see base.html) and is re-applied pre-paint as html.sidebar-collapsed. Scoped to desktop because on mobile the hamburger drives the drawer instead. */ @media (min-width: 721px) { html.sidebar-collapsed .page-layout { grid-template-columns: 1fr; } html.sidebar-collapsed .sidebar { display: none; } } .main { padding: 24px 20px; max-width: 1100px; margin: 0 auto; width: 100%; min-width: 0; flex: 1; } .footer { padding: 14px 20px; border-top: 1px solid var(--border); font-size: 12px; } /* --- Sidebar nav: persistent column on desktop, slide-in drawer on mobile. Tree is one
per sport (collapsible); leaves link to /sport/ and /venue/. Active link highlighted via .is-active. */ .sidebar { background: var(--bg-elev); border-right: 1px solid var(--border); position: sticky; top: var(--topbar-height, 46px); align-self: start; max-height: calc(100vh - var(--topbar-height, 46px)); overflow-y: auto; padding: 14px 10px; z-index: 20; } .sidebar nav { display: block; } .sidebar-tree, .sidebar-tree ul { list-style: none; margin: 0; padding: 0; } .sidebar-tree > li { margin-bottom: 2px; } .sidebar-tree summary { list-style: none; cursor: pointer; padding: 6px 8px; border-radius: var(--radius-sm); font-weight: 600; user-select: none; display: flex; align-items: center; gap: 8px; } .sidebar-tree summary::-webkit-details-marker { display: none; } @media (hover: hover) { .sidebar-tree summary:hover { background: var(--bg-elev-2); } } .sidebar-tree details[open] > summary { background: var(--bg-elev-2); } .sidebar-icon-wrap { flex: 0 0 auto; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-muted); transition: color 0.12s ease; } .sidebar-tree details[open] > summary .sidebar-icon-wrap, @media (hover: hover) { .sidebar-tree summary:hover .sidebar-icon-wrap { color: var(--fg); } } .sidebar-sport.is-active { color: var(--accent); } .sidebar-sport.is-active .sidebar-icon-wrap { color: var(--accent); } .sport-icon { width: 20px; height: 20px; display: block; } .sidebar-children { margin: 2px 0 8px 18px; display: flex; flex-direction: column; gap: 1px; } .sidebar-link { display: block; padding: 5px 8px; border-radius: var(--radius-sm); font-size: 13px; color: var(--fg-muted); } @media (hover: hover) { .sidebar-link:hover { background: var(--bg-elev-2); color: var(--fg); } } .sidebar-link.is-active { color: var(--accent); background: var(--bg-elev-2); } .sidebar-backdrop { display: none; } @media (max-width: 720px) { .topbar { gap: 10px; padding: 8px 12px; } /* Drop the API link on narrow viewports — keep the brand visible. */ .topbar-secondary { display: none; } /* Tighter lateral spacing on phones — the page card + section card stack adds up to 36px per side at desktop sizes, which steals a lot of room from the wagering table. */ .main { padding: 16px 10px; } .race { padding: 10px; } .page-layout { grid-template-columns: 1fr; } .nav-toggle { display: inline-flex; } .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(82vw, 320px); max-height: none; transform: translateX(-100%); transition: transform 0.18s ease; z-index: 50; box-shadow: 2px 0 16px rgba(0, 0, 0, 0.35); padding: 0; overflow: hidden; display: flex; flex-direction: column; } .sidebar nav { flex: 1 1 auto; min-height: 0; box-sizing: border-box; padding: calc(18px + env(safe-area-inset-top)) 12px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .sidebar-tree { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: space-evenly; } .sidebar-tree > li { margin-bottom: 0; } .sidebar-tree summary { padding: 12px 10px; font-size: 16px; gap: 12px; } .sidebar-icon-wrap { width: 24px; height: 24px; } .sport-icon { width: 24px; height: 24px; } .sidebar-children { margin: 4px 0 4px 24px; gap: 2px; } .sidebar-link { padding: 9px 10px; font-size: 14px; } body.nav-open .sidebar { transform: translateX(0); } .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 45; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } body.nav-open .sidebar-backdrop { opacity: 1; pointer-events: auto; } body.nav-open { overflow: hidden; } } .hero h1 { margin: 0 0 6px; font-size: 28px; } .hero p { margin: 0 0 24px; } .sports-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .sport-card { display: block; padding: 18px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.1s; } @media (hover: hover) { .sport-card:hover { border-color: var(--accent); } } .sport-card h2 { margin: 0 0 4px; font-size: 18px; } .sport-header { margin-bottom: 20px; } .sport-header h1 { margin: 0 0 4px; } .race { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 12px; } .track-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 6; min-height: 220px; background: var(--bg-elev-2); border-radius: 4px; overflow: hidden; container-type: size; } #race-canvas { display: block; width: 100%; height: 100%; } /* Broadcast HUD overlaid on the canvas. Pulled out of the renderer so the canvas only draws the live game (track, runners, props). The strap text uses container-query units (cqh) so it scales with the track-wrapper instead of the viewport — works the same in normal and embed mode. */ .track-hud { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-stack); text-align: center; } /* Reconnect overlay — DOM sibling of the canvas, sits on top until the WebSocket reopens. Dark scrim + theme-accent label so it reads against any sport's track background. */ .track-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: rgba(0, 0, 0, 0.55); color: var(--fg); z-index: 4; backdrop-filter: blur(2px); } .track-overlay[hidden] { display: none; } .track-overlay-spinner { width: 28px; height: 28px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: var(--accent); border-radius: 50%; animation: track-overlay-spin 0.9s linear infinite; } .track-overlay-label { font-size: 13px; letter-spacing: 0.5px; text-transform: uppercase; font-weight: 700; } @keyframes track-overlay-spin { to { transform: rotate(360deg); } } .track-hud-banner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2em; } /* Broadcast HUD text sits on top of the live canvas (any color), so the dark text-shadow halo carries the legibility — colors come from the theme so the strap matches the rest of the chrome. */ .track-hud-line1 { color: var(--accent); font-weight: 900; font-size: clamp(14px, 11cqh, 30px); letter-spacing: 0.5px; text-shadow: -2px -2px 0 rgba(0, 0, 0, 0.65), 2px -2px 0 rgba(0, 0, 0, 0.65), -2px 2px 0 rgba(0, 0, 0, 0.65), 2px 2px 0 rgba(0, 0, 0, 0.65), 0 -2px 0 rgba(0, 0, 0, 0.65), 0 2px 0 rgba(0, 0, 0, 0.65); } .track-hud-line2 { color: var(--fg); font-weight: 700; font-size: clamp(11px, 6cqh, 16px); letter-spacing: 0.5px; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.65), 1px -1px 0 rgba(0, 0, 0, 0.65), -1px 1px 0 rgba(0, 0, 0, 0.65), 1px 1px 0 rgba(0, 0, 0, 0.65); } .track-hud-places { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; gap: 0.15em; color: var(--fg); font-weight: 700; font-size: clamp(11px, 6.5cqh, 18px); letter-spacing: 0.5px; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.65), 1px -1px 0 rgba(0, 0, 0, 0.65), -1px 1px 0 rgba(0, 0, 0, 0.65), 1px 1px 0 rgba(0, 0, 0, 0.65); } .track-hud-places li { display: flex; align-items: baseline; gap: 0.4em; } .track-hud-place-num { color: var(--accent); font-weight: 900; font-variant-numeric: tabular-nums; } .field:not([hidden]) { margin-top: 14px; display: grid; grid-template-columns: 1fr; gap: 8px; } .runner { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-elev-2); border-radius: 4px; border: 1px solid var(--border); } .runner-dot { width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55); border: 1px solid rgba(0, 0, 0, 0.45); } .runner-silks { width: 24px; height: 20px; flex: 0 0 24px; border: 1px solid rgba(0, 0, 0, 0.55); border-radius: 2px; overflow: hidden; display: flex; } .runner-silks svg { width: 100%; height: 100%; display: block; } .runner-name { font-weight: 600; } .runner-horse { font-weight: 600; } @media (hover: hover) { a.runner-horse:hover, a.runner-jockey:hover { color: var(--accent); } } .runner-jockey { font-weight: 400; font-size: 0.9em; } .runner-stats { font-size: 0.78em; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; margin-left: 8px; } .runner-pos { margin-left: auto; color: var(--fg-muted); font-variant-numeric: tabular-nums; } .race-log { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .race-log:not(:has(.race-log-entry)) { display: none; } .race-log-list { display: flex; flex-direction: column; gap: 4px; max-height: 240px; overflow-y: auto; } .race-log-entry { display: flex; gap: 10px; line-height: 1.35; font-size: 13px; color: var(--fg); } .race-log-time { color: var(--fg-muted); min-width: 44px; font-variant-numeric: tabular-nums; } .race-log-text { flex: 1 1 auto; min-width: 0; } .race-log-text strong { font-weight: 600; color: var(--accent); } .race-log-entry.notable .race-log-text strong { color: var(--accent-2); } .race-log-entry.danger .race-log-time, .race-log-entry.danger .race-log-text strong { color: var(--accent-2); } .race-log-entry.danger .race-log-text { color: var(--fg); } .results-panel { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); } .results-panel h3 { margin: 0 0 10px; } .results-list { margin: 0; padding: 0; list-style: none; } .results-list .result-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .result-row .runner-labels { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .result-row .runner-name { font-weight: 600; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .result-row .runner-jockey { color: var(--fg-muted); font-size: 12px; font-weight: 400; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .result-row .result-time { margin-left: auto; font-variant-numeric: tabular-nums; } .result-swatch { width: 22px; height: 18px; flex: 0 0 22px; border: 1px solid rgba(0, 0, 0, 0.55); border-radius: 2px; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: #fff; } .result-swatch svg { width: 100%; height: 100%; display: block; } .result-swatch-solid { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.55); } .contact h1 { margin-top: 0; } .contact a { color: var(--accent); } .contact ul { margin: 8px 0 16px; padding-left: 22px; } .venues { margin-top: 28px; } .venues h2 { margin: 0 0 12px; font-size: 18px; } .venue-country { margin-bottom: 16px; } .venue-country h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--fg-muted); } .venue-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .venue-chip { display: inline-flex; align-items: baseline; gap: 8px; padding: 6px 12px; background: var(--bg-elev); border: 1px solid var(--border); /* Pixel theme flattens via --radius; non-pixel themes get the pill shape. */ border-radius: max(var(--radius), 999px); transition: border-color 0.1s; } [data-theme="pixel"] .venue-chip { border-radius: 0; } @media (hover: hover) { .venue-chip:hover { border-color: var(--accent); } } .venue-name { font-weight: 600; } .venue-disc { font-size: 12px; } .crumbs { margin-bottom: 8px; font-size: 12px; } @media (hover: hover) { .crumbs a:hover { color: var(--accent); } } .venue-section { margin-top: 24px; } .venue-section h2 { margin: 0 0 10px; font-size: 18px; } /* Static track silhouette on the venue page. The canvas reuses the live race renderer in preview mode (no runners) so the venue picture matches the broadcast surface — same scenery, rails, lane dividers, finish line. */ .track-preview { background: linear-gradient(180deg, var(--canvas-bg-1), var(--canvas-bg-2)); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .track-preview canvas { display: block; width: 100%; height: 260px; } .event-list { list-style: none; margin: 0; padding: 0; } .event-row { display: grid; grid-template-columns: 170px 1fr auto auto; gap: 12px; align-items: baseline; padding: 10px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 4px; margin-bottom: 6px; } .event-time { font-variant-numeric: tabular-nums; color: var(--fg-muted); } .event-name { font-weight: 600; } .event-cat { font-size: 12px; } .event-status { font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } @media (max-width: 640px) { .event-row { grid-template-columns: 1fr; gap: 2px; } } /* Below ~360px the 170px time column forced horizontal scroll even after collapsing to one column elsewhere — pad / margin tightening avoids the row pushing out past the viewport on small phones. */ @media (max-width: 360px) { .event-row { padding: 8px 8px; } .event-time { font-size: 12px; } } /* --- Listings: clickable event rows -------------------------------------- */ .event-row-link { padding: 0; display: block; /* override .event-row's grid; anchor inside handles layout */ } .event-row-anchor { display: grid; grid-template-columns: 170px 1fr auto auto; gap: 12px; align-items: baseline; padding: 10px 12px; color: inherit; text-decoration: none; transition: border-color 0.1s, background 0.1s; } @media (hover: hover) { .event-row-link:hover { border-color: var(--accent); } } @media (hover: hover) { .event-row-link:hover .event-name { color: var(--accent); } } @media (max-width: 640px) { .event-row-anchor { grid-template-columns: 1fr; gap: 2px; } } @media (max-width: 360px) { .event-row-anchor { padding: 8px 8px; } } /* --- Listings: card with stretched anchor + structured contents -------- The whole card navigates to the event via the absolutely-positioned `.event-row-stretch` anchor; nested links (jockey, horse) sit on top via `position: relative; z-index: 1` so a click on them goes to the profile. The card overrides .event-row's `display: grid` so it can stack a header line + the embedded winner table. */ .event-row-card { position: relative; display: block; transition: border-color 0.1s; padding: 10px 12px; } @media (hover: hover) { .event-row-card:hover { border-color: var(--accent); } } @media (hover: hover) { .event-row-card:hover .event-name { color: var(--accent); } } .event-row-stretch { position: absolute; inset: 0; border-radius: 4px; text-indent: 200%; white-space: nowrap; overflow: hidden; } .event-row-tag { position: relative; z-index: 1; color: var(--accent); } @media (hover: hover) { .event-row-tag:hover { color: var(--accent-2); text-decoration: underline; } } /* Top row inside an event card — same grid the bare .event-row uses, so listings without an attached market still look identical. */ .event-row-line { display: grid; grid-template-columns: 170px 1fr auto auto; gap: 12px; align-items: baseline; } @media (max-width: 640px) { .event-row-line { grid-template-columns: 1fr; gap: 2px; } } .inline-link { color: var(--accent); } @media (hover: hover) { .inline-link:hover { color: var(--accent-2); text-decoration: underline; } } /* --- Sport hub: next race, race card, date picker --------------------- */ .next-race-panel { margin-bottom: 28px; } .next-race-panel h2 { margin: 0 0 10px; font-size: 18px; } .next-race-card { display: block; padding: 16px 18px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); transition: border-color 0.1s; } @media (hover: hover) { .next-race-card:hover { border-color: var(--accent); } } .next-race-time { font-variant-numeric: tabular-nums; color: var(--fg-muted); font-size: 13px; margin-bottom: 4px; } .next-race-name { font-size: 18px; font-weight: 700; margin-bottom: 4px; } @media (hover: hover) { .next-race-card:hover .next-race-name { color: var(--accent); } } .next-race-meta { font-size: 13px; } .next-race-status { text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; } .race-card-section { margin-top: 28px; } .race-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 12px; } .race-card-head h2 { margin: 0; font-size: 18px; } .date-picker { display: flex; gap: 6px; flex-wrap: wrap; } .date-pill { padding: 5px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: max(var(--radius), 999px); font-size: 12px; color: var(--fg); transition: border-color 0.1s, color 0.1s, background 0.1s; white-space: nowrap; } [data-theme="pixel"] .date-pill { border-radius: 0; } @media (hover: hover) { .date-pill:hover { border-color: var(--accent); color: var(--accent); } } .date-pill-active { border-color: var(--accent); background: var(--accent); color: var(--bg); font-weight: 600; } @media (hover: hover) { .date-pill-active:hover { color: var(--bg); } } /* Race card grid: rows = venues, cols = times. Overflows horizontally on narrow viewports; the venue column sticks to the left so the row label stays visible while scanning times. */ .race-card-grid { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-elev); scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .race-card-grid::-webkit-scrollbar { height: 8px; } .race-card-grid::-webkit-scrollbar-track { background: transparent; margin: 0 var(--radius); } .race-card-grid::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } @media (hover: hover) { .race-card-grid::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); } } .race-card-grid table { border-collapse: collapse; width: max-content; font-size: 12px; } .race-card-grid th, .race-card-grid td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); vertical-align: middle; } .race-card-grid tbody tr:last-child th, .race-card-grid tbody tr:last-child td { border-bottom: none; } .race-card-grid th:last-child, .race-card-grid td:last-child { border-right: none; } /* Uniform cell metrics — every column is the same width and every row the same height. The venue column is wider to fit names + country. */ .rc-corner, .rc-num-head { background: var(--bg-elev-2); font-weight: 600; color: var(--fg-muted); font-size: 11px; letter-spacing: 0.5px; text-align: center; padding: 6px 8px; position: sticky; top: 0; z-index: 1; } .rc-corner { left: 0; z-index: 2; width: 180px; min-width: 180px; text-align: left; } .rc-num-head { width: 76px; min-width: 76px; font-variant-numeric: tabular-nums; } .rc-venue { position: sticky; left: 0; background: var(--bg-elev); z-index: 1; width: 180px; min-width: 180px; padding: 6px 10px; font-weight: 600; text-align: left; } .rc-venue a { display: flex; flex-direction: column; color: inherit; } @media (hover: hover) { .rc-venue a:hover .rc-venue-name { color: var(--accent); } } .rc-venue-name { white-space: nowrap; } .rc-venue-country { font-size: 11px; font-weight: 400; } .rc-cell { width: 76px; min-width: 76px; height: 44px; padding: 4px; text-align: center; } .rc-cell-empty { background: transparent; } /* Each filled cell renders as a bordered button so the grid reads like a row of clickable chips (cf. Matchbook's race card). */ .rc-cell-link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--fg); font-variant-numeric: tabular-nums; font-weight: 600; transition: background 0.1s, color 0.1s, border-color 0.1s; } @media (hover: hover) { .rc-cell-link:hover { border-color: var(--accent); background: var(--accent); color: var(--bg); } } /* Status accents — colour the button so live + queued races stand out. */ .rc-status-lobby .rc-cell-link { color: var(--accent); border-color: var(--accent); } .rc-status-running .rc-cell-link { color: var(--bg); background: var(--accent); border-color: var(--accent); font-weight: 700; } @media (hover: hover) { .rc-status-running .rc-cell-link:hover { background: var(--accent-2); border-color: var(--accent-2); } } @media (hover: hover) { .race-card-grid tbody tr:hover .rc-venue { background: var(--bg-elev-2); } } /* Small inline chip used on event rows to surface the venue. */ .event-chip { display: inline-block; margin-left: 8px; padding: 1px 8px; border: 1px solid var(--border); border-radius: max(var(--radius-sm), 999px); font-size: 11px; font-weight: 500; color: var(--fg-muted); vertical-align: baseline; } [data-theme="pixel"] .event-chip { border-radius: 0; } /* --- Live single-canvas stage ----------------------------------------- */ /* The /live page is one auto-rotating canvas with a bottom strap showing what's on air now (left) and what's up next globally (right). Sized for both the normal browser view and the embed=canvas streamer view. */ .live-stage { display: flex; flex-direction: column; gap: 14px; margin-top: 20px; } /* Two fixed areas, side-by-side on every viewport. Race-info wraps internally when the strap is narrow; messages stays right-aligned and on one line. JS sets `data-state` on the root for state-driven tweaks. */ .live-strap { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; } .live-strap-race-info { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; } .live-strap-race-info > span:empty { display: none; } /* Anchor wraps the race-info row to make the strap a click target into /event/. display:contents lets the row's flex layout pass through so the anchor itself is layout-invisible. Without an href we drop the pointer affordance so the row looks inert (matches the original UX on connecting / standing-by states). */ .live-strap-link { display: contents; color: inherit; text-decoration: none; } .live-strap-link[href]:hover .live-strap-race-info, .live-strap-link[href]:focus-visible .live-strap-race-info { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .live-strap-link:not([href]) { cursor: default; } .live-strap[data-state="connecting"] .live-strap-race-info { visibility: hidden; } .ls-tag { font-size: 10px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--fg-muted); } .live-strap[data-state="over"] .ls-tag { color: var(--accent); border-color: var(--accent); } .ls-sport { font-weight: 700; font-size: 16px; letter-spacing: 0.3px; } .ls-venue, .ls-event, .ls-kind { font-size: 13px; color: var(--fg-muted); } .ls-event { color: var(--fg); } .ls-venue::before, .ls-event::before, .ls-kind::before { content: '·'; margin-right: 8px; color: var(--fg-muted); } .live-strap-messages { flex: 0 0 auto; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--fg); } .live-strap-messages:empty { display: none; } .live-strap[data-state="running"] .live-strap-messages { color: var(--accent); } .live-strap[data-state="lobby"] .live-strap-messages { color: var(--accent); } .live-strap[data-state="waiting"] .live-strap-messages { color: var(--fg-muted); } .live-strap[data-state="connecting"] .live-strap-messages { color: var(--fg-muted); } /* --- Embed modes ------------------------------------------------------- * * Set on by the inline param-reader in base.html based on ?embed=…: * ?embed=canvas — strip everything except the race canvas. The canvas * fills the viewport. Suitable for OBS, webview overlays, * or iframe embedding. * * To add more modes: add another class here and extend the param-reader. */ html.embed-canvas .topbar, html.embed-canvas .footer, html.embed-canvas .sport-header, html.embed-canvas .field, html.embed-canvas .race-log, html.embed-canvas .venues, html.embed-canvas .crumbs, html.embed-canvas .venue-section, html.embed-canvas .hero, html.embed-canvas .sports-grid, html.embed-canvas .next-race-panel, html.embed-canvas .date-picker-section, html.embed-canvas .race-card-section, html.embed-canvas .sidebar, html.embed-canvas .sidebar-backdrop, html.embed-canvas .nav-toggle { display: none !important; } html.embed-canvas .page-layout { display: block; grid-template-columns: none; } html.embed-canvas body { background: transparent; min-height: 100vh; } html.embed-canvas .main { padding: 0; max-width: none; height: 100vh; } /* The .race becomes a flex column in embed mode so the .live-strap takes its intrinsic height at the top and the canvas grows into the rest of the viewport. Keeps the broadcast-status text (AT THE POST / DOWN THE STRETCH / RACE IN PROGRESS / FINAL) visible on the 24/7 stream. */ html.embed-canvas .race { padding: 0; border: none; border-radius: 0; background: transparent; height: 100%; display: flex; flex-direction: column; position: relative; } /* Lift the results panel out of the bottom-of-page flow and overlay it on the left edge of the canvas so the running order is visible on the 24/7 stream. Sibling of .track-wrapper inside .race; .race is positioned. */ /* Embed mode overlays the results panel onto the canvas — we lock a dark, high-contrast scrim instead of inheriting the theme bg so OBS captures look the same on dark/light/pixel. Foreground text reads the theme's accent / muted hooks where they're meaningful (the lock here is the *background*, not the text). */ html.embed-canvas .results-panel { position: absolute; left: 12px; bottom: 12px; top: auto; margin: 0; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-sm); background: rgba(0, 0, 0, 0.55); color: #ffffff; max-width: min(32%, 340px); z-index: 3; backdrop-filter: blur(4px); } html.embed-canvas .results-panel h3 { margin: 0 0 6px; color: var(--accent); font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; } html.embed-canvas .results-list .result-label a { color: var(--accent); } /* Push the centered WINNER banner clear of the results panel on the left — only while the panel is actually on screen. Between races the panel is hidden, so the banner stays truly centered. */ html.embed-canvas .race:has(.results-panel:not([hidden])) .track-hud-banner { padding-left: min(34%, 360px); } html.embed-canvas .race .live-strap { flex: 0 0 auto; border-radius: 0; border-left: none; border-right: none; border-top: none; } html.embed-canvas .track-wrapper { width: 100%; flex: 1 1 auto; height: auto; aspect-ratio: auto; min-height: 0; border-radius: 0; } /* The /live page in embed mode splits the viewport between the strap (top, intrinsic height) and the canvas (bottom, takes whatever's left). The strap is up top so Twitch's bottom chrome on the 24/7 stream doesn't clip it. Without these overrides the track-wrapper would claim the whole viewport and push the strap off-screen. */ html.embed-canvas .live-stage { height: 100vh; margin: 0; gap: 0; } html.embed-canvas .live-stage .live-stage-race { flex: 1 1 auto; min-height: 0; height: auto; } html.embed-canvas .live-stage .track-wrapper { width: 100%; height: 100%; } html.embed-canvas .live-strap { flex: 0 0 auto; border-radius: 0; border-left: none; border-right: none; border-top: none; } /* --- Profile hero: silks alongside name + lore ------------------------ */ .profile-hero { display: flex; align-items: flex-start; gap: 18px; } .profile-hero-text { min-width: 0; flex: 1; } .profile-silks { display: block; flex: 0 0 auto; width: 140px; aspect-ratio: 22 / 18; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .profile-silks svg { width: 100%; height: 100%; display: block; } @media (max-width: 640px) { .profile-hero { gap: 12px; } .profile-silks { width: 88px; } } /* --- Profile stats + form strip --------------------------------------- */ .profile-stats { margin: 16px 0; } .profile-stats h2 { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--fg-muted); font-weight: 600; } .profile-stats-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 10px; } .profile-stats-total { font-weight: 600; font-variant-numeric: tabular-nums; } .profile-stats-split { font-variant-numeric: tabular-nums; } .profile-stats-split strong { font-weight: 600; } .stat-radar { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .stat-radar-svg { width: 220px; height: 220px; flex: 0 0 auto; overflow: visible; } .stat-radar-ring { fill: none; stroke: var(--fg-muted); stroke-width: 1; opacity: 0.5; } .stat-radar-axis { stroke: var(--fg-muted); stroke-width: 1; opacity: 0.5; } .stat-radar-total { fill: var(--accent-2); fill-opacity: 0.22; stroke: var(--accent-2); stroke-width: 1; stroke-linejoin: round; } .stat-radar-base { fill: var(--accent); fill-opacity: 0.55; stroke: var(--accent); stroke-width: 1; stroke-linejoin: round; } .stat-radar-label { font-size: 10px; letter-spacing: 0.04em; fill: var(--fg-muted); } .stat-radar-legend { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .stat-radar-legend li { display: flex; align-items: baseline; gap: 6px; } .stat-radar-legend .stat-label { color: var(--fg-muted); font-size: 0.8em; letter-spacing: 0.04em; min-width: 2.4em; } .stat-radar-legend .stat-value { font-weight: 600; font-variant-numeric: tabular-nums; } .stat-radar-legend .stat-bonus { color: var(--accent-2); font-size: 0.85em; font-variant-numeric: tabular-nums; } .form-strip { display: inline-flex; gap: 3px; vertical-align: middle; } .form-strip-square { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; } .form-strip-mini { gap: 2px; margin-left: 8px; } .form-strip-mini .form-strip-square { width: 14px; height: 14px; font-size: 10px; } .form-strip-win { background: var(--accent); border-color: var(--accent); color: var(--bg); } .form-strip-mid { background: var(--bg-elev-2); color: var(--fg); } .form-strip-lose { background: var(--bg); color: var(--fg-muted); } .form-strip-empty { background: transparent; color: var(--fg-muted); border-style: dashed; } [data-theme="pixel"] .form-strip-square { border-radius: 0; } .streak-badge { display: inline-block; padding: 2px 8px; border-radius: max(var(--radius-sm), 999px); border: 1px solid var(--border); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg-muted); background: var(--bg-elev); } .streak-badge-W { background: var(--accent); border-color: var(--accent); color: var(--bg); } [data-theme="pixel"] .streak-badge { border-radius: 0; } .venue-stats-list { list-style: none; margin: 0; padding: 0; } .venue-stats-list li { padding: 6px 0; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .venue-stats-list li:last-child { border-bottom: none; } /* --- Lore ------------------------------------------------------------- */ .lore-nickname { color: var(--fg-muted); font-style: italic; font-weight: 500; margin-left: 8px; } .lore-bio { margin-top: 8px; color: var(--fg); max-width: 720px; line-height: 1.5; } .lore-tags { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 4px; } .lore-tags .event-chip { margin-left: 0; } /* --- Narrative paragraphs (event preview / recap) -------------------- */ .event-narrative { margin-top: 12px; max-width: 720px; line-height: 1.5; } .event-narrative p { margin: 0 0 6px; color: var(--fg); } .event-narrative p:last-child { margin-bottom: 0; } /* --- Standings table -------------------------------------------------- */ .standings-table { width: 100%; border-collapse: collapse; margin-top: 12px; } .standings-table thead th { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--fg-muted); } .standings-table th.num, .standings-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .standings-table tbody td { padding: 8px 10px; border-bottom: 1px solid var(--border); } @media (hover: hover) { .standings-table tbody tr:hover { background: var(--bg-elev-2); } } .standings-table .rank { width: 36px; color: var(--fg-muted); font-variant-numeric: tabular-nums; } .standings-table .name a { color: var(--fg); text-decoration: none; } @media (hover: hover) { .standings-table .name a:hover { color: var(--accent); } } .standings-table .streak { width: 56px; text-align: right; } /* --- Wagering: markets, price ladders, betslip --------------------------- */ .wagering { margin-top: 12px; } .wager-controls { display: flex; align-items: center; gap: 6px; } .wager-toggle { background: var(--bg-elev-2); color: var(--fg-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; padding: 4px 10px; cursor: pointer; } .wager-toggle.is-active { background: var(--accent); color: #000; border-color: var(--accent); } .wager-closed { background: var(--bg-elev-2); padding: 8px 10px; border-radius: var(--radius-sm); margin-bottom: 12px; } /* Each market is its own card — Winner, Place(3), etc. each render in their own bordered panel. No outer "Markets" wrapper. */ .wager-market { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; margin-bottom: 12px; } /* Mini variant: the same wager-table embedded inside an event-row-card on listing pages. The outer card already supplies bg + border + padding, so we strip them here and tighten vertical spacing. */ .wager-market-mini { background: transparent; border: none; padding: 0; margin: 8px 0 0; } .wager-market-mini .wager-market-head { margin-bottom: 4px; } .wager-market-mini .wager-market-head h3 { font-size: 12px; } .wager-market-mini .wager-table { background: transparent; } .wager-market-mini .wager-table tbody td { height: 32px; } .wager-market-mini .wager-table thead th { height: 18px; } /* Mini variant sits flush against the card's content edge — drop the 10px runner-col indent so the swatches line up with the event time and the "Winner" header above. */ .wager-market-mini .wager-table .runner-col { padding-left: 0; } .wager-market-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .wager-market-head h3 { margin: 0; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; } .wager-status { font-size: 10px; text-transform: uppercase; letter-spacing: 0.6px; padding: 2px 6px; border-radius: var(--radius-sm); background: var(--bg-elev-2); color: var(--fg-muted); border: 1px solid var(--border); font-weight: 600; } .wager-status-open { color: var(--accent); border-color: var(--accent); } .wager-status-closed, .wager-status-suspended { color: var(--fg-muted); } .wager-status-settled { color: var(--fg-muted); } .wager-table-wrap { overflow-x: auto; } .wager-table { width: 100%; border-collapse: separate; border-spacing: 0 4px; background: var(--bg-elev); /* table-layout: auto — lets the fixed-width price cells (58px) pin their column, and the runner column claims whatever's left over. border-spacing 0 4px gives 4px vertical gaps between rows; horizontal gaps between price cells are handled per-cell with transparent left-borders (see .price-cell rules below). */ } .wager-table th, .wager-table td { padding: 0; text-align: center; vertical-align: middle; } .wager-table tbody td { height: 40px; /* fixed row height — same on all platforms */ box-sizing: border-box; } /* Markets where the user has bets gain two extra lines under the runner name (matched / unmatched P&L), so each row needs more vertical room. Toggled by wagering.js on the per-market . */ .wager-table.has-pnl tbody td { height: 64px; } .wager-table thead th { height: 24px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--fg-muted); font-weight: 600; } .wager-table .runner-col { text-align: left; padding-left: 10px; display: flex; align-items: center; gap: 6px; } .wager-table .runner-col .runner-slot { min-width: 1.6em; color: var(--fg-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; } /* Name (+ optional jockey) live in a flex-column so the silk swatch stays vertically centered against the *block* of text. */ .wager-table .runner-col .runner-labels { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .wager-table .runner-col .runner-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; } .wager-table .runner-col .runner-jockey { color: var(--fg-muted); font-size: 11px; font-weight: 400; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Per-runner "if this runner wins" P&L tags. Matched portion is fully opaque; the unmatched-projection sibling is dimmed and carries a *. Green for projected profit, red for projected loss. */ .wager-table .runner-col .runner-pnl { display: flex; flex-direction: row; gap: 6px; line-height: 1.2; font-size: 11px; font-variant-numeric: tabular-nums; overflow: hidden; } .runner-pnl-line { white-space: nowrap; } .runner-pnl-profit { color: #6fbf73; } .runner-pnl-loss { color: #e07b6c; } .runner-pnl-unmatched { opacity: 0.55; } .wager-runner-chip { flex: 0 0 auto; font-size: 10px; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--bg-elev-2); border: 1px solid var(--border); color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.5px; } .wager-runner-chip.is-won { color: var(--accent); border-color: var(--accent); } .wager-runner-chip.is-lost { color: var(--fg-muted); } .wager-runner-chip.is-withdrawn { color: var(--fg-muted); } .wager-table tr.is-withdrawn { opacity: 0.55; } .wager-table th.back-col { color: #6fbf73; } .wager-table th.lay-col { color: #e07b6c; } /* Mirror the body's 4px back→lay gap on the header so column groups line up. The thead has no explicit widths so this just nudges the "Lay" label 4px to the right, matching the body. */ .wager-table thead th.back-col + th.lay-col { border-left: 4px solid transparent; background-clip: padding-box; } /* Price cells are split into two layers: - the
.price-cell owns the column slot and the horizontal gap between blocks (transparent border-left between siblings) - the inner
.price-button owns the visible 58x40 button: bg color, rounded corners, hover/empty/locked states Button size is locked across all viewports — it never shrinks on mobile. */ .price-cell { padding: 0; box-sizing: content-box; width: 58px; } /* Horizontal gaps between price cells. The cell render order per row is [back-N … back-1, lay-1 … lay-N], so: - .back-cell + .back-cell / .lay-cell + .lay-cell → 2px (same side) - .back-cell + .lay-cell → 4px (block boundary) `border-left: solid transparent` + content-box keeps the 58px visible button width intact. */ .price-cell.back-cell + .price-cell.back-cell, .price-cell.lay-cell + .price-cell.lay-cell { border-left: 2px solid transparent; } .price-cell.back-cell + .price-cell.lay-cell { border-left: 4px solid transparent; } .price-button { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; width: 58px; height: 40px; border-radius: 2px; box-sizing: border-box; } .price-button .price-odds { display: block; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; } .price-button .price-avail { display: block; font-size: 10px; color: var(--fg-muted); font-variant-numeric: tabular-nums; } /* Colors come from the parent td class so the +sibling selectors above (which need .back-cell / .lay-cell on the td) keep working. */ .price-cell.back-cell > .price-button { background-color: rgba(111, 191, 115, 0.10); } .price-cell.lay-cell > .price-button { background-color: rgba(224, 123, 108, 0.10); } .price-cell.back-cell > .price-button.is-best { background-color: rgba(111, 191, 115, 0.22); } .price-cell.lay-cell > .price-button.is-best { background-color: rgba(224, 123, 108, 0.22); } .price-button.is-clickable { cursor: pointer; transition: background-color 0.1s; } @media (hover: hover) { .price-cell.back-cell > .price-button.is-clickable:hover { background-color: rgba(111, 191, 115, 0.35); } } @media (hover: hover) { .price-cell.lay-cell > .price-button.is-clickable:hover { background-color: rgba(224, 123, 108, 0.35); } } .price-button.is-empty .price-empty { color: var(--fg-muted); font-weight: 600; } .price-button.is-locked { cursor: not-allowed; opacity: 0.6; } /* My bets list */ .wagering-my-bets { margin-top: 16px; } .wagering-my-bets h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--fg-muted); } .my-bets-list { list-style: none; padding: 0; margin: 0; } .my-bet-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 8px; margin-bottom: 4px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13px; } .my-bet-side { font-size: 10px; font-weight: 700; letter-spacing: 0.5px; padding: 1px 6px; border-radius: var(--radius-sm); } .my-bet-back .my-bet-side { background: rgba(111, 191, 115, 0.22); color: #6fbf73; } .my-bet-lay .my-bet-side { background: rgba(224, 123, 108, 0.22); color: #e07b6c; } .my-bet-runner { font-weight: 600; } .my-bet-odds { font-variant-numeric: tabular-nums; font-weight: 600; } .my-bet-stake { font-variant-numeric: tabular-nums; } .my-bet-meta { font-size: 11px; margin-left: 4px; } .my-bet-cancel { margin-left: auto; background: transparent; border: 1px solid var(--border); color: var(--fg-muted); cursor: pointer; border-radius: var(--radius-sm); padding: 2px 8px; font: inherit; font-size: 12px; } @media (hover: hover) { .my-bet-cancel:hover { color: var(--fg); border-color: var(--fg-muted); } } .my-bet-cancel:disabled { opacity: 0.5; cursor: wait; } /* Betslip drawer ---------------------------------------------------------- */ .betslip { position: fixed; top: 0; right: 0; bottom: 0; width: 360px; max-width: 92vw; background: var(--bg-elev); border-left: 1px solid var(--border); transform: translateX(100%); transition: transform 0.18s ease-out; z-index: 60; overflow-y: auto; box-shadow: -12px 0 30px rgba(0,0,0,0.25); } .betslip.is-open { transform: translateX(0); } .betslip-card { padding: 18px; } .betslip-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .betslip-head h3 { margin: 0; font-size: 15px; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; } .betslip-side-back, .betslip-side-lay { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-sm); letter-spacing: 0.6px; text-transform: uppercase; } .betslip-side-back { background: rgba(111, 191, 115, 0.22); color: #6fbf73; } .betslip-side-lay { background: rgba(224, 123, 108, 0.22); color: #e07b6c; } .betslip-close { background: transparent; border: none; color: var(--fg-muted); font-size: 26px; line-height: 1; cursor: pointer; padding: 0 4px; } @media (hover: hover) { .betslip-close:hover { color: var(--fg); } } .betslip-context, .betslip-explain { margin: 4px 0 0; font-size: 12px; } .betslip-fields { /* minmax(0, 1fr) instead of plain 1fr — the default 1fr resolves to minmax(auto, 1fr), and an 's "auto" minimum is its native width (~150px in Chromium). With two of those side by side the grid can't honour 50/50 in a 360px drawer and one column collapses to invisible. minmax(0, …) explicitly lets columns shrink. */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 14px; } .betslip-fields label { display: flex; flex-direction: column; gap: 4px; min-width: 0; font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.5px; } .betslip-fields input { background: var(--bg); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; font-variant-numeric: tabular-nums; font-size: 15px; font-weight: 600; /* Inputs don't shrink below their native width by default; force them to fill the (now actually-1fr) grid track. */ width: 100%; min-width: 0; box-sizing: border-box; } .betslip-fields input:focus { outline: 1px solid var(--accent); border-color: var(--accent); } .betslip-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; } .betslip-chip { background: var(--bg-elev-2); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 10px; font: inherit; font-size: 12px; cursor: pointer; } @media (hover: hover) { .betslip-chip:hover { border-color: var(--accent); } } .betslip-summary { margin: 14px 0 0; padding: 10px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius-sm); /* Same minmax(0, 1fr) treatment as .betslip-fields — without it, the dt+dd flex pair's min-content forces the column wider than 1fr and the left column gets pushed off-screen on a 360px drawer. */ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; } .betslip-summary div { display: flex; justify-content: space-between; gap: 8px; min-width: 0; } .betslip-summary dt { margin: 0; font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.5px; } .betslip-summary dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; } .betslip-summary .betslip-payout { color: var(--accent); } .betslip-error { margin-top: 10px; padding: 8px 10px; background: rgba(224, 123, 108, 0.15); border: 1px solid #e07b6c; border-radius: var(--radius-sm); color: #e07b6c; font-size: 12px; } .betslip-actions { margin-top: 14px; display: flex; } .betslip-place { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 0.6px; color: #000; } .betslip-place.btn-back { background: #6fbf73; border-color: #6fbf73; } .betslip-place.btn-lay { background: #e07b6c; border-color: #e07b6c; } @media (hover: hover) { .betslip-place:hover { filter: brightness(1.08); } } .betslip-place:disabled { opacity: 0.6; cursor: wait; } @media (max-width: 720px) { .betslip { width: 100%; max-width: 100%; } /* Tighter spacing on phones — the price cells stay at their fixed 58×40 size, but everything around them squeezes in. The mini variant keeps its own padding/margin (re-asserted here so the 8px below doesn't leak in via source order). */ .wager-market { padding: 8px; margin-bottom: 8px; } .wager-market-mini { padding: 0; margin: 8px 0 0; } .wager-market-head { margin-bottom: 4px; gap: 8px; } /* Keep vertical padding at 0 — the row height is locked to 40px and extra vertical padding would push it past that. */ .wager-table th, .wager-table td { padding: 0 2px; } .wager-table .runner-col { padding-left: 2px; gap: 4px; } .wager-runner-chip { font-size: 9px; padding: 1px 4px; } } /* Phone-width drawer: the betslip becomes full-width below 720px (see the .betslip override above), but on very narrow viewports the two summary cells still feel cramped. Tighten chip spacing and padding so all five denominations + every field stay one tap apart. */ @media (max-width: 380px) { .betslip-card { padding: 14px; } .betslip-chips { gap: 4px; } .betslip-chip { padding: 4px 8px; font-size: 11px; } } /* Narrow viewports: depth is forced to 1 in wagering.js (effectiveDepth) and the 1/3 toggle is hidden. Runner column width is handled by table-layout: auto so no width override is needed here. Keep the breakpoint in sync with NARROW_MQ in wagering.js. */ @media (max-width: 600px) { .wager-controls { display: none; } } /* Very narrow phones: shrink the price button so the runner name doesn't get crushed (1 back + 1 lay = ~120px chrome at depth=1, leaving only ~200px for the name on a 320px viewport). 48×40 keeps the odds + avail block legible while reclaiming ~20px of horizontal space. */ @media (max-width: 480px) { .price-cell { width: 48px; } .price-button { width: 48px; } .price-button .price-odds { font-size: 12px; } .price-button .price-avail { font-size: 9px; } .wager-table .runner-col { padding-left: 4px; gap: 4px; } } /* --- Verifier page ------------------------------------------------------- */ .verify-status { border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-elev); padding: 16px 20px; margin-bottom: 16px; } .verify-status h2 { margin: 0 0 4px; font-size: 18px; } .verify-status[data-state="ok"] { border-color: #6fbf73; } .verify-status[data-state="ok"] h2 { color: #6fbf73; } .verify-status[data-state="fail"] { border-color: #e07b6c; } .verify-status[data-state="fail"] h2 { color: #e07b6c; } .verify-status[data-state="pending"] h2, .verify-status[data-state="error"] h2 { color: var(--fg-muted); } .verify-card { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 12px; } .verify-card h3 { margin: 0 0 6px; font-size: 14px; } .verify-hash { margin: 0; padding: 8px 10px; background: var(--bg-elev-2); border-radius: var(--radius-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; overflow-x: auto; word-break: break-all; white-space: pre-wrap; } .verify-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; margin: 0 0 10px; font-size: 13px; } .verify-meta dt { color: var(--fg-muted); } .verify-meta dd { margin: 0; font-variant-numeric: tabular-nums; } .verify-details { margin-top: 10px; } .verify-details > summary { cursor: pointer; color: var(--fg-muted); font-size: 13px; } .verify-json { margin: 10px 0 0; padding: 10px; background: var(--bg-elev-2); border-radius: var(--radius-sm); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; max-height: 320px; overflow: auto; } /* NASCAR lap counter — DOM overlay positioned inside .track-wrapper, per the CLAUDE.md rule that HUD lives off-canvas. Hidden by default; the renderer reveals it on snapshots where lap_count > 1. */ .nascar-lap-hud { position: absolute; top: 12px; right: 12px; background: rgba(0,0,0,0.65); color: #f5f5f5; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; padding: 6px 12px; border-radius: var(--radius-sm); pointer-events: none; z-index: 3; letter-spacing: 0.5px; } /* Replay canvas + controls on the verify page. The canvas shell reuses .race / .track-wrapper styling; .replay-controls is a thin button row. */ .verify-replay { margin: 0 0 20px; } .replay-controls { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); background: var(--bg-elev); border-radius: var(--radius-sm); margin: 10px 0 0; } .replay-btn { background: var(--bg-elev-2); color: var(--fg); border: 1px solid var(--border); padding: 6px 12px; border-radius: var(--radius-sm); font-size: 13px; cursor: pointer; } .replay-btn:hover { border-color: var(--accent); color: var(--accent); } .replay-progress { margin-left: auto; font-variant-numeric: tabular-nums; } /* --- Auth: topbar widget + auth pages ----------------------------------- */ .topbar-account { display: flex; align-items: center; gap: 8px; } .topbar-account[data-state="loading"] { visibility: hidden; } .topbar-account a, .topbar-account button { color: var(--fg-muted); background: transparent; border: 0; cursor: pointer; font: inherit; text-decoration: none; padding: 0; } @media (hover: hover) { .topbar-account a:hover, .topbar-account button:hover { color: var(--accent); } } .topbar-account-cta { color: var(--accent) !important; } .topbar-account-menu { position: relative; } .topbar-account-menu > summary { list-style: none; cursor: pointer; color: var(--fg); padding: 4px 8px; border-radius: var(--radius-sm); } .topbar-account-menu > summary::-webkit-details-marker { display: none; } .topbar-account-menu[open] > summary { background: var(--bg-elev-2); } .topbar-account-panel { position: absolute; right: 0; top: calc(100% + 6px); background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; min-width: 160px; display: flex; flex-direction: column; gap: 8px; z-index: 40; box-shadow: 0 4px 16px rgba(0,0,0,0.18); } .topbar-account-panel .small { font-size: 11px; } .topbar-account-panel a, .topbar-account-panel button { text-align: left; color: var(--fg); } .auth-shell { max-width: 460px; margin: 32px auto; padding: 0 20px; } .auth-shell h1 { margin-top: 0; } .auth-shell h2 { font-size: 16px; margin: 0 0 12px; } .auth-form { display: flex; flex-direction: column; gap: 12px; background: var(--bg-elev); padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); } .auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .auth-form label span { color: var(--fg-muted); } .auth-form label small { color: var(--fg-muted); font-size: 11px; } .auth-form input { background: var(--bg-elev-2); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; } .auth-form input:focus, .auth-form select:focus { outline: 2px solid var(--accent); outline-offset: -2px; } .auth-form select { background: var(--bg-elev-2); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font: inherit; } .auth-form button { background: var(--accent); color: var(--bg); border: 0; border-radius: var(--radius-sm); padding: 10px 14px; cursor: pointer; font: inherit; font-weight: 600; } @media (hover: hover) { .auth-form button:hover { filter: brightness(1.05); } } .auth-form button.danger { background: var(--accent-2, #c44); } .auth-error { background: rgba(220, 60, 60, 0.12); color: #f08080; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; } .auth-success { background: rgba(60, 180, 90, 0.12); color: #6fd28a; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; } .auth-notice { background: rgba(255, 183, 3, 0.12); color: var(--accent); padding: 10px 12px; border: 1px solid var(--accent); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; margin-bottom: 14px; } .auth-foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: 6px; } .auth-foot p { margin: 0; font-size: 14px; } .auth-foot a { color: var(--accent); text-decoration: none; font-weight: 600; } @media (hover: hover) { .auth-foot a:hover { text-decoration: underline; } } .auth-foot-aside { font-size: 12px; } .auth-foot-aside a { color: var(--fg-muted); font-weight: 400; } .account-card { margin: 18px 0; } .account-card.danger h2 { color: var(--accent-2, #c44); } /* --- Account dashboard ------------------------------------------------ */ /* Override the narrow auth-shell width — the dashboard needs the room. */ .account-shell { max-width: 1040px; } .account-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 18px; } .account-greeting { font-size: 18px; font-weight: 700; } .account-meta { font-size: 12px; margin-top: 2px; } .account-wallet-pill { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 14px; background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: 999px; font-variant-numeric: tabular-nums; } [data-theme="pixel"] .account-wallet-pill { border-radius: 0; } .account-wallet-pill strong { font-size: 18px; color: var(--accent); } .account-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; } .account-nav { display: flex; flex-direction: column; gap: 4px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; position: sticky; top: 64px; } .account-nav button { text-align: left; background: transparent; color: var(--fg); border: 0; border-radius: var(--radius-sm); padding: 8px 10px; cursor: pointer; font: inherit; font-size: 13px; } @media (hover: hover) { .account-nav button:hover { background: var(--bg-elev-2); } } .account-nav button.is-active { background: var(--accent); color: var(--bg); font-weight: 600; } .account-nav-sep { height: 1px; background: var(--border); margin: 6px 4px; } .account-content { min-width: 0; } .account-pane { display: none; } .account-pane.is-active { display: block; } .account-pane > h2 { margin: 0 0 4px; font-size: 18px; } .account-pane > h2 + p.muted { margin: 0 0 14px; font-size: 13px; } .account-pane .auth-form { margin-bottom: 14px; } .account-pane .auth-form h3.danger-head { margin: 0; color: var(--accent-2, #c44); font-size: 14px; } .account-pane .auth-form-danger { border-color: var(--accent-2, #c44); } .account-pane .auth-form .auth-form-confirm { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed var(--accent-2, #c44); border-radius: var(--radius-sm); background: rgba(220, 60, 60, 0.08); font-size: 13px; } .account-pane .auth-form .auth-form-confirm strong { color: var(--accent-2, #c44); } .account-pane .auth-form .auth-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .account-pane .auth-form .auth-form-row button { padding: 8px 12px; } .account-pane .auth-form .auth-form-row button.secondary { background: var(--bg-elev-2); color: var(--fg); border: 1px solid var(--border); } .account-pane .auth-form .form-note { font-size: 12px; color: var(--fg-muted); } .account-pane .auth-form .form-note.is-ok { color: var(--accent); } .account-card-block { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; } .account-card-block h3 { margin: 0 0 4px; font-size: 14px; } .account-card-block h3 + p.muted { margin: 0 0 12px; font-size: 13px; } /* Theme picker swatches */ .theme-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .theme-swatch { background: var(--bg-elev-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; font: inherit; color: var(--fg); display: flex; flex-direction: column; gap: 8px; text-align: left; } @media (hover: hover) { .theme-swatch:hover { border-color: var(--accent); } } .theme-swatch.is-active { border-color: var(--accent); outline: 2px solid var(--accent); outline-offset: -2px; } .theme-swatch-name { font-weight: 600; font-size: 13px; } .theme-swatch-preview { display: flex; gap: 4px; } .theme-swatch-preview > span { flex: 1; height: 22px; border-radius: var(--radius-sm); border: 1px solid rgba(0, 0, 0, 0.25); } [data-theme="pixel"] .theme-swatch-preview > span { border-radius: 0; } /* Bet rows (used by unmatched / matched / settled lists) */ .bet-list, .txn-list { display: flex; flex-direction: column; gap: 8px; } .bet-row, .txn-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--radius); } .bet-left, .txn-left { min-width: 0; flex: 1; } .bet-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; margin-bottom: 2px; } .bet-market { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bet-runner { font-size: 13px; } .bet-meta { font-size: 11px; margin-top: 2px; } .bet-side { display: inline-block; padding: 2px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; } .bet-side-back { background: rgba(111, 191, 115, 0.22); color: #6fbf73; } .bet-side-lay { background: rgba(224, 123, 108, 0.22); color: #e07b6c; } .bet-right { text-align: right; font-variant-numeric: tabular-nums; flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; align-items: flex-end; } .bet-stake { font-size: 13px; font-weight: 600; } .bet-line { font-size: 11px; } .bet-pnl { font-size: 14px; font-weight: 700; } .bet-cancel { margin-top: 4px; background: transparent; color: var(--fg-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 10px; cursor: pointer; font: inherit; font-size: 11px; } .bet-cancel:disabled { cursor: not-allowed; opacity: 0.6; } .pnl-pos { color: #6fbf73; } .pnl-neg { color: #e07b6c; } .bet-summary { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .summary-pill { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 999px; font-variant-numeric: tabular-nums; font-size: 12px; } [data-theme="pixel"] .summary-pill { border-radius: 0; } .summary-pill strong { font-size: 14px; } /* Wallet transactions */ .txn-head { display: flex; align-items: center; gap: 10px; font-size: 12px; } .txn-kind { text-transform: uppercase; letter-spacing: 0.5px; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; background: var(--bg-elev-2); color: var(--fg-muted); } .txn-note { font-size: 13px; margin-top: 2px; } .txn-meta { font-size: 11px; margin-top: 2px; } .txn-amount { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; flex: 0 0 auto; } .empty { padding: 14px; text-align: center; font-size: 13px; } @media (max-width: 760px) { .account-layout { grid-template-columns: 1fr; } .account-nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 6px; } .account-nav-sep { display: none; } .account-header { flex-direction: column; align-items: flex-start; } .bet-row, .txn-row { flex-wrap: wrap; } .bet-right { align-items: flex-start; text-align: left; } } /* --- Footer secondary links (legal / contact / responsible gambling) ----- */ .footer { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; } .footer-links { font-size: 12px; } @media (hover: hover) { .footer-links a:hover { color: var(--accent); } } /* --- Static info / legal pages (contact, privacy, terms, etc.) ----------- */ .legal-page { max-width: 720px; } .legal-page h1 { margin: 0 0 6px; } .legal-page h2 { margin: 24px 0 8px; font-size: 16px; } .legal-page h3 { margin: 16px 0 6px; font-size: 14px; } .legal-page p { margin: 8px 0; } .legal-page ul { margin: 8px 0 16px; padding-left: 22px; } .legal-page li { margin: 4px 0; } .legal-page a { color: var(--accent); } @media (hover: hover) { .legal-page a:hover { text-decoration: underline; } } /* --- Welcome disclaimer overlay ----------------------------------------- * * Server-rendered into base.html on every page except /live*. Hidden until * a tiny inline script confirms localStorage hasn't seen an acknowledgement * and the page isn't in ?embed=canvas mode. Dismissing it writes the ack * key; clearing site data restores the popup. CSS keeps it themable via the * usual variables. */ .disclaimer-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(2px); } .disclaimer-overlay[hidden] { display: none; } body.disclaimer-open { overflow: hidden; } .disclaimer-panel { background: var(--bg-elev); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 22px 18px; max-width: 520px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); } .disclaimer-panel h2 { margin: 0 0 10px; font-size: 18px; color: var(--accent); } .disclaimer-panel p { margin: 8px 0; } .disclaimer-links { list-style: none; margin: 6px 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; } .disclaimer-links a { color: var(--accent); } @media (hover: hover) { .disclaimer-links a:hover { text-decoration: underline; } } .disclaimer-cookies { font-size: 12px; margin-top: 12px; } .disclaimer-actions { margin-top: 14px; display: flex; justify-content: flex-end; } .disclaimer-accept { background: var(--accent); color: #1a1d22; border: 1px solid var(--accent); padding: 8px 18px; font: inherit; font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; } @media (hover: hover) { .disclaimer-accept:hover { background: var(--accent-2); border-color: var(--accent-2); } } [data-theme="pixel"] .disclaimer-accept { color: #1a1c2c; } /* ─── SPA shell ─────────────────────────────────────────────────────── */ .app-loading { min-height: 40vh; display: flex; align-items: center; justify-content: center; } .app-shell-skeleton { display: flex; flex-direction: column; align-items: center; gap: 14px; color: var(--fg-muted); } .skeleton-spinner { width: 32px; height: 32px; border: 3px solid rgba(255, 255, 255, 0.18); border-top-color: var(--accent); border-radius: 50%; animation: app-shell-spin 0.9s linear infinite; } @keyframes app-shell-spin { to { transform: rotate(360deg); } } .app-reload-toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 50; background: var(--bg-elev-2); color: var(--fg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 16px; box-shadow: 0 8px 20px rgba(0,0,0,0.35); display: flex; align-items: center; gap: 12px; font-size: 13px; } .app-reload-toast button { background: none; border: 0; padding: 0; color: var(--accent); cursor: pointer; font: inherit; } .app-reload-toast button:hover { text-decoration: underline; }