@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* LuchSports player UI — mobile-first, token-driven. The shell injects the active skin's light + dark token sets (see player/themes.ts); this file references them only via var(--lux-*), so the same stylesheet renders correctly in light OR dark. The :root block below is a safe fallback (light). */ :root { --lux-bg:#f8fafc; --lux-surface:#fff; --lux-surface-2:#eceff3; --lux-text:#0e1620; --lux-muted:#5a6675; --lux-border:rgba(14,22,32,.12); --lux-hover:rgba(14,22,32,.05); --lux-primary:#1ba23d; --lux-on-primary:#fff; --lux-accent:#15913a; --lux-on-accent:#fff; --lux-pick:#e6f6ea; --lux-success:#137a37; --lux-danger:#c62828; --lux-warning:#9a6a00; --lux-gold:#b8860b; --lux-shadow:0 2px 14px rgba(20,30,50,.10); --lux-radius:10px; --lux-radius-sm:6px; --lux-radius-lg:18px; --lux-font:"Inter","Segoe UI",Roboto,Arial,sans-serif; } * { box-sizing: border-box; touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* manipulation = no double-tap zoom; transparent = no Android blue tap flash */ html { -webkit-text-size-adjust: 100%; } input, textarea, [contenteditable="true"] { -webkit-user-select: text; user-select: text; } /* form fields stay selectable/editable even though the page disables selection */ /* `:host` joins `body` so the embedded widget (no in its shadow root) gets the app font, background and colour instead of inheriting the operator page's typography. Inert in direct mode. */ body, :host { margin: 0; font-family: var(--lux-font); background: var(--lux-bg); color: var(--lux-text); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; overflow-x: clip; /* never let the page scroll sideways (carousels/strips clip to the screen). clip (not hidden) keeps sticky headers working */ touch-action: pan-x pan-y; /* app-like: scrolling only — blocks pinch-zoom + double-tap-zoom (so the page can't be dragged/offset); both pan axes kept so the inner horizontal scrollers still work */ overscroll-behavior: none; /* no rubber-band / scroll-chaining drag at the edges */ -webkit-user-select: none; user-select: none; /* app-like: no text highlighting on taps/swipes (inputs re-enabled above) */ } :host { display: block; } /* custom elements default to inline; the widget is a block container */ a { color: var(--lux-primary); text-decoration: none; } button { font-family: inherit; } .lux-wrap { max-width: 720px; margin: 0 auto; padding: 0 14px calc(18px + env(safe-area-inset-bottom)); } /* ── Topbar ─────────────────────────────────────────────────── */ .lux-topbar { position: sticky; top: 0; z-index: 100; background: var(--lux-surface); border-bottom: 1px solid var(--lux-border); backdrop-filter: saturate(1.4); } .lux-topbar__in { display: flex; align-items: center; justify-content: space-between; height: 56px; } .lux-brand { font-weight: 800; font-size: 1.15rem; color: var(--lux-primary); letter-spacing: -.3px; } .lux-topbar__right { display: flex; align-items: center; gap: 6px; } .lux-icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; border-radius: 999px; background: transparent; border: 1px solid var(--lux-border); color: var(--lux-text); font-size: 1.05rem; cursor: pointer; transition: background .15s, border-color .15s; } .lux-icon-btn:hover { background: var(--lux-hover); } .lux-icon-btn:active { transform: scale(.94); } /* ── Language picker ────────────────────────────────────────── */ .lux-langs { display: inline-flex; gap: 2px; background: var(--lux-surface-2); border-radius: 999px; padding: 3px; } .lux-lang { font-size: .78rem; font-weight: 600; color: var(--lux-muted); padding: 4px 9px; border-radius: 999px; line-height: 1; } .lux-lang.is-active { background: var(--lux-surface); color: var(--lux-primary); box-shadow: var(--lux-shadow); } /* ── Bottom tab bar ─────────────────────────────────────────── */ .lux-tabs { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; background: var(--lux-surface); border-top: 1px solid var(--lux-border); padding-bottom: env(safe-area-inset-bottom); } .lux-tabs__in { display: flex; align-items: stretch; height: 58px; max-width: 720px; margin: 0 auto; } .lux-tab { flex: 1; display: flex; align-items: center; justify-content: center; font-size: .8rem; font-weight: 600; color: var(--lux-muted); border-top: 2px solid transparent; transition: color .15s, border-color .15s; } .lux-tab.is-active { color: var(--lux-primary); border-top-color: var(--lux-primary); } .lux-tab:active { background: var(--lux-hover); } /* The HTML `hidden` attribute maps to a LOW-priority UA rule (`[hidden]{display:none}`) that any author `display` (e.g. the flex on .lux-slip / .lux-fab) silently overrides. Restore it with higher specificity so toggling `el.hidden` actually hides these — otherwise an empty slip shows as a blank full-height box. */ .lux-slip[hidden], .lux-fab[hidden], .lux-slip-overlay[hidden], .lux-navdot[hidden] { display: none !important; } /* ── Floating betslip button (round FAB) ───────────────────── */ /* A circle showing the running total odds inside + a count badge outside. Tapping it toggles the slip drawer open/closed (see player.js). */ .lux-fab { position: fixed; right: 16px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 200; width: 64px; height: 64px; padding: 0; border: none; border-radius: 50%; background: var(--lux-primary); color: var(--lux-on-primary); display: flex; align-items: center; justify-content: center; box-shadow: var(--lux-shadow); cursor: grab; touch-action: none; transition: transform .1s; } .lux-fab.is-dragging { cursor: grabbing; transition: none; } .lux-fab:active { transform: scale(.93); } .lux-fab__odds { font-size: .9rem; font-weight: 800; line-height: 1; letter-spacing: -.3px; padding: 0 4px; } /* Empty island → show the bet-slip glyph (🧾) as a WHITE silhouette. Emojis ignore `color`, so render the glyph transparent and paint it with a white text-shadow (a standard monochrome-emoji trick). */ .lux-fab--empty .lux-fab__odds { font-size: 1.5rem; color: transparent; text-shadow: 0 0 0 #fff; padding: 0; } .lux-fab__count { position: absolute; top: -5px; right: -5px; min-width: 23px; height: 23px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: var(--lux-surface); color: var(--lux-text); border: 1px solid var(--lux-border); border-radius: 999px; font-size: .78rem; font-weight: 800; box-shadow: var(--lux-shadow); } /* ── Betslip bottom-sheet ───────────────────────────────────── */ /* Dark overlay behind the sheet (covers the ~1/7 of screen above it); tap to dismiss. */ .lux-slip-overlay { position: fixed; inset: 0; z-index: 240; background: rgba(0, 0, 0, .55); animation: lux-fade .15s ease-out; } @keyframes lux-fade { from { opacity: 0; } to { opacity: 1; } } /* When the sheet is open, lock background scroll. */ .lux-noscroll { overflow: hidden; } /* The sheet: CONTENT height, capped at 4/5 of the viewport (less content → shorter sheet). */ .lux-slip { position: fixed; bottom: 0; left: 0; right: 0; z-index: 250; max-width: 720px; margin: 0 auto; max-height: 80vh; max-height: 80dvh; background: var(--lux-surface); border-radius: var(--lux-radius-lg) var(--lux-radius-lg) 0 0; padding: 0; overflow: hidden; box-shadow: 0 -8px 28px rgba(0, 0, 0, .28); animation: lux-rise .3s cubic-bezier(.22, .8, .36, 1); font-size: .9rem; display: flex; flex-direction: column; /* header (fixed) + scroll (flex) + footer (fixed) */ } @keyframes lux-rise { from { transform: translateY(100%); } to { transform: translateY(0); } } /* rises from the page bottom */ /* Close animation — a smooth slide all the way down to the page bottom (mirror of the rise). */ .lux-slip.is-closing { animation: lux-fall .3s cubic-bezier(.55, 0, .85, .4) forwards; } @keyframes lux-fall { from { transform: translateY(0); } to { transform: translateY(100%); } } .lux-slip-overlay.is-closing { animation: lux-fade-out .23s ease forwards; } @keyframes lux-fade-out { to { opacity: 0; } } /* Middle region scrolls; header and footer stay put so the lower section never jumps. */ .lux-slip__scroll { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 4px; scrollbar-width: none; -ms-overflow-style: none; } .lux-slip__scroll::-webkit-scrollbar { display: none; } .lux-slip__foot { flex: 0 0 auto; padding: 9px 16px calc(7px + env(safe-area-inset-bottom)); border-top: 1px solid var(--lux-border); background: var(--lux-surface); box-shadow: 0 -4px 14px rgba(0, 0, 0, .1); } /* Header: title + clear / settings / close icons. */ .lux-slip__head { flex: 0 0 auto; padding: 11px 14px; display: flex; align-items: center; justify-content: flex-start; background: var(--lux-surface-2); border-bottom: 1px solid var(--lux-border); } .lux-slip__title { font-size: .95rem; font-weight: 600; color: var(--lux-text); text-decoration: none; white-space: nowrap; } .lux-slip__title:hover { text-decoration: underline; } .lux-slip__headbal { margin-left: 18px; font-size: .82rem; font-weight: 700; color: var(--lux-primary); white-space: nowrap; } /* Won/lost dot on a "My Bets" entry point — small light just past the text, raised top-right. */ .lux-navdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: top; margin-left: 4px; margin-top: 1px; } .lux-navdot--won { background: var(--lux-success); } .lux-navdot--lost { background: var(--lux-danger); } .lux-slip__acts { display: flex; align-items: center; gap: 4px; margin-left: auto; } .lux-slip__icon { background: none; border: none; color: var(--lux-muted); cursor: pointer; font-size: 1.05rem; line-height: 1; padding: 6px 8px; border-radius: var(--lux-radius-sm); } .lux-slip__icon:active, .lux-slip__icon.is-on { background: var(--lux-surface); color: var(--lux-text); } .lux-slip__close { font-weight: 700; } /* Accept-odds popover (opened by the gear; replaces the old inline Accept row). */ .lux-slip__settings { margin: 8px 14px 4px; padding: 10px; background: var(--lux-surface-2); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); } .lux-slip__settings-h { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--lux-muted); margin-bottom: 7px; } .lux-acc { display: block; width: 100%; text-align: left; background: var(--lux-surface); color: var(--lux-text); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); padding: 9px 11px; margin-top: 6px; font-size: .88rem; cursor: pointer; } .lux-acc.is-on { background: var(--lux-primary); border-color: var(--lux-primary); color: var(--lux-on-primary); font-weight: 700; } /* Bet-type tabs (segmented) + payout explainer. */ /* Bet-type tabs — folder-tab style 1:1 with the host slip (dark band; ACTIVE = white tab with dark bold text; an unavailable type stays VISIBLE but struck-through, like their "System"). */ .lux-slip__bttabs { display: flex; gap: 3px; background: var(--lux-surface-2); margin: -8px -16px 8px; padding: 6px 6px 0; } .lux-bttab { flex: 1; background: #3a4350; border: none; border-radius: 8px 8px 0 0; color: #fff; font-size: 1.02rem; font-weight: 800; padding: 12px 4px; cursor: pointer; white-space: nowrap; } .lux-bttab.is-active { background: #fff; color: #10151c; } .lux-bttab.is-disabled { color: #9aa4af; text-decoration: line-through; cursor: default; } .lux-slip__explain { margin: 0 0 12px; font-size: .8rem; line-height: 1.4; color: var(--lux-muted); } /* Bet Builder status banner (need-more / pricing / priced / why-unavailable). */ .lux-slip__bbstatus { margin: 0 0 10px; padding: 9px 11px; border-radius: var(--lux-radius-sm); font-size: .84rem; line-height: 1.4; } .lux-slip__bbstatus--info { background: var(--lux-surface-2); color: var(--lux-muted); } .lux-slip__bbstatus--ok { background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .4); color: var(--lux-success); font-weight: 600; } .lux-slip__bbstatus--err { background: rgba(239, 68, 68, .1); border: 1px solid rgba(239, 68, 68, .35); color: var(--lux-danger); } /* Slip legs — a VERTICAL list: stacked rows that scroll up/down with the slip (no side-scrolling). Each row: pick (bold) + odds + remove × on the top line, then the match, then the market (muted). */ .lux-slip__legs { display: flex; flex-direction: column; margin-bottom: 6px; } .lux-slip__leg { position: relative; display: flex; flex-direction: column; gap: 1px; padding: 9px 22px 9px 0; border-bottom: 1px solid var(--lux-border); } .lux-slip__leg:last-child { border-bottom: 0; } .lux-slip__leg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .lux-slip__leg-pick { font-size: 1rem; font-weight: 700; color: var(--lux-text); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lux-slip__leg-ev { font-size: .88rem; color: var(--lux-text); opacity: .85; } /* the GAME (teams) — bumped + brightened for visibility */ .lux-slip__leg-mkt { font-size: .8rem; color: var(--lux-muted); opacity: .9; } /* "LIVE" tag on an in-play selection (bet slip + My Bets leg). Red, with a flashing dot. */ .lux-live-tag { display: inline-flex; align-items: center; gap: 4px; font-size: .6rem; font-weight: 900; letter-spacing: .5px; color: var(--lux-on-primary); background: var(--lux-danger); border-radius: 4px; padding: 1px 5px; vertical-align: middle; } .lux-live-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: lux-livepulse 1.4s ease-in-out infinite; } /* Graded form (My Bets ticket): a live-derived leg keeps its LIVE badge after settlement, but FADED — a desaturated red that reads "this was a live game" without competing with the active-game badge. The dot stops pulsing (the match is over). */ .lux-live-tag--graded { background: color-mix(in srgb, var(--lux-danger) 38%, var(--lux-surface-2)); color: color-mix(in srgb, var(--lux-on-primary) 80%, transparent); } .lux-live-tag--graded::before { animation: none; opacity: .7; } .lux-slip__leg--live { border-left: 2px solid var(--lux-danger); padding-left: 8px; } .lux-slip__leg-odds { color: var(--lux-accent); font-weight: 800; white-space: nowrap; flex: 0 0 auto; } .lux-slip__leg-rm { position: absolute; top: 6px; right: 0; background: none; border: none; color: var(--lux-muted); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 2px 4px; } /* Total odds (left) + Stake input (right) on one line. */ .lux-slip__totalrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 7px; } .lux-slip__totallbl { font-size: .9rem; color: var(--lux-muted); } .lux-slip__totallbl b { color: var(--lux-text); font-size: 1.02rem; } .lux-slip__stakebox { display: flex; align-items: center; gap: 8px; } .lux-slip__stakelbl { font-size: .82rem; color: var(--lux-muted); white-space: nowrap; } .lux-slip__stakebox input { background: var(--lux-surface-2); color: var(--lux-text); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); font-size: .95rem; width: 110px; padding: 7px 12px; text-align: right; } .lux-slip__sum { display: flex; justify-content: space-between; font-size: .9rem; color: var(--lux-muted); margin-top: 4px; } .lux-slip__sum b { color: var(--lux-text); font-size: 1.02rem; } /* Possible-win line — cash-back (amber) on the left; the (green) Possible win always on the right. */ .lux-slip__paygrp { margin-left: auto; color: var(--lux-muted); font-size: .95rem; display: inline-flex; align-items: baseline; gap: 6px; } /* Potential win — large + prominent so it's the clearest number on the slip. */ .lux-slip__paygrp b { color: var(--lux-primary); font-size: 1.55rem; font-weight: 800; line-height: 1.1; } .lux-slip__cashback { align-self: center; color: var(--lux-gold); font-size: .82rem; white-space: nowrap; } .lux-slip__cashback b { color: var(--lux-gold); } /* Acca Boost award — sits on the LEFT of the Possible-win line; green = extra winnings (matches the receipt). */ .lux-slip__boostaward { align-self: center; color: var(--lux-success); font-size: .82rem; font-weight: 600; white-space: nowrap; } .lux-slip__boostaward b { color: var(--lux-success); } .lux-slip__bal2 { margin-top: 3px; font-size: .8rem; color: var(--lux-muted); } .lux-place { display: block; width: 100%; margin-top: 8px; min-height: 48px; background: var(--lux-primary); color: var(--lux-on-primary); border: none; border-radius: var(--lux-radius); padding: 12px; font-size: 1.02rem; font-weight: 700; cursor: pointer; letter-spacing: .2px; transition: filter .15s; } .lux-place:hover { filter: brightness(1.07); } .lux-place:active { filter: brightness(.92); } .lux-place[disabled] { opacity: .5; cursor: not-allowed; filter: none; } .lux-login { color: #fff; font-weight: 800; text-decoration: underline; } /* Placement messages — a floating toast (was inline under the Place button). */ .lux-toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); z-index: 400; transform: translateX(-50%) translateY(-10px); opacity: 0; pointer-events: none; max-width: 92vw; padding: 12px 18px; border-radius: var(--lux-radius); background: var(--lux-text); color: var(--lux-surface); font-size: .9rem; font-weight: 600; text-align: center; box-shadow: 0 8px 28px rgba(0, 0, 0, .32); transition: opacity .2s, transform .2s; } .lux-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* Cheza/1Cut terms — an INLINE callout directly above the offer buttons (with a natural gap below), shown while the option is selected; auto-drops after 8s, × closes it sooner. Gold-tinted (insurance). */ .lux-slip__notice { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 10px; padding: 9px 11px; border-radius: 10px; background: color-mix(in srgb, var(--lux-gold) 13%, var(--lux-surface)); border: 1px solid color-mix(in srgb, var(--lux-gold) 42%, transparent); animation: lux-notice-in .22s ease; } .lux-slip__notice-body { flex: 1; font-size: .8rem; line-height: 1.4; color: var(--lux-text); } .lux-slip__notice-x { flex: none; background: none; border: none; color: var(--lux-muted); font-size: 1.2rem; line-height: 1; opacity: .8; cursor: pointer; padding: 0 2px; } @keyframes lux-notice-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* Share-a-code popup — bottom sheet with the code + social share links. */ .lux-share { position: fixed; inset: 0; z-index: 620; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 12, 20, .55); animation: lux-fade .2s ease-out; } .lux-share.is-closing { animation: lux-fade-out .22s ease forwards; } .lux-share__sheet { position: relative; width: 100%; max-width: 480px; background: var(--lux-surface); border-radius: 18px 18px 0 0; padding: 22px 18px calc(20px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 40px rgba(0, 0, 0, .42); text-align: center; animation: lux-sheet-up .3s cubic-bezier(.2, .9, .3, 1); } @keyframes lux-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .lux-share__x { position: absolute; top: 8px; right: 12px; background: none; border: none; font-size: 1.2rem; color: var(--lux-muted); cursor: pointer; } .lux-share__title { font-size: 1.1rem; font-weight: 800; color: var(--lux-text); } .lux-share__code { display: inline-flex; align-items: baseline; gap: 8px; margin: 12px 0 4px; font-size: 1.5rem; font-weight: 800; letter-spacing: 2px; color: var(--lux-primary); cursor: pointer; } .lux-share__copyhint { font-size: .62rem; font-weight: 700; letter-spacing: .5px; color: var(--lux-muted); text-transform: uppercase; } .lux-share__meta { font-size: .88rem; color: var(--lux-muted); margin-bottom: 18px; } .lux-share__row { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; } .lux-share__ic { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: none; color: #fff; font-size: 1.35rem; font-weight: 800; text-decoration: none; cursor: pointer; } .lux-share__ic--wa { background: #25d366; } .lux-share__ic--tg { background: #2aabee; } .lux-share__ic--x { background: #111; } .lux-share__ic--fb { background: #1877f2; } .lux-share__ic--copy { background: var(--lux-surface-2); color: var(--lux-text); } .lux-share__ic:active { transform: scale(.94); } /* Save slip / Load code segment on the slip (where the Offers used to sit). */ .lux-slip__codes { display: flex; gap: 8px; margin: 10px 0 4px; } .lux-slip__codeload { display: flex; gap: 6px; flex: 1; min-width: 0; } .lux-slip__codeinput { flex: 1; min-width: 0; padding: 9px 11px; border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); background: var(--lux-surface-2); color: var(--lux-text); font-size: .9rem; text-transform: uppercase; letter-spacing: .5px; } .lux-slip__codebtn { flex: none; padding: 9px 14px; border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); background: var(--lux-surface-2); color: var(--lux-text); font-size: .85rem; font-weight: 700; cursor: pointer; white-space: nowrap; } .lux-slip__codebtn:active { transform: scale(.97); } /* (item 1) Muted note shown in place of "Save slip" when the slip has a live leg (can't be saved as a code). */ .lux-slip__codenote { flex: none; margin: 0; align-self: center; max-width: 9.5rem; font-size: .72rem; line-height: 1.25; color: var(--lux-muted); } .lux-toast--ok { background: var(--lux-success); color: #fff; } .lux-toast--err { background: var(--lux-danger); color: #fff; } /* ── Empty bet slip ─────────────────────────────────────────── */ .lux-slip__empty { text-align: center; padding: 44px 16px; color: var(--lux-muted); } .lux-slip__empty-ico { font-size: 2.6rem; } .lux-slip__empty-h { margin: 10px 0 2px; font-size: 1rem; font-weight: 700; color: var(--lux-text); } .lux-slip__empty-sub { margin: 0; font-size: .85rem; } /* ── Inline slip message (just above the fixed footer) ──────── */ .lux-slip__msg { flex: 0 0 auto; margin: 0 16px 8px; padding: 10px 12px; border-radius: var(--lux-radius-sm); font-size: .86rem; font-weight: 600; text-align: center; line-height: 1.3; } .lux-slip__msg--info { background: var(--lux-surface-2); color: var(--lux-muted); } .lux-slip__msg--err { background: var(--lux-danger); color: #fff; } .lux-slip__msg .lux-login { color: #fff; text-decoration: underline; font-weight: 800; } /* Flash the offending game when the Cheza no-hedge warning fires. */ .lux-slip__leg.is-flash { animation: lux-leg-flash 1.1s ease 2; border-radius: 4px; } @keyframes lux-leg-flash { 0%, 100% { background: transparent; } 40% { background: rgba(239, 68, 68, .22); } } /* ── Win celebration overlay + confetti ─────────────────────── */ /* Scoped to its bet card (the parent .lux-bet is position:relative), NOT the whole screen. */ .lux-celebrate { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 8px; overflow: hidden; border-radius: var(--lux-radius); background: rgba(8, 12, 20, .58); animation: lux-fade .2s ease-out; } .lux-celebrate.is-closing { animation: lux-fade-out .22s ease forwards; } .lux-celebrate__box { position: relative; z-index: 2; max-width: 100%; text-align: center; background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: var(--lux-radius); padding: 12px 16px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .4); animation: lux-pop .38s cubic-bezier(.2, 1.35, .4, 1); } @keyframes lux-pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } } .lux-celebrate__emoji { font-size: 1.9rem; line-height: 1; } .lux-celebrate__title { margin: 4px 0 1px; font-family: "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--lux-primary); } .lux-celebrate__sub { margin: 0; font-size: .76rem; color: var(--lux-muted); } .lux-celebrate__amt { margin: 2px 0 10px; font-family: "Comic Sans MS", "Trebuchet MS", system-ui, sans-serif; font-size: 1.65rem; font-weight: 800; color: var(--lux-success); letter-spacing: -.5px; } .lux-celebrate--refund .lux-celebrate__title, .lux-celebrate--refund .lux-celebrate__amt, .lux-celebrate--cashout .lux-celebrate__title, .lux-celebrate--cashout .lux-celebrate__amt { color: var(--lux-gold); } .lux-celebrate__ok { min-width: 104px; padding: 8px 20px; border: none; border-radius: 999px; background: var(--lux-primary); color: var(--lux-on-primary); font-size: .92rem; font-weight: 800; cursor: pointer; } .lux-celebrate__ok:active { transform: scale(.96); } .lux-celebrate__confetti { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .lux-confetti { position: absolute; top: -16px; width: 9px; height: 15px; border-radius: 2px; opacity: .92; animation: lux-confetti-fall linear infinite; } @keyframes lux-confetti-fall { 0% { transform: translateY(-16px) rotate(0); } 100% { transform: translateY(340px) rotate(560deg); } } /* ── Bet-placed receipt popup (Bet ID / stake / possible win / new balance) ── */ .lux-receipt { position: fixed; inset: 0; z-index: 620; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(8, 12, 20, .5); animation: lux-fade .2s ease-out; } .lux-receipt__box { width: 100%; max-width: 330px; background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: 16px; padding: 18px 18px 16px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); animation: lux-pop .34s cubic-bezier(.2, 1.35, .4, 1); } .lux-receipt__head { font-size: 1.05rem; font-weight: 800; color: var(--lux-success); margin-bottom: 11px; } .lux-receipt__rows { display: flex; flex-direction: column; gap: 7px; } .lux-receipt__row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--lux-muted); } .lux-receipt__row b { color: var(--lux-text); font-weight: 700; } .lux-receipt__row--boost b { color: var(--lux-success); } .lux-receipt__row--cheza b { color: var(--lux-gold); } .lux-receipt__hint { margin: 12px 0 14px; font-size: .82rem; color: var(--lux-muted); text-align: center; } .lux-receipt__ok { width: 100%; padding: 11px; border: none; border-radius: 999px; background: var(--lux-primary); color: var(--lux-on-primary); font-size: .95rem; font-weight: 800; cursor: pointer; } .lux-receipt__ok:active { transform: scale(.98); } /* ── League + event catalog ─────────────────────────────────── */ .lux-league { margin-top: 22px; } .lux-league__name { font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .9px; color: var(--lux-muted); padding: 4px 2px 8px; margin-bottom: 8px; border-bottom: 1px solid var(--lux-border); } .lux-event { background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: var(--lux-radius); padding: 14px; margin-bottom: 10px; box-shadow: var(--lux-shadow); } .lux-event__title { display: block; font-weight: 700; font-size: .98rem; color: var(--lux-text); } .lux-event__time { font-size: .78rem; color: var(--lux-muted); } .lux-event-page__header { padding: 18px 4px 12px; } .lux-event-page__title { font-size: 1.3rem; margin: 0 0 4px; } .lux-event-page__time { font-size: .82rem; color: var(--lux-muted); } /* ── Markets + selection buttons ────────────────────────────── */ .lux-market { margin-top: 12px; } .lux-market__name { font-size: .74rem; color: var(--lux-muted); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 7px; } .lux-market__sels, .lux-market .lux-market { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .lux-sel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 52px; padding: 8px 4px; background: var(--lux-odds-bg); border: 1px solid var(--lux-border); border-radius: 3px; color: var(--lux-text); cursor: pointer; transition: background .12s, border-color .12s, transform .08s; } .lux-sel:hover { background: var(--lux-hover); } .lux-sel:active { transform: scale(.97); } .lux-sel.is-on { background: var(--lux-odds-on-bg); border-color: var(--lux-odds-on-bg); color: var(--lux-odds-on-text); } .lux-sel[disabled] { opacity: .4; cursor: not-allowed; pointer-events: none; } .lux-sel__name { font-size: .72rem; color: var(--lux-muted); text-align: center; } .lux-sel.is-on .lux-sel__name { color: var(--lux-odds-on-text); opacity: .8; } .lux-odds, .lux-sel .lux-odds { font-size: .98rem; font-weight: 800; color: var(--lux-odds-text); } .lux-sel.is-on .lux-odds { color: var(--lux-odds-on-text); } /* ── Empty states ───────────────────────────────────────────── */ .lux-empty { text-align: center; padding: 48px 16px; color: var(--lux-muted); font-size: .95rem; } /* ── My-bets cards ──────────────────────────────────────────── */ .lux-bets { padding-top: 14px; } .lux-bet { position: relative; background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: var(--lux-radius); padding: 14px; margin-bottom: 11px; box-shadow: var(--lux-shadow); } /* Thin status stroke — a coloured 1px border around the whole card (green=won, red=lost, amber=cashed/pending, grey=void/rejected, brand=open). The card keeps its neutral surface — only the border + status badge carry the colour, so it's a stroke, not a full-card wash. `--review` is listed last so an under-review open bet reads amber. */ /* OPEN bets (any leg not yet finished) wear a BLUE theme — a blue border + faint blue wash — to signal "still running" at a glance, distinct from the won/lost/void strokes. */ .lux-bet--open { border-color: #2f7bf6; background: rgba(47, 123, 246, .06); } .lux-bet--won { border-color: var(--lux-success); } .lux-bet--lost { border-color: var(--lux-danger); } .lux-bet--void, .lux-bet--rejected { border-color: var(--lux-muted); } .lux-bet--cashed-out, .lux-bet--pending { border-color: var(--lux-warning); } .lux-bet--review { border-color: var(--lux-warning); } .lux-bet__header { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .lux-bet__status { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 3px 9px; border-radius: 999px; background: var(--lux-surface-2); color: var(--lux-muted); } .lux-bet__status--open { color: #2f7bf6; } .lux-bet__status--won { color: var(--lux-success); } .lux-bet__status--lost { color: var(--lux-danger); } .lux-bet__status--pending, .lux-bet__status--cashed-out { color: var(--lux-warning); } .lux-bet__review-badge { font-size: .68rem; font-weight: 700; color: var(--lux-warning); border: 1px solid var(--lux-warning); border-radius: 999px; padding: 2px 8px; } .lux-bet__kind { font-size: .72rem; color: var(--lux-muted); text-transform: capitalize; } .lux-bet__date { font-size: .72rem; color: var(--lux-muted); margin-left: auto; } /* placement date — right group */ .lux-bet__id { font-size: .72rem; color: var(--lux-muted); margin-left: auto; } /* id; when a date precedes it they sit together at the right */ /* Potential win / payout — large + prominent on the card. */ .lux-bet__payout b { font-size: 1.3rem; font-weight: 800; color: var(--lux-primary); } /* One line: Stake + Odds on the left, Payout pushed to the right. */ .lux-bet__body { display: flex; gap: 14px; flex-wrap: nowrap; align-items: baseline; font-size: .88rem; color: var(--lux-muted); margin-bottom: 8px; } .lux-bet__body b { color: var(--lux-text); } .lux-bet__payout { margin-left: auto; white-space: nowrap; } /* Legs displayed exactly like the Code Hub card — ONE leg per row, stacked in COLUMNS of 4 (grid-auto-flow:column → legs 1–4 fill column 1, 5–8 column 2, …). Swipe left/right between columns; a › hint shows when there are >4 legs. Result-coloured left border for at-a-glance scanning. */ .lux-bet__legwrap { position: relative; display: flex; align-items: stretch; margin: 10px 0 2px; border-top: 1px solid var(--lux-border); } .lux-bet__legs { list-style: none; flex: 1; min-width: 0; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--lux-border) transparent; } .lux-bet__legs::-webkit-scrollbar { height: 5px; } .lux-bet__legs::-webkit-scrollbar-thumb { background: var(--lux-border); border-radius: 999px; } .lux-bet__leg { scroll-snap-align: start; box-sizing: border-box; display: flex; flex-direction: column; gap: 2px; padding: 7px 9px; border-bottom: 1px solid var(--lux-border); border-left: 3px solid var(--lux-border); } .lux-bet__leg--won { border-left-color: var(--lux-success); } .lux-bet__leg--lost { border-left-color: var(--lux-danger); } .lux-bet__leg--void { border-left-color: var(--lux-muted); } .lux-bet__leg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .lux-bet__leg-sel { color: var(--lux-text); font-weight: 700; font-size: .84rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lux-bet__leg-context { font-size: .67rem; color: var(--lux-muted); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lux-bet__leg-odds { color: var(--lux-accent); font-weight: 700; white-space: nowrap; flex: none; } .lux-bet__leg-result { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .3px; } .lux-bet__swipehint { flex: none; align-self: center; width: 16px; text-align: center; color: var(--lux-muted); font-size: 1.4rem; line-height: 1; opacity: .55; pointer-events: none; } .lux-bet__leg-result--won { color: var(--lux-success); } .lux-bet__leg-result--lost { color: var(--lux-danger); } .lux-bet__leg-result--void { color: var(--lux-muted); } .lux-bet__leg-result--pending { color: var(--lux-muted); } /* Final score on a settled leg (item 2); clickable match link on an open leg (item 7); live leg accent. */ .lux-bet__leg-score { font-size: .72rem; font-weight: 800; color: var(--lux-text); font-variant-numeric: tabular-nums; } /* (item 4) Live score/time on a live-derived ticket leg — running "h–a · M'" while in play, "FT h–a" once done. A small muted line under the leg context (render-time snapshot; no auto-refresh in this pass). */ .lux-bet__leg-live { font-size: .68rem; font-weight: 800; color: var(--lux-muted); font-variant-numeric: tabular-nums; } .lux-bet__leg-link { color: var(--lux-muted); text-decoration: none; } .lux-bet__leg-link:hover { color: var(--lux-primary); text-decoration: underline; } /* LIVE state must NOT colour the left border — that line is reserved for the leg RESULT (green = won, red = lost); the ● LIVE badge already marks an in-play leg. A pending/live leg keeps the neutral base border, so a WON live leg reads green (was confusingly red because --live overrode --won here). */ /* ── Balance chip ───────────────────────────────────────────── */ .lux-balance { font-size: .82rem; font-weight: 700; color: var(--lux-primary); background: var(--lux-surface-2); border-radius: 999px; padding: 6px 11px; white-space: nowrap; } /* ── Slip: chips / quick-stakes / rows ──────────────────────── */ .lux-slip__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .lux-chip { font-size: .82rem; font-weight: 600; color: var(--lux-text); background: var(--lux-surface-2); border: 1px solid var(--lux-border); border-radius: 999px; padding: 8px 13px; min-height: 36px; cursor: pointer; transition: background .12s, border-color .12s, color .12s, transform .08s; } .lux-chip:active { transform: scale(.96); } .lux-chip.is-on { background: var(--lux-primary); border-color: var(--lux-primary); color: var(--lux-on-primary); } .lux-chip--promo { color: var(--lux-gold); border-color: var(--lux-gold); } /* Offers row — chips sit dimmed until activated, then highlight (bet types + 1Cut + tokens). */ .lux-slip__seclabel { margin-top: 16px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--lux-muted); } .lux-slip__offers { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; } .lux-slip__offers .lux-chip { opacity: .5; } .lux-slip__offers .lux-chip.is-on { opacity: 1; } /* Auto-applied offers — read-only info chips (Cheza Tena / Acca Boost apply server-side when eligible). */ .lux-slip__autos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; } .lux-auto { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border-radius: 999px; border: 1px dashed var(--lux-border); background: var(--lux-surface-2); color: var(--lux-muted); font-size: .84rem; font-weight: 600; } .lux-auto__tag { font-size: .6rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--lux-primary); background: var(--lux-surface); border-radius: 4px; padding: 1px 5px; } .lux-slip__note { margin-top: 7px; font-size: .76rem; color: var(--lux-muted); line-height: 1.35; } /* Cheza Tena terms — shown when the player opts in (selecting = accepting). */ .lux-cheza-terms { background: var(--lux-surface-2); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); padding: 9px 11px; color: var(--lux-text); } /* Acca Boost banner — prominent promo strip at the top of the sheet (mirrors the server's award). */ .lux-slip__boost { margin: 0 -16px 12px; padding: 12px 16px; background: linear-gradient(135deg, var(--lux-primary), var(--lux-accent)); color: var(--lux-on-primary); } .lux-boost__main { font-size: .92rem; font-weight: 600; line-height: 1.3; } .lux-boost__main b { font-weight: 800; } .lux-boost__next { margin-top: 4px; font-size: .82rem; font-weight: 700; } .lux-boost__note { margin-top: 3px; font-size: .72rem; opacity: .85; } .lux-slip__quick { display: flex; gap: 6px; margin-top: 8px; } .lux-slip__quick { margin-top: 8px; } .lux-slip__quick .lux-chip { flex: 1; text-align: center; padding: 10px 0; border-radius: var(--lux-radius); background: var(--lux-surface-2); border-color: transparent; color: var(--lux-muted); font-weight: 700; } .lux-slip__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: .88rem; color: var(--lux-muted); } .lux-slip__row select { background: var(--lux-surface-2); color: var(--lux-text); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); padding: 7px 10px; font-size: .9rem; } .lux-slip__check { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .88rem; color: var(--lux-text); } .lux-slip__check input { width: 18px; height: 18px; } /* ── My-bets sub-tabs (All · Betting Codes) + status filter + card actions ─────────────────────── */ /* TABS, not buttons — a row that reads like the top .lux-htabs strip: the active tab carries the primary-coloured underline indicator. Equal-width so the tabs fill the row; sticky under the topbar. */ .lux-filterbar { display: flex; gap: 0; padding: 4px 0 0; position: sticky; top: calc(var(--ls-sticky-top, 0px) + 56px); background: var(--lux-bg); z-index: 10; border-bottom: 1px solid var(--lux-border); } .lux-filter { flex: 1; text-align: center; font-size: .9rem; font-weight: 700; color: var(--lux-muted); padding: 9px 0 11px; position: relative; background: none; border-radius: 0; } .lux-filter.is-active { color: var(--lux-text); } .lux-filter.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lux-primary); border-radius: 2px; } /* All · Betting Codes bar — match the Leagues/Today/Countries sub-nav exactly (lighter idle, bolder active, 3px underline). */ .lux-filterbar .lux-filter { flex: 1 1 0; font-size: .95rem; font-weight: 600; padding: 9px 4px; } .lux-filterbar .lux-filter.is-active { font-weight: 800; } .lux-filterbar .lux-filter.is-active::after { height: 3px; border-radius: 3px; } /* All-tab status filter — a row of pill chips (All · Won · Lost · Cashed Out · Pending); scrolls horizontally on narrow screens. Each chip reuses .lux-filter but overrides the tab look (no underline, no flex-fill) with a rounded segmented-control pill; the active chip fills with the primary colour. */ .lux-statusfilter { display: flex; gap: 7px; padding: 8px 0 2px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lux-statusfilter::-webkit-scrollbar { display: none; } .lux-filter--status { flex: 0 0 auto; padding: 6px 13px; font-size: .85rem; white-space: nowrap; background: var(--lux-surface-2); border: 1px solid var(--lux-border); border-radius: 999px; color: var(--lux-muted); } .lux-filter--status.is-active { color: var(--lux-on-primary); background: var(--lux-primary); border-color: var(--lux-primary); } .lux-filter--status.is-active::after { content: none; } /* no tab underline on a pill */ .lux-bet__actions { margin-top: 10px; display: flex; gap: 8px; } .lux-cashout { flex: 1; min-height: 42px; border-radius: var(--lux-radius-sm); font-size: .9rem; font-weight: 700; cursor: pointer; border: 1px solid var(--lux-border); background: var(--lux-surface-2); color: var(--lux-text); transition: filter .15s, transform .08s; } .lux-cashout.is-ready { background: var(--lux-primary); color: var(--lux-on-primary); border-color: var(--lux-primary); } .lux-cashout:disabled { opacity: .6; } .lux-cashout:active { transform: scale(.98); } /* ── Home sticky header: search + tab row + market strip + 1/X/2 header pin together as one block ──── */ /* Sticky home header carries the brand GREEN GLOW at the very top (like the reference), fading into the bg. */ /* STATIONARY brand glow: background-attachment:fixed pins this green to the VIEWPORT top, so it doesn't scroll. The title + Top Games slider scroll up THROUGH it; when the nav below pins to the top it reveals the SAME glow (so it reads as one green that lives at the top, not a second green row). */ .lux-home-head { margin: 0 -14px; padding: 0 14px; background: radial-gradient(130% 120px at 50% 0%, rgba(22,160,96,.5) 0%, transparent 72%) fixed no-repeat, var(--lux-bg); } /* Sticky group = Featured|World Cup + search + tab rows as ONE block (req 8). NO green here (removed per user — the green lives only at the title up top). A soft, borderless bottom shadow lifts the whole group off the matches below so they read as distinct while still blending (req 6/7). The shadow lives on this container so it's unaffected when the Leagues sub-row (.lux-subtabs) hides on Live/Upcoming/etc (req 8). */ .lux-home-nav { position: sticky; top: calc(var(--ls-sticky-top, 0px) + var(--wctitle-h, 0px)); z-index: 50; margin: 0 -14px; padding: 0 14px; background: radial-gradient(130% 120px at 50% 0%, rgba(22,160,96,.5) 0%, transparent 72%) fixed no-repeat, var(--lux-bg); box-shadow: 0 11px 20px -14px rgba(0,0,0,.65); } /* SAME fixed glow as the head → when this nav pins to the top it sits on the stationary green (Featured/search are transparent over it); the opaque var(--lux-bg) base hides matches scrolling under */ .lux-home-nav.is-hidden { display: none; } /* chromeless match view */ /* ── Top Games slider (top-games spec §4–5) — after the search bar; horizontal swipe, ~1.1 cards visible. ── */ .lux-tgwrap { margin: 8px 0 4px; } .lux-tgslider { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .lux-tgslider::-webkit-scrollbar { display: none; } .lux-tg { position: relative; scroll-snap-align: start; flex: 0 0 92%; max-width: 380px; background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: 6px; overflow: hidden; } /* wider + halved corner radius */ .lux-tg__head { position: relative; display: flex; align-items: center; gap: 7px; padding: 5px 9px 5px 80px; background: var(--lux-surface-2); } /* relative → the ribbon centers in THIS band; the 80px left pad guarantees it never covers the league name */ .lux-tg__path { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .72rem; color: var(--lux-muted); text-decoration: none; } .lux-tg__stats { flex: none; color: var(--lux-muted); display: inline-flex; } .lux-tg__fix { display: flex; align-items: center; gap: 6px; padding: 7px 9px 6px; text-decoration: none; color: var(--lux-text); } /* shorter */ .lux-tg__team { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .lux-tg__flag { font-size: 1.3rem; line-height: 1; } /* smaller flag → shorter card */ .lux-tg__tname { font-size: .82rem; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lux-tg__center { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 6px; } .lux-tg__time { font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; } .lux-tg__day { font-size: .68rem; color: var(--lux-muted); } /* LIVE tile variant — same slots, live data: the score sits where the kickoff time was (green), the ticking minute where the day chip was (red, advanced by the document-wide clock island). */ .lux-tg__score { color: var(--lux-success); letter-spacing: 1px; white-space: nowrap; } .lux-tg__livemin { color: var(--lux-danger); font-weight: 800; } .lux-tg--live { border-color: color-mix(in srgb, var(--lux-danger) 35%, var(--lux-border)); } .lux-tg__mkt { font-size: .72rem; font-weight: 800; color: var(--lux-primary); margin-top: 2px; } .lux-tg__odds { display: flex; gap: 5px; padding: 0 9px 9px; } /* Odds cells: filled tiles with the selection label LEFT + the odd RIGHT, side by side (per the sample). */ .lux-tg__odds .lux-mrow { flex: 1 1 0; min-width: 0; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; padding: 6px 9px; border-top: 0; background: var(--lux-surface-2); border-radius: 4px; } .lux-tg__odds .lux-mrow__name { flex: none; font-size: .8rem; color: var(--lux-muted); } .lux-tg__odds .lux-mrow__odds { font-size: .92rem; font-weight: 800; color: var(--lux-text); } /* Card badges (§5) — small ribbon tags in the header strip (distinct from .lux-pill, used by selection buttons). */ .lux-tag { flex: none; font-size: .6rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 3px 7px; border-radius: 999px; white-space: nowrap; } /* Top Game = a red ribbon tucked into the top-left corner; the card's overflow:hidden crops its left edge. */ .lux-tag--top { position: absolute; top: 50%; left: -3px; transform: translateY(-50%); z-index: 3; background: #c62828; color: #fff; font-style: italic; font-weight: 800; font-size: .62rem; letter-spacing: .01em; text-transform: none; padding: 3px 13px 3px 10px; border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 0 100%); box-shadow: 1px 1px 2px rgba(0,0,0,.3); } /* toned-down red (was #e21212) — less striking */ /* "Top Game" badge on AI-Assist games in the Highlights meta line — the SAME red angled-ribbon look as the Top Games slides (.lux-tag--top), but inline (not the absolute corner ribbon) so it sits before the league. */ .lux-tag--topm { background: #c62828; color: #fff; font-style: italic; text-transform: none; letter-spacing: .01em; padding: 3px 11px 3px 8px; border-radius: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); } /* AI Assist card — a SINGLE suggested market, no carousel, no glow (req 9/11/12). The brief WRAPS (req 10). */ .lux-ai-brief { margin: 8px 2px 0; font-size: .8rem; font-style: italic; color: var(--lux-muted); line-height: 1.4; } /* wraps — no nowrap/ellipsis */ .lux-aicard { background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); padding: 10px 12px; margin-bottom: 10px; } .lux-aicard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lux-aicard__league { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; color: var(--lux-muted); } .lux-aicard__time { flex: none; font-size: .74rem; font-weight: 700; color: var(--lux-muted); font-variant-numeric: tabular-nums; } /* time sits where the +N market count used to (req 12) */ .lux-aicard__teams { display: flex; align-items: baseline; gap: 8px; padding: 6px 0 9px; text-decoration: none; color: var(--lux-text); } .lux-aicard__tname { font-size: .95rem; font-weight: 700; } .lux-aicard__vs { flex: none; font-size: .78rem; color: var(--lux-muted); } .lux-aicard__mktlabel { display: block; font-size: .74rem; font-weight: 800; color: var(--lux-primary); margin-bottom: 6px; } .lux-aicard__odds { display: flex; gap: 6px; } /* Grey market tiles — copied from the Top Games unselected markets (.lux-tg__odds .lux-mrow), label left + odds right. */ .lux-aicard__odds .lux-mrow, .lux-aicard__odds .lux-mrow--locked { flex: 1 1 0; min-width: 0; min-height: 0; flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; padding: 7px 10px; border-top: 0; background: var(--lux-surface-2); border-radius: 4px; } .lux-aicard__odds .lux-mrow__name { flex: none; font-size: .78rem; color: var(--lux-muted); } .lux-aicard__odds .lux-mrow__odds { font-size: .9rem; font-weight: 800; color: var(--lux-text); } .lux-home-head.is-hidden { display: none; } /* chromeless match view — header hidden while a match panel is open */ .lux-home-head.is-wc-off { display: none; } /* World Cup view — hide the "Football | Top Games" sport bar so only "Football | World Cup" shows */ /* Title-page menu above the search: Football (plain title) · Live · World Cup. No underline, no border — selected = bolder only. */ /* Horizontally scrollable so the brand bar (now Football | World Cup · Jackpots · My Bets) never wraps or clips on a narrow phone — extra tabs just scroll, like the .lux-htabs strip below it. */ .lux-sportbar { display: flex; align-items: baseline; gap: 10px; padding: 12px 2px 4px; } .lux-sportbar__tg { cursor: default; } /* "Top Games" looks like the World Cup tab but isn't clickable */ .lux-tgwrap-outer.is-off { display: none; } /* slider hidden on the World Cup view (it gets its own top games) */ /* ── FIFA World Cup relabel banner ─ "Featured | Top Games" → "Football | World Cup" once it pins to the top (.is-stuck). STICKY + persists; the FIFA tiles + search below scroll under it; the Highlights nav pins right under it (top: --ls-sticky-top + --wctitle-h). Carries the fifaworldcup.webp image when WC fixtures exist. ── */ .lux-wctitle { position: sticky; top: var(--ls-sticky-top, 0px); z-index: 52; margin: 0 -14px; padding: 9px 14px; display: flex; align-items: center; gap: 13px; background: var(--lux-bg); } .lux-wctitle.is-hidden, .lux-wctitle.is-wc-off { display: none; } /* chromeless match view / World Cup view */ .lux-fifawc.is-wc-off, .lux-fifawc.is-hidden, .lux-discover.is-wc-off, .lux-discover.is-hidden { display: none; } /* hide the home FIFA slider + search ON the World Cup view (kept on the home page) */ /* ═══ SINGLE SOURCE OF TRUTH for sub-view chrome-hiding ═══════════════════════════════════════════════════ When body has .lux-subview (set by setComboSub — true ONLY on a match's markets page or the World Cup page), EVERY home-only element below is hidden at once. To add new home chrome, add its selector to THIS list and nothing else — it can never be left showing on a sub-view again. (Book tabs / Home don't get .lux-subview.) */ body.lux-subview .lux-home-head, body.lux-subview .lux-home-nav, body.lux-subview .lux-wctitle, body.lux-subview .lux-fifawc, body.lux-subview .lux-discover, body.lux-subview .lux-cstrip { display: none !important; } /* NOTE: .lux-cmenu (casino menu bar) is NOT hidden — it stays on every page */ /* …EXCEPT the match/markets view (.lux-eventview, set alongside .lux-subview for event routes only): the market page is fully chromeless like an app screen — no casino menu bar there. WC / Bet history keep it. */ body.lux-eventview .lux-cmenu { display: none !important; } /* has-fifa: at rest the line is TRANSPARENT so the tiles' fifaworldcup image — pulled UP behind it via the tiles' negative top margin — shows through as ONE continuous backdrop behind the line AND the tiles. When the line pins (.is-stuck) it turns SOLID GREEN and covers the image + tiles scrolling under it. */ .lux-wctitle.has-fifa { height: 52px; box-sizing: border-box; background: transparent; box-shadow: none; text-shadow: 0 1px 5px rgba(0,0,0,.85); } .lux-wctitle.has-fifa.is-stuck { background: linear-gradient(135deg, #063e2b 0%, #032f25 74%); text-shadow: none; box-shadow: 0 11px 20px -14px rgba(0,0,0,.65); } .lux-wctitle__rest, .lux-wctitle__stuck { display: inline-flex; align-items: baseline; gap: 11px; } .lux-wctitle__stuck { display: none; } .lux-wctitle.is-stuck .lux-wctitle__rest { display: none; } .lux-wctitle.is-stuck .lux-wctitle__stuck { display: inline-flex; } .lux-home-head { display: none; } /* req 1 — Football | Top Games slider hidden for now */ /* The WC section carries the fifaworldcup image as its full-bleed background; the "Featured | Top Games" header (.lux-fifawc__hd) OVERLAYS the image at the top, the WC cards sit below it — one image, text on top. */ .lux-fifawc { margin: 0 -14px 6px; padding: 0 0 10px 14px; /* right padding removed → cards run to the edge */ background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: cover; background-image: url(/client/fifaWCBKG4.webp); } .lux-fifawc__hd { display: flex; align-items: baseline; gap: 11px; padding: 10px 2px 8px; text-shadow: 0 1px 5px rgba(0,0,0,.85); } .lux-fifawc__hd .tbc-arrows { margin-left: auto; align-self: center; } /* push the desktop carousel arrows to the right edge + center them on the baseline row */ /* .lux-fifawc inherits .lux-tgwrap → identical card spacing/padding to the Top Games slider (req: same padding) */ /* fifa26 banner — drops into the exact 80px head slot the red "Top Game" ribbon used, so these cards keep the SAME internal padding as the Top Games cards. */ .lux-tg__fifa { position: absolute; top: 50%; left: 6px; transform: translateY(-50%); z-index: 3; height: 16px; width: auto; border-radius: 3px; box-shadow: 1px 1px 2px rgba(0,0,0,.35); } .lux-topmenu { display: flex; align-items: baseline; gap: 13px; padding: 10px 2px 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .lux-topmenu::-webkit-scrollbar { display: none; } .lux-topmenu__title, .lux-topmenu__div, .lux-topmenu__tab { flex: 0 0 auto; white-space: nowrap; } .lux-topmenu__title { font-size: 1.35rem; font-weight: 800; color: var(--lux-text); cursor: pointer; } /* always bold; clickable → home */ .lux-topmenu__div { color: var(--lux-border); font-size: 1.15rem; font-weight: 300; } .lux-topmenu__tab { font-size: 1.35rem; font-weight: 400; color: var(--lux-muted); cursor: pointer; } .lux-topmenu__tab.is-on { font-weight: 800; color: var(--lux-text); } /* ── Left-rail "independent" section page (?nav=rail): a sticky "Football | " header (image-4 look, reuses .lux-topmenu__*) over its body. The home browse chrome above the panel is already hidden by setComboSub(true)/body.lux-subview, so the page reads as its own. ── */ .lux-secpage__hd { position: sticky; top: var(--ls-sticky-top, 0px); z-index: 52; display: flex; align-items: baseline; gap: 10px; margin: 0 0px 2px; padding: 11px 2px; background: var(--lux-bg); border-bottom: 1px solid var(--lux-border); } /* Image-3 row list (green dot / flag · name · subtitle · count); each row opens that league's / country's games. */ .lux-natlist { display: flex; flex-direction: column; margin: 0 -14px; } .lux-natlg { display: flex; align-items: center; gap: 11px; padding: 12px 14px; text-decoration: none; cursor: pointer; border-bottom: 1px solid var(--lux-border); color: var(--lux-text); } .lux-natlg:hover { background: var(--lux-surface-2); } .lux-natlg__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #00d25a; } .lux-natlg__flag { flex: none; width: 24px; height: 17px; object-fit: cover; border-radius: 2px; background: var(--lux-surface-2); } .lux-natlg__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .lux-natlg__name { color: var(--lux-text); font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lux-natlg__cty { color: var(--lux-muted); font-size: 11.5px; } .lux-natlg__n { flex: none; color: var(--lux-muted); font-size: 12px; font-weight: 700; } /* Full-width search below the title row; magnifier on the right. Transparent so the home-head green gradient shows through; always visible (no scroll-collapse). */ .lux-discover { background: transparent; padding: 6px 0 2px; } .lux-search-box { position: relative; width: 100%; } .lux-search { width: 100%; padding: 7px 38px 7px 16px; font-size: .95rem; background: var(--lux-surface); color: var(--lux-text); border: 1px solid var(--lux-border); border-radius: 999px; } .lux-search::placeholder { color: var(--lux-muted); } .lux-search::-webkit-search-cancel-button { -webkit-appearance: none; display: none; } .lux-search:focus { outline: 2px solid var(--lux-primary); outline-offset: 1px; } .lux-search__mag { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--lux-muted); pointer-events: none; } .lux-discover__chips { display: flex; gap: 6px; margin-top: 9px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .lux-discover__chips .lux-chip { white-space: nowrap; } /* ════════ Home — tab strips + match rows ════════ */ .lux-htabs, .lux-mtabs__types, .lux-mfilter { display: flex; gap: 18px; align-items: center; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .lux-htabs[hidden] { display: none; } /* the strip's display:flex was overriding the [hidden] attr — this lets the title menu hide it on Live/World Cup */ .lux-htabs::-webkit-scrollbar, .lux-mtabs__types::-webkit-scrollbar, .lux-mfilter::-webkit-scrollbar { display: none; } /* hide the scrollbar; still swipe/scrollable */ .lux-htabs { gap: 4px; justify-content: space-between; padding: 2px 2px 0; border-bottom: 1px solid var(--lux-border); position: relative; } /* span end-to-end: tabs distributed across the full width */ .lux-htabs .lux-tabitem { flex: 0 0 auto; font-size: 1rem; font-weight: 400; } /* scrollable; normal weight — only the selected tab is bold */ .lux-htabs .lux-tabitem.is-active { font-weight: 700; } .lux-htabs .lux-tabitem.is-active::after { display: none; } /* the sliding ink bar draws the home-tab underline instead */ .lux-htabs__ink { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--lux-primary); border-radius: 2px; transform: translateX(0); transition: transform .25s ease, width .25s ease; pointer-events: none; } /* Browse sub-nav under Highlights — 3 equal full-bleed buttons (Leagues · Today · Countries). Active = standout text + thick green underline, like the selected home tab. */ .lux-subtabs { display: flex; margin-top: 4px; border-bottom: 1px solid var(--lux-border); position: relative; } .lux-subtab { flex: 1 1 0; text-align: center; padding: 9px 4px; font-size: .95rem; font-weight: 600; color: var(--lux-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; cursor: pointer; -webkit-tap-highlight-color: transparent; } .lux-subtab.is-active { color: var(--lux-text); font-weight: 800; } /* the sliding ink (below) draws the underline */ .lux-subtabs__ink { position: absolute; bottom: 0; left: 0; width: 0; height: 3px; background: var(--lux-primary); border-radius: 3px; transform: translateX(0); transition: transform .25s ease, width .25s ease; pointer-events: none; } .lux-subtab:active { background: var(--lux-hover); } .lux-subtabs.is-off { display: none; } /* hidden while a strip panel (Live / Ai Assist / Upcoming / My Bets) is selected */ .lux-tabpanel { padding-top: 3px; transition: opacity .14s ease; overflow-anchor: none; } /* overflow-anchor:none → the browser won't shove content up/down to "keep" a scroll anchor when panel height changes */ #lux-home-view { transition: opacity .14s ease; overflow-anchor: none; } /* Highlights restore fades in like the tab panels (same .is-swapping mechanic); overflow-anchor matches .lux-tabpanel — no anchor-correction scroll events when content-visibility re-measures cards (those were tripping the touch guard → "press twice") */ #lux-home-view.is-swapping { opacity: 0; } /* Keep the scroll content at least one screenful tall so a SHORT tab (e.g. Live with 2–3 games, or a panel mid-load) can't shrink the page below the current scroll offset — which would clamp the scroll back up and un-pin the sticky nav (the "header pops back" bug). 100vh = the iframe's fixed viewport (host sets the iframe height; no auto-resize), so this is a safe floor. */ #lux-home-view, .lux-tabpanel { min-height: calc(100vh - var(--ls-sticky-top, 0px)); } .lux-tabpanel.is-swapping { opacity: 0; } /* content is rebuilt while invisible, then fades in — no snap/jump on tab/Back swaps */ .lux-dim { opacity: .55; } /* wait-to-draw: the outgoing view dims while the next panel is in flight (loadPanel / My Bets sheet) — a slow fetch reads as "working" without ever blanking the screen */ /* Safety net: the header (.lux-home-head) belongs to the persistent shell, never the swap-in panel. If a route's fragment ever slips a copy through, this keeps it from rendering a second header inside the panel. */ .lux-tabpanel .lux-home-head { display: none; } /* Market strip + the Leagues/1·X·2 header read as ONE merged block (no divider between them); the whole .lux-home-head is sticky, so the match odds scroll under it. */ .lux-mtabs { display: flex; align-items: center; gap: 12px; padding: 6px 2px; border-bottom: 1px solid var(--lux-border); } /* ONE row: Leagues · market tabs (scroll) · 1 X 2 */ .lux-mtabs__types { flex: 1; min-width: 0; gap: 16px; position: relative; } /* takes the middle, scrolls under the pinned 1 X 2 */ .lux-mtabs__types .lux-tabitem { font-weight: 400; font-size: .95rem; } /* thin/regular weight, slightly larger */ .lux-mtabs .lux-tabitem.is-active::after { display: none; } /* the sliding ink bar draws this underline instead */ .lux-mtabs__ink { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--lux-accent); border-radius: 2px; transition: transform .25s ease, width .25s ease; pointer-events: none; } /* Market strip styled to the reference: the ACTIVE tab uses the bright accent green (with the accent ink underline above); a "☰ All" lead-in + a thin vertical divider precede the market types. */ .lux-mtabs__types .lux-tabitem.is-active { color: var(--lux-accent); font-weight: 700; } .lux-mtabs__all { display: inline-flex; align-items: center; gap: 6px; } .lux-mtabs__div { flex: 0 0 auto; align-self: center; width: 1px; height: 15px; background: var(--lux-border); } .lux-tabitem { white-space: nowrap; font-size: .95rem; font-weight: 700; color: var(--lux-muted); padding: 6px 0; position: relative; } .lux-tabitem.is-active { color: var(--lux-text); } .lux-tabitem.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--lux-primary); border-radius: 2px; } .lux-upup { display: inline-flex; align-items: center; gap: 5px; background: var(--lux-surface-2); border-radius: 999px; padding: 4px 9px; font-size: .58rem; font-weight: 800; color: var(--lux-muted); flex: none; } .lux-upup i { width: 18px; height: 12px; border-radius: 999px; background: var(--lux-border); } .lux-matches { margin-top: 2px; } /* Lazy-load sentinel — an invisible spacer at the foot of the Home list; the client watches it and fetches the next 30 cards as it nears the viewport. */ .lux-more { min-height: 48px; } .lux-mkt-more { min-height: 1px; } /* invisible scroll sentinel for the match-page market lazy-load */ .lux-lazy-hidden { display: none !important; } /* lazy-reveal: cards past the first 15 until you scroll near */ /* Today / Countries server-rendered panels. */ .lux-panelview { padding-bottom: 8px; } /* Collapsible group (Countries / Leagues panels) — native

, folds with no JS. */ /* Time / country group: a lighter HEADER strip over a body that matches the page background. (details.lux-acc beats the region-chip .lux-acc rule, which otherwise lifts the whole group onto a surface.) */ details.lux-acc { background: var(--lux-bg); border: 0; border-radius: var(--lux-radius-sm); padding: 0; margin-top: 8px; overflow: hidden; cursor: default; } .lux-acc__sum { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--lux-surface-2); cursor: pointer; font-size: .9rem; font-weight: 700; color: var(--lux-text); list-style: none; } .lux-acc__sum::-webkit-details-marker { display: none; } .lux-acc__sum::after { content: '▾'; color: var(--lux-muted); transition: transform .15s; } .lux-acc[open] > .lux-acc__sum { color: var(--lux-primary); } .lux-acc[open] > .lux-acc__sum::after { transform: rotate(180deg); } .lux-acc__n { margin-left: auto; min-width: 20px; text-align: center; font-size: .72rem; font-weight: 800; color: var(--lux-muted); background: var(--lux-bg); border-radius: 999px; padding: 2px 7px; } /* dark pill on the lighter header */ .lux-acc__time { font-variant-numeric: tabular-nums; letter-spacing: .3px; } /* Leagues sub-tab view: plain (non-bold) league names. */ .lux-leagueview .lux-acc__sum { font-weight: 400; } /* Today sub-tab view: each slot heading (2 PM, 3 PM, …) sticks just under the home-head/sub-nav while you scroll its games, then the next slot pushes it up and takes its place. overflow:visible on the

is required so the sticky summary isn't clipped to its own box. --lux-headh = measured home-head height. */ .lux-todayview details.lux-acc { overflow: visible; } .lux-todayview .lux-acc__sum { position: sticky; top: var(--lux-headh, 104px); z-index: 6; } /* Secondary filter row under the home tabs (Today → dates, Countries → regions) — same text-tab look as the Highlights market strip: an underline (not a pill) marks the active one. */ .lux-subnav { position: relative; display: flex; gap: 18px; align-items: center; overflow-x: auto; padding: 4px 2px 0; margin-bottom: 4px; border-bottom: 1px solid var(--lux-border); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lux-subnav::-webkit-scrollbar { display: none; } .lux-subnav__chip { flex: 0 0 auto; position: relative; white-space: nowrap; font-size: .95rem; font-weight: 400; color: var(--lux-muted); padding: 6px 0; background: none; border: none; border-radius: 0; text-decoration: none; cursor: pointer; } /* normal weight; only the selected date is bold */ .lux-subnav__chip.is-active { color: var(--lux-text); font-weight: 700; } .lux-subnav__ink { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--lux-primary); border-radius: 2px; transition: transform .22s ease, width .22s ease; } /* the green underline slides between date tabs */ /* Countries FLAG filter — a side-scrolling row of flag + country name; tap one to filter the list. */ .lux-cfilters { display: flex; gap: 13px; align-items: flex-start; overflow-x: auto; padding: 8px 2px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--lux-border); scrollbar-width: none; -webkit-overflow-scrolling: touch; } .lux-cfilters::-webkit-scrollbar { display: none; } .lux-cfilter { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 5px; width: 50px; text-decoration: none; color: var(--lux-muted); } .lux-cfilter__flag { width: 38px; height: 26px; object-fit: cover; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0,0,0,.18); } .lux-cfilter__flag--none, .lux-cfilter__all { display: flex; align-items: center; justify-content: center; background: var(--lux-surface-2); color: var(--lux-muted); font-weight: 800; font-size: .95rem; box-shadow: none; } .lux-cfilter__all { color: var(--lux-gold); } .lux-cfilter__name { font-size: .64rem; line-height: 1.1; text-align: center; white-space: nowrap; max-width: 50px; overflow: hidden; text-overflow: ellipsis; } .lux-cfilter.is-active { color: var(--lux-text); font-weight: 700; } .lux-cfilter.is-active .lux-cfilter__flag { box-shadow: 0 0 0 2px var(--lux-primary); } /* League sub-accordion inside a country — a COLLAPSIBLE comp group (top league first), first one open. */ .lux-lacc:not(:first-child) { border-top: 1px solid var(--lux-border); } .lux-lacc__sum { display: flex; align-items: center; gap: 8px; padding: 7px 0; cursor: pointer; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--lux-muted); list-style: none; } /* L/R 0 so the league name lines up flush with the team names below it */ .lux-lacc__sum::-webkit-details-marker { display: none; } .lux-lacc__sum::after { content: '▾'; margin-left: 4px; font-size: .9rem; color: var(--lux-muted); transition: transform .15s; } .lux-lacc:not([open]) > .lux-lacc__sum::after { transform: rotate(-90deg); } .lux-lacc__n { margin-left: auto; font-size: .7rem; font-weight: 700; color: var(--lux-muted); } .lux-lacc .lux-matches { padding: 0 0 4px; } .lux-lacc .lux-matches .lux-match:last-child { border-bottom: 0; } /* league's last match: no trailing line, so no double line against the next league's top border */ .lux-lacc .lux-match__meta { display: none; } /* the league heading already names the comp — drop the per-card line */ .lux-acc .lux-matches { padding: 0 0 6px; background: var(--lux-bg); } /* zero L/R: leagues + games use the full width (the .lux-wrap shell already gives 14px off the screen edge); the match card itself is 0 L/R too, so everything aligns with the rest of the page instead of double-indenting */ /* "Leagues" toggle button on the 1/X/2 header — a blue dot that lights the button when on. */ .lux-leaguesbtn { flex: none; display: inline-flex; align-items: center; gap: 6px; background: var(--lux-surface-2); border: 1px solid var(--lux-border); border-radius: 4px; padding: 2px 10px; font-size: .8rem; font-weight: 400; color: var(--lux-text); cursor: pointer; } .lux-leaguesbtn__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lux-primary); } .lux-leaguesbtn.is-on { background: var(--lux-primary); border-color: var(--lux-primary); color: var(--lux-on-primary); } .lux-leaguesbtn.is-on .lux-leaguesbtn__dot { background: var(--lux-on-primary); } .lux-match { padding: 6px 0; border-bottom: 1px solid var(--lux-border); content-visibility: auto; contain-intrinsic-size: auto 104px; } /* compact + divider between matches. content-visibility: offscreen cards skip layout/paint — a Leagues/Countries swap lays out a handful of visible cards instead of hundreds (the tab-switch jank); intrinsic-size ≈ card height keeps the scrollbar stable, `auto` remembers the real height once rendered */ .lux-match__meta { display: flex; gap: 8px; align-items: center; font-size: .72rem; color: var(--lux-league); margin-bottom: 2px; } /* league line — back on TOP, above the teams; softened shade */ .lux-hot { font-size: .66rem; font-weight: 900; color: #fff; background: linear-gradient(135deg, #ff3b30, #c1071e); border-radius: 4px; padding: 3px 8px; letter-spacing: .8px; flex: none; text-transform: uppercase; box-shadow: 0 1px 6px rgba(193,7,30,.55); } .lux-top { font-size: .66rem; font-weight: 900; color: #3a2a00; background: linear-gradient(135deg, #ffd24a, #f5a623); border-radius: 4px; padding: 3px 8px; letter-spacing: .6px; flex: none; text-transform: uppercase; box-shadow: 0 1px 6px rgba(245,166,35,.5); } /* ⭐ TOP (featured) */ .lux-match__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 5px; } /* time (left) · market name + dots (right, under the odds) */ .lux-match__time { font-size: .72rem; color: var(--lux-league); flex: none; } /* date/time — left of the foot row, in front of +N Markets */ .lux-match__league { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lux-match__row { display: flex; align-items: center; gap: 10px; } /* teams (left) + swipe odds carousel (right) */ .lux-match__teams { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; color: var(--lux-team); font-weight: 600; font-size: .95rem; } /* team names — soft off-white */ .lux-match__teams > span { display: flex; align-items: center; gap: 6px; min-width: 0; } /* a team row: name (truncates) + optional live score */ .lux-match__tname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } .lux-match__score { margin-left: auto; padding: 0 9px 0 8px; flex: none; color: var(--lux-primary); font-weight: 800; font-variant-numeric: tabular-nums; } /* live score — parked at the inner edge, green */ .lux-cflag { width: 21px; height: 14px; object-fit: cover; border-radius: 2px; margin-right: 6px; vertical-align: -2px; box-shadow: 0 0 0 1px rgba(0,0,0,.12); } /* national-side flag before the team name (countries only) */ .lux-match__oddswrap { flex: 0 0 clamp(150px, 46%, 190px); min-width: 0; } /* holds the swipe carousel viewport */ .lux-match__more { display: inline-flex; align-items: center; justify-content: flex-end; font-size: .7rem; font-weight: 400; white-space: nowrap; } .lux-match__allmkts { color: var(--lux-muted); } /* "+N Markets" → opens the full markets page */ .lux-match__preview { font: inherit; font-weight: 400; color: var(--lux-primary); background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; } /* "Preview" → opens the inline dropdown */ .lux-match__preview::before { content: '•'; margin: 0 5px; color: var(--lux-muted); } .lux-match__preview::after { content: '▾'; margin-left: 4px; display: inline-block; transition: transform .2s ease; } .lux-match.is-open .lux-match__preview::after { transform: rotate(180deg); } .lux-match__markets { margin: 6px 0 4px; padding: 8px; background: var(--lux-surface-2); } /* light-grey sub-panel: darker than the card body, square edges (no radius) */ .lux-match__markets .lux-pill { background: var(--lux-odds-bg); } /* odds-container green, same as elsewhere */ .lux-oddshead { display: flex; align-items: center; padding: 8px 0 6px; border-bottom: 1px solid var(--lux-border); } /* line under 1/X/2; pinned via the .lux-home-head wrapper */ .lux-oddshead__sp { flex: 1; } .lux-oddshead__cols { flex: none; display: grid; grid-template-columns: repeat(3, 60px); gap: 6px; border-left: 1px solid var(--lux-border); padding-left: 11px; } /* pinned right; aligns over the card odds columns */ .lux-oddshead__cols span { text-align: center; font-size: .82rem; font-weight: 800; color: var(--lux-muted); } .lux-oddsrow { display: grid; grid-template-columns: repeat(3, 60px); grid-auto-rows: 1fr; gap: 6px; flex: none; height: 72%; border-left: 1px solid var(--lux-border); padding-left: 11px; } /* selected chip ≈ 72% of the body height; vertical divider in front of the odds */ .lux-noodds { grid-column: 1 / -1; text-align: center; color: var(--lux-muted); font-size: .9rem; padding: 13px 0; } /* a match without the chosen market */ .lux-mtabs__types.is-loading { opacity: .55; } /* brief, while the swapped market's odds are fetched */ /* Odds shown as PLAIN GOLD NUMBERS (no button tile), per the reference; selected = a clean filled chip. */ .lux-sel.lux-otile { flex: 1; flex-direction: column; gap: 2px; min-height: 46px; padding: 5px 2px; background: none; border: 0; border-radius: 2px; } .lux-otile__cap { font-size: .62rem; color: var(--lux-league); white-space: nowrap; } /* the 1/X/2 · Over 2.5 · GG label above the price */ /* Locked (off-the-board / unpriced) outcome — non-bettable, greyed, lock glyph. Self-contained box styling since these carry no .lux-sel class (so the slip never adds them). */ .lux-otile--locked, .lux-pill--locked { display: flex; align-items: center; justify-content: center; border: 1px solid var(--lux-border); border-radius: 3px; background: var(--lux-surface-2); color: var(--lux-muted); cursor: not-allowed; user-select: none; } .lux-otile--locked { flex: 1; flex-direction: column; gap: 2px; min-height: 46px; padding: 5px 2px; font-size: 1rem; opacity: .5; background: none; border: 0; } .lux-pill--locked { flex-direction: column; gap: 2px; min-height: 54px; padding: 8px; text-align: center; opacity: .85; } .lux-pill--locked .lux-pill__name { color: var(--lux-muted); } .lux-pill--locked .lux-pill__odds { color: var(--lux-muted); font-weight: 400; } /* SUSPENDED outcome (market.status !== 'open') — the last price shown MUTED with a crisp 🔒, never clickable. Same footprint as the bettable tile/row/cell so the grid never shifts when a market locks. */ .lux-otile--locked, .lux-mcell--locked, .lux-mrow--locked, .lux-pill--locked { opacity: 1; position: relative; cursor: not-allowed; user-select: none; } .lux-otile--locked .lux-otile__odds, .lux-mcell--locked .lux-mcell__odds, .lux-mrow--locked .lux-mrow__odds, .lux-pill--locked .lux-pill__odds { color: var(--lux-muted); opacity: .5; } .lux-lock { flex: none; font-size: 11px; line-height: 1; } .lux-otile--locked .lux-lock { position: absolute; top: 2px; right: 3px; font-size: 9px; } .lux-mrow--locked { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 8px 14px; border-top: 1px solid var(--lux-border); color: var(--lux-muted); } .lux-mlist .lux-mrow--locked:first-child { border-top: 0; } .lux-mcell--locked .lux-lock, .lux-mrow--locked .lux-lock, .lux-pill--locked .lux-lock { margin-left: 6px; } .lux-otile__odds { font-weight: 400; font-size: 1.05rem; color: var(--lux-tile-odds); } /* yellow in dark, near-black in light */ .lux-sel.lux-otile.is-on { background: var(--lux-odds-on-bg); border-radius: 2px; box-shadow: none; } /* selected = gold chip */ .lux-sel.lux-otile.is-on .lux-otile__cap { color: rgba(22,24,31,.6); } .lux-sel.lux-otile.is-on .lux-otile__odds { color: var(--lux-odds-on-text); font-weight: 500; } @media (min-width: 420px) { .lux-oddsrow, .lux-oddshead__cols { grid-template-columns: repeat(3, 66px); } } /* ════ Per-card market SWIPE carousel (pure CSS scroll-snap) ════ */ .lux-mvp { width: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; border-left: 1px solid var(--lux-border); } /* overflow-y:hidden is the real fix — it stops the spec-mandated overflow-y:auto scroll-trap inside each card (overflow-x:auto + unset overflow-y computes to auto), which was catching vertical drags. overscroll-x:contain keeps the horizontal swipe from chaining into the browser back-gesture. NOTE: do NOT add touch-action:pan-x here — it makes a vertical drag that STARTS on a card refuse to scroll the page (dead-zone), instead of letting the browser hand the vertical pan to the page. Default touch-action (manipulation) is correct. */ .lux-mvp::-webkit-scrollbar { display: none; } .lux-mtrack { display: flex; } .lux-mpan { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; padding-left: 11px; } /* one market per swipe panel (own class — avoids the event-page .lux-mkt border/padding) */ .lux-mtiles { display: flex; gap: 6px; } .lux-mpan-all { display: flex; align-items: center; justify-content: center; gap: 5px; min-height: 46px; text-decoration: none; background: rgba(58,217,104,.09); border-radius: 2px; } /* "+N »" → opens the full game page */ .lux-mpan-all:active { background: rgba(58,217,104,.18); } .lux-mall-n { font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--lux-accent); } .lux-mall-go { font-size: 1.5rem; line-height: 1; color: var(--lux-accent); } .lux-mind { display: flex; align-items: center; gap: 7px; } /* foot: market name + dots that track the swipe */ .lux-mname { font-size: .72rem; color: var(--lux-league); font-weight: 600; } .lux-mdots { display: flex; gap: 4px; } .lux-mdot { width: 5px; height: 5px; border-radius: 50%; background: var(--lux-border); transition: background .2s, width .2s; } .lux-mdot.is-on { background: var(--lux-accent); width: 13px; border-radius: 3px; } /* Clickable total-markets count in the card foot, next to the swipe dots → opens the full match page. Top-right of the card on the league/meta line — same size/colour as the meta, but bolder. NOT a pill. */ .lux-mcount { flex: none; color: var(--lux-league); font-size: .72rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .lux-mcount:active { opacity: .55; } /* ════════ Match page — the team header IS the hero: home green gradient behind the logos, with a frosted back button overlaying its top-left (no separate top bar). Full-bleed (breaks out of .lux-wrap padding). */ .lux-mhero { position: relative; margin: 0 -14px; padding: calc(env(safe-area-inset-top) + 10px) 14px 0; background: radial-gradient(130% 130% at 50% -28%, rgba(22,160,96,.5) 0%, transparent 60%), var(--lux-bg); } .lux-mback { position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 12px; z-index: 10; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; color: #fff; font-size: 1.25rem; line-height: 1; text-decoration: none; background: rgba(24,28,34,.55); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 4px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2); } .lux-mback:active { background: rgba(24,28,34,.82); } /* The competition line shares the back button's row (button left, name centred); team names sit below. */ .lux-mhead__comp { display: flex; align-items: center; justify-content: center; min-height: 40px; margin: 0 46px; text-align: center; font-size: .85rem; font-weight: 600; color: var(--lux-muted); } .lux-mhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 8px; padding: 4px 4px 8px; } .lux-mhead__team { display: flex; flex-direction: column; align-items: center; gap: 7px; font-weight: 700; font-size: .88rem; color: var(--lux-text); text-align: center; } .lux-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 50%; background: var(--lux-surface-2); color: var(--lux-primary); font-weight: 800; font-size: 1.25rem; border: 1px solid var(--lux-border); overflow: hidden; } .lux-badge::after { content: attr(data-ch); } /* letter fallback, behind the crest image */ .lux-badge__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .lux-mhead__kick { font-size: .82rem; color: var(--lux-muted); font-weight: 600; text-align: center; padding-top: 12px; } /* Live match header (in-play): LIVE badge over the running score over the minute — replaces the kickoff label. */ .lux-mhead__live { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding-top: 4px; } .lux-mhead__score { font-size: 1.5rem; font-weight: 800; color: var(--lux-text); font-variant-numeric: tabular-nums; letter-spacing: 1px; } .lux-mhead__id { text-align: center; font-size: .74rem; color: var(--lux-muted); margin: 0 0 10px; } /* Read-only "ended / being settled" match page — final (or last live) score over a calm note + My Bets link. */ .lux-mhead__ended { display: flex; align-items: center; justify-content: center; padding-top: 8px; } .lux-event-ended { text-align: center; padding: 22px 16px 28px; } .lux-event-ended__msg { font-size: .92rem; color: var(--lux-muted); font-weight: 600; margin: 0 0 16px; } .lux-event-ended__bets { display: inline-block; } /* Detail tabs = one full-width segmented bar: equal segments, square, joined (no gaps). */ .lux-dpills { display: flex; gap: 0; padding: 0; margin: 4px 0 10px; border: 1px solid var(--lux-border); border-radius: 0; overflow: hidden; } .lux-dpill { flex: 1; min-width: 0; text-align: center; white-space: nowrap; font-size: .82rem; font-weight: 700; font-family: inherit; color: var(--lux-text); background: var(--lux-surface-2); border: none; border-left: 1px solid var(--lux-border); border-radius: 0; padding: 11px 4px; cursor: pointer; } .lux-dpill:first-child { border-left: none; } .lux-dpill.is-active { background: var(--lux-text); color: var(--lux-bg); } /* Match-page detail-tab panels (BB shares Markets; Stats/Codes/Chat switch in). */ .lux-bb-banner { background: var(--lux-pick); color: var(--lux-text); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); padding: 9px 12px; margin: 4px 0; font-size: .85rem; } .lux-codes { padding: 14px 2px; } .lux-codes__hint { font-size: .88rem; color: var(--lux-muted); margin: 0 0 10px; } .lux-codes__row { display: flex; gap: 8px; } .lux-codes__input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); background: var(--lux-surface-2); color: var(--lux-text); font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; } .lux-codes__input.is-err { border-color: var(--lux-danger); } .lux-codes__btn { padding: 0 18px; border: none; border-radius: var(--lux-radius-sm); background: var(--lux-primary); color: var(--lux-on-primary); font-weight: 800; cursor: pointer; } .lux-codes__hub { display: inline-block; margin-top: 14px; font-size: .85rem; color: var(--lux-primary); text-decoration: none; font-weight: 700; } .lux-stats { text-align: center; padding: 40px 18px; } .lux-stats__icon { font-size: 2.4rem; } .lux-stats__title { font-size: 1.05rem; font-weight: 800; margin: 12px 0 6px; color: var(--lux-text); } .lux-stats__sub { font-size: .88rem; color: var(--lux-muted); margin: 0; line-height: 1.5; } /* ── Match-page Stats tab (Table/Standings · Comparison · Probability + deferred placeholders) ── */ .lux-statstab { padding: 2px 0 6px; } /* Sub-tab bar — side-scrolling chips; the active one carries the primary underline (in-panel switched). */ /* Stats sub-tab bar — styled like the markets filter (All · Goal Times · Halves …): underline tabs, not pills. */ .lux-stabs { display: flex; gap: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 2px 0; margin-bottom: 8px; border-bottom: 1px solid var(--lux-border); align-items: stretch; position: relative; } .lux-stabs::-webkit-scrollbar { display: none; } .lux-stab { flex: 0 0 auto; position: relative; white-space: nowrap; text-decoration: none; background: none; border: none; padding: 6px 0 9px; font-size: .95rem; font-weight: 700; color: var(--lux-muted); } .lux-stab:hover { color: var(--lux-text); } .lux-stab.is-active { color: var(--lux-text); } /* Sliding underline (mirrors .lux-htabs__ink) — moved under the active chip by __luxStabInk. */ .lux-stabs__ink { position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--lux-primary); border-radius: 2px; transform: translateX(0); transition: transform .25s ease, width .25s ease; pointer-events: none; } .lux-stab-panel { padding: 6px 0 2px; } /* Shared empty + deferred-placeholder states. */ .lux-stats-empty { text-align: center; color: var(--lux-muted); font-size: .9rem; padding: 30px 14px; line-height: 1.5; } .lux-stats-soon { text-align: center; padding: 34px 16px; color: var(--lux-muted); } .lux-stats-soon__icon { font-size: 2rem; opacity: .8; } .lux-stats-soon__txt { margin: 10px 0 0; font-size: .9rem; font-weight: 700; } .lux-stats-trend { margin-top: 14px; padding-top: 6px; border-top: 1px dashed var(--lux-border); } .lux-stats-trend__lbl { margin: 8px 0 0; text-align: center; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--lux-muted); } /* League table — Overall/Home/Away scope toggle + a CSS-grid standings table; fixture teams highlighted. */ .lux-tblscope { display: inline-flex; gap: 2px; background: var(--lux-surface-2); border-radius: 999px; padding: 3px; margin: 2px 0 10px; } .lux-tblscope__btn { border: none; background: transparent; color: var(--lux-muted); font-size: .76rem; font-weight: 700; font-family: inherit; padding: 5px 12px; border-radius: 999px; cursor: pointer; } .lux-tblscope__btn.is-active { background: var(--lux-surface); color: var(--lux-primary); box-shadow: var(--lux-shadow); } .lux-stt__grid { display: flex; flex-direction: column; } /* A row = pos | team(grows) | the active scope's P W D L GF:GA DIFF block | pts | form. The three scope spans are siblings; EXACTLY ONE shows at a time, driven by the [data-scope] on the .lux-stt container (the toggle JS rewrites it). A real display:none — the per-cell `hidden` attribute is only the no-JS fallback because the .lux-stt__scope `display:` below would otherwise override `hidden`. */ .lux-stt[data-scope="overall"] .lux-stt__scope:not([data-scope="overall"]), .lux-stt[data-scope="home"] .lux-stt__scope:not([data-scope="home"]), .lux-stt[data-scope="away"] .lux-stt__scope:not([data-scope="away"]) { display: none; } .lux-stt__head, .lux-stt__row { display: flex; align-items: center; gap: 6px; padding: 7px 4px; font-size: .8rem; } .lux-stt__head { color: var(--lux-muted); font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .02em; border-bottom: 1px solid var(--lux-border); } .lux-stt__row { border-bottom: 1px solid var(--lux-border); } /* Group/stage sub-header (grouped competitions only — e.g. "Group B"). Sits above its group's rows; a single-table league renders none. Spans the full row width; not part of the scope-toggle cell groups. */ .lux-stt__group { padding: 8px 6px 5px; font-size: .72rem; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--lux-primary); } .lux-stt__group + .lux-stt__row { border-top: none; } .lux-stt__row.is-fixture { background: var(--lux-pick); border-radius: var(--lux-radius-sm); } .lux-stt__row--promo { box-shadow: inset 3px 0 0 var(--lux-success); } .lux-stt__row--releg { box-shadow: inset 3px 0 0 var(--lux-danger); } .lux-stt__row--promo.is-fixture { box-shadow: inset 3px 0 0 var(--lux-success); } .lux-stt__pos { flex: 0 0 34px; display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--lux-muted); } .lux-stt__mv { font-size: .6rem; line-height: 1; } .lux-stt__mv--up { color: var(--lux-success); } .lux-stt__mv--down { color: var(--lux-danger); } .lux-stt__mv--same { color: var(--lux-muted); opacity: .6; } .lux-stt__team { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: 7px; } .lux-stt__logo { width: 18px; height: 18px; object-fit: contain; flex: 0 0 auto; } .lux-stt__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--lux-text); } .lux-stt__scope { display: inline-flex; align-items: center; gap: 0; flex: 0 0 auto; } .lux-stt__c { width: 26px; text-align: center; color: var(--lux-muted); } .lux-stt__c--gd { width: 44px; } .lux-stt__pts { flex: 0 0 30px; text-align: center; font-weight: 800; color: var(--lux-text); } .lux-stt__form { flex: 0 0 auto; display: inline-flex; gap: 2px; margin-left: 4px; } /* Form badges (W/D/L) — also reused by the comparison rings legend if needed. */ .lux-form { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 3px; font-size: .58rem; font-weight: 900; color: #fff; } .lux-form--w { background: var(--lux-success); } .lux-form--l { background: var(--lux-danger); } .lux-form--d { background: var(--lux-muted); } .lux-form--n { background: var(--lux-border); color: var(--lux-muted); } /* Comparison — header, twin form rings (conic-gradient driven by --lux-ring-pct), then labelled rows. */ .lux-cmp__head { display: flex; align-items: center; gap: 8px; padding: 4px 2px 12px; } .lux-cmp__team { flex: 1; min-width: 0; text-align: center; font-weight: 800; font-size: .92rem; color: var(--lux-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lux-cmp__vs { flex: 0 0 auto; font-size: .74rem; font-weight: 700; color: var(--lux-muted); } .lux-cmp__rings { display: flex; align-items: center; justify-content: space-around; gap: 8px; padding: 4px 2px 16px; } .lux-cmp__rings-lbl { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--lux-muted); } .lux-ring { --lux-ring-pct: 0; --lux-ring-col: var(--lux-muted); width: 62px; height: 62px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: conic-gradient(var(--lux-ring-col) calc(var(--lux-ring-pct) * 1%), var(--lux-surface-2) 0); } .lux-ring::before { content: ""; position: absolute; width: 46px; height: 46px; border-radius: 50%; background: var(--lux-surface); } .lux-ring { position: relative; } .lux-ring--home { --lux-ring-col: var(--lux-success); } .lux-ring--away { --lux-ring-col: var(--lux-danger); } .lux-ring__val { position: relative; font-size: .82rem; font-weight: 800; color: var(--lux-text); } .lux-cmp__rows { display: flex; flex-direction: column; } .lux-cmp__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 9px 2px; border-top: 1px solid var(--lux-border); } .lux-cmp__v { font-weight: 700; color: var(--lux-text); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lux-cmp__v--home { text-align: left; } .lux-cmp__v--away { text-align: right; } .lux-cmp__lbl { text-align: center; font-size: .74rem; color: var(--lux-muted); white-space: nowrap; } /* Probability — a legend + a stacked FT/HT bar (home green / draw grey / away red), widths track %. */ .lux-prob { padding: 4px 0; } .lux-prob__legend { display: flex; gap: 14px; justify-content: center; padding: 2px 0 12px; font-size: .76rem; } .lux-prob__lg { display: inline-flex; align-items: center; gap: 5px; color: var(--lux-muted); font-weight: 700; } .lux-prob__lg::before { content: ""; width: 10px; height: 10px; border-radius: 2px; } .lux-prob__lg--h::before { background: var(--lux-success); } .lux-prob__lg--d::before { background: var(--lux-muted); } .lux-prob__lg--a::before { background: var(--lux-danger); } .lux-prob__row { display: flex; align-items: center; gap: 10px; padding: 7px 0; } .lux-prob__when { flex: 0 0 78px; font-size: .78rem; font-weight: 700; color: var(--lux-muted); } .lux-prob__bar { flex: 1 1 auto; display: flex; height: 26px; border-radius: var(--lux-radius-sm); overflow: hidden; background: var(--lux-surface-2); } .lux-prob__seg { --lux-prob-w: 0; flex: 0 0 calc(var(--lux-prob-w) * 1%); display: inline-flex; align-items: center; justify-content: center; min-width: 0; overflow: hidden; } .lux-prob__seg b { font-size: .72rem; font-weight: 800; color: #fff; white-space: nowrap; } .lux-prob__seg--h { background: var(--lux-success); } .lux-prob__seg--d { background: var(--lux-muted); } .lux-prob__seg--a { background: var(--lux-danger); } .lux-prob__none { color: var(--lux-muted); padding-left: 4px; } /* H2H + H2H(New) sub-tabs — section blocks, last-5 / meetings lists, previous-meetings donut, highest-win cards, team summaries, and the scope-toggled team-stats comparison grid. Reuse --lux-* tokens. */ .lux-h2h, .lux-h2hx { padding: 2px 0 4px; } .lux-h2h__sect { padding: 4px 0 6px; border-top: 1px solid var(--lux-border); margin-top: 8px; } .lux-h2h__sect:first-child { border-top: none; margin-top: 0; } .lux-h2h__h { margin: 6px 0 8px; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--lux-muted); } .lux-h2h__none { text-align: center; color: var(--lux-muted); font-size: .85rem; padding: 12px 8px; } /* League position strip (home value · label · away value). */ .lux-h2h__pos { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; padding: 6px 2px 2px; } .lux-h2h__pos-v { font-size: 1.3rem; font-weight: 800; color: var(--lux-text); text-align: center; } .lux-h2h__pos-lbl { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--lux-muted); white-space: nowrap; } /* Two-column blocks (each team's last-5 / next). */ .lux-h2h__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lux-h2h__col { min-width: 0; } .lux-h2h__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } /* A history (last/next) row: result badge · opponent · venue · score · date. */ .lux-h2h__row { display: flex; align-items: center; gap: 6px; font-size: .82rem; padding: 3px 0; min-width: 0; } .lux-h2h__row-opp { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lux-text); font-weight: 600; } .lux-h2h__row-venue { flex: 0 0 auto; font-size: .68rem; color: var(--lux-muted); text-transform: uppercase; } .lux-h2h__row-score { flex: 0 0 auto; font-weight: 800; color: var(--lux-text); } .lux-h2h__row-date { flex: 0 0 auto; font-size: .68rem; color: var(--lux-muted); } /* Previous-meetings donut: a conic-gradient ring with W/D/L segments + a count legend. */ .lux-h2h__donut { display: flex; align-items: center; gap: 16px; padding: 6px 4px; } .lux-donut { --lux-donut-s1: 33; --lux-donut-s2: 66; position: relative; flex: 0 0 auto; width: 84px; height: 84px; border-radius: 50%; background: conic-gradient(var(--lux-success) 0 calc(var(--lux-donut-s1) * 1%), var(--lux-muted) 0 calc(var(--lux-donut-s2) * 1%), var(--lux-danger) 0 100%); display: inline-flex; align-items: center; justify-content: center; } .lux-donut::before { content: ""; position: absolute; width: 56px; height: 56px; border-radius: 50%; background: var(--lux-surface); } .lux-donut__total { position: relative; font-size: 1.1rem; font-weight: 800; color: var(--lux-text); } .lux-donut__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; } .lux-donut__lg { display: flex; align-items: baseline; gap: 8px; font-size: .82rem; color: var(--lux-muted); min-width: 0; } .lux-donut__lg b { flex: 0 0 26px; font-weight: 800; color: var(--lux-text); } .lux-donut__lg span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lux-donut__lg::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; } .lux-donut__lg--w::before { background: var(--lux-success); } .lux-donut__lg--d::before { background: var(--lux-muted); } .lux-donut__lg--l::before { background: var(--lux-danger); } /* Highest-win cards (one per side). */ .lux-h2h__bigwins { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lux-h2h__bigwin { background: var(--lux-surface-2); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); padding: 10px; text-align: center; min-width: 0; } .lux-h2h__bigwin-score { display: block; font-size: 1.15rem; font-weight: 800; color: var(--lux-text); } .lux-h2h__bigwin-name, .lux-h2h__bigwin-teams { display: block; font-size: .76rem; color: var(--lux-muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lux-h2h__bigwin-date { display: block; font-size: .68rem; color: var(--lux-muted); margin-top: 3px; } /* Last-5 head-to-head meetings list. */ .lux-h2h__meetings { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .lux-h2h__meet { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 7px 2px; border-top: 1px solid var(--lux-border); font-size: .82rem; } .lux-h2h__meet:first-child { border-top: none; } .lux-h2h__meet-meta { color: var(--lux-muted); font-size: .72rem; white-space: nowrap; } .lux-h2h__meet-teams { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--lux-text); } .lux-h2h__meet-score { font-weight: 800; color: var(--lux-text); white-space: nowrap; } /* H2H(New) team summary cards (POS / MP / PTS). */ .lux-h2hx__sums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .lux-h2hx__sum { background: var(--lux-surface-2); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); padding: 9px 8px; min-width: 0; } .lux-h2hx__sum-name { display: block; font-size: .82rem; font-weight: 800; color: var(--lux-text); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 6px; } .lux-h2hx__sum-cells { display: flex; justify-content: space-around; gap: 4px; } .lux-h2hx__sum-cell { display: flex; flex-direction: column; align-items: center; } .lux-h2hx__sum-cell b { font-size: 1rem; font-weight: 800; color: var(--lux-text); } .lux-h2hx__sum-cell i { font-size: .64rem; font-style: normal; text-transform: uppercase; letter-spacing: .03em; color: var(--lux-muted); } /* H2H(New) team-stats comparison grid — a shared label, then a home|away value pair per scope. */ .lux-h2hx__grid { display: flex; flex-direction: column; } .lux-h2hx__head, .lux-h2hx__row { display: flex; align-items: center; gap: 6px; padding: 7px 2px; font-size: .82rem; border-top: 1px solid var(--lux-border); } .lux-h2hx__head { color: var(--lux-muted); font-weight: 800; font-size: .68rem; text-transform: uppercase; letter-spacing: .02em; border-top: none; } .lux-h2hx__lbl { flex: 1 1 auto; min-width: 0; color: var(--lux-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lux-h2hx__row .lux-h2hx__lbl { color: var(--lux-text); font-weight: 600; } .lux-h2hx__scope { display: inline-flex; gap: 14px; flex: 0 0 auto; } /* Same single-scope rule as the league table: show only the scope matching the grid's [data-scope]. */ .lux-h2hx__grid[data-scope="overall"] .lux-h2hx__scope:not([data-scope="overall"]), .lux-h2hx__grid[data-scope="home"] .lux-h2hx__scope:not([data-scope="home"]), .lux-h2hx__grid[data-scope="away"] .lux-h2hx__scope:not([data-scope="away"]) { display: none; } .lux-h2hx__v { width: 52px; text-align: center; font-weight: 700; color: var(--lux-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lux-h2hx__head .lux-h2hx__v { font-weight: 800; color: var(--lux-muted); } .lux-chat { display: flex; flex-direction: column; gap: 10px; padding: 8px 0 4px; } .lux-chat__list { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; } .lux-chat__empty { text-align: center; color: var(--lux-muted); font-size: .9rem; padding: 24px 12px; } .lux-chat__msg { background: var(--lux-surface-2); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); padding: 8px 11px; } .lux-chat__meta { display: flex; justify-content: space-between; gap: 10px; font-size: .74rem; margin-bottom: 3px; } .lux-chat__meta b { color: var(--lux-primary); font-weight: 700; } .lux-chat__meta span { color: var(--lux-muted); } .lux-chat__body { font-size: .92rem; color: var(--lux-text); line-height: 1.35; word-break: break-word; } .lux-chat__form { display: flex; gap: 8px; position: sticky; bottom: 0; background: var(--lux-bg); padding: 6px 0 2px; } .lux-chat__input { flex: 1; min-width: 0; padding: 11px 14px; border: 1px solid var(--lux-border); border-radius: 999px; background: var(--lux-surface-2); color: var(--lux-text); font-size: .95rem; } .lux-chat__send { padding: 0 18px; border: none; border-radius: 999px; background: var(--lux-primary); color: var(--lux-on-primary); font-weight: 800; cursor: pointer; } .lux-chat__login { text-align: center; color: var(--lux-muted); font-size: .88rem; padding: 14px; } .lux-mfilter { padding: 8px 2px 0; border-top: none; border-bottom: 1px solid var(--lux-border); margin-bottom: 8px; align-items: stretch; } .lux-mfilter .lux-tabitem { padding: 6px 0 9px; background: none; border: none; font-family: inherit; cursor: pointer; } .lux-mfilter .lux-tabitem.is-active::after { bottom: 0; } /* green line flush with the bottom border (0px gap) */ /* Match-page markets are CARDS now: a rounded surface, a header strip (name left, caret right), then a body whose shape depends on the market — columns, a vertical list, or the Over/Under line strip. */ .lux-mkt { background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: 6px; margin-bottom: 10px; overflow: hidden; } .lux-mkt__head { display: flex; align-items: center; justify-content: space-between; gap: 9px; width: 100%; background: none; border: none; padding: 13px 14px; cursor: pointer; } .lux-mkt__caret { color: var(--lux-muted); font-size: .9rem; transition: transform .15s; flex: none; } .lux-mkt.is-collapsed .lux-mkt__caret { transform: rotate(-90deg); } .lux-mkt__name { flex: 1; min-width: 0; font-weight: 700; font-size: .98rem; color: var(--lux-text); text-align: left; } .lux-mkt__sels { display: block; border-top: 1px solid var(--lux-border); } .lux-mkt.is-collapsed .lux-mkt__sels { display: none; } /* COLUMNS — 1X2 / Double Chance / BTTS: each outcome a column (label above a flat yellow price), thin dividers between, the whole row highlighting the selected price. Flat (no button box), like the reference. */ .lux-mcols { display: grid; grid-template-columns: repeat(var(--n, 3), 1fr); } .lux-mcell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 46px; padding: 7px 4px; background: none; border: 0; cursor: pointer; } .lux-mcols .lux-mcell + .lux-mcell { border-left: 1px solid var(--lux-border); } .lux-mcell__cap { font-size: .8rem; line-height: 1.15; color: var(--lux-muted); text-align: center; } .lux-mcell__odds { font-size: 1.05rem; font-weight: 700; color: var(--lux-tile-odds); } .lux-sel.lux-mcell.is-on { background: var(--lux-odds-on-bg); } .lux-sel.lux-mcell.is-on .lux-mcell__cap, .lux-sel.lux-mcell.is-on .lux-mcell__odds { color: var(--lux-odds-on-text); } .lux-mcell--locked { color: var(--lux-muted); opacity: .5; cursor: not-allowed; user-select: none; } /* LIST — markets with many outcomes (Half Time/Full Time, …): one row each, name left, yellow price right. */ .lux-mlist { display: flex; flex-direction: column; } .lux-mrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 38px; padding: 8px 14px; background: none; border: 0; border-top: 1px solid var(--lux-border); text-align: left; cursor: pointer; } .lux-mlist .lux-mrow:first-child { border-top: 0; } .lux-mrow__name { flex: 1; min-width: 0; font-size: .9rem; color: var(--lux-team); } .lux-mrow__odds { font-size: 1rem; font-weight: 700; color: var(--lux-tile-odds); } .lux-sel.lux-mrow.is-on { background: var(--lux-odds-on-bg); } .lux-sel.lux-mrow.is-on .lux-mrow__name, .lux-sel.lux-mrow.is-on .lux-mrow__odds { color: var(--lux-odds-on-text); } /* OVER/UNDER LINE LIST — a fixed Over|Under (or team-name) header on a lighter strip, then a vertical list of line rows (line value | priceA | priceB). The line value sits in a left column with a divider; prices align under the header. Shows 3 rows, then "Show more" reveals the rest (see the clamp rules below). */ .lux-mkt--oum .lux-oum__sub { display: grid; grid-template-columns: 72px 1fr 1fr; align-items: center; background: var(--lux-surface-2); } .lux-oum__col { text-align: center; font-weight: 700; font-size: .9rem; color: var(--lux-text); padding: 6px 0; } .lux-olines { display: flex; flex-direction: column; } .lux-oline { display: grid; grid-template-columns: 72px 1fr 1fr; align-items: stretch; border-top: 1px solid var(--lux-border); } .lux-olines .lux-oline:first-child { border-top: 0; } /* 3-way line markets (European/3-way Handicap): a Draw column → Home | Draw | Away under the line. */ .lux-mkt--oum3 .lux-oum__sub, .lux-mkt--oum3 .lux-oline { grid-template-columns: 72px 1fr 1fr 1fr; } .lux-oum__ln { display: flex; align-items: center; justify-content: center; font-size: .95rem; color: var(--lux-muted); border-right: 1px solid var(--lux-border); } /* GRID — many-option markets ordered low→high odds; column count scales to label length: 4 (Correct Score), 3 (combos / margins), 2 (player names). The cell borders form the segment dividers. */ .lux-mgrid { display: grid; } .lux-mgrid--4 { grid-template-columns: repeat(4, 1fr); } .lux-mgrid--3 { grid-template-columns: repeat(3, 1fr); } .lux-mgrid--2 { grid-template-columns: repeat(2, 1fr); } .lux-mgrid .lux-mcell { border-left: 1px solid var(--lux-border); border-top: 1px solid var(--lux-border); } .lux-mgrid--4 .lux-mcell:nth-child(4n+1) { border-left: 0; } .lux-mgrid--4 .lux-mcell:nth-child(-n+4) { border-top: 0; } .lux-mgrid--3 .lux-mcell:nth-child(3n+1) { border-left: 0; } .lux-mgrid--3 .lux-mcell:nth-child(-n+3) { border-top: 0; } .lux-mgrid--2 .lux-mcell:nth-child(2n+1) { border-left: 0; } .lux-mgrid--2 .lux-mcell:nth-child(-n+2) { border-top: 0; } /* CLAMP + "Show more" — bodies show 3 rows (cells = 3 × columns = 12 / 9 / 6); the button reveals the rest. */ .lux-mexp__more { display: block; width: 100%; background: none; border: 0; border-top: 1px solid var(--lux-border); color: var(--lux-primary); font-family: inherit; font-weight: 700; font-size: .85rem; padding: 11px 0; cursor: pointer; } .lux-mlist.is-clamped .lux-mrow:nth-child(n+4) { display: none; } .lux-olines.is-clamped .lux-oline:nth-child(n+4) { display: none; } .lux-mgrid--4.is-clamped .lux-mcell:nth-child(n+13) { display: none; } .lux-mgrid--3.is-clamped .lux-mcell:nth-child(n+10) { display: none; } .lux-mgrid--2.is-clamped .lux-mcell:nth-child(n+7) { display: none; } .lux-fav { background: none; border: none; color: var(--lux-muted); font-size: 1.05rem; cursor: pointer; padding: 0 2px; line-height: 1; } .lux-fav.is-fav { color: var(--lux-gold); } /* ── Page title + back link + inline button (More / Code Hub / Jackpots) ── */ .lux-page__title { font-size: 1.25rem; font-weight: 800; letter-spacing: -.3px; margin: 16px 2px 12px; } .lux-back { display: inline-block; font-size: .85rem; font-weight: 700; color: var(--lux-muted); margin: 14px 0 2px; } .lux-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; background: var(--lux-primary); color: var(--lux-on-primary); border: none; border-radius: var(--lux-radius-sm); padding: 9px 16px; font-size: .9rem; font-weight: 700; cursor: pointer; transition: filter .15s, transform .08s; } .lux-btn:hover { filter: brightness(1.07); } .lux-btn:active { transform: scale(.97); } .lux-btn:disabled { opacity: .6; } /* ── More hub ──────────────────────────────────────────────── */ .lux-more__grid { display: flex; flex-direction: column; gap: 10px; } .lux-morecard { display: flex; align-items: center; gap: 14px; padding: 16px; background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: var(--lux-radius); box-shadow: var(--lux-shadow); } .lux-morecard:active { background: var(--lux-hover); } .lux-morecard__icon { font-size: 1.6rem; line-height: 1; } .lux-morecard__text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .lux-morecard__title { font-weight: 700; font-size: 1rem; color: var(--lux-text); } .lux-morecard__desc { font-size: .82rem; color: var(--lux-muted); } .lux-morecard__chev { font-size: 1.5rem; color: var(--lux-muted); line-height: 1; } /* Appearance (theme) control — a button styled like a morecard; neutralise the UA button look. */ .lux-themecard { width: 100%; margin-top: 10px; appearance: none; -webkit-appearance: none; cursor: pointer; font: inherit; color: inherit; text-align: left; } /* ── Code Hub ──────────────────────────────────────────────── */ .lux-hub__tabs { display: flex; gap: 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 4px 0 6px; } /* (item 2) Comfortable vertical padding on the Popular · Recent · Mine pills — the base .lux-chip felt cramped here. Scoped to .lux-hub__tabs so other .lux-chip uses are untouched. */ .lux-hub__tabs .lux-chip { white-space: nowrap; padding-top: 8px; padding-bottom: 8px; } .lux-hub__list { display: flex; flex-direction: column; gap: 11px; margin-top: 8px; } .lux-hub__card { background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: var(--lux-radius); padding: 14px; box-shadow: var(--lux-shadow); } .lux-hub__head { display: flex; align-items: center; gap: 8px; } .lux-hub__code { font-weight: 800; font-size: 1.05rem; letter-spacing: 1px; color: var(--lux-text); } .lux-hub__badge { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--lux-gold); border: 1px solid var(--lux-gold); border-radius: 999px; padding: 2px 7px; } .lux-hub__odds { margin-left: auto; display: inline-flex; align-items: baseline; gap: 5px; font-size: 1.05rem; font-weight: 800; color: var(--lux-accent); } /* (#6) "Odds:" label — a smaller, muted prefix before the bold accent value, distinct from it but on-card. */ .lux-hub__oddslabel { font-size: .68rem; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--lux-muted); } .lux-hub__name { font-size: .9rem; color: var(--lux-text); margin: 8px 0 0; } /* Games — ONE per row, stacked in COLUMNS of 4 (grid-auto-flow:column → games 1–4 fill column 1, 5–8 column 2, …). Swipe left/right to the next column; a › hint appears when there are >4 games. */ .lux-hub__legwrap { position: relative; display: flex; align-items: stretch; margin: 10px 0 2px; border-top: 1px solid var(--lux-border); } .lux-hub__leggrid { flex: 1; min-width: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(4, auto); grid-auto-columns: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--lux-border) transparent; } .lux-hub__leggrid::-webkit-scrollbar { height: 5px; } .lux-hub__leggrid::-webkit-scrollbar-thumb { background: var(--lux-border); border-radius: 999px; } .lux-hub__legrow { scroll-snap-align: start; display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--lux-border); box-sizing: border-box; } .lux-hub__legno { flex: none; width: 16px; text-align: right; color: var(--lux-muted); font-size: .7rem; font-weight: 700; line-height: 1.55; } .lux-hub__leginfo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .lux-hub__legtop { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .lux-hub__legsel { color: var(--lux-text); font-weight: 700; font-size: .84rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lux-hub__legodds { color: var(--lux-primary); font-weight: 800; font-size: .82rem; white-space: nowrap; flex: none; } .lux-hub__legsub { color: var(--lux-muted); font-size: .67rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lux-hub__swipehint { flex: none; align-self: center; width: 16px; text-align: center; color: var(--lux-muted); font-size: 1.4rem; line-height: 1; opacity: .55; pointer-events: none; } /* (#7) Per-leg final score on a settled game — a small bold "FT h–a" beneath the match/market line. */ .lux-hub__legscore { color: var(--lux-text); font-size: .68rem; font-weight: 800; font-variant-numeric: tabular-nums; margin-top: 1px; } /* (#3 / #9 / #10) Outcome chips for a settled code: pass-count + biggest-win, kept on their own row. */ .lux-hub__outcome { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; } .lux-hub__graded { font-size: .7rem; font-weight: 800; white-space: nowrap; border-radius: 999px; padding: 2px 9px; color: var(--lux-warning); background: color-mix(in srgb, var(--lux-warning, #f5a623) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lux-warning, #f5a623) 32%, transparent); } .lux-hub__graded.is-all { color: var(--lux-success, #2e9e5b); background: color-mix(in srgb, var(--lux-success, #2e9e5b) 15%, transparent); border-color: color-mix(in srgb, var(--lux-success, #2e9e5b) 35%, transparent); } .lux-hub__maxwin { font-size: .7rem; font-weight: 800; white-space: nowrap; border-radius: 999px; padding: 2px 9px; color: var(--lux-success, #2e9e5b); background: color-mix(in srgb, var(--lux-success, #2e9e5b) 12%, transparent); border: 1px solid color-mix(in srgb, var(--lux-success, #2e9e5b) 30%, transparent); } /* (#3) Footer stats — labelled chips ("5 folds · 🔥 234 plays · 🎯 12 placed · by @creator"), scannable. */ .lux-hub__foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; } .lux-hub__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; font-size: .76rem; color: var(--lux-muted); } .lux-hub__stat { white-space: nowrap; } .lux-hub__legcount { font-weight: 600; color: var(--lux-text); } .lux-hub__creator { color: var(--lux-primary); font-weight: 600; } .lux-hub__uses { color: var(--lux-warning); font-weight: 700; } .lux-hub__bets { color: var(--lux-primary); font-weight: 700; } .lux-hub__use { margin-left: auto; flex: none; } /* (#4) A started code can't be loaded — a muted, non-actionable "Started" tag replaces the Use button. */ .lux-hub__started { margin-left: auto; flex: none; font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--lux-muted); border: 1px solid var(--lux-border); border-radius: 999px; padding: 4px 11px; } /* Earn My Codes — folds/plays move UP into a meta row; the footer becomes a strong social-share row with a "share to start earning" CTA (started codes show a muted "sharing closed" note instead — they can't earn). */ .lux-hub__metarow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 6px 0 2px; font-size: .76rem; color: var(--lux-muted); } .lux-earnshare { display: flex; flex-direction: column; align-items: stretch; gap: 9px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--lux-border); } .lux-earnshare__cta { font-size: .9rem; font-weight: 800; color: #1d9e75; } .lux-earnshare__row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .lux-earnshare__ic { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; flex: 0 0 auto; cursor: pointer; border: 0; transition: transform .1s ease; } .lux-earnshare__ic:active { transform: scale(.92); } .lux-earnshare__ic--wa { background: #25D366; } .lux-earnshare__ic--tg { background: #229ED9; } .lux-earnshare__ic--x { background: #0f1419; } .lux-earnshare__ic--fb { background: #1877F2; } .lux-earnshare__ic--ig { background: linear-gradient(45deg,#feda75 5%,#fa7e1e 25%,#d62976 50%,#962fbf 75%,#4f5bd5 95%); } .lux-earnshare__ic--tiktok { background: #010101; } .lux-earnshare__ic--sms { background: #5f6b76; } .lux-earnshare--closed { flex-direction: row; align-items: center; gap: 8px; } .lux-earnshare--closed .lux-hub__started { margin-left: 0; } .lux-earnshare__closedtxt { font-size: .8rem; color: var(--lux-muted); } /* Popular-ranking badges: a live "starts soon" countdown + a top-league star. */ .lux-hub__badges { display: flex; align-items: center; gap: 6px; margin-top: 8px; } .lux-hub__soon { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 800; color: var(--lux-danger, #e5484d); background: color-mix(in srgb, var(--lux-danger, #e5484d) 14%, transparent); border: 1px solid color-mix(in srgb, var(--lux-danger, #e5484d) 35%, transparent); border-radius: 999px; padding: 2px 8px; } .lux-hub__soon.is-live { color: #fff; background: var(--lux-danger, #e5484d); } .lux-hub__cd { font-variant-numeric: tabular-nums; letter-spacing: .5px; } .lux-hub__top { font-size: .8rem; line-height: 1; } /* ── Jackpots ──────────────────────────────────────────────── */ .lux-jp__list { display: flex; flex-direction: column; gap: 11px; margin-top: 12px; } .lux-jp__card { background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: var(--lux-radius); padding: 16px; box-shadow: var(--lux-shadow); } .lux-jp__name { font-weight: 800; font-size: 1.05rem; color: var(--lux-text); } .lux-jp__facts { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0 0; } .lux-jp__fact { display: flex; flex-direction: column; gap: 1px; } .lux-jp__fact dt { font-size: .72rem; color: var(--lux-muted); text-transform: uppercase; letter-spacing: .5px; } .lux-jp__fact dd { margin: 0; font-size: .96rem; font-weight: 700; color: var(--lux-text); } .lux-jp__tiers { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .lux-jp__tier { font-size: .74rem; font-weight: 700; color: var(--lux-muted); background: var(--lux-surface-2); border-radius: 999px; padding: 4px 10px; } .lux-jp__enter { margin-top: 14px; width: 100%; } /* ── Jackpot slate (1/X/2 pickers) ─────────────────────────── */ .lux-jpslate { list-style: none; margin: 16px 0 0; padding: 0; } .lux-jpslate__row { display: flex; align-items: center; gap: 10px; padding: 10px; margin-bottom: 8px; background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: var(--lux-radius); box-shadow: var(--lux-shadow); } .lux-jpslate__no { font-size: .74rem; font-weight: 800; color: var(--lux-muted); min-width: 20px; } .lux-jpslate__teams { flex: 1; font-size: .88rem; font-weight: 600; color: var(--lux-text); } .lux-jpslate__picks { display: flex; gap: 5px; } .lux-jppick { position: relative; } .lux-jppick input { position: absolute; opacity: 0; width: 0; height: 0; } .lux-jppick span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; background: var(--lux-surface-2); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); font-size: .92rem; font-weight: 800; color: var(--lux-text); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .lux-jppick input:checked + span { background: var(--lux-primary); border-color: var(--lux-primary); color: var(--lux-on-primary); } .lux-jppick input:focus-visible + span { outline: 2px solid var(--lux-primary); outline-offset: 1px; } /* ── Msg states (reused by jackpot entry + account forms) ──── */ .lux-msg { margin-top: 10px; font-size: .88rem; min-height: 1.2em; color: var(--lux-muted); text-align: center; } .lux-msg.is-ok { color: var(--lux-success); font-weight: 700; } .lux-msg.is-err { color: var(--lux-danger); } /* ── Account hub (RG · promos · terms · disputes) ──────────── */ .lux-acct-card { background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: var(--lux-radius); padding: 16px; margin-bottom: 12px; box-shadow: var(--lux-shadow); } .lux-acct__h { font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .8px; color: var(--lux-muted); margin: 0 0 12px; } .lux-acct__balance { font-size: 1.6rem; font-weight: 800; color: var(--lux-text); margin: 0; } .lux-acct__limits { margin: 0; } .lux-acct__limit { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--lux-border); font-size: .9rem; } .lux-acct__limit:last-child { border-bottom: none; } .lux-acct__limit dt { color: var(--lux-muted); margin: 0; } .lux-acct__limit dd { margin: 0; font-weight: 700; color: var(--lux-text); } .lux-acct__excluded { font-weight: 700; color: var(--lux-danger); margin: 4px 0 6px; } .lux-acct__hint { font-size: .82rem; color: var(--lux-muted); margin: 10px 0; } .lux-acct__form { margin-top: 12px; } .lux-acct__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font-size: .9rem; color: var(--lux-muted); } .lux-acct__row select, .lux-acct__textarea, .lux-acct__input { background: var(--lux-surface-2); color: var(--lux-text); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); font-size: .95rem; font-family: inherit; padding: 9px 12px; } .lux-acct__row select { min-width: 130px; } .lux-acct__textarea, .lux-acct__input { width: 100%; display: block; margin-bottom: 10px; } .lux-acct__textarea { resize: vertical; } .lux-btn--danger { background: var(--lux-danger); } .lux-btn.is-armed { background: var(--lux-danger); animation: lux-pulse 1s ease-in-out infinite; } @keyframes lux-pulse { 50% { filter: brightness(1.18); } } .lux-acct__grants { list-style: none; margin: 0; padding: 0; } .lux-grant { display: flex; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--lux-border); font-size: .9rem; } .lux-grant:last-child { border-bottom: none; } .lux-grant__type { font-weight: 700; color: var(--lux-gold); } .lux-grant__amt { color: var(--lux-text); font-weight: 700; } .lux-grant__exp { margin-left: auto; font-size: .78rem; color: var(--lux-muted); } .lux-acct__terms { font-size: .9rem; color: var(--lux-text); margin: 0; } .lux-acct__terms--none { color: var(--lux-warning); } .lux-acct__disputes { list-style: none; margin: 0 0 14px; padding: 0; } .lux-disp { padding: 10px 0; border-bottom: 1px solid var(--lux-border); } .lux-disp:last-child { border-bottom: none; } .lux-disp__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .lux-disp__status { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 2px 8px; border-radius: 999px; background: var(--lux-surface-2); color: var(--lux-muted); } .lux-disp__status--open { color: var(--lux-warning); } .lux-disp__status--resolved { color: var(--lux-success); } .lux-disp__status--rejected { color: var(--lux-danger); } .lux-disp__date { margin-left: auto; font-size: .76rem; color: var(--lux-muted); } .lux-disp__reason { font-size: .88rem; color: var(--lux-text); margin: 0; } .lux-disp__res { font-size: .84rem; color: var(--lux-muted); margin: 4px 0 0; font-style: italic; } /* Desktop: a touch more breathing room. */ @media (min-width: 560px) { .lux-event__title { font-size: 1.02rem; } .lux-market__sels { gap: 8px; } } /* ════════ Live (in-play) tab ════════ */ /* .lux-live__head (the old "⏱ Live" page header) was removed — the Live nav tab labels this view now. */ .lux-live__list { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; } .lux-live__empty { padding: 32px 12px; } /* Each live match card reuses .lux-match's surface/border; the scoreboard + clock sit on top. */ .lux-live__match { display: flex; flex-direction: column; gap: 8px; } .lux-live__scoreboard { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .lux-live__badge { flex: none; font-size: .64rem; font-weight: 900; letter-spacing: .6px; text-transform: uppercase; color: var(--lux-on-primary); background: var(--lux-danger); border-radius: 4px; padding: 3px 7px; display: inline-flex; align-items: center; gap: 3px; } .lux-live__score { flex: 1; min-width: 0; font-weight: 700; font-size: .98rem; color: var(--lux-text); } .lux-live__score b { font-size: 1.12rem; color: var(--lux-primary); margin: 0 2px; } /* The ticking clock — a pulsing dot + the live minute (or HT/period marker). */ .lux-live__clock { flex: none; font-weight: 800; font-size: .9rem; color: var(--lux-danger); display: inline-flex; align-items: center; gap: 5px; font-variant-numeric: tabular-nums; } .lux-live__clock::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lux-danger); animation: lux-livepulse 1.4s ease-in-out infinite; } @keyframes lux-livepulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } .lux-live__open { align-self: flex-start; font-size: .78rem; font-weight: 700; color: var(--lux-primary); text-decoration: none; } /* Red-card chips on the scoreboard (omitted when none). */ .lux-live__reds { flex: none; display: inline-flex; gap: 5px; } .lux-live__red { font-size: .7rem; font-weight: 800; color: var(--lux-text); display: inline-flex; align-items: center; gap: 2px; } /* The single headline odds block on a live card — bettable tiles if the market is open, else a muted non-bettable pre-match reference + an honest "live odds suspended" note. */ .lux-live__odds { display: flex; flex-direction: column; gap: 7px; background: var(--lux-surface-2); border: 1px solid var(--lux-border); border-radius: var(--lux-radius, 10px); padding: 9px 10px; } .lux-live__oddshead { display: flex; align-items: center; gap: 8px; } .lux-live__mktname { font-size: .82rem; font-weight: 800; color: var(--lux-text); } .lux-live__susptag { margin-left: auto; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; color: var(--lux-muted); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; } .lux-live__refrow { display: grid; gap: 7px; } /* A NON-bettable reference price (suspended live market) — looks like a tile but dashed/muted + not clickable (no .lux-sel / data-sel, so the slip island never touches it). */ .lux-live__ref { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border: 1px dashed var(--lux-border); border-radius: 6px; background: var(--lux-surface); cursor: not-allowed; user-select: none; } .lux-live__refname { font-size: .72rem; font-weight: 700; color: var(--lux-muted); } .lux-live__refodds { font-size: .96rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--lux-text); opacity: .65; } .lux-live__refnote { margin: 0; font-size: .68rem; line-height: 1.3; color: var(--lux-muted); } /* The Live nav tab — ALWAYS red, even when it's the active tab (the higher specificity beats .is-active's text colour). */ .lux-htabs .lux-tabitem.lux-htabs__live, .lux-htabs .lux-tabitem.lux-htabs__live.is-active { color: var(--lux-danger); font-weight: 800; } .lux-navdot--live { background: var(--lux-danger); } /* In-play odds movement — a brief flash + a ▲/▼ arrow on prices that changed between live refreshes. */ .lux-sel--up, .lux-sel--down { position: relative; } /* the brief background flash plays ONLY on an actual change (the .lux-sel--bump trigger) — re-applying a PERSISTENT arrow to an unchanged tile must not re-flash it */ .lux-sel--up.lux-sel--bump { animation: luxOddsUp 1.2s ease-out; } .lux-sel--down.lux-sel--bump { animation: luxOddsDown 1.2s ease-out; } @keyframes luxOddsUp { from { background: rgba(34, 197, 94, .30); } to { background: transparent; } } @keyframes luxOddsDown { from { background: rgba(239, 68, 68, .30); } to { background: transparent; } } .lux-sel[data-move]::after { content: attr(data-move); position: absolute; top: 1px; right: 3px; font-size: 9px; line-height: 1; font-weight: 700; } .lux-sel--up[data-move]::after { color: #16a34a; } .lux-sel--down[data-move]::after { color: #dc2626; } /* ════════ World Cup tab ════════ */ .lux-wc { display: flex; flex-direction: column; gap: 12px; } .lux-wc__topnav { position: sticky; top: var(--ls-sticky-top, 0px); z-index: 11; display: flex; align-items: baseline; gap: 11px; margin: 0 0px; padding: 9px 0px 7px; background: var(--lux-bg); } /* Football (→ home) | World Cup — PINS on scroll */ /* the ✕ close (My Bets style) pinned to the far right of the WC header. Two-class selector so margin-left:auto beats .lux-pagex's `margin:8px 0 0` (which is defined later in this file and would otherwise win on order). */ .lux-wc__topnav .lux-wc__close { margin: 0 0 0 auto; align-self: center; } /* Branded hero banner — a gold→primary gradient with the FIFA World Cup 2026 title + dates. Distinct from the plain catalog header so the tournament reads as its own headline destination. */ /* World Cup hero = the worldcup.webp banner image, full-bleed within the card. */ .lux-wc__hero { position: relative; overflow: hidden; border-radius: var(--lux-radius-lg); margin-top: 6px; box-shadow: var(--lux-shadow); line-height: 0; } .lux-wc__banner { display: block; width: 100%; height: auto; } .lux-wc__empty { padding: 32px 12px; } /* World Cup match meta — its league label carries the gold accent + trophy. */ .lux-wc__match .lux-match__league { color: var(--lux-gold); font-weight: 800; } /* Live WC score chip (flat — no ticking island on this page). */ .lux-wc__live { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; color: var(--lux-text); font-variant-numeric: tabular-nums; } .lux-wc__live b { color: var(--lux-primary); } .lux-wc__livebadge { font-size: .6rem; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--lux-on-primary); background: var(--lux-danger); border-radius: 4px; padding: 2px 5px; } /* The World Cup nav tab — gold accent so it stands out next to the red Live tab. */ .lux-htabs__wc { color: var(--lux-gold); font-weight: 800; } /* World Cup sub-tabs (Fixtures / Tables / Results) — styled like the home browse bar (Leagues/Today/ Countries): 3 equal full-bleed links, active = standout text + green underline. Sticky under the title so it pins while the banner + content scroll. Plain server-side ?tab= links, never touch the slip/live islands. */ .lux-wc__tabs { display: flex; position: sticky; top: calc(var(--ls-sticky-top, 0px) + 44px); z-index: 10; margin: 4px 0 8px; background: var(--lux-bg); border-bottom: 1px solid var(--lux-border); } /* pins right under the sticky Football | World Cup line */ .lux-wc__tab { flex: 1 1 0; text-align: center; padding: 10px 4px; font-size: .95rem; font-weight: 600; color: var(--lux-muted); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; -webkit-tap-highlight-color: transparent; } .lux-wc__tab.is-active { color: var(--lux-text); font-weight: 800; border-bottom-color: var(--lux-primary); } .lux-wc__tab:active { background: var(--lux-hover); } /* World Cup view hides the home Highlights strip + Leagues/Today/Countries sub-nav (req 1). */ .lux-htabs.is-wc-off, .lux-subtabs.is-wc-off { display: none; } /* Upcoming schedule row (Results tab) — muted kickoff time on the right where a finished row shows its score. */ .lux-wc__kick { flex: none; font-size: .82rem; font-weight: 700; color: var(--lux-muted); font-variant-numeric: tabular-nums; } /* FIFA group standings (Tables tab) — one compact table per group: POS · TEAM · P W D L · GD · PTS. */ .lux-wc__tables { display: flex; flex-direction: column; gap: 16px; margin-top: 6px; } .lux-grp { background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); overflow: hidden; } .lux-grp__name-h { padding: 8px 12px; font-size: .85rem; font-weight: 800; color: var(--lux-gold); background: var(--lux-surface-2); border-bottom: 1px solid var(--lux-border); } .lux-grp__head, .lux-grp__row { display: grid; grid-template-columns: 26px minmax(0,1fr) repeat(4, 22px) 30px 30px; align-items: center; gap: 2px; padding: 6px 10px; } .lux-grp__head { font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--lux-muted); } .lux-grp__row { font-size: .82rem; border-top: 1px solid var(--lux-border); } .lux-grp__row.is-adv .lux-grp__pos { color: var(--lux-primary); font-weight: 800; } /* top-two advance marker */ .lux-grp__pos { text-align: center; color: var(--lux-muted); } .lux-grp__team { display: flex; align-items: center; gap: 7px; min-width: 0; } .lux-grp__logo { width: 18px; height: 18px; object-fit: contain; flex: none; } .lux-grp__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; } .lux-grp__c { text-align: center; color: var(--lux-muted); font-variant-numeric: tabular-nums; } .lux-grp__pts { text-align: center; font-weight: 800; color: var(--lux-text); font-variant-numeric: tabular-nums; } /* Finished-match row (Results tab) — final score + FT badge, no odds tiles. */ .lux-wc__result .lux-match__row { align-items: center; } .lux-wc__score { display: inline-flex; align-items: center; gap: 6px; font-weight: 900; font-size: 1.12rem; font-variant-numeric: tabular-nums; color: var(--lux-text); } .lux-wc__score span { opacity: .45; font-weight: 700; } .lux-wc__score--na { opacity: .45; font-size: 1rem; } .lux-wc__ft { font-size: .6rem; font-weight: 900; letter-spacing: .5px; text-transform: uppercase; color: var(--lux-muted); background: var(--lux-surface-2); border: 1px solid var(--lux-border); border-radius: 4px; padding: 2px 6px; } /* ── AI Assist picks widget (legacy — kept for renderAiAssistWidget backward compat) ── */ .lux-ai-picks { padding: 0 0 12px; } .lux-ai-picks__head { display:flex; align-items:center; justify-content:space-between; padding: 8px 14px 4px; } .lux-ai-picks__title { font-weight:600; font-size:.95rem; } .lux-ai-picks__18 { font-size:.7rem; color:var(--lux-muted); border:1px solid var(--lux-border); border-radius:4px; padding:1px 5px; } .lux-ai-pick__head { display:flex; align-items:center; gap:6px; } .lux-ai-pick__icon { font-size:1rem; flex-shrink:0; } .lux-ai-pick__match { font-weight:600; font-size:.9rem; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .lux-ai-pick__time { font-size:.75rem; color:var(--lux-muted); flex-shrink:0; } .lux-ai-pick__brief { font-size:.82rem; line-height:1.55; color:var(--lux-muted); margin:0; padding:0; font-style:italic; } .lux-ai-pick__rg { font-size:.68rem; color:var(--lux-muted); margin:0; line-height:1.4; } .lux-ai-pick__rg a { color:var(--lux-muted); text-decoration:underline; } .lux-ai-picks__disc { font-size:.7rem; color:var(--lux-muted); padding:0 14px; margin:0; line-height:1.4; } .lux-ai-picks__rg { color:var(--lux-muted); text-decoration:underline; } /* ── AI Assist tab panel ─────────────────────────────────────── */ .lux-htabs__ai { /* inherits lux-tabitem — no special colour needed */ } .lux-ai-head { padding: var(--lux-sp-2, 8px) var(--lux-sp-3, 12px); border-bottom: 1px solid var(--lux-border); } .lux-ai-head__title { font-weight:600; display:block; } .lux-ai-head__disc { font-size:.72rem; color:var(--lux-muted); display:block; margin-top:2px; } .lux-ai-pick { border-bottom: 1px solid var(--lux-border); padding: var(--lux-sp-3, 12px); } /* Row 1: teams (left, linked) + league under them · kickoff time on the right */ .lux-ai-pick__hd { display:flex; justify-content:space-between; align-items:flex-start; gap: var(--lux-sp-2, 8px); } .lux-ai-pick__hdL { min-width:0; } .lux-ai-pick__teams { font-weight:600; font-size:.95rem; color:var(--lux-text); text-decoration:none; display:block; } .lux-ai-pick__league { font-size:.72rem; color:var(--lux-muted); margin-top:2px; } .lux-ai-pick__time { font-size:.78rem; color:var(--lux-muted); white-space:nowrap; flex-shrink:0; } /* Explainer — NOT italic; tight gap above (close to league), normal gap below before odds */ .lux-ai-pick__brief { font-size:.85rem; line-height:1.5; color:var(--lux-text); margin: 4px 0 var(--lux-sp-2, 8px); font-style:normal; width:100%; } /* The single AI-suggested market: header rectangle on top of ≤3 bordered boxes, centred, 78% width */ .lux-aimkt { width:78%; margin: 0 auto; border:1px solid var(--lux-border); border-radius:var(--lux-radius-sm, 6px); overflow:hidden; } .lux-aimkt__hd { padding:4px 10px; font-size:.72rem; color:var(--lux-muted); text-align:left; background:var(--lux-surface-2); border-bottom:1px solid var(--lux-border); } .lux-aimkt__row { display:flex; } .lux-aimkt__row .lux-sel { flex:1 1 0; border:0; border-right:1px solid var(--lux-border); border-radius:0; background:transparent; } .lux-aimkt__row .lux-sel:last-child { border-right:0; } /* ════════ Combo (Sports + Casino) — fixed bottom nav, recreated from the host app's BottomNav ════════ */ .lux-bnav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px; z-index: 200; display: grid; grid-template-columns: repeat(5, 1fr); height: var(--lux-bnav-h, 60px); padding-bottom: env(safe-area-inset-bottom); background: linear-gradient(180deg, #1f2b38, #16202c); border-top: 1px solid rgba(255,255,255,.08); } /* page-width (matches .lux-wrap 720px), not edge-to-edge */ .lux-bnav__item.is-disabled { opacity: .4; cursor: default; } .lux-bnav__ic svg { width: 24px; height: 24px; } .lux-bnav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 6px 3px; font-size: 11px; font-weight: 600; line-height: 1; color: #c6d0db; text-decoration: none; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; } .lux-bnav__item:active { transform: translateY(-1px); } .lux-bnav__item.is-active { color: #00d25a; } .lux-bnav__ic, .lux-bnav__icrel { width: 24px; height: 24px; display: grid; place-items: center; } .lux-bnav__icrel { position: relative; } .lux-bnav__item img { width: 24px; height: 24px; object-fit: contain; } .lux-bnav__item.is-active img { filter: drop-shadow(0 0 6px rgba(0,210,90,.6)); } .lux-bnav__spin { position: relative; width: 24px; height: 24px; } .lux-bnav__wheel { width: 24px; height: 24px; animation: lux-bnav-spin 2.5s linear infinite; } .lux-bnav__pointer { position: absolute; top: -2px; left: 50%; width: 40px !important; height: auto !important; transform: translateX(-50%); pointer-events: none; } @keyframes lux-bnav-spin { to { transform: rotate(360deg); } } .lux-bnav__badge { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: #e21f1f; color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; } .lux-bnav__badge[hidden] { display: none; } /* the display:grid above overrides the [hidden] UA style — restore it so a 0 count hides */ @media (max-width: 400px) { .lux-bnav__item { font-size: 10px; gap: 3px; padding: 5px 3px; } } @media (max-width: 360px) { .lux-bnav { --lux-bnav-h: 54px; } .lux-bnav__item { font-size: 9px; } } /* Combo body: clear the fixed bar so the feed, the slip drawer and the slip FAB sit above it. */ .lux-combo .lux-wrap { padding-bottom: calc(var(--lux-bnav-h, 60px) + env(safe-area-inset-bottom) + 8px); } .lux-combo .lux-slip { bottom: calc(var(--lux-bnav-h, 60px) + env(safe-area-inset-bottom)); } /* Bet Slip tab (req 4): the floating FAB is hidden in the combo — the slip opens from this tab instead; the badge shows the live selection count, in brand green (distinct from the red Freebets badge). */ .lux-combo .lux-fab { display: none !important; } .lux-bnav__slip .lux-bnav__ic { width: 24px; height: 24px; color: #c6d0db; } .lux-bnav__slip:active .lux-bnav__ic { color: #00d25a; } .lux-bnav__slipbadge { background: var(--lux-primary, #3ad968); color: #04140b; } /* ════════ Combo top header + top menu (recreated from Header.tsx + TopUtilityNav.tsx) ════════ */ .lux-combo { --tb-yellow: #ffd21c; } /* Combo: tighten the sportsbook gutter (14px → 8px) so the book content isn't deeply inset vs the full-bleed casino strip. Shrink the wrap padding AND every full-bleed bar's break-out margin in lockstep. */ .lux-combo .lux-wrap { padding-left: 8px; padding-right: 8px; } .lux-combo .lux-home-head, .lux-combo .lux-home-nav, .lux-combo .lux-wctitle, .lux-combo .lux-fifawc, .lux-combo .lux-chdr, .lux-combo .lux-cmenu, .lux-combo .lux-cstrip, .lux-combo .tbc-nav { margin-left: -8px; margin-right: -8px; } /* The casino body (#1B2632, holds the game-tile grid) must span the SAME width as the .lux-wrap feed (#1B1E25) — break it out of the wrap's 8px gutter so it's edge-to-edge, not inset. */ .lux-combo .tbc-body { margin-left: -8px; margin-right: -8px; } .lux-combo .lux-home-head, .lux-combo .lux-home-nav, .lux-combo .lux-wctitle, .lux-combo .lux-fifawc { padding-left: 8px; padding-right: 8px; } /* wall-to-wall relabel banner + WC-tiles image on the tighter combo gutter */ .lux-combo .lux-fifawc { padding-right: 0; } /* WC game cards run to the right edge (no right padding) */ /* Header pins at the very top; the menu pins under it (--lux-chdr-h, set by JS); the book's own nav pins under both (--ls-sticky-top, also set by JS). */ .lux-chdr { position: sticky; top: 0; z-index: 120; margin: 0 -14px; background: linear-gradient(135deg, #063e2b 0%, #032f25 74%); border-bottom: 1px solid rgba(255,255,255,.08); } /* exact --tb-topbar-bg green; full-bleed (break out of .lux-wrap 14px padding) */ .lux-chdr__in { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 6px 12px; } .lux-chdr__brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; cursor: pointer; } .lux-chdr__logo { height: 32px; width: auto; display: block; } .lux-chdr__acct { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; } .lux-chdr__lang { font-size: 12px; font-weight: 700; color: #cdd6df; padding: 2px 3px; } .lux-chdr__search { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; background: transparent; color: #e6edf3; border: 0; cursor: pointer; } .lux-chdr__bal { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; min-width: 128px; padding: 4px 5px 4px 10px; border: 1px solid var(--tb-yellow); border-radius: 9px; background: rgba(1,24,18,.7); } .lux-chdr__baltxt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .lux-chdr__baltxt small { font-size: 9px; line-height: 1; text-transform: uppercase; font-weight: 700; letter-spacing: .7px; color: #cdd6df; } .lux-chdr__baltxt strong { font-size: 13px; line-height: 1; font-weight: 800; color: var(--tb-yellow); white-space: nowrap; font-variant-numeric: tabular-nums; } .lux-chdr__wallet { height: 26px; display: inline-flex; align-items: center; padding: 0 11px; border-radius: 7px; background: var(--tb-yellow); color: #0f172a; font-size: 12px; font-weight: 800; text-decoration: none; cursor: pointer; white-space: nowrap; } .lux-chdr__cta { height: 30px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 8px; font-size: 12px; font-weight: 500; text-decoration: none; cursor: pointer; white-space: nowrap; } /* Login/Join text not bold (user) */ .lux-chdr__join { background: var(--tb-yellow); color: #111827; } .lux-chdr__login { background: transparent; color: #e6edf3; border: 1px solid rgba(255,255,255,.35); } /* ── Auth modal — 1:1 port of the TushindeBet campaign auth modal (AuthOverlay/AuthForms .module.css, dark theme values): black 70% overlay, gold-bordered #1f2b38 card, green +254 group, light #e5efff inputs, green pill CTA, #22c55e footer links. Holds the Login / Register / OTP views. ─────────────────────────── */ .lux-au { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; padding: max(18px, env(safe-area-inset-top)) 8px max(18px, env(safe-area-inset-bottom)); background: rgba(0,0,0,.7); overflow-y: auto; overscroll-behavior: contain; } .lux-au[hidden] { display: none; } .lux-au__card { position: relative; width: min(100%, 420px); max-height: calc(100dvh - 36px); overflow-y: auto; background: #1f2b38; border: 1px solid #ffd700; border-radius: 8px; box-shadow: 0 24px 70px rgba(0,0,0,.38); color: #fff; } .lux-au__x { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border-radius: 50%; border: none; background: #eef2f7; color: #0f172a; font-size: 18px; cursor: pointer; z-index: 2; } .lux-au__view { display: flex; flex-direction: column; gap: 18px; padding: 28px 22px 24px; } .lux-au__view[hidden] { display: none; } .lux-au__sectionTitle { text-align: center; color: #fff; font-size: 16px; margin: 0; font-weight: 1000; } .lux-au__sub { text-align: center; font-size: 14px; color: #d1d5db; margin: 0; } .lux-au__banner { width: 100%; height: auto; margin: 8px 0; display: block; border-radius: 4px; } .lux-au__form { display: flex; flex-direction: column; gap: 14px; } .lux-au__group { display: flex; background: #16a34a; border: 1px solid #475569; border-radius: 9px; overflow: hidden; font-size: 1.2rem; } .lux-au__prefix { padding: 14px; font-weight: 700; color: #fff; } .lux-au__group input { flex: 1; min-width: 0; background: #e5efff; border: none; padding: 14px; outline: none; font-weight: 600; color: #020617; font-size: 1.2rem; } .lux-au__darkInput { background: #e5efff; border: 1px solid #475569; color: #020617; padding: 14px; border-radius: 9px; font-size: 1.2rem; width: 100%; } .lux-au__group input::placeholder, .lux-au__darkInput::placeholder { color: #64748b; } .lux-au__pw { position: relative; display: flex; align-items: center; } .lux-au__pw input { padding-right: 70px; } .lux-au__toggle { position: absolute; right: 12px; background: transparent; border: none; color: #020617; font-weight: 700; font-size: .9rem; cursor: pointer; } .lux-au__row { display: flex; justify-content: space-between; align-items: center; font-size: 1rem; color: #d1d5db; } .lux-au__row label { display: flex; justify-content: center; align-items: center; gap: 6px; } .lux-au__err { margin: 0; font-size: 13px; color: #f87171; } .lux-au__btn { margin-top: 8px; background: #16a34a; color: #fff; padding: 16px; border-radius: 999px; border: none; font-size: 16px; font-weight: 800; cursor: pointer; } .lux-au__btn[disabled] { cursor: not-allowed; opacity: .56; } .lux-au__terms { display: flex; justify-content: center; color: #d1d5db; } .lux-au__terms p { margin: 0; text-align: center; } .lux-au__terms strong { color: #fff; } .lux-au__footer { display: flex; justify-content: center; align-items: center; gap: 4px; font-size: 1rem; color: #fff; } .lux-au__footer a { color: #22c55e; font-weight: 700; text-decoration: none; cursor: pointer; } .lux-au__sep { margin: 0 8px; color: #d1d5db; font-weight: 500; } .lux-au__resend { background: transparent; border: none; color: #22c55e; font-weight: 700; font-size: .95rem; cursor: pointer; margin-top: 2px; } .lux-au__resend[disabled] { color: #64748b; cursor: default; } @media (max-width: 420px) { .lux-au { padding: max(12px, env(safe-area-inset-top)) 6px max(12px, env(safe-area-inset-bottom)); } .lux-au__view { padding: 22px 16px 20px; gap: 14px; } .lux-au__row { align-items: flex-start; flex-direction: column; gap: 10px; font-size: .92rem; } .lux-au__footer { flex-wrap: wrap; row-gap: 2px; text-align: center; font-size: .95rem; } } /* ── Wallet sheet — 1:1 port of WalletPage/DepositPage/WithdrawPage .module.css (dark theme). ───────────── */ .lux-wl { position: fixed; inset: 0; z-index: 400; overflow-y: auto; overscroll-behavior: contain; background: rgba(0,0,0,.5); } .lux-wl[hidden] { display: none; } .lux-wl__card { max-width: 720px; max-height: 100vh; max-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; background: #1f2b38; padding: 28px; padding-bottom: max(28px, env(safe-area-inset-bottom)); position: relative; color: #fff; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; border-radius: 0 0 14px 14px; } /* content-height popup, CAPPED at one screen (scrolls internally past that); JS pins all views to the TALLEST view's height so switching never resizes; rounded bottom corners */ .lux-wl__close { position: absolute; top: 18px; right: 18px; background: #16a34a; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 18px; cursor: pointer; color: black; z-index: 2; } .lux-wl__back { position: absolute; top: 22px; left: 18px; color: #9aa4af; font-size: 15px; font-weight: 700; cursor: pointer; z-index: 2; } .lux-wl__view { display: flex; flex-direction: column; } .lux-wl__view[hidden] { display: none; } .lux-wl__logo { display: flex; justify-content: center; align-items: center; margin-bottom: 16px; } .lux-wl__logo img { height: 42px; width: auto; display: block; object-fit: contain; } .lux-wl__title { text-align: center; margin: 0; font-size: 1.7rem; font-weight: 700; } .lux-wl__subtitle { text-align: center; opacity: .75; margin: 0 0 24px; } .lux-wl__stats { display: flex; gap: .5rem; margin-bottom: 16px; color: #fff; } .lux-wl__stat { flex: 1; padding: 8px; border-radius: .625rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 64px; background: #1b2432; border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 4px 12px rgba(0,0,0,.25); } .lux-wl__stathead { display: flex; justify-content: space-between; align-items: center; } .lux-wl__statlabel { font-size: .75rem; opacity: .75; } .lux-wl__staticon { font-size: 1rem; } .lux-wl__statvalue { font-size: 1rem; font-weight: 700; text-align: right; } .lux-wl__stat--bal { border-color: #22c55e; background: linear-gradient(180deg, rgba(34,197,94,.18) 0%, rgba(34,197,94,.06) 45%, rgba(0,0,0,.25) 100%), #1b2432; } .lux-wl__stat--pts { border-color: #facc15; background: linear-gradient(180deg, rgba(250,204,21,.18) 0%, rgba(250,204,21,.06) 45%, rgba(0,0,0,.25) 100%), #1b2432; } .lux-wl__primary { width: 100%; height: 48px; background: #16a34a; color: black; border: 1px solid black; border-radius: 26px; font-weight: 700; margin-bottom: 16px; cursor: pointer; text-transform: uppercase; font-size: 1rem; } .lux-wl__rowBtns { display: flex; gap: 12px; margin-bottom: 16px; } .lux-wl__secondary { flex: 1; height: 44px; border-radius: 24px; background: #16a34a; color: black; border: 1px solid black; cursor: pointer; font-weight: 700; text-transform: uppercase; font-size: 1rem; } .lux-wl__choose { text-align: center; margin: 0 0 6px; font-weight: 900; } .lux-wl__deprow { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; width: 100%; } .lux-wl__amount { width: 100%; height: 48px; border-radius: 12px; border: 2px solid #16a34a; background: #1f2b38; color: #fff; font-size: 1.1rem; font-weight: 900; text-align: center; padding: 0 12px; -moz-appearance: textfield; } .lux-wl__amount::-webkit-outer-spin-button, .lux-wl__amount::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .lux-wl__depbtn { width: 100%; height: 48px; border-radius: 12px; border: none; background: #16a34a; color: #000; font-size: 1.05rem; font-weight: 900; cursor: pointer; } .lux-wl__depbtn[disabled] { opacity: .7; cursor: not-allowed; font-size: .95rem; letter-spacing: 1px; } .lux-wl__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .lux-wl__preset { padding: 16px 12px; border-radius: 14px; border: 2px solid #2a3440; background: #1f2b38; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; cursor: pointer; } .lux-wl__preset.is-active { border-color: #16a34a; background: rgba(0,210,90,.14); box-shadow: 0 0 0 2px rgba(0,210,90,.15); } .lux-wl__presetamt { font-size: 1.05rem; font-weight: 900; letter-spacing: 1px; color: #fff; } .lux-wl__presetbonus { font-size: .75rem; font-weight: 700; color: #ffd700; opacity: .9; } .lux-wl__msg { margin: 0 0 8px; text-align: center; font-size: .9rem; color: #22c55e; } .lux-wl__msg.is-err { color: #f87171; } /* Withdraw extras (WithdrawPage.module.css 1:1) */ .lux-wl__methodRow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .lux-wl__methodBadge { background: #1c2733; border: 1px solid #2a3440; padding: 6px 12px; border-radius: 8px; font-weight: 600; } .lux-wl__balanceText { color: #ffd700; } .lux-wl__description { margin: 0 0 16px; color: #9aa4af; } .lux-wl__withdrawBtn { width: 100%; height: 48px; border-radius: 12px; border: none; background: #b21f2d; color: #fff; font-size: 1.1rem; font-weight: 900; cursor: pointer; margin-bottom: 20px; } .lux-wl__withdrawBtn[disabled] { opacity: .7; cursor: not-allowed; font-size: .95rem; letter-spacing: 1px; } .lux-wl__infoBox, .lux-wl__noteBox { padding: 16px; border-radius: 12px; background: #1c2733; border: 1px solid #2a3440; font-size: .85rem; margin-bottom: 16px; } .lux-wl__infoBox h4, .lux-wl__noteBox h4 { margin: 0 0 8px; color: #16a34a; } .lux-wl__infoBox ul, .lux-wl__noteBox ul { padding-left: 16px; margin: 0; } /* Wallet overview extras (WalletPage.module.css 1:1: supportBtn / outlineBtn) */ .lux-wl__support { width: 100%; height: 44px; border-radius: 24px; background: rgba(255,255,255,.06); border: 1px solid #2a3440; color: #fff; cursor: pointer; margin-bottom: 14px; font-weight: 600; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 8px; } .lux-wl__outline { width: 100%; height: 44px; border-radius: 24px; background: transparent; border: 2px solid #3a4554; color: #fff; cursor: pointer; margin-bottom: 14px; font-weight: 700; text-transform: uppercase; font-size: 1rem; display: flex; align-items: center; justify-content: center; text-decoration: none; box-sizing: border-box; } /* ── New-user onboarding — 1:1 port of WelcomeOnboardingModal (select 1–8 free bets → tier deposit). ────── */ .lux-ob { position: fixed; inset: 0; z-index: 410; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(0,0,0,.75); overflow-y: auto; overscroll-behavior: contain; } .lux-ob[hidden] { display: none; } .lux-ob__card { position: relative; width: min(100%, 420px); max-height: calc(100dvh - 28px); overflow-y: auto; background: #16202c; border: 1px solid #2a3440; border-radius: 14px; padding: 16px; color: #fff; box-shadow: 0 24px 70px rgba(0,0,0,.38); } .lux-ob__close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #1c2733; color: #fff; font-size: 14px; cursor: pointer; z-index: 2; } .lux-ob__header h3 { margin: 0 0 2px; font-size: 1.2rem; font-weight: 800; } .lux-ob__header p { margin: 0; color: #9aa4af; font-size: .9rem; } .lux-ob__step { background: #1f2b38; border-radius: 10px; padding: 12px; margin-top: 10px; } .lux-ob__steptop { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; font-weight: 800; letter-spacing: .06em; } .lux-ob__left { display: inline-flex; align-items: center; gap: 6px; } .lux-ob__dot { width: 8px; height: 8px; border-radius: 50%; background: #16a34a; display: inline-block; } .lux-ob__counter { color: #9aa4af; font-weight: 700; } .lux-ob__h4 { margin: 8px 0; font-size: .95rem; } .lux-ob__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .lux-ob__game { position: relative; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #1b2432; aspect-ratio: 1 / 1; padding: 0; cursor: pointer; } .lux-ob__game img { width: 100%; height: 100%; object-fit: cover; display: block; } .lux-ob__game.is-on { border-color: #16a34a; box-shadow: 0 0 0 2px rgba(0,210,90,.2); } .lux-ob__game.is-on::after { content: "✓"; position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 11px; display: grid; place-items: center; } .lux-ob__deposit { width: 100%; margin-top: 10px; padding: 14px; border-radius: 12px; border: none; background: #16a34a; color: #000; font-size: 1.05rem; font-weight: 900; cursor: pointer; } .lux-ob__deposit[disabled] { opacity: .56; cursor: not-allowed; } .lux-ob__claim { width: 100%; margin-top: 10px; padding: 14px; border-radius: 12px; border: none; background: #ffd700; color: #000; font-size: 1.05rem; font-weight: 900; cursor: pointer; } .lux-ob__msg { margin: 8px 0 0; text-align: center; font-size: .9rem; color: #22c55e; } .lux-ob__msg.is-err { color: #f87171; } /* ── Burger drawer — 1:1 port of SlideMenu.module.css (dark theme): green header band, 4-col icon grids. ── */ .lux-dr { position: fixed; inset: 0; z-index: 500; pointer-events: none; visibility: hidden; } .lux-dr.is-open { pointer-events: all; visibility: visible; } .lux-dr__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.75); opacity: 0; transition: opacity .38s ease; } .lux-dr.is-open .lux-dr__backdrop { opacity: 1; } .lux-dr__drawer { position: absolute; top: 0; left: 0; height: 100dvh; max-height: 100dvh; width: min(320px, 88vw); background: #16202c; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform .38s cubic-bezier(.4, 0, .2, 1); overflow: hidden; box-shadow: 0 24px 70px rgba(0,0,0,.38); } .lux-dr.is-open .lux-dr__drawer { transform: translateX(0); } .lux-dr__header { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px; background: #013220; flex-shrink: 0; } .lux-dr__brand { display: flex; align-items: center; } .lux-dr__hlogo { width: 48px; height: 48px; object-fit: contain; border-radius: 50%; flex-shrink: 0; } .lux-dr__htext { display: flex; flex-direction: column; gap: 1px; } .lux-dr__hname { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: .08em; line-height: 1.15; } .lux-dr__htag { font-size: 8px; font-weight: 600; color: #ffd700; letter-spacing: .18em; line-height: 1.4; text-transform: uppercase; } .lux-dr__x { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: none; color: #fff; font-size: 15px; cursor: pointer; border-radius: 50%; } .lux-dr__body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 10px 24px; display: flex; flex-direction: column; gap: 12px; scrollbar-width: none; } .lux-dr__body::-webkit-scrollbar { display: none; } .lux-dr__section { background: #1f2b38; border-radius: 10px; overflow: hidden; border: 1px solid #2a3440; } .lux-dr__stitle { margin: 0; padding: 10px 14px 8px; font-size: 11px; font-weight: 800; text-transform: uppercase; text-align: center; letter-spacing: .08em; color: #9aa4af; background: #1c2733; border-bottom: 1px solid #2a3440; position: relative; } .lux-dr__stitle::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); height: 1px; background: #2a3440; z-index: 1; } .lux-dr__stitletext { position: relative; z-index: 2; background: #1c2733; padding: 0 10px; } .lux-dr__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } .lux-dr__item { all: unset; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 6px 12px; cursor: pointer; border-right: 1px solid #2a3440; border-bottom: 1px solid #2a3440; text-align: center; } .lux-dr__item:nth-child(4n) { border-right: none; } .lux-dr__item:nth-last-child(-n+4) { border-bottom: none; } .lux-dr__gicon { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: #1c2733; color: #fff; } .lux-dr__gimg { width: 22px; height: 22px; object-fit: contain; } .lux-dr__icbadge { position: absolute; top: -5px; right: -5px; min-width: 17px; height: 17px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: #16a34a; color: #fff; font-size: 9px; font-weight: 800; } .lux-dr__glabel { font-size: 11px; font-weight: 600; color: #e5e7eb; } .lux-dr__foot { padding: 10px; border-top: 1px solid #2a3440; flex-shrink: 0; display: flex; flex-direction: column; gap: 8px; } .lux-dr__logout { all: unset; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; background: transparent; border-radius: 10px; padding: 9px 12px; border: 1px solid #3a2630; color: #ff8b8b; cursor: pointer; font-size: 13px; font-weight: 700; } .lux-dr__logout .lux-dr__picon { background: #2a1c22; width: 32px; height: 32px; } .lux-dr__logout:active { background: rgba(255,120,120,.08); } .lux-dr__profile { all: unset; display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; background: #1f2b38; border-radius: 10px; padding: 10px 12px; border: 1px solid #2a3440; color: #fff; cursor: pointer; } .lux-dr__picon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: #1c2733; } .lux-dr__ptext { display: flex; flex-direction: column; flex: 1; } .lux-dr__plabel { font-size: 13px; font-weight: 700; } .lux-dr__psub { font-size: 11px; color: #9aa4af; } .lux-dr__chev { color: #9aa4af; font-size: 18px; } /* ── Slip stake presets (host "20/- 50/- 100/- 500/-" row; active = yellow) ────────────────────────────── */ .lux-slip__presets { display: flex; gap: 8px; margin-bottom: 8px; } .lux-preset { flex: 1; padding: 10px 0; border-radius: 8px; border: 1px solid var(--lux-border); background: var(--lux-surface-2); color: var(--lux-text); font-weight: 700; font-size: .95rem; cursor: pointer; } .lux-preset.is-on { background: rgba(255,210,28,.16); border-color: var(--tb-yellow, #ffd21c); color: var(--tb-yellow, #ffd21c); } /* Offer chips (1Cut / Cheza Tena) — ALWAYS visible; greyed until their conditions are met. */ .lux-chip.is-disabled { opacity: .45; pointer-events: none; } /* ── In-page game overlay (GameLauncherPage 1:1: green header bar, fullscreen vendor iframe) ───────────── */ .lux-gm { position: fixed; inset: 0; z-index: 600; display: flex; flex-direction: column; background: #16202c; } .lux-gm[hidden] { display: none; } .lux-gm__head { flex-shrink: 0; min-height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: linear-gradient(135deg, #063e2b 0%, #032f25 74%); border-bottom: 1px solid rgba(255,255,255,.08); } .lux-gm__logo { height: 34px; width: auto; display: block; } .lux-gm__right { display: flex; align-items: center; gap: 7px; } .lux-gm__dep { height: 26px; border: 0; border-radius: 7px; background: var(--tb-yellow, #ffd21c); color: #0f172a; padding: 0 11px; font-weight: 800; font-size: 12px; letter-spacing: .3px; cursor: pointer; white-space: nowrap; } .lux-gm__x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #fff; font-size: 18px; font-weight: 700; cursor: pointer; } .lux-gm__body { position: relative; flex: 1; min-height: 0; display: flex; } .lux-gm__frame { flex: 1; width: 100%; border: 0; display: block; background: #000; } .lux-gm__load { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: #16202c; color: #d1d5db; font-weight: 700; } .lux-gm__load[hidden] { display: none; } /* ── Standalone "Bet history" page (/play/mybets) — a clean page under the universal top bar: its title scrolls away, the All | Betting Codes bar pins straight under the host header (no home-nav offset). ── */ .lux-pagetitle { margin: 12px 0 2px; font-size: 19px; font-weight: 800; color: var(--lux-text); } .lux-mypage { padding-bottom: calc(16px + env(safe-area-inset-bottom)); } .lux-mypage .lux-filterbar { top: var(--ls-sticky-top, 0px); } .lux-cmenu { z-index: 110; margin: 0 -14px; display: flex; align-items: center; gap: 4px; padding: 7px 10px 7px 8px; background: #1C2733; border-bottom: 1px solid rgba(255,255,255,.06); } /* NOT sticky — scrolls away (req: hide menu on scroll); only the header stays */ .lux-cmenu__burger { flex: none; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 7px; border: 1px solid rgba(255,255,255,.18); background: transparent; color: #c6d0db; cursor: pointer; margin: 0 4px 0 2px; } .lux-cmenu__rail { flex: 1 1 auto; min-width: 0; display: flex; gap: 0; padding: 3px; border-radius: 10px; background: rgba(255,255,255,.05); overflow-x: auto; scrollbar-width: none; scroll-behavior: smooth; } .lux-cmenu__rail::-webkit-scrollbar { display: none; } .lux-cmenu__tab { display: inline-flex; align-items: center; height: 24px; padding: 0 8px; border-radius: 7px; background: transparent; color: #c6d0db; font-size: 12px; font-weight: 600; white-space: nowrap; text-decoration: none; cursor: pointer; } .lux-cmenu__tab:first-child { background: var(--tb-yellow); color: #05080c; font-weight: 800; } /* Sports highlighted (we're on the book) */ @media (max-width: 400px) { .lux-chdr__logo { height: 28px; } .lux-cmenu__tab { font-size: 9.5px; padding: 0 6px; height: 22px; } .lux-chdr__bal { min-width: 0; } } @media (max-width: 360px) { .lux-cmenu__tab { font-size: 8.5px; padding: 0 4px; } } /* ════════ Combo casino strip — copied 1:1 from GameGrid play-now + GameCard + Home.module.css .catButtons ════ */ .lux-cstrip { margin: 0 -14px; padding: 6px 6px 4px; background: #1C2733; } /* casino segment bg; book bg unchanged */ .lux-combo .lux-sportbar { padding-top: 2px; padding-bottom: 0; } /* tighten the gap between the casino strip and "Football | Top Games" */ .lux-combo .lux-tgwrap { margin-top: 0; } /* 0 → no gap between the casino strip and the WC section (.lux-fifawc is also a .lux-tgwrap) */ .lux-cstrip.is-off, .lux-cmenu.is-off { display: none; } /* HOME-only: hidden on any sub-view (match markets, World Cup, …) so the top bar reads as that page's header (req 2/3) */ /* Promo carousel — swipeable wide banners (960×164), auto-advancing, with dots. */ .lux-promo { position: relative; margin: -6px -6px 0; } /* full-bleed (edge-to-edge) + no gap below the banner */ .lux-promo__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .lux-promo__track::-webkit-scrollbar { display: none; } .lux-promo__slide { flex: 0 0 100%; scroll-snap-align: start; display: block; text-decoration: none; } .lux-promo__img { width: 100%; aspect-ratio: 960 / 164; object-fit: cover; display: block; background: var(--lux-surface-2); } /* no round edges */ .lux-promo__dots { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; gap: 5px; pointer-events: none; } .lux-promo__dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,.45); transition: width .2s ease, background .2s ease; } .lux-promo__dot.is-on { width: 14px; background: #fff; } /* Winner ticker — reproduced 1:1 from WinnerTicker.module.css: LIVE dot + edge-masked marquee of pills. */ .lux-wt { position: relative; margin: 2px 0 0; padding: 0; min-height: 32px; } /* tightened — was 8px/5px/42px; min-height still reserves the row so there's no load jump */ .lux-wt__live { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #f04438; box-shadow: 0 0 0 3px rgba(240,68,56,.18); z-index: 2; animation: lux-wt-live 1.4s ease-in-out infinite; } .lux-wt:not(.has-winners) .lux-wt__live { display: none; } /* no pulsing dot over an empty reserved row */ @keyframes lux-wt-live { 0%,100% { box-shadow: 0 0 0 3px rgba(240,68,56,.18); } 50% { box-shadow: 0 0 0 6px rgba(240,68,56,0); } } .lux-wt__mask { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); } /* Continuous marquee: MULTIPLE winner pills follow each other, scrolling right→left. New winners append at the tail and pills recycle, so the strip never resets/jumps when a winner arrives (JS-driven via rAF). */ .lux-wt__track { display: flex; align-items: center; gap: 6px; width: max-content; will-change: transform; } .lux-wt__pill { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; padding: 4px 6px 4px 4px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; } .lux-wt__icon { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 6px; overflow: hidden; background: #1a2231; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; line-height: 1; } .lux-wt__icimg { width: 100%; height: 100%; object-fit: cover; display: block; } .lux-wt__text { font-size: 11px; line-height: 1.2; color: #d9e0e8; white-space: nowrap; font-weight: 600; letter-spacing: .1px; } .lux-wt__amt { color: #12a84f; font-weight: 800; } .lux-wt__game { color: var(--tb-yellow, #ffd21c); font-weight: 700; } .lux-wt__play { background: #12a84f; color: #fff; border: 0; border-radius: 6px; padding: 3px 10px; font-size: 10px; font-weight: 800; line-height: 1.4; cursor: pointer; flex: 0 0 auto; } @media (max-width: 400px) { .lux-wt__text { font-size: 10px; } .lux-wt__play { padding: 2px 8px; font-size: 9.5px; } } @media (max-width: 360px) { .lux-wt__text { font-size: 9.5px; letter-spacing: 0; } .lux-wt__play { padding: 2px 6px; font-size: 9px; } } /* SectionHeader (GameCategorySection.module.css) */ .lux-cstrip__head { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 6px 2px 2px; } .lux-cstrip__title { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 1rem; font-weight: 700; color: var(--lux-text); } .lux-cstrip__actions { display: flex; align-items: center; gap: 10px; } /* "View more ›" + the desktop carousel arrows, right-aligned */ .lux-cstrip__more { padding: 0; background: none; border: 0; font-size: 12px; font-weight: 900; color: var(--tb-yellow, #ffd21c); white-space: nowrap; text-decoration: none; cursor: pointer; } /* play-now — TWO horizontal-scroll rows of cards (GameGrid.module.css) */ .lux-pnwrap { display: flex; flex-direction: column; gap: 9px; padding: 4px 0; } .lux-pnrow { display: flex; gap: 9px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; } .lux-pnrow::-webkit-scrollbar { display: none; } /* GameCard (GameCard.module.css) — 110px square, #063f29 art, bottom gradient, TOP badge, yellow stake text */ .lux-pncard { position: relative; flex: 0 0 88px; width: 88px; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #063f29; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 6px 14px rgba(0,0,0,.22); cursor: pointer; isolation: isolate; scroll-snap-align: start; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .lux-pncard:active { transform: translateY(-1px); } .lux-pncard__art { width: 100%; height: 100%; object-fit: cover; display: block; background: linear-gradient(135deg, #063f29, #0f7a43); } .lux-pncard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.55) 100%); pointer-events: none; z-index: 1; } /* Task 11: on DESKTOP, enlarge the sports-home "Top Crash & Slots" strip tiles so their height matches the casino-home tile height from step 7 (4⅓-peek, 4/3 → height = tileWidth·¾; square tiles → side = that height). Mobile keeps the 88px tiles. */ @media (min-width: 800px) { .lux-pnrow > .lux-pncard { flex: 0 0 calc((100% - 44px) / 4.33 * 0.75); width: calc((100% - 44px) / 4.33 * 0.75); } } /* MOBILE: bigger "Top Crash & Slots" tiles so exactly 3½ show (3 full + a peek of the 4th) — card = (row − 3 gaps)/3.5 so 3.5 tiles + 3·9px gaps fill the row. Overrides the base 88px (square via the base aspect-ratio). */ @media (max-width: 799px) { .lux-pnrow > .lux-pncard { flex: 0 0 calc((100% - 27px) / 3.5); width: calc((100% - 27px) / 3.5); } } .lux-pncard__stake { position: absolute; left: 8px; bottom: 8px; z-index: 2; line-height: 1; pointer-events: none; } .lux-pncard__stake span { color: var(--tb-yellow, #ffd21c); font-size: 10px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 6px rgba(0,0,0,.45); } .lux-pncard__rank { position: absolute; top: 5px; left: 5px; z-index: 2; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 4px; background: #e21d1d; color: #fff; font-size: 11px; font-weight: 800; line-height: 19px; text-align: center; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); } /* Category buttons — Home.module.css .catButtons / .catBtn (dark theme), 1:1 */ .lux-cbtns { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 12px 4px 0; } .lux-cbtn { display: flex; align-items: center; justify-content: center; min-width: 0; padding: 11px 5px; border-radius: 10px; background: linear-gradient(180deg, rgba(255,210,28,.05) 0%, rgba(0,0,0,.18) 100%), #1a2433; border: 1px solid rgba(255,255,255,.08); color: var(--tb-yellow, #ffd21c); font-size: 12px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; text-align: center; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 1px 2px rgba(0,0,0,.25); cursor: pointer; } @media (max-width: 400px) { .lux-cbtns { gap: 7px; margin: 10px 3px 0; } .lux-cbtn { padding: 9px 3px; font-size: 9.5px; letter-spacing: .3px; } .lux-cstrip__title { font-size: 11px; } } @media (max-width: 360px) { .lux-cbtns { gap: 5px; margin: 8px 2px 0; } .lux-cbtn { padding: 8px 2px; font-size: 8.5px; letter-spacing: .1px; border-radius: 7px; } .lux-cstrip__title { font-size: 9.5px; } } /* ═══ Bet-slip THEME — borrowed light "Betika-style" look: white cards on a pale page, GREEN pick names, numbered Selections header with Show Options, gray Place-Bet bar (green when ready) carrying the stake. Implemented by overriding the theme variables ON THE SLIP ONLY, so every slip child re-skins at once. ═══ */ .lux-slip { --lux-bg: #eef0f3; --lux-surface: #ffffff; --lux-surface-2: #f1f3f5; --lux-border: #e2e6ea; --lux-text: #15191e; --lux-muted: #6b7177; --lux-primary: #0a8f4d; --lux-on-primary: #ffffff; background: #eef0f3; color: #15191e; } .lux-slip__head { background: #f1f3f5; gap: 10px; } .lux-slip__count { width: 22px; height: 22px; border-radius: 50%; background: #0a8f4d; color: #fff; font-weight: 800; font-size: 13px; display: grid; place-items: center; flex: 0 0 auto; } .lux-slip__headmain { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .lux-slip__headttl { font-size: 1.02rem; color: #15191e; } .lux-slip__showopt { background: none; border: 0; padding: 0; color: #0a8f4d; text-decoration: underline; font-size: .82rem; font-weight: 700; cursor: pointer; text-align: left; } .lux-slip__headbal2 { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; margin-right: 4px; } .lux-slip__headbal2 small { font-size: .7rem; color: #6b7177; } .lux-slip__headbal2 b { font-size: .85rem; color: #15191e; } /* Legs: ✕ left · text column (GREEN pick / market / fixture) · odds right — the screenshot row anatomy. */ .lux-slip .lux-slip__leg { flex-direction: row; align-items: flex-start; gap: 9px; padding: 11px 2px; } .lux-slip .lux-slip__leg-rm { position: static; flex: 0 0 auto; margin-top: 1px; font-size: 1.1rem; padding: 0 2px; } .lux-slip__leg-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } .lux-slip .lux-slip__leg-pick { color: #0a8f4d; font-size: 1.02rem; font-weight: 800; } .lux-slip .lux-slip__leg-mkt { font-size: .82rem; color: #3c434b; font-weight: 600; } .lux-slip .lux-slip__leg-ev { font-size: .82rem; color: #6b7177; } .lux-slip .lux-slip__leg-odds { flex: 0 0 auto; font-size: 1rem; color: #15191e; } .lux-slip .lux-slip__leg--live { border-left: 2px solid var(--lux-danger); padding-left: 8px; } /* Bet-type tabs on the light band. */ .lux-slip .lux-bttab { background: #dde2e8; color: #5c646d; } .lux-slip .lux-bttab.is-active { background: #fff; color: #10151c; } .lux-slip .lux-bttab.is-disabled { color: #9aa4af; } /* Place bar: full-width; GRAY when blocked (their $0.00 state), green when placeable; amount inside. */ .lux-slip .lux-place { border-radius: 8px; font-weight: 800; font-size: 1.05rem; } .lux-slip .lux-place[disabled] { background: #878d94; color: #fff; opacity: 1; } #lux-place-amt { font-weight: 800; margin-left: 6px; } /* ═══ Slip theme round 2 — CONTRAST + sharper corners (radii cut to 20% of their former values). ═══ */ /* Radii: 18px→4px (sheet top), 10px→2px (buttons), 6px→1px (small) — slip-scoped only. */ .lux-slip { --lux-radius-lg: 4px; --lux-radius: 2px; --lux-radius-sm: 1px; } .lux-slip .lux-place, .lux-slip .lux-preset { border-radius: 2px; } .lux-slip .lux-bttab { border-radius: 2px 2px 0 0; } .lux-slip .lux-chip { border-radius: 2px; } /* CONTRAST: the legs live in a true white CARD on the gray page (like the source), with real edges. */ .lux-slip__scroll { background: #eef0f3; } .lux-slip .lux-slip__legs { background: #fff; border: 1px solid #d7dde3; border-radius: 3px; padding: 2px 10px; margin: 8px 0 10px; box-shadow: 0 1px 3px rgba(15, 23, 32, .08); } .lux-slip .lux-slip__leg { border-bottom: 1px solid #e6e9ed; } .lux-slip .lux-slip__leg-odds { font-weight: 800; font-size: 1.05rem; } .lux-slip .lux-slip__leg-rm { color: #3c434b; } /* Header band: darker than the page + crisp edge; bolder title. */ .lux-slip__head { background: #e6e9ee; border-bottom: 1px solid #cfd6dd; } .lux-slip__headttl { font-weight: 800; } /* Bet-type band: darker base so the ACTIVE white tab pops; active gets a crisp outline + lift. */ .lux-slip .lux-slip__bttabs { background: #dde2e8; border-bottom: 1px solid #cfd6dd; } .lux-slip .lux-bttab { background: #c8cfd7; color: #4a525b; } .lux-slip .lux-bttab.is-active { background: #fff; color: #10151c; box-shadow: 0 -2px 5px rgba(15, 23, 32, .12); } /* Footer: clean white slab separated from the gray scroll area. */ .lux-slip .lux-slip__foot { background: #fff; border-top: 2px solid #d7dde3; box-shadow: 0 -3px 10px rgba(15, 23, 32, .07); } /* Inputs + presets: visible borders; green focus. */ .lux-slip .lux-slip__stakebox input { background: #fff; border: 2px solid #c9d0d8; font-weight: 800; } .lux-slip .lux-slip__stakebox input:focus { outline: none; border-color: #0a8f4d; } .lux-slip .lux-preset { background: #fff; border: 1px solid #c9d0d8; } .lux-slip .lux-preset.is-on { background: #fff8d6; border-color: #e6c200; color: #8a6d00; box-shadow: 0 0 0 1px #e6c200 inset; } /* Money lines: heavier ink for the numbers that matter. */ .lux-slip .lux-slip__totalrow b, .lux-slip .lux-slip__sum--pay b { font-weight: 800; color: #10151c; } /* Overflow-proof pay row: each unit is UNBREAKABLE and the row wraps whole units — when "Boost awarded" and "Possible win" don't fit together, the win drops to its own line (right-aligned) instead of colliding. */ .lux-slip .lux-slip__sum--pay { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; } .lux-slip .lux-slip__boostaward, .lux-slip .lux-slip__cashback { white-space: nowrap; flex: 0 0 auto; } .lux-slip .lux-slip__paygrp { white-space: nowrap; flex: 0 0 auto; margin-left: auto; } .lux-slip .lux-slip__boostaward b, .lux-slip .lux-slip__cashback b { font-size: 1rem; } /* the BIG number is the win, not the bonus line */ .lux-slip .lux-place { box-shadow: 0 2px 6px rgba(10, 143, 77, .35); } .lux-slip .lux-place[disabled] { box-shadow: none; } /* ═══ Slip theme round 3 — darker text, one-line stake row, bigger money, louder chips. ═══ */ /* (1) the light greys were too light — darken every muted read in the slip */ .lux-slip { --lux-muted: #444b53; } .lux-slip .lux-slip__leg-ev { color: #4a525b; } .lux-slip .lux-slip__explain { color: #444b53; } .lux-slip .lux-slip__headbal2 small { color: #4a525b; } /* (2) presets + stake input share ONE line */ .lux-slip__presets { align-items: stretch; } .lux-slip__presets .lux-slip__stakebox { flex: 1.15; display: flex; } .lux-slip__presets .lux-slip__stakebox input { width: 100%; height: 100%; min-height: 42px; border-radius: 2px; border: 2px solid #c9d0d8; background: #eef4ff; color: #15191e; font-size: 1.25rem; font-weight: 800; text-align: right; padding: 0 10px; } .lux-slip__presets .lux-slip__stakebox input:focus { outline: none; border-color: #0a8f4d; } /* (5) balance + amounts a touch bigger */ .lux-slip__headbal2 small { font-size: .75rem; } .lux-slip__headbal2 b { font-size: 1.02rem; } #lux-place-amt { font-size: 1.1rem; } .lux-slip .lux-slip__sum--pay b { font-size: 1.25rem; } /* (6) offer chips: louder when usable, clearly present when not */ .lux-slip .lux-chip { background: #fff; border: 1px solid #aeb6bf; color: #2b323a; font-weight: 700; } .lux-slip .lux-chip.is-on { background: #e7f6ee; border-color: #0a8f4d; color: #0a8f4d; } .lux-slip .lux-chip.is-disabled { opacity: .6; background: #f1f3f5; border-style: dashed; } /* ═══ Slip footer round 4 — label-over-amount columns, Odds right, smaller left presets, chip spacing. ═══ */ .lux-slip .lux-slip__offers { margin-bottom: 12px; } /* space between the chips and the amount boxes */ .lux-slip__presets { gap: 6px; flex-wrap: nowrap; min-width: 0; } .lux-slip .lux-preset { flex: 0 1 auto; min-width: 48px; padding: 8px 8px; font-size: .92rem; } /* smaller than the stake box, grouped LEFT; may shrink a touch on narrow phones */ .lux-slip__presets .lux-slip__stakebox { margin-left: auto; flex: 0 1 124px; min-width: 64px; } /* parked RIGHT; SHRINKS on narrow phones so the row never overflows (was a rigid 124px) */ .lux-slip .lux-slip__totalrow { justify-content: flex-end; } /* "Odds: 196.47" sits right, under the stake box */ /* Bottom row: two columns, label OVER amount — boost/cashback left, possible win right. */ .lux-slip__paycol { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; white-space: nowrap; } .lux-slip__paycol--r { margin-left: auto; align-items: flex-end; text-align: right; } .lux-slip__paylbl { font-size: .92rem; color: #444b53; font-weight: 600; } .lux-slip__paylbl.lux-slip__boostaward, .lux-slip__paylbl.lux-slip__cashback { font-weight: 700; } .lux-slip__paycol b { font-size: 1.15rem; } /* ═══ Slip footer round 5 — Possible win inline again, tighter row, booster colors restored. ═══ */ .lux-slip .lux-slip__sum--pay { margin: 2px 0 6px; gap: 0 12px; align-items: flex-end; } .lux-slip__paycol { gap: 0; } .lux-slip .lux-slip__paygrp { white-space: nowrap; flex: 0 0 auto; margin-left: auto; align-self: flex-end; font-size: .95rem; color: #444b53; font-weight: 600; } .lux-slip .lux-slip__paygrp b { font-size: 1.25rem; color: #10151c; margin-left: 4px; } /* the booster labels keep their identity colors (green boost, gold cheza) */ .lux-slip__paylbl.lux-slip__boostaward { color: var(--lux-success, #12a84f); } .lux-slip__paylbl.lux-slip__cashback { color: var(--lux-gold, #b8860b); } /* Info chips (Draw no Loss / Acca Boost) — ALWAYS tappable for the explainer: dimmed when conditions aren't met, green when armed. (Unlike is-disabled, is-off keeps pointer events.) */ .lux-slip .lux-chip--info.is-off { opacity: .55; background: #f1f3f5; border-style: dashed; } .lux-slip .lux-chip--info.is-on { background: #e7f6ee; border-color: #0a8f4d; color: #0a8f4d; } /* ═══ Slip round 6 — gift split-button + one-line scrollable boosts row. ═══ */ .lux-slip .lux-slip__offers { flex-wrap: nowrap; overflow: hidden; } /* NO scrolling — the chips shrink to share the line */ .lux-slip .lux-slip__offers .lux-chip { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; padding: 8px 6px; font-size: .82rem; } /* Place row: 1/3 amber GIFT bet (free-bet funded) + 2/3 green cash bet. Gift side dims until the slip qualifies (multibet, 3+ games, odds 1.30+ each) — tapping it dimmed explains the requirement (45s). */ .lux-placerow { display: flex; gap: 8px; margin-top: 8px; } .lux-placerow .lux-place { flex: 2; margin-top: 0; } .lux-place-gift { flex: 1; min-height: 48px; border: none; border-radius: 8px; background: #f0a500; color: #221a00; font-weight: 800; font-size: .9rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; box-shadow: 0 2px 6px rgba(240,165,0,.35); } .lux-place-gift__amt { font-size: .85rem; } .lux-place-gift.is-off { opacity: .55; box-shadow: none; } /* Share sheet round 2 — taller, real brand icons, breathing room. */ .lux-share__sheet { padding: 30px 20px calc(34px + env(safe-area-inset-bottom)); min-height: 280px; } .lux-share__title { font-size: 1.25rem; } .lux-share__code { font-size: 1.9rem; margin: 16px 0 6px; } .lux-share__meta { font-size: .95rem; margin-bottom: 26px; } .lux-share__row { gap: 16px; } .lux-share__ic { width: 54px; height: 54px; } .lux-share__ic svg { display: block; } /* ═══ Code Hub card round 2 — darker header/footer bands, share button, radii halved. ═══ */ .lux-hub__card { border-radius: 5px; overflow: hidden; } /* was var(--lux-radius)=10px */ .lux-hub__use { border-radius: 3px; } /* was 6px */ .lux-hub__share { margin-left: auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--lux-border); background: transparent; color: var(--lux-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .lux-hub__use { margin-left: 10px; } /* World Cup trophy icon - sits right of the World Cup link in the FIFA strip header, font-height. */ .lux-fifawc__ico { height: 1.1em; width: auto; align-self: center; margin-left: -4px; display: inline-block; } /* ── RESULTS tab — livescore-style board of today's matches ───────────────────────────────────── Compact rows: status (live minute / FT / kickoff) · the two teams · the score column. Live rows reuse .lux-live__clock so the document-wide clock island ticks the minute; the whole list lives in #lux-live-list so the existing 15s poll island swaps it in place (no results-specific JS). */ .lux-results { padding: 0 0 24px; } .lux-res__group { margin: 0 0 4px; } .lux-res__league { margin: 0; padding: 12px 14px 6px; font-size: .78rem; font-weight: 700; color: var(--lux-muted); text-transform: uppercase; letter-spacing: .03em; } .lux-res { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--lux-border); text-decoration: none; color: inherit; } .lux-res__phase { flex: none; width: 44px; font-size: .8rem; color: var(--lux-muted); font-variant-numeric: tabular-nums; } .lux-res__phase--live { color: var(--lux-danger); font-weight: 800; } .lux-res__phase--ft { color: var(--lux-text); font-weight: 700; } /* live rows reuse .lux-live__clock for the ticking minute — restate the layout bits the live card sets via its own context (the pulsing dot + red colour come from the shared rule). */ .lux-res .lux-live__clock { width: 44px; } /* Teams take their CONTENT width (shrinkable with ellipsis when the row is tight) so the BET LIVE badge sits immediately to the RIGHT OF THE NAMES; the score pins to the far edge via margin auto. */ .lux-res__teams { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .lux-res__team { font-size: .92rem; color: var(--lux-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lux-res__score { flex: none; margin-left: auto; display: flex; flex-direction: column; gap: 3px; align-items: flex-end; min-width: 18px; } .lux-res__score b { font-size: .92rem; font-weight: 700; color: var(--lux-muted); line-height: 1.15; font-variant-numeric: tabular-nums; } .lux-res__score--live b { color: var(--lux-success); font-weight: 800; } .lux-res__score--ft b { color: var(--lux-text); font-weight: 800; } .lux-res__empty { padding: 48px 16px; } /* Bet history title row — the page ✕ (close) sits opposite the title on the far right: a visible BOXED button; [data-page-close] in player.js navigates straight to the home page. */ .lux-pagetitle__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .lux-pagetitle__row .lux-pagetitle { flex: 1; min-width: 0; } .lux-pagex { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; margin: 8px 0 0; padding: 0; background: var(--lux-surface); border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); color: var(--lux-text); font-size: 1.15rem; line-height: 1; cursor: pointer; } .lux-pagex:hover { border-color: var(--lux-muted); } /* Bottom-nav My Bets won/lost dot — the same .lux-navdot state classes the apply() island drives, absolutely parked on the icon's top-right corner (mirrors the slip-count badge geometry). */ .lux-bnav__icrel .lux-navdot { position: absolute; top: -2px; right: -7px; margin: 0; width: 9px; height: 9px; } /* World Cup title back arrow — a plain ← glyph link ahead of "Football | World Cup" that goes home. */ /* Back-to-home — a BOXED, thumb-sized button (was a bare ‹ glyph, too small a target). */ .lux-wc__back { display: inline-flex; align-items: center; justify-content: center; align-self: center; width: 36px; height: 36px; margin-right: 8px; border: 1px solid var(--lux-border); border-radius: 8px; background: transparent; color: var(--lux-text); text-decoration: none; font-size: 1.5rem; line-height: 1; } .lux-wc__back:active { background: var(--lux-border); } /* The WC live island — the Live tab's cards embedded above the upcoming fixtures. */ .lux-wc__livelist:not(:empty) { margin: 0 0 10px; } /* Section heads on the WC fixtures board: "Playing Now" above the live island, "Coming Up" above the upcoming fixtures — plain uppercase text, league-header style. "Playing Now" is hidden until the island actually holds a live card, and disappears WITH the last tile when the game ends (the 15s poll empties the island; the :has() rule reacts — no JS). */ .lux-wc__sechead { margin: 4px 0 8px; font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--lux-muted); } .lux-wc__nowhead { display: none; color: var(--lux-danger); } .lux-wc__livewrap:has(article[data-event]) .lux-wc__nowhead { display: block; } /* No live match → the island takes ZERO space (no placeholder/gap): collapse the whole wrap when it holds no live card, so "Coming Up" sits right under the tab bar. The 15s poll injects a card → :has() flips → the wrap appears and pushes the fixtures down; the card clearing collapses it again. */ .lux-wc__livewrap:not(:has(article[data-event])) { display: none; } /* Results board header line under the tab strip. */ .lux-res__title { margin: 12px 14px 0; font-size: .9rem; font-weight: 600; color: var(--lux-muted); } /* Live MATCH CENTRE on the event page — running stats (home · label · away) + the goals/cards timeline (latest first). Display-only; rendered under the hero for in-play games with feed detail. */ .lux-mc { margin: 8px 12px 2px; padding: 10px 12px; border: 1px solid var(--lux-border); border-radius: var(--lux-radius-sm); background: var(--lux-surface); } .lux-mc__teams { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: .78rem; font-weight: 700; color: var(--lux-muted); text-transform: uppercase; letter-spacing: .02em; } .lux-mc__teams span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46%; } .lux-mc__row { display: flex; align-items: center; gap: 10px; padding: 3px 0; font-size: .88rem; } .lux-mc__v { flex: none; min-width: 38px; font-weight: 800; color: var(--lux-text); font-variant-numeric: tabular-nums; } .lux-mc__v:last-child { text-align: right; } .lux-mc__l { flex: 1; text-align: center; color: var(--lux-muted); font-size: .82rem; } .lux-mc__tl { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--lux-border); } .lux-mc__ev { display: flex; gap: 8px; padding: 2px 0; font-size: .82rem; color: var(--lux-text); } .lux-mc__min { flex: none; min-width: 30px; font-weight: 700; color: var(--lux-danger); font-variant-numeric: tabular-nums; } .lux-mc__txt { flex: 1; min-width: 0; } /* "BET LIVE" badge on a results row whose game is live on the bettable board — small readable text in a thin red rectangle, right of the team names (the row link opens the match's live markets). */ .lux-res__betlive { flex: none; align-self: center; padding: 2px 6px; border: 1px solid var(--lux-danger); border-radius: 3px; color: var(--lux-danger); font-size: .6rem; font-weight: 700; letter-spacing: .05em; white-space: nowrap; } /* ── Native casino LOBBY (Phase 1) — curated rows of game tiles under the shared shell. Horizontal-scroll rows like the React GameGrid; the in-page nav jumps to a row (offset under the sticky bars). ────────── */ .lux-clob { padding: 4px 0 28px; } .lux-clob__offer { display: flex; align-items: center; gap: 10px; margin: 8px 0 10px; padding: 11px 14px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); color: #fff; text-decoration: none; } .lux-clob__offer svg { flex: none; color: var(--tb-yellow, #ffd21c); } .lux-clob__offertext { flex: 1; min-width: 0; font-size: .9rem; color: #e8edf2; } .lux-clob__offertext strong { font-weight: 800; color: #fff; } .lux-clob__offercta { flex: none; color: var(--tb-yellow, #ffd21c); font-weight: 800; font-size: .85rem; } /* Native category "See all" page — the full curated grid (wrapping, not a horizontal row). */ .lux-cat { padding: 4px 0 28px; } .lux-cat__head { display: flex; align-items: center; gap: 10px; padding: 8px 0 12px; } .lux-cat__back { color: var(--lux-primary); font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; } .lux-cat__title { margin: 0; font-size: 1.1rem; font-weight: 800; color: var(--lux-text); } .lux-cat__count { margin-left: auto; font-size: .8rem; color: var(--lux-muted); font-weight: 600; } .lux-cat__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; } .lux-cat__grid .lux-pncard { width: 100%; flex: none; } .lux-cat__empty { padding: 40px 16px; text-align: center; color: var(--lux-muted); font-size: .9rem; } /* Native casino search bar — a same-origin form GET to /play/casino/search (iframe + pages). */ .lux-search { position: relative; display: flex; align-items: center; margin: 6px 0 12px; } .lux-search__ico { position: absolute; left: 12px; color: var(--lux-muted); pointer-events: none; } .lux-search__input { width: 100%; padding: 11px 14px 11px 38px; border-radius: 9px; border: 1px solid var(--lux-border); background: var(--lux-surface-2); color: var(--lux-text); font-size: .92rem; } .lux-search__input::placeholder { color: var(--lux-muted); } .lux-search__input:focus { outline: none; border-color: var(--lux-primary); } /* ============================================================ NATIVE CASINO — FAITHFUL PORT of the original tushinde-frontend casino. Ported verbatim from the React app: index.css [data-theme=dark] tokens + TopUtilityNav / GameCategorySection / GameGrid / GameCard / SearchOverlay .module.css. Scoped to .tbc so it reproduces the original 1:1 and never touches the sportsbook's own --lux-* styling. ============================================================ */ .tbc { /* dark casino semantic tokens (index.css [data-theme="dark"]) */ --color-bg: #1C2733; --color-bg-alt: #1c2733; --color-surface: #1f2b38; --color-text: #ffffff; --color-text-muted: #9aa4af; --color-border: #2a3440; --input-bg: #1f2b38; --hover-bg: rgba(255,255,255,0.06); --color-success: #16a34a; --color-accent: #ffd700; --color-accent-hover: #ffb700; /* --tb-* redesign tokens (index.css :root + dark overrides) */ --tb-panel: #152331; --tb-yellow: #ffd21c; --tb-nav-bg: var(--tb-panel); --tb-nav-border: rgba(255,255,255,0.06); --tb-nav-rail-bg: rgba(255,255,255,0.06); --tb-nav-tab-text: #c7d2dc; --tb-nav-tab-text-hover: #ffffff; --game-card-size: 120px; } /* ── TopUtilityNav (Home/Back · Search · Slots · Crash · Live · Instant · Free Bets) ── */ .tbc-nav { display: flex; align-items: center; gap: 4px; padding: 7px 14px 7px 12px; background: var(--tb-nav-bg); border-bottom: 1px solid var(--tb-nav-border); } /* padding re-aligns content after the -8px full-bleed (task 8) */ .tbc-menubtn { flex: 0 0 auto; width: 34px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 6px; margin: 0 2px 0 0; border-radius: 7px; border: 1px solid var(--tb-nav-border); background: transparent; color: var(--tb-nav-tab-text); cursor: pointer; } .tbc-menubtn:hover { color: var(--tb-nav-tab-text-hover); } .tbc-rail { flex: 1 1 auto; min-width: 0; display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; } .tbc-rail::-webkit-scrollbar { display: none; } .tbc-item { flex: 1 0 auto; min-width: 50px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 2px 0; text-decoration: none; color: var(--tb-nav-tab-text); cursor: pointer; background: none; border: 0; font: inherit; } .tbc-iconbox { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--tb-nav-rail-bg); color: inherit; transition: background .15s ease, color .15s ease, border-color .15s ease; border: 1px solid transparent; } .tbc-iconlbl { font-size: 11px; font-weight: 600; line-height: 1; } .tbc-item:hover .tbc-iconbox { color: var(--tb-nav-tab-text-hover); } .tbc-item.is-active .tbc-iconbox { background: var(--tb-yellow); border-color: var(--tb-yellow); color: #3a2e00; } .tbc-item.is-active .tbc-iconlbl { color: var(--tb-yellow); } /* ── Earned offer strip (Home.module.css .offer) — "Earn up to Ksh 500 … → View" ── */ .tbc-offer { display: flex; align-items: center; gap: 9px; width: calc(100% - 8px); margin: 10px 4px 2px; padding: 9px 11px; border-radius: 11px; border: 1px solid rgba(255, 210, 28, 0.28); background: var(--color-surface); cursor: pointer; text-align: left; text-decoration: none; } .tbc-offer__icon { flex: 0 0 auto; color: var(--tb-yellow); } .tbc-offer__text { flex: 1; min-width: 0; font-size: 12px; color: var(--color-text-muted); } .tbc-offer__text strong { color: var(--color-text); font-weight: 600; } .tbc-offer__cta { flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--tb-yellow); } /* ── GameCategorySection (section header + "View more ›") ── */ .tbc-body { background: var(--color-bg); color: var(--color-text); padding-bottom: 16px; min-height: calc(100dvh - 104px); } /* always fill the viewport so a sparse category page never looks short */ .tbc-sec { margin: 0; padding-inline: 6px; } .tbc-sec-head { position: relative; display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; margin-top: 6px; } .tbc-title { display: flex; align-items: center; gap: 6px; font-size: 1rem; font-weight: 700; color: var(--color-text); margin: 0; padding-top: 8px; padding-left: 8px; } .tbc-sec-actions { display: flex; align-items: center; gap: 10px; } .tbc-action { background: none; border: none; padding: 0; cursor: pointer; font-size: 12px; font-weight: 900; color: var(--tb-yellow); white-space: nowrap; display: flex; align-items: center; text-decoration: none; } .tbc-action:hover { filter: brightness(1.08); } /* SportPesa-style prev/next carousel arrows on each row header — desktop only (mobile swipes the rail). */ .tbc-arrows { display: none; } @media (min-width: 800px) { .tbc-arrows { display: inline-flex; gap: 6px; } } /* Fallbacks (after the var) keep the arrows themed even OUTSIDE .tbc — the casino strip + FIFA "Featured" slider live on the sports home, where the .tbc casino tokens aren't in scope. Inside .tbc the vars win, so the casino category rows are unchanged. */ .tbc-arrow { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--tb-nav-border, rgba(255,255,255,.14)); background: var(--tb-nav-rail-bg, rgba(255,255,255,.08)); color: var(--color-text-muted, #9aa4af); display: inline-grid; place-items: center; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .tbc-arrow:hover:not(:disabled) { background: var(--color-accent, #ffd21c); color: #05080c; border-color: var(--color-accent, #ffd21c); } .tbc-arrow:disabled { opacity: .35; cursor: default; } /* SportPesa-style LEFT sports sidebar — desktop only (the reserved grid column 1); hidden on mobile. */ .lux-leftrail { display: none; } /* The left sidebar appears only when the FULL 3-rail layout fits (feed 800 + betslip 300 + sidebar 300 ≈ 1400); below that it stays display:none (base rule) so the feed isn't crushed at narrow desktop widths. */ @media (min-width: 1400px) { .lux-leftrail { display: flex; flex-direction: column; grid-column: 1 !important; justify-self: end !important; align-self: start !important; position: sticky; top: calc(var(--ls-sticky-top, 113px) + 6px); /* sticky = stays put while the feed scrolls (no scroll for the left bar) */ width: 300px; margin: calc(var(--ls-sticky-top, 113px) + 6px) 0 0 0; background: #1c2c39; border-radius: 2.5px; /* match the betslip width */ /* Like the docked betslip: the rail's BOTTOM must never fall below the window — cap it to the viewport (it sticks at --ls-sticky-top + 6) and SCROLL the list internally so no league row is ever hidden. */ max-height: calc(100dvh - var(--ls-sticky-top, 113px) - 16px); overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; /* keep it scrollable, just hide the native scrollbar */ box-shadow: 0 8px 28px rgba(0,0,0,.18); font-size: 13px; } .lux-leftrail::-webkit-scrollbar { display: none; } .lux-lr__toggle { align-self: flex-end; background: none; border: 0; color: #9fb2c0; font-size: 12px; font-weight: 700; padding: 8px 12px 6px; cursor: pointer; } .lux-lr__toggle:hover { color: #fff; } .lux-lr__showlbl { display: none; } .lux-lr__sport { display: flex; align-items: center; gap: 8px; padding: 9px 12px; color: #fff; font-weight: 700; text-decoration: none; cursor: pointer; background: #16242f; } .lux-lr__sicon { display: inline-grid; place-items: center; color: #00d25a; } .lux-lr__list { display: flex; flex-direction: column; } .lux-lr__item { padding: 10px 12px; color: #cdd9e2; text-decoration: none; cursor: pointer; border-top: 1px solid rgba(255,255,255,.04); font-weight: 600; transition: background .12s ease, color .12s ease; } .lux-lr__item:hover { background: rgba(255,255,255,.05); color: #fff; } .lux-lr__item.is-active { background: #243643; color: #fff; box-shadow: inset 3px 0 0 #00d25a; } /* SportPesa-style "Top Leagues" list: dark header + ranked league rows (green dot · name · country · count). */ .lux-lr__lgh { padding: 9px 12px; background: #2a3744; color: #cfd9e2; font-size: 12px; font-weight: 800; letter-spacing: .03em; margin-top: 6px; } .lux-lr__lglist { display: flex; flex-direction: column; } .lux-lr__lg { display: flex; align-items: center; gap: 9px; padding: 8px 12px; text-decoration: none; cursor: pointer; border-top: 1px solid rgba(255,255,255,.04); } .lux-lr__lg:hover { background: rgba(255,255,255,.05); } .lux-lr__lgdot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #00d25a; } .lux-lr__lgtext { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .lux-lr__lgname { color: #e7edf2; font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lux-lr__lgcty { color: #8194a3; font-size: 10.5px; } .lux-lr__lgn { flex: none; color: #8194a3; font-size: 11px; font-weight: 700; } } .tbc-count { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 20px; background: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 10.5px; font-weight: 700; line-height: 1.7; margin-left: 6px; } /* ── GameGrid (rails + ranked + grid) ── */ .tbc-h { display: flex; align-items: flex-start; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; } .tbc-h::-webkit-scrollbar { display: none; } .tbc-h > * { flex: 0 0 var(--game-card-size); scroll-snap-align: start; } .tbc-ranked { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-auto-columns: calc((100% - 18px) / 2.5); gap: 9px; overflow-x: auto; scrollbar-width: none; padding: 6px 4px 0; --gc-aspect: 550 / 412; } .tbc-ranked::-webkit-scrollbar { display: none; } .tbc-grid { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px; } /* mobile: 3 per row */ /* Desktop (≥1024px) tile sizing — mobile is left unchanged. task 7: casino-home rows show 4⅓ tiles · task 6: Top-in-Kenya shows 3⅓ · task 4: category grid = 4 per row. */ @media (min-width: 800px) { .tbc-h > * { flex: 0 0 calc((100% - 44px) / 4.33); } .tbc-ranked { grid-auto-columns: calc((100% - 30px) / 3.33); } .tbc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* ── GameCard (square 4/3, red pennant rank, TOP badge, yellow stake) ── */ .tbc-card { position: relative; aspect-ratio: var(--gc-aspect, 4 / 3); width: 100%; border-radius: 8px; overflow: hidden; background: #063f29; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 6px 14px rgba(0,0,0,0.22); cursor: pointer; isolation: isolate; transition: transform .15s ease, box-shadow .15s ease; display: block; text-decoration: none; } .tbc-card:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,0.32); } .tbc-card:focus-visible { outline: 2px solid var(--tb-yellow); outline-offset: 2px; } .tbc-rank { position: absolute; top: 0; left: 7px; z-index: 3; width: 22px; padding: 5px 0 9px; background: #e11d2a; color: #fff; font-size: 13px; font-weight: 800; text-align: center; line-height: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 74%, 0 100%); box-shadow: 0 2px 5px rgba(0,0,0,0.35); } .tbc-art { width: 100%; height: 100%; object-fit: cover; display: block; background: linear-gradient(135deg, #063f29, #0f7a43); } .tbc-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,0.55) 100%); pointer-events: none; z-index: 1; } .tbc-top { position: absolute; top: 6px; left: 6px; z-index: 2; min-width: 38px; height: 20px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: #111827; border: 1px solid var(--tb-yellow); color: var(--tb-yellow); font-size: 9px; font-weight: 900; letter-spacing: 0.2px; line-height: 1; } .tbc-stakewrap { position: absolute; left: 8px; bottom: 8px; z-index: 2; line-height: 1; pointer-events: none; } .tbc-stake { color: var(--tb-yellow); font-size: 10px; font-weight: 700; letter-spacing: 0.3px; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.7), 0 0 6px rgba(0,0,0,0.45); } .tbc-stake--av { color: #fff; text-shadow: 0 0 5px rgba(255,225,120,0.95), 0 0 12px rgba(255,138,42,0.82), 0 1px 2px rgba(0,0,0,0.7); } /* ── SearchOverlay (full-screen, live, result list, hot searches) ── */ .tbc-ov { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; padding: 12px; background: var(--color-bg); } /* Desktop: the search overlay is restrained to the feed column (body width), not the whole viewport — it absolutely covers .lux-wrap (the centred feed); the betslip column stays beside it. open() scrolls to top. */ @media (min-width: 800px) { .lux-wrap { position: relative; } .tbc-ov { position: absolute; inset: var(--ls-sticky-top, 113px) 0 auto 0; min-height: calc(100dvh - var(--ls-sticky-top, 113px)); } } .tbc-ov[hidden] { display: none; } .tbc-ovhd { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; background: #013220; } .tbc-ovback { background: none; border: none; color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .tbc-ovhd input { flex: 1; height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--color-border); font-size: 16px; font-weight: 600; background: var(--input-bg); color: var(--color-text); outline: none; transition: border .2s ease, box-shadow .2s ease; } .tbc-ovhd input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgb(255 183 0 / 0.25); } .tbc-hot { margin-top: 24px; } .tbc-hot h4 { margin-bottom: 10px; font-size: 0.85rem; color: var(--color-success); } .tbc-chips { display: flex; flex-wrap: wrap; gap: 8px; } .tbc-chips button { padding: 6px 14px; border-radius: 999px; border: none; font-size: 0.75rem; font-weight: 700; cursor: pointer; background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover)); color: #000; } .tbc-results { margin-top: 20px; flex: 1; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; } .tbc-result { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 10px; background: var(--color-bg-alt); cursor: pointer; transition: background .15s ease; text-decoration: none; } .tbc-result:hover { background: var(--hover-bg); } .tbc-result > div { display: flex; flex-direction: column; } .tbc-result strong { font-size: 0.9rem; font-weight: 700; color: var(--color-text); } .tbc-result small { font-size: 0.75rem; color: var(--color-text-muted); } .tbc-result img { width: 52px; height: 52px; object-fit: cover; border-radius: 8px; } .tbc-nores { padding: 28px; text-align: center; font-weight: 600; color: var(--color-text-muted); } @media (max-width: 400px) { .tbc-ovhd input { font-size: 14px; } } /* ── Casino reward bottom nav (1:1 with BottomNav.module.css): Home · Free Bets · TakeOff FAB · 500 Daily · Rewards. Same height/width footprint as the book's .lux-bnav so the combo body padding clears it. ── */ .tbc-bnav { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 720px; z-index: 200; display: grid; grid-template-columns: repeat(5, 1fr); height: var(--lux-bnav-h, 60px); padding-bottom: env(safe-area-inset-bottom); background: linear-gradient(180deg, #1f2b38, #16202c); border-top: 1px solid rgba(255,255,255,.08); } .tbc-bnav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; height: var(--lux-bnav-h, 60px); padding: 6px 4px; text-decoration: none; text-align: center; font-size: 11px; font-weight: 600; color: #9aa4af; background: none; border: 0; cursor: pointer; } .tbc-bnav__item:active { transform: translateY(-1px); } .tbc-bnav__item.is-active { color: #00d25a; background-color: rgba(0,210,90,.14); } .tbc-bnav__item.is-active .tbc-bnav__img { filter: drop-shadow(0 0 6px rgba(0,210,90,.6)); } .tbc-bnav__ic, .tbc-bnav__icrel, .tbc-bnav__spin { position: relative; width: 24px; height: 24px; display: grid; place-items: center; } .tbc-bnav__img { width: 24px; height: 24px; object-fit: contain; } .tbc-bnav__wheel { width: 100%; height: 100%; animation: tbc-spin 2.5s linear infinite; } .tbc-bnav__pointer { position: absolute; top: -2px; left: 50%; width: 40px; transform: translateX(-50%); pointer-events: none; } @keyframes tbc-spin { to { transform: rotate(360deg); } } .tbc-bnav__badge { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; border-radius: 50%; background: red; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 700; pointer-events: none; } .tbc-bnav__badge[hidden] { display: none; } .tbc-bnav__item--fab { overflow: visible; } .tbc-bnav__fab { width: 48px; height: 48px; margin-top: -26px; border-radius: 50%; background: #ffd21c; color: #3a2e00; display: grid; place-items: center; border: 4px solid #1c2734; box-shadow: 0 4px 10px rgba(0,0,0,.35); } .tbc-bnav__item--fab .tbc-bnav__lbl { color: #ffd21c; } @media (max-width: 360px) { .tbc-bnav { --lux-bnav-h: 54px; } .tbc-bnav__item { font-size: 9px; } } @media (min-width: 800px) { .tbc-bnav { display: none !important; } } /* desktop: hide like the book nav */ /* Native promotions page. */ .lux-promos { padding: 4px 0 28px; } .lux-promos__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .lux-promos__card { border-radius: 8px; overflow: hidden; background: var(--lux-surface-2); border: 1px solid var(--lux-border); } .lux-promos__img { width: 100%; height: auto; display: block; } .lux-promos__body { padding: 10px 12px 12px; } .lux-promos__title { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: var(--lux-text); } .lux-promos__desc { margin: 0; font-size: .85rem; color: var(--lux-muted); line-height: 1.4; } .lux-clob__nav { display: flex; gap: 8px; overflow-x: auto; padding: 6px 0 10px; scrollbar-width: none; } .lux-clob__nav::-webkit-scrollbar { display: none; } .lux-clob__navlink { flex: 0 0 auto; padding: 7px 13px; border-radius: 999px; background: var(--lux-surface-2); color: var(--lux-text); font-size: .82rem; font-weight: 600; text-decoration: none; white-space: nowrap; } .lux-clob__navlink:active { background: var(--lux-primary); color: var(--lux-on-primary); } .lux-clob__sec { margin: 12px 0 2px; scroll-margin-top: calc(var(--ls-sticky-top, 96px) + 8px); } .lux-clob__sechd { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 0 8px; } .lux-clob__sectitle { margin: 0; font-size: 1rem; font-weight: 800; color: var(--lux-text); } .lux-clob__seeall { flex: none; font-size: .8rem; font-weight: 700; color: var(--lux-primary); text-decoration: none; white-space: nowrap; } .lux-clob__grid { display: grid; grid-auto-flow: column; grid-auto-columns: 128px; gap: 8px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x proximity; scrollbar-width: none; } .lux-clob__grid::-webkit-scrollbar { display: none; } .lux-clob__grid .lux-pncard { width: 100%; scroll-snap-align: start; } /* In-shell game launcher (Phase 2) — the host game iframe fills the viewport under the header + back bar. */ /* Full-screen OWN launcher. Header = GameLauncherPage.module.css 1:1; jackpot = InGameJackpotPanel.module.css 1:1. */ .lux-gameframe { display: flex; flex-direction: column; height: 100dvh; background: #0b1620; } /* ── header (.header / .logo / .right / .walletBtn / .closeBtn) ── */ .lux-gameframe__hd { flex: 0 0 auto; min-height: 51px; display: flex; align-items: center; justify-content: space-between; padding: 6px 12px; background: linear-gradient(135deg, #063e2b 0%, #032f25 74%); color: #f8fafc; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .lux-gameframe__logo { display: flex; align-items: center; min-width: 0; cursor: pointer; } .lux-gameframe__logo img { height: 34px; width: auto; display: block; } .lux-gameframe__acts { display: flex; align-items: center; gap: 7px; min-width: 0; } .lux-gameframe__dep { height: 26px; border: 0; border-radius: 7px; background: var(--tb-yellow, #ffd21c); color: #0f172a; padding: 0 11px; font-weight: 800; font-size: 12px; letter-spacing: 0.3px; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; cursor: pointer; box-shadow: 0 1px 0 rgba(255,255,255,0.18) inset, 0 1px 2px rgba(0,0,0,0.25); } .lux-gameframe__x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: #f8fafc; display: grid; place-items: center; font-size: 18px; font-weight: 700; line-height: 1; cursor: pointer; text-decoration: none; } .lux-gameframe__frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; display: block; background: #000; } .lux-gameframe__err { padding: 44px 18px; text-align: center; color: var(--lux-muted); font-size: .92rem; } /* ── jackpot bar (.panel / .brand / .ticker / .meta / .amount / .cluster / .switch) ── */ .lux-gameframe__jp { position: relative; width: 100%; flex: 0 0 auto; display: flex; align-items: stretch; gap: 4px; padding: 5px 8px; min-height: 44px; background: radial-gradient(140% 200% at 50% 0%, rgba(40,199,111,0.22) 0%, transparent 60%), linear-gradient(180deg, #0d3528 0%, #052017 100%); border-top: 1px solid rgba(40,199,111,0.35); box-shadow: 0 -2px 8px rgba(0,0,0,0.3); color: #e8fff7; overflow: hidden; } .lux-gameframe__jp::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 220% at 80% 50%, rgba(111,255,201,0.14) 0%, transparent 65%), radial-gradient(50% 200% at 20% 50%, rgba(40,199,111,0.18) 0%, transparent 70%); mix-blend-mode: screen; } .lux-gameframe__jpbrand { position: relative; z-index: 1; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0 2px; background: transparent; border: 0; cursor: pointer; } .lux-gameframe__jpbrand img { display: block; height: 28px; width: auto; max-width: 100%; object-fit: contain; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); } .lux-gameframe__jptw { position: relative; z-index: 1; flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 6px; overflow-x: auto; scrollbar-width: none; } .lux-gameframe__jptw::-webkit-scrollbar { display: none; } .lux-gameframe__jpt { flex: 0 0 auto; min-width: 110px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1px; padding: 3px 8px; background: rgba(4,34,28,0.65); border: 1px solid rgba(111,255,201,0.45); border-radius: 6px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } .lux-gameframe__jpmeta { font-size: 8.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: #b9ffe1; white-space: nowrap; line-height: 1; } .lux-gameframe__jpamt { font-size: 12.5px; font-weight: 900; letter-spacing: 0.2px; color: var(--tb-yellow, #ffd21c); font-variant-numeric: tabular-nums; line-height: 1.05; white-space: nowrap; } .lux-gameframe__jpcl { position: relative; z-index: 1; flex: 0 0 auto; display: flex; align-items: center; gap: 6px; padding-left: 2px; } .lux-gameframe__jpinfo { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,0.35); background: rgba(0,0,0,0.25); color: #e8fff7; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 900; line-height: 1; font-family: "Times New Roman", serif; font-style: italic; } .lux-gameframe__jpstake { color: #e8fff7; font-size: 11.5px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } .lux-gameframe__jpopt { color: #b9ffe1; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1; } .lux-gameframe__jpsw { position: relative; display: inline-block; width: 30px; height: 16px; flex: 0 0 auto; cursor: pointer; } .lux-gameframe__jpsw input { position: absolute; opacity: 0; width: 0; height: 0; } .lux-gameframe__jpsl { position: absolute; inset: 0; background: rgba(255,255,255,0.22); border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; transition: background .18s ease, border-color .18s ease; } .lux-gameframe__jpsl::before { content: ""; position: absolute; top: 1px; left: 1px; width: 12px; height: 12px; background: #fff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0,0,0,0.4); transition: transform .18s ease; } .lux-gameframe__jpsw input:checked + .lux-gameframe__jpsl { background: var(--tb-yellow, #ffd21c); border-color: var(--tb-yellow, #ffd21c); } .lux-gameframe__jpsw input:checked + .lux-gameframe__jpsl::before { transform: translateX(14px); } @media (min-width: 768px) { .lux-gameframe__jp { padding: 8px 18px; min-height: 58px; gap: 10px; } .lux-gameframe__jpbrand img { height: 40px; } .lux-gameframe__jpt { min-width: 150px; padding: 4px 14px; } .lux-gameframe__jpmeta { font-size: 10px; } .lux-gameframe__jpamt { font-size: 16px; } .lux-gameframe__jpcl { gap: 10px; padding-left: 10px; } .lux-gameframe__jpinfo { width: 28px; height: 28px; font-size: 13px; } .lux-gameframe__jpstake { font-size: 14px; } .lux-gameframe__jpsw { width: 38px; height: 20px; } .lux-gameframe__jpsl::before { width: 16px; height: 16px; } .lux-gameframe__jpsw input:checked + .lux-gameframe__jpsl::before { transform: translateX(18px); } } /* The game LAUNCHER (not the rewards embed) is a true full-screen takeover on desktop too: drop the docked betslip / left rail / FAB and let the frame span all grid columns. */ body:has(.lux-gameframe:not(.lux-gameframe--embed)) #lux-slip, body:has(.lux-gameframe:not(.lux-gameframe--embed)) #lux-slip-overlay, body:has(.lux-gameframe:not(.lux-gameframe--embed)) .lux-leftrail, body:has(.lux-gameframe:not(.lux-gameframe--embed)) .lux-fab { display: none !important; } body:has(.lux-gameframe:not(.lux-gameframe--embed)) .lux-wrap { grid-column: 1 / -1 !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } /* Chromeless embed (self-hosted Rewards / Free Bets React pages) keeps the in-shell height calc (book chrome above). */ .lux-gameframe--embed { height: auto; } .lux-gameframe--embed .lux-gameframe__frame { height: calc(100dvh - 170px); min-height: 70vh; background: #1C2733; } /* Tushinde Jackpot panel (native) — 1:1 port of the React TushindeJackpot home teaser (.module.css). */ .lux-jp { position: relative; margin: 8px 0 14px; padding: 7px 12px 9px; border-radius: 8px; overflow: hidden; color: #fff; border-top: 1px solid rgba(132, 255, 211, .28); border-bottom: 1px solid rgba(132, 255, 211, .28); background: radial-gradient(circle at 50% 36%, rgba(111, 255, 201, .34), transparent 12rem), linear-gradient(180deg, #092c26 0%, #063b2c 55%, #062b23 100%); box-shadow: 0 16px 36px rgba(0, 0, 0, .32), inset 0 0 32px rgba(51, 255, 183, .13); } .lux-jp::before { content: ""; position: absolute; left: -18px; right: -18px; top: 104px; height: 58px; background: linear-gradient(90deg, transparent, rgba(94, 255, 202, .58), transparent); filter: blur(10px); opacity: .85; pointer-events: none; } .lux-jp__head { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 2px; } .lux-jp__logoimg { display: block; height: 30px; width: auto; max-width: 180px; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); } .lux-jp__more { display: inline-flex; align-items: center; gap: 4px; color: #d9e0e8; font-size: 13px; font-weight: 700; letter-spacing: .2px; line-height: 1; text-decoration: none; } .lux-jp__more:hover { color: #fff; } .lux-jp__grandlbl { position: relative; z-index: 1; color: var(--tb-yellow, #ffd21c); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; text-align: center; margin-bottom: 2px; } .lux-jp__grand { position: relative; z-index: 1; width: min(100%, 260px); margin: 0 auto 8px; border-radius: 12px; border: 2px solid rgba(183, 255, 233, .92); background: rgba(5, 37, 30, .88); box-shadow: 0 0 22px rgba(111, 255, 201, .7); padding: 8px 10px; text-align: center; } .lux-jp__grandamt { color: #a7ffe1; font-size: 31px; font-weight: 900; line-height: 1.05; margin: 2px 0; font-variant-numeric: tabular-nums; } .lux-jp__tiers { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 11px; } .lux-jp__card { border-radius: 9px; border: 1px solid rgba(183, 255, 233, .72); background: rgba(4, 34, 28, .9); padding: 8px 6px; text-align: center; box-shadow: 0 0 12px rgba(111, 255, 201, .28); } .lux-jp__lbl { color: var(--tb-yellow, #ffd21c); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; } .lux-jp__amt { color: #a7ffe1; font-size: 17px; font-weight: 900; margin-top: 4px; font-variant-numeric: tabular-nums; } .lux-jp__meta { color: #e8fff7; font-size: 10px; font-weight: 700; margin-top: 2px; } .lux-jp__games { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .lux-jp__game { min-height: 112px; border: 0; border-radius: 8px; background-size: cover; background-position: center; background-color: #1a3d2f; box-shadow: 0 10px 18px rgba(0, 0, 0, .28); overflow: hidden; position: relative; display: block; cursor: pointer; transition: transform .12s ease; } .lux-jp__game:hover { transform: translateY(-1px); } .lux-jp__game::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .65) 100%); pointer-events: none; } .lux-jp__minfo { position: absolute; right: 7px; bottom: 7px; z-index: 1; width: 22px; height: 22px; border-radius: 50%; background: #22ee9b; color: #063024; display: grid; place-items: center; } /* ════════════════════════════════════════════════════════════════════════════════════════════════════ DESKTOP LAYOUT (≥1024px) — 2026-06-13, pass 2. A responsive reflow of the SAME mobile DOM (zero markup changes). The feed stays a SINGLE full-width column; the width is used INSIDE each row — each match shows its first 3 markets side-by-side (no swipe carousel) followed by the "+N markets" button. The market panels are already in the DOM (the mobile carousel just revealed one at a time). EVERYTHING is inside the min-width query, so below 1024px the mobile book is byte-for-byte unchanged. ════════════════════════════════════════════════════════════════════════════════════════════════════ */ /* Desktop right-rail wrapper (betslip + Grand Prize Winners). On mobile it's transparent (display:contents) so the slip stays the fixed bottom drawer and the winners board is hidden; on desktop (below) it becomes a single grid cell in column 3, so the winners board sits directly under the slip regardless of feed height. */ .lux-drail { display: contents; } .lux-winners { display: none; } @keyframes lux-wscroll { from { transform: translateY(0); } to { transform: translateY(-50%); } } @media (min-width: 800px) { /* Widen the single column into a real desktop canvas (was 720px). The sticky nav/header bleed (margin: 0 -14px) and the bottom nav track this automatically. */ .lux-wrap { max-width: 800px; padding-left: 22px; padding-right: 22px; } .lux-bnav { display: none !important; } /* desktop: hide the mobile bottom nav — the top menu + docked slip cover it */ /* The Earn bottom nav (.lux-bnav--code) is HIDDEN on desktop (the base .lux-bnav rule) — desktop uses the sticky .lux-earnmenu above the search instead (below). It stays the bottom nav on mobile. */ /* DOCK GATE — the betslip docks as a right rail only on WIDE desktop (≥1280px). From 800–1279 a docked 300px rail crushes the 800px feed (feed drops to ~490px @800), so there the slip falls back to the mobile FAB + bottom-sheet (base styles) and the feed takes the full width. Nested @media ⇒ ≥1280. */ @media (min-width: 1280px) { /* Right rail = betslip + Grand Prize Winners stacked in column 3 (one grid cell → winners sit right under the slip). The rail provides the col-3 placement + top offset; the slip drops its own margin. */ .lux-drail { display: flex !important; flex-direction: column; gap: 8px; grid-column: 3 !important; align-self: start; justify-self: start; width: 300px !important; position: sticky !important; top: calc(var(--ls-sticky-top, 113px) + 6px) !important; margin-top: calc(var(--ls-sticky-top, 113px) + 6px) !important; } .lux-drail > .lux-slip { margin: 0 !important; } /* Grand Prize Winners board — dark card, a viewport that clips a slowly upward-scrolling track. */ /* Winners board REMOVED 2026-06-17 (user request, both operators) — hidden even if a stale cached player.js still injects it; the betslip below now fills the full rail height. */ .lux-winners { display: none !important; flex-direction: column; background: #14202b; border-radius: 4px; overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); } .lux-winners__h { padding: 12px 10px; text-align: center; color: #fff; font-weight: 700; font-size: .95rem; border-bottom: 1px solid rgba(255, 255, 255, .08); } .lux-winners__vp { height: 360px; overflow: hidden; position: relative; } .lux-winners__track { display: flex; flex-direction: column; gap: 8px; padding: 8px; will-change: transform; } .lux-winners__icimg { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; } .lux-wt { display: none !important; } /* desktop: the horizontal marquee ticker → its winners now feed the board */ .lux-winners__row { display: flex; align-items: center; gap: 9px; background: #1f2e3a; border: 1px solid rgba(255, 255, 255, .07); border-radius: 4px; padding: 8px 10px; } .lux-winners__ico { flex: none; width: 30px; height: 30px; border-radius: 6px; background: #0c161e; display: flex; align-items: center; justify-content: center; font-size: 1.05rem; } .lux-winners__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .lux-winners__l { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; } .lux-winners__amt { color: #2ecc71; font-weight: 700; font-size: .9rem; white-space: nowrap; } .lux-winners__time { color: #8b95a1; font-size: .72rem; white-space: nowrap; flex: none; } .lux-winners__game { color: #9aa3ad; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lux-winners__phone { color: #8b95a1; font-size: .76rem; white-space: nowrap; flex: none; } } /* ── end ≥1280 dock chunk A (drail + winners board) ── */ /* HEADER: stretch the section BACKGROUND COLOURS out to the screen edges (like the OdiBets/SportyBet reference) while the logo, Login/Join and the menu items stay EXACTLY where they are. The box-shadow + clip-path paints the bar's colour to the viewport edges without moving or resizing the element, so no content shifts and there's no horizontal scrollbar (unlike a 100vw approach). The green bar goes solid (its gradient is near-flat anyway) so the bled sides are seamless. */ .lux-chdr { background: #063e2b; box-shadow: 0 0 0 100vmax #063e2b; clip-path: inset(0 -100vmax); z-index: 300 !important; } /* menu joins the header as a sticky bar (it scrolls away on mobile); both pin to the top, above all page content (z 300/290) but below modals/drawers (z 400+) so dialogs still cover them. */ .lux-cmenu { box-shadow: 0 0 0 100vmax #1c2733; clip-path: inset(0 -100vmax); position: sticky !important; top: var(--lux-chdr-h, 49px) !important; z-index: 290 !important; } .lux-cmenu__tab { font-size: 14px; } /* menu items (Sports · Casino · …) a touch larger on desktop */ /* Task 8: the unified casino top-nav goes full-width edge-to-edge (same box-shadow trick as the header/menu — no 100vw scrollbar), and pins sticky just under the header. Icon positions are unchanged. */ .tbc-nav { box-shadow: 0 0 0 100vmax #152331; clip-path: inset(0 -100vmax); position: sticky !important; top: var(--lux-chdr-h, 49px) !important; z-index: 290 !important; } /* ── Bet slip docked as a persistent RIGHT RAIL (desktop) instead of the mobile bottom-sheet. The panel is always in the DOM and drawPanel() fills it on load (incl. the "No selections" empty state); here we pin it to the right, force it visible, and drop the FAB + backdrop. The page reserves its width on the right so the feed clears the rail. */ /* 3-COLUMN ROW: a full-width header on top, then [reserved left rail] [centred 800px feed] [slip]. The side columns are EQUAL (1fr) so the 800 feed stays dead-centre no matter what; the slip sits NATURALLY beside it (in normal flow — not floating). The left column is reserved for future side content. */ body { display: grid !important; grid-template-columns: 1fr minmax(0, 800px) 1fr !important; column-gap: 5px !important; align-items: start !important; background: #060A10 !important; } /* the empty surround around the centred feed */ body > * { grid-column: 1 / -1; } /* default: header + modals span the full width */ .lux-wrap { grid-column: 2 !important; max-width: 100% !important; margin: 0 !important; } .lux-cstrip { margin-top: 5px !important; } /* 5px gap between the sticky menu and the top banner */ /* Feed gets a SOLID #1B1E25 background (no transparency) instead of a separation shadow — the sticky header + menu (below) sit above everything, so they provide the structure. */ .lux-wrap { background: #1B1E25; } /* ── ≥1280 dock chunk B: the docked-slip box + its leg / header / footer theming. Below 1280 none of this applies, so the base mobile FAB + bottom-sheet (light) styles render instead, and the empty column-3 lets the feed use the full width. ── */ @media (min-width: 1280px) { .lux-slip, .lux-slip[hidden] { /* slip = the RIGHT column, in flow beside the feed */ grid-column: 3 !important; justify-self: start !important; align-self: start !important; display: flex !important; position: static !important; /* the .lux-drail WRAPPER carries the sticky + offset; the slip inside must NOT add its own (that double-offset shoved it to 258 after a feed swap) */ width: 300px !important; min-width: 300px !important; max-width: 300px !important; /* fixed 300px */ /* DESKTOP: the slip may grow downward with picks but its BOTTOM must never fall below the window. Cap height to the viewport from the slip's pinned top (drail sticks at --ls-sticky-top + 6px) leaving a ~10px tail gap. Once content exceeds this, the flex .lux-slip__scroll body (overflow-y:auto, auto min-height 0) scrolls the picks INTERNALLY while the head + Place footer stay pinned. */ /* Winners board removed → the slip now FILLS the full rail height (was height:auto, content-sized). The internal .lux-slip__scroll (flex:1) takes the slack; head + Place footer stay pinned top/bottom. */ height: calc(100dvh - var(--ls-sticky-top, 123px) - 16px) !important; max-height: calc(100dvh - var(--ls-sticky-top, 123px) - 16px) !important; margin: 0 !important; border-radius: 2.5px !important; overflow: hidden !important; box-shadow: 0 8px 28px rgba(0, 0, 0, .18) !important; } .lux-slip.is-closing { animation: none !important; transform: none !important; } .lux-fab, .lux-slip-overlay { display: none !important; } /* no FAB / backdrop on desktop — the slip is always there */ .lux-slip__close { display: none !important; } /* docked card is always present → no close ✕ */ /* ── Slip leg rows (desktop): tighter, the × tucked directly UNDER the odds (top-right), lighter market label (no bold). Mobile drawer keeps its own × -on-the-left layout. ──────────────── */ .lux-slip .lux-slip__leg { position: relative !important; padding: 6px 2px !important; } /* tighten height */ .lux-slip .lux-slip__leg-main { gap: 1px !important; } .lux-slip .lux-slip__leg-odds { margin-right: 2px !important; } .lux-slip .lux-slip__leg-rm { /* × sits just below the odds, flush right */ position: absolute !important; top: 38px !important; right: 0 !important; margin: 0 !important; padding: 0 4px !important; line-height: 1 !important; font-size: 1.3rem !important; /* a bit bigger */ } .lux-slip .lux-slip__leg-mkt { font-weight: 400 !important; } /* market label not bold */ .lux-slip .lux-slip__leg-pick { font-weight: 400 !important; } /* the green pick (the actual bold text) → not bold */ .lux-slip .lux-slip__leg-odds { font-weight: 400 !important; } /* leg odds value → not bold */ .lux-slip .lux-bttab { font-weight: 400 !important; } /* bet-type tab labels (Multiple/System/…) → not bold */ .lux-slip__headttl { font-weight: 400 !important; } /* "Betslip" header title → not bold */ /* ── SportPesa-style MIX (user spec): DARK header (img 3) + DARK footer/controls (img 4); the bet-type tabs (img 1) and the body — explain, legs, System/Combos, Save/Load (img 2) — stay on the LIGHT base theme in between. So we DON'T re-skin the whole slip: only the header band + footer slab go dark; everything else keeps its original light colours. ──────────────────────────────────────── */ /* HEADER band → dark (gear + bin both use .lux-slip__icon) */ .lux-slip__head { background: #14202b !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; } .lux-slip__headttl { color: #ffffff !important; } .lux-slip__headbal2 small { color: #9fb2bf !important; } .lux-slip__headbal2 b { color: #ffffff !important; } .lux-slip__head .lux-slip__icon { color: #cdd9e1 !important; } /* FOOTER slab → dark (chips, presets, stake input, total/pay lines, place bet) */ .lux-slip .lux-slip__foot { background: #14202b !important; border-top: 1px solid rgba(255, 255, 255, .10) !important; box-shadow: none !important; } .lux-slip .lux-slip__foot .lux-chip { background: #1f2e3a !important; border-color: rgba(255, 255, 255, .16) !important; color: #cdd9e1 !important; } .lux-slip .lux-slip__foot .lux-chip.is-on, .lux-slip .lux-slip__foot .lux-chip--info.is-on { background: #12321f !important; border-color: #2fb85f !important; color: #34d27a !important; } .lux-slip .lux-slip__foot .lux-chip.is-disabled, .lux-slip .lux-slip__foot .lux-chip--info.is-off { background: #1a2733 !important; } .lux-slip .lux-slip__foot .lux-preset { background: #1f2e3a !important; border-color: rgba(255, 255, 255, .16) !important; color: #eef4f8 !important; } .lux-slip .lux-slip__foot .lux-preset.is-on { background: #2a2410 !important; border-color: #e6c200 !important; color: #ffd84d !important; box-shadow: 0 0 0 1px #e6c200 inset !important; } .lux-slip .lux-slip__foot .lux-slip__stakebox input { background: #0c161e !important; border-color: rgba(255, 255, 255, .18) !important; color: #ffffff !important; } .lux-slip .lux-slip__foot .lux-slip__stakebox input:focus { border-color: #2fb85f !important; } .lux-slip .lux-slip__foot .lux-slip__totallbl, .lux-slip .lux-slip__foot .lux-slip__paygrp { color: #9fb2bf !important; } .lux-slip .lux-slip__foot .lux-slip__totalrow b, .lux-slip .lux-slip__foot .lux-slip__sum--pay b, .lux-slip .lux-slip__foot .lux-slip__paygrp b { color: #ffffff !important; } .lux-slip .lux-slip__foot .lux-place[disabled] { background: #38444f !important; color: #aeb6bf !important; } /* ── No selections yet → the WHOLE slip is dark; the mix only kicks in once picks are added. The empty state has no footer, so :has(.lux-slip__empty) darkens the body + Enter-code row to match the already-dark header. (:has is already used elsewhere in this sheet, so support is fine.) ───────── */ .lux-slip:has(.lux-slip__empty) { background: #14202b !important; } .lux-slip:has(.lux-slip__empty) .lux-slip__scroll { background: #14202b !important; } .lux-slip__empty { color: #9fb2bf !important; } .lux-slip__empty-h { color: #ffffff !important; } .lux-slip__empty-sub { color: #9fb2bf !important; } .lux-slip__empty .lux-slip__codeinput { background: #0c161e !important; border-color: rgba(255, 255, 255, .18) !important; color: #ffffff !important; } .lux-slip__empty .lux-slip__codebtn { background: #1f2e3a !important; border-color: rgba(255, 255, 255, .16) !important; color: #eef4f8 !important; } } /* ── end ≥1280 dock chunk B (docked slip box + theming) ── */ /* World Cup / Top-Games strip: ~3 tiles across instead of one full-width card. */ .lux-fifawc .lux-tg, .lux-tgslider .lux-tg { flex: 0 0 320px; } /* ── Desktop match row: teams on the left; the first 5 markets as EQUAL columns spread across the width, each divided by a vertical rule + padding (no swipe); the "+N markets" button compact at the right edge. (Feed itself stays one column.) ──────────────────────────────────────────────────────── */ .lux-match__teams { flex: 0 1 200px; } /* narrower teams column → markets shift left */ .lux-match__oddswrap { flex: 1 1 auto; } /* markets fill the rest of the row */ /* Each market sizes to its OWN content (a 3-way is wider than a 2-way — NOT forced into equal columns) and the markets spread evenly across the width, with the +N button at the right edge. Each market stacks its NAME heading over its odds. */ .lux-mvp { overflow: visible; border-left: 0; } .lux-mtrack { gap: 0; align-items: stretch; justify-content: space-between; } .lux-mpan { flex: 0 1 auto; min-width: 0; width: auto; scroll-snap-align: none; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 10px; /* tighter: odds sit closer to their divider (pushed left) */ } /* a SHORT, vertically-centred divider on the LEFT of each market — a line BETWEEN every pair (the first one doubles as the teams|markets divider); floats mid-height, never touches the card's top/bottom rules. The +N button is excluded (its own green box separates it). */ .lux-mpan:not(.lux-mpan-all) { background: linear-gradient(var(--lux-border), var(--lux-border)) left center / 1px 64% no-repeat; } /* the market-name HEADING, back above each market's odds */ .lux-mpan:not(.lux-mpan-all)::before { content: attr(data-name); margin-bottom: 3px; font-size: .6rem; font-weight: 600; color: var(--lux-league); white-space: nowrap; } .lux-mpan .lux-otile { flex: 1 1 auto; min-width: 42px; text-align: center; } /* each selection a tidy, even cell */ .lux-mpan:nth-of-type(n+5) { display: none; } /* show the first 4 markets */ .lux-mpan-all { flex: 0 0 auto; flex-direction: row; justify-content: center; gap: 2px; padding: 0 4px; } /* +N button: narrow + content centred */ .lux-mall-n { font-size: .85rem; font-weight: 700; } /* req 3: normalize the oversized +N number */ .lux-mall-go { font-size: 1rem; } .lux-otile__odds { font-size: 1.12rem; } /* req 4: odds a touch larger */ /* req 5: market-name headings removed (the per-selection caps 1/X/2 · Over 2.5 stay). No swipe → drop the foot dots/indicator + the now-redundant top-right +N count. */ .lux-mind { display: none; } .lux-match__meta .lux-mcount { display: none; } } /* NARROW DESKTOP (800–1279px): the slip is NOT docked (that needs ≥1280) and the mobile bottom nav — which carries the combo's "Bet Slip" tab — is hidden up here, so bring back the floating FAB to open the slip. The slip then renders as the mobile bottom-sheet, sitting flush at the window bottom (no bottom nav to clear). At ≥1280 the dock chunk hides the FAB again and docks the rail. */ @media (min-width: 800px) and (max-width: 1279px) { .lux-combo .lux-fab { display: flex !important; } .lux-combo .lux-slip { bottom: 0; } } /* ── EARN PAGES: build codes with the Earn CODE SLIP, never the sportsbook betslip ──────────────────────── Detected by the Earn-only bottom nav (.lux-bnav--code). HIDE the betting slip everywhere on these pages — the docked desktop rail (+ its winners wrapper .lux-drail), the FAB, and its backdrop — so picks are built ONLY in the code slip (#lux-codeslip, opened by the "Create Codes" tab; it shares the same picks and its tab shows a live count). The :has() ancestor check beats the .lux-slip[hidden]{display:flex} dock rule. */ body:has(.lux-bnav--code) #lux-slip, body:has(.lux-bnav--code) .lux-drail, body:has(.lux-bnav--code) .lux-fab, body:has(.lux-bnav--code) #lux-slip-overlay { display: none !important; } /* The code slip carries class .lux-slip, so the ≥1280 DOCK rules would otherwise turn it into a right rail (and even keep it open via .lux-slip[hidden]{display:flex}). Pin #lux-codeslip to a centred bottom-SHEET at every width — id-specificity beats .lux-slip — while still respecting its hidden state + showing its backdrop when open. (Only ever bites on Earn pages, the only place the code slip is opened.) */ #lux-codeslip.lux-slip[hidden] { display: none !important; } #lux-codeslip.lux-slip:not([hidden]) { position: fixed !important; bottom: 0 !important; top: auto !important; left: 0 !important; right: 0 !important; transform: none !important; grid-column: auto !important; width: 100% !important; min-width: 0 !important; max-width: 480px !important; height: auto !important; max-height: 85dvh !important; margin: 0 auto !important; box-shadow: 0 -8px 28px rgba(0, 0, 0, .28) !important; } #lux-codeslip.is-closing { animation: lux-fall .3s cubic-bezier(.55, 0, .85, .4) forwards !important; } #lux-codeslip-overlay:not([hidden]) { display: block !important; } /* The code slip's footer goes DARK on desktop (≥1280, the .lux-slip__foot theming), but the inline "Odds" label/value use var(--lux-muted)/var(--lux-text) which stay the LIGHT-theme dark inks → invisible. Redefine those vars to light values inside the dark code-slip footer so "Odds 6.25" reads clearly. */ @media (min-width: 1280px) { #lux-codeslip .lux-slip__foot { --lux-muted: #9fb2bf; --lux-text: #ffffff; } } /* ── EARN nav as a sticky TOP menu above the search (DESKTOP) — replaces the bottom nav ≥800. ─────────────── */ .lux-earnmenu { display: none; } /* mobile keeps the bottom nav */ @media (min-width: 800px) { .lux-earnmenu { display: flex; gap: 6px; align-items: stretch; margin: 0 0 10px; padding: 6px; background: #152331; border: 1px solid rgba(255, 255, 255, .06); border-radius: 8px; position: sticky; top: calc(var(--ls-sticky-top, 113px) + 4px); z-index: 60; } .lux-earnmenu__item { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 9px 6px; color: #cdd9e2; text-decoration: none; cursor: pointer; border-radius: 7px; font-size: 12.5px; font-weight: 600; transition: background .12s ease, color .12s ease; } .lux-earnmenu__item:hover { background: rgba(255, 255, 255, .06); color: #fff; } .lux-earnmenu__item.is-active { color: #00d25a; background: rgba(0, 210, 90, .08); } .lux-earnmenu__ic { display: inline-grid; place-items: center; position: relative; } .lux-earnmenu__ic svg { width: 22px; height: 22px; display: block; } .lux-earnmenu__lbl { white-space: nowrap; } } /* ── EARN code slip DOCKED on the RIGHT (col 3, where the betslip sits) — always visible while you build a code (≥1280, the betslip's own breakpoint; the betslip itself is already hidden on Earn pages). ──────── */ @media (min-width: 1280px) { body:has(.lux-bnav--code) #lux-codeslip.lux-slip:not([hidden]) { grid-column: 3 !important; justify-self: start !important; align-self: start !important; position: sticky !important; top: calc(var(--ls-sticky-top, 113px) + 6px) !important; margin: calc(var(--ls-sticky-top, 113px) + 6px) 0 0 0 !important; bottom: auto !important; left: auto !important; right: auto !important; transform: none !important; width: 300px !important; min-width: 300px !important; max-width: 300px !important; height: auto !important; max-height: calc(100dvh - var(--ls-sticky-top, 113px) - 16px) !important; border-radius: 2.5px !important; } body:has(.lux-bnav--code) #lux-codeslip-overlay { display: none !important; } /* docked → no modal backdrop */ body:has(.lux-bnav--code) #lux-codeslip [data-codeclose] { display: none !important; } /* docked → no close ✕ */ } /* ── DESKTOP green header: 1/6 taller, with the logo + Login/Join scaled proportionally (≈ ×7/6). ─────────── */ @media (min-width: 800px) { .lux-chdr__in { min-height: 56px; } /* 48 → 56 (+1/6) */ .lux-chdr__logo { height: 37px; } /* 32 → 37 (+1/6) */ .lux-chdr__cta { height: 35px; font-size: 14px; padding: 0 16px; } /* Login/Join 30→35, 12→14 (+1/6) */ } /* ── DESKTOP ≥1400: widen the two top bars so their CONTENT (logo/Login·Join, nav icons) reaches from the LEFT sidebar's left edge to the betslip's RIGHT edge — widen the ELEMENT by the side-panel width (300) + grid gap (5) + combo bleed-margin (8) = 313px each side. The background colours STILL bleed to the screen edges (the ≥800 box-shadow/clip-path on these bars is kept) — only the content is repositioned. */ @media (min-width: 1400px) { .lux-chdr, .tbc-nav { margin-left: -313px !important; margin-right: -313px !important; } }