/* 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)}
/* ---- 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{width:7px;height:7px;border-radius:50%;background:var(--red);animation:pulse 1.4s infinite}
@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 */
.half.t:hover,.half.t:focus-visible{background:linear-gradient(90deg,rgba(238,27,99,.24),transparent 82%)}
.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}
/* 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}
.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{width:6px;height:6px;flex:none;border-radius:50%;background:#2fe08a;box-shadow:0 0 6px rgba(47,224,138,.9);animation:pulse 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{width:6px;height:6px;border-radius:50%;background:var(--pink);animation:pulse 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-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 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}
@media (prefers-reduced-motion:reduce){.op-cta,.op-tier,.op-tier:not(.is-next):not(.is-done){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{background:linear-gradient(90deg,#17c3e6,#0aa7c7);color:#04252d}
.gcard .b.hot{background:linear-gradient(90deg,#ff6a00,#ff2d55)}
.gcard .b.wager{background:linear-gradient(90deg,#12b37c,#0a8f61)}
.gcard .b.promo{background:linear-gradient(90deg,#ffd66b,#f5b533);color:#3a2600}
/* 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}
.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 */
.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 category filters for a visitor — the row simply shows every game */
.app.is-guest #cats{display:none}
/* and no Most Played row: there is no history behind it */
.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 .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}
}

/* ===================== DEPOSIT MODAL =====================
   Embedded from deposit-modal-v4-new-UI-reference.html (the standalone reference, now in
   _archive/). Everything here is scoped to .dp-* / #dp* so it cannot
   touch the page. Opened by any a.btn-deposit, #depositNow, or [data-deposit-open];
   window.openDepositModal(trigger) is the hook for anything else. */

  /* ---- tokens: the homepage's, so the modal belongs to the page it opens on ---- */
  .dp-overlay{
    --pink:#ee1b63; --pink-600:#d1105a; --pink-100:#ffe4ee; --pink-glow:rgba(238,27,99,.35);
    --navy:#0f1b3d; --navy-2:#162552; --navy-3:#1e2f66;
    --green:#12b37c; --green-100:#dcf7ec; --gold:#f5b533; --gold-2:#ffd66b;
    --purple:#7c3aed; --orange:#ff7a1a; --cyan:#17c3e6;
    --surface:#fff; --surface-2:#f7f8fc; --line:#e6e9f2;
    --text:#0f172a; --text-2:#475569; --muted:#8a94a8;
    --font-head:"Poppins",system-ui,sans-serif; --font-body:"Inter",system-ui,sans-serif;
    --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:28px;
    --shadow-lg:0 30px 60px -24px rgba(15,27,61,.45);
    --ease:cubic-bezier(.16,1,.3,1);
    /* per-network accent, swapped by the script */
    --net:#627eea; --net-glow:rgba(98,126,234,.55);
  }
  .dp-overlay,.dp-overlay *,.dp-overlay *::before,.dp-overlay *::after{box-sizing:border-box}
  .dp-overlay{
    position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;
    background:rgba(15,27,61,.55);backdrop-filter:blur(6px);
    font-family:var(--font-body);color:var(--text);font-size:14px;line-height:1.5;
    animation:dp-fade .22s ease;
  }
  .dp-overlay[hidden]{display:none}
  @keyframes dp-fade{from{opacity:0}to{opacity:1}}
  .dp-overlay h2,.dp-overlay h3{margin:0;font-family:var(--font-head);line-height:1.15;letter-spacing:-.01em}
  :where(.dp-overlay) button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
  .dp-overlay button:focus-visible,.dp-overlay input:focus-visible,.dp-overlay summary:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
  .tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
  .dp-overlay .ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

  /* ---- shell ---- */
  .dp-modal{
    position:relative;width:100%;max-width:470px;max-height:min(92vh,92dvh);display:flex;flex-direction:column;overflow:hidden;
    background:var(--surface);border-radius:var(--r-xl);box-shadow:var(--shadow-lg);
    animation:dp-pop .32s var(--ease);
  }
  @keyframes dp-pop{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

  /* ---- header ---- */
  .dp-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 12px;flex:none}
  .dp-head h2{font-size:22px;font-weight:800;color:var(--text)}
  /* --green (#12b37c) is only 2.7:1 on white, so the text takes the darker shade the
     homepage uses for green-on-light; the tick follows it. */
  .dp-sub{display:flex;align-items:center;gap:6px;margin:5px 0 0;font-size:12.5px;font-weight:600;color:var(--text-2);white-space:nowrap}
  .dp-sub .ic{width:14px;height:14px;stroke-width:2.6;color:#0b6b48}
  .dp-sub b{font-weight:600;color:#0b6b48}
  .dp-sub s{text-decoration:none;color:var(--line)}
  .dp-x{
    flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--surface-2);color:var(--text-2);
    display:grid;place-items:center;transition:background .15s,color .15s,transform .1s;
  }
  .dp-x .ic{width:18px;height:18px;stroke-width:2.4}
  .dp-x:hover{background:var(--pink-100);color:var(--pink);border-color:transparent}
  .dp-x:active{transform:scale(.94)}

  /* ---- scrolling body ---- */
  .dp-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 22px 22px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
  .dp-body::-webkit-scrollbar{width:6px}
  .dp-body::-webkit-scrollbar-thumb{background:var(--line);border-radius:999px}
  .dp-label{display:flex;align-items:center;justify-content:space-between;margin:14px 0 8px;font:700 11px var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
  .dp-label:first-child{margin-top:4px}
  .dp-label small{font:600 11.5px var(--font-body);letter-spacing:0;text-transform:none;color:var(--muted)}

  /* ---- 1. network: a segmented control, every option visible ---- */
  /* real tabs, not a segmented control: the strip is tinted, a hairline runs under the
     unselected tabs, and the selected tab is the panel's own white and stands over that
     hairline — so the QR and address below visibly belong to the network that is on. */
  .dp-seg{display:flex;padding:0;background:var(--surface-2);border-bottom:1px solid var(--line)}
  .dp-seg button{
    flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:6px 8px;
    margin-bottom:-1px;                      /* sits on the hairline, so the selected one can cover it */
    border:1px solid transparent;border-bottom:0;border-radius:0;background:transparent;
    font-weight:500;font-size:13.5px;color:var(--text-2);white-space:nowrap;transition:background .15s,color .15s;
  }
  .dp-seg button:hover{color:var(--text);background:rgba(255,255,255,.6)}
  .dp-seg button[aria-selected=true]{background:var(--surface);color:var(--text);font-weight:700;border-color:var(--line)}
  .dp-seg button[aria-selected=true] .dp-nic{transform:none}
  .dp-nic{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center}
  .dp-nic svg{width:100%;height:100%;display:block}

  /* ---- 2 + 3. the converter: what you send, what you get ---- */
  /* no overflow:hidden here — it clipped the open token menu. The radius still clips the
     card's own gradients, which is all it was doing. */
  .dp-conv{
    position:relative;margin-top:12px;padding:13px 14px 12px;border-radius:var(--r-lg);color:#fff;
    background:
      radial-gradient(120% 90% at 100% 0%,var(--net-glow) 0%,transparent 45%),
      linear-gradient(165deg,#101b41 0%,#080f28 100%);
    box-shadow:0 22px 44px -22px rgba(15,27,61,.75),inset 0 1px 0 rgba(255,255,255,.08);
    transition:background .35s;
  }
  .dp-conv .dp-label{margin:0 0 6px;color:rgba(255,255,255,.62)}
  .dp-conv .dp-label small{color:rgba(255,255,255,.55)}
  .dp-label-r{display:inline-flex;align-items:center;gap:8px}
  /* the (i): 18px glyph, 44px hit area via the pseudo-element */
  .dp-info{position:relative;display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
    border:1px solid rgba(255,255,255,.4);background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);
    font:800 10.5px/1 var(--font-head);letter-spacing:0;text-transform:none;transition:background .15s,color .15s,border-color .15s}
  .dp-info::before{content:"";position:absolute;inset:-13px;border-radius:50%}
  .dp-info:hover,.dp-info[aria-expanded=true]{background:#fff;color:var(--navy);border-color:#fff}
  .dp-note{margin:0 0 8px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.07);
    font-size:11.5px;line-height:1.45;color:rgba(255,255,255,.82)}
  .dp-note[hidden]{display:none}
  .dp-note p{margin:0}
  .dp-note p+p{margin-top:5px}
  .dp-note b{color:#fff;font-weight:700}
  .dp-coin{width:18px;height:18px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;font:800 9px var(--font-head)}
  .dp-coin svg{width:100%;height:100%;display:block}
  /* ---- token row: the quick picks above the field. Same faded outline as the quick
     amounts, 16px coins and a 12px label to keep the row light. It and the dropdown below
     set the same state, so whichever you use the other follows. ---- */
  .dp-chips{display:flex;gap:7px;overflow-x:auto;padding:1px 2px 3px;margin:0 -2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .dp-chips::-webkit-scrollbar{display:none}
  .dp-chip{
    flex:none;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 11px 0 6px;border-radius:999px;scroll-snap-align:start;
    background:none;border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.66);font-weight:600;font-size:12px;
    transition:color .15s,border-color .15s,background .15s,transform .1s;
  }
  .dp-chip .dp-coin{width:16px;height:16px;font-size:8.5px}
  .dp-chip:hover{color:#fff;border-color:rgba(255,255,255,.36)}
  .dp-chip:active{transform:scale(.97)}
  .dp-chip[aria-checked=true]{color:#fff;border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.09)}
  /* ---- amount: no box around the big number — one hairline under it, nothing else ---- */
  .dp-amt{display:flex;align-items:center;gap:10px;margin-top:3px;padding:2px 0 9px;
    background:none;border-bottom:1px solid rgba(255,255,255,.18);transition:border-color .15s}
  .dp-amt:focus-within{border-color:rgba(255,255,255,.62)}
  .dp-amt input{
    flex:1 1 auto;min-width:0;width:100%;background:none;border:0;outline:0;color:#fff;
    font:800 26px/1.15 var(--font-head);letter-spacing:-.025em;padding:0;
  }
  .dp-amt input::placeholder{color:rgba(255,255,255,.35)}
  .dp-amt input:focus-visible{outline:none}
  /* ---- the token dropdown, inside the amount field. It replaced a row of chips: the row
     and the field's unit were the same choice offered twice. The trigger wears the same faded
     outline as the quick amounts, so it reads as the control it is. ---- */
  .dp-tok{position:relative;flex:none}
  .dp-tok-btn{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0;border:0;border-radius:8px;
    background:none;color:#fff}
  /* one token on this network: nothing to choose, so the control stops pretending */
  .dp-tok-btn[disabled]{cursor:default}
  .dp-tok-btn[disabled] .dp-tok-cv{display:none}
  .dp-amt .dp-sym{display:inline-flex;align-items:center;gap:7px;font:700 13px var(--font-head);color:#fff}
  .dp-tok-cv{width:12px;height:12px;opacity:.6;transition:transform .2s,opacity .15s}
  .dp-tok-btn:hover .dp-tok-cv,.dp-tok-btn[aria-expanded=true] .dp-tok-cv{opacity:1}
  .dp-tok-btn[aria-expanded=true] .dp-tok-cv{transform:rotate(180deg)}

  .dp-tok-menu{position:absolute;right:0;top:calc(100% + 9px);z-index:20;width:210px;max-height:min(226px,38vh);overflow-y:auto;
    padding:6px;border-radius:14px;background:#111c42;border:1px solid rgba(255,255,255,.15);
    box-shadow:0 24px 48px -18px rgba(0,0,0,.75);
    scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent;
    animation:dp-menu .16s var(--ease)}
  @keyframes dp-menu{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  /* opened upward when the modal has no room below the trigger (set by the script) */
  .dp-tok-menu.is-up{top:auto;bottom:calc(100% + 9px);animation-name:dp-menu-up}
  @keyframes dp-menu-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .dp-tok-menu[hidden]{display:none}
  .dp-tok-menu::-webkit-scrollbar{width:6px}
  .dp-tok-menu::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:999px}
  .dp-tok-opt{display:flex;align-items:center;gap:9px;width:100%;min-height:40px;padding:0 9px;border:0;border-radius:9px;
    background:none;color:rgba(255,255,255,.82);font:600 13px var(--font-body);text-align:left;
    transition:background .12s,color .12s}
  .dp-tok-opt:hover{background:rgba(255,255,255,.09);color:#fff}
  .dp-tok-opt small{flex:1 1 auto;min-width:0;font:500 11.5px var(--font-body);color:rgba(255,255,255,.45);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dp-tok-opt[aria-selected=true]{background:rgba(255,255,255,.12);color:#fff}
  /* selection is a tick as well as a fill, never colour alone */
  .dp-tok-tick{width:14px;height:14px;flex:none;opacity:0;stroke-width:2.6}
  .dp-tok-opt[aria-selected=true] .dp-tok-tick{opacity:1}
  @media (prefers-reduced-motion:reduce){.dp-tok-menu{animation:none}}
  /* ---- quick amounts: the same faded outline as the tokens, four equal boxes ---- */
  .dp-quick{display:flex;gap:7px;margin-top:9px}
  .dp-quick button{
    flex:1 1 0;min-width:0;height:32px;border-radius:9px;background:none;
    border:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.66);font-weight:600;font-size:12.5px;
    transition:color .15s,border-color .15s,background .15s,transform .1s;
  }
  .dp-quick button:hover{color:#fff;border-color:rgba(255,255,255,.36)}
  .dp-quick button:active{transform:scale(.97)}
  .dp-quick button[aria-pressed=true]{color:#fff;border-color:rgba(255,255,255,.75);background:rgba(255,255,255,.09)}
  /* the fold between send and get */
  .dp-arrow{position:relative;display:flex;align-items:center;justify-content:center;margin:8px 0 6px}
  .dp-arrow::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;
    background-image:radial-gradient(circle,rgba(255,255,255,.35) 1px,transparent 1.4px);background-size:6px 1px;background-repeat:repeat-x}
  .dp-arrow span{
    position:relative;display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px 0 7px;border-radius:999px;
    background:var(--green);color:#fff;font:800 11px var(--font-head);letter-spacing:.04em;text-transform:uppercase;box-shadow:0 8px 18px -8px rgba(18,179,124,.9);
  }
  .dp-arrow .ic{width:13px;height:13px;stroke-width:2.6}
  /* ---- you get: the label gets its own line, the number gets the room, and the dollar
     value sits on the number's baseline instead of stacked in the corner ---- */
  .dp-get{margin-top:1px}
  .dp-get>.dp-label{margin:0 0 5px}
  .dp-get-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
  .dp-get-n{display:flex;align-items:baseline;gap:8px;min-width:0}
  .dp-get-n b{font:800 34px/1.05 var(--font-head);letter-spacing:-.035em;color:var(--gold-2);
    text-shadow:0 0 26px rgba(245,181,51,.34);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dp-get-n em{font:700 15px var(--font-head);font-style:normal;color:rgba(255,255,255,.8)}
  .dp-get-usd{flex:none;white-space:nowrap;font:600 12.5px var(--font-body);color:rgba(255,255,255,.6)}
  .dp-get-usd b{font:700 14px var(--font-head);color:#fff}
  /* the quote behind the headline: amount, effective price, deviation from spot */
  /* the quote line is reference, not headline: small and faded, and its figures are only
     slightly brighter than the sentence rather than pure white */
  .dp-rate{display:flex;align-items:flex-start;gap:5px;margin:8px 0 0;font-size:10.5px;line-height:1.5;color:rgba(255,255,255,.48)}
  .dp-rate b{color:rgba(255,255,255,.72);font-weight:600}
  .dp-rate .ic{display:none;width:12px;height:12px;margin-top:2px;stroke-width:2.4}
  .dp-rate.warn{font-size:11px;color:#ffd66b}
  .dp-rate.warn b{color:#ffd66b;font-weight:700}
  .dp-rate.warn .ic{display:block}


  /* ---- the address: ONE white card. Tabs along the top pick the network; the panel under
     them is that network's QR and address. Choosing the network and reading what it produces
     are the same step, so they share a surface; the navy converter below stays its own box.
     The card's only colour is the Copy button — the label is a label, not a call to action. ---- */
  .dp-addr{position:relative;margin:12px 0 0;padding:0;border-radius:var(--r-lg);
    background:var(--surface);border:1px solid var(--line);
    box-shadow:0 12px 28px -18px rgba(15,23,42,.3)}
  /* tab strip: full width, top corners follow the card (outer radius less the 1px border) */
  .dp-addr .dp-seg{border-radius:calc(var(--r-lg) - 1px) calc(var(--r-lg) - 1px) 0 0}
  .dp-addr .dp-seg button:first-child{border-top-left-radius:inherit;border-left:0}
  .dp-addr .dp-seg button:last-child{border-top-right-radius:inherit;border-right:0}
  .dp-addr-panel{padding:13px 14px 14px}
  /* the section label matches "You send" in the card below: small caps, grey, nothing else */
  .dp-addr-lab{display:flex;align-items:center;gap:6px;margin:0 0 10px;font:700 11px var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2)}
  .dp-addr-lab .ic{width:13px;height:13px;stroke-width:2.6}   /* points at the code below */
  .dp-addr-row{display:flex;align-items:center;gap:13px}
  .dp-qr-col{flex:none;display:flex;flex-direction:column;align-items:center;gap:5px}
  /* the QR is a button: a code has to be dark-on-light to scan, and here it is small,
     so a tap opens it large (see .dp-zoom) */
  .dp-qr{flex:none;width:86px;height:86px;padding:6px;border-radius:11px;background:var(--surface);
    border:1px solid var(--line);cursor:zoom-in;transition:border-color .15s,transform .1s,box-shadow .15s}
  .dp-qr:hover{border-color:var(--text-2);box-shadow:0 6px 16px -10px rgba(15,23,42,.35)}
  .dp-qr:active{transform:scale(.97)}
  .dp-qr svg{width:100%;height:100%;display:block;shape-rendering:crispEdges;pointer-events:none}
  .dp-qr-hint{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:600;letter-spacing:.01em;color:var(--text-2)}
  .dp-qr-hint .ic{width:11px;height:11px;stroke-width:2.4}

  /* ---- the enlarged QR: a layer over the whole modal, so the code gets the room it needs
     and nothing behind it competes with the camera ---- */
  .dp-zoom{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:14px;padding:56px 22px 26px;background:rgba(255,255,255,.97);text-align:center;cursor:zoom-out;
    animation:dp-zoom-in .22s var(--ease)}
  .dp-zoom[hidden]{display:none}
  @keyframes dp-zoom-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
  .dp-zoom>*{cursor:auto}
  .dp-zoom .dp-x{position:absolute;top:14px;right:14px}
  .dp-zoom-net{display:flex;align-items:center;gap:7px;font:700 14px var(--font-head);color:var(--text)}
  .dp-zoom-net .dp-nic{width:20px;height:20px}
  .dp-zoom-qr{width:min(72vw,280px);aspect-ratio:1/1;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--line);
    box-shadow:0 18px 40px -24px rgba(15,23,42,.35)}
  .dp-zoom-qr svg{width:100%;height:100%;display:block;shape-rendering:crispEdges}
  /* the whole address, wrapped, in one tap-selectable run */
  .dp-zoom-addr{max-width:340px;margin:0;font:600 12.5px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text);
    word-break:break-all;user-select:all;-webkit-user-select:all}
  .dp-zoom-hint{margin:0;font-size:11.5px;color:var(--text-2)}
  .dp-addr-main{flex:1 1 auto;min-width:0}
  .dp-addr-net{display:flex;align-items:center;gap:6px;white-space:nowrap;font-size:12px;font-weight:600;color:var(--text-2)}
  .dp-addr-net .dp-nic{width:16px;height:16px}
  .dp-addr-val{display:flex;align-items:center;gap:7px;margin-top:7px}
  .dp-addr-val code{
    flex:1 1 auto;min-width:0;display:block;padding:11px 12px;border-radius:10px;
    background:var(--surface-2);border:1px solid var(--line);
    font:600 13px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  .dp-copy{
    flex:none;display:inline-flex;align-items:center;gap:6px;height:44px;padding:0 14px;border-radius:11px;border:0;color:#fff;
    background:linear-gradient(135deg,#f76ba6 0%,#e01e6e 45%,#a80d4a 100%);text-shadow:0 1px 2px rgba(90,4,35,.4);
    box-shadow:0 12px 30px -10px rgba(224,30,110,.7);font:700 13px var(--font-head);transition:transform .1s,box-shadow .15s,background .2s;
  }
  .dp-copy:hover{box-shadow:0 16px 34px -10px rgba(224,30,110,.85)}
  .dp-copy:active{transform:scale(.96)}
  .dp-copy .ic{width:15px;height:15px;stroke-width:2.4}
  .dp-copy.is-copied{background:linear-gradient(135deg,#3fe0a4,#12b37c);box-shadow:0 12px 30px -10px rgba(18,179,124,.8)}
  .dp-warn{display:flex;align-items:flex-start;gap:6px;margin:10px 0 0;font-size:11.5px;line-height:1.45;color:var(--text-2)}
  /* #ff7a1a is only 2.6:1 on white; this shade clears 4.5:1 for a 13px glyph */
  .dp-warn .ic{width:13px;height:13px;margin-top:2px;color:#c2410c;stroke-width:2.4}
  .dp-warn b{color:var(--text)}
  /* live status */
  .dp-status{display:flex;align-items:center;gap:8px;margin-top:10px;padding:9px 11px;border-radius:11px;
    background:var(--surface-2);border:1px dashed var(--line);font-size:12.5px;font-weight:600;color:var(--text-2)}
  .dp-status i{position:relative;width:8px;height:8px;flex:none;border-radius:50%;background:var(--muted)}
  .dp-status.is-live{background:var(--green-100);border-color:transparent;border-style:solid;color:#0b6b48}
  .dp-status.is-live i{background:var(--green)}
  .dp-status.is-live i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--green);animation:dp-pulse 1.4s ease-out infinite}
  @keyframes dp-pulse{from{transform:scale(.6);opacity:.9}to{transform:scale(1.6);opacity:0}}

  /* ---- all rates: still here, folded ---- */
  .dp-rates{margin-top:12px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
  .dp-rates summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;padding:0 14px;cursor:pointer;font-weight:600;font-size:13px;color:var(--text);background:var(--surface-2)}
  .dp-rates summary::-webkit-details-marker{display:none}
  .dp-rates summary .ic{width:16px;height:16px;color:var(--muted);transition:transform .2s}
  .dp-rates[open] summary .ic{transform:rotate(180deg)}
  .dp-rates summary small{color:var(--muted);font-weight:500}
  .dp-table{width:100%;border-collapse:collapse}
  .dp-table td{padding:9px 14px;border-top:1px solid var(--line);font-size:13px;color:var(--text)}
  .dp-table td:last-child{text-align:right;font-weight:600;color:var(--text-2);white-space:nowrap}
  .dp-table .dp-cur{display:flex;align-items:center;gap:9px;font-weight:600}
  .dp-table .dp-coin{width:22px;height:22px;font-size:10px}
  /* ---- Wheel of Fortune box (from the staking popup), re-tokened to this palette ---- */
  .dp-spins{margin-top:12px;padding:14px 16px;border-radius:var(--r-md);
    background:radial-gradient(130px 90px at 100% 0%,rgba(238,27,99,.1),transparent 70%),linear-gradient(180deg,#fff4f9 0%,#fff 100%);
    border:1px solid rgba(238,27,99,.2);box-shadow:0 10px 26px -16px rgba(238,27,99,.32)}
  .dp-spins-top{display:flex;align-items:center;gap:12px}
  .dp-spins-ic{position:relative;flex:none;width:46px;height:46px;overflow:visible}
  .dp-wheel{width:46px;height:46px;display:block;transform-origin:center;filter:drop-shadow(0 3px 6px rgba(13,28,50,.35));
    animation:dp-spin 4s infinite}   /* 3s decelerating spin, then ~1s pause, loop */
  @keyframes dp-spin{
    0%{transform:rotate(0deg);animation-timing-function:cubic-bezier(.15,.9,.25,1)}
    75%{transform:rotate(1440deg)}
    100%{transform:rotate(1440deg)}
  }
  .dp-wheel-pointer{position:absolute;top:-1px;left:50%;transform:translateX(-50%);width:0;height:0;z-index:3;
    border-left:5px solid transparent;border-right:5px solid transparent;border-top:9px solid #fff7da;filter:drop-shadow(0 1px 1px rgba(0,0,0,.4))}
  .dp-spins-txt{font-size:13px;line-height:1.4;color:var(--text)}
  .dp-spins-txt b{color:var(--pink-600);font-weight:700}
  .dp-fine{margin:12px 0 0;font-size:11.5px;line-height:1.45;color:var(--muted);text-align:center}

  /* ---- phone: a bottom sheet ---- */
  @media (max-width:520px){
    .dp-overlay{padding:0;align-items:flex-end}
    .dp-modal{max-width:none;max-height:min(94vh,94dvh);border-radius:22px 22px 0 0;animation:dp-slide .34s var(--ease)}
    @keyframes dp-slide{from{transform:translateY(100%)}to{transform:none}}
    .dp-modal::before{content:"";position:absolute;top:8px;left:50%;width:40px;height:4px;margin-left:-20px;border-radius:999px;background:var(--line)}
    .dp-head{padding:24px 16px 10px}
    /* the title block must be allowed to shrink. A flex item defaults to min-width:auto, so the
       nowrap subtitle below held it at its full 320px and shoved the close button off the right
       edge — clipped at 375px, fully out of reach at 320px. */
    .dp-head>div{min-width:0}
    .dp-sub{font-size:11.5px;gap:5px;white-space:normal}
    .dp-body{padding:0 16px calc(16px + env(safe-area-inset-bottom))}
    .dp-seg button{font-size:12.5px;gap:5px}
    .dp-tok-btn{height:40px}
    .dp-chip{height:40px}
    .dp-quick button{height:40px}
    .dp-quick{gap:8px}
    .dp-amt input{font-size:24px}
    .dp-get-n b{font-size:30px}
    .dp-qr{width:72px;height:72px}
    .dp-zoom{padding:52px 16px 22px}
  }
  @media (prefers-reduced-motion:reduce){
    .dp-overlay,.dp-modal,.dp-zoom{animation:none}
    .dp-status.is-live i::after{animation:none;display:none}
    .dp-overlay *{transition:none!important}
    .dp-wheel{animation:none}
  }

/* ===================== 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. */
  .app.is-guest .footer{justify-content:center;text-align:center}
  .app.is-guest .footer .soc{flex-basis:100%;justify-content:center}
  .app.is-guest .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)}
.au-in input{flex:1 1 auto;min-width:0;height:46px;background:none;border:0;outline:0;
  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}

/* ---- member view (FT_GAMES_ENABLE_NEW_UI_ROOT_MEMBERS) ---- */
/* coin / network disc for a token or chain with no known brand colour: its first letter on a neutral disc */
.dp-coin.is-glyph,.dp-nic.is-glyph{background:#64748b;color:#fff;font-family:var(--font-head);font-weight:800}
.dp-nic{color:#fff;font:800 10px var(--font-head)}
.dp-status.is-err{background:#fde8ec;border-color:transparent;border-style:solid;color:#a3122f}
.dp-status.is-err i{background:#d61c3c}
.dp-qr img,.dp-zoom-qr img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.dp-qr-err{display:grid;place-items:center;height:100%;font:600 10px/1.2 var(--font-body);color:var(--muted);text-align:center}
.au-captcha{margin:10px 0 2px;min-height:65px}
.op-elig{flex-wrap:wrap}
/* Most Played row and category tabs stay hidden for members too (plan B13): only "All" over the catalog */
.app:not(.is-guest) #cats,.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}}