/* FT.Games New-UI homepage (guest view, FT_GAMES_ENABLE_NEW_UI_ROOT).
   Ported from the designer reference; assets live under static/assets/new-ui/. */
/* =========================================================
   1. DESIGN TOKENS  (developer: extract these)
   ========================================================= */
:root{
  /* brand */
  --pink:#ee1b63;          /* logo magenta — primary */
  --pink-600:#d1105a;
  --pink-100:#ffe4ee;
  --pink-glow:rgba(238,27,99,.35);
  --navy:#0f1b3d;          /* dark hero surface */
  --navy-2:#162552;
  --navy-3:#1e2f66;
  --green:#12b37c;
  --green-100:#dcf7ec;
  --red:#ff3b5c;
  --orange:#ff7a1a;
  --gold:#f5b533;
  --gold-2:#ffd66b;
  --purple:#7c3aed;
  --cyan:#17c3e6;

  /* neutrals */
  --bg:#f3f5fb;
  --surface:#ffffff;
  --surface-2:#f7f8fc;
  --line:#e6e9f2;
  --text:#0f172a;
  --text-2:#475569;
  --muted:#8a94a8;

  /* type */
  --font-head:"Poppins",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;

  /* shape */
  --r-xs:8px; --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.05),0 4px 14px -6px rgba(15,23,42,.08);
  --shadow-md:0 10px 30px -12px rgba(15,23,42,.18);
  --shadow-lg:0 30px 60px -24px rgba(15,27,61,.45);
  --shadow-pink:0 12px 30px -10px var(--pink-glow);

  /* layout */
  --sidebar-w:216px;
  --sidebar-rail:76px;
  --header-h:68px;
  --content-max:1320px;
  --gap:20px;
}

/* =========================================================
   2. RESET / BASE
   ========================================================= */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* the header is sticky, so anchor jumps must land below it, not underneath it */
.content>section,#ticketsBox,#wofBox,#slider{scroll-margin-top:86px}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 var(--font-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-head);margin:0;line-height:1.15;letter-spacing:-.01em}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--pink);outline-offset:2px;border-radius:6px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.icon{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* =========================================================
   3. APP SHELL  — sticky left sidebar + header
   ========================================================= */
