/* ==========================================================================
BET369 — Unified Stylesheet
Shared across index.html, promotion.html, about.html
========================================================================== */
/* ==========================================================================
1. GLOBAL / RESET
========================================================================== */
:root {
/* Brand colors */
--color-primary: #012699;
--color-primary-dark: #00116d;
--color-primary-darker: #0a1b4d;
--color-primary-light: #1a3a8a;
--color-primary-light-dark: #142d6f;
--color-accent: #ffea00;
--color-white: #ffffff;
--color-text-dark: #0e1635;
--color-text-muted: #cccccc;
--color-border-muted: #444444;
/* Typography */
--font-base: "Segoe UI", sans-serif;
/* Layout */
--header-height: 55px;
/* Footer height — the footer is position:fixed to the viewport bottom
(see .footer) so it no longer occupies space in normal document
flow. Its actual rendered height varies (footer copy differs in
length per language and can wrap onto a second line on narrow
screens), so script.js measures it with a ResizeObserver and keeps
this variable in sync. Page content then uses it as padding-bottom
so nothing is ever hidden behind the fixed footer. The value below
is just a same-origin fallback for the instant before JS runs. */
--footer-height: 90px;
/* Z-index scale (lowest to highest) */
--z-marquee: 999;
--z-header: 1000;
--z-footer: 1000;
--z-header-controls: 1001;
--z-popup: 2100;
/* Shadows */
--shadow-btn: 0 4px 15px rgba(0, 0, 0, 0.2);
--shadow-btn-hover: 0 8px 20px rgba(0, 0, 0, 0.3);
--shadow-btn-active: 0 2px 10px rgba(0, 0, 0, 0.2);
/* Focus ring (accessibility) */
--focus-ring: var(--color-accent);
/* Marquee sync offset — set by an inline script in on every page
load so the ticker always appears to be mid-loop instead of restarting.
The 0s fallback keeps things working even if JS is disabled. */
--marquee-delay: 0s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-base);
}
body {
background-color: var(--color-white);
color: var(--color-text-dark);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding-top: 0;
/* Reserves room for the fixed footer (see .footer) so the last bit of
real page content never scrolls in underneath it. */
padding-bottom: var(--footer-height);
overflow-x: hidden;
}
/* Visually hides an element while keeping it readable to screen readers
and search engines — used for headings that give the page structure
without needing to show on screen. */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.container {
max-width: 1200px;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
flex-grow: 1;
}
/* ==========================================================================
2. SHARED COMPONENTS
========================================================================== */
/* --- Header ---
Total box height = the visual 55px bar PLUS whatever the iOS status bar /
notch needs (env(safe-area-inset-top)). The extra space is added as
padding-top, so the blue background still flows edge-to-edge behind the
notch (matches apple-mobile-web-app-status-bar-style: black-translucent)
while the logo/buttons themselves get pushed down clear of the clock and
battery icons. On devices with no notch (Android, older iPhones, desktop)
the env() value is 0px, so this is a no-op and nothing changes. */
.header {
width: 100%;
background-color: var(--color-primary);
height: calc(var(--header-height) + env(safe-area-inset-top, 0px));
padding: env(safe-area-inset-top, 0px)
max(20px, env(safe-area-inset-right, 0px)) 0
max(20px, env(safe-area-inset-left, 0px));
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1.8px solid var(--color-accent);
position: sticky;
top: 0;
z-index: var(--z-header);
}
.header-logo-container {
flex-grow: 1;
text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
width: fit-content;
}
.header-logo {
width: 150px;
height: auto;
max-height: 45px;
object-fit: contain;
cursor: pointer;
}
/* --- Language Switcher (header, right side) ---
Replaces the old hamburger + off-canvas side menu. The trigger button
always shows the CURRENT language's flag ("flag first") — no hamburger
icon, no separate "menu" concept to learn. Tapping it drops a small
panel down from directly beneath the button ("dropdown down") listing
the other languages, updated live in changeLanguage(). */
.lang-switcher {
position: relative;
margin-left: auto;
flex-shrink: 0;
z-index: var(--z-header-controls);
}
.lang-switcher-toggle {
display: flex;
align-items: center;
gap: 6px;
height: 38px;
padding: 0 10px;
border-radius: 8px;
background: var(--color-primary-dark);
border: none;
border-bottom: 3px solid var(--color-primary-darker);
cursor: pointer;
transition: all 0.3s ease;
}
.lang-switcher-toggle:hover {
transform: translateY(-2px);
}
.lang-switcher-toggle:active {
transform: translateY(0);
}
.lang-switcher-chevron {
color: var(--color-white);
font-size: 0.65rem;
transition: transform 0.25s ease;
}
.lang-switcher.active .lang-switcher-chevron {
transform: rotate(180deg);
}
/* --- Marquee --- */
.marquee-container {
width: 100%;
overflow: hidden;
position: sticky;
top: calc(var(--header-height) + env(safe-area-inset-top, 0px));
left: 0;
background-color: var(--color-primary-dark);
color: var(--color-white);
padding: 0;
height: 21px;
display: flex;
align-items: center;
border-bottom: 1.8px solid var(--color-accent);
z-index: var(--z-marquee);
}
.marquee-content {
display: inline-block;
white-space: nowrap;
padding-left: 100%;
animation: marquee 30s linear infinite;
animation-delay: var(--marquee-delay, 0s);
line-height: 21px;
}
.marquee-content span {
font-size: 15px;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@media (prefers-reduced-motion: reduce) {
.marquee-content {
animation: none !important;
padding-left: 12px;
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
}
/* --- Quick Navigation Bar ---
Persistent row of 6 shortcuts (Home / Sports / Slots / Live Odds /
Live Chat / About Us) that sits directly beneath the marquee ticker on
every page. .marquee-container is position:sticky (matching .header
and this bar), so it now takes up real space in normal flow and
already pushes this bar down by its own 21px height — no manual
margin-top needed here. (It used to be position:fixed with a
margin-top hack to compensate, but fixed elements can visually detach
from sticky ones during mobile overscroll/pull-to-refresh rubber-band
bounce, which is why it was switched to sticky.)
This bar is also position:sticky with a matching `top` offset, so once
the page scrolls past it, it pins itself directly under the marquee
instead of scrolling away with the rest of the page — the same way
.header and .marquee-container do above. */
.quick-nav {
width: 100%;
height: 39px;
background-color: var(--color-primary-dark);
border-bottom: 1.8px solid var(--color-accent);
position: sticky;
top: calc(var(--header-height) + env(safe-area-inset-top, 0px) + 21px);
z-index: var(--z-marquee);
}
.quick-nav-inner {
max-width: 1200px;
height: 100%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 max(10px, env(safe-area-inset-right, 0px)) 0
max(10px, env(safe-area-inset-left, 0px));
}
.quick-nav-item {
flex: 1 1 0;
display: flex;
align-items: center;
justify-content: center;
height: 100%;
padding: 0 2px;
color: var(--color-white);
text-decoration: none;
border-radius: 6px;
transition:
background-color 0.2s ease,
color 0.2s ease,
transform 0.2s ease;
}
.quick-nav-item span {
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
text-align: center;
}
.quick-nav-item:hover {
background-color: rgba(255, 255, 255, 0.1);
transform: translateY(-1px);
}
.quick-nav-item.active {
color: var(--color-accent);
}
@media (max-width: 480px) {
.quick-nav-item span {
font-size: 0.68rem;
}
}
@media (max-width: 350px) {
.quick-nav-inner {
padding: 5px 6px;
}
.quick-nav-item span {
font-size: 0.6rem;
}
}
/* --- Language Switcher Dropdown (header) ---
Panel that drops down from the flag trigger button in the header.
Absolutely positioned relative to .lang-switcher, right-aligned so it
never runs past the edge of the viewport on narrow screens. */
.lang-switcher-menu {
position: absolute;
top: calc(100% + 12px);
right: 0;
min-width: 168px;
background: linear-gradient(
to bottom,
var(--color-primary),
var(--color-primary-dark)
);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 10px;
box-shadow: var(--shadow-btn-hover);
padding: 6px;
margin: 0;
list-style: none;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition:
opacity 0.2s ease,
transform 0.2s ease,
visibility 0.2s ease;
}
/* Small pointer connecting the panel back to the trigger button, so the
relationship between the two reads at a glance. */
.lang-switcher-menu::before {
content: "";
position: absolute;
top: -6px;
right: 16px;
width: 12px;
height: 12px;
background: var(--color-primary);
border-left: 1px solid rgba(255, 255, 255, 0.15);
border-top: 1px solid rgba(255, 255, 255, 0.15);
border-radius: 2px 0 0 0;
transform: rotate(45deg);
}
.lang-switcher-menu.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.lang-switcher-menu,
.lang-switcher-chevron {
transition: none;
}
}
.lang-switcher-option {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 10px;
border-radius: 6px;
cursor: pointer;
color: var(--color-white);
font-size: 0.9rem;
transition: background-color 0.2s ease;
}
.lang-switcher-option:hover,
.lang-switcher-option:focus-visible {
background-color: rgba(255, 255, 255, 0.12);
}
.lang-switcher-option.active {
background-color: rgba(255, 234, 0, 0.14);
color: var(--color-accent);
}
.lang-switcher-option.active::after {
content: "\2713";
margin-left: auto;
font-weight: bold;
}
.lang-switcher-flag {
width: 24px;
height: 16px;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
flex-shrink: 0;
display: block;
}
.lang-switcher-option .lang-switcher-flag {
width: 22px;
height: 15px;
}
/* --- Keyboard focus (accessibility) --- */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
border-radius: 4px;
}
/* --- Footer ---
Fixed to the viewport bottom (rather than living in normal document
flow) so it stays visible in place and doesn't scroll away with the
rest of the page content, on every page. --footer-height (kept in
sync by script.js) is what reserves matching space at the bottom of
body so this never overlaps real content. */
.footer {
position: fixed;
left: 0;
bottom: 0;
padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
text-align: center;
color: var(--color-text-muted);
font-size: 0.9rem;
border-top: 1px solid var(--color-border-muted);
width: 100%;
background-color: var(--color-primary-dark);
z-index: var(--z-footer);
}
/* --- Shared Responsive --- */
@media (max-width: 768px) {
.header-logo {
width: 150px;
max-height: 45px;
}
.lang-switcher-toggle {
height: 38px;
padding: 0 8px;
}
.marquee-content span {
font-size: 14px;
}
}
@media (max-width: 480px) {
.header-logo {
width: 150px;
max-height: 45px;
}
.lang-switcher-toggle {
height: 38px;
padding: 0 8px;
}
.marquee-content span {
font-size: 12px;
}
}
@media (max-width: 350px) {
.header-logo {
width: 80px;
max-height: 30px;
}
.lang-switcher-toggle {
height: 34px;
padding: 0 6px;
}
.lang-switcher-flag {
width: 20px;
height: 13px;
}
.marquee-content span {
font-size: 10px;
}
}
/* ==========================================================================
3. HOME PAGE (index.html)
========================================================================== */
/* --- 3a. 3-column layout: left / mid / right ---------------------------
.main-col is a drop-in replacement for "body" as the direct parent of
.container and .Game-slider: same flex/centering behavior as before, so
nothing in the mid column needs to change. .side-col--left holds a
promo banner + the jackpot ticker; .side-col--right holds a matching
promo banner.
Total width budget: 330px (left) + 4px gap + 864px (mid) + 4px gap +
330px (right) + 40px side padding = 1572px max. The mid track used to
be capped at 900px, but .container's actual *visible* content — the
824px banner plus .container's own 20px side padding = 864px — never
got anywhere near 900px, so the leftover ~36px showed up as dead space
inside the mid column on top of the column-gap, reading as "the
columns are far apart". Capping the mid track at 864px — exactly the
banner's rendered width — removes that extra slack so the sidebars sit
right up against .container's own padding, without touching
.container itself (shared with other pages). column-gap itself was
also trimmed from 8px to 4px (see below) — between that and dropping
the sidebars' own left/right padding (see .side-col--left/--right),
the columns now sit noticeably closer instead of reading as "spread
out / too wide".
Below ~1180px there isn't comfortably enough room for two 330px
sidebars next to real content, so the layout collapses back to today's
single mid-only column and the side columns are hidden — mobile/tablet
visitors see no change at all.
Mid column's left/right padding is overridden to 6px via
`.main-col .container` below (was 20px, inherited from the shared
`.container` rule) — scoped to this selector rather than edited on
`.container` itself, so promotion.html / about.html are untouched.
With the mid track still at 864px, that leaves 864 - 12 = 852px of
content width, 28px more than the 824px banner's own max-width — the
banner (via .banners-row's justify-content:center) just sits centered
with ~14px of slack on each side rather than filling the column
edge-to-edge like before. */
.page-layout {
position: relative; /* containing block for the column-divider lines below */
width: 100%;
max-width: 1572px;
margin: 0 auto;
display: grid;
grid-template-columns: 330px minmax(0, 864px) 330px;
align-items: start;
justify-content: center;
row-gap: 16px; /* top/bottom — unchanged */
column-gap: 4px; /* left/right — was 8px */
padding: 0 max(20px, env(safe-area-inset-right, 0px)) 0
max(20px, env(safe-area-inset-left, 0px));
}
.main-col {
display: flex;
flex-direction: column;
align-items: center;
min-width: 0; /* lets the grid track shrink below content size instead of overflowing */
width: 100%;
}
/* Mid column left/right padding — scoped to `.container` only when it's
inside `.main-col` (i.e. only on this 3-column index.html layout), so
the shared `.container` rule (also used by promotion.html /
about.html) stays untouched. Overrides just the two horizontal sides;
top/bottom padding still comes from the base `.container` rule
(20px). */
.main-col .container {
padding-left: 6px;
padding-right: 6px;
}
/* Column-divider lines — a purely decorative overlay marking the 2
boundaries between the 3 columns, so the eye reads "3 columns" at a
glance. Absolutely positioned (not a border on a real column) so they
consume zero layout width and never disturb the 824px-banner
arithmetic in the comment above. 1px wide, 50% opacity, brand
--color-primary-light — kept subtle, not a hard rule. top:0/bottom:0
spans the full row height regardless of how tall any one column's own
content is (side columns are shorter than .main-col, but the line
still reads correctly since it's independent of any column's box). */
.page-layout::before,
.page-layout::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background-color: var(--color-primary-light);
opacity: 0.5;
pointer-events: none;
}
/* Left divider: left padding (20px) + left column (330px) + half the
4px column-gap (2px) = 352px in from the left edge — centered in the
gap between the left sidebar and the mid column. */
.page-layout::before {
left: calc(20px + 330px + 2px);
}
/* Right divider: mirrors ::before, measured in from the right edge. */
.page-layout::after {
right: calc(20px + 330px + 2px);
}
/* Placeholder styling only — a faint dashed outline so the reserved space
is visible while it's empty. Delete the border/opacity/background once
real content moves in; layout (position/width) can stay as-is. */
.side-col {
min-height: 240px;
border: 1.5px dashed var(--color-border-muted);
border-radius: 8px;
opacity: 0.4;
/* Plain in-flow block — no position: sticky — so both side columns
scroll along with the page exactly like .main-col does, instead of
pinning in place while the mid column scrolls past them. */
}
@media (max-width: 1179px) {
.page-layout {
display: block;
max-width: 1200px;
padding: 0;
}
.side-col {
display: none;
}
.page-layout::before,
.page-layout::after {
display: none;
}
}
/* Both sidebars now hold real content (promo banner, + the jackpot
ticker on the left), so both drop the dashed "reserved space"
placeholder look .side-col defines by default. */
.side-col--left,
.side-col--right {
border: none;
opacity: 1;
/* Top padding (35px) matches the mid column's own top inset —
.container's 20px padding-top + .banners-row's 15px margin-top — so
the side banners' top edge lines up with the center banner's top
edge instead of sitting ~23px higher. Left/right padding is 6px —
a small breathing margin so the promo banner / jackpot-wrapper /
winners-board don't sit perfectly flush against the column edge
(and the new column-divider line), while still staying far tighter
than the original 12px gutter. Bottom keeps a small 12px so the
last item doesn't sit flush against the row-gap below. */
padding: 35px 6px 12px;
display: flex;
flex-direction: column;
gap: 16px;
}
/* --- Banner slider --- */
.banners-row {
display: flex;
justify-content: center;
gap: 20px;
margin: 15px auto;
flex-wrap: wrap;
width: 100%;
}
.banner-container {
width: 100%;
max-width: 824px;
height: 331px;
position: relative;
overflow: hidden;
border-radius: 6px;
touch-action: pan-y;
border-bottom: 3px solid;
color: var(--color-primary);
}
.banner-slide {
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
transition:
opacity 0.4s ease-in,
transform 0.4s ease-out,
filter 0.4s ease-out;
transform: scale(1.1);
filter: blur(3px);
transform-origin: center center;
background-size: cover;
background-position: center;
border: none;
border-radius: 6px;
}
.banner-slide[style*="opacity: 1"] {
opacity: 1;
transform: scale(1);
filter: blur(0);
}
.banner-center .banner-slide:nth-child(1) {
background-image: url("banner slide image/226.png");
}
.banner-center .banner-slide:nth-child(2) {
background-image: url("banner slide image/s2.png");
}
.banner-center .banner-slide:nth-child(3) {
background-image: url("banner slide image/s3.jpg");
}
.banner-center .banner-slide:nth-child(4) {
background-image: url("banner slide image/s4.png");
}
.banner-center .banner-slide:nth-child(5) {
background-image: url("banner slide image/s5.png");
}
.banner-center .banner-slide:nth-child(6) {
background-image: url("banner slide image/s6.png");
}
.banner-dots {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px;
z-index: 5;
}
.banner-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: all 0.3s ease;
}
.banner-dot.active {
background-color: var(--color-white);
transform: scale(1.2);
}
/* --- Left sidebar: promo banner ---
Sits above the jackpot ticker inside .side-col--left. No fixed
aspect-ratio on purpose — drop in either a portrait or a landscape
image and it sizes itself correctly either way (height: auto tracks
whatever ratio the image actually is). Swap the placeholder markup
in index.html for a real 
when creative is
ready; this CSS already styles that img tag once it's there. */
.side-banner {
width: 100%;
border-radius: 0px;
overflow: hidden;
box-shadow: var(--shadow-btn);
}
.side-banner img {
display: block;
width: 100%;
height: auto;
border-radius: 0px;
}
.side-banner-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
min-height: 150px;
border: 1.5px dashed var(--color-border-muted);
border-radius: 6px;
color: var(--color-text-muted);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
.side-banner-placeholder i {
font-size: 1.5rem;
}
/* --- Left sidebar: jackpot ticker ---
.jackpot-bg is a real ![]()
(see index.html) sized with height:auto so
the wrapper always matches the image's own proportions — the reel
digits and lever are absolutely positioned on top of it. The digit row
is populated/ticked by initJackpotCounter() in script.js; only the
look of .jackpot-digit / .jackpot-digit--sep / .is-updated changed
here, the element structure script.js depends on (#jackpotDigits plus
those three classes) is untouched. */
.jackpot-wrapper {
position: relative;
width: 100%;
border-radius: 0px; /* matches .side-banner / .winners-board so the left-
column stack lines up flush, same as the right
column already does */
overflow: hidden;
}
/* Real ![]()
, not a CSS background — width:100%/height:auto means the
wrapper's height always matches this image's actual aspect ratio,
whatever it is, so nothing gets cropped when the art is swapped for a
taller or shorter version later. */
.jackpot-bg {
display: block;
width: 100%;
height: auto;
}
/* Digits (reels) + lever float on top of .jackpot-bg. left/right:0 keeps
the row spanning the full wrapper width (so flex-wrap has room and
nothing overflows past the rounded edges and gets clipped); top:40% +
translateY(-50%) is what nudges it up from dead-center — bump that %
up/down in a few-% steps to retarget vertically. */
.jackpot-reel-bank {
position: absolute;
left: 0;
right: 0;
top: 40%;
transform: translateY(-50%);
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 10px;
padding: 0 10px;
}
.jackpot-digits {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4px;
perspective: 240px;
}
/* Each digit is its own reel window: a glossy off-white pane in a thin
gold frame, recessed with an inner shadow, with a soft tinted glow
behind the numeral echoing the reference image's blurred highlight
behind each 7. */
.jackpot-digit {
position: relative;
min-width: 18px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #ffffff 0%, #f1ebda 100%);
border-radius: 5px;
/* border: 1.5px solid var(--color-accent); */
color: var(--color-primary);
font-weight: 800;
font-size: 0.9rem;
font-variant-numeric: tabular-nums;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.5),
inset 0 2px 3px rgba(0, 0, 0, 0.22),
0 2px 3px rgba(0, 0, 0, 0.3);
transform-style: preserve-3d;
}
.jackpot-digit::before {
content: "";
position: absolute;
inset: 2px;
border-radius: 3px;
background: radial-gradient(
circle at 50% 30%,
rgba(1, 38, 153, 0.16) 0%,
rgba(255, 234, 0, 0.14) 55%,
transparent 75%
);
pointer-events: none;
}
/* Comma / decimal-point cells read as separators, not digits — narrower,
and without the boxed "reel" look the numeral cells have. */
.jackpot-digit--sep {
min-width: 8px;
height: auto;
background: none;
border: none;
box-shadow: none;
color: var(--color-white);
font-size: 1.1rem;
text-shadow: none;
}
.jackpot-digit--sep::before {
content: none;
}
/* Small mounted lever beside the reels — silver rod, brass knob — pure
decoration (aria-hidden in the markup), sized to sit quietly next to
the digits rather than compete with them. */
.jackpot-lever {
position: relative;
width: 16px;
height: 32px;
flex-shrink: 0;
}
.jackpot-lever-rod {
position: absolute;
bottom: 0;
left: 50%;
width: 4px;
height: 22px;
transform: translateX(-50%);
border-radius: 2px;
background: linear-gradient(180deg, #f5f5f7 0%, #b8b8c2 55%, #74747e 100%);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.jackpot-lever-knob {
position: absolute;
top: 0;
left: 50%;
width: 14px;
height: 14px;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(
circle at 35% 30%,
#fff7cc 0%,
var(--color-accent) 50%,
#b58900 100%
);
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.45),
inset 0 -2px 3px rgba(0, 0, 0, 0.25);
}
/* Reel-spin flip whenever script.js ticks a digit — the cell rotates
in as if the reel just landed, instead of the old subtle upward
nudge, so the counter reads as visibly, continuously live. */
@keyframes jackpot-tick {
0% {
transform: translateY(-65%) rotateX(70deg);
opacity: 0;
}
55% {
transform: translateY(5%) rotateX(-8deg);
opacity: 1;
}
100% {
transform: translateY(0) rotateX(0deg);
opacity: 1;
}
}
.jackpot-digit.is-updated {
animation: jackpot-tick 0.45s cubic-bezier(0.22, 0.9, 0.32, 1);
}
@media (prefers-reduced-motion: reduce) {
.jackpot-digit.is-updated {
animation: none;
}
}
/* --- Right sidebar: Top Winners leaderboard ---
Card sits below the promo banner in .side-col--right (see index.html).
Only 10 rows render at once out of a much bigger simulated pool — see
script.js buildWinnersPool() / initWinnersBoard(). Every few seconds one
row fades out and a different pool member fades into that same slot, so
the list keeps moving instead of settling into a fixed ranking. */
.winners-board {
width: 100%;
background: var(--color-white);
border-radius: 0px;
overflow: hidden;
/* box-shadow: var(--shadow-btn); */
}
.winners-board-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 12px;
background: linear-gradient(#1a3a8a);
border-bottom: 1.8px solid var(--color-accent);
}
.winners-board-title {
display: flex;
align-items: center;
gap: 6px;
color: var(--color-white);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.3px;
white-space: nowrap;
}
.winners-board-title i {
color: var(--color-accent);
}
.winners-live {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 5px;
color: var(--color-accent);
font-size: 0.62rem;
font-weight: 800;
letter-spacing: 0.6px;
}
.winners-live-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #35d15a;
animation: winners-pulse 1.6s ease-out infinite;
}
@keyframes winners-pulse {
0% {
box-shadow: 0 0 0 0 rgba(53, 209, 90, 0.55);
}
70% {
box-shadow: 0 0 0 6px rgba(53, 209, 90, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(53, 209, 90, 0);
}
}
/* Spreadsheet-style grid: a shared column template (rank / player / game /
amount) is applied to both the header row and every data row so cell
edges line up exactly like Excel/Google Sheets columns. Vertical rules
come from .winners-col's border-right, horizontal rules from each row's
border-bottom — together they form a real cell grid instead of the old
icon + free-flowing text layout. */
.winners-sheet {
border: 1px solid rgba(1, 38, 153, 0.16);
border-top: none;
}
.winners-sheet-row,
.winners-row {
display: grid;
grid-template-columns: 20px 1fr 68px 50px;
align-items: center;
}
.winners-col {
padding: 6px 6px;
border-right: 1px solid rgba(1, 38, 153, 0.1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.winners-col:last-child {
border-right: none;
}
.winners-col--rank {
text-align: center;
}
.winners-col--amount {
text-align: right;
}
.winners-sheet-row--head {
background: #eef1fa;
border-bottom: 1px solid rgba(1, 38, 153, 0.16);
}
.winners-sheet-row--head .winners-col {
font-size: 0.6rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.4px;
color: rgba(14, 22, 53, 0.55);
}
.winners-list {
list-style: none;
margin: 0;
padding: 0;
}
.winners-row {
border-bottom: 1px solid rgba(1, 38, 153, 0.08);
animation: winners-row-in 0.35s ease both;
}
.winners-row:last-child {
border-bottom: none;
}
/* Plain white rows — no zebra striping or rank-based tint. */
.winners-row .winners-col--rank {
font-weight: 800;
color: var(--color-primary);
font-size: 0.7rem;
}
.winners-row .winners-col--player {
font-size: 0.74rem;
font-weight: 700;
color: var(--color-text-dark);
}
.winners-row .winners-col--game {
font-size: 0.64rem;
color: rgba(14, 22, 53, 0.55);
}
.winners-row .winners-col--amount {
font-size: 0.74rem;
font-weight: 800;
color: #1a9c4c;
font-variant-numeric: tabular-nums;
}
@keyframes winners-row-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.winners-row--leaving {
animation: winners-row-out 0.2s ease both;
}
@keyframes winners-row-out {
to {
opacity: 0;
transform: translateY(4px);
}
}
.winners-row--entering {
animation: winners-row-in 0.35s ease both;
}
@media (prefers-reduced-motion: reduce) {
.winners-live-dot {
animation: none;
}
.winners-row,
.winners-row--leaving,
.winners-row--entering {
animation: none;
}
}
/* --- Popup banner --- */
.popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Frosted-glass scrim instead of a flat black tint: a soft brand-blue
wash (var(--color-primary) at low opacity) plus a background blur, so
the page behind the popup is softly visible rather than blacked out. */
background-color: rgba(1, 38, 153, 0.35);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
display: flex;
justify-content: center;
align-items: center;
z-index: var(--z-popup);
opacity: 0;
visibility: hidden;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
.popup-overlay.active {
opacity: 1;
visibility: visible;
}
.popup-banner {
width: 775px;
height: 450px;
background-color: var(--color-white);
border-radius: 6px;
overflow: hidden;
position: relative;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
}
.popup-banner img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Floats fully above the top-right corner of the card, clear of the image
underneath — sits on the blurred overlay backdrop instead. */
.close-popup {
position: absolute;
top: -46px;
right: 0;
font-size: 24px;
color: var(--color-primary);
cursor: pointer;
background: var(--color-white);
border: 1.5px solid var(--color-accent);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
box-shadow: var(--shadow-btn);
transition: all 0.3s ease;
z-index: 10;
}
.close-popup:hover {
background: var(--color-accent);
transform: scale(1.1);
}
/* --- Game slider --- */
.Game-slider {
width: 90%;
max-width: 1200px;
position: relative;
margin-top: 0;
margin-bottom: 40px;
}
.game-title {
text-align: center;
font-size: 2rem;
font-weight: bold;
margin-bottom: 25px;
color: var(--color-primary-light);
}
.game-track {
width: 100%;
}
/* Static 3-column grid — 12 logos = 3 columns x 4 rows.
grid-template-columns uses minmax(0, 1fr) rather than plain 1fr: plain
1fr is shorthand for minmax(auto, 1fr), and that "auto" minimum means a
column will never shrink narrower than its widest child's natural
(max-content) size. The 12 logo files have very different intrinsic
aspect ratios (some near-square, some wide "Horizontal" wordmarks), and
with only `height` set on the ![]()
(no width limit), a wide logo's
natural width at 55px tall can easily exceed a mobile column's fair
1/3 share. Without minmax(0, 1fr), that forces the whole grid — and
the page — wider than the viewport instead of letting the column (and
the image inside it) shrink to fit. minmax(0, ...) removes that
content-based floor so columns always respect the 3-equal-parts split
even on narrow phones. */
.game-group {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 40px 60px;
align-items: center;
justify-items: center;
}
.game-group img {
/* width: 100% + object-fit: contain (rather than a bare `height`) is
the other half of the mobile fix: the image now fills whatever
width its grid cell actually has and scales its logo down to fit
within `height` while keeping its own aspect ratio — instead of
rendering at a fixed intrinsic width that can be wider than the
cell. max-width is a belt-and-suspenders cap so a small/square logo
never renders larger than its column even before the grid measures
it. */
width: 100%;
max-width: 140px;
height: 55px;
object-fit: contain;
transition:
transform 0.3s ease,
filter 0.3s ease;
-webkit-user-drag: none;
user-select: none;
/* Looping grow/shrink "breathing" pulse. Duration shortened from 3.2s
to 2.6s to run a bit faster. */
animation: game-grow 2.6s ease-in-out infinite;
}
.game-group img:hover {
transform: scale(1.15);
animation-play-state: paused;
}
@keyframes game-grow {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.12);
}
}
@media (prefers-reduced-motion: reduce) {
.game-group img {
animation: none;
}
}
/* --- Home Page: Responsive --- */
@media (max-width: 1100px) {
.banners-row {
flex-direction: column;
align-items: center;
}
.banner-container {
width: 100%;
height: 0;
padding-bottom: 40%;
max-width: 100%;
}
.banner-slide {
background-size: cover;
background-position: center;
background-color: #000;
}
.Game-slider {
width: 95%;
}
.game-group {
gap: 30px 40px;
}
.game-group img {
height: 50px;
}
}
@media (max-width: 850px) {
.popup-banner {
width: 90%;
height: auto;
aspect-ratio: 775 / 450;
max-width: 775px;
}
.game-title {
font-size: 1.8rem;
}
}
@media (max-width: 768px) {
.banner-container {
padding-bottom: 50%;
}
.title {
font-size: 1.8rem;
}
}
@media (max-width: 350px) {
.banner-container {
padding-bottom: 70%;
}
.game-group {
gap: 18px 16px;
}
.game-group img {
height: 35px;
}
}
/* ==========================================================================
4. PROMOTION PAGE (promotion.html)
========================================================================== */
/* Page background — promo artwork with a frosted-glass layer over it so it
stays a soft backdrop instead of competing with the cards. Scoped to
.page-promotion only, since this stylesheet is shared across index.html,
promotion.html and about.html.
Two fixed, full-viewport pseudo-elements sit behind all real content
(negative z-index):
::before — the artwork itself, overscanned past the viewport edges
(inset: -40px) so the blur's soft edge never peeks in from
offscreen, then softened with filter: blur().
::after — a translucent brand-blue scrim + backdrop-filter blur (same
"frosted glass" treatment as .popup-overlay above) so the
art reads as seen through glass rather than at full
strength.
NOTE: update the file name below if the actual asset in
"banner slide image/" uses a different name or extension. */
.page-promotion {
position: relative;
}
.page-promotion::before {
content: "";
position: fixed;
inset: -40px;
background-image: url("banner slide image/Promo-Background.png");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: blur(1px);
z-index: -2;
}
.page-promotion::after {
content: "";
position: fixed;
inset: 0;
background-color: rgba(254, 254, 255, 0.45);
backdrop-filter: blur(1px);
-webkit-backdrop-filter: blur(1px);
z-index: -1;
}
.promotion-content {
border-radius: 12px;
padding: 30px;
margin: 30px 0;
max-width: 900px;
width: 100%;
color: var(--color-text-muted);
text-align: center;
}
.promotion-header {
font-size: 2.5rem;
color: var(--color-primary);
margin-bottom: 20px;
text-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.promotion-description {
font-size: 1.1rem;
line-height: 1.6;
margin-bottom: 30px;
color: #022fb8;
}
/* Each bonus/offer section: title banner image + its card(s) */
.promotion-group {
margin-bottom: 40px;
display: flex;
flex-direction: column;
align-items: center;
box-shadow: 0 0 10px var(--color-primary);
border-radius: 12px;
}
/* Group title banner — CSS/HTML replacement for the old packet-title
PNGs. A gold ribbon across the top of each promotion-group, matching
the rounded top corners of the group's box-shadow "card" so it still
reads as one seamless unit. The diagonal ::after sweep is a static
sheen (no animation) that mimics the glossy highlight the old graphics
had. Icon + text are separate spans so the label can be swapped or
translated without touching the banner shape itself. */
.group-title {
position: relative;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 20px;
margin-bottom: 0;
background: linear-gradient(
135deg,
#fff7cc 0%,
var(--color-accent) 45%,
#e0b400 100%
);
border-top-left-radius: 12px;
border-top-right-radius: 12px;
box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15);
overflow: hidden;
}
.group-title::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(
115deg,
transparent 42%,
rgba(255, 255, 255, 0.6) 50%,
transparent 58%
);
pointer-events: none;
}
.group-title-icon {
position: relative;
z-index: 1;
font-size: 1.4rem;
line-height: 1;
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}
.group-title-text {
position: relative;
z-index: 1;
color: var(--color-primary-darker);
font-size: 1.15rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.6px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
}
@media (max-width: 480px) {
.group-title {
padding: 11px 14px;
gap: 8px;
}
.group-title-icon {
font-size: 1.2rem;
}
.group-title-text {
font-size: 1rem;
}
}
/* Grid layout, available for groups with several cards */
.promotion-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-bottom: 40px;
justify-content: center;
}
/* Layout used for the current single/double-card groups. width: 100%
makes this row span the full promotion-group (not just shrink to fit
its cards), so justify-content: flex-start lines the cards up against
the group's left edge instead of floating the whole row in the middle. */
.promotion-grid-single-card {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 20px;
width: 100%;
}
/* --- Promo card (adapted from Uiverse.io by bhaveshxrawat) --- */
.card {
width: 190px;
height: 254px;
position: relative;
display: flex;
flex-direction: column;
place-content: center;
place-items: center;
overflow: hidden;
border-radius: 20px;
margin: auto;
}
.card h3 {
z-index: 1;
color: var(--color-white);
font-size: 1.3em;
text-align: center;
margin-bottom: 10px;
}
.card p {
z-index: 1;
color: var(--color-text-muted);
font-size: 0.85em;
text-align: center;
margin-bottom: 15px;
padding: 0 10px;
}
.card::after {
content: "";
position: absolute;
background-image: url("bg_promotion_card/2fde49c630586477ae73e.gif");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
inset: 5px;
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px;
text-align: center;
}
.card h3,
.card p {
position: relative;
z-index: 3;
}
/* Slightly smaller cards specifically within the promotion page's
single/double-card groups. Scoped to this context (rather than editing
.card directly) so the base card component is untouched if it's ever
reused elsewhere. Also resets margin to 0: the base .card's
`margin: auto` absorbs any free space on the flex line and re-centers
the card regardless of justify-content, so it has to be cleared here
for the left-alignment above to actually take effect. */
.promotion-grid-single-card .card {
width: 168px;
height: 225px;
margin: 0;
}
/* --- Promotion Page: Responsive --- */
@media (max-width: 768px) {
.promotion-header {
font-size: 2rem;
}
.promotion-description {
font-size: 1rem;
}
.card {
width: 180px;
height: 240px;
}
.promotion-grid-single-card .card {
width: 159px;
height: 212px;
}
.card h3 {
font-size: 1.2rem;
}
.card p {
font-size: 0.8rem;
}
.promotion-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
}
}
@media (max-width: 480px) {
.promotion-content {
padding: 15px;
margin: 15px 0;
}
.promotion-header {
font-size: 1.8rem;
}
.promotion-description {
font-size: 0.9rem;
}
.card {
width: 160px;
height: 220px;
}
.promotion-grid-single-card .card {
width: 141px;
height: 195px;
}
.card h3 {
font-size: 1.1rem;
margin-bottom: 8px;
}
.card p {
font-size: 0.75rem;
margin-bottom: 10px;
}
.promotion-grid {
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
}
@media (max-width: 350px) {
.promotion-header {
font-size: 1.5rem;
}
.card {
width: 140px;
height: 200px;
}
.promotion-grid-single-card .card {
width: 124px;
height: 177px;
}
.card h3 {
font-size: 1rem;
}
.card p {
font-size: 0.7rem;
}
.promotion-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 10px;
}
}
/* ==========================================================================
5. ABOUT PAGE (about.html)
========================================================================== */
.about-banner {
width: 100%;
max-width: 100%;
height: auto;
display: block;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin: 15px auto 20px;
}
.about-content {
padding: 20px;
max-width: 900px;
margin: 0 auto;
border-radius: 12px;
color: #000000;
}
.about-content h1 {
color: var(--color-primary);
text-align: center;
margin-bottom: 25px;
font-size: 2.5em;
}
.about-content h2 {
color: var(--color-primary);
text-align: center;
margin-top: 30px;
margin-bottom: 20px;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.about-content p {
font-size: 1.1em;
line-height: 1.8;
margin-bottom: 15px;
text-align: justify;
}
.about-content ul {
list-style-type: disc;
margin-left: 25px;
margin-bottom: 20px;
}
.about-content ul li {
margin-bottom: 10px;
line-height: 1.6;
}
.about-content strong {
color: var(--color-primary);
}
/* --- About Page: Responsive --- */
@media (max-width: 768px) {
.about-content h1 {
font-size: 2em;
}
.about-content h2 {
font-size: 1.6em;
}
.about-content p,
.about-content ul li {
font-size: 1em;
}
}
@media (max-width: 480px) {
.about-content {
padding: 15px;
margin-top: 15px;
}
.about-content h1 {
font-size: 1.8em;
}
.about-content h2 {
font-size: 1.4em;
}
.about-content p,
.about-content ul li {
font-size: 0.95em;
}
}
@media (max-width: 350px) {
.about-content h1 {
font-size: 1.5em;
}
.about-content h2 {
font-size: 1.2em;
}
.about-content p,
.about-content ul li {
font-size: 0.85em;
}
}
/* ==========================================================================
6. LIVE ODDS PAGE (live-odds.html)
========================================================================== */
/* main.live-odds-main overrides the shared .container 1200px cap + padding
so this page alone can stretch edge-to-edge. */
main.live-odds-main {
max-width: none;
padding: 0;
}
.live-odds-content {
padding: 0;
margin: 0 auto;
width: 100%;
}
.live-odds-widget-container {
width: 100%;
overflow: hidden;
}
.live-odds-intro {
max-width: 720px;
margin: 0 auto 16px;
padding: 0 16px;
color: var(--color-text-dark);
opacity: 0.75;
font-size: 0.95rem;
text-align: center;
}
/* --- Toolbar: sport tabs + last-updated / refresh ------------------------ */
.odds-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 0 16px 12px;
max-width: 900px;
margin: 0 auto;
}
.odds-sport-tabs {
display: flex;
gap: 6px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.odds-sport-tabs::-webkit-scrollbar {
display: none;
}
/* Desktop mouse users have no touch gesture to scroll the tab strip, and
the scrollbar above is hidden for a cleaner look on mobile — so on
pointer:fine devices we show a slim scrollbar and a grab cursor as a
visible affordance. The actual drag/wheel scrolling is added in
odds.js (setupTabsScrollBehavior). */
@media (hover: hover) and (pointer: fine) {
.odds-sport-tabs {
cursor: grab;
scrollbar-width: thin;
scrollbar-color: var(--color-primary-light-dark) transparent;
}
.odds-sport-tabs::-webkit-scrollbar {
display: block;
height: 6px;
}
.odds-sport-tabs::-webkit-scrollbar-track {
background: transparent;
}
.odds-sport-tabs::-webkit-scrollbar-thumb {
background: var(--color-primary-light-dark);
border-radius: 999px;
}
.odds-sport-tabs.is-dragging {
cursor: grabbing;
}
}
.odds-tab {
flex: none;
font-family: var(--font-base);
font-size: 0.85rem;
font-weight: 600;
color: var(--color-white);
background: var(--color-primary-light);
border: 1px solid transparent;
border-radius: 999px;
padding: 7px 14px;
cursor: pointer;
white-space: nowrap;
transition:
background-color 0.15s ease,
color 0.15s ease;
}
.odds-tab:hover {
background: var(--color-primary-light-dark);
}
.odds-tab.active {
background: var(--color-accent);
color: var(--color-primary-darker);
}
.odds-tab:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.odds-meta {
display: flex;
align-items: center;
gap: 8px;
flex: none;
}
.odds-updated-at {
font-size: 0.75rem;
color: var(--color-text-dark);
opacity: 0.6;
white-space: nowrap;
}
.odds-refresh-btn {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: var(--color-primary-light);
color: var(--color-white);
cursor: pointer;
transition: background-color 0.15s ease;
}
.odds-refresh-btn:hover {
background: var(--color-primary-light-dark);
}
.odds-refresh-btn:focus-visible {
outline: 2px solid var(--focus-ring);
outline-offset: 2px;
}
.odds-refresh-btn:active i {
transform: rotate(180deg);
}
.odds-refresh-btn i {
transition: transform 0.3s ease;
}
/* --- Status line (loading / error / empty) ------------------------------- */
.odds-status {
max-width: 900px;
margin: 0 auto;
padding: 0 16px 12px;
font-size: 0.9rem;
color: var(--color-text-dark);
opacity: 0.7;
text-align: center;
}
.odds-status:empty {
display: none;
}
.odds-status.is-error {
color: #b3261e;
opacity: 1;
}
/* --- Event list / cards ---------------------------------------------------
Reuses the same radius/shadow scale as .card (promotions) so this reads
as part of the same site rather than a bolted-on widget. */
.odds-list {
display: grid;
gap: 12px;
max-width: 900px;
margin: 0 auto;
padding: 0 16px 40px;
}
.odds-event-card {
background: var(--color-white);
border-radius: 12px;
box-shadow: var(--shadow-btn);
padding: 14px 16px;
}
.odds-event-header {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.75rem;
color: var(--color-text-dark);
opacity: 0.65;
margin-bottom: 6px;
}
.odds-event-time.is-live {
color: #b3261e;
opacity: 1;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 5px;
}
.odds-event-time.is-live::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: #b3261e;
animation: odds-live-pulse 1.6s ease-in-out infinite;
}
@keyframes odds-live-pulse {
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.3;
}
}
.odds-event-matchup {
font-size: 1rem;
font-weight: 700;
color: var(--color-text-dark);
margin: 0 0 10px;
}
.odds-vs {
font-weight: 400;
opacity: 0.5;
font-size: 0.85em;
margin: 0 4px;
}
.odds-best-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
gap: 8px;
}
.odds-outcome {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: var(--color-primary-darker);
border-radius: 8px;
padding: 8px 6px;
}
.odds-outcome-label {
font-size: 0.72rem;
color: var(--color-white);
opacity: 0.75;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
.odds-outcome-price {
font-size: 1.15rem;
font-weight: 800;
color: var(--color-accent);
line-height: 1.3;
}
.odds-outcome-price--none {
color: var(--color-white);
opacity: 0.4;
}
.odds-outcome-book {
font-size: 0.68rem;
color: var(--color-white);
opacity: 0.6;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* --- Compare-all-bookmakers expander --------------------------------- */
.odds-compare {
margin-top: 10px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
padding-top: 8px;
}
.odds-compare summary {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-primary);
cursor: pointer;
list-style: none;
}
.odds-compare summary::-webkit-details-marker {
display: none;
}
.odds-compare summary::after {
content: "\f107";
font-family: "Font Awesome 6 Free";
font-weight: 900;
margin-left: 6px;
font-size: 0.75em;
}
.odds-compare[open] summary::after {
content: "\f106";
}
.odds-compare-table-wrap {
overflow-x: auto;
margin-top: 8px;
-webkit-overflow-scrolling: touch;
}
.odds-compare-table {
border-collapse: collapse;
width: 100%;
font-size: 0.8rem;
}
.odds-compare-table th,
.odds-compare-table td {
padding: 6px 10px;
text-align: center;
white-space: nowrap;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.odds-compare-table th[scope="row"] {
text-align: left;
font-weight: 600;
color: var(--color-text-dark);
}
.odds-compare-table thead th {
color: var(--color-text-dark);
opacity: 0.6;
font-weight: 600;
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.odds-compare-table td.is-best {
color: var(--color-primary);
font-weight: 800;
}
@media (max-width: 480px) {
.odds-toolbar {
flex-wrap: wrap;
}
.odds-event-matchup {
font-size: 0.92rem;
}
}
/* ==========================================================================
7. MAINTENANCE PAGES (sport.html, slot.html)
Sports and Slots are real pages now (not a toast) — this is the shared
"still being built" placeholder shown on both.
========================================================================== */
.maintenance-main {
flex-grow: 1;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 60px 20px;
}
.maintenance-content {
max-width: 480px;
text-align: center;
}
.maintenance-icon {
font-size: 3.5rem;
color: var(--color-primary);
margin-bottom: 20px;
display: inline-block;
animation: maintenance-wobble 2.4s ease-in-out infinite;
}
@keyframes maintenance-wobble {
0%,
100% {
transform: rotate(-10deg);
}
50% {
transform: rotate(10deg);
}
}
.maintenance-header {
font-size: 2.2rem;
font-weight: 800;
letter-spacing: 0.5px;
margin-bottom: 16px;
background: linear-gradient(
90deg,
var(--color-primary) 0%,
var(--color-accent) 50%,
var(--color-primary) 100%
);
background-size: 200% auto;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: maintenance-shimmer 2.8s linear infinite;
}
@keyframes maintenance-shimmer {
0% {
background-position: 0% center;
}
100% {
background-position: -200% center;
}
}
.maintenance-text {
font-size: 1.05rem;
line-height: 1.7;
color: #4a4a4a;
}
@media (prefers-reduced-motion: reduce) {
.maintenance-icon,
.maintenance-header {
animation: none;
}
}
@media (max-width: 480px) {
.maintenance-icon {
font-size: 2.8rem;
}
.maintenance-header {
font-size: 1.7rem;
}
.maintenance-text {
font-size: 0.95rem;
}
}