wrapper) — show it as a plain muted bold label row, no accent
capsule (that stays a data-row-only marker). */
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tr:has(th):not(:has(td))>*{color:var(--muted)!important;font-weight:800!important;padding-top:0!important;padding-bottom:10px!important}
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tr:has(th):not(:has(td))>*:first-child{padding-left:24px!important}
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tr:has(th):not(:has(td))>*:first-child:before{display:none!important}
/* Per-row rounded pill background for real data rows only (anything with
a | — header-only rows above have no | and stay plain text).
Color is DERIVED from the block's own background (--block-bg), lightened
a bit, so there's no extra color picker to fill in — just text + accent
colors as before, and the row fill follows whatever the block bg is. */
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody tr:has(td)>*{background:color-mix(in srgb,var(--block-bg) 100%,white 7%)!important}
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody tr:has(td)>*:first-child{border-top-left-radius:14px!important;border-bottom-left-radius:14px!important}
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody tr:has(td)>*:last-child{border-top-right-radius:14px!important;border-bottom-right-radius:14px!important}
/* table-layout:fixed + explicit width relies on the browser's legacy
"first table row defines column widths" algorithm, which turned out to
be unreliable here (no visible change when tested for real). Dropping
native table row/column layout entirely and rebuilding it with flexbox
instead — flex sizing is deterministic and doesn't depend on which row
happens to come first. table/tbody/tr keep their tag names (so
stays semantically a table) but are laid out as flex containers: tbody
stacks rows in a column with a real gap, each tr is a flex row, and the
first cell gets a fixed flex-basis so every row's columns line up and
the value column always starts at the same x position. min-height on
each row makes 1-line and wrapped 2-line rows come out the same size. */
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e table{display:block!important}
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody{display:flex!important;flex-direction:column!important;gap:12px!important}
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tr{display:flex!important;align-items:stretch!important}
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tr>*{display:flex!important;align-items:center!important;flex:1 1 0!important;min-width:0!important}
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tr>*:first-child{flex:0 0 220px!important;width:220px!important}
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody tr:has(td){min-height:64px!important}
@media(max-width:860px){
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tr>*:first-child{flex:0 0 120px!important;width:120px!important}
}
/* Title moved OUT of the card, above it — heading + accent underline on the
left, a "Top picks" badge on the right. The card below now wraps only
the table itself. */
.cd4ccb6de{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin:0 0 18px!important;padding:0 14px!important;flex-wrap:wrap!important}
.cf22e9d38{display:flex!important;flex-direction:column!important;gap:10px!important}
.cf22e9d38 h2{margin:0!important;color:var(--text)!important}
.ce7f8da46{display:block!important;width:64px!important;height:4px!important;border-radius:4px!important;background:linear-gradient(90deg,var(--table-accent),color-mix(in srgb,var(--text) 25%,transparent))!important}
/* .c589a4061 had its own narrower width cap (min(1050px,...) / an extra
-var(--cb-gutter) reduction on top of .c1a75e899's own), so the card ended up
narrower than .cd4ccb6de sitting right above it — the header used
.c1a75e899's full width, the card didn't. Force the card to match .c1a75e899
exactly so the title/badge row and the card share the same edges. */
.c589a4061.c589a4061.c589a4061.c589a4061.c589a4061{width:100%!important;max-width:100%!important}
.cccea5580{display:inline-flex!important;align-items:center!important;gap:8px!important;padding:9px 16px!important;border-radius:999px!important;background:color-mix(in srgb,var(--block-bg) 100%,white 12%)!important;color:var(--text)!important;font-weight:800!important;font-size:12px!important;letter-spacing:.06em!important;text-transform:uppercase!important;white-space:nowrap!important}
.c57003425{width:8px!important;height:8px!important;border-radius:999px!important;background:var(--table-accent)!important;box-shadow:0 0 8px var(--table-accent)!important}
/* Accent capsule gets a soft glow instead of sitting flat. */
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tr>*:first-child:before{box-shadow:0 0 10px color-mix(in srgb,var(--table-accent) 65%,transparent)!important}
/* Row hover: lift slightly + a soft shadow underneath. */
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody tr:has(td){transition:transform .18s ease,box-shadow .18s ease!important}
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody tr:has(td):hover{transform:translateY(-2px)!important;box-shadow:0 4px 10px rgba(0,0,0,.25)!important}
/* Full-width edge-to-edge hero (overlay layout toggle). The overlay hero
is normally a rounded, inset "floating card" bounded by .c1a75e899's max
width — this variant breaks it out to true 100vw so the image spans
the whole browser width like a classic full-bleed banner (nav bar
above stays as-is since .c2efe4cb3 .c4f7076f1 was already full-bleed). */
.c36d13c7b .cf2d43775{width:100vw!important;max-width:100vw!important;margin-left:calc(50% - 50vw)!important;margin-right:calc(50% - 50vw)!important;border-radius:0!important}
.c36d13c7b .cf2d43775:before{display:none!important}
.c36d13c7b .cf2d43775 .c8b4e5c66{inset:0!important;border-radius:0!important;opacity:1!important;filter:none!important;animation:none!important}
.c36d13c7b .cf155434e{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important}
/* App/Support block outer containers should look like every other content
block on the page (same --block-bg gradient as .cba0512f3/.c589a4061, same
plain subtle border) instead of their own accent-tinted bg/border. */
.c20843f6c.c20843f6c.c20843f6c.c20843f6c.c20843f6c{background:linear-gradient(135deg,color-mix(in srgb,var(--block-bg) 90%,var(--cta) 12%),var(--block-bg) 62%)!important;border-color:rgba(255,255,255,.1)!important}
.c3892f105.c3892f105.c3892f105.c3892f105.c3892f105{background:linear-gradient(135deg,color-mix(in srgb,var(--block-bg) 90%,var(--cta) 12%),var(--block-bg) 62%)!important;border-color:rgba(255,255,255,.1)!important}
.c78cad04a.c78cad04a.c78cad04a.c78cad04a.c78cad04a{border-color:rgba(255,255,255,.1)!important}
.c78cad04a.c78cad04a.c78cad04a.c78cad04a.c78cad04a:hover{border-color:rgba(255,255,255,.22)!important}
/* Support tiles + App info panels: same idea as above but these are the
INNER inserts, so they should read as a shade DARKER than the block's
own background rather than a separate flat admin-picked color. */
.c78cad04a.c78cad04a.c78cad04a.c78cad04a.c78cad04a{background:color-mix(in srgb,var(--block-bg) 100%,#000 18%)!important}
.c713e5925.c713e5925.c713e5925.c713e5925.c713e5925,
.c1cb6b2c1.c1cb6b2c1.c1cb6b2c1.c1cb6b2c1.c1cb6b2c1 div{background:color-mix(in srgb,var(--block-bg) 100%,#000 18%)!important;border-color:rgba(255,255,255,.13)!important}
/* Games/Providers/Payments: the marquee (providers/payments) and the games
grid both had a hardcoded tan background (#9b897c) totally disconnected
from the site's theme — same class of bug as the old .c589a4061 tan
fix earlier. Bring the OUTER surface in line with every other block
(.cba0512f3's own gradient), and make the individual logo/game tiles a shade
DARKER than that, for visible contrast without a separate color picker. */
.c098ffd83.c098ffd83.c098ffd83.c098ffd83.c098ffd83{background:linear-gradient(135deg,color-mix(in srgb,var(--block-bg) 90%,var(--cta) 12%),var(--block-bg) 62%)!important;border-color:rgba(255,255,255,.1)!important}
.c098ffd83.c098ffd83.c098ffd83.c098ffd83.c098ffd83:before{background:linear-gradient(90deg,var(--block-bg),transparent)!important}
.c098ffd83.c098ffd83.c098ffd83.c098ffd83.c098ffd83:after{background:linear-gradient(270deg,var(--block-bg),transparent)!important}
.cba96cdb0.cba96cdb0.cba96cdb0.cba96cdb0.cba96cdb0{background:color-mix(in srgb,var(--block-bg) 100%,white 7%)!important}
.c03fad9ec .c1a75e899.c1a75e899.c1a75e899.c1a75e899.c1a75e899{background:linear-gradient(135deg,color-mix(in srgb,var(--block-bg) 90%,var(--cta) 12%),var(--block-bg) 62%)!important;border:1px solid rgba(255,255,255,.1)!important;border-radius:28px!important;padding:32px!important;box-shadow:0 6px 18px rgba(0,0,0,.14)!important}
/* Game card border = its see-through white (13%) pre-mixed over the card's
own background: same pixels, but Chrome no longer has to draw a
see-through border on a rounded card as a path (the path atlas is what
crashes Chrome's GPU on some Macs while the Casino games row auto-scrolls). */
.c60cd4d71.c60cd4d71.c60cd4d71.c60cd4d71.c60cd4d71{background:color-mix(in srgb,var(--block-bg) 100%,white 7%)!important;border-color:color-mix(in srgb,color-mix(in srgb,var(--block-bg) 100%,white 7%) 87%,white)!important}
/* The black strip under each game thumbnail is .c96612bf0's own #111
background peeking through a gap between the image and its container's
computed height. Pin the container to the SAME aspect-ratio as the img
(instead of trusting the img alone to size it) and stretch the img to
fully fill it, so there's no leftover box for that background to show
through — and drop the background to transparent as a safety net. */
.c96612bf0.c96612bf0.c96612bf0.c96612bf0.c96612bf0{aspect-ratio:1/1.33!important;background:transparent!important}
.c96612bf0.c96612bf0.c96612bf0.c96612bf0.c96612bf0 img{height:100%!important}
/* Prev/Next step buttons for the Providers/Payments marquee. */
.c6922d910{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:36px;height:36px;border:1px solid rgba(255,255,255,.16);border-radius:999px;display:grid;place-items:center;background:color-mix(in srgb,var(--block-bg) 100%,#000 24%);color:var(--text);font-size:20px;line-height:1;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.c6922d910:hover{background:color-mix(in srgb,var(--block-bg) 100%,#000 38%);border-color:rgba(255,255,255,.3)}
.cf0909832{left:10px}
.c4a9985a1{right:10px}
/* Sidebar/nav links jump straight to a section's top edge, which the sticky
(or fixed, on mobile) header then sits right on top of, covering part of
it. Give every anchorable section extra breathing room above it so the
header never overlaps the content it jumped to. */
.c0fdf49af,.cd6e55afd{scroll-margin-top:110px}
/* Leftover hardcoded gold (#ffd84d/#ffe65a/#ffd86a) from before the site had
a real accent color model — same class of bug as the old .c589a4061 tan
background. These accent-ish spots should follow the theme's own CTA
color instead of a color nothing in the color pickers controls. */
.cba96cdb0.cba96cdb0.cba96cdb0.cba96cdb0.cba96cdb0:hover{border-color:var(--cta)!important}
.cb3071601.cb3071601.cb3071601.cb3071601.cb3071601 a{color:var(--cta)!important}
.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e th{color:var(--cta)!important;border-left-color:var(--cta)!important}
.c48f16667.c48f16667.c48f16667.c48f16667.c48f16667{border-color:var(--cta)!important}
.c04a53b74.c04a53b74.c04a53b74.c04a53b74.c04a53b74{border-color:var(--cta)!important}
/* The logo sits beside the close button, on the same row, not stacked
below it — put the logo's top flush with the toggle's own top (14px)
and push it right past the toggle's width instead of below it. */
.cf3f518b1.cf3f518b1.cf3f518b1.cf3f518b1.cf3f518b1{padding-top:14px!important}
.cf76d7c7c.cf76d7c7c.cf76d7c7c.cf76d7c7c.cf76d7c7c{position:relative!important;z-index:1!important;justify-content:flex-start!important;align-items:center!important;min-height:38px!important;margin:0 0 20px 46px!important}
.cf76d7c7c.cf76d7c7c.cf76d7c7c.cf76d7c7c.cf76d7c7c img{max-height:38px!important}
.c04a53b74.c04a53b74.c04a53b74.c04a53b74.c04a53b74{z-index:40!important}
/* Mobile bottom tab bar — the sidebar only ever shows in-page section
anchors, so on phones (no room for a real header nav) there was no way
to reach the other generated pages except scrolling to the footer.
Desktop/tablet never see this; it only takes over at the same
max-width:860px breakpoint everything else on mobile switches at. */
.c739eb0f7{display:none}
@media(max-width:860px){
.c739eb0f7{
display:flex;
position:fixed;
left:0;right:0;bottom:0;
z-index:960;
background:color-mix(in srgb,var(--bg) 92%,#fff 8%);
border-top:1px solid rgba(255,255,255,.08);
padding:6px 4px calc(6px + env(safe-area-inset-bottom));
justify-content:space-around;
align-items:flex-end;
transform:translateZ(0);
will-change:transform;
backface-visibility:hidden;
}
/* The tab bar (z-index 960) sits on top of the open menu (950), so the
menu's last items could never be scrolled out from under it: leave
room for the bar plus the raised Home button (~92px) at the bottom. */
.cf3f518b1.cf3f518b1.cf3f518b1.cf3f518b1.cf3f518b1{padding-bottom:calc(116px + env(safe-area-inset-bottom))!important}
.c5491d472{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:2px;
flex:1;
min-width:0;
padding:6px 2px;
border-radius:14px;
color:color-mix(in srgb,var(--text) 62%,transparent);
font-size:10px;
font-weight:850;
text-transform:uppercase;
letter-spacing:.02em;
-webkit-tap-highlight-color:transparent;
outline:none;
}
.c5491d472:focus,.c5491d472:active{background:none;outline:none}
.c7a0e4a9e{display:block;line-height:1}
.c7a0e4a9e img{width:21px;height:21px;object-fit:contain;display:block;filter:brightness(0) invert(1);opacity:.62;transition:opacity .15s}
.cfe6d0806{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.c5491d472.c7023b334{color:var(--cta);background:color-mix(in srgb,var(--cta) 14%,transparent)}
.c5491d472.c7023b334 .c7a0e4a9e img{opacity:1}
/* Home is the raised, circular "main action" button in the middle of the
bar, matching the familiar bottom-nav pattern — always full-strength
accent color, not just on the active page, since it's the one button
meant to stand out regardless of where you already are. */
.c4d04c9c8{margin-top:-22px;background:none!important}
.c4d04c9c8 .c7a0e4a9e{
width:52px;height:52px;
border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(180deg,color-mix(in srgb,var(--cta) 100%,#fff 12%),var(--cta));
box-shadow:0 8px 20px color-mix(in srgb,var(--cta) 45%,transparent);
}
.c4d04c9c8 .c7a0e4a9e img{width:23px;height:23px;opacity:1}
.c4d04c9c8 .cfe6d0806{color:var(--cta);margin-top:4px}
body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
.c21653db5{padding-bottom:8px}
}
/* Real mobile browsers (not desktop, not desktop device-emulation) fail to
clip the hero image to its rounded frame while it has an active animated
transform (the "breathing" zoom). Desktop keeps the zoom; on mobile we
just drop the animation on this specific image so the clip is never in
question — scoped tightly so nothing else changes. */
@media(max-width:860px){
.c708b535d.c8b4e5c66 img{
transform:scale(1.03)!important;
animation:none!important;
}
}
/* A plain rectangular uploaded logo (no transparency, solid-color
background) otherwise shows up as a hard square next to the rest of the
UI's rounded corners — round the logo image itself everywhere it appears
so any upload looks intentional regardless of its own shape. Doesn't
affect logos that already have a transparent background/irregular
artwork (like the bundled demo badge), since rounding a transparent
corner is a no-op. */
.c53ed9704 img,.cf76d7c7c img,.c21653db5 .cef09eae1 img{border-radius:10px}
/* ===== Offer Cards block (template-agnostic baseline) ===== */
.c4c131433{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.c7b64940d{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:color-mix(in srgb,var(--block-bg) 88%,#fff);border:1px solid rgba(255,255,255,.1);box-shadow:0 6px 18px rgba(0,0,0,.14);min-height:220px;text-decoration:none;color:inherit}
.cdd0ac9eb{position:absolute;top:14px;left:14px;z-index:2;padding:6px 12px;border-radius:999px;background:var(--cta);color:#fff;font-weight:900;font-size:12px;text-transform:uppercase}
.ce8f056d1{display:block;aspect-ratio:16/9;overflow:hidden}
.ce8f056d1 img{width:100%;height:100%;object-fit:cover;display:block}
.c9a609a85{display:flex;flex-direction:column;gap:6px;padding:18px 20px 20px;flex:1}
.caebf2967 .c9a609a85{padding-top:56px}
.c3991619d{font-size:20px;font-weight:900;color:var(--text)}
.c050bf6b1{color:var(--muted);font-size:14px}
.c8a2b612e{margin-top:auto;display:inline-flex;align-items:center;justify-content:center;min-height:42px;border-radius:999px;background:var(--cta);color:#fff;font-weight:900}
/* Fix: ".cca88df1d span{display:block;margin:6px 0}" also matched the
star-rating component's inner spans, pushing the filled-star layer out of
place so every review showed empty outline stars. */
.cca88df1d .c4d1b0d31{display:inline-block;margin:6px 0}
.cca88df1d .c4d1b0d31 span{display:inline;margin:0}
.cca88df1d .c4d1b0d31 .c101d39e7{color:rgba(255,255,255,.25)}
.cca88df1d .c4d1b0d31 .ca70dc6e3{display:block;color:#ffd84d}
/* Offer Cards artwork (auto-picked, see renderOfferCards) */
.c9d4f3ee6 .ce8f056d1{background:color-mix(in srgb,var(--header-bg) 60%,#000 40%)}
.c9d4f3ee6 .ce8f056d1 img{object-fit:contain;object-position:center bottom}
/* Recent Wins square tickets (template-agnostic baseline). Every ticket is
its own GPU layer, so the ticker (initWinSlide in site.c8375747a) only moves
layers around and never has to re-render the strip. */
.c068ab905{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 70px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 70px),transparent 100%)}
.c36ab6198{display:flex;gap:14px;width:max-content;padding:8px 30px 10px;will-change:transform}
.cc5cc0df0{animation:winEnter .8s ease both}
@keyframes winEnter{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.c9d31f3c2{position:relative;flex:0 0 auto;width:320px;height:112px;scroll-snap-align:start;border-radius:14px;overflow:hidden;display:flex;align-items:stretch;background:color-mix(in srgb,var(--header-bg) 70%,#000 30%);border:1px solid transparent;text-decoration:none;color:#fff;cursor:pointer;transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;will-change:transform,opacity}
.c9d31f3c2:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--cta) 60%,transparent)}
.c74c8aa65{position:relative;flex:0 0 100px;display:block;overflow:hidden}
.c74c8aa65 img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.c9d31f3c2:after{content:"\25B8";position:absolute;top:8px;right:8px;width:20px;height:20px;border-radius:999px;background:var(--cta);color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;padding-left:1px}
.c5f5ffb39{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:7px;padding:10px 34px 10px 14px}
.c04054742{font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c5614b943{display:flex;align-items:center;gap:8px;min-width:0}
.cbbf405b8{width:28px;height:28px;border-radius:999px;flex:0 0 auto;background:rgba(255,255,255,.14)}
.c250b5744{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Win amount glow: two copies of the amount behind it carry the dim and the
bright glow (blurred once, when the ticket is first drawn), and the pulse
only cross-fades their opacity on the GPU. */
.c30a7ef8a{position:relative;isolation:isolate;align-self:flex-start;font-size:20px;font-weight:900;line-height:1.2;color:var(--primary-cta-bg)}.c30a7ef8a:before,.c30a7ef8a:after{content:attr(data-amount);position:absolute;inset:0;z-index:-1;color:transparent;white-space:inherit;pointer-events:none;animation:winGlowDim 2.6s ease-in-out infinite}.c30a7ef8a:before{text-shadow:0 0 8px color-mix(in srgb,var(--primary-cta-bg) 45%,transparent),0 0 18px color-mix(in srgb,var(--primary-cta-bg) 22%,transparent)}.c30a7ef8a:after{text-shadow:0 0 14px color-mix(in srgb,var(--primary-cta-bg) 85%,transparent),0 0 32px color-mix(in srgb,var(--primary-cta-bg) 50%,transparent);animation-name:winGlowBright}
@keyframes winGlowDim{0%,100%{opacity:1}50%{opacity:0}}@keyframes winGlowBright{0%,100%{opacity:0}50%{opacity:1}}
/* Games "big wins" section header icon-badge + nav arrows — hidden by
default so Classic's rendered layout (a plain h2 + tabs) is unchanged;
these are new sibling elements, never wrapping the existing ones. */
.c33f2f6d6,.cc8d3bb2b{display:none}
.c59e5ef3f{display:none}
.c85013c4a{display:none}
.c0afa429a{display:none}
/* ===== Design template: Casino =====
Additive, .c28223b11 overrides only — every selector below is
two classes deep against this file's existing one-class !important
rules, so it always wins on specificity regardless of file order.
Nothing above this point is edited or reordered. */
/* Wider canvas — only above the point where the existing responsive
.c1a75e899{} rules take over narrowing the layout for smaller screens, so
mobile is untouched. */
/* The base file sizes every .c1a75e899/.cba0512f3 from --cb-content-width (1360px) via
!important rules, so widening means overriding that variable, not .c1a75e899. */
@media(min-width:1100px){
body.c38ae07c2{--cb-content-width:1600px}
}
.c38ae07c2{
font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif!important;
font-size:14px!important;
}
.c38ae07c2 .cb3071601,
.c38ae07c2 .c05dadbe9 p{
font-size:15px!important;
}
.c38ae07c2 h1,.c38ae07c2 h2,.c38ae07c2 h3,
.c38ae07c2 .cd0c6eff2,.c38ae07c2 .c17e44f16,.c38ae07c2 .cb87b4a9d,.c38ae07c2 .c02214a75{
font-family:'Outfit',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif!important;
}
.c38ae07c2 .c2efe4cb3{
border-radius:0!important;
box-shadow:none!important;
border-bottom:1px solid rgba(255,255,255,.08)!important;
background:linear-gradient(180deg,color-mix(in srgb,var(--header-bg) 100%,#000 10%),var(--header-bg))!important;
}
.c38ae07c2 .c5cdb9847{
text-transform:uppercase!important;
letter-spacing:.02em!important;
}
.c38ae07c2 .cd0c6eff2{
border-radius:10px!important;
}
.c38ae07c2 .cccea5580,
.c38ae07c2 .cdd0ac9eb,
.c38ae07c2 .c30a7ef8a{
letter-spacing:.03em!important;
}
.c38ae07c2 h1{
font-size:clamp(30px,3.4vw,46px)!important;
letter-spacing:-.02em!important;
text-transform:none!important;
}
.c38ae07c2 h2{
font-size:clamp(20px,2.1vw,28px)!important;
letter-spacing:-.01em!important;
}
/* Sidebar: flatten from individually-boxed pill links into a plain list
on a solid dark rail, closer to the reference's minimal nav rail. */
.c38ae07c2 .ce11c9dec{
border-radius:0!important;
background:color-mix(in srgb,var(--sidebar-bg) 100%,#000 35%)!important;
border-right:1px solid rgba(255,255,255,.08)!important;
}
.c38ae07c2 .c7b2d8996{
border-radius:10px!important;
background:transparent!important;
border:none!important;
box-shadow:none!important;
border-left:3px solid transparent!important;
}
.c38ae07c2 .c7b2d8996:hover{
background:rgba(255,255,255,.06)!important;
border-left-color:var(--cta)!important;
}
.c38ae07c2 .c59e5ef3f{
display:block!important;
margin:0 0 22px!important;
}
.c38ae07c2 .c58d90f09{
display:grid!important;
grid-template-columns:repeat(3,1fr)!important;
gap:8px!important;
}
.c38ae07c2 .c4d03dee8{
display:block!important;
aspect-ratio:1/1!important;
border-radius:10px!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.1)!important;
}
.c38ae07c2 .c4d03dee8 img{
width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;
}
/* Sidebar: no real navigation under this theme — a set of decorative
"perks" buttons instead (own concept, not the reference's exact
labels), same 1-col/2-col mixed layout rhythm. */
.c38ae07c2 .cbc131cdd{display:none!important}
.c38ae07c2 .c85013c4a{
display:block!important;
margin:0 0 22px!important;
}
.c38ae07c2 .ce3e11bc2{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:8px!important;
}
.c38ae07c2 .ce84e140e{
grid-column:span 1;
display:flex!important;
align-items:center!important;
gap:10px!important;
padding:12px 14px!important;
border-radius:12px!important;
background:color-mix(in srgb,var(--sidebar-panel) 100%,#fff 4%)!important;
border:1px solid var(--sidebar-border)!important;
color:var(--sidebar-text)!important;
font-weight:800!important;
font-size:13px!important;
text-decoration:none!important;
transition:transform .15s ease,border-color .15s ease!important;
}
.c38ae07c2 .ce84e140e:hover{
transform:translateY(-2px)!important;
border-color:var(--cta)!important;
}
.c38ae07c2 .cd6946cbd{grid-column:1/-1!important}
.c38ae07c2 .ce84e140e{white-space:nowrap!important;padding:12px 11px!important;gap:8px!important}
.c38ae07c2 .c0dff7797 small,.c38ae07c2 .c0dff7797 b{white-space:nowrap!important}
.c38ae07c2 .cb9f54b48{display:flex!important;flex:0 0 auto!important;width:28px!important;height:28px!important;align-items:center!important;justify-content:center!important}
.c38ae07c2 .cb9f54b48 img{width:28px!important;height:28px!important;object-fit:contain!important;display:block!important}
/* Sidebar bottom: app download tiles + live-support button, pinned to the
foot of the panel (the panel content becomes a column so the block can
push itself down with margin-top:auto). */
.c38ae07c2 .cf3f518b1{
display:flex!important;
flex-direction:column!important;
min-height:100%!important;
box-sizing:border-box!important;
}
.c38ae07c2 .c0afa429a{
display:block!important;
margin-top:auto!important;
padding-top:20px!important;
}
.c38ae07c2 .cb930ab17{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:8px!important;
margin-bottom:12px!important;
}
.c38ae07c2 .cf283aa7b{
display:flex!important;
align-items:center!important;
gap:9px!important;
padding:10px 10px!important;
border-radius:12px!important;
background:color-mix(in srgb,var(--sidebar-panel) 100%,#fff 4%)!important;
border:1px solid var(--sidebar-border)!important;
color:var(--sidebar-text)!important;
text-decoration:none!important;
transition:transform .15s ease,border-color .15s ease!important;
}
.c38ae07c2 .cf283aa7b:hover{transform:translateY(-2px)!important;border-color:var(--cta)!important}
.c38ae07c2 .cf283aa7b img{width:28px!important;height:28px!important;flex:0 0 auto!important;object-fit:contain!important}
.c38ae07c2 .c599177b2 img{filter:invert(1)!important}
.c38ae07c2 .c0dff7797{display:flex!important;flex-direction:column!important;min-width:0!important;line-height:1.15!important}
.c38ae07c2 .c0dff7797 small{font-size:9px!important;font-weight:700!important;color:var(--sidebar-muted)!important;text-transform:uppercase!important;letter-spacing:.04em!important}
.c38ae07c2 .c0dff7797 b{font-size:14px!important;font-weight:900!important}
.c38ae07c2 .c974a3ace{
display:flex!important;
align-items:center!important;
gap:12px!important;
padding:12px 14px!important;
border-radius:10px!important;
border:2px solid rgba(0,0,0,.6)!important;
background:linear-gradient(135deg,var(--cta),color-mix(in srgb,var(--cta) 60%,#000))!important;
color:#fff!important;
text-decoration:none!important;
box-shadow:4px 4px 0 rgba(255,255,255,.28)!important;
transition:transform .1s ease,box-shadow .1s ease!important;
}
.c38ae07c2 .c974a3ace:hover{transform:translate(2px,2px)!important;box-shadow:2px 2px 0 rgba(255,255,255,.28)!important}
.c38ae07c2 .cb967cc07{
width:42px!important;height:42px!important;flex:0 0 auto!important;
border-radius:999px!important;background:#fff!important;
display:flex!important;align-items:center!important;justify-content:center!important;
}
.c38ae07c2 .cb967cc07 img{width:26px!important;height:26px!important;object-fit:contain!important}
.c38ae07c2 .cdaaca3f6{display:flex!important;flex-direction:column!important;line-height:1.2!important}
.c38ae07c2 .cdaaca3f6 b{font-size:15px!important;font-weight:900!important}
.c38ae07c2 .cdaaca3f6 small{display:flex!important;align-items:center!important;gap:6px!important;font-size:11px!important;font-weight:700!important;opacity:.92!important}
.c38ae07c2 .c48153272{
width:8px!important;height:8px!important;border-radius:999px!important;background:#3ee07f!important;
box-shadow:0 0 0 0 rgba(62,224,127,.7)!important;
animation:quickSupportPulse 1.8s ease-out infinite!important;
}
@keyframes quickSupportPulse{0%{box-shadow:0 0 0 0 rgba(62,224,127,.7)}70%{box-shadow:0 0 0 7px rgba(62,224,127,0)}100%{box-shadow:0 0 0 0 rgba(62,224,127,0)}}
/* Hero: de-boxed, wider, more editorial — no card background/border,
just the layout grid and generous vertical breathing room. */
.c38ae07c2 .c107e63ef{
background:transparent!important;
border:none!important;
box-shadow:none!important;
border-radius:0!important;
padding:56px 0 64px!important;
grid-template-columns:1fr .9fr!important;
}
.c38ae07c2 .c6a877ea8{
border-radius:18px!important;
}
.c38ae07c2 .c708b535d.c8b4e5c66{
border-radius:22px!important;
}
/* Text / table / review / FAQ / logo-grid blocks: strip the boxed "card"
look entirely so content flows directly on the page background —
this hits every block that reuses .cba0512f3/.c589a4061, which is the
point (one change, every content block loses its box at once). */
.c38ae07c2 .cba0512f3,
.c38ae07c2 .c589a4061{
background:transparent!important;
border:none!important;
box-shadow:none!important;
border-radius:0!important;
padding:0!important;
}
.c38ae07c2 .c0fdf49af{
padding:44px 0!important;
border-bottom:1px solid rgba(255,255,255,.07)!important;
}
/* App / Support / Providers / Payments blocks — de-boxed the same way as
text/table (their backgrounds are set by their own x5-repeated-class
specificity hacks elsewhere in this file, so matching that repeat
count is required to out-specify them). */
.c38ae07c2 .c20843f6c.c20843f6c.c20843f6c.c20843f6c.c20843f6c{
background:transparent!important;
border:1px solid rgba(255,255,255,.1)!important;
border-radius:0!important;
}
.c38ae07c2 .c20843f6c:before{display:none!important}
.c38ae07c2 .c3892f105.c3892f105.c3892f105.c3892f105.c3892f105{
background:transparent!important;
border-color:transparent!important;
}
.c38ae07c2 .c78cad04a.c78cad04a.c78cad04a.c78cad04a.c78cad04a{
background:color-mix(in srgb,var(--header-bg) 55%,#000 45%)!important;
border-radius:14px!important;
}
.c38ae07c2 .c098ffd83.c098ffd83.c098ffd83.c098ffd83.c098ffd83{
background:transparent!important;
border:1px solid rgba(255,255,255,.1)!important;
border-radius:0!important;
}
.c38ae07c2 .c098ffd83:before{background:linear-gradient(90deg,var(--bg),transparent)!important}
.c38ae07c2 .c098ffd83:after{background:linear-gradient(270deg,var(--bg),transparent)!important}
.c38ae07c2 .cba96cdb0.cba96cdb0.cba96cdb0.cba96cdb0.cba96cdb0{
background:color-mix(in srgb,var(--header-bg) 55%,#000 45%)!important;
border-radius:12px!important;
}
/* The games block's .c1a75e899 gets its own boxed-card look from a
high-specificity ".c1a75e899" x5 rule elsewhere in this file (a repeat-class
specificity hack) — matching that same repeat count is the only way to
out-specify it and strip the box under this theme. */
.c38ae07c2 .c03fad9ec .c1a75e899.c1a75e899.c1a75e899.c1a75e899.c1a75e899{
background:transparent!important;
border:none!important;
box-shadow:none!important;
border-radius:0!important;
padding:0!important;
}
.c38ae07c2 .cccea5580,
.c38ae07c2 .ce7f8da46{
display:none!important;
}
.c38ae07c2 .cd4ccb6de{
padding:0!important;
margin:0 0 36px!important;
}
.c38ae07c2 .cf22e9d38 h2,
.c38ae07c2 .c0fdf49af>.c1a75e899>h2{
padding-left:16px!important;
border-left:4px solid var(--cta)!important;
}
/* Primary CTA buttons: sharper corners, no all-caps shout, instead of the
classic uppercase pill everywhere. */
.c38ae07c2 .c17e44f16,
.c38ae07c2 .cb87b4a9d,
.c38ae07c2 .c02214a75{
border-radius:12px!important;
text-transform:none!important;
letter-spacing:0!important;
font-weight:800!important;
}
/* FAQ: flat accordion list (accent left border, divider lines) instead
of individually boxed rounded panels — same visual language as the
plain table below. */
.c38ae07c2 .c8d16e0c0{gap:0!important}
.c38ae07c2 .c8d16e0c0 details{
background:transparent!important;
border:none!important;
border-radius:0!important;
border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.c38ae07c2 .c8d16e0c0 summary{
padding:16px 0 16px 16px!important;
border-left:3px solid transparent!important;
transition:border-color .15s!important;
}
.c38ae07c2 .c8d16e0c0 details[open] summary{
border-left-color:var(--cta)!important;
color:var(--cta)!important;
}
.c38ae07c2 .c8d16e0c0 details>div{padding:0 0 16px 16px!important}
/* Reviews: same flat/divider treatment instead of individually boxed
review cards. */
.c38ae07c2 .cca88df1d{gap:0!important}
.c38ae07c2 .cca88df1d article{
background:transparent!important;
border:none!important;
border-radius:0!important;
border-bottom:1px solid rgba(255,255,255,.08)!important;
padding:16px 0!important;
}
/* Plain table: the actual active rule painting each row as its own
separate pill (search "tbody tr:has(td)>*" earlier in this file) is a
.cc8797c0e x5-repeated specificity hack — matching that same repeat
count (plus .c38ae07c2) is the only way to out-specify it and get a
plain, unboxed, divider-line table instead. */
.c38ae07c2 .cc8797c0e thead{display:table-header-group!important}
.c38ae07c2 .cc8797c0e th{
color:var(--cta)!important;
font-weight:800!important;
text-transform:uppercase!important;
font-size:12px!important;
letter-spacing:.04em!important;
border-bottom:1px solid rgba(255,255,255,.12)!important;
}
.c38ae07c2 .cc8797c0e tr>*:first-child{
border-left:none!important;
background:transparent!important;
color:var(--muted)!important;
}
.c38ae07c2 .cc8797c0e tr>*:not(:first-child){
background:transparent!important;
color:var(--text)!important;
border-radius:0!important;
}
.c38ae07c2 .cc8797c0e tbody tr:first-child>*:not(:first-child),
.c38ae07c2 .cc8797c0e tbody tr:last-child>*:not(:first-child){
border-radius:0!important;
}
.c38ae07c2 .cc8797c0e tbody tr:not(:last-child)>*{
border-bottom:1px solid rgba(255,255,255,.08)!important;
}
.c38ae07c2 .cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody tr:has(td)>*{
background:transparent!important;
}
.c38ae07c2 .cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody tr:has(td)>*:first-child,
.c38ae07c2 .cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody tr:has(td)>*:last-child{
border-radius:0!important;
}
.c38ae07c2 .cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody tr:has(td):hover{
transform:none!important;
box-shadow:none!important;
}
/* Review avatars — same pool as Recent Big Wins, Casino theme only. */
.ca3e9b6c2{display:none}
.c38ae07c2 .cca88df1d article{
display:grid!important;
grid-template-columns:48px 1fr!important;
column-gap:14px!important;
align-items:start!important;
}
.c38ae07c2 .ca3e9b6c2{
display:block!important;
grid-row:1 / span 3!important;
width:48px!important;height:48px!important;border-radius:999px!important;
}
/* Games block: icon + title grouped on the left, tabs/arrows pushed right
(the shared space-between spread the title into the middle). */
.c38ae07c2 .c03fad9ec .c9cbef139{
justify-content:flex-start!important;
gap:12px!important;
}
.c38ae07c2 .c03fad9ec .c9cbef139 .c561019da{margin-left:auto!important}
/* The base file hides every game card past the 10th / 6th — the looping
carousel clones the cards, so those clones must stay visible. */
.c38ae07c2 .c1be0e029 .c60cd4d71:nth-child(n){display:grid!important}
/* FAQ: bigger, easier to read. */
.c38ae07c2 .c8d16e0c0 summary{
font-size:18px!important;
padding:20px 0 20px 18px!important;
}
.c38ae07c2 .c8d16e0c0 details>div{
font-size:16px!important;
line-height:1.6!important;
padding:0 0 20px 18px!important;
}
/* Buttons: a completely different button language — flat "sticker" buttons
with a hard offset shadow that physically presses in on hover/click,
instead of the classic glossy glowing pills. */
.c38ae07c2 .cd0c6eff2,
.c38ae07c2 .c17e44f16,
.c38ae07c2 .cb87b4a9d,
.c38ae07c2 .c02214a75,
.c38ae07c2 .c05027df4,
.c38ae07c2 .c8a2b612e,
.c38ae07c2 .c561019da button,
.c38ae07c2 .c6e75ac1d{
border-radius:6px!important;
border:2px solid rgba(0,0,0,.6)!important;
box-shadow:4px 4px 0 rgba(255,255,255,.28)!important;
background-image:none!important;
animation:none!important;
filter:none!important;
text-shadow:none!important;
transition:transform .1s ease,box-shadow .1s ease!important;
}
.c38ae07c2 .cd0c6eff2:hover,
.c38ae07c2 .c17e44f16:hover,
.c38ae07c2 .cb87b4a9d:hover,
.c38ae07c2 .c02214a75:hover,
.c38ae07c2 .c05027df4:hover,
.c38ae07c2 .c7b64940d:hover .c8a2b612e,
.c38ae07c2 .c561019da button:hover,
.c38ae07c2 .c6e75ac1d:hover{
transform:translate(2px,2px)!important;
box-shadow:2px 2px 0 rgba(255,255,255,.28)!important;
}
.c38ae07c2 .cd0c6eff2:active,
.c38ae07c2 .c17e44f16:active,
.c38ae07c2 .cb87b4a9d:active,
.c38ae07c2 .c02214a75:active,
.c38ae07c2 .c05027df4:active,
.c38ae07c2 .c561019da button:active,
.c38ae07c2 .c6e75ac1d:active{
transform:translate(4px,4px)!important;
box-shadow:0 0 0 rgba(255,255,255,.28)!important;
}
.c38ae07c2 .c17e44f16:before,
.c38ae07c2 .cb87b4a9d:before,
.c38ae07c2 .c02214a75:before,
.c38ae07c2 .cd0c6eff2:before,
.c38ae07c2 .cd0c6eff2:after{display:none!important}
.c38ae07c2 .cd0c6eff2.caa68eea7{
background-color:var(--login-bg)!important;
color:var(--login-text)!important;
}
.c38ae07c2 .cd0c6eff2.ce86c65a9{
background-color:var(--register-bg)!important;
color:var(--register-text)!important;
}
.c38ae07c2 .cd0c6eff2{
text-transform:uppercase!important;
letter-spacing:.05em!important;
font-size:12px!important;
font-weight:900!important;
}
.c38ae07c2 .c17e44f16,
.c38ae07c2 .cb87b4a9d{
background-color:var(--primary-cta-bg)!important;
color:var(--primary-cta-text)!important;
}
.c38ae07c2 .c8a2b612e{
background-color:var(--cta)!important;
text-transform:uppercase!important;
letter-spacing:.04em!important;
font-size:12px!important;
}
.c38ae07c2 .c05027df4{
background-color:transparent!important;
text-transform:uppercase!important;
letter-spacing:.04em!important;
}
.c38ae07c2 .c561019da button{
text-transform:uppercase!important;
letter-spacing:.04em!important;
font-size:12px!important;
padding:10px 18px!important;
}
.c38ae07c2 .c561019da button.c7023b334{
background-color:var(--cta)!important;
border-color:transparent!important;
}
.c38ae07c2 .c12bfdc80 .cc8d3bb2b{margin-left:auto!important}
/* Table: very thin, light grid lines so it reads as a table (the base file
turns the table into flex rows with 12px gaps via x5 specificity hacks —
the gap is zeroed and cell borders are drawn with matching specificity). */
.c38ae07c2 .cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e table{
border-top:1px solid rgba(255,255,255,.09)!important;
border-left:1px solid rgba(255,255,255,.09)!important;
margin:0!important;
}
.c38ae07c2 .cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody{gap:0!important}
.c38ae07c2 .cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e th,
.c38ae07c2 .cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e td{
border-right:1px solid rgba(255,255,255,.09)!important;
border-bottom:1px solid rgba(255,255,255,.09)!important;
}
/* The base file explicitly removes the bottom border from every non-first
cell of non-last rows (same x5 hack shape) — that is why the row lines
stopped after the label column. Restore it with a stronger selector so
the thin line runs the full width of the table. */
.c38ae07c2 .cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e tbody tr:not(:last-child)>*:not(:first-child){
border-bottom:1px solid rgba(255,255,255,.09)!important;
}
/* Sidebar close / burger buttons: no outline. The base file paints them
with a var(--cta) border (desktop) and a 2px gold glow border (mobile)
through x5-repeated-class rules, so the same repeat count is needed. */
.c38ae07c2 .c04a53b74.c04a53b74.c04a53b74.c04a53b74.c04a53b74,
.c38ae07c2 .c82ff1bb1.c82ff1bb1.c82ff1bb1.c82ff1bb1.c82ff1bb1,
.c38ae07c2 .c48f16667.c48f16667.c48f16667.c48f16667.c48f16667{
border:0!important;
border-color:transparent!important;
box-shadow:none!important;
outline:none!important;
}
/* Offer Cards (auto artwork): the middle card is the Cashback bag, the
sides are random girls. The artwork is a transparent-backed cut-out, so
the card background shows through and the left edge of the picture is
faded into it. */
.c38ae07c2 .c7b64940d{
grid-template-columns:1.05fr 1fr!important;
min-height:200px!important;
background:
radial-gradient(120% 150% at 88% 15%,color-mix(in srgb,var(--cta) 30%,transparent) 0%,transparent 62%),
color-mix(in srgb,var(--header-bg) 55%,#000 45%)!important;
}
.c38ae07c2 .cf29a45cf{
border:1px solid color-mix(in srgb,var(--cta) 70%,transparent)!important;
box-shadow:0 0 0 1px color-mix(in srgb,var(--cta) 22%,transparent),0 14px 34px rgba(0,0,0,.35),0 0 34px color-mix(in srgb,var(--cta) 26%,transparent)!important;
}
.c38ae07c2 .ce8f056d1{background:transparent!important}
.c38ae07c2 .ce8f056d1:before{display:none!important}
.c38ae07c2 .c9d4f3ee6 .ce8f056d1 img{
object-fit:contain!important;
object-position:right bottom!important;
-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 12%,rgba(0,0,0,.55) 30%,#000 54%);
mask-image:linear-gradient(90deg,transparent 0,transparent 12%,rgba(0,0,0,.55) 30%,#000 54%);
transform:scale(1.1);
transform-origin:right bottom;
}
.c38ae07c2 .c9a609a85{padding:52px 6px 20px 22px!important}
.c38ae07c2 .c3991619d{
font-size:24px!important;
line-height:1.1!important;
font-weight:900!important;
letter-spacing:-.01em!important;
color:var(--primary-cta-bg)!important;
text-shadow:0 2px 16px color-mix(in srgb,var(--primary-cta-bg) 35%,transparent)!important;
}
.c38ae07c2 .c050bf6b1{
font-size:15px!important;
font-weight:700!important;
color:var(--primary-cta-bg)!important;
opacity:.9!important;
}
.c38ae07c2 .cdd0ac9eb{
border-radius:6px!important;
text-transform:uppercase!important;
letter-spacing:.05em!important;
font-size:11px!important;
}
/* Footer: taller, calmer, more separated from content. */
.c38ae07c2 .c21653db5{
padding:48px 0 32px!important;
margin-top:56px!important;
border-top:1px solid rgba(255,255,255,.1)!important;
background:linear-gradient(180deg,var(--footer-bg),color-mix(in srgb,var(--footer-bg) 100%,#000 30%))!important;
}
/* Recent Wins square tickets — casino theme just rounds them a touch more
and gives them an accent ring; the square layout itself is baseline. */
.c38ae07c2 .c9d31f3c2{
border-radius:18px!important;
border:1px solid transparent!important;
}
.c38ae07c2 .c9d31f3c2:hover{
border-color:var(--cta)!important;
box-shadow:0 0 0 3px color-mix(in srgb,var(--cta) 20%,transparent)!important;
}
/* Offer cards: measured against the actual reference site's promo-card
slider (~440x190px fixed-size cards, 16px radius, compact left-aligned
CTA, image bleeding into the right side) — a horizontal scroll row of
fixed-width cards, not a stretched 3-column grid. */
.c38ae07c2 .c4c131433{
display:flex!important;
grid-template-columns:none!important;
flex-wrap:nowrap!important;
overflow-x:auto!important;
gap:20px!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
padding-bottom:4px!important;
}
.c38ae07c2 .c4c131433::-webkit-scrollbar{display:none!important}
.c38ae07c2 .c7b64940d{
display:grid!important;
grid-template-columns:1.2fr 1fr!important;
align-items:stretch!important;
flex:1 0 min(440px,85vw)!important;
width:auto!important;
min-height:190px!important;
border-radius:16px!important;
border:none!important;
background:color-mix(in srgb,var(--header-bg) 60%,#000 40%)!important;
box-shadow:0 10px 26px rgba(0,0,0,.28)!important;
scroll-snap-align:start!important;
}
.c38ae07c2 .c7b64940d.caebf2967{
grid-template-columns:1fr!important;
}
.c38ae07c2 .ce8f056d1{
grid-column:2!important;
grid-row:1!important;
aspect-ratio:auto!important;
height:100%!important;
position:relative!important;
}
.c38ae07c2 .ce8f056d1:before{
content:"";
position:absolute;inset:0;z-index:1;
background:linear-gradient(90deg,color-mix(in srgb,var(--header-bg) 60%,#000 40%) 0%,transparent 45%);
}
.c38ae07c2 .ce8f056d1 img{
width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;
}
.c38ae07c2 .c9a609a85{
grid-column:1!important;
grid-row:1!important;
justify-content:center!important;
gap:8px!important;
padding:52px 16px 18px 20px!important;
}
.c38ae07c2 .cdd0ac9eb{
background:var(--primary-cta-bg)!important;
color:var(--primary-cta-text)!important;
}
.c38ae07c2 .c3991619d{font-size:18px!important}
.c38ae07c2 .c8a2b612e{
margin-top:8px!important;
align-self:flex-start!important;
min-height:0!important;
width:auto!important;
padding:10px 18px!important;
border-radius:999px!important;
}
@media(max-width:860px){
.c38ae07c2 .c7b64940d{width:min(320px,82vw)!important;min-height:0!important}
}
/* The Big Wins block-head only ever has 2 children (icon + h2), so the
shared .c9cbef139{justify-content:space-between} (meant for the Games
block's 4-item head: icon/h2/tabs/arrows) shoves them to opposite ends
instead of grouping them — pull them back together on the left. */
.c38ae07c2 .c12bfdc80 .c9cbef139{
justify-content:flex-start!important;
gap:12px!important;
}
/* The shared h2 rule gives every block heading a 22px bottom margin, which
sits inside the flex item's box and pushes the heading text ~11px above
the center line the icon badge sits on — zero it inside block-heads so
icon, title, tabs and arrows all share one center line. */
.c38ae07c2 .c9cbef139 h2{margin:0!important}
/* Games "big wins" header: icon badge + round nav arrows, shown only
under this theme. */
.c38ae07c2 .c33f2f6d6{
display:inline-flex!important;
align-items:center;justify-content:center;
width:40px;height:40px;border-radius:14px;
background:color-mix(in srgb,var(--cta) 20%,var(--block-bg));
color:var(--cta);font-size:18px;
}
.c38ae07c2 .c33f2f6d6.c8edea68a{
background:transparent!important;
overflow:visible;
}
.c38ae07c2 .c33f2f6d6.c8edea68a img{
width:100%;height:100%;object-fit:contain;
}
.c38ae07c2 .cc8d3bb2b{display:flex!important;gap:8px}
.c38ae07c2 .c95c14216{
width:38px;height:38px;border-radius:999px;
border:1px solid rgba(255,255,255,.16);
background:color-mix(in srgb,var(--block-bg) 100%,#000 20%);
color:var(--text);display:grid;place-items:center;cursor:pointer;font-size:18px;
}
.c38ae07c2 .c95c14216:hover{background:color-mix(in srgb,var(--cta) 30%,var(--block-bg))}
/* Games grid becomes a horizontal scroll-snap track instead of a fixed
CSS grid — same .c1be0e029/.c9b8c1c1d.c7023b334 nodes, higher-specificity
overrides only. */
.c38ae07c2 .c9b8c1c1d.c7023b334{display:flex!important}
.c38ae07c2 .c1be0e029{
overflow-x:auto!important;
flex-wrap:nowrap!important;
gap:18px!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
}
.c38ae07c2 .c1be0e029::-webkit-scrollbar{display:none!important}
.c38ae07c2 .c60cd4d71{
flex:0 0 auto!important;
width:clamp(220px,26vw,280px)!important;
scroll-snap-align:start!important;
}
@media(max-width:860px){.c38ae07c2 .c60cd4d71{width:200px!important}}
/* Energy saving: site.c8375747a tags every element with an endless animation and
adds .cb-offscreen while it is scrolled out of view. :not(#cb-none) lifts
the specificity above the !important animation shorthands used above. */
.cb-offscreen:not(#cb-none),.cb-offscreen:not(#cb-none)::before,.cb-offscreen:not(#cb-none)::after{animation-play-state:paused!important}
/* Mobile menu on iPhone: the panel is the only scroll container, sized by
the screen edges rather than 100dvh (which shifts with Safari's toolbar),
and it never passes the scroll on to the page behind it. The inner
.cf3f518b1 was a second, nested overflow:auto box with nothing to
scroll — iOS Safari grabbed that one, so the menu sprang back on release. */
@media(max-width:860px){
.ce11c9dec.ce11c9dec.ce11c9dec{top:0!important;bottom:0!important;height:auto!important;min-height:0!important;max-height:none!important;overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.cf3f518b1.cf3f518b1.cf3f518b1.cf3f518b1.cf3f518b1{overflow:visible!important;min-height:100%!important}
}
/* Chrome's GPU renderer (Graphite) can lose its context and crash the page
once it has drawn enough borders as paths while scrolling: a see-through
border on a rounded box with a background, or a see-through border on only
some sides. A Casino page had ~180 of them. Same pixels, no paths: straight
lines become a border-image of the same color; see-through rounded borders
stay for layout but transparent, and an inset outline of the same color
draws them. */
.c38ae07c2 .c0fdf49af{border-image:linear-gradient(rgba(255,255,255,.07),rgba(255,255,255,.07)) 1!important}
.c38ae07c2 .c2efe4cb3,
.c38ae07c2 .ce11c9dec,
.c38ae07c2 .c8d16e0c0 details,
.c38ae07c2 .cca88df1d article{border-image:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)) 1!important}
.c38ae07c2 .c21653db5{border-image:linear-gradient(rgba(255,255,255,.1),rgba(255,255,255,.1)) 1!important}
.c38ae07c2 .cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e table,
.c38ae07c2 .cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e th,
.c38ae07c2 .cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e.cc8797c0e td{border-image:linear-gradient(rgba(255,255,255,.09),rgba(255,255,255,.09)) 1!important}
.c38ae07c2 .cba96cdb0{border-color:transparent!important;outline:1px solid rgba(255,255,255,.14);outline-offset:-1px;transition:transform .14s ease,border-color .14s ease,outline-color .14s ease,filter .14s ease}
.c38ae07c2 .cba96cdb0:hover{outline-color:var(--cta)}
.c38ae07c2 .c6922d910,
.c38ae07c2 .c95c14216{border-color:transparent;outline:1px solid rgba(255,255,255,.16);outline-offset:-1px}
.c38ae07c2 .c6922d910:hover{border-color:transparent;outline-color:rgba(255,255,255,.3)}
.c38ae07c2 .cd0c6eff2,
.c38ae07c2 .c17e44f16,
.c38ae07c2 .cb87b4a9d,
.c38ae07c2 .c02214a75,
.c38ae07c2 .c05027df4,
.c38ae07c2 .c8a2b612e,
.c38ae07c2 .c561019da button,
.c38ae07c2 .c6e75ac1d,
.c38ae07c2 .c974a3ace{border-color:transparent!important;outline:2px solid rgba(0,0,0,.6);outline-offset:-2px}
/* Plain H1 for pages without a Hero block. */
.c0b1ee432{padding:28px 0 0}
.c0b1ee432 h1{margin:0;line-height:1.15}
[data-r]{cursor:pointer}
|