@charset "UTF-8";
/* ============================================================
caswino-casino.net - AMBER CIRCUIT
near-black #060710 / amber #f59e0b / violet #9d4edd
============================================================ */
@font-face{font-family:Gilroy;src:local("Gilroy Regular"),local("Gilroy-Regular"),url(../fonts/Gilroy-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:local("Gilroy Medium"),local("Gilroy-Medium"),url(../fonts/Gilroy-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:local("Gilroy Semibold"),local("Gilroy-Semibold"),url(../fonts/Gilroy-Semibold.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Gilroy;src:local("Gilroy Bold"),local("Gilroy-Bold"),url(../fonts/Gilroy-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
:root{
--bg:#060710;
--panel:#15182b;
--panel-hi:#1b1f36;
--line:#252a46;
--line-soft:#1c2138;
--amber:#f59e0b;
--amber-2:#fbbf24;
--violet:#9d4edd;
--txt:#c7cce1;
--dim:#8b91ab;
--white:#f3f5ff;
--r:16px;
--head:64px;
--shell:1280px;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0;border:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
background:var(--bg);
color:var(--txt);
font-family:Gilroy,-apple-system,Segoe UI,Roboto,sans-serif;
font-weight:400;
font-size:16px;
line-height:1.7;
overflow-x:hidden;
min-height:100vh;
background-image:
radial-gradient(720px 420px at 12% -6%,rgba(245,158,11,.10),transparent 62%),
radial-gradient(680px 460px at 92% 4%,rgba(157,78,221,.12),transparent 60%),
linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
background-size:auto,auto,52px 52px,52px 52px;
background-attachment:scroll,scroll,fixed,fixed;
}
img{max-width:100%;height:auto;vertical-align:top}
a{color:inherit;text-decoration:none}
strong{font-weight:700;color:var(--white)}
em{font-style:italic}
[id]{scroll-margin-top:calc(var(--head) + 26px)}
::selection{background:rgba(245,158,11,.32);color:#fff}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:6px}
.wrap{width:100%;max-width:var(--shell);margin:0 auto;padding:0 20px}
/* ---------- buttons ---------- */
.btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-weight:700;font-size:15px;line-height:1;letter-spacing:.2px;
padding:14px 24px;border-radius:12px;cursor:pointer;
transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;
}
.btn--amber{
color:#120c02;
background:linear-gradient(140deg,var(--amber-2),var(--amber));
box-shadow:0 8px 26px -10px rgba(245,158,11,.85),inset 0 1px 0 rgba(255,255,255,.35);
}
.btn--amber:hover{transform:translateY(-2px);box-shadow:0 14px 34px -10px rgba(245,158,11,.95),inset 0 1px 0 rgba(255,255,255,.4)}
.btn--ghost{color:var(--white);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.btn--ghost:hover{border-color:var(--amber);color:var(--amber-2)}
.btn--lg{padding:17px 34px;font-size:17px}
/* ---------- header ---------- */
.head{
position:sticky;top:0;z-index:900;
background:rgba(6,7,16,.86);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid var(--line-soft);
}
.head::after{
content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
background:linear-gradient(90deg,transparent,rgba(245,158,11,.55),rgba(157,78,221,.45),transparent);
}
.head__in{
max-width:var(--shell);margin:0 auto;padding:0 20px;
min-height:var(--head);display:flex;align-items:center;gap:18px;
}
.brand{display:flex;align-items:center;flex:0 0 auto}
.brand img{width:140px;height:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav__list{display:flex;align-items:center;gap:24px;list-style:none}
.nav__link{
font-size:14px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);
position:relative;padding:6px 0;transition:color .18s ease;
}
.nav__link:hover{color:var(--white)}
.nav__link::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
background:var(--amber);transition:right .22s ease;
}
.nav__link:hover::after{right:0}
.nav__link.is-active{color:var(--amber-2)}
.nav__link.is-active::after{right:0}
.head__cta{display:flex;align-items:center;gap:10px}
.head__cta .btn{padding:11px 20px;font-size:14px}
/* Hit area is a hard 44x44 so the tap target passes on a phone; the visual
chrome is unchanged from the 42x38 box it replaces. */
.burger{
display:none;margin-left:auto;width:44px;height:44px;min-width:44px;min-height:44px;
border:1px solid var(--line);position:relative;z-index:2;
border-radius:10px;background:rgba(255,255,255,.03);cursor:pointer;
flex-direction:column;align-items:center;justify-content:center;gap:5px;
-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.burger span{display:block;width:18px;height:2px;border-radius:2px;background:var(--white);transition:.2s}
.burger[aria-expanded="true"]{border-color:var(--amber);background:rgba(245,158,11,.1)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* Scrim sits under the header (z-index 900) so the open panel, a child of the
header, always paints above it. Never on at desktop width. */
.scrim{
position:fixed;inset:0;z-index:800;background:rgba(4,5,12,.62);
opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.scrim.is-on{opacity:1;pointer-events:auto}
.scrim[hidden]{display:none}
body.nav-lock{overflow:hidden}
/* ---------- hero ---------- */
.hero{margin:26px auto 0;position:relative}
.hero__card{
position:relative;isolation:isolate;overflow:hidden;
border:1px solid var(--line);border-radius:22px;background:var(--panel);
}
.hero__media{position:absolute;inset:0;z-index:-2;display:block}
/* A touch of gain on the source rather than a heavier wash on top: the wash is
what was burying the artwork, so it is the layer that came down. */
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(1.1) saturate(1.06)}
/* Card-wide wash. Deliberately light now: legibility behind the headline is
handled locally by .hero__body::before, which tracks the text column instead
of darkening the whole frame. The 0deg layer still seats the .facts band. */
.hero__card::before{
content:"";position:absolute;inset:0;z-index:-1;
background:
linear-gradient(90deg,rgba(6,7,16,.22) 0%,rgba(6,7,16,.12) 42%,rgba(6,7,16,0) 74%,rgba(6,7,16,.14) 100%),
linear-gradient(0deg,rgba(6,7,16,.92),transparent 60%);
}
.hero__body{padding:clamp(26px,4.6vw,64px);max-width:840px;position:relative;isolation:isolate}
/* Local scrim behind the headline and its button. The pseudo is grown past the
body box on the right so the gradient reaches zero outside the text column:
inside the box it would end on a visible vertical seam. .hero__card clips it. */
.hero__body::before{
content:"";position:absolute;z-index:-1;
top:-10%;right:-22%;bottom:-14%;left:-6%;
background:radial-gradient(72% 118% at 26% 46%,
rgba(6,7,16,.60) 0%,rgba(6,7,16,.52) 52%,rgba(6,7,16,.16) 92%,transparent 100%);
}
h1{
margin:20px 0 0;color:var(--white);font-weight:700;
font-size:clamp(27px,4.4vw,50px);line-height:1.1;letter-spacing:-.5px;
}
h1 .amber{color:var(--amber-2)}
.hero__actions{margin-top:26px;display:flex;flex-wrap:wrap;gap:12px}
.hero__rail{
position:absolute;top:0;bottom:0;left:0;width:3px;
background:linear-gradient(180deg,var(--amber),var(--violet));opacity:.85;
}
.facts{
list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--line);background:rgba(10,12,24,.72);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.facts li{padding:18px 20px;border-left:1px solid var(--line-soft)}
.facts li:first-child{border-left:0}
.facts b{display:block;color:var(--white);font-size:19px;font-weight:700;line-height:1.2}
.facts span{display:block;margin-top:5px;font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
/* ---------- shell: rail + doc ---------- */
.shell{
display:grid;grid-template-columns:236px minmax(0,1fr);gap:44px;
align-items:start;margin:54px auto 72px;
}
.rail{position:sticky;top:calc(var(--head) + 18px);max-height:calc(100vh - var(--head) - 40px);overflow:auto}
/* One scrollbar language for every scrolling box on the page: the contents rail
and the table wrappers. Slim rounded amber thumb on a barely-there track,
Firefox served by the standard properties, WebKit/Blink by the pseudos.
Only the bar is restyled: nothing here moves or resizes what it scrolls. */
.rail,.tscroll{scrollbar-width:thin;scrollbar-color:rgba(245,158,11,.75) rgba(255,255,255,.05)}
.rail::-webkit-scrollbar,.tscroll::-webkit-scrollbar{width:8px;height:8px}
.rail::-webkit-scrollbar-track,.tscroll::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:8px}
.rail::-webkit-scrollbar-thumb,.tscroll::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,var(--amber-2),var(--amber));
border:2px solid transparent;background-clip:padding-box;border-radius:8px;
}
.rail:hover::-webkit-scrollbar-thumb,.tscroll:hover::-webkit-scrollbar-thumb,
.rail::-webkit-scrollbar-thumb:hover,.tscroll::-webkit-scrollbar-thumb:hover{background:var(--amber-2);background-clip:padding-box}
.rail__box{border:1px solid var(--line);border-radius:14px;background:rgba(21,24,43,.7);padding:14px 12px}
.rail__list{list-style:none;display:grid;gap:1px}
.rail__list a{
display:block;padding:8px 12px;border-radius:9px;font-size:14px;font-weight:500;color:var(--dim);
border-left:2px solid transparent;transition:.16s;
}
.rail__list a:hover{color:var(--white);background:rgba(245,158,11,.08);border-left-color:var(--amber)}
.rail__list a.is-active{color:var(--white);background:rgba(245,158,11,.12);border-left-color:var(--amber);font-weight:600}
.doc{min-width:0;display:grid;gap:34px}
/* ---------- content typography ---------- */
.sec{
border:1px solid var(--line-soft);border-radius:18px;background:rgba(21,24,43,.55);
padding:clamp(20px,2.6vw,34px);position:relative;overflow:hidden;
}
.sec::before{
content:"";position:absolute;top:0;left:0;width:70px;height:1px;
background:linear-gradient(90deg,var(--amber),transparent);
}
.sec--lead{background:transparent;border:0;padding:0}
.sec--lead::before{display:none}
h2{
color:var(--white);font-weight:700;font-size:clamp(21px,2.5vw,32px);line-height:1.2;
letter-spacing:-.3px;display:flex;align-items:baseline;gap:12px;margin-bottom:18px;
}
h2::before{
content:"";flex:0 0 auto;width:9px;height:9px;border-radius:2px;
background:var(--amber);box-shadow:0 0 0 4px rgba(245,158,11,.14),0 0 16px rgba(245,158,11,.6);
transform:translateY(-3px);
}
.doc p{margin-bottom:15px;font-size:16.5px;line-height:1.78}
.doc p:last-child{margin-bottom:0}
.sec--lead p{font-size:17.5px;color:#d3d8ec}
/* Content lists only. Lists rendered from the markdown body never carry a class;
the UI component lists (.provs / .pays / .grid-games) always do. Scoping with
:not([class]) keeps these rules off the components, which would otherwise lose
their own display/gap/padding to this higher-specificity descendant selector. */
.doc ul:not([class]){list-style:none;display:grid;gap:10px;margin:4px 0 16px}
.doc ul:not([class]) li{position:relative;padding-left:26px;font-size:16.5px}
.doc ul:not([class]) li::before{
content:"";position:absolute;left:2px;top:11px;width:8px;height:8px;border-radius:2px;
background:transparent;border:2px solid var(--amber);transform:rotate(45deg);
}
.doc ul:not([class]):last-child{margin-bottom:0}
a.tlink{
color:var(--amber-2);font-weight:600;
border-bottom:1px solid rgba(245,158,11,.4);transition:.16s;
}
a.tlink:hover{color:#fff;border-bottom-color:#fff}
blockquote{
margin:20px 0;padding:20px 22px 20px 26px;border-radius:14px;
background:linear-gradient(120deg,rgba(157,78,221,.14),rgba(245,158,11,.06));
border:1px solid rgba(157,78,221,.3);position:relative;
}
blockquote::before{
content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;
background:linear-gradient(180deg,var(--amber),var(--violet));
}
blockquote p{margin:0;color:#e3e6f6;font-size:16.5px}
blockquote em{font-style:italic}
/* ---------- tables ---------- */
.tscroll{
overflow-x:auto;margin:6px 0 16px;border:1px solid var(--line);border-radius:14px;
background:var(--panel);-webkit-overflow-scrolling:touch;
}
.tscroll:last-child{margin-bottom:0}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px}
thead th{
background:linear-gradient(180deg,rgba(245,158,11,.16),rgba(245,158,11,.05));
color:var(--white);font-weight:700;text-align:left;font-size:12px;
letter-spacing:.13em;text-transform:uppercase;padding:14px 16px;white-space:nowrap;
border-bottom:1px solid rgba(245,158,11,.32);
}
tbody td{padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(255,255,255,.018)}
tbody tr:hover{background:rgba(245,158,11,.06)}
tbody td:first-child{color:var(--white);font-weight:600}
/* ---------- promo card ---------- */
.promo{
margin-top:20px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;justify-content:center;
padding:22px 24px;border-radius:16px;border:1px solid rgba(245,158,11,.35);
background:linear-gradient(120deg,rgba(245,158,11,.12),rgba(157,78,221,.12));
}
/* ---------- closing CTA band ---------- */
/* Deliberately louder than a .sec: filled amber-violet wash, no card border
radius match, so it reads as the end of the article rather than one more
section of it. */
.endcta{
position:relative;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center;
justify-content:space-between;gap:clamp(16px,2.4vw,28px);
padding:clamp(22px,3vw,34px) clamp(20px,3vw,34px);border-radius:18px;
border:1px solid rgba(245,158,11,.42);
background:
radial-gradient(520px 220px at 88% 120%,rgba(157,78,221,.28),transparent 70%),
linear-gradient(120deg,rgba(245,158,11,.17),rgba(157,78,221,.14)),
var(--panel);
box-shadow:0 26px 50px -34px rgba(245,158,11,.6);
}
.endcta::before{
content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
background:linear-gradient(180deg,var(--amber),var(--violet));
}
.endcta__txt{flex:1 1 300px;min-width:0}
.endcta__ttl{
display:block;color:var(--white);font-weight:700;letter-spacing:-.3px;
font-size:clamp(19px,2.3vw,25px);line-height:1.22;
}
.endcta__sub{display:block;margin-top:8px;font-size:15.5px;line-height:1.6;color:var(--txt)}
.endcta__go{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:12px}
.endcta__go .btn{line-height:1.15}
/* ---------- lobby preview ---------- */
.lobby{margin-top:22px}
.grid-games{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;list-style:none}
.grid-games li{min-width:0}
/* Live tables reuse the .gcard language at a larger step than the pokie grid.
The table artwork is 232x300, so the frame keeps that portrait ratio rather
than cropping it to a landscape box. Four tiles: one row on desktop, a
symmetric 2x2 on a phone, never a 3+1 orphan. */
.grid-live{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none}
.grid-live li{min-width:0}
.gcard{
position:relative;border:1px solid var(--line);border-radius:13px;overflow:hidden;
background:var(--panel-hi);display:flex;flex-direction:column;height:100%;
transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.gcard:hover{transform:translateY(-4px);border-color:var(--amber);box-shadow:0 16px 30px -18px rgba(245,158,11,.8)}
.gcard__art{position:relative;display:block;overflow:hidden}
.gcard img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.gcard__art::after{
content:"";position:absolute;inset:0;opacity:0;transition:opacity .2s ease;
background:linear-gradient(180deg,rgba(157,78,221,.16),rgba(245,158,11,.2));
}
.gcard:hover .gcard__art::after{opacity:1}
.gcard__cap{display:block;padding:9px 10px 8px;background:linear-gradient(180deg,rgba(6,7,16,.2),rgba(6,7,16,.9))}
.gcard__name{display:block;color:var(--white);font-size:12.5px;font-weight:600;line-height:1.3}
.gcard__studio{
display:block;margin-top:4px;font-size:10px;font-weight:600;letter-spacing:.11em;
text-transform:uppercase;color:var(--dim);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.gcard__play{
display:block;margin:auto 10px 10px;padding:7px 6px;border-radius:9px;text-align:center;
font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#1b1205;
background:linear-gradient(140deg,var(--amber-2),var(--amber));
box-shadow:inset 0 1px 0 rgba(255,255,255,.35);transition:box-shadow .2s ease;
}
.gcard:hover .gcard__play{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 10px 20px -10px rgba(245,158,11,.95)}
.grid-live .gcard img{aspect-ratio:232/300}
.grid-live .gcard__cap{padding:11px 12px 9px}
.grid-live .gcard__name{font-size:14px}
.grid-live .gcard__studio{font-size:10.5px}
.grid-live .gcard__play{margin:auto 12px 12px;padding:9px 6px;font-size:11.5px}
/* ---------- providers marquee ----------
Two identical logo sets ride one flex track; the second is aria-hidden, so a
screen reader still reads eleven studios once. The track is exactly two sets
wide, so translating it by half its width lands set two where set one started
and the loop has no seam. Transform only: no layout, no paint, no JS timer.
Runs right-to-left at 26s, deliberately unlike the other sites in the set.
The wrapper clips, so the strip can never widen the page at 360px. */
.pmarq{
position:relative;overflow:hidden;margin:4px 0 18px;
-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.pmarq:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:10px}
.pmarq__track{
display:flex;width:max-content;will-change:transform;
animation:pmarq-run 26s linear infinite;
}
@keyframes pmarq-run{
from{transform:translate3d(0,0,0)}
to{transform:translate3d(-50%,0,0)}
}
/* hover or keyboard focus holds the row still so a logo can actually be read */
.pmarq:hover .pmarq__track,
.pmarq:focus .pmarq__track,
.pmarq:focus-within .pmarq__track{animation-play-state:paused}
/* nowrap inside the track, and the trailing pad keeps the seam gap even */
.pmarq .provs{flex:0 0 auto;flex-wrap:nowrap;margin:0;padding-right:10px}
.provs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:4px 0 18px;list-style:none}
.provs li{
flex:0 0 auto;display:flex;align-items:center;justify-content:center;
height:52px;padding:0 18px;border:1px solid var(--line-soft);border-radius:11px;
background:rgba(255,255,255,.03);
}
.provs img{max-height:26px;width:auto;opacity:.72;filter:grayscale(1) brightness(1.9);transition:.2s}
.provs li:hover img{opacity:1;filter:none}
/* ---------- payments ---------- */
.pays{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 18px;list-style:none}
.pays li{
display:flex;align-items:center;justify-content:center;width:78px;height:50px;
border:1px solid var(--line);border-radius:11px;background:#fff;
}
.pays img{max-width:52px;max-height:28px;width:auto;height:auto}
/* ---------- faq ---------- */
.faq-groups{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.faq-col{min-width:0}
.faq-col details{
border:1px solid var(--line);border-radius:12px;background:var(--panel);
margin-bottom:10px;overflow:hidden;
}
.faq-col details[open]{border-color:rgba(245,158,11,.5);background:var(--panel-hi)}
.faq-col summary{
list-style:none;cursor:pointer;padding:15px 46px 15px 16px;position:relative;
color:var(--white);font-weight:600;font-size:15.5px;line-height:1.45;
}
.faq-col summary::-webkit-details-marker{display:none}
.faq-col summary::after{
content:"";position:absolute;right:18px;top:22px;width:9px;height:9px;
border-right:2px solid var(--amber);border-bottom:2px solid var(--amber);
transform:rotate(45deg);transition:transform .2s ease;
}
.faq-col details[open] summary::after{transform:rotate(-135deg);top:25px}
.faq-col summary:hover{color:var(--amber-2)}
.faq-col summary strong{font-weight:600;color:inherit}
.qa__a{padding:0 16px 16px}
.qa__a p{margin:0;font-size:15.5px;line-height:1.72}
/* ---------- mobile play figure ---------- */
/* The render is a 319x405 phone cut-out with a transparent surround, so it gets
no card frame: a soft amber/violet bloom plus a drop-shadow seat it on the
section fill the way .hero__card seats its media. Never scaled past its
natural 319px, never cropped, ratio always intrinsic. width/height on the
plus height:auto reserve the box before decode, so the prose below it
never moves. The bloom is wider than the figure on purpose; .sec already
clips with overflow:hidden, so it cannot reach the page edge. */
.mplay{display:grid;gap:clamp(16px,2.6vw,26px)}
.mshot{position:relative;margin:0;justify-self:center;width:100%;max-width:319px}
.mshot::before{
content:"";position:absolute;z-index:0;left:50%;top:52%;
transform:translate(-50%,-50%);width:114%;height:76%;border-radius:50%;
background:radial-gradient(closest-side,rgba(245,158,11,.2),rgba(157,78,221,.14) 60%,transparent 78%);
}
.mshot img{
position:relative;z-index:1;display:block;width:100%;height:auto;
filter:drop-shadow(0 20px 30px rgba(0,0,0,.6));
}
.mplay__txt{min-width:0}
.mplay__txt>:last-child{margin-bottom:0}
@media (min-width:760px){
/* Two columns from 760px up: prose keeps the reading measure on the left,
the phone sits beside it. Explicit row/column placement, so the figure can
stay first in source order and stack above the prose on a phone. */
.mplay{grid-template-columns:minmax(0,1fr) clamp(250px,25vw,300px);gap:clamp(22px,3vw,36px);align-items:start}
.mplay__txt{grid-column:1;grid-row:1}
.mshot{grid-column:2;grid-row:1;justify-self:end}
}
/* ---------- session promo popup ---------- */
/* Open state is the `hidden` attribute and nothing else. No opacity, transform,
visibility or rAF step gates it, so a dropped frame can never leave a panel
that is in the hit tree but invisible; closed, the layer is out of the box
tree AND pointer-events:none, so it cannot swallow a click either way.
Body scroll is deliberately not locked: no scrollbar reflow means no layout
shift, and no close path can ever strand the page unscrollable. */
.pop{
position:fixed;inset:0;z-index:1200;
display:flex;align-items:center;justify-content:center;
padding:clamp(14px,4vw,32px);
background:rgba(4,5,12,.72);
backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
}
.pop[hidden]{display:none;pointer-events:none}
.pop[hidden] .pop__panel{pointer-events:none}
.pop__scrim{position:absolute;inset:0;cursor:pointer}
.pop__panel{
position:relative;isolation:isolate;pointer-events:auto;
width:min(440px,100%);max-height:calc(100vh - 28px);max-height:calc(100dvh - 28px);
overflow-x:hidden;overflow-y:auto;text-align:center;
padding:clamp(58px,9vw,66px) clamp(20px,4.4vw,32px) clamp(24px,4.4vw,32px);
border:1px solid rgba(245,158,11,.45);border-radius:18px;
background-color:var(--panel);
background-image:url(../img/popup/caswino-casino-australia-offer-popup.webp);
background-size:cover;background-position:68% 45%;background-repeat:no-repeat;
box-shadow:0 40px 70px -30px rgba(0,0,0,.95);
}
/* Scrim over the artwork. Sits above the panel background and below its content
the same way .hero__card::before does. The flat 0.9 wash that used to sit here
reduced the art to texture, so it was replaced by a light overall veil plus a
soft elliptical plate that only covers the copy: measured against the
brightest pixel each crop can show, the headline clears 8:1 and the sub 5.8:1,
and the artwork now reads at ~1.6x its previous luminance. */
.pop__panel::before{
content:"";position:absolute;inset:0;z-index:-1;
background:
radial-gradient(420px 240px at 88% 6%,rgba(245,158,11,.14),transparent 68%),
radial-gradient(380px 260px at 6% 98%,rgba(157,78,221,.16),transparent 70%),
radial-gradient(115% 54% at 50% 34%,rgba(6,7,16,.78) 0%,rgba(6,7,16,.68) 48%,rgba(6,7,16,.16) 80%,transparent 100%),
linear-gradient(170deg,rgba(6,7,16,.22),rgba(6,7,16,.16) 46%,rgba(6,7,16,.44));
}
.pop__panel::after{
content:"";position:absolute;left:0;right:0;top:0;height:3px;
background:linear-gradient(90deg,var(--amber),var(--violet));
}
.pop__x{
position:absolute;top:10px;right:10px;
width:44px;height:44px;min-width:44px;min-height:44px;
display:flex;align-items:center;justify-content:center;
border:1px solid var(--line);border-radius:11px;
background:rgba(6,7,16,.62);color:var(--white);
font-family:inherit;font-size:26px;line-height:1;cursor:pointer;
transition:color .18s ease,border-color .18s ease,background .18s ease;
-webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.pop__x:hover{color:var(--amber-2);border-color:var(--amber);background:rgba(6,7,16,.82)}
/* Shadows are belt and braces on top of the plate above, not the thing carrying
the contrast: the measured ratios hold with them switched off. */
.pop__ttl{
color:var(--white);font-weight:700;letter-spacing:-.3px;
font-size:clamp(22px,4.6vw,27px);line-height:1.2;
text-shadow:0 2px 10px rgba(4,5,12,.85),0 1px 2px rgba(4,5,12,.7);
}
.pop__sub{margin-top:10px;font-size:15.5px;line-height:1.6;color:var(--txt);text-shadow:0 1px 6px rgba(4,5,12,.9)}
.pop__cta{margin-top:22px;width:100%}
/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line-soft);background:rgba(10,12,24,.7);margin-top:20px}
.foot__in{
max-width:var(--shell);margin:0 auto;padding:30px 20px 40px;
display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
}
.foot img{width:124px;height:auto;opacity:.9}
.foot__note{display:flex;align-items:center;gap:12px;font-size:13.5px;color:var(--dim)}
.age{
flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
width:38px;height:38px;border-radius:50%;border:2px solid var(--amber);
color:var(--amber-2);font-weight:700;font-size:13px;
}
/* ---------- responsive ---------- */
@media (max-width:1080px){
[id]{scroll-margin-top:calc(var(--head) + 78px)}
.shell{grid-template-columns:1fr;gap:20px;margin-top:34px}
/* Contents rail on narrow viewports: one scrolling row of chips with the
native scrollbar suppressed and soft edge fades standing in for it.
Two rows would cost four-plus rows of height at 360px for 16 anchors, and
a styled scrollbar is invisible on touch, where the overflow hint is most
needed. The fades are toggled from scroll position, so the affordance is
only shown when there is something to scroll to. */
/* overflow must stay non-visible here: it is what keeps the chip row from
sizing the grid track to its own content and pushing the page sideways.
The fade overlays live inside the padding box, so nothing is clipped. */
.rail{position:sticky;top:var(--head);z-index:500;max-height:none;overflow:hidden;min-width:0;
margin:0 -20px;padding:10px 20px;background:rgba(6,7,16,.92);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
border-bottom:1px solid var(--line-soft)}
.rail::before,.rail::after{
content:"";position:absolute;top:1px;bottom:1px;width:42px;z-index:2;
pointer-events:none;opacity:0;transition:opacity .18s ease;
}
.rail::before{left:0;background:linear-gradient(90deg,#060710 8%,rgba(6,7,16,0))}
.rail::after{right:0;background:linear-gradient(270deg,#060710 8%,rgba(6,7,16,0))}
.rail.can-left::before{opacity:1}
.rail.can-right::after{opacity:1}
.rail__box{padding:0;border:0;background:transparent;overflow-x:auto;overflow-y:hidden;
-webkit-overflow-scrolling:touch;scroll-padding-inline:46px;
scrollbar-width:none;-ms-overflow-style:none}
.rail__box::-webkit-scrollbar{width:0;height:0;display:none}
.rail__list{grid-auto-flow:column;grid-auto-columns:max-content;gap:8px;padding:2px 0}
.rail__list a{border:1px solid var(--line);border-left-width:1px;border-radius:999px;white-space:nowrap;padding:7px 14px;font-size:13px}
.rail__list a:hover{border-left-color:var(--amber)}
.rail__list a.is-active{
color:#160f02;font-weight:700;background:linear-gradient(140deg,var(--amber-2),var(--amber));
border-color:rgba(245,158,11,.9);border-left-color:rgba(245,158,11,.9);
box-shadow:0 6px 16px -8px rgba(245,158,11,.9);
}
.grid-games{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
.grid-games{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:700px){
/* four live tiles, so the phone layout is a full 2x2 and never a 3+1 orphan */
.grid-live{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media (max-width:640px){
/* Phone hero. The card is portrait (320x461 at 360px) while the art is 800x420,
so covering the whole card would show a 36%-wide slice and cut the figure in
half. Instead the media is a band across the top: the scale is then driven by
its height, the full 420px of image height is always in frame, and anchoring
right keeps the woman whole with the chest still reading beside her. The mask
dissolves the band into the card fill, so there is no seam where it ends.
Matches the switch exactly. */
.hero__media{
bottom:auto;height:clamp(260px,76vw,340px);
-webkit-mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);
mask-image:linear-gradient(180deg,#000 0,#000 78%,transparent 100%);
}
.hero__media img{object-position:100% 50%}
.hero__card::before{
background:linear-gradient(180deg,
rgba(6,7,16,.08) 0%,rgba(6,7,16,.14) 34%,rgba(6,7,16,.34) 56%,
rgba(6,7,16,.80) 78%,rgba(6,7,16,.93) 100%);
}
.hero__body::before{
background:radial-gradient(78% 110% at 30% 40%,
rgba(6,7,16,.54) 0%,rgba(6,7,16,.46) 52%,rgba(6,7,16,.14) 92%,transparent 100%);
}
}
@media (max-width:860px){
.head__in{gap:12px}
.burger{display:flex}
/* Open state is a class on the panel driven by `display` alone. No opacity,
transform or visibility animation gates it: those can stall (throttled
compositing, interrupted transitions) and leave a panel that is in the hit
tree but invisible. Either the panel is laid out and clickable or it is not
in the box tree at all. */
.nav{
position:absolute;left:0;right:0;top:100%;margin:0;display:none;z-index:1000;
flex-direction:column;align-items:stretch;gap:0;
background:#0b0d1a;border-bottom:1px solid var(--line);padding:10px 20px 18px;
box-shadow:0 26px 44px -24px rgba(0,0,0,.95);
}
.nav.is-open{display:flex}
.nav__list{flex-direction:column;align-items:stretch;gap:0}
.nav__list li{border-bottom:1px solid var(--line-soft)}
.nav__link{display:block;padding:14px 0;font-size:15px;min-height:46px;line-height:20px}
.head__cta{margin-top:14px}
.head__cta .btn{flex:1 1 0;padding:13px 10px}
.facts{grid-template-columns:1fr 1fr}
.facts li:nth-child(3){border-left:0}
.facts li:nth-child(n+3){border-top:1px solid var(--line-soft)}
.faq-groups{grid-template-columns:1fr;gap:12px}
.hero__body{max-width:none}
}
@media (max-width:560px){
body{font-size:15.5px}
.doc p,.doc ul li{font-size:16px}
.grid-games{grid-template-columns:repeat(2,1fr);gap:9px}
.grid-live{grid-template-columns:repeat(2,1fr);gap:10px}
.sec{border-radius:14px}
.promo{padding:18px}
.promo .btn{width:100%}
/* column direction turns flex-basis into a height, so the text block has to
drop back to auto or it reserves 300px of empty space above the buttons */
.endcta{flex-direction:column;align-items:stretch;border-radius:14px}
.endcta__txt{flex:0 0 auto}
.endcta__go{width:100%}
.endcta__go .btn{flex:1 1 100%;width:100%}
.foot__in{flex-direction:column;align-items:flex-start;text-align:left}
}
@media (max-width:400px){
.grid-games{grid-template-columns:repeat(2,1fr);gap:8px}
.gcard__cap{padding:8px 8px 7px}
.gcard__play{margin:auto 8px 8px;letter-spacing:.1em}
.brand img{width:116px}
.facts b{font-size:17px}
.pays li{width:70px;height:46px}
.provs li{height:46px;padding:0 13px}
}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*{transition:none!important;animation:none!important}
/* With the animation off the track would sit at translate 0 with half its
logos clipped away, so the strip falls back to a plain scrollable row: one
set only, no mask, and the same slim amber bar the rail and tables use. */
.pmarq{
overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
-webkit-mask-image:none;mask-image:none;
scrollbar-width:thin;scrollbar-color:rgba(245,158,11,.75) rgba(255,255,255,.05);
}
.pmarq::-webkit-scrollbar{height:8px}
.pmarq::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:8px}
.pmarq::-webkit-scrollbar-thumb{
background:linear-gradient(180deg,var(--amber-2),var(--amber));
border:2px solid transparent;background-clip:padding-box;border-radius:8px;
}
.pmarq__track{width:auto;transform:none;will-change:auto}
.pmarq .provs[aria-hidden="true"]{display:none}
}