.app{display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:40;transition:width .25s}
/* the inner column is what scrolls, so the handle can keep overhanging the edge */
.side-scroll{flex:1;min-height:0;display:flex;flex-direction:column;padding:16px 14px 14px;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.side-scroll::-webkit-scrollbar{width:6px}
.side-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.side-scroll::-webkit-scrollbar-track{background:transparent}
.brand{display:flex;align-items:center;gap:10px;padding:2px 8px 14px;flex:none}
.brand img{height:34px}
.nav{display:flex;flex-direction:column;gap:4px}
/* the old muted grey sat at ~3:1 on white; this reads, and the rule makes it a divider */
.nav-label{display:flex;align-items:center;gap:9px;padding:11px 10px 5px;
  font:800 10px var(--font-head);letter-spacing:.14em;text-transform:uppercase;color:var(--text-2)}
.nav-label::after{content:"";flex:1;height:1px;background:var(--line)}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);font-weight:600;color:var(--text-2);position:relative;transition:background .15s,color .15s}
.nav a:hover{background:var(--surface-2);color:var(--text)}
.nav a.active{background:linear-gradient(90deg,var(--pink-100),transparent);color:var(--pink)}
.nav a.active::before{content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--pink)}
.nav .pill{margin-left:auto;font-size:10px;font-weight:700;padding:2px 6px;border-radius:999px;background:var(--pink);color:#fff;white-space:nowrap;flex:none}
.nav .pill.green{background:var(--green)}
.nav .pill.gold{background:var(--gold);color:var(--navy)}
/* a label, not a count: the other pills all carry a number */
.nav .pill.new{background:var(--purple);color:#fff}
/* ---- LINK & EARN ----------------------------------------------------------
   A dark reward card dropped into the light sidebar, so the offer reads as a prize
   rather than another settings row. It leads with one message (the spins on offer),
   then the single way to claim, split by the same dotted perforation the hero ticket
   boxes use. Removes itself once linked. */
.nav-perks{position:relative;flex:none;margin:11px 8px 2px;padding:11px 11px 10px;border-radius:15px;overflow:hidden;
  background:radial-gradient(125% 105% at 100% 0%,#3d1149 0%,#1a1f52 46%,#0b1233 100%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 14px 28px -18px rgba(11,18,51,.95),inset 0 1px 0 rgba(255,255,255,.08);
  transition:opacity .3s,transform .3s}
/* gold bloom in the corner, clipped by the card */
.nav-perks::before{content:"";position:absolute;width:88px;height:88px;border-radius:50%;right:-32px;top:-36px;
  background:radial-gradient(circle,rgba(245,181,51,.5),transparent 70%);pointer-events:none}
.nav-perks.gone{opacity:0;transform:translateY(-6px)}

.np-kicker{position:relative;display:flex;align-items:center;gap:6px;
  font:800 9px var(--font-head);letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.np-kicker .icon{width:12px;height:12px;flex:none;color:var(--gold-2)}
/* the one message: what is on the table */
.np-prize{position:relative;display:flex;align-items:center;gap:8px;margin-top:5px}
.np-prize b{font:800 31px/1 var(--font-head);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:var(--gold-2);text-shadow:0 0 20px rgba(245,181,51,.45)}
.np-prize em{font-style:normal;font:800 9px/1.2 var(--font-head);letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.75)}
/* same perforation language as the hero ticket boxes */
.np-perf{height:2px;margin:9px -11px 8px;
  background-image:radial-gradient(circle,rgba(255,255,255,.42) 1.1px,transparent 1.5px);
  background-size:7px 2px;background-repeat:repeat-x;
  -webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}

.np-row{position:relative;display:flex;align-items:center;gap:7px;width:100%;min-height:36px;padding:6px 5px;
  border-radius:10px;text-align:left;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
  transition:background .18s,border-color .18s,transform .18s}
.np-row+.np-row{margin-top:5px}
.np-row:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);transform:translateX(2px)}
.np-row:active{transform:translateX(2px) scale(.99)}
.np-row:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.np-ic{width:22px;height:22px;flex:none;border-radius:7px;display:grid;place-items:center;color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35)}
.np-ic .icon{width:12px;height:12px}
.np-ic.mail{background:linear-gradient(150deg,#ff8ab4,var(--pink))}
.np-ic.tg{background:linear-gradient(150deg,#55c9f5,#1d8fd1)}
.np-t{min-width:0;flex:1}
/* one line, always: the slot is ~62px and a wrap makes the row grow */
.np-t b{display:block;font:700 11.5px/1.2 var(--font-body);color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np-t small{display:none}
.np-go{flex:none;display:inline-flex;align-items:center;gap:3px;
  font:800 10px var(--font-head);color:var(--gold-2);white-space:nowrap}
.np-go .icon{width:10px;height:10px;transition:transform .18s}
.np-row:hover .np-go .icon{transform:translateX(2px)}
/* claimed: colour plus an icon and a word, never colour alone */
.np-row.done{cursor:default;transform:none;background:rgba(47,224,138,.14);border-color:rgba(47,224,138,.42)}
.np-row.done .np-ic{background:linear-gradient(150deg,#5ff0b0,var(--green))}
.np-row.done .np-t b{color:#8ff0c4}
.np-row.done .np-go{color:#8ff0c4}
.np-row.done:hover{background:rgba(47,224,138,.14);border-color:rgba(47,224,138,.42);transform:none}
/* the icon rail has no room for it */
.app.is-collapsed .nav-perks{display:none}
@media (min-width:721px) and (max-width:1240px){.app:not(.is-expanded) .nav-perks{display:none}}
/* in the phone drawer these rows are tapped, not clicked, so they take the 44px target */
@media (max-width:720px){
  .np-row{min-height:44px;padding:7px 6px}
  .np-ic{width:24px;height:24px;border-radius:8px}
  .np-ic .icon{width:13px;height:13px}
}
@media (prefers-reduced-motion:reduce){.nav-perks,.np-row,.np-go .icon{transition:none}}

/* collapse handle — appears on sidebar hover, toggles the icon-only rail */
.rail-toggle{position:absolute;top:64px;right:-13px;width:26px;height:26px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm);display:grid;place-items:center;color:var(--text-2);opacity:0;transform:translateX(-6px);transition:opacity .2s,transform .25s cubic-bezier(.16,1,.3,1),color .15s,border-color .15s;z-index:41}
.sidebar:hover .rail-toggle,.rail-toggle:focus-visible{opacity:1;transform:none}
.rail-toggle:hover{color:var(--pink);border-color:var(--pink)}
.rail-toggle .icon{width:15px;height:15px;transition:transform .25s}
.app.is-collapsed .rail-toggle .icon{transform:rotate(180deg)}
/* Icon-only rail. Driven by CSS so it works without JS:
   · forced on by the handle  → .app.is-collapsed
   · automatic below 1240px   → unless the handle forced it open (.is-expanded)
   The declarations are intentionally repeated for the two triggers, because a class
   selector and a media query cannot share one rule block. */
.app.is-collapsed{grid-template-columns:var(--sidebar-rail) 1fr}
/* the padding lives on .side-scroll, not .sidebar: 76px rail − 2×8px = 60px for the icons */
.app.is-collapsed .side-scroll{padding:16px 8px 14px}
.app.is-collapsed .brand{justify-content:center;padding:2px 0 10px}
/* the cube mark is the left 51/56 of the logo: a square window on the left shows exactly it */
.app.is-collapsed .brand img{flex:none;height:32px;width:32px;object-fit:cover;object-position:left center}
.app.is-collapsed .nav a{justify-content:center;padding:12px}
.app.is-collapsed .nav a span,.app.is-collapsed .nav .pill,.app.is-collapsed .nav-label,.app.is-collapsed .age span{display:none}
.app.is-collapsed .nav a.active::before{left:-8px}
.app.is-collapsed .age{justify-content:center}
.app.is-collapsed .sidebar-foot{padding:14px 0 0}
@media (min-width:721px) and (max-width:1240px){
  .app:not(.is-expanded){grid-template-columns:var(--sidebar-rail) 1fr}
  .app:not(.is-expanded) .side-scroll{padding:16px 8px 14px}
  .app:not(.is-expanded) .brand{justify-content:center;padding:2px 0 10px}
  .app:not(.is-expanded) .brand img{flex:none;height:32px;width:32px;object-fit:cover;object-position:left center}
  .app:not(.is-expanded) .nav a{justify-content:center;padding:12px}
  .app:not(.is-expanded) .nav a span,.app:not(.is-expanded) .nav .pill,.app:not(.is-expanded) .nav-label,.app:not(.is-expanded) .age span{display:none}
  .app:not(.is-expanded) .nav a.active::before{left:-8px}
  .app:not(.is-expanded) .age{justify-content:center}
  .app:not(.is-expanded) .sidebar-foot{padding:14px 0 0}
  .app:not(.is-expanded) .rail-toggle .icon{transform:rotate(180deg)}
}
.sidebar-foot{flex:none;margin-top:auto;padding:11px 8px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.age{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted)}
.age b{background:var(--pink);color:#fff;border-radius:6px;padding:2px 6px;font-size:10px}

.main{min-width:0}
.header{position:sticky;top:0;z-index:30;height:var(--header-h);display:flex;align-items:center;gap:14px;padding:0 28px;background:rgba(243,245,251,.85);backdrop-filter:blur(14px);border-bottom:1px solid transparent}
.header.scrolled{border-color:var(--line)}
.burger{display:none;width:42px;height:42px;border-radius:10px;background:var(--surface);border:1px solid var(--line);place-items:center}
.search{flex:1;max-width:420px;display:flex;align-items:center;gap:10px;height:44px;padding:0 14px;background:var(--surface);border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.search input{flex:1;border:0;outline:0;background:none;font:inherit;color:var(--text)}
.search kbd{font:600 11px var(--font-body);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--muted)}
.hright{margin-left:auto;display:flex;align-items:center;gap:10px}
/* read-outs, not actions: outlined and squarer, so they never read as buttons
   (every real button on the page is a filled pill) */
.chip{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 13px;border-radius:11px;
  font-weight:700;font-size:13px;white-space:nowrap;background:transparent;border:1px solid var(--line)}
.chip.price{color:var(--text-2);font-variant-numeric:tabular-nums}
.chip.price i{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(18,179,124,.2)}
.chip.balance{color:var(--text);border-color:rgba(238,27,99,.35);font-variant-numeric:tabular-nums}
.chip.balance small{color:var(--pink);font-weight:800}
/* the header price chip is hidden below 900px, so the drawer carries it on phones */
.nav-price{display:none;align-items:center;gap:8px;margin:0 14px 12px;padding:9px 12px;border-radius:11px;
  border:1px solid var(--line);font:700 12px var(--font-body);color:var(--text-2);font-variant-numeric:tabular-nums}
.nav-price i{width:8px;height:8px;flex:none;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(18,179,124,.2)}
/* the drawer is a fixed 216px and .side-scroll clips overflow, so nowrap pushed a
   long rate ("1 $FUN = $0.00875850") past the pill's right edge. Let it wrap: the
   rate itself has no spaces, so it stays intact and only moves to a second line. */
.nav-price span{white-space:normal}
.nav-price b{color:var(--text);font-weight:800}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;font-weight:700;font-size:14px;transition:transform .15s,box-shadow .15s,background .15s;white-space:nowrap}
.btn:active{transform:translateY(1px) scale(.99)}
.btn-primary{background:var(--pink);color:#fff;box-shadow:var(--shadow-pink)}
.btn-primary:hover{background:var(--pink-600);box-shadow:0 16px 34px -10px var(--pink-glow)}
.btn-light{background:#fff;color:var(--navy)}
.btn-light:hover{background:#fff4f8}
.btn-ghost{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}
.btn-green{background:var(--green);color:#fff}
/* money actions (deposit): an orange gradient, the only orange CTA on the page, so the
   one action that moves money never blends into the pink play/claim buttons.
   Stops are biased deep so white label text stays legible across the fill. */
.btn-deposit{background:linear-gradient(135deg,#f76ba6 0%,#e01e6e 45%,#a80d4a 100%);color:#fff;
  text-shadow:0 1px 2px rgba(90,4,35,.4);box-shadow:0 12px 30px -10px rgba(224,30,110,.7)}
.btn-deposit:hover{background:linear-gradient(135deg,#ff7fb3 0%,#f22b7d 45%,#bf1055 100%);
  box-shadow:0 16px 34px -10px rgba(224,30,110,.8)}
.btn-sm{height:36px;padding:0 14px;font-size:13px}
.btn-icon{width:40px;height:40px;padding:0;border-radius:50%;background:var(--surface);border:1px solid var(--line);color:var(--text-2);
  display:grid;place-items:center;line-height:0}
/* the chevron glyphs are drawn 0.5 units off-centre in their 24-unit box, so nudge
   them back for true optical centring in the circle */
.btn-icon .icon{width:19px;height:19px;transform:translateX(var(--nudge,0))}
#rowPrev .icon,#fgPrev .icon{--nudge:.4px}
#rowNext .icon,#fgNext .icon{--nudge:-.4px}
.btn-icon:hover{color:var(--pink);border-color:var(--pink)}
.btn-icon:disabled{opacity:.4;cursor:default}
.avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--navy),var(--navy-3));display:grid;place-items:center;color:#fff;border:2px solid #fff;box-shadow:var(--shadow-sm);transition:transform .15s}
.avatar:hover{transform:scale(1.05)}
/* account dropdown (z-scale: header 30 · menu 50) */
.user{position:relative;flex:none}
.user-menu{position:absolute;right:0;top:calc(100% + 10px);z-index:50;width:186px;padding:6px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 20px 44px -18px rgba(15,23,42,.35),0 2px 6px rgba(15,23,42,.06);display:flex;flex-direction:column;gap:2px;transform-origin:top right;animation:menuIn .18s cubic-bezier(.16,1,.3,1)}
@keyframes menuIn{from{opacity:0;transform:scale(.96) translateY(-6px)}}
.user-menu::before{content:"";position:absolute;top:-6px;right:14px;width:12px;height:12px;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg);border-radius:2px 0 0 0}
.user-menu a,.user-menu button{display:flex;align-items:center;gap:11px;width:100%;height:44px;padding:0 11px;border-radius:10px;font-weight:600;font-size:13px;color:var(--text-2);text-align:left;transition:background .12s,color .12s}
.user-menu a:hover,.user-menu button:hover{background:var(--surface-2);color:var(--text)}
.user-menu .icon{width:17px;height:17px;color:var(--muted)}
.user-menu a:hover .icon,.user-menu button:hover .icon{color:var(--pink)}
.user-menu .sep{height:1px;background:var(--line);margin:4px 8px}
.user-menu .danger{color:var(--red)}
.user-menu .danger:hover{background:#fff1f4;color:var(--red)}
.user-menu .danger:hover .icon,.user-menu .danger .icon{color:var(--red)}

.content{max-width:var(--content-max);margin:0 auto;padding:10px 28px 40px;display:flex;flex-direction:column;gap:34px}
.section-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.section-head h2{font-size:20px;display:flex;align-items:center;gap:10px}
.section-head h2 .mark{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;background:var(--pink)}
.section-head .sub{color:var(--muted);font-size:13px}
.section-head .tools{margin-left:auto;display:flex;gap:8px;align-items:center}
.link{color:var(--pink);font-weight:700;font-size:13px}
.link:hover{text-decoration:underline}
.live-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--red);text-transform:uppercase}
.live-tag i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--red)}
/* Live dots: the pulse ring is a scaled, fading copy (::before) under a redrawn dot (::after).
   transform/opacity run on the GPU; the old box-shadow pulse repainted the whole page every frame. */
.live-tag i::before,.half.j .mj i::before,.live-badge i::before,.fan-live i::before{content:"";position:absolute;inset:0;border-radius:50%;background:rgb(255,59,92);opacity:0}
.live-tag i::after,.half.j .mj i::after,.live-badge i::after,.fan-live i::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit}
.live-tag i::before{animation:liveDotRing 1.4s infinite}
@keyframes liveDotRing{0%,100%{transform:scale(1);opacity:.55}70%{transform:scale(3);opacity:0}}
@keyframes liveDotRingSm{0%,100%{transform:scale(1);opacity:.55}70%{transform:scale(3.333);opacity:0}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,59,92,.55)}70%{box-shadow:0 0 0 7px rgba(255,59,92,0)}}

/* =========================================================
   4. HERO — big slider + two 3D boxes
   ========================================================= */
.hero{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:var(--gap);height:238px}
.card3d{position:relative;border-radius:var(--r-xl);overflow:hidden;color:#fff;background:var(--navy);box-shadow:var(--shadow-lg);isolation:isolate;transform-style:preserve-3d;transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .4s}
.card3d::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -40px 60px -30px rgba(0,0,0,.5);pointer-events:none;z-index:3}
.card3d:hover{box-shadow:0 40px 70px -26px rgba(15,27,61,.6)}

/* slider */
.slider{--i:0}
.slides{position:absolute;inset:0}
.slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr;opacity:0;transform:scale(1.03);transition:opacity .7s ease,transform .9s ease;pointer-events:none}
/* the whole promo slide opens the detail popup; Play Now and the dots opt out */
.slide.is-active.promo{cursor:pointer}
.slide.is-active{opacity:1;transform:none;pointer-events:auto}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center}
/* the guest art's <picture> wrapper must not become a grid row: it took a share of the height and
   pushed the copy ~14px below centre */
.slide picture{position:absolute;inset:0}
/* dark fade keeps copy readable; art stays visible on the right */
.slide .shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(9,17,40,.98) 0%,rgba(9,17,40,.95) 40%,rgba(9,17,40,.8) 70%,rgba(9,17,40,.62) 100%)}
/* 46px side gutters keep every row clear of the edge arrows */
.slide .copy{position:relative;z-index:2;height:100%;padding:18px 46px 16px;display:flex;flex-direction:column;justify-content:center;gap:12px}
/* the emoji tile was decoration and it crowded the copy out of the card */
.slide .ico{display:none}
/* the CTA sits right, vertically centred against the wagered bar. It clears the
   bottom-right dots because row1 no longer carries the emoji tile or the lead-in line. */
.slide .row3{align-items:center;gap:18px}
.slide .row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.slide .row1{flex-wrap:nowrap;padding-right:150px} /* keeps clear of the promo clock, top-right */
.slide .row3 .cta{flex:none;margin-left:auto}
.slide .ico{width:44px;height:44px;flex:none;border-radius:12px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;font-size:22px;box-shadow:inset 0 0 18px var(--ico-glow,rgba(255,122,26,.3))}
.slide .txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.slide :is(h1,h2){font-size:clamp(16px,1.35vw,18px);font-weight:700;line-height:1.2;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.slide :is(h1,h2) em{font-style:normal;color:#2fe08a}
.slide :is(h1,h2) em.orange{color:#ffb15c}
.slide p{margin:0;color:rgba(255,255,255,.72);font-size:13px}
.slide p b{color:#fff}
.slide .cta{height:40px;padding:0 18px;font-size:13px}
/* the deadline is the reason to act now, so it gets the loudest corner */
.promo-clock{position:absolute;z-index:4;top:12px;right:14px;display:inline-flex;align-items:center;gap:6px;
  height:26px;padding:0 11px;border-radius:999px;white-space:nowrap;
  background:linear-gradient(135deg,#ffd06b 0%,#ffa62b 55%,#ff8a1f 100%);color:#3a2100;
  box-shadow:0 10px 26px -10px rgba(255,138,31,.85)}
.promo-clock .icon{width:12px;height:12px;flex:none;stroke-width:2.3}
.promo-clock span{font:800 8.5px/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase;opacity:.78}
.promo-clock b{font:800 11.5px/1 var(--font-head);font-variant-numeric:tabular-nums}

/* ---- FLASH OFFER banner (slide 1, logged in) ----
   Same skeleton as the Plinko slide — headline, the deadline in the loud top-right corner, and a
   wagered bar + More details + CTA along the bottom — so the two offers read as one family.
   The bar carries a tick for each tier. The whole slide opens #flashModal. */
.slide.is-active.flash{cursor:pointer}
.slide.flash .shade{background:linear-gradient(90deg,rgba(9,17,40,.97) 0%,rgba(9,17,40,.92) 44%,rgba(9,17,40,.62) 70%,rgba(9,17,40,.2) 100%)}
.slide.flash .row1{padding-right:0}
.fo-tag{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:999px;
  background:linear-gradient(135deg,#ff4d8d,#d1105a);color:#fff;font:800 10px/1 var(--font-head);letter-spacing:.09em;
  text-transform:uppercase;white-space:nowrap;box-shadow:0 8px 20px -8px rgba(238,27,99,.8)}
.fo-tag i{width:6px;height:6px;flex:none;border-radius:50%;background:#fff}
.slide .fo-title{display:block;margin:4px 0 0;font:800 clamp(18px,1.55vw,22px)/1.18 var(--font-head);letter-spacing:-.015em;color:#fff;white-space:normal}
.slide .fo-title em{font-style:normal;color:#ffd66b;white-space:nowrap}
.slide .fo-sub{margin-top:1px;max-width:320px;font-size:12.5px;line-height:1.45;text-wrap:pretty}   /* no one-word last line */
/* the deadline: the same corner as the Plinko clock, in pink digit tiles like the popup */
.fo-clock{position:absolute;z-index:4;top:12px;right:14px;display:inline-flex;align-items:center;gap:3px;height:30px;padding:0 5px 0 10px;
  border-radius:999px;white-space:nowrap;color:#fff;background:rgba(9,17,40,.62);border:1px solid rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.fo-clock .icon{width:12px;height:12px;flex:none;fill:#ff6fa3;stroke:none}
.fo-ends{margin:0 4px 0 1px;font:800 8.5px/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase;opacity:.78}
.fo-clock b{min-width:22px;height:20px;padding:0 3px;display:grid;place-items:center;border-radius:6px;
  background:linear-gradient(160deg,#ff4d8d,#d1105a);font:800 11.5px/1 var(--font-head);font-variant-numeric:tabular-nums}
.fo-clock i{font-style:normal;font:800 11px/1 var(--font-head);opacity:.55}
/* the wagered bar with a tick per tier; ticks sit outside the bar's clip */
/* shrinks before it wraps, so the bar, More details and the CTA share one line when they can */
.slide .fo-prog{position:relative;flex:1 1 140px;width:auto;max-width:260px;min-width:0}
.fo-prog .bar i{min-width:6px}   /* a pink dot at zero, so the bar reads as a start line */
.fo-ticks{position:absolute;left:0;right:0;top:0;height:6px;pointer-events:none}
.fo-ticks i{position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--navy);border:1.5px solid rgba(255,255,255,.6);transform:translate(-50%,-50%)}
@media (max-width:720px){
  .slide.flash .fo-tag,.slide.flash .fo-sub{display:none}
  .slide .fo-title{margin:0;font-size:12px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .slide.flash .shade{background:linear-gradient(90deg,rgba(9,17,40,.96) 0%,rgba(9,17,40,.86) 55%,rgba(9,17,40,.5) 100%)}
  .fo-clock{position:static;height:20px;padding:0 3px 0 6px;gap:2px;border-radius:7px}
  .fo-clock .icon{width:10px;height:10px}
  .fo-ends{display:none}
  .fo-clock b{min-width:17px;height:14px;padding:0 2px;border-radius:4px;font-size:9.5px}
  .fo-clock i{font-size:9px}
}

/* ---- guest hero banner: the only hero card a visitor sees, full row, tall ----
   Copy on the left over deep navy, the art (controller, prize wheel, coins) on the right.
   One primary CTA (email, brand pink) and one secondary (Telegram, glass). */
.slide.guest-promo .shade{background:linear-gradient(90deg,rgba(27,31,82,.84) 0%,rgba(27,31,82,.72) 32%,rgba(27,31,82,.3) 52%,rgba(27,31,82,0) 68%)}   /* soft indigo, to suit the twilight art */
/* the hero art is 21:9 and the banner is wider (~3.3:1), so the art is shown whole and right-
   aligned rather than cropped top and bottom; its dark navy left side runs into the banner's navy
   under the copy (Sept 30 2026 art: wheel + the site's own games, from the game tiles) */
.slide.guest-promo img{object-fit:contain;object-position:right center}
/* the calm twilight art (Sept 30 2026: the client picked the soft mobile version "B" and asked for it
   on desktop too). The sky varies across the art, so no flat colour matches its edges: a heavily
   blurred copy of the same art fills the card behind it, and the art's own left and right edges
   fade into that. The art stays whole (contain), --art-r in from the right ("move that image to
   left a bit"). --art-l is where its left edge falls: card height x its 7:3 ratio. */
.slide.guest-promo{background:#2d3786}
@media (min-width:721px){
  .slide.guest-promo{--art-r:0px;--art-l:calc(100% - (clamp(270px,21vw,320px) + var(--ps-h,0px)) * 2.3333)}
  .slide.guest-promo::before{content:"";position:absolute;inset:-48px;background:url("assets/new-ui/banner-guest-hero.webp") left center/320% 130% no-repeat;   /* only the art's empty left sky, blurred: no island or coin smears */
    filter:blur(30px) saturate(1.05) brightness(.86)}
  .slide.guest-promo img{object-position:right var(--art-r) top 50%;   /* 4-value form: the 3-value one is invalid for object-position */
    -webkit-mask-image:linear-gradient(to right,transparent var(--art-l),#000 calc(var(--art-l) + 90px));
            mask-image:linear-gradient(to right,transparent var(--art-l),#000 calc(var(--art-l) + 90px))}   /* only the left edge fades; the right edge is the card edge, sharp */
}
/* the ambient video sits exactly over the still: same fit, same left-edge fade on desktop */
.slide.guest-promo .gp-vid{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:contain;object-position:right center;pointer-events:none}
@media (min-width:721px){
  .slide.guest-promo .gp-vid{-webkit-mask-image:linear-gradient(to right,transparent var(--art-l),#000 calc(var(--art-l) + 90px));
                                     mask-image:linear-gradient(to right,transparent var(--art-l),#000 calc(var(--art-l) + 90px))}
}
@media (max-width:720px){ .slide.guest-promo .gp-vid{object-fit:cover;object-position:center top} }
@media (prefers-reduced-motion:reduce){ .slide.guest-promo .gp-vid{display:none} }
/* art stays flush right (client, Sept 30 2026: "right side looks blur. dont move the hero banner to the left side");
   the island sits further left inside the art itself instead */
}
.slide.guest-promo .copy{justify-content:center;gap:0;max-width:min(58%,680px);padding:30px 48px}
.slide .gp-title{display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0;
  font:800 clamp(24px,2.1vw,32px)/1.1 var(--font-head);letter-spacing:-.02em;color:#fff}
.slide .gp-title span{display:block;text-wrap:balance}   /* no one-word last line */
.slide .gp-title em{font-style:normal;color:transparent;background:linear-gradient(100deg,#ffe08a 0%,#f5b533 55%,#ffd66b 100%);-webkit-background-clip:text;background-clip:text}
.slide .gp-sub{margin:12px 0 0;max-width:500px;font:500 14px/1.55 var(--font-body);color:rgba(255,255,255,.76)}
.gp-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.gp-or{display:none}   /* phones only: the shared "Sign up free with" caption over the two short buttons */
.gp-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:46px;padding:0 21px 0 17px;border-radius:999px;
  font:700 14px var(--font-head);letter-spacing:-.005em;color:#fff;white-space:nowrap;cursor:pointer;
  transition:transform .15s cubic-bezier(.2,.8,.2,1),box-shadow .2s,background .2s,border-color .2s}
.gp-btn .icon{width:17px;height:17px;stroke-width:2}
.gp-btn:active{transform:scale(.97)}
/* primary: the brand pink, darkened enough to carry white text (4.6:1 at the lightest stop) */
.gp-mail{border:0;background:linear-gradient(135deg,#e01e6e 0%,#c2125c 55%,#a80d4a 100%);box-shadow:0 16px 34px -14px rgba(238,27,99,.85),inset 0 1px 0 rgba(255,255,255,.22)}
.gp-mail:hover{box-shadow:0 20px 40px -14px rgba(238,27,99,.95),inset 0 1px 0 rgba(255,255,255,.22);transform:translateY(-1px)}
/* secondary: glass on the navy, the Telegram mark in its own blue */
.gp-tg{border:1.5px solid rgba(255,255,255,.34);background:rgba(255,255,255,.07);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.gp-tg:hover{border-color:rgba(255,255,255,.62);background:rgba(255,255,255,.13);transform:translateY(-1px)}
.tg-dot{width:23px;height:23px;flex:none;border-radius:50%;display:grid;place-items:center;background:#2aabee}
.tg-dot svg{width:13px;height:13px;fill:#fff;margin-left:-1px}
@media (prefers-reduced-motion:reduce){.gp-btn{transition:none}.gp-btn:hover{transform:none}}

/* a one-slide deck (the guest view) has nothing to page through */
.slider.is-single .slider-ui,.slider.is-single .slider-arrows{display:none}

/* the two rewards are the offer: pulled out of the sentence so they read at a glance */
.rwd{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 12px;border-radius:10px;
  white-space:nowrap;font:700 11.5px var(--font-body);color:rgba(255,255,255,.88);
  border:1px solid var(--rc);background:var(--rb)}
.rwd .icon{width:15px;height:15px;flex:none;color:var(--rt)}
.rwd b{font:800 15px/1 var(--font-head);font-variant-numeric:tabular-nums;color:var(--rt)}
.rwd.gold{--rc:rgba(245,181,51,.45);--rb:rgba(245,181,51,.14);--rt:#ffd66b}
.rwd.green{--rc:rgba(47,224,138,.42);--rb:rgba(47,224,138,.12);--rt:#2fe08a}

/* text link, underlined; the padding/margin pair gives it a 44px tap target
   without changing the row's height */
.more-link{font:700 11px var(--font-body);color:rgba(255,255,255,.8);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px;
  text-decoration-color:rgba(255,255,255,.45);
  display:inline-flex;align-items:center;padding:15px 4px;margin:-15px 0;
  transition:color .15s,text-decoration-color .15s}
.more-link:hover{color:#fff;text-decoration-color:#fff}
.more-link:focus-visible{outline:2px solid var(--pink-soft);outline-offset:3px;border-radius:4px}
.segs{display:flex;gap:2px;flex:none}
.segs i{width:5px;height:8px;border-radius:2px;background:rgba(255,255,255,.14)}
.segs i.on{background:#2fe08a}.segs i.goal{background:var(--orange);box-shadow:0 0 8px var(--orange)}
.pillrow{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill-dark{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.04);font-size:11px;font-weight:700;white-space:nowrap;color:rgba(255,255,255,.85)}
.pill-dark b{color:#fff;font-variant-numeric:tabular-nums}
.pill-dark.green{color:#2fe08a;border-color:rgba(47,224,138,.4);background:rgba(47,224,138,.1)}
.pill-dark.live{height:24px;padding:0 9px;border-color:rgba(255,59,92,.45);background:rgba(255,59,92,.12)}
.prog{width:100%;max-width:380px}
.prog .bar{height:6px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.prog .bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--gold),#ff9a3c);box-shadow:0 0 12px rgba(245,181,51,.6);animation:grow 1.4s cubic-bezier(.2,.8,.2,1) both}
.prog .bar i.pink{background:linear-gradient(90deg,var(--pink),#ff7ab0);box-shadow:0 0 12px var(--pink-glow)}
@keyframes grow{from{width:0}}
.prog .meta{display:flex;justify-content:space-between;font-size:11px;color:rgba(255,255,255,.72);margin-top:5px}
.prog .meta b{color:#fff}
.stat-row{display:flex;gap:10px;flex-wrap:wrap}
.stat{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);min-width:104px}
.stat small{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.65);font-weight:700}
.stat b{font-size:15px;font-family:var(--font-head)}
.stat b.gold{color:var(--gold-2)}
.stat.timer b{font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* nav cluster: dots · count, top-right */
/* slider chrome sits bottom-right; the top-right corner belongs to the promo clock */
.slider-ui{position:absolute;z-index:4;bottom:11px;right:14px;display:flex;align-items:center;gap:8px;padding:4px 10px;border-radius:999px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px)}
.dots{display:flex;gap:5px}
.dots button{width:6px;height:6px;border-radius:999px;background:rgba(255,255,255,.35);transition:width .3s,background .3s}
.dots button.is-active{width:17px;background:#fff}
.slide-count{font-size:9.5px;font-weight:700;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* arrows ride the left/right edges, vertically centred, revealed on hover */
.slider-arrows{position:absolute;inset:0;z-index:5;pointer-events:none}
.slider-arrows button{position:absolute;top:50%;width:34px;height:34px;border-radius:50%;background:rgba(9,17,40,.6);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.24);color:#fff;display:grid;place-items:center;opacity:0;pointer-events:auto;transition:opacity .2s,transform .25s cubic-bezier(.16,1,.3,1),background .15s,border-color .15s}
.slider-arrows #prevSlide{left:8px;transform:translate(-8px,-50%)}
.slider-arrows #nextSlide{right:8px;transform:translate(8px,-50%)}
.slider:hover .slider-arrows button,.slider:focus-within .slider-arrows button{opacity:1;transform:translate(0,-50%)}
.slider-arrows button:hover{background:var(--pink);border-color:var(--pink)}
.slider-arrows button .icon{width:16px;height:16px}
/* touch devices swipe instead, so the arrows never take up room there */
@media (hover:none),(max-width:720px){.slider-arrows{display:none}}

/* ticket box — player can hold at most 4 tickets; one new ticket every 15 min */
/* ---- FREE GAME TICKETS ---- built on the same two-half structure as the wheel/jackpot
   box: art column left, label + number right, dotted perforation between the halves. */
.tickets{background:radial-gradient(120% 90% at 100% 0%,#2a0d38 0%,#121846 46%,#0a1030 100%);border:1px solid rgba(255,255,255,.08)}
/* one of the Instant Games covers, picked at random on load; it lives in the right
   panel only and feathers away to the left so it never runs under the copy */
/* the art is a child of this half, so it can never reach the quiz. The half bleeds past
   .inner's padding on its outer edges so no flat card colour shows around the artwork. */
.half.t{overflow:hidden;margin:-12px -12px 0;padding:12px 16px;border-radius:var(--r-xl) var(--r-xl) 0 0}
.tk-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:0;opacity:.9}
.tk-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(8,11,30,.93) 0%,rgba(8,11,30,.86) 32%,rgba(8,11,30,.62) 62%,rgba(8,11,30,.42) 88%,rgba(8,11,30,.38) 100%)}
.tickets .inner{position:absolute;inset:0;z-index:2;padding:12px;display:flex;flex-direction:column;gap:6px}

/* tickets half. Its art (.tk-art) and scrim (.tk-scrim) cover the half's own
   background, so its hover tint is drawn as a layer above the scrim (z-index
   1, after it in the stacking order) and under the copy and CTA (z-index 2).
   Pink reads weaker than the quiz half's gold on the near-black scrim, so it
   is a little stronger than the wheel half's .24 to look as clear as the quiz
   card's hover. The half bleeds 12px to the card's edges for its art, so the
   tint is inset by that bleed and rounded like .half (10px): the same box the
   quiz half's hover fills, 12px in from the card and clear of the divider. */
.half.t::after{content:"";position:absolute;inset:12px 12px 0;border-radius:10px;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(238,27,99,.34),transparent 85%);opacity:0;transition:opacity .2s}
.half.t:hover::after,.half.t:focus-visible::after{opacity:1}
.half.t .si{color:#ff9ec4}
.half.t .go{background:var(--pink);color:#fff;box-shadow:0 6px 16px -8px var(--pink-glow)}
.half.t .n em{font-style:normal;font:600 12px var(--font-body);color:rgba(255,255,255,.5);margin-left:3px;white-space:nowrap}
/* a member's tickets half: with a ticket to play (.ready) PLAY shows on hover
   like every other half (design, 30 Oct 2026: not held up at rest); with none
   left (.wait) the count gives way to the countdown to the next ticket and
   there is no CTA at all, hover included. Guests keep their PLAY FREE pill. */
.half.t .tk-wait{display:none}
.app:not(.is-guest) .half.t.wait .tk-wait{display:flex}
.app:not(.is-guest) .half.t.wait .tk-have{display:none}
.half.t .tk-wait b{font-size:18px}
.app:not(.is-guest) .half.t.wait .go{display:none}
.app:not(.is-guest) .half.t.wait:hover .chev,.app:not(.is-guest) .half.t.wait:focus-visible .chev{opacity:1}
/* neither class (before the first poll, or after a failed one) keeps the
   generic .half hover pill, so an unknown balance never hides PLAY */
/* capacity: filled = held, the next one fills left-to-right as the countdown runs */
.pips{display:flex;gap:5px;align-self:flex-start}
.pip{flex:none;width:18px;height:3px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden}
.pip.on{background:var(--pink);box-shadow:0 0 10px rgba(238,27,99,.55)}
.pip.cur i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--pink);border-radius:inherit;transition:width 1s linear}
.pip.pop{animation:pop .6s cubic-bezier(.2,1.6,.4,1)}

/* quiz half */
.half.q:hover,.half.q:focus-visible{background:linear-gradient(90deg,rgba(245,181,51,.2),transparent 85%)}
.half.q .si{color:var(--gold-2)}
.half.q .go{background:var(--gold);color:#2b1a00;box-shadow:0 6px 16px -8px rgba(245,181,51,.8)}
/* once the countdown is done the CTA stops hiding: the quiz is the thing to do */
.half.q.ready .go{opacity:1;transform:translate(0,-50%);pointer-events:auto}
/* and while the countdown runs a member gets no CTA at all, not even on hover
   or on touch; the chevron holds the spot. Guests keep their LOG IN pill. */
.app:not(.is-guest) .half.q:not(.ready) .go{display:none}
.app:not(.is-guest) .half.q:not(.ready):hover .chev,.app:not(.is-guest) .half.q:not(.ready):focus-visible .chev{opacity:1}
.half.q.ready .chev{opacity:0}
/* PLAY QUIZ is a wider CTA than box 3's, so the countdown steps down to clear it */
.half.q b{font-size:18px}
.half.q .si{width:13px;height:13px}
.half.q .go{padding:0 9px;letter-spacing:.1em}
.half.q.ready b{color:#2fe08a}
.half.q.ready .si{color:#2fe08a}

/* a single stylised ticket for the art column, notched like the real thing */
.tk-glyph{position:relative;width:46px;height:32px;border-radius:7px;
  background:linear-gradient(150deg,#ff8ab4 0%,var(--pink) 48%,#a80d45 100%);
  box-shadow:0 8px 20px -8px var(--pink-glow),inset 0 1px 0 rgba(255,255,255,.35);
  -webkit-mask:radial-gradient(circle 5px at 0 50%,transparent 98%,#000) ,radial-gradient(circle 5px at 100% 50%,transparent 98%,#000);
  -webkit-mask-composite:source-in;mask:radial-gradient(circle 5px at 0 50%,transparent 98%,#000),radial-gradient(circle 5px at 100% 50%,transparent 98%,#000);mask-composite:intersect}
.tk-glyph::before{content:"";position:absolute;left:7px;right:7px;top:50%;border-top:1.5px dashed rgba(255,255,255,.45)}
/* the quiz mark: a soft gold disc with a question glyph */
/* 3D rendered question mark, keyed to real alpha so it sits on any surface.
   The card flips it on its Y axis every few seconds. */
.q-glyph{width:52px;height:52px;display:grid;place-items:center;perspective:220px;
  filter:drop-shadow(0 4px 14px rgba(245,181,51,.4))}
.q-glyph img{width:100%;height:100%;object-fit:contain;
  animation:qflip 5s cubic-bezier(.45,0,.35,1) infinite}
@keyframes qflip{0%,62%{transform:rotateY(0)}84%,100%{transform:rotateY(360deg)}}
@media (prefers-reduced-motion:reduce){.q-glyph img{animation:none}}
.toast{position:absolute;z-index:5;left:50%;top:14px;transform:translate(-50%,-30px);opacity:0;padding:8px 14px;border-radius:999px;background:var(--green);color:#fff;font-weight:800;font-size:12px;box-shadow:0 10px 30px -8px rgba(18,179,124,.7);transition:.4s cubic-bezier(.2,1.4,.4,1);white-space:nowrap}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ── one box, split by a dotted perforation line: Wheel spins above, Jackpot tickets below ── */
.wof{background:radial-gradient(115% 95% at 8% 8%,#5b21b6 0%,#3a1580 30%,#20114f 58%,#150b2e 100%);border:1px solid rgba(255,255,255,.08)}
.wof .orbs::before,.wof .orbs::after{content:"";position:absolute;border-radius:50%;filter:blur(38px);pointer-events:none}
.wof .orbs::before{width:140px;height:140px;background:var(--pink);opacity:.38;left:-54px;top:-52px}
.wof .orbs::after{width:140px;height:140px;background:var(--gold);opacity:.26;right:-52px;bottom:-56px}
.wof .inner{position:absolute;inset:0;z-index:2;padding:12px;display:flex;flex-direction:column;gap:6px}
/* the perforation: dotted rule between the halves with a punched notch at each card edge */
.split{position:relative;flex:none;height:2px;margin:0 -12px}
.split::before{content:"";position:absolute;left:11px;right:11px;top:0;height:2px;background-image:radial-gradient(circle,rgba(255,255,255,.55) 1.2px,transparent 1.6px);background-size:8px 2px;background-repeat:repeat-x}
.split i{position:absolute;top:-5px;width:10px;height:10px;border-radius:50%;background:rgba(4,2,16,.55);box-shadow:inset 0 1px 2px rgba(0,0,0,.6)}
.split i:first-child{left:-5px}.split i:last-child{right:-5px}
/* both halves share one art column, so the labels and counts sit on the same left rail */
.half{position:relative;flex:1 1 0;min-height:0;display:flex;align-items:center;gap:10px;padding:0 4px;border-radius:10px;color:#fff;text-align:left;transition:background .2s}
.half.t>.art,.half.t>.txt{position:relative;z-index:2}
.half.t>.chev,.half.t>.go{z-index:2}   /* these are absolutely positioned; leave that alone */
.half.t .chev,.half.t .go{right:16px}   /* the half is padded wider now */
.half .art{flex:none;width:70px;height:100%;display:grid;place-items:center;position:relative}
.half .txt{min-width:0;display:flex;flex-direction:column;gap:5px;flex:1}
.half small{display:block;font:700 9px var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.62);white-space:nowrap}
.half .n{display:flex;align-items:center;gap:6px}
.half .si{width:15px;height:15px;flex:none}
.half b{font:800 24px/1 var(--font-head);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:#fff}
/* CTA on the right, vertically centred — clear of the label and count at every width.
   A chevron holds the spot at rest so the halves never look like dead stats. */
.half .chev{position:absolute;right:10px;top:50%;width:17px;height:17px;margin-top:-8.5px;color:rgba(255,255,255,.45);transition:opacity .15s}
.half .go{position:absolute;right:8px;top:50%;height:24px;padding:0 11px;border-radius:999px;font:800 9px var(--font-head);letter-spacing:.14em;display:flex;align-items:center;gap:5px;opacity:0;transform:translate(8px,-50%);transition:opacity .2s,transform .25s cubic-bezier(.16,1,.3,1);pointer-events:none}
.half .go .icon{width:9px;height:9px;fill:currentColor;stroke:none}
.half:hover .go,.half:focus-visible .go{opacity:1;transform:translate(0,-50%)}
.half:hover .chev,.half:focus-visible .chev{opacity:0}
.half.busy{pointer-events:none}
.half.busy .go{opacity:1;transform:translate(0,-50%);animation:pulse 1s infinite}
.half.busy .chev{opacity:0}
.half:disabled{opacity:.55;pointer-events:none}
@media (hover:none){.half .go{opacity:1;transform:translate(0,-50%)}.half .chev{display:none}
  .gcard .plays,.jcard .jplays{display:none}}
/* wheel half */
.half.w:hover,.half.w:focus-visible{background:linear-gradient(90deg,rgba(238,27,99,.24),transparent 82%)}
.half.w .si{color:#ff9ec4}
.half.w .go{background:var(--pink);color:#fff;box-shadow:0 6px 16px -8px var(--pink-glow)}
/* the wheel is turned ~34°, so its painted width is ~83% of its box */
.wheel-stage{position:absolute;inset:0;display:grid;place-items:center;perspective:440px}
.wheel-3d{position:relative;width:74px;height:74px;margin-top:5px;transform-style:preserve-3d;transform:rotateY(-34deg) rotateX(10deg)}
.wheel-layer{position:absolute;inset:0;border-radius:50%}
/* stacked layers give the wheel its thick coin edge */
.wheel-edge{transform:translateZ(var(--z));background:#221538;box-shadow:0 0 0 4px #4a2f62}
.wheel-face{transform-style:preserve-3d;background:conic-gradient(from -22.5deg,#1b1f4a 0 45deg,#2c1a52 45deg 90deg,#1b1f4a 90deg 135deg,#2c1a52 135deg 180deg,#1b1f4a 180deg 225deg,#2c1a52 225deg 270deg,#1b1f4a 270deg 315deg,#2c1a52 315deg 360deg);box-shadow:inset 0 0 26px rgba(0,0,0,.55);animation:wofspin 18s linear infinite}
.wheel-face::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-conic-gradient(from -22.5deg,rgba(255,255,255,.3) 0 1.4deg,transparent 1.4deg 45deg)}
.wheel-face::after{content:"";position:absolute;inset:-4px;border-radius:50%;padding:4px;background:conic-gradient(#f5b533,#ee1b63,#f5b533,#ee1b63,#f5b533);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.wheel-face.spinning{animation:none;transition:transform 4.2s cubic-bezier(.12,.75,.1,1)}
@keyframes wofspin{to{transform:rotate(360deg)}}
.wheel-face .ic{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;transform:rotate(var(--a)) translateY(-27px) rotate(calc(-1*var(--a)))}
.wheel-face .ic svg{width:14px;height:14px;display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.6))}
.wheel-hub{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7ab0,var(--pink) 55%,#8d0c3f);box-shadow:0 0 0 2px #1a1030,0 5px 12px rgba(0,0,0,.5);transform:translateZ(5px);display:grid;place-items:center;color:#fff;font:800 11px var(--font-head)}
.wheel-pointer{position:absolute;left:50%;top:-9px;width:16px;height:13px;margin-left:-8px;transform:translateZ(11px);filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.wheel-glow{position:absolute;inset:-22px;border-radius:50%;background:radial-gradient(circle,rgba(238,27,99,.5),transparent 65%);filter:blur(14px);z-index:-1;animation:breathe 3s ease-in-out infinite}
@keyframes breathe{50%{opacity:.5;transform:scale(.9)}}

/* jackpot half — fanned gold tickets, the live mega-jackpot pot, and a small ticket count */
.half.j:hover,.half.j:focus-visible{background:linear-gradient(90deg,rgba(245,181,51,.2),transparent 85%)}
.half.j .si{color:var(--gold-2)}
.half.j b{color:var(--gold-2)}
.half.j .txt{gap:2px}
.half.j .mj{display:flex;align-items:center;gap:6px;color:#ffe9a8}
.half.j .mj i{position:relative;width:6px;height:6px;flex:none;border-radius:50%;background:#2fe08a;box-shadow:0 0 6px rgba(47,224,138,.9)}
.half.j .mj i::before{animation:liveDotRingSm 1.5s infinite}
.half.j .n{align-items:baseline;gap:5px}
.half.j .n b{font-size:26px;letter-spacing:-.02em;text-shadow:0 0 22px rgba(245,181,51,.55)}
.half.j .n em{font-style:normal;font:800 11px var(--font-head);color:rgba(255,236,185,.8)}
/* ticket count is secondary to the pot now */
.half.j .go{background:var(--gold);color:#2b1a00;box-shadow:0 6px 16px -8px rgba(245,181,51,.8)}
.jt-anim{position:absolute;inset:0}
.jt-tk{position:absolute;left:50%;top:50%;width:48px;height:32px;margin:-16px -24px;border-radius:7px;
  background:linear-gradient(150deg,#ffe6a3 0%,var(--gold-2) 38%,#e09b12 100%);box-shadow:0 5px 12px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.5);
  animation:tkfloat 3.2s ease-in-out infinite;
  -webkit-mask:radial-gradient(circle 5px at 0 50%,transparent 98%,#000),radial-gradient(circle 5px at 100% 50%,transparent 98%,#000);-webkit-mask-composite:source-in;
  mask:radial-gradient(circle 5px at 0 50%,transparent 98%,#000),radial-gradient(circle 5px at 100% 50%,transparent 98%,#000);mask-composite:intersect}
.jt-tk::before{content:"";position:absolute;left:6px;right:6px;top:50%;border-top:1.5px dashed rgba(140,80,0,.55)}
@keyframes tkfloat{0%,100%{transform:rotate(var(--r)) translate(var(--x),var(--y))}50%{transform:rotate(var(--r)) translate(var(--x),calc(var(--y) - 5px))}}
/* top ticket carries a star and a light sweep */
.jt-tk.top{background:linear-gradient(150deg,#fff6d8 0%,#ffd66b 40%,#f0a91a 100%);z-index:2}
.jt-tk.top .star{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;fill:#b45309;stroke:none}
.jt-tk.top::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);animation:tkshine 3.2s ease-in-out infinite}
@keyframes tkshine{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.jt-spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff5cf;box-shadow:0 0 7px #ffd66b;animation:sparkle 2.6s ease-in-out infinite}
@keyframes sparkle{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}

/* =========================================================
   5. LIVE FEED  — same structure as the live site
   ========================================================= */
/* live-feed stats, merged into the Live Bets panel header */
.live-badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;background:var(--pink-100);color:var(--pink);font:800 10px var(--font-head);letter-spacing:.06em}
.live-badge i{position:relative;width:6px;height:6px;border-radius:50%;background:var(--pink)}
.live-badge i::before{animation:liveDotRingSm 1.4s infinite}
.kpis{display:flex;gap:8px}
.kpi{display:flex;align-items:center;gap:8px;height:46px;padding:0 12px;border-radius:12px;border:1px solid var(--line);background:#fff}
.kpi.pink{background:linear-gradient(135deg,#ff2d7a,var(--pink));color:#fff;border-color:transparent;box-shadow:var(--shadow-pink)}
.kpi .ic{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.18);flex:none}
.kpi:not(.pink) .ic{background:var(--pink-100);color:var(--pink)}
.kpi b{display:block;font:800 15px/1 var(--font-head);font-variant-numeric:tabular-nums}
.kpi small{display:block;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.8;margin-top:2px}
.kpi .dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pink);margin-right:4px;vertical-align:middle}

/* =========================================================
   5b. DEPOSIT  — identity | token dropdown | Deposit Now
   ========================================================= */
.deposit{position:relative;display:flex;align-items:center;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:12px 16px 12px 19px}
.deposit::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;border-radius:var(--r-md) 0 0 var(--r-md);background:linear-gradient(180deg,var(--pink),var(--gold))}
.dep-l{display:flex;align-items:center;gap:11px;flex:1;min-width:0}
.dep-l .ic{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;background:linear-gradient(150deg,var(--pink),#ff7ab0);color:#fff;box-shadow:var(--shadow-pink)}
.dep-l .ic .icon{width:18px;height:18px;fill:currentColor;stroke:none}
.dep-ttl{min-width:0}
.dep-h{display:flex;align-items:center;gap:8px}
.dep-ttl h2{display:flex;align-items:center;gap:8px;font-size:15px;white-space:nowrap}
.dep-offer{font:800 10px var(--font-head);letter-spacing:.04em;white-space:nowrap;padding:3px 7px;border-radius:999px;color:#0b6b48;background:linear-gradient(135deg,#c9f9e3,#8ef0c4);border:1px solid rgba(18,179,124,.35)}
.dep-ttl small{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dep-ttl small b{color:var(--text-2);font-weight:700}
.dep-actions{flex:none;display:flex;align-items:center;gap:9px}
/* token dropdown */
.tok-select{position:relative}
.tok-trigger{display:flex;align-items:center;gap:9px;height:40px;padding:0 11px;border-radius:12px;border:1.5px solid var(--line);background:#fff;font-weight:700;font-size:13px;color:var(--text);transition:border-color .15s}
.tok-trigger:hover,.tok-select.open .tok-trigger{border-color:var(--pink)}
.tok-trigger .chev{width:15px;height:15px;color:var(--muted);transition:transform .2s}
.tok-select.open .tok-trigger .chev{transform:rotate(180deg)}
/* real token marks rather than colour dots — the logo is the fastest thing to recognise */
.tok-ic{width:20px;height:20px;flex:none;display:grid;place-items:center;border-radius:50%}
.tok-ic svg{width:100%;height:100%;display:block}
.tok-ic img{width:100%;height:100%;display:block;border-radius:50%;object-fit:cover}
/* tokens with no artwork fall back to a monogram, like the CRO v2 deposit modal */
.tok-ic.is-glyph{background:var(--surface-2);color:var(--text-2);font:800 9px var(--font-head)}
.tok-trigger .lbl,.tok-menu li{display:flex;align-items:center;gap:7px;white-space:nowrap}
.tok-trigger em,.tok-menu em{font-style:normal;font:800 11px var(--font-head);color:var(--muted)}
.tok-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:50;min-width:172px;margin:0;padding:6px;list-style:none;border-radius:13px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -16px rgba(15,23,42,.35);animation:menuIn .16s cubic-bezier(.16,1,.3,1)}
.tok-menu{max-height:min(46vh,316px);overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.tok-menu::-webkit-scrollbar{width:6px}
.tok-menu::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
.tok-menu::-webkit-scrollbar-track{background:transparent}
.tok-menu li{padding:9px 10px;border-radius:9px;font-weight:600;font-size:13px;cursor:pointer;transition:background .12s}
.tok-menu li:hover,.tok-menu li:focus-visible{background:var(--surface-2)}
.tok-menu li[aria-selected=true]{background:var(--pink-100);color:var(--pink)}
.tok-menu li[aria-selected=true] em{color:var(--pink)}
.dep-go{height:40px;padding:0 20px;font-size:13.5px}
/* placeholder deposit modal */
.modal{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:20px;background:rgba(9,17,40,.55);backdrop-filter:blur(3px)}
.modal-card{position:relative;width:min(380px,100%);background:var(--surface);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:26px 24px;text-align:center;animation:menuIn .2s cubic-bezier(.16,1,.3,1)}
.modal-card h3{font-size:19px}
.modal-card p{margin:9px 0 14px;font-size:13px;color:var(--muted);line-height:1.5}
.modal-tag{display:inline-block;font:800 10px var(--font-head);letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.modal-x{position:absolute;top:10px;right:12px;width:32px;height:32px;border-radius:50%;font-size:22px;line-height:1;color:var(--muted)}
.modal-x:hover{background:var(--surface-2);color:var(--text)}

/* =========================================================
   6b. FREE GAMES — ticket counter + tile slider
   ========================================================= */
/* the counter reads from the same timer as the hero tickets box, so the two never disagree */
.tkchip{position:relative;display:inline-flex;align-items:stretch;height:40px;margin-left:auto;
  border-radius:999px;overflow:hidden;white-space:nowrap;
  background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.tkchip .cap{display:inline-flex;align-items:center;gap:7px;padding:0 14px;background:var(--pink);color:#fff}
.tkchip .cap .icon{width:16px;height:16px;flex:none}
.tkchip .n{font:800 15px/1 var(--font-head);font-variant-numeric:tabular-nums}
.tkchip .u{display:none}   /* "tickets" spelled out on phones only */
.tkchip .nx{display:inline-flex;align-items:center;gap:6px;padding:0 16px 0 13px;font:600 12px/1 var(--font-body);color:var(--text-2)}
.tkchip .nx b{font:800 13.5px/1 var(--font-head);font-variant-numeric:tabular-nums;color:var(--text)}
/* the pill fills along its bottom edge as the next ticket comes in */
.tkchip .fill{position:absolute;left:0;bottom:0;height:2px;width:calc(var(--p,0) * 100%);
  background:linear-gradient(90deg,var(--pink),var(--gold));transition:width 1s linear}

/* light card, square art, name + level, filled CTA — the live Free Games tile, restyled */
.freegames .tools{margin-left:10px}
.fgcard{position:relative;flex:none;width:calc((100% - 4*16px)/5);scroll-snap-align:start;
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);color:var(--text);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .2s}
.fgcard:hover,.fgcard:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(238,27,99,.4)}
.fgcard .art{position:relative;aspect-ratio:1/1;background:var(--navy);overflow:hidden}
.fgcard .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.fgcard:hover .art img{transform:scale(1.06)}
.fgcard .meta{padding:10px 11px 11px;display:flex;flex-direction:column;gap:9px}
.fgcard .ln{display:flex;align-items:flex-start;gap:8px;min-width:0;min-height:31px}
/* two lines max, and the reserved height keeps every CTA in the row on one line */
.fgcard .nm{flex:1;min-width:0;font:800 12.5px/1.25 var(--font-head);text-transform:uppercase;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.fgcard .lvl{flex:none;margin-top:1px;font:800 9.5px/1 var(--font-head);letter-spacing:.06em;font-style:normal;
  padding:5px 7px;border-radius:999px;background:var(--cb);color:var(--c)}
.fgcard .play{height:34px;width:100%;font-size:11.5px;gap:6px}
.fgcard .play .icon{width:10px;height:10px;fill:currentColor;stroke:none}
@media (prefers-reduced-motion:reduce){.fgcard,.fgcard .art img{transition:none}}

/* ---- OFFER POPUPS: Plinko (#promoModal) and Flash Offer (#flashModal) ----
   One layout for both, themed per offer so each popup reads as its own banner opened up: the
   banner's art in a navy head, and the offer's accent on the countdown tiles, the tier being
   worked towards and the CTA. --op-* tokens carry the theme; nothing else differs. */
.op-plinko{--op-a:#ff8a1f;--op-a2:#ffb15c;--op-ink:#9a4a00;--op-tint:#fff1e0;--op-tint2:#fff8f0;--op-line:rgba(255,138,31,.55);
  --op-glow:rgba(255,138,31,.55);--op-tile:linear-gradient(160deg,#ffd06b 0%,#ffa62b 55%,#ff8a1f 100%);--op-tile-ink:#3a2100;
  --op-cta:linear-gradient(135deg,#ffd06b 0%,#ffa62b 50%,#ff8a1f 100%);--op-cta-ink:#3a2100;
  --op-stub:linear-gradient(135deg,#ffd06b 0%,#ffa62b 55%,#ff8a1f 100%);--op-stub-ink:#3a2100}
.op-flash{--op-a:#ee1b63;--op-a2:#ff7ab0;--op-ink:#b30c4c;--op-tint:#ffe4ee;--op-tint2:#fff5f9;--op-line:rgba(238,27,99,.45);
  --op-glow:rgba(238,27,99,.5);--op-tile:linear-gradient(160deg,#ff4d8d 0%,#d1105a 100%);--op-tile-ink:#fff;
  --op-cta:linear-gradient(135deg,#f0327a 0%,#d1105a 55%,#a80d4a 100%);--op-cta-ink:#fff;   /* white on #d1105a: 5.2:1 */
  --op-stub:linear-gradient(135deg,#f0327a 0%,#d1105a 60%,#b30c4c 100%);--op-stub-ink:#fff}
.op-card{width:min(900px,100%);max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain;
  padding:0;text-align:left;border-radius:var(--r-lg)}
.op-card p{margin:0;font-size:inherit;line-height:inherit;color:inherit}
.op-x{top:14px;right:16px;z-index:3;color:rgba(255,255,255,.9);background:rgba(9,17,40,.4)}
.op-x:hover{background:rgba(255,255,255,.2);color:#fff}
.op-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* head: the banner, opened up */
.op-head{position:relative;isolation:isolate;display:flex;align-items:flex-end;gap:20px;min-height:132px;padding:18px 24px;
  background:var(--navy);color:#fff;overflow:hidden}
.op-art{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:right center}
.op-head::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(9,17,40,.97) 0%,rgba(9,17,40,.9) 44%,rgba(9,17,40,.5) 72%,rgba(9,17,40,.25) 100%)}
.op-ht{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.op-card .op-ht h3{margin:0;font:800 23px/1.15 var(--font-head);letter-spacing:-.02em;color:#fff}
.op-card .op-ht h3 em{font-style:normal;white-space:nowrap}
.op-flash .op-ht h3 em{color:#ffd66b}
.op-plinko .op-ht h3 em{color:#ffb15c}
.op-card .op-ht p{max-width:500px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.8)}
.op-rwds{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.op-lead{font-size:13px;color:rgba(255,255,255,.8);margin-right:2px}
.op-rwds .rwd{height:28px;padding:0 10px}
.op-count{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.op-count small{font:800 9.5px/1 var(--font-head);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.op-tiles{display:flex;gap:6px}
.op-tiles span{width:48px;height:50px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:var(--op-tile);color:var(--op-tile-ink);box-shadow:0 12px 26px -12px var(--op-glow),inset 0 1px 0 rgba(255,255,255,.3)}
.op-tiles b{font:800 19px/1 var(--font-head);font-variant-numeric:tabular-nums}
.op-tiles i{font:800 8.5px/1 var(--font-head);font-style:normal;letter-spacing:.12em;text-transform:uppercase;opacity:.85}
/* body */
.op-body{padding:14px 24px 4px;display:flex;flex-direction:column;gap:10px}
.op-prog{padding:10px 16px 10px;border-radius:16px;background:var(--surface-2);border:1px solid var(--line)}
.op-prog-h{display:flex;align-items:center;justify-content:space-between;gap:10px 14px;flex-wrap:wrap;margin-bottom:10px}
.op-card .op-prog-h p{font-size:13.5px;color:var(--text-2)}
.op-prog-h p b{font:800 16px var(--font-head);color:var(--text);font-variant-numeric:tabular-nums}
.op-pill{font:800 10.5px/1 var(--font-head);letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border-radius:999px;
  background:var(--op-tint);color:var(--op-ink)}
.op-rail{position:relative;height:8px;margin:0 7px 22px 0;border-radius:999px;background:#e2e6ef}
.op-rail .fill{position:absolute;left:0;top:0;bottom:0;min-width:8px;border-radius:inherit;
  background:linear-gradient(90deg,var(--op-a),var(--op-a2));box-shadow:0 0 10px var(--op-glow)}
.op-rail .mk{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;background:#fff;border:2px solid #c9d0de;transform:translate(-50%,-50%)}
.op-rail .mk em{position:absolute;top:17px;left:50%;transform:translateX(-50%);font:600 11.5px var(--font-body);font-style:normal;
  color:var(--text-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.op-rail .mk.end em{left:auto;right:-5px;transform:none}
.op-rail .mk.is-done{background:var(--green);border-color:var(--green)}
.op-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding-top:8px;border-top:1px solid var(--line)}
.op-stats div{display:flex;align-items:baseline;gap:8px;padding:0 16px}
.op-stats div:first-child{padding-left:0}
.op-stats div+div{border-left:1px solid var(--line)}
.op-stats dt{font:800 9.5px var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.op-stats dd{margin:0;font:800 15px/1.1 var(--font-head);color:var(--text);font-variant-numeric:tabular-nums}
.op-stats dd small{font:700 11px var(--font-body);color:var(--text-2)}
/* the tiers: reward tickets, one per row (client's pick, Sept 29 2026), in the same ticket
   language as the hero tickets box. The prize sits on the stub, a perforation with two notches
   separates it from Tier + wager, and the state sits on the right. The ticket being worked
   towards gets the offer-coloured stub; the state is also written, not only coloured. */
.op-tiers{--stub:112px;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.op-tier{position:relative;display:grid;grid-template-columns:var(--stub) minmax(0,1fr) auto;align-items:center;min-height:60px;
  border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.05);
  transition:border-color .2s,box-shadow .2s}
/* the two notches, punched where the perforation meets the edges */
.op-tier::before,.op-tier::after{content:"";position:absolute;z-index:1;left:calc(var(--stub) - 9px);width:18px;height:18px;border-radius:50%;
  background:#fff;border:1px solid var(--line)}
.op-tier::before{top:-10px;clip-path:inset(50% 0 0 0)}
.op-tier::after{bottom:-10px;clip-path:inset(0 0 50% 0)}
.op-stub{align-self:stretch;display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 14px;
  border-radius:13px 0 0 13px;background:var(--surface-2);border-right:2px dashed #d6dbe6}
/* the stub carries the tier: a small TIER label over a big number */
.op-tn{display:flex;flex-direction:column;align-items:center;gap:3px;font:800 26px/1 var(--font-head);letter-spacing:-.02em;color:var(--text-2)}
.op-tn small{font:800 9.5px/1 var(--font-head);letter-spacing:.16em;text-transform:uppercase;opacity:.85}
/* the ticket body: the rewards with their icons, the wager under them */
.op-mid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:center;min-width:0;padding:9px 0 9px 18px}
.op-col{display:flex;flex-direction:column;gap:6px;min-width:0}
.op-lbl{font:800 9px/1 var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:#64748b}
/* the requirement column: a hairline apart, the amount, how far along this tier is, and a mini bar */
.op-wag{margin-left:10px;padding-left:18px;border-left:1px solid var(--line)}
.op-wv{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.op-wv b{font:800 15px/1 var(--font-head);color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.op-wv i{font:700 11px/1 var(--font-body);font-style:normal;color:#64748b;font-variant-numeric:tabular-nums}
.op-mini{position:relative;display:block;height:4px;border-radius:999px;background:#e6e9f1;overflow:hidden}
.op-mini i{position:absolute;left:0;top:0;bottom:0;min-width:4px;border-radius:inherit;background:#c3cad8}
.op-tier.is-next .op-mini i{background:linear-gradient(90deg,var(--op-a),var(--op-a2))}
.op-tier.is-done .op-mini i{background:var(--green)}
.op-card .op-rws{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.op-rwd{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px 0 8px;border-radius:8px;white-space:nowrap;font-size:12px;border:1px solid}
.op-rwd .icon{width:13px;height:13px;flex:none}
.op-rwd b{font:800 14px/1 var(--font-head);font-variant-numeric:tabular-nums}
.op-rwd em{font-style:normal;font-weight:600}
/* the rewards are the point of the ticket, so they are solid and bright (client, Sept 30 2026:
   "highlight them its rewards"), with dark ink for contrast */
.op-rwd.t{background:linear-gradient(135deg,#ffe38f 0%,#ffbf3c 55%,#ff9f1c 100%);border-color:rgba(214,120,0,.35);color:#3a2100;
  box-shadow:0 6px 14px -8px rgba(255,159,28,.9),inset 0 1px 0 rgba(255,255,255,.55)}
.op-rwd.c{background:linear-gradient(135deg,#7df0c0 0%,#3ddc9f 55%,#16c486 100%);border-color:rgba(8,122,82,.3);color:#053d2a;
  box-shadow:0 6px 14px -8px rgba(22,196,134,.9),inset 0 1px 0 rgba(255,255,255,.55)}
.op-rwd em{opacity:.9}
.op-fun{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.op-fun img{width:22px;height:24px;flex:none;object-fit:contain;filter:drop-shadow(0 3px 6px rgba(238,27,99,.3))}
.op-fun b{font:800 18px/1 var(--font-head);letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}
.op-fun em{font:700 10px/1 var(--font-head);font-style:normal;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.op-end{padding:0 18px 0 16px}
.op-badge{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:999px;white-space:nowrap;
  font:800 10px/1 var(--font-head);letter-spacing:.08em;text-transform:uppercase;background:var(--op-a);color:var(--op-tile-ink)}
.op-flash .op-badge{background:#d1105a;color:#fff}
.op-badge.lock{height:auto;padding:0;background:none;color:#8a94a8}
.op-badge .icon{width:13px;height:13px;stroke-width:2}
/* the ticket being worked towards */
.op-tier.is-next{border-color:var(--op-line);box-shadow:0 16px 30px -20px var(--op-glow)}
.op-tier.is-next::before,.op-tier.is-next::after{border-color:var(--op-line)}
.op-tier.is-next .op-stub{background:var(--op-stub);border-right-color:rgba(255,255,255,.55)}
.op-tier.is-next .op-tn{color:var(--op-stub-ink)}
/* a cleared ticket */
.op-tier.is-done .op-stub{background:linear-gradient(135deg,#3ddc9f,#0b8a5f);border-right-color:rgba(255,255,255,.55)}
.op-tier.is-done .op-tn{color:#fff}
.op-tier.is-done .op-badge{background:var(--green-100);color:#0b6b48}
/* locked tiers: black-and-white and faded, so the eye goes to the tier being worked towards
   (client, Sept 30 2026). Hover lifts them enough to read comfortably. */
.op-tier:not(.is-next):not(.is-done){filter:grayscale(1);opacity:.5;transition:opacity .2s}
.op-tier:not(.is-next):not(.is-done):hover{opacity:.8}
.op-card .op-note{font-size:11px;line-height:1.5;color:var(--text-2);text-align:center}
/* footer: stays in view while the card scrolls, so the CTA is always one tap away */
.op-foot{position:sticky;bottom:0;z-index:2;display:flex;align-items:center;gap:16px;margin-top:8px;padding:10px 24px;
  background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--line)}
.op-card .op-foot p{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:var(--text-2)}
.op-cta{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 22px;border-radius:999px;
  background:var(--op-cta);color:var(--op-cta-ink);font:800 14px var(--font-head);white-space:nowrap;
  box-shadow:0 14px 28px -14px var(--op-glow);transition:transform .15s,box-shadow .2s}
.op-cta:hover{transform:translateY(-1px);box-shadow:0 18px 32px -14px var(--op-glow)}
.op-cta:active{transform:scale(.98)}
.op-cta:focus-visible{outline:3px solid var(--op-a);outline-offset:2px}
.op-cta .icon{width:12px;height:12px;fill:currentColor;stroke:none}
.op-elig{flex:1;min-width:0;display:flex;align-items:center;gap:10px}
.op-elig>span:first-child{font:800 10px var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--text-2)}
.op-game{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;background:var(--surface-2);
  border:1px solid var(--line);font:700 13px var(--font-head);color:var(--text)}
.op-game img{width:28px;height:28px;border-radius:50%;object-fit:cover}
/* the chips link to /games/#<slug>, so they need a hover cue; without one they
   read as static labels. Matches the .fgcard treatment. */
.op-game{transition:border-color .15s,background .15s}
.op-game:hover,.op-game:focus-visible{background:var(--surface);border-color:rgba(238,27,99,.4)}
@media (prefers-reduced-motion:reduce){.op-cta,.op-tier,.op-tier:not(.is-next):not(.is-done),.op-game{transition:none}.op-cta:hover{transform:none}}
@media (max-width:720px){
  .op-head{flex-direction:column;align-items:stretch;min-height:0;gap:12px;padding:16px 16px 14px}
  .op-head::before{background:linear-gradient(180deg,rgba(9,17,40,.55) 0%,rgba(9,17,40,.88) 50%,rgba(9,17,40,.97) 100%)}
  .op-ht{padding-right:0}   /* the close button only shares the first line, which is the short tag */
  .op-card .op-ht h3{font-size:19px}
  .op-card .op-ht p{font-size:12px}
  .op-count{flex-direction:row;align-items:center;gap:10px}   /* "Ends in" beside the tiles, not above */
  .op-tiles span{width:44px;height:44px;border-radius:10px;gap:3px}
  .op-tiles b{font-size:16px}
  .op-body{padding:12px 14px 4px;gap:10px}
  .op-prog{padding:12px 12px 12px}
  .op-rail .mk em{font-size:10.5px}
  /* the banner-sized reward chips keep their labels here (the slide's phone rule hides them) */
  .op-rwds .rwd{height:28px;padding:0 10px;gap:6px;font-size:11.5px}
  .op-rwds .rwd .icon{width:13px;height:13px}
  .op-rwds .rwd b{font-size:13px}
  /* stats stay three across, label over value */
  .op-stats div{display:block;padding:0 8px}
  .op-stats dt{font-size:8px;letter-spacing:.06em;line-height:1.25}
  .op-stats dd{margin-top:3px;font-size:14px}
  /* phones: a narrower stub; the state drops under the wager; Plinko's reward words go to
     screen readers only */
  .op-tiers{--stub:66px;gap:6px}
  .op-tier{grid-template-columns:var(--stub) minmax(0,1fr);grid-template-areas:"stub mid";min-height:62px}
  .op-stub{grid-area:stub;padding:8px 4px}
  .op-tn{font-size:22px}
  .op-tn small{font-size:8px;letter-spacing:.12em}
  .op-mid{grid-area:mid;align-self:center;display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:10px 10px 10px 14px}
  .op-rcol .op-lbl,.op-mini,.op-wv i{display:none}
  .op-wag{flex-direction:row;align-items:baseline;gap:6px;margin:0;padding:0;border:0}
  .op-lbl{font-size:8px;letter-spacing:.08em}
  .op-wv b{font-size:12.5px}
  /* the reward words go to screen readers only; the icons and figures carry them */
  .op-rwd{height:24px;gap:5px;padding:0 8px 0 7px;border-radius:8px}
  .op-rwd .icon{width:12px;height:12px}
  .op-rwd b{font-size:13.5px}
  .op-rwd em{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .op-fun img{width:20px;height:22px}
  .op-fun b{font-size:16px}
  .op-fun em{font-size:8.5px}
  .op-end{position:absolute;top:9px;right:10px;padding:0}
  .op-card .op-note{font-size:11px}
  .op-badge{height:20px;padding:0 8px;font-size:8.5px}
  .op-foot{flex-wrap:wrap;gap:8px;padding:10px 14px}
  .op-card .op-foot p{flex-basis:100%;font-size:12px}
  .op-cta{width:100%}
  /* Plinko: the eligible-game chip and the CTA share one row */
  .op-plinko .op-foot{flex-wrap:nowrap}
  .op-elig>span:first-child{display:none}
  .op-elig{flex:none}
  .op-plinko .op-cta{flex:1;width:auto;padding:0 16px}
}

/* =========================================================
   6. GAMES  — originals row + categories + grid
   ========================================================= */
.row-scroll{position:relative}
/* extra top padding leaves room for the promo tag that overhangs each card's top edge */
.row-scroll .viewport{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:18px 2px 10px}
.row-scroll .viewport::-webkit-scrollbar{display:none}
/* the card itself does not clip, so the tag can sit above it; .media does the clipping instead */
.gcard{position:relative;flex:none;width:calc((100% - 5*16px)/6);aspect-ratio:3/4;border-radius:18px;background:var(--navy);box-shadow:var(--shadow-md);scroll-snap-align:start;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;color:#fff;text-align:center}
.gcard .media{position:absolute;inset:0;border-radius:18px;overflow:hidden;isolation:isolate;z-index:0}
.gcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.gcard .media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(8,12,30,.35) 70%,rgba(8,12,30,.92) 100%);z-index:1}
/* the block is bottom-anchored, so every name's last line sits on the same baseline across a row,
   with the live-player count stacked directly above it */
.gcard .title{position:absolute;left:9px;right:9px;bottom:13px;z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center}
.gcard .title b{display:block;font:800 clamp(12px,1.05vw,16px)/1.18 var(--font-head);text-transform:uppercase;letter-spacing:.01em;text-shadow:0 2px 10px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5)}
/* promo tag: tilted sticker straddling the top-left corner, like the reference */
.gcard .b{position:absolute;top:-10px;left:10px;z-index:4;padding:5px 11px;border-radius:999px;font:800 11px/1 var(--font-head);letter-spacing:.01em;color:#fff;transform:rotate(-7deg);transform-origin:50% 50%;box-shadow:0 4px 10px -2px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.14)}
.gcard .b.new,.fgcard .b.new{background:linear-gradient(90deg,#17c3e6,#0aa7c7);color:#04252d}
.gcard .b.hot,.fgcard .b.hot{background:linear-gradient(90deg,#ff6a00,#ff2d55)}
.gcard .b.wager,.gcard .b.flash{background:linear-gradient(90deg,#12b37c,#0a8f61)}
.gcard .b.promo{background:linear-gradient(90deg,#ffd66b,#f5b533);color:#3a2600}
/* Popular: top 3 all-time (app.py _lobby_game_stats) */
.gcard .b.popular,.fgcard .b.popular{background:linear-gradient(90deg,#8b5cf6,#6d28d9)}
/* Free Games: the card clips its contents (overflow:hidden keeps the rounded
   art corners), so the ribbon sits flat inside the top-left corner instead of
   straddling it; the colours are the Play Games ones above */
.fgcard .b{position:absolute;top:8px;left:8px;z-index:2;padding:4px 9px;border-radius:999px;font:800 10px/1 var(--font-head);letter-spacing:.01em;color:#fff;box-shadow:0 4px 10px -2px rgba(0,0,0,.5),0 0 0 2px rgba(255,255,255,.14)}
/* recent payout multiplier, top-right of each tile */
.gcard .win{position:absolute;top:9px;right:9px;z-index:4;display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;
  font:800 10px/1 var(--font-head);letter-spacing:.04em;white-space:nowrap;color:#073d2a;
  background:linear-gradient(135deg,#5cf5ae,#12b37c);border:1px solid rgba(255,255,255,.35);
  box-shadow:0 4px 12px -4px rgba(18,179,124,.8),inset 0 1px 0 rgba(255,255,255,.45)}
/* the title block is bottom-anchored, so the pill grows upward on hover and the name never moves */
.gcard .play{height:30px;padding:0 17px;border-radius:999px;background:var(--pink);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:800 11.5px/1 var(--font-head);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 10px 26px -8px var(--pink-glow)}
.gcard .play .icon{width:11px;height:11px;flex:none}
.gcard:hover{transform:translateY(-6px);box-shadow:0 26px 40px -18px rgba(15,27,61,.5)}
.gcard:hover img{transform:scale(1.08)}
/* on hover the two CTAs take over: the name fades and the pair slides down into its place,
   both transform/opacity so nothing reflows */
/* :focus-visible, not :focus-within — the auth modal returns focus to the card it
   was opened from, which left the Play-for-real overlay stuck open after closing.
   :focus-visible still shows it for keyboard users but not for restored/mouse focus.
   (.gcard is the <a> itself and has no focusable children, so this loses nothing.) */
.gcard:hover .plays,.gcard:focus-visible .plays{opacity:1;transform:translateY(13px)}
.gcard .title b{transition:opacity .2s}
.gcard:hover .title b,.gcard:focus-visible .title b{opacity:0}
.gcard:hover .media::after{background:linear-gradient(180deg,rgba(8,12,30,.25) 0%,rgba(8,12,30,.35) 60%,rgba(8,12,30,.95) 100%)}
.gcard .glow{position:absolute;inset:auto 0 0 0;height:60%;background:radial-gradient(60% 40% at 50% 100%,var(--c,transparent),transparent 70%);opacity:.75;mix-blend-mode:screen;pointer-events:none;z-index:2}

.cats{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 2px 6px;margin-bottom:16px}
.cats::-webkit-scrollbar{display:none}
.cats[hidden]{display:none}
/* server-rendered empty; play_games_row.js fills it (or leaves it hidden) */
.cats:empty{display:none}
.cat{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-weight:700;font-size:13px;color:var(--text-2);white-space:nowrap;transition:.15s}
.cat:hover{border-color:var(--pink);color:var(--pink)}
.cat.is-active{background:var(--pink);border-color:var(--pink);color:#fff;box-shadow:var(--shadow-pink)}
.cat .n{font-size:11px;padding:1px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted)}
.cat.is-active .n{background:rgba(255,255,255,.22);color:#fff}
/* Play Games is a single scrolling row (same tile widths as Most Played); the tiles rise in
   on every tab change */
#grid .gcard{animation:fadeUp .45s both}
#grid .empty{flex:1 1 100%}
.pg-head .tools{gap:8px}
.pg-head .link{margin-right:4px}
#gridPrev .icon{--nudge:.4px}#gridNext .icon{--nudge:-.4px}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}}
.empty{text-align:center;color:var(--muted);padding:40px}

/* =========================================================
   7. JACKPOT MINIGAMES
   ========================================================= */
.jackpot{position:relative;border-radius:var(--r-xl);background:radial-gradient(85% 130% at 6% -12%,#4a1d8f 0%,#2a1163 34%,#151041 64%,#0a0e2c 100%);color:#fff;padding:24px;overflow:hidden;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;gap:20px}
.jackpot::before{content:"";position:absolute;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(245,181,51,.32),transparent 65%);right:-130px;top:-190px;filter:blur(10px);animation:breathe 5s ease-in-out infinite}
.jackpot::after{content:"";position:absolute;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(238,27,99,.3),transparent 65%);left:-90px;bottom:-170px;filter:blur(10px)}
/* header row: copy on the left, ticket counter + CTA on the right */
.jhead{position:relative;z-index:1;display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.jttl{flex:1;min-width:250px;display:flex;flex-direction:column;gap:7px}
.jttl .eyebrow{display:inline-flex;align-items:center;gap:7px;font:800 11px var(--font-head);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.jttl .eyebrow .icon{width:14px;height:14px;fill:currentColor;stroke:none}
.jttl h2{font-size:clamp(19px,1.9vw,26px);font-weight:800;line-height:1.15}
.jttl p{margin:0;color:rgba(255,255,255,.7);font-size:13px;max-width:560px}
/* ticket counter — the highlight of the header now that the CTA is gone */
.tbox{position:relative;flex:none;display:flex;align-items:center;gap:14px;height:68px;padding:0 22px 0 18px;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,rgba(245,181,51,.3) 0%,rgba(245,181,51,.12) 45%,rgba(245,181,51,.05) 100%);
  border:1px solid rgba(255,214,107,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 12px 32px -14px rgba(245,181,51,.6)}
/* slow shimmer draws the eye without animating anything structural */
.tbox::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.22) 50%,transparent 62%);transform:translateX(-130%);animation:tshine 4.5s ease-in-out infinite}
@keyframes tshine{0%,60%{transform:translateX(-130%)}92%,100%{transform:translateX(130%)}}
.tbox .ic{position:relative;width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;background:linear-gradient(160deg,#fff0c2,#ffd66b 45%,var(--gold));color:#4a2f00;box-shadow:0 7px 16px -6px rgba(245,181,51,.9),inset 0 1px 0 rgba(255,255,255,.6)}
.tbox .ic .icon{width:21px;height:21px}
.tbox .v{position:relative}
.tbox b{display:block;font:800 28px/1 var(--font-head);font-variant-numeric:tabular-nums;letter-spacing:-.01em;color:#ffe9a8;text-shadow:0 0 20px rgba(245,181,51,.55)}
.tbox small{display:block;font:800 9px var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,236,185,.75);margin-top:4px;white-space:nowrap}
/* all four games in one row, each with room for its artwork */
.jrow{position:relative;z-index:1;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.jcard{position:relative;aspect-ratio:4/3;border-radius:18px;overflow:hidden;background:var(--navy-2);box-shadow:0 18px 34px -18px rgba(0,0,0,.85);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;color:#fff;display:block;width:100%;text-align:center;padding:0}
.jcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.jcard::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,10,28,0) 40%,rgba(6,10,28,.5) 68%,rgba(6,10,28,.94) 100%);z-index:1}
/* bottom-anchored like the game tiles, so the pill grows upward and the name never moves */
.jcard .foot{position:absolute;left:10px;right:10px;bottom:12px;z-index:3;display:flex;flex-direction:column;align-items:center;gap:7px}
.jcard .nm{display:block;font:800 clamp(13px,1.1vw,16px)/1.15 var(--font-head);text-transform:uppercase;letter-spacing:.01em;text-shadow:0 2px 10px rgba(0,0,0,.7),0 1px 2px rgba(0,0,0,.5)}
.jcard .ring{position:absolute;inset:0;border-radius:inherit;border:1.5px solid rgba(255,255,255,.09);transition:border-color .25s,box-shadow .25s;z-index:4;pointer-events:none}
.jcard .shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.2) 50%,transparent 60%);transform:translateX(-100%);transition:transform .8s;z-index:2}
.jcard .jplay{align-self:center;height:30px;padding:0 17px;border-radius:999px;background:linear-gradient(160deg,#ffd66b,var(--gold));color:#3a2600;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font:800 11.5px/1 var(--font-head);letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 10px 26px -8px rgba(245,181,51,.8);
  }
.jcard .jplay .icon{width:11px;height:11px;flex:none;fill:#3a2600;stroke:none}
.jcard:hover{transform:translateY(-6px);box-shadow:0 28px 44px -20px rgba(0,0,0,.9)}
.jcard:hover img{transform:scale(1.07)}
.jcard:hover .shine{transform:translateX(100%)}
.jcard:hover .ring,.jcard:focus-visible .ring{border-color:rgba(255,214,107,.8);box-shadow:0 0 22px -4px rgba(245,181,51,.55)}
.jcard:hover .jplays,.jcard:focus-visible .jplays{opacity:1;transform:translateY(24px)}   /* lands where the name was; :focus-visible so the modal's restored focus does not stick it open */
.jcard .foot .nm{transition:opacity .2s}
.jcard:hover .foot .nm,.jcard:focus-visible .foot .nm{opacity:0}
.jcard:hover::after{background:linear-gradient(180deg,rgba(6,10,28,.28) 0%,rgba(6,10,28,.5) 60%,rgba(6,10,28,.96) 100%)}

/* =========================================================
   8. LIVE BETS  — table
   ========================================================= */
.livebets{display:grid;grid-template-columns:1fr}
.livebets[hidden]{display:none}   /* drop the hidden attribute on the section to bring it back */
/* the 300x250 rotating banner at the end of the member lobby. The slot partial
   is shared with the old Bootstrap pages, so its .d-none (no live banner) is
   honoured here, and the empty <img src=""> is kept invisible until
   banner-rotator.js fills it so a broken-image icon never shows. */
.nu-ad{display:flex;justify-content:center}
.nu-ad:has(.d-none),.app.is-guest .nu-ad{display:none}
.nu-ad .d-none{display:none}   /* the slot itself, for engines without :has() */
.nu-ad .rotating-banner-link{display:block;border-radius:var(--r-xs);overflow:hidden;box-shadow:var(--shadow-md);line-height:0}
.nu-ad .rotating-banner-link img{display:block;width:300px;max-width:100%;height:auto;aspect-ratio:300/250}
.nu-ad .rotating-banner-link img[src=""]{visibility:hidden}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
/* header: highlighted Live Bets title with its live stats stacked underneath, tabs on the right */
.panel .phead{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap;padding:16px 20px;border-bottom:1px solid var(--line)}
.panel .pttl{display:flex;flex-direction:column;gap:11px;padding-left:13px;border-left:3px solid var(--pink);border-radius:2px}
.panel .pttl-top{display:flex;align-items:center;gap:10px}
.panel .phead h2{font-size:19px;color:var(--pink);letter-spacing:-.01em}
.panel .phead .tabs{margin-left:auto}
.tabs{display:flex;gap:4px;padding:4px;background:var(--surface-2);border-radius:999px;margin-left:auto}
.tabs button{height:32px;padding:0 14px;border-radius:999px;font-weight:700;font-size:12px;color:var(--text-2)}
.tabs button.is-active{background:#fff;color:var(--text);box-shadow:var(--shadow-sm)}
table{width:100%;border-collapse:collapse}
thead th{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;text-align:left;padding:10px 10px;background:var(--surface-2);white-space:nowrap}
thead th:first-child,tbody td:first-child{padding-left:20px}
thead th:last-child,tbody td:last-child{padding-right:20px}
tbody td{padding:10px 10px;border-top:1px solid var(--line);font-size:13px;vertical-align:middle;white-space:nowrap}
tbody td:nth-child(2){white-space:normal;min-width:110px}
tbody tr{animation:rowIn .5s cubic-bezier(.2,1,.3,1) both}
@keyframes rowIn{from{opacity:0;transform:translateY(-14px);background:var(--pink-100)}}
tbody tr:hover{background:var(--surface-2)}
td.player{display:flex;align-items:center;gap:10px;font-weight:700}
td .av{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font:800 11px var(--font-head);color:#fff}
td .gm{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--text-2)}
td .gm i{width:8px;height:8px;border-radius:3px}
td.num{font-variant-numeric:tabular-nums;text-align:right}
.mult{font:800 12px var(--font-head);padding:4px 8px;border-radius:8px;background:var(--surface-2);border:1px solid var(--line)}
.mult.x0{color:var(--muted)}
.result{font:800 11px var(--font-head);letter-spacing:.06em;padding:4px 10px;border-radius:999px;color:#fff}
.result.win{background:var(--green)}.result.loss{background:var(--red)}.result.push{background:var(--muted)}
td.pay{font:800 13px var(--font-head);text-align:right}
td.pay.win{color:var(--green)}td.pay.loss{color:var(--red)}
.tfoot{display:flex;justify-content:center;padding:12px;border-top:1px solid var(--line)}

/* =========================================================
   10. FOOTER  (kept as current)
   ========================================================= */

/* ---------- BLOG ROW (logged-out only) ----------
   A visitor has no stats to read, so the space under the ad banner carries the blog
   instead. Same light card, same scroll row and same arrows as Free Games. */
.blogs{display:none}
.app.is-guest .blogs{display:block}
.blogs .tools{margin-left:auto}
.blogs.is-static .tools .btn-icon{display:none}
.bcard{position:relative;flex:none;width:calc((100% - 4*16px)/5);scroll-snap-align:start;
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);color:var(--text);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .2s}
.bcard:hover,.bcard:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(238,27,99,.4)}
.bcard .art{position:relative;aspect-ratio:16/9;background:var(--navy);overflow:hidden}
.bcard .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.bcard:hover .art img{transform:scale(1.06)}
/* the covers are busy at the bottom edge, where the category pill sits */
.bcard .art::after{content:"";position:absolute;left:0;right:0;bottom:0;height:52px;
  background:linear-gradient(180deg,rgba(8,12,30,0),rgba(8,12,30,.5))}
.bcard .cat-tag{position:absolute;left:9px;bottom:9px;z-index:1;max-width:calc(100% - 18px);
  padding:4px 9px;border-radius:999px;background:rgba(255,255,255,.94);color:var(--pink-600);
  font:800 9px/1 var(--font-head);letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bcard .meta{padding:12px 13px 14px}
/* three lines max, and the reserved height keeps the card bottoms level across the row */
.bcard h3{min-height:55px;font:700 13.5px/1.36 var(--font-head);color:var(--text);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  transition:color .2s}
.bcard:hover h3,.bcard:focus-visible h3{color:var(--pink-600)}
@media (prefers-reduced-motion:reduce){.bcard,.bcard .art img{transition:none}}

/* ---------- PLATFORM STATS (logged-out only) ----------
   Four live figures under the deposit bar. White strip, hairline cells, one tinted icon each.
   Every digit is a roller (.od) so the numbers tick like a meter: a fast count-up on first
   view that settles into the last digits, then each figure keeps moving at its own pace.
   DEV: figures are placeholders — data-count is the value, data-live the ticking rate. */
.pstats,.exch{display:none}
.app.is-guest .pstats{display:block}
.app.is-guest .exch{display:block}
/* the jackpot header's "Tickets available" counter is somebody's balance */
.app.is-guest .jackpot .tbox{display:none}
/* ---- guest hero: boxes 2 (free games / quiz) and 3 (wheel / jackpot) are hidden, and the
   banner takes the whole row at a height that lets it read as a proper landing hero ---- */
.app.is-guest #ticketsBox,.app.is-guest #wofBox{display:none}
.app.is-guest .hero{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;height:auto}
.app.is-guest .slider{grid-column:1/-1;height:clamp(270px,21vw,320px)}
/* a narrower banner: the copy takes the full width over a stronger shade */
@media (max-width:1100px){
  .slide.guest-promo .copy{max-width:none;padding:26px 34px}
  .slide.guest-promo .shade{background:linear-gradient(90deg,rgba(27,31,82,.88) 0%,rgba(27,31,82,.78) 44%,rgba(27,31,82,.32) 70%,rgba(27,31,82,0) 88%)}
  .slide .gp-title{font-size:26px}
  /* the copy runs over the art at these widths: a soft shadow keeps it legible (gold $FUN: drop-shadow, it is gradient text) */
  .slide.guest-promo .gp-title,.slide.guest-promo .gp-sub{text-shadow:0 2px 14px rgba(22,24,64,.75),0 1px 3px rgba(22,24,64,.5)}
  .slide.guest-promo .gp-title em{text-shadow:none;filter:drop-shadow(0 2px 6px rgba(22,24,64,.6))}
}
/* phones (rebuilt Sept 30 2026: "buttons are too big, text is left side"): the portrait art fills
   the card, the scene sits in the top half, and a centred block sits on the dark space below it:
   headline, sub-line, a small "Sign up free with" caption and two compact pills side by side */
@media (max-width:720px){
  .app.is-guest .slider{height:450px}
  .slide.guest-promo img{object-fit:cover;object-position:center top}
  /* the calm twilight art (Sept 30 2026: the neon one was "too much for the mobile version"): the
     fade and the card use the art's own indigo, not black */
  .slide.guest-promo{background:#262a5c}
  .slide.guest-promo .shade{background:linear-gradient(180deg,rgba(38,42,92,0) 0%,rgba(38,42,92,0) 36%,rgba(38,42,92,.7) 48%,rgba(34,38,86,.9) 60%,rgba(30,34,80,.94) 100%)}
  .slide.guest-promo .copy{display:flex;flex-direction:column;justify-content:flex-end;align-items:center;text-align:center;max-width:none;padding:20px 20px 20px;gap:0}
  .slide .gp-title{align-items:center;font-size:26px;line-height:1.12;white-space:normal;overflow:visible;text-shadow:0 2px 16px rgba(22,24,64,.7),0 1px 3px rgba(22,24,64,.5)}   /* keeps it legible where it crosses the island's glow */
  .slide .gp-title em{text-shadow:none;filter:drop-shadow(0 2px 6px rgba(22,24,64,.6))}   /* gradient text: a text-shadow would show through it */
  .slide .gp-title span{overflow:visible;text-overflow:clip;text-wrap:balance}
  .slide .gp-sub{display:block;max-width:300px;margin:10px auto 0;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.74);text-wrap:balance}
  .slide .gp-or{display:block;margin:18px 0 9px;font:700 10px/1 var(--font-head);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.62)}
  .gp-ctas{flex-wrap:nowrap;justify-content:center;gap:10px;width:100%;margin-top:0}
  .gp-ctas .gp-btn{flex:1 1 0;max-width:150px;height:44px;padding:0 14px;gap:8px;font-size:14px}
  .gp-ctas .gp-w{display:none}
  .gp-ctas .tg-dot{width:21px;height:21px}
}

/* Play Games: no Most Played row for a visitor: there is no history behind it.
   The category chips show for everyone, filled from site-wide stats. */
.pg-head{margin-top:26px}
.app.is-guest .mostplayed{display:none}
.app.is-guest .pg-head{margin-top:0}
.app.is-guest .pg-head .link[data-auth-only]{display:none}   /* no "See all games" for a visitor (client, Sept 30 2026) */
/* quiet on purpose (client: "faded, gray, not that highlighted and smaller height"): a
   translucent strip with a hairline, no shadow, grey glyphs instead of coloured tiles, and the
   figure and its label on one line */
.pstat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  background:rgba(255,255,255,.55);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.pstat{display:flex;align-items:center;gap:10px;min-width:0;padding:13px 20px}
.pstat+.pstat{border-left:1px solid var(--line)}
.ps-ic{flex:none;display:grid;place-items:center;color:var(--muted)}
.ps-ic .icon{width:18px;height:18px;stroke-width:1.9}
.ps-txt{min-width:0;display:flex;flex-direction:row;align-items:baseline;flex-wrap:wrap;gap:0 7px}
/* the figure: the roller and its unit sit on one line, the unit dropping under it only when
   a cell is too narrow (phones) */
.pstat b{display:flex;flex-wrap:wrap;align-items:flex-end;gap:2px 4px;font:700 19px/1 var(--font-head);letter-spacing:-.01em;color:var(--text-2);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.pstat b em{font:600 11px/1 var(--font-body);font-style:normal;letter-spacing:.02em;color:#64748b;padding-bottom:2px}
.pstat small{display:flex;align-items:center;gap:6px;font:600 10.5px var(--font-body);letter-spacing:.07em;text-transform:uppercase;color:#64748b;white-space:nowrap}
/* the rollers: one 1ch-wide window per digit, a 0–9 (+0) column sliding behind it */
.odo{position:relative;display:inline-flex;align-items:flex-end;line-height:1;white-space:nowrap}
.odo .od{position:relative;display:block;width:1ch;height:1em;overflow:hidden}
/* three runs of 0-9 drawn as generated content: the digits are pixels, not page text, so
   crawlers and copy-paste see only the real figure (in .odo-val) */
.odo .odc{display:block;text-align:center;will-change:transform;transition:transform .36s cubic-bezier(.2,.8,.2,1)}
.odo .odc::before{content:"0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";display:block;white-space:pre;line-height:1}
.odo.fast .odc,.odo .odc.snap{transition:none}
.odo .ods{display:block;height:1em;line-height:1}
.odo .ods::before{content:attr(data-c)}
.odo-val{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* the pulse says "live" without a word */
.live-dot{display:none}   /* dropped when the strip was quietened; the ticking digits say "live" */
@media (prefers-reduced-motion:reduce){.odo .odc{transition:none}}

/* ---------- EXCHANGES (logged-out only) ----------
   Where $FUN trades. Six logo tiles, the same light card as the game tiles; each is a link
   to that market. The logos load from the client's own CDN. Deliberately NOT a highlighted
   panel — the client tried that and asked for this plain version back. */
.exch-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px}
.exch-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;min-height:96px;padding:16px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-sm);color:var(--text-2);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .2s,color .2s}
.exch-tile:hover,.exch-tile:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(238,27,99,.4);color:var(--text)}
.exch-tile img{display:block;height:34px;width:auto;max-width:120px;object-fit:contain}
.exch-tile span{font:600 12px var(--font-body);letter-spacing:.01em;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.exch-tile{transition:none}}
@media (max-width:1100px){
  .pstat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pstat:nth-child(3){border-left:0}
  .pstat:nth-child(n+3){border-top:1px solid var(--line)}
  .exch-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .pstat{gap:8px;padding:10px 12px}
  .ps-ic .icon{width:15px;height:15px}
  .ps-txt{flex-direction:column;align-items:flex-start;gap:3px}
  .pstat b{font-size:16px}
  .pstat b em{font-size:10px}
  .pstat small{font-size:9.5px}
  .exch-grid{gap:10px}
  .exch-tile{min-height:84px;padding:12px 8px;gap:8px}
  .exch-tile img{height:28px;max-width:88px}
  .exch-tile span{font-size:11px}
}

/* wraps in BOTH states: the guest footer needs a second row for its links, and on a small phone
   the logged-in footer needs one too — without this the copyright crushed to three lines at 375px
   and pushed 23px past the viewport at 320px, scrolling the whole page sideways. */
.footer{background:var(--navy);color:#fff;padding:18px 28px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;row-gap:12px}
.footer .soc{display:flex;gap:10px}
.footer .soc a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff}
.footer .soc a:hover{background:var(--pink)}
.footer .right{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:12px;color:rgba(255,255,255,.75)}
.footer .right b{background:var(--pink);color:#fff;border-radius:6px;padding:3px 7px;font-size:11px}

/* =========================================================
   11. RESPONSIVE
   ========================================================= */
@media (max-width:1500px){
  .slide .ico,.slide-count,.xtra{display:none} /* narrow columns: drop the icon, counter and long pill text */
}
@media (max-width:1100px){
  thead th:nth-child(3),tbody td:nth-child(3){display:none}
}
@media (max-width:1240px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:238px 238px;height:auto}
  .slider{grid-column:1/-1}
  .gcard{width:calc((100% - 3*16px)/4)}
  .fgcard{width:calc((100% - 3*16px)/4)}
  .bcard{width:calc((100% - 3*16px)/4)}
  thead th:nth-child(3),tbody td:nth-child(3){display:none}
}
@media (max-width:900px){
  .jrow{grid-template-columns:1fr 1fr}
  .tbox{width:100%}
  /* full width, the counter reads as a row: label on the left, count on the right, no dead space */
  .tbox .v{flex:1;min-width:0;display:flex;flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:12px}
  .tbox small{margin-top:0;font-size:10px}
  .panel .pttl{width:100%}
  .panel .phead .kpis{width:100%}
  .panel .phead .kpi{flex:1;min-width:0}
  .panel .phead .tabs{margin-left:0}
  .search{display:none}
  .chip.price{display:none}
  .header{padding:0 16px}.content{padding:8px 16px 32px}
  .fgcard{width:calc((100% - 2*16px)/3)}
  .bcard{width:calc((100% - 2*16px)/3)}
}
@media (max-width:720px){
  .app{grid-template-columns:1fr}
  /* off-canvas drawer: scrolls internally so it still works in landscape */
  /* the inner column already scrolls; a second scroller here would fight it */
  .sidebar{position:fixed;left:0;top:0;width:var(--sidebar-w);max-width:86vw;transform:translateX(-100%);transition:transform .3s;box-shadow:var(--shadow-lg);z-index:60}
  .nav-price{display:flex}   /* the header hides the price chip this small, so the drawer shows it */
  .sidebar.open{transform:none}
  .scrim{position:fixed;inset:0;z-index:55;background:rgba(9,17,40,.5);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s}
  .scrim.show{opacity:1;pointer-events:auto}
  body.nav-open{overflow:hidden}
  .sidebar .brand img{height:34px;width:auto;object-fit:contain}
  .nav a{justify-content:flex-start}.nav a span,.nav .pill,.nav-label{display:flex}
  .rail-toggle{display:none} /* the drawer replaces the rail on phones */
  .burger{display:grid}
  .hero{grid-template-columns:1fr;grid-template-rows:auto;gap:12px}
  /* the three promo cards are much shorter on phones so they don't eat the fold */
  .slider{height:120px}
  /* compact slide copy so it fits the shorter card without clipping the CTA */
  .slide .copy{padding:9px 12px 8px;gap:5px}
  .slide .row1{padding-right:62px} /* only the dots remain in the corner cluster */
  .slide .ico{display:none}
  .slide :is(h1,h2){font-size:13.5px}
  .slide .txt{gap:3px}
  .slide p{display:none} /* the headline and pills carry the offer on phones */
  .slide-count{display:none}
  .segs{display:none}          /* the 30-dot streak bar needs width we don't have; the day pill carries it */
  .slide .prog{display:none}   /* same for the wagered bar; the tier pill carries it */
  .pill-dark.green,.pill-dark.tier{display:none}
  .pill-dark{height:24px;padding:0 9px;font-size:10px}
  .slide .cta{height:28px;font-size:11px;padding:0 13px}
  .slide .row3 .cta{margin-left:0}
  .gcard{width:calc((100% - 16px)/2)}
  /* the next tile peeks, so the row reads as swipeable without an arrow */
  .fgcard{width:45%}
  .bcard{width:62%}
  .bcard h3{min-height:0;font-size:12.5px}
  .section-head{flex-wrap:wrap}
  /* phones: a full-width ticket bar. Count + "tickets" on the pink cap; the countdown sits on the
     right with its progress as a real bar under it (the desktop pill's 2px edge read as an input) */
  .tkchip{order:3;width:100%;margin-left:0;margin-top:-2px;height:48px;border-radius:14px;
    display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:1fr 1fr;column-gap:12px}
  .tkchip .cap{grid-row:1/3;gap:7px;padding:0 15px 0 14px}
  .tkchip .cap .icon{width:17px;height:17px}
  .tkchip .n{font-size:18px}
  .tkchip .u{display:inline;font:700 12.5px/1 var(--font-body)}
  .tkchip .nx{display:contents}
  .tkchip .nx .lbl-text{grid-column:2;grid-row:1;align-self:end;padding-bottom:5px;color:var(--text-2)}
  .tkchip .nx b{grid-column:3;grid-row:1;align-self:end;padding:0 14px 4px 0;font-size:15px}
  .tkchip .fill{position:static;grid-column:2/4;grid-row:2;align-self:start;width:auto;height:5px;margin:3px 14px 0 0;border-radius:5px;
    background:linear-gradient(90deg,var(--pink),var(--gold)) 0 0/calc(var(--p,0) * 100%) 100% no-repeat,#eceef5;transition:background-size 1s linear}
  .freegames .tools{order:2;margin-left:auto}
  thead th:nth-child(3),tbody td:nth-child(3){display:none}
  .chip.balance small{display:none}
  .section-head{gap:10px}
  .section-head .sub{display:none} /* the strapline wraps to three lines beside the title on phones */
  /* ---- every block gets tighter on phones ---- */
  .content{gap:18px}
  .section-head{margin-bottom:10px}
  .section-head h2{font-size:17px}
  .section-head h2 .mark{width:24px;height:24px}
  /* the 28px desktop radius is far too round on an 84px-tall box */
  .card3d{border-radius:14px}

  /* ---- BANNER BOXES ON PHONES ----
     Box 1: two tight text lines left, wide CTA centred right.
     Box 2: countdown lives inside the pending ticket; CTA centred right.
     Box 3: wheel and jackpot side by side, no CTAs. */

  /* box 1 — slider */
  .slider{height:84px}
  .slide .copy{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;align-content:center;align-items:center;column-gap:10px;row-gap:4px;padding:8px 12px}
  .slide .row1{grid-column:1;grid-row:1;padding-right:0;gap:0;min-width:0}
  .slide .row2{grid-column:1;grid-row:2;gap:5px;min-width:0;flex-wrap:nowrap}
  .slide .row3{grid-column:2;grid-row:1 / span 2;align-self:center;gap:0}
  .slide .prog{display:none}   /* the wagered bar is desktop-only */
  .slide .ico{display:none}
  .slide .txt{display:block;min-width:0;gap:0}
  .slide :is(h1,h2){display:flex;align-items:center;gap:6px;font-size:11.5px;line-height:1.15;white-space:nowrap;overflow:hidden}
  .slide :is(h1,h2)>span:first-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .slide p{display:none}
  .segs{display:none}
  /* the counter stays, just tiny, bottom-right with the dots */
  /* on a phone the clock sits on the same line as the rewards, not over the CTA */
  .promo-clock{position:static;flex:none;height:20px;padding:0 7px;gap:4px;border-radius:7px}
  .promo-clock .icon{width:11px;height:11px}
  .promo-clock span{display:none}   /* the clock icon already says what it is */
  .promo-clock b{font-size:10px}
  .rwd{flex:none;height:20px;padding:0 7px;gap:4px;font-size:0;border-radius:7px}
  .rwd .icon{width:11px;height:11px}
  .rwd b{font-size:11px}
  /* both rewards stay on a phone — they are the offer; only the wording drops,
     the icon carries the meaning */
  .rwd.green .icon{width:10px;height:10px}
  .more-link{display:none}
  .pill-dark.green,.pill-dark.tier{display:none}
  .pill-dark{height:20px;padding:0 8px;font-size:9.5px}
  .pill-dark.live{height:16px;padding:0 6px}
  .slide .cta{min-width:104px;justify-content:center;height:32px;font-size:11.5px;padding:0 14px;margin-left:0;white-space:nowrap}
  .cta-more,.h-more{display:none} /* short headline + CTA label, so neither ever truncates */
  .slider-ui{bottom:6px;right:8px;padding:3px 7px;gap:6px}
  .dots button{width:5px;height:5px}
  .dots button.is-active{width:13px}
  .slider-arrows{display:none}

  /* box 2 — free game tickets (countdown sits inside the pending ticket) */


  /* boxes 2 and 3 — two halves side by side; inside each one, icon left and copy right */
  .wof,.tickets{height:84px}
  .wof .inner,.tickets .inner{flex-direction:row;align-items:stretch;padding:8px;gap:4px}
  .half.t .art{width:42px;height:42px}
  .tk-glyph{width:38px;height:26px;border-radius:6px}
  .tk-glyph::before{left:5px;right:5px}
  .q-glyph{width:44px;height:44px}
  .pips{gap:3px}
  .pip{width:14px;height:2.5px}
  .split{flex:none;width:2px;height:auto;margin:3px 0;background-image:radial-gradient(circle,rgba(255,255,255,.55) 1.2px,transparent 1.6px);background-size:2px 8px;background-repeat:repeat-y;
    -webkit-mask:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent);mask:linear-gradient(180deg,transparent,#000 10%,#000 90%,transparent)}
  .split::before,.split i{display:none}
  .half{flex-direction:row;justify-content:center;align-items:center;text-align:left;gap:8px;padding:0 2px}
  /* the bleed has to match this breakpoint's .inner padding (8px, not 12px) */
  .half.t{margin:-8px 0 -8px -8px;padding:0 6px 0 10px;border-radius:14px 0 0 14px}
  .half.t::after{inset:8px 0 8px 8px}   /* the tint stays inside the same bleed */
  .half.t .chev,.half.t .go{right:8px}
  .half .art{flex:none;width:46px;height:46px}
  .half .txt{flex:0 1 auto;min-width:0;align-items:flex-start;text-align:left;gap:1px}
  .half small{font-size:7.5px;letter-spacing:.05em}
  .half b{font-size:17px}
  .half.t .n em{font-size:10px}
  .half .n{gap:5px;justify-content:flex-start}
  .half .si{width:11px;height:11px}
  .half .chev,.half .go{display:none}   /* no CTAs in this box on phones */
  .half.j .art{width:44px;height:44px}
  .half.j .n b{font-size:16px}
  .half.j .n em{font-size:8px}
  .jt-tk{width:34px;height:23px;margin:-11.5px -17px;border-radius:5px}
  .jt-tk.top .star{width:9px;height:9px;margin:-4.5px}
  /* wheel sized to sit as the left-hand icon */
  .wheel-3d{width:46px;height:46px;margin-top:0}
  .wheel-edge{box-shadow:0 0 0 2.5px #4a2f62}
  .wheel-face::after{inset:-3.5px;padding:3.5px}
  .wheel-face .ic,.wheel-face .ic svg{width:9px;height:9px}
  .wheel-face .ic{margin:-4.5px;transform:rotate(var(--a)) translateY(-16px) rotate(calc(-1*var(--a)))}
  .wheel-hub{width:18px;height:18px;margin:-9px;font-size:7px;box-shadow:0 0 0 2px #1a1030,0 3px 8px rgba(0,0,0,.5)}
  .wheel-pointer{width:11px;height:8px;margin-left:-5.5px;top:-6px}
  .wheel-glow{inset:-10px}
  .gcard{width:calc((100% - 16px)/2)}
  thead th:nth-child(3),tbody td:nth-child(3){display:none}
  .chip.balance small{display:none}
  .section-head{gap:10px}
  .section-head .sub{display:none} /* the strapline wraps to three lines beside the title on phones */
  /* ---- every block gets tighter on phones ---- */
  .content{gap:18px}
  .section-head{margin-bottom:10px}
  .section-head h2{font-size:17px}
  .section-head h2 .mark{width:24px;height:24px}
  /* hero: one more trim */
  /* jackpot: shorter panel, smaller tiles and counter */
  .jackpot{padding:13px 12px;gap:11px;border-radius:var(--r-lg)}
  .jttl h2{font-size:16px;line-height:1.2}
  .jttl .eyebrow{font-size:9.5px}
  .tbox{height:50px;padding:0 16px 0 8px;gap:11px;border-radius:14px}
  .tbox .ic{width:34px;height:34px;border-radius:10px}
  .tbox .ic .icon{width:18px;height:18px}
  .tbox b{font-size:23px}
  .tbox small{font-size:10.5px;letter-spacing:.1em}
  .jcard{border-radius:14px}
  .jcard .foot{bottom:9px;gap:6px}
  .jcard .nm{font-size:12px}
  .jcard .jplay{height:26px;font-size:10px;padding:0 13px}
  .jrow{gap:10px}
  .jcard{width:56%;min-width:150px}
  /* games: tighter chips and tiles */
  .cats{gap:6px;margin-bottom:12px}
  .cat{height:34px;padding:0 12px;font-size:12px}
  .cat .n{font-size:10px;padding:1px 6px}
  .row-scroll .viewport{gap:12px;padding:16px 2px 8px}
  .fgcard{width:52%;border-radius:14px}
  .fgcard .nm{font-size:11.5px}
  .gcard{width:calc((100% - 12px)/2);border-radius:15px}
  .gcard .media{border-radius:15px}
  .gcard .title{bottom:10px}
  .gcard .play{height:26px;font-size:10px;padding:0 13px}
  .gcard .b{font-size:10px;padding:4px 9px;top:-9px}
  .gcard .win{font-size:9px;padding:3px 7px;top:7px;right:7px}
  /* live bets: shorter header and rows */
  .panel .phead{padding:12px 14px;gap:11px}
  .panel .pttl{gap:8px;padding-left:10px}
  .panel .phead h2{font-size:16px}
  .kpi{height:40px;padding:0 9px;gap:7px;border-radius:10px}
  .kpi .ic{width:24px;height:24px;border-radius:7px}
  .kpi b{font-size:13px}
  .kpi small{font-size:8px}
  .tabs button{height:28px;padding:0 10px;font-size:11px}
  thead th{padding:8px 8px;font-size:9px}
  thead th:first-child,tbody td:first-child{padding-left:14px}
  thead th:last-child,tbody td:last-child{padding-right:14px}
  tbody td{padding:8px;font-size:12px}
  td .av{width:26px;height:26px;border-radius:8px}
  .tfoot{padding:9px}
  /* footer */
  .footer{padding:14px 16px}

  /* deposit on phones: identity row, then the controls side by side */
  .deposit{flex-wrap:wrap;gap:9px;padding:10px 12px 11px 15px;border-radius:var(--r-sm)}
  .dep-l{width:100%;flex:none;gap:9px}
  .dep-l .ic{width:28px;height:28px;border-radius:9px}
  .dep-l .ic .icon{width:15px;height:15px}
  .dep-ttl h2{font-size:13.5px;gap:6px}
  .dep-h{gap:6px}
  .dep-offer{font-size:9px;padding:2px 6px}
  .dep-ttl small{font-size:10px;margin-top:1px}
  .dep-blurb{display:none} /* let the live rate have the whole line on phones */
  .dep-actions{width:100%;gap:7px}
  .tok-select{flex:1}
  .tok-trigger{width:100%;height:34px;font-size:12px;border-radius:10px;padding:0 10px}
  .tok-trigger .lbl{flex:1}
  .dep-go{flex:none;height:34px;padding:0 16px;font-size:12.5px}
  .tok-menu{left:0;right:auto;min-width:100%}
  /* full-width segmented tabs read better than a left-aligned group */
  .panel .phead .tabs{width:100%}
  .panel .phead .tabs button{flex:1}
}
/* phones: the four jackpot tiles scroll instead of shrinking to thumbnails */
@media (max-width:560px){
  .jrow{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding-bottom:2px}
  .jrow::-webkit-scrollbar{display:none}
  .jcard{flex:none;width:62%;min-width:172px;scroll-snap-align:start}
  .jttl h2{font-size:19px}
  .jackpot{padding:18px 16px}
}
/* very small phones */
@media (max-width:400px){
  .content{padding:8px 12px 28px}
  .header{padding:0 12px}
  .hright{gap:7px}
  .chip.balance{padding:0 11px;font-size:12px}
  .btn-sm{padding:0 11px}
  .pip{width:12px}
  .gcard .title b{font-size:11.5px}
  .jttl p{display:none} /* keep the jackpot header short on tiny screens */
}
/* short landscape phones: give the hero cards less height so the fold still shows content */
@media (max-height:480px) and (orientation:landscape){
  .slider{height:200px}
  .tickets,.wof{height:210px}
  .header{height:56px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ===================== GUEST (PRE-LOGIN) STATE ===================== */
/* One page serves both states. `.app.is-guest` is the logged-out view: everything tied to an
   account (balance, avatar, wallet actions, personal counters, the Link & earn card) gives way
   to invitations, and every play action opens the login / sign-up popup instead of the game.
   */

/* ---- header: Log in / Sign up replace the balance, avatar and Deposit ---- */
.hauth{display:none;align-items:center;gap:8px}
.btn-ghost{background:var(--surface);color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:var(--muted);background:var(--surface-2)}
.app.is-guest .hright .chip.balance,
.app.is-guest .hright .user,
.app.is-guest .hright a.btn-deposit{display:none}
.app.is-guest .hauth{display:inline-flex}

/* ---- hero slides: the streak slide is meaningless without an account, and two reward
   slides only make sense before one exists ---- */
.app.is-guest .slide[data-auth-only]{display:none}
.slide[data-guest-only]{display:none}
.app.is-guest .slide[data-guest-only]{display:grid}

/* ---- hero box 2: tickets + quiz become free games + quiz teaser ---- */
/* a visitor has no tickets and no quiz, but the free games are open to anyone */
.tickets [data-guest-only]{display:none}
.app.is-guest .tickets [data-auth-only]{display:none}
.app.is-guest .tickets small[data-guest-only],.app.is-guest .tickets .sub[data-guest-only],
.app.is-guest .tickets .fg-stack[data-guest-only]{display:block}
.app.is-guest .tickets .n[data-guest-only]{display:flex}
.half .sub{font:600 11px/1.3 var(--font-body);color:rgba(255,255,255,.66)}
/* three covers, fanned like a hand of cards, where the ticket glyph was */
.fg-stack{position:relative;width:56px;height:36px}
.fg-stack img{position:absolute;top:2px;width:30px;height:30px;border-radius:7px;object-fit:cover;
  border:1.5px solid rgba(255,255,255,.85);box-shadow:0 6px 14px -6px rgba(0,0,0,.65)}
.fg-stack img:nth-child(1){left:0;transform:rotate(-9deg)}
.fg-stack img:nth-child(2){left:13px;top:0;z-index:1}
.fg-stack img:nth-child(3){left:26px;transform:rotate(9deg)}
/* the quiz headline is words, not a clock: smaller, and wrapping clear of the hover CTA */
.half.q .q-earn{font-size:16px;line-height:1.12;letter-spacing:0;white-space:normal}
.app.is-guest .half.q .txt{padding-right:74px}
/* the demo quiz still flips to "ready" on its timer; for a visitor that state means nothing */
.app.is-guest .half.q.ready .go{opacity:0;transform:translate(8px,-50%);pointer-events:none}
.app.is-guest .half.q.ready:hover .go,.app.is-guest .half.q.ready:focus-visible .go{opacity:1;transform:translate(0,-50%);pointer-events:auto}
.app.is-guest .half.q.ready .chev{opacity:1}
.app.is-guest .half.q.ready:hover .chev{opacity:0}
.app.is-guest .half.q.ready b{color:#fff}
/* the Free Games row: no ticket counter for a visitor, the games are simply free */
.app.is-guest .tkchip{display:none}
@media (max-width:720px){
  .fg-stack{width:42px;height:28px}
  .fg-stack img{width:24px;height:24px;border-width:1px}
  .fg-stack img:nth-child(2){left:9px}
  .fg-stack img:nth-child(3){left:18px}
  /* the label and the headline carry it on phones; the selector has to outrank the guest
     "show" rule above, which is why it names the state */
  .half .sub,.app.is-guest .tickets .sub[data-guest-only]{display:none}
  .half.q .q-earn{font-size:13px}
  .app.is-guest .half.q .txt{padding-right:0}  /* no hover CTA to clear on phones */
}

/* =========================================================
   GUEST LAYOUT — the logged-out page as one calm landing page
   hero → Stats → Play Games → Win Free $FUN Every Hour → Free Games → $FUN band (Instant
   Deposit · Exchanges) → Jackpot Minigames → Blog → closing sign-up.
   The additions are flags on .app: opt-earn, opt-join, opt-footer, opt-tiles, opt-marks. All five
   are on (the client kept them all; the preview-only options panel was removed Sept 29 2026).
   ========================================================= */
.fun-band{display:contents}
/* ---- stats: the banner's bottom edge curves up into a notch and the stats capsule sits in it
   (client, Oct 1 2026: "where the banner ends there should be curved at the end of the banner at
   the bottom and in that curve we can put stats"). The notch is cut with a mask on the banner:
   it has the capsule's shape plus a --sp-g gap, with smooth shoulders (fillet radius --sp-f) where
   it meets the bottom edge. Because the mask clips the card's own shadow, the hero carries a
   drop-shadow that follows the curve. The banner grows by the notch depth, and its copy box ends
   above it.
   Geometry, with R = capsule half-height + gap and f = the fillet radius:
     --sp-bw = sqrt((R+f)² − f²)   --sp-bh = f·R/(R+f)   --sp-fy = f²/(R+f)
   --sp-pad (the capsule's inset from the banner sides) must leave room for the shoulders inside
   the banner's 28px corner. ---- */
.app.is-guest{--sp-pad:90px;--sp-max:1060px;--ps-o:25px;--sp-g:7px;--sp-R:32px;--sp-f:18px;--sp-bw:46.65px;--sp-bh:11.52px;--sp-fy:6.48px}
.app.is-guest .hero{--ps-h:var(--sp-R);container-type:inline-size;filter:drop-shadow(0 14px 18px rgba(15,27,61,.2))}
.app.is-guest .slider{height:calc(clamp(270px,21vw,320px) + var(--ps-h));box-shadow:none;
  --cw:min(100cqw - 2 * var(--sp-pad),var(--sp-max));           /* the capsule's width: same formula as #stats below */
  --ax:calc(var(--cw) / 2 + var(--sp-g) - var(--sp-R));          /* from the centre to each end circle's centre */
  -webkit-mask:none;
  mask:
    linear-gradient(#000 0 0),
    linear-gradient(#000 0 0) 50% 100% / calc(2 * var(--ax)) var(--sp-R) no-repeat,
    radial-gradient(closest-side,#000 calc(100% - 1px),transparent) calc(50% - var(--ax)) calc(100% + var(--sp-R)) / calc(2 * var(--sp-R)) calc(2 * var(--sp-R)) no-repeat,
    radial-gradient(closest-side,#000 calc(100% - 1px),transparent) calc(50% + var(--ax)) calc(100% + var(--sp-R)) / calc(2 * var(--sp-R)) calc(2 * var(--sp-R)) no-repeat,
    radial-gradient(circle at 0 calc(-1 * var(--sp-fy)),transparent calc(var(--sp-f) - .5px),#000 calc(var(--sp-f) + .5px)) calc(50% - var(--ax) - var(--sp-bw) / 2) 100% / var(--sp-bw) var(--sp-bh) no-repeat,
    radial-gradient(circle at 100% calc(-1 * var(--sp-fy)),transparent calc(var(--sp-f) - .5px),#000 calc(var(--sp-f) + .5px)) calc(50% + var(--ax) + var(--sp-bw) / 2) 100% / var(--sp-bw) var(--sp-bh) no-repeat;
  mask-composite:subtract,add,add,add,add,add}
.app.is-guest .slide.guest-promo .copy{height:calc(100% - var(--ps-h))}
.app.is-guest #stats{position:relative;z-index:3;display:flex;justify-content:center;margin-top:calc(-34px - var(--ps-o))}
.app.is-guest .pstat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100% - 2 * var(--sp-pad),var(--sp-max));height:50px;padding:0 8px;gap:0;
  border:0;border-radius:999px;overflow:visible;
  background:linear-gradient(100deg,#0c1033 0%,#131848 50%,#1a1450 100%);   /* darker than the banner so the capsule reads as its own piece */
  box-shadow:0 16px 30px -16px rgba(12,16,51,.7),inset 0 1px 0 rgba(255,255,255,.1)}
.app.is-guest .pstat{--ps:255,122,168;position:relative;display:flex;align-items:center;justify-content:center;gap:10px;height:100%;padding:0 12px;border-radius:0;background:none}
.app.is-guest .pstat,.app.is-guest .pstat:nth-child(n){border:0}   /* the logged-in strip's dividers */
.app.is-guest .pstat+.pstat::before{content:"";position:absolute;left:0;top:13px;bottom:13px;width:1px;background:rgba(255,255,255,.14)}
.app.is-guest .pstat.drops{--ps:255,214,107}
.app.is-guest .pstat.games{--ps:74,222,159}
.app.is-guest .pstat.wager{--ps:122,167,255}
.app.is-guest .ps-ic{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(var(--ps),.16);color:rgb(var(--ps));
  box-shadow:inset 0 0 0 1px rgba(var(--ps),.3)}
.app.is-guest .ps-ic .icon{width:15px;height:15px;stroke-width:2.1}
.app.is-guest .ps-txt{min-width:0;flex-direction:column;align-items:flex-start;gap:4px}
.app.is-guest .pstat b{font-size:17px;color:#fff;text-shadow:none}
.app.is-guest .pstat b em{font-size:10px;color:#ffd66b;padding-bottom:2px}
.app.is-guest .pstat small{font-size:9.5px;letter-spacing:.07em;color:rgba(255,255,255,.66);white-space:nowrap}
.app.is-guest .pstat .live-dot{display:inline-block;flex:none;width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 0 3px rgba(52,211,153,.2)}
@media (max-width:1100px){
  .app.is-guest{--sp-pad:70px}
  .app.is-guest .pstat b{font-size:15px}
}
@media (max-width:1000px){
  .app.is-guest .pstat{gap:8px;padding:0 9px}
  .app.is-guest .ps-ic{width:26px;height:26px}
  .app.is-guest .ps-ic .icon{width:13px;height:13px}
  .app.is-guest .pstat b{font-size:14px}
}
@media (max-width:900px){
  /* smaller shoulders (f 14) so the narrower inset still clears the corner */
  .app.is-guest{--sp-pad:56px;--sp-f:14px;--sp-bw:43.82px;--sp-bh:9.74px;--sp-fy:4.26px}
  .app.is-guest .pstat{gap:7px;padding:0 7px}
  .app.is-guest .ps-ic{width:24px;height:24px}
  .app.is-guest .ps-ic .icon{width:12px;height:12px}
  .app.is-guest .pstat b{font-size:13px;flex-wrap:nowrap}
}
@media (max-width:860px){ .app.is-guest .ps-ic{display:none} }   /* four narrow columns: the figures need the room */
@media (max-width:800px){
  .app.is-guest{--sp-pad:48px}
  .app.is-guest .pstat b{font-size:12.5px}
}
@media (max-width:720px){
  /* phones: a 2×2 rounded panel (radius 22 = its overlap), so the same notch maths applies with
     R = 22 + 6 and f = 12; the 14px card corner needs a 40px inset */
  .app.is-guest{--sp-pad:40px;--ps-o:22px;--sp-g:6px;--sp-R:28px;--sp-f:12px;--sp-bw:38.16px;--sp-bh:8.4px;--sp-fy:3.6px}
  .app.is-guest .slider{height:calc(500px + var(--ps-h))}      /* the copy block starts below the island's games */
  .app.is-guest #stats{margin-top:calc(-18px - var(--ps-o))}
  .app.is-guest .pstat-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:40px 40px;height:auto;padding:4px;border-radius:22px}
  .app.is-guest .pstat{justify-content:flex-start;padding:0 9px}
  .app.is-guest .pstat:nth-child(3)::before{display:none}
  .app.is-guest .pstat:nth-child(n+3)::after{content:"";position:absolute;top:0;left:9px;right:9px;height:1px;background:rgba(255,255,255,.12)}
  .app.is-guest .pstat b{font-size:13.5px}
}
@media (max-width:359px){
  .app.is-guest{--sp-pad:30px;--sp-f:10px;--sp-bw:36.66px;--sp-bh:7.37px;--sp-fy:2.63px}
  .app.is-guest .pstat{padding:0 5px}
  .app.is-guest .pstat b{font-size:12px}
}
.earn,.join,.flinks,.hbrand{display:none}

/* ---- section heads for guests: readable straplines (muted #8a94a8 was 2.9:1) ---- */
.app.is-guest .section-head .sub{color:var(--text-2)}
.app.is-guest.opt-marks .section-head h2 .mark{display:none}     /* opt-marks: no pink squares */

/* ---- the two game rows read as one area ---- */
.app.is-guest .freegames .tools{margin-left:auto}                 /* arrows pinned right, like Play Games */
.app.is-guest .fgcard .lvl{display:none}                          /* no levels for a visitor (client) */
.app.is-guest.opt-tiles .gcard .b.wager,.app.is-guest.opt-tiles .gcard .b.promo{display:none}   /* opt-tiles */
.app.is-guest.opt-tiles .fgcard .play{background:var(--surface);color:var(--text);border:1.5px solid var(--line);box-shadow:none}
.app.is-guest.opt-tiles .fgcard:hover .play,.app.is-guest.opt-tiles .fgcard:focus-visible .play{background:var(--surface);color:var(--pink-600);border-color:var(--pink)}

/* ---- Win Free $FUN Every Hour (opt-earn) ----
   Four cards, each a FUN-coin illustration on one shared stage. The stage is neutral
   on purpose: the brand pink comes from the coins themselves, so the four read as one set
   instead of four colour-coded boxes. */
.app.is-guest.opt-earn .earn{display:block}
/* the Free Games card is a link to the Free Games section: the title link stretches over the card */
.earn-card.is-link{cursor:pointer}
.ec-a{color:inherit;display:inline-flex;align-items:center;gap:6px}
.ec-a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
.ec-a:focus-visible{outline:none}
.earn-card.is-link:has(.ec-a:focus-visible){outline:3px solid var(--pink);outline-offset:2px}
.ec-go{width:15px;height:15px;flex:none;fill:none;stroke:var(--pink-600);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.earn-card.is-link:hover .ec-go{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.ec-go{transition:none}.earn-card.is-link:hover .ec-go{transform:none}}
.ec-coin{flex:none;width:30px;height:32px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(238,27,99,.28))}
.earn-intro{margin:-6px 0 18px;max-width:640px;font-size:14px;line-height:1.55;color:var(--text-2)}
.earn-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.earn-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;background:var(--surface);
  border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .2s}
.earn-card:hover{transform:translateY(-4px);box-shadow:0 22px 40px -24px rgba(209,16,90,.35),var(--shadow-sm);border-color:rgba(238,27,99,.3)}
/* the stage: a soft spotlight on a cool-to-blush wash, with a faint pink floor glow under the art */
.ec-media{position:relative;isolation:isolate;height:172px;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(58% 60% at 50% 40%,#fff 0%,rgba(255,255,255,0) 72%),linear-gradient(180deg,#f5f7fc 0%,#fdf1f6 100%)}
.ec-media::after{content:"";position:absolute;z-index:-1;left:50%;bottom:14px;width:62%;height:22px;transform:translateX(-50%);
  border-radius:50%;background:radial-gradient(closest-side,rgba(238,27,99,.26),rgba(238,27,99,0))}
.ec-media img{display:block;width:auto;height:146px;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(120,20,70,.18));
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.earn-card:hover .ec-media img{transform:translateY(-5px) scale(1.04)}
.ec-body{padding:16px 18px 20px}
.earn-card h3{margin:0;font:700 16px/1.3 var(--font-head);color:var(--text);text-wrap:balance}
.earn-card p{margin:8px 0 0;font-size:13.5px;line-height:1.55;color:var(--text-2);text-wrap:pretty}
@media (prefers-reduced-motion:reduce){.earn-card,.ec-media img{transition:none}.earn-card:hover,.earn-card:hover .ec-media img{transform:none}}

/* ---- Instant Deposit, Stats, Exchanges: three SEPARATE white sections, one after the other.
   (The wrapper stays display:contents for guests too, so each is its own block.) They sit 14px
   apart instead of the usual 34px, so they read as a set without sharing a box. ---- */
.app.is-guest .fun-band>section{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:none}
.app.is-guest .fun-band>section+section{margin-top:-20px}   /* 34px page gap - 20 = 14px between the two cards */
@media (max-width:720px){ .app.is-guest .fun-band>section+section{margin-top:-6px} }   /* phones: 18px page gap - 6 = 12px (it was overlapping by 2px) */
/* deposit: the strip without its accent bar or glows */
.app.is-guest .fun-band .deposit{padding:18px 24px}
.app.is-guest .fun-band .deposit::before{display:none}
.app.is-guest .fun-band .dep-l .ic{background:var(--pink-100);color:var(--pink-600);box-shadow:none}
.app.is-guest .fun-band .dep-offer{background:var(--green-100);border-color:transparent}
/* stats: the quiet figures on white */
.app.is-guest .fun-band .pstats{padding:12px 24px}
.app.is-guest .fun-band .pstat-grid{border:0;border-radius:0;background:none}
.app.is-guest .fun-band .pstat{padding:6px 20px}
.app.is-guest .fun-band .pstat:first-child{padding-left:0}
/* exchanges: ONE compact highlighted strip (client, Sept 30 2026: "smaller but highlighted").
   Coin + title + strap on the left, six slim logo pills on the right. The highlight is light on
   purpose: a pink→gold gradient border, a faint tint at both ends and a soft pink glow, not the
   heavy navy panel that was rejected earlier. */
.app.is-guest .fun-band .exch{display:flex;align-items:center;gap:22px;padding:14px 16px 14px 18px;
  border:1.5px solid transparent;border-radius:var(--r-lg);
  background:linear-gradient(100deg,#fff2f7 0%,#fff 30%,#fff 72%,#fff8e8 100%) padding-box,
             linear-gradient(100deg,rgba(238,27,99,.6) 0%,rgba(238,27,99,.25) 45%,rgba(245,181,51,.7) 100%) border-box;
  box-shadow:0 16px 32px -26px rgba(238,27,99,.6)}
.app.is-guest .exch .section-head{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);justify-content:start;justify-items:start;align-items:center;column-gap:12px;row-gap:3px;margin:0;text-align:left}
.exch-coin{grid-row:1 / 3;display:block;width:40px;height:43px;object-fit:contain;filter:drop-shadow(0 5px 9px rgba(238,27,99,.35))}
.app.is-guest .exch .section-head h2{grid-column:2;font-size:16px;line-height:1.2;white-space:nowrap}
.app.is-guest .exch .section-head .sub{grid-column:2;display:block;margin:0;font-size:12px;line-height:1.3;color:var(--text-2);white-space:nowrap}
.app.is-guest .fun-band .exch-grid{flex:1;min-width:0;display:flex;gap:8px}
.app.is-guest .fun-band .exch-grid>li{flex:1 1 auto}   /* sized by name: PancakeSwap gets the room it needs */
.app.is-guest .fun-band .exch-tile{position:relative;flex-direction:row;justify-content:center;gap:8px;min-height:0;height:46px;padding:0 12px;
  width:100%;border-radius:12px;background:#fff;border:1px solid var(--line);box-shadow:0 1px 2px rgba(15,23,42,.05);color:var(--text);white-space:nowrap}
.app.is-guest .fun-band .exch-tile img{width:22px;height:22px;max-width:none;flex:none}
.app.is-guest .fun-band .exch-tile span{font:600 12.5px var(--font-body);color:var(--text)}
.exch-go{position:absolute;top:5px;right:5px;width:11px;height:11px;fill:none;stroke:var(--pink-600);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:0;transform:translate(-2px,2px);transition:opacity .15s,transform .15s}
.app.is-guest .fun-band .exch-tile:hover,.app.is-guest .fun-band .exch-tile:focus-visible{transform:translateY(-2px);border-color:rgba(238,27,99,.45);
  box-shadow:0 10px 20px -14px rgba(238,27,99,.55);color:var(--text)}
.app.is-guest .fun-band .exch-tile:hover .exch-go,.app.is-guest .fun-band .exch-tile:focus-visible .exch-go{opacity:1;transform:none}
.app.is-guest .fun-band .exch-tile:focus-visible{outline:2px solid var(--pink);outline-offset:2px}
@media (prefers-reduced-motion:reduce){.exch-go{transition:none}.app.is-guest .fun-band .exch-tile:hover{transform:none}}
@media (max-width:1240px){
  .app.is-guest .fun-band .exch{flex-direction:column;align-items:stretch;gap:12px}
}
@media (max-width:900px){
  /* six in a row no longer fit: two rows of three */
  .app.is-guest .fun-band .exch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
}
@media (max-width:720px){
  .app.is-guest .fun-band .exch{padding:14px}
  .app.is-guest .fun-band .exch-tile{height:42px;padding:0 6px;gap:6px}
  .app.is-guest .fun-band .exch-tile img{width:20px;height:20px}
  .app.is-guest .fun-band .exch-tile span{font-size:12px}
  .exch-coin{width:34px;height:37px}
  .app.is-guest .exch .section-head h2{font-size:15px;white-space:normal}
}
@media (max-width:440px){
  /* narrow phones: logo above name, so the longest name (PancakeSwap) always fits its pill */
  .app.is-guest .fun-band .exch-tile{flex-direction:column;height:56px;gap:4px;padding:0 4px}
  .app.is-guest .fun-band .exch-tile span{font-size:11.5px}
}

/* ---- Jackpot Minigames: an ordinary row — no panel, no glow, no copy ---- */
.app.is-guest .jackpot{background:none;box-shadow:none;border-radius:0;padding:0;gap:14px;color:var(--text);overflow:visible}
.app.is-guest .jackpot::before,.app.is-guest .jackpot::after{display:none}
.app.is-guest .jttl{gap:0;min-width:0}
.app.is-guest .jttl .eyebrow,.app.is-guest .jttl p{display:none}
.app.is-guest .jttl h2{font-size:20px;font-weight:700;line-height:1.2;color:var(--text)}
.app.is-guest .jcard{aspect-ratio:16/10;box-shadow:var(--shadow-md)}

/* ---- closing sign-up (opt-join) ---- */
.app.is-guest.opt-join .join{display:flex}
.join{align-items:center;justify-content:space-between;gap:20px 36px;flex-wrap:wrap;padding:28px 32px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}
.join-copy{flex:1 1 320px;min-width:0;max-width:520px}
.join-eyebrow{display:block;font:700 11px var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--pink-600)}
.join h2{margin:6px 0 0;font:800 24px/1.2 var(--font-head);letter-spacing:-.015em;color:var(--text)}
.join-copy p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--text-2)}
.join-form{flex:1 1 360px;min-width:0;max-width:460px;display:flex;flex-direction:column;gap:8px}
.join-lab{font:600 12px var(--font-body);color:var(--text-2)}
.join-field{display:flex;align-items:center;gap:6px;padding:5px;border-radius:999px;background:var(--surface);border:1.5px solid var(--line);transition:border-color .15s}
.join-field:focus-within{border-color:var(--text-2)}
.join-field.is-bad{border-color:var(--red)}
.join-field input{flex:1 1 0;width:0;min-width:0;height:40px;padding:0 14px;border:0;outline:0;background:none;font:500 15px var(--font-body);color:var(--text)}
.join-field input::placeholder{color:var(--muted)}
.join-field .gp-btn{height:42px;padding:0 20px;flex:none}
.join-err{display:none;margin:0 0 0 14px;font-size:12px;font-weight:600;color:#c2183a}
.join-err.show{display:block}
.join-tg{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 6px;margin-left:8px;border:0;background:none;
  font:600 13.5px var(--font-body);color:var(--text-2);cursor:pointer}
.join-tg:hover{color:var(--text)}
.join-tg .tg-dot{width:22px;height:22px}
.join-tg .tg-dot svg{width:12px;height:12px}

/* ---- footer: internal + legal links (opt-footer) ---- */
.app.is-guest.opt-footer .flinks{display:flex}
/* the wrap this row used to add now lives on .footer itself, for both states */
.flinks{flex-wrap:wrap;gap:6px 16px;font-size:12px}
.flinks a{color:rgba(255,255,255,.72)}
.flinks a:hover,.flinks a:focus-visible{color:#fff;text-decoration:underline}

@media (max-width:1100px){
  /* two across, each step as an image-left row: half the height of a 2x2 of tall cards */
  .earn-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .earn-card{flex-direction:row;align-items:stretch;border-radius:18px}
  .ec-media{flex:none;width:132px;height:auto;min-height:124px}
  .ec-media::after{bottom:10px;width:70%;height:14px}
  .ec-media img{height:96px}
  .ec-body{flex:1;min-width:0;padding:14px 16px;display:flex;flex-direction:column;justify-content:center}
  .earn-card h3{font-size:15px}
  .earn-card p{margin-top:4px;font-size:13px;line-height:1.5}
  .app.is-guest .fun-band .pstat{padding:10px 20px}
  .app.is-guest .fun-band .pstat:nth-child(3){padding-left:0}
}
@media (max-width:900px){
  .ec-media{width:112px}          /* narrow two-up rows: give the words the width */
  .ec-media img{height:84px}
}
@media (max-width:720px){
  .app.is-guest .hbrand{display:block;flex:none}
  .app.is-guest .hbrand img{display:block;height:24px;width:auto}
  .app.is-guest .hauth .btn{height:40px}
  .app.is-guest #grid .gcard{width:42%}          /* the next tile peeks, so the row reads as swipeable */
  .app.is-guest .fun-band .deposit{padding:14px}
  .app.is-guest .fun-band .pstats{padding:8px 12px}
  .earn-intro{margin:-4px 0 12px;font-size:13.5px}
  .join{padding:22px 18px}
  .join h2{font-size:20px}
  .join-form{max-width:none}
  /* the hero's full-width CTA rule must not reach this button: it squeezed the email box to ~28px */
  .join-field .gp-btn{width:auto}
  .join-field input{font-size:16px}          /* 16px: iOS does not zoom the page when the field is focused */
  .app.is-guest .flinks{order:3;flex-basis:100%}                   /* links get their own line on phones */
  /* phones: centre the whole footer. Each group takes its own full-width row
     (.right drops the margin-left:auto that pins it right on desktop), so the
     icons, the copyright line and the links stack centred instead of reading
     left-icons / right-copyright / left-links.
     Signed-in players saw the uncentred version until now: these three rules
     were scoped to .is-guest, though nothing about them is guest-only. */
  .footer{justify-content:center;text-align:center}
  .footer .soc{flex-basis:100%;justify-content:center}
  .footer .right{margin-left:0;flex-basis:100%;justify-content:center;flex-wrap:wrap}
  .app.is-guest .flinks{justify-content:center}
}
@media (max-width:480px){
  /* small phones: the email box gets the full width, the button sits under it */
  .join-field{flex-direction:column;align-items:stretch;gap:6px;padding:6px;border-radius:16px}
  .join-field input{flex:none;width:100%;height:44px;padding:0 12px}   /* flex:none: in a column the 0 basis would collapse its height */
  .join-field .gp-btn{width:100%;height:46px}
  .join-err{margin-left:4px}
  .join-tg{margin-left:0}
}
@media (max-width:560px){
  /* one row per step: two across would leave ~70px of text measure */
  .earn-grid{grid-template-columns:1fr;gap:10px}
  .earn-card{border-radius:16px}
  .earn-card:hover{transform:none}
  .ec-media{width:108px;min-height:112px}
  .ec-media img{height:86px}
  .ec-body{padding:12px 14px}
  .app.is-guest .fun-band .pstat{padding:10px 10px 10px 12px}
}

/* ---- sidebar: personal counters and account-only destinations go ---- */
.app.is-guest .nav [data-auth-only]{display:none}
.app.is-guest .nav a em.pill[data-mine]{display:none}
/* the guest card takes the Link & earn card's place, same shape, different offer */
.app.is-guest .nav-perks{display:none}
.nav-guest{display:none;position:relative;flex:none;margin:11px 8px 2px;padding:12px 11px 11px;border-radius:15px;overflow:hidden;
  background:radial-gradient(125% 105% at 100% 0%,#3d1149 0%,#1a1f52 46%,#0b1233 100%);
  border:1px solid rgba(255,255,255,.11);
  box-shadow:0 14px 28px -18px rgba(11,18,51,.95),inset 0 1px 0 rgba(255,255,255,.08)}
.app.is-guest .nav-guest{display:block}
.app.is-collapsed .nav-guest{display:none}
@media (min-width:721px) and (max-width:1240px){.app:not(.is-expanded) .nav-guest{display:none}}
.nav-guest::before{content:"";position:absolute;width:88px;height:88px;border-radius:50%;right:-32px;top:-36px;
  background:radial-gradient(circle,rgba(245,181,51,.5),transparent 70%);pointer-events:none}
.ng-k{position:relative;display:flex;align-items:center;gap:6px;font:800 9px var(--font-head);
  letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.ng-k .icon{width:12px;height:12px;flex:none;color:var(--gold-2)}
.ng-t{position:relative;margin:6px 0 10px;font:700 12.5px/1.35 var(--font-body);color:#fff}
.ng-t b{color:var(--gold-2);font-weight:800}
.ng-go{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:36px;
  border:0;border-radius:10px;color:#fff;font:800 12px var(--font-head);
  background:linear-gradient(135deg,#f76ba6 0%,#e01e6e 45%,#a80d4a 100%);
  box-shadow:0 10px 22px -10px rgba(224,30,110,.9);transition:transform .1s,box-shadow .18s}
.ng-go:hover{box-shadow:0 14px 26px -10px rgba(224,30,110,1)}
.ng-go:active{transform:scale(.98)}

/* ---- tiles. Logged in: one CTA, "Play Now", on every game and jackpot tile (client, Sept 29
   2026: "remove play free from logged in and play for real. only Play Now for logged in").
   Guests: game tiles show Play Free above Play for real; jackpot tiles show Play for real only.
   Both labels ship in the markup and CSS picks one, so tiles re-rendered by the category tabs
   are always right. ---- */
.g-lbl{display:none}
.app.is-guest .g-lbl{display:inline}
.app.is-guest .m-lbl{display:none}
.app:not(.is-guest) .gcard .play.free{display:none}
/* one pill instead of two, so it slides as far as the jackpot pill to land where the name was */
.app:not(.is-guest) .gcard:hover .plays,.app:not(.is-guest) .gcard:focus-visible .plays{transform:translateY(24px)}
.gcard .plays,.jcard .jplays{align-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;
  opacity:0;transform:translateY(9px);transition:opacity .22s,transform .3s cubic-bezier(.2,1.4,.4,1)}
.gcard .play.free{background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.6);box-shadow:none}



/* ===================== LOGIN / SIGN-UP POPUP ===================== */
/* Same chrome conventions as the deposit modal: overlay, Escape, backdrop click, focus trap.
   Scoped to .au-* / #au* so it cannot touch the page. */
.au-overlay{position:fixed;inset:0;z-index:1100;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(15,27,61,.5);backdrop-filter:blur(6px);
  font-family:var(--font-body);color:var(--text);font-size:14px;line-height:1.5;animation:au-fade .22s ease}
.au-overlay[hidden]{display:none}
@keyframes au-fade{from{opacity:0}to{opacity:1}}
:where(.au-overlay) button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
/* buttons only. A text input matches :focus-visible on a plain click too, so an outline here
   put a pink ring on the email field the moment it was tapped. The field shows its focus with
   the darkened border below (.au-in:focus-within) instead. */
.au-overlay button:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.au-card{position:relative;width:100%;max-width:420px;max-height:min(92vh,92dvh);overflow-y:auto;
  padding:24px 24px 22px;border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--shadow-lg);
  animation:au-pop .3s cubic-bezier(.16,1,.3,1)}
@keyframes au-pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.au-x{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:8px;border:0;background:none;
  color:var(--muted);display:grid;place-items:center;transition:background .15s,color .15s}
.au-x::before{content:"";position:absolute;inset:-6px;border-radius:10px}
.au-x .icon{width:18px;height:18px}
.au-x:hover{background:var(--surface-2);color:var(--text)}
.au-card h2{margin:0;font:800 21px/1.2 var(--font-head);letter-spacing:-.02em;color:var(--text)}
.au-sub{margin:6px 0 0;font-size:13px;color:var(--text-2)}
/* the reward strip: the same two things the sidebar card promises */
.au-gift{display:flex;align-items:center;gap:10px;margin:16px 0 0;padding:11px 13px;border-radius:14px;
  background:radial-gradient(130px 90px at 100% 0%,rgba(238,27,99,.1),transparent 70%),linear-gradient(180deg,#fff4f9,#fff);
  border:1px solid rgba(238,27,99,.2)}
.au-gift .icon{width:20px;height:20px;flex:none;color:var(--pink)}
.au-gift p{margin:0;font-size:12.5px;line-height:1.45;color:var(--text-2)}
.au-gift b{color:var(--text);font-weight:700}
/* form */
.au-form{margin:14px 0 0}
.au-f{margin:0 0 12px}
.au-f label{display:block;margin:0 0 5px;font:600 11.5px var(--font-body);letter-spacing:.02em;color:var(--text-2)}
.au-in{display:flex;align-items:center;gap:8px;padding:0 12px;border-radius:12px;background:var(--surface);
  border:1px solid var(--line);transition:border-color .15s,box-shadow .15s}
/* focus just darkens the field's own edge — no halo, no second ring. The pink glow read as
   an error state, and a text input matches :focus-visible on a plain click too, so an outline
   would come back on click. One dark border (7.6:1 on white) carries the focus instead. */
.au-in:focus-within{border-color:var(--text-2)}
/* box-shadow too: a page that also loads Tailwind's forms reset (the fantasy
   landing page's expired-cro-v2.tailwind.css) paints a blue focus ring on
   input[type=email]:focus as a box-shadow, a second box inside .au-in */
.au-in input{flex:1 1 auto;min-width:0;height:46px;background:none;border:0;outline:0;box-shadow:none;
  font:500 15px var(--font-body);color:var(--text)}
.au-in input::placeholder{color:var(--muted)}
/* the email field is the whole form, so its error sits right under it */
.au-in.is-bad{border-color:var(--red);box-shadow:0 0 0 3px rgba(255,59,92,.14)}
.au-err{display:none;align-items:center;gap:6px;margin:6px 0 0;font-size:11.5px;font-weight:600;color:#c2183a}
.au-err .icon{width:13px;height:13px;stroke-width:2.4}
.au-in.is-bad ~ .au-err,.au-err.show{display:flex}
.au-hint{margin:-2px 0 12px;font-size:11.5px;color:var(--text-2)}
/* ---- step 2: the code. The email stays on screen, read-only, so the address being
   verified is never in doubt; the masked line mirrors what the email says. ---- */
.au-step2{display:none}
.au-overlay.is-code .au-step1{display:none}
.au-overlay.is-code .au-step2{display:block}
.au-in.is-locked{background:var(--surface-2)}
.au-in input[readonly]{color:var(--text-2);cursor:default}
.au-masked{margin:8px 0 14px;font-size:12.5px;color:var(--text-2)}
.au-masked b{color:var(--text);font-weight:600;word-break:break-all}
#auCode{letter-spacing:.32em;font:600 16px var(--font-body)}
#auCode::placeholder{letter-spacing:0;font-weight:500}
/* the expiry row: the rule the user is racing, and the clock */
.au-exp{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 14px;
  font:600 12px var(--font-body)}
.au-exp span{color:#c2183a}
.au-exp b{font:700 13px var(--font-head);font-variant-numeric:tabular-nums;color:#c2183a}
.au-exp.is-out span,.au-exp.is-out b{color:var(--text-2)}
.au-again{display:flex;flex-direction:column;gap:9px;margin:14px 0 0}
.au-again button{min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  font:600 13.5px var(--font-head);color:var(--text);transition:border-color .15s,background .15s,opacity .15s}
.au-again button:hover:not([disabled]){border-color:var(--muted);background:var(--surface-2)}
.au-again button[disabled]{opacity:.45;cursor:default}
.au-go{width:100%;min-height:48px;border:0;border-radius:12px;color:#fff;font:700 14.5px var(--font-head);
  background:linear-gradient(135deg,#f76ba6 0%,#e01e6e 45%,#a80d4a 100%);text-shadow:0 1px 2px rgba(90,4,35,.4);
  box-shadow:0 14px 30px -12px rgba(224,30,110,.8);transition:transform .1s,box-shadow .18s}
.au-go:hover{box-shadow:0 18px 34px -12px rgba(224,30,110,.9)}
.au-go:active{transform:scale(.98)}
/* or / telegram */
.au-or{display:flex;align-items:center;gap:10px;margin:14px 0;font:600 11px var(--font-head);
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.au-or::before,.au-or::after{content:"";flex:1;height:1px;background:var(--line)}
.au-tg{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px;
  border:1px solid var(--line);border-radius:12px;background:var(--surface);
  font:600 13.5px var(--font-head);color:var(--text);transition:border-color .15s,background .15s}
.au-tg:hover{border-color:var(--muted);background:var(--surface-2)}
.au-tg .tgic{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,#55c9f5,#1d8fd1);color:#fff}
.au-tg .tgic .icon{width:12px;height:12px}
.au-fine{margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center}
.au-fine a{color:var(--text-2);font-weight:600}
.au-fine b{display:inline-block;margin-right:5px;padding:1px 6px;border-radius:999px;background:var(--pink);color:#fff;font:800 10px var(--font-head)}
@media (max-width:520px){
  .au-overlay{padding:0;align-items:flex-end}
  .au-card{max-width:none;max-height:min(94vh,94dvh);border-radius:22px 22px 0 0;
    padding:24px 18px calc(18px + env(safe-area-inset-bottom));animation:au-slide .32s cubic-bezier(.16,1,.3,1)}
  @keyframes au-slide{from{transform:translateY(100%)}to{transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .au-overlay,.au-card{animation:none}
  .au-overlay *{transition:none!important}
}

/* ---- served build additions ---- */
.icon-16{width:16px;height:16px}
/* counts that belong to an account (jackpot tickets, wheel spins, free tickets) */
.app.is-guest .nav [data-mine]{display:none}
.nu-notice{max-width:760px;margin:0 auto 16px;padding:12px 16px;border-radius:12px;border:1px solid #fcd34d;
  background:#fef3c7;color:#78350f;font:600 14px/1.4 var(--font-body);text-align:center}
.pstat-grid>li[hidden]{display:none!important}

.au-captcha{margin:10px 0 2px;min-height:65px}
.op-elig{flex-wrap:wrap}
/* the per-player Most Played row stays hidden for members too (plan B13); the
   category chips now show, filled from site-wide stats (_lobby_game_stats) */
.app:not(.is-guest) .mostplayed{display:none}
.app:not(.is-guest) .pg-head{margin-top:0}
/* member hero with no active slide (#slider hidden): the two cards share the row instead of leaving an empty track */
.app:not(.is-guest) .hero:has(>#slider[hidden]){grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:238px;height:auto}
@media (max-width:720px){.app:not(.is-guest) .hero:has(>#slider[hidden]){grid-template-columns:1fr;grid-template-rows:auto}}

/* ===================== DAILY REWARDS HUB (modal-only) =====================
   _partials/daily_rewards_hub.html is mounted here purely for its expanded
   modal: the streak slide's "Claim More Rewards" button opens it, so the hub's
   own collapsed bar would just be a second, duplicate entry point stacked at
   the bottom of the page. daily_rewards_hub.css is fully scoped to
   #dailyRewardsHub, so nothing else on this page is affected by loading it.
   Specificity note: the rules below are (1,2,1) / (1,2,0) so they beat
   `#dailyRewardsHub[data-daily-rewards-collapsed="true"] .dailyRewardsHub-bar`. */
body #dailyRewardsHub.drh-modal-only{margin:0}
body #dailyRewardsHub.drh-modal-only .dailyRewardsHub-bar{display:none}

/* ---------- FUN FANTASY (both states) ----------
   Premier League fantasy as a match ticket, in the perforation language of the hero ticket boxes:
   the art is the ticket face, the stub carries the gameweek, the players entered, the deadline and
   the prize. One white card, no section head: it sits in the hero zone like the deposit strip.
   Visitors see it too; their Play now opens the login popup (data-guest-auth). */
.fantasy{--fan-art:40%;position:relative;display:grid;grid-template-columns:var(--fan-art) minmax(0,1fr);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);overflow:hidden}
/* the ticket face: the art, a dashed tear line and two punched notches on its right edge */
.fan-art{position:relative;min-height:252px;border-right:2px dashed #d6dbe6}
.fan-pic{position:absolute;inset:0;overflow:hidden;background:var(--navy)}
.fan-pic img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.fantasy:hover .fan-pic img{transform:scale(1.035)}
.fan-art::before,.fan-art::after{content:"";position:absolute;z-index:3;right:-11px;width:20px;height:20px;border-radius:50%;
  background:var(--bg);border:1px solid var(--line);pointer-events:none}
.fan-art::before{top:-11px}
.fan-art::after{bottom:-11px}
/* "Live" is the fantasy hub's own status word; a glass pill keeps it off the art's colours */
.fan-live{position:absolute;z-index:2;left:14px;top:14px;display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px 0 9px;border-radius:999px;
  background:rgba(9,17,40,.55);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font:800 10px var(--font-head);letter-spacing:.12em;text-transform:uppercase}
.fan-live i{position:relative;width:7px;height:7px;border-radius:50%;background:#2ee59d}
.fan-live i::before{background:rgb(46,229,157);animation:fanDotRing 1.6s infinite}
@keyframes fanPulse{0%,100%{box-shadow:0 0 0 0 rgba(46,229,157,.55)}70%{box-shadow:0 0 0 6px rgba(46,229,157,0)}}
@keyframes fanDotRing{0%,100%{transform:scale(1);opacity:.55}70%{transform:scale(2.714);opacity:0}}
/* the stub */
.fan-stub{min-width:0;display:flex;flex-direction:column;justify-content:center;gap:8px;padding:20px 26px 20px 28px}
.fan-eyebrow{font:800 14px var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--pink-600)}
/* the prize box: navy with the figure in gold, the page's own jackpot colours. Coin and label on
   the left, the amount on the right, one row, the full width of the stub. */
.fan-prize{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;min-height:64px;margin:0;padding:10px 20px 10px 14px;border-radius:16px;overflow:hidden;
  background:radial-gradient(120% 160% at 0% 0%,var(--navy-3) 0%,var(--navy) 52%,#0a1230 100%);color:#fff;box-shadow:0 14px 28px -16px rgba(15,27,61,.55)}
.fan-prize::before{content:"";position:absolute;right:-50px;top:-70px;width:190px;height:190px;border-radius:50%;background:var(--gold);opacity:.16;filter:blur(34px);pointer-events:none}
.fan-prize>*{position:relative}
.fan-prize img{width:40px;height:auto;flex:none;filter:drop-shadow(0 6px 12px rgba(0,0,0,.45))}
.fan-tag{font:800 16px/1.2 var(--font-head);letter-spacing:.06em;text-transform:uppercase;color:var(--gold-2)}
.fan-amt{margin-left:8px;display:flex;align-items:baseline;gap:9px;font:800 34px/1 var(--font-head);letter-spacing:-.02em;color:var(--gold-2);font-variant-numeric:tabular-nums;text-shadow:0 0 22px rgba(245,181,51,.4)}
.fan-amt em{font:inherit;font-style:normal;color:inherit}   /* "FUN" at the figure's size and face */
/* the partition line sits under the prize box */
.fan-gw{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px 14px;margin:2px 0 0;padding-top:12px;border-top:1px solid var(--line);font:700 17px/1.25 var(--font-head);letter-spacing:-.01em;color:var(--text)}
/* players entered this gameweek (design, 28 Oct 2026: "show the activity"):
   three faces and the count, at the end of the gameweek line. The figure is
   rendered by the server and does not move, so there is no rise animation. */
.fan-entries{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 5px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);font:600 12.5px/1 var(--font-body);letter-spacing:0;color:var(--text-2);white-space:nowrap}
.fan-entries b{display:inline-block;font:800 14px/1 var(--font-head);letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums}
.fan-faces{display:flex}
.fan-faces i{display:grid;place-items:end center;width:22px;height:22px;margin-left:-7px;border-radius:50%;overflow:hidden;border:2px solid var(--surface);background:linear-gradient(150deg,#ff8ab4,#d1105a)}
.fan-faces i:first-child{margin-left:0}
.fan-faces i:nth-child(2){background:linear-gradient(150deg,#ffc06b,#ff7a1a)}
.fan-faces i:nth-child(3){background:linear-gradient(150deg,#b48cff,#6d3bd8)}
.fan-faces svg{width:16px;height:16px;fill:rgba(255,255,255,.92)}
.fan-copy{margin:0;font-size:13.5px;line-height:1.5;color:var(--text-2)}
/* the foot: Deadline and Closes in on the left, Play now on the right. Where the stub is too
   narrow for one row the button drops to a second line, still on the right. */
.fan-foot{display:flex;align-items:flex-end;gap:12px 16px;flex-wrap:wrap;margin-top:6px}
.fan-facts{display:grid;grid-template-columns:auto auto;justify-content:start;gap:8px 22px;margin:0;padding:0 0 2px}
.fan-facts>div{min-width:0}
.fan-facts dt{font:700 10px var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fan-facts dd{margin:4px 0 0;font:800 16px/1.1 var(--font-head);letter-spacing:-.01em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.fan-facts dd.fan-closes{display:flex;align-items:center;gap:8px;color:#0b8a5c}
.fan-closes i{width:8px;height:8px;border-radius:50%;background:var(--green);flex:none}
/* the ticket's only action is Play now; the entry fee left the card on
   28 Oct 2026 and is stated on /fantasy/, where the player commits. */
.fan-cta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.fan-go{height:44px;padding:0 18px 0 20px;font:800 14px var(--font-head);letter-spacing:.02em}
.fan-go .icon{width:16px;height:16px;transition:transform .2s}
.fan-go:hover .icon{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.fan-pic img,.fan-go .icon{transition:none}.fan-live i::before{animation:none}}
@media (max-width:1100px){.fan-stub{padding:18px 22px}.fan-tag{font-size:14px}.fan-amt{font-size:30px}}
/* phones: the ticket stands upright: art on top (16:9), the tear line under it, the stub below */
@media (max-width:720px){
  .fantasy{grid-template-columns:minmax(0,1fr)}
  .fan-art{min-height:0;aspect-ratio:16/9;border-right:0;border-bottom:2px dashed #d6dbe6}
  .fan-art::before,.fan-art::after{top:auto;bottom:-11px;right:auto}
  .fan-art::before{left:-11px}
  .fan-art::after{right:-11px}
  .fan-stub{padding:18px 16px;gap:8px}
  /* the prize box stacks: the coin steps out, the label sits over the amount */
  .fan-prize{flex-direction:column;align-items:flex-start;gap:4px;min-height:0;padding:12px 16px}
  .fan-prize img{display:none}
  .fan-tag{font-size:13px}
  .fan-amt{margin-left:0;font-size:28px}
  .fan-gw{font-size:16px}
  .fan-foot{flex-direction:column;align-items:stretch;gap:12px}
  .fan-facts{gap:8px 24px}
  .fan-cta{flex-direction:column;align-items:stretch;gap:10px;margin-left:0}
  .fan-go{width:100%;height:46px}
}