/* ============================================================================
   New-UI layout for the CRO v2 inner pages: the left menu panel, the top
   header bar and the blue footer.

   GENERATED -- every rule below is copied from new_ui_home.css with only its
   selector rewritten. Do not hand-edit: restyle the layout there and
   regenerate, so the two cannot drift. tests/test_new_ui_layout.py pins the
   contract described here.

   Why a separate file at all: the inner pages already load Bootstrap 5.3,
   redesign-cro-v2.css and lobby_new.css, and new_ui_home.css opens with
   classless rules (`:root`, `*`, `html`, `body`, `a`, `button`, `img`,
   `h1`-`h4`, table rules). Loading it here would restyle every one of those
   pages, and `:root` alone would redefine the colour tokens they run on.

   So each selector is rewritten twice over:

     - `:root` and `.app` become `.nu-layout`, and anything else is nested
       under it, so no rule can match outside the layout. The custom
       properties land on the wrapper. Custom properties inherit, so they
       reach the page inside `.nu-content` too: the guard below limits which
       elements a rule matches, not what they inherit. A mounted page that
       reads an unprefixed token such as `var(--muted)` must restate its own
       values on `.nu-content` (fantasy_landing.css does).
     - the layout WRAPS the page: `.nu-content` holds what used to be the
       page body, so a lifted `.btn` or `.nav` rule would otherwise reach
       straight into it. Every selector therefore carries
       `:where(:not(.nu-content *))`, which excludes that subtree. `:where()` adds no
       specificity, so the guard changes nothing but reach, and it is applied
       to every rule rather than to the ones that look like they need it --
       the CRO v2 pages build much of their markup in JavaScript, so "this
       class never appears on these pages" is not a safe thing to conclude
       from reading their templates.

   The reverse direction needs nothing: page CSS still reaches the layout,
   but `.nu-layout .btn` is (0,2,0) against Bootstrap's (0,1,0), so the
   layout keeps its own styling.
   ========================================================================== */

/* ---- What the layout replaces.

   header-cro-v2.html stays included on these pages: it carries #depositModal,
   #withdrawModal, #stakingModal, #referralModal, #statsModal and
   #confirmWithdrawModal, which the layout's own menu opens, and its script
   keeps #balanceSpan and #priceSpan current for the header chips to mirror.
   All of that keeps working while hidden -- the modals live after `</header>`
   (line 180 of that partial), so none of them is inside what is hidden here.

   What goes is only the chrome the layout now provides: the dark nav bar and
   the strip container below it, plus the three strips the pages render on
   their own. The last four selectors match the list free_games_arcade.html
   already uses to hide the same strips on its page. ---- */
body.has-nu-layout header.main-header,
body.has-nu-layout .lobby-new-top-bars,
body.has-nu-layout #dailyRewardsHub,
body.has-nu-layout .dailyRewardsHub-compat--today,
body.has-nu-layout #promoBanner,
body.has-nu-layout #flashOfferBar
{
	display: none !important;
}

/* ---- The chrome's base typography.

   new_ui_home.css sets this on `body`, and that rule is deliberately not
   lifted: it would restyle the whole page the layout is mounted on. Without
   it the chrome inherited each page's own font instead -- 16px Poppins on the
   CRO v2 pages against the homepage's 14px Inter -- so every label that
   inherits came out bigger and in the wrong face.

   It sits on the three chrome roots rather than the wrapper, because the
   wrapper also contains the page. The declarations are copied out of that
   `body` rule by the generator, so they cannot drift from it. ---- */
.nu-layout .sidebar,
.nu-layout .header,
.nu-layout .footer
{
	color:var(--text);
	font:14px/1.5 var(--font-body);
	-webkit-font-smoothing:antialiased;
}

/* ---- ... and the one rule that defeats inheriting it.

   redesign-cro-v2.css carries `body * { font-family: Poppins }`, which matches
   every element of the chrome directly, and a direct match always beats an
   inherited value however specific the inherited one was. So the family has to
   be restated on the chrome's descendants.

   The weight is deliberate. `:where()` contributes nothing, leaving these at
   (0,1,0): above `body *` at (0,0,1), and below the chrome's own rules at
   (0,2,0) or more -- so the headings that ask for --font-head still get it,
   and only the elements that were meant to inherit are corrected. ---- */
:where(.nu-layout) .sidebar *,
:where(.nu-layout) .header *,
:where(.nu-layout) .footer *
{
	font-family: var(--font-body);
}

/* 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)
   ========================================================= */
.nu-layout
{
  /* 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
   ========================================================= */
.nu-layout *:where(:not(.nu-content *)),
.nu-layout *:where(:not(.nu-content *))::before,
.nu-layout *:where(:not(.nu-content *))::after { box-sizing:border-box }
.nu-layout h2:where(:not(.nu-content *)) { font-family:var(--font-head);margin:0;line-height:1.15;letter-spacing:-.01em }
.nu-layout a:where(:not(.nu-content *)) { color:inherit;text-decoration:none }
.nu-layout button:where(:not(.nu-content *)) { font:inherit;color:inherit;background:none;border:0;cursor:pointer }
.nu-layout img:where(:not(.nu-content *)) { display:block;max-width:100% }
.nu-layout :focus-visible:where(:not(.nu-content *)) { outline:3px solid var(--pink);outline-offset:2px;border-radius:6px }
.nu-layout [hidden]:where(:not(.nu-content *)) { display:none!important }
.nu-layout .icon:where(:not(.nu-content *)) { 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
   ========================================================= */
.nu-layout:where(:not(.nu-content *)) { display:grid;grid-template-columns:var(--sidebar-w) 1fr;min-height:100vh }
.nu-layout .sidebar:where(:not(.nu-content *)) { 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 */
.nu-layout .side-scroll:where(:not(.nu-content *))
{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
}
.nu-layout .side-scroll:where(:not(.nu-content *))::-webkit-scrollbar { width:6px }
.nu-layout .side-scroll:where(:not(.nu-content *))::-webkit-scrollbar-thumb { background:var(--line);border-radius:999px }
.nu-layout .side-scroll:where(:not(.nu-content *))::-webkit-scrollbar-track { background:transparent }
.nu-layout .brand:where(:not(.nu-content *)) { display:flex;align-items:center;gap:10px;padding:2px 8px 14px;flex:none }
.nu-layout .brand img:where(:not(.nu-content *)) { height:34px }
.nu-layout .nav:where(:not(.nu-content *)) { 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 */
.nu-layout .nav-label:where(:not(.nu-content *))
{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)
}
.nu-layout .nav-label:where(:not(.nu-content *))::after { content:"";flex:1;height:1px;background:var(--line) }
.nu-layout .nav a:where(:not(.nu-content *)) { 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 }
.nu-layout .nav a:hover:where(:not(.nu-content *)) { background:var(--surface-2);color:var(--text) }
.nu-layout .nav a.active:where(:not(.nu-content *)) { background:linear-gradient(90deg,var(--pink-100),transparent);color:var(--pink) }
.nu-layout .nav a.active:where(:not(.nu-content *))::before { content:"";position:absolute;left:-14px;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--pink) }
.nu-layout .nav .pill:where(:not(.nu-content *)) { 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 }
.nu-layout .nav .pill.green:where(:not(.nu-content *)) { background:var(--green) }
.nu-layout .nav .pill.gold:where(:not(.nu-content *)) { background:var(--gold);color:var(--navy) }
.nu-layout .nav .pill.new:where(:not(.nu-content *)) { background:var(--purple);color:#fff }
/* ---- LINK & EARN ----------------------------------------------------------
   A dark reward card dropped into the light sidebar, so the offer reads as a prize
   rather than another settings row. It leads with one message (the spins on offer),
   then the single way to claim, split by the same dotted perforation the hero ticket
   boxes use. Removes itself once linked. */
.nu-layout .nav-perks:where(:not(.nu-content *))
{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 */
.nu-layout .nav-perks:where(:not(.nu-content *))::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
}
.nu-layout .nav-perks.gone:where(:not(.nu-content *)) { opacity:0;transform:translateY(-6px) }
.nu-layout .np-kicker:where(:not(.nu-content *))
{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)
}
.nu-layout .np-kicker .icon:where(:not(.nu-content *)) { width:12px;height:12px;flex:none;color:var(--gold-2) }
/* the one message: what is on the table */
.nu-layout .np-prize:where(:not(.nu-content *)) { position:relative;display:flex;align-items:center;gap:8px;margin-top:5px }
.nu-layout .np-prize b:where(:not(.nu-content *))
{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)
}
.nu-layout .np-prize em:where(:not(.nu-content *))
{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 */
.nu-layout .np-perf:where(:not(.nu-content *))
{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)
}
.nu-layout .np-row:where(:not(.nu-content *))
{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
}
.nu-layout .np-row+.np-row:where(:not(.nu-content *)) { margin-top:5px }
.nu-layout .np-row:hover:where(:not(.nu-content *)) { background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3);transform:translateX(2px) }
.nu-layout .np-row:active:where(:not(.nu-content *)) { transform:translateX(2px) scale(.99) }
.nu-layout .np-row:focus-visible:where(:not(.nu-content *)) { outline:2px solid var(--gold-2);outline-offset:2px }
.nu-layout .np-ic:where(:not(.nu-content *))
{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)
}
.nu-layout .np-ic .icon:where(:not(.nu-content *)) { width:12px;height:12px }
.nu-layout .np-ic.mail:where(:not(.nu-content *)) { background:linear-gradient(150deg,#ff8ab4,var(--pink)) }
.nu-layout .np-ic.tg:where(:not(.nu-content *)) { background:linear-gradient(150deg,#55c9f5,#1d8fd1) }
.nu-layout .np-t:where(:not(.nu-content *)) { min-width:0;flex:1 }
/* one line, always: the slot is ~62px and a wrap makes the row grow */
.nu-layout .np-t b:where(:not(.nu-content *))
{display:block;font:700 11.5px/1.2 var(--font-body);color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.nu-layout .np-go:where(:not(.nu-content *))
{flex:none;display:inline-flex;align-items:center;gap:3px;
  font:800 10px var(--font-head);color:var(--gold-2);white-space:nowrap
}
.nu-layout .np-go .icon:where(:not(.nu-content *)) { width:10px;height:10px;transition:transform .18s }
.nu-layout .np-row:hover .np-go .icon:where(:not(.nu-content *)) { transform:translateX(2px) }
/* claimed: colour plus an icon and a word, never colour alone */
.nu-layout .np-row.done:where(:not(.nu-content *)) { cursor:default;transform:none;background:rgba(47,224,138,.14);border-color:rgba(47,224,138,.42) }
.nu-layout .np-row.done .np-ic:where(:not(.nu-content *)) { background:linear-gradient(150deg,#5ff0b0,var(--green)) }
.nu-layout .np-row.done .np-t b:where(:not(.nu-content *)) { color:#8ff0c4 }
.nu-layout .np-row.done .np-go:where(:not(.nu-content *)) { color:#8ff0c4 }
.nu-layout .np-row.done:hover:where(:not(.nu-content *)) { background:rgba(47,224,138,.14);border-color:rgba(47,224,138,.42);transform:none }
/* the icon rail has no room for it */
.nu-layout.is-collapsed .nav-perks:where(:not(.nu-content *)) { display:none }
@media (min-width:721px) and (max-width:1240px)
{
	.nu-layout:not(.is-expanded) .nav-perks:where(:not(.nu-content *)) { display:none }
}

@media (max-width:720px)
{
	.nu-layout .np-row:where(:not(.nu-content *)) { min-height:44px;padding:7px 6px }
	.nu-layout .np-ic:where(:not(.nu-content *)) { width:24px;height:24px;border-radius:8px }
	.nu-layout .np-ic .icon:where(:not(.nu-content *)) { width:13px;height:13px }
}

@media (prefers-reduced-motion:reduce)
{
	.nu-layout .nav-perks:where(:not(.nu-content *)),
	.nu-layout .np-row:where(:not(.nu-content *)),
	.nu-layout .np-go .icon:where(:not(.nu-content *)) { transition:none }
}

/* collapse handle — appears on sidebar hover, toggles the icon-only rail */
.nu-layout .rail-toggle:where(:not(.nu-content *)) { 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 }
.nu-layout .sidebar:hover .rail-toggle:where(:not(.nu-content *)),
.nu-layout .rail-toggle:focus-visible:where(:not(.nu-content *)) { opacity:1;transform:none }
.nu-layout .rail-toggle:hover:where(:not(.nu-content *)) { color:var(--pink);border-color:var(--pink) }
.nu-layout .rail-toggle .icon:where(:not(.nu-content *)) { width:15px;height:15px;transition:transform .25s }
.nu-layout.is-collapsed .rail-toggle .icon:where(:not(.nu-content *)) { 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. */
.nu-layout.is-collapsed:where(:not(.nu-content *)) { grid-template-columns:var(--sidebar-rail) 1fr }
/* the padding lives on .side-scroll, not .sidebar: 76px rail − 2×8px = 60px for the icons */
.nu-layout.is-collapsed .side-scroll:where(:not(.nu-content *)) { padding:16px 8px 14px }
.nu-layout.is-collapsed .brand:where(:not(.nu-content *)) { 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 */
.nu-layout.is-collapsed .brand img:where(:not(.nu-content *)) { flex:none;height:32px;width:32px;object-fit:cover;object-position:left center }
.nu-layout.is-collapsed .nav a:where(:not(.nu-content *)) { justify-content:center;padding:12px }
.nu-layout.is-collapsed .nav a span:where(:not(.nu-content *)),
.nu-layout.is-collapsed .nav .pill:where(:not(.nu-content *)),
.nu-layout.is-collapsed .nav-label:where(:not(.nu-content *)),
.nu-layout.is-collapsed .age span:where(:not(.nu-content *)) { display:none }
.nu-layout.is-collapsed .nav a.active:where(:not(.nu-content *))::before { left:-8px }
.nu-layout.is-collapsed .age:where(:not(.nu-content *)) { justify-content:center }
.nu-layout.is-collapsed .sidebar-foot:where(:not(.nu-content *)) { padding:14px 0 0 }
@media (min-width:721px) and (max-width:1240px)
{
	.nu-layout:not(.is-expanded):where(:not(.nu-content *)) { grid-template-columns:var(--sidebar-rail) 1fr }
	.nu-layout:not(.is-expanded) .side-scroll:where(:not(.nu-content *)) { padding:16px 8px 14px }
	.nu-layout:not(.is-expanded) .brand:where(:not(.nu-content *)) { justify-content:center;padding:2px 0 10px }
	.nu-layout:not(.is-expanded) .brand img:where(:not(.nu-content *)) { flex:none;height:32px;width:32px;object-fit:cover;object-position:left center }
	.nu-layout:not(.is-expanded) .nav a:where(:not(.nu-content *)) { justify-content:center;padding:12px }
	.nu-layout:not(.is-expanded) .nav a span:where(:not(.nu-content *)),
	.nu-layout:not(.is-expanded) .nav .pill:where(:not(.nu-content *)),
	.nu-layout:not(.is-expanded) .nav-label:where(:not(.nu-content *)),
	.nu-layout:not(.is-expanded) .age span:where(:not(.nu-content *)) { display:none }
	.nu-layout:not(.is-expanded) .nav a.active:where(:not(.nu-content *))::before { left:-8px }
	.nu-layout:not(.is-expanded) .age:where(:not(.nu-content *)) { justify-content:center }
	.nu-layout:not(.is-expanded) .sidebar-foot:where(:not(.nu-content *)) { padding:14px 0 0 }
	.nu-layout:not(.is-expanded) .rail-toggle .icon:where(:not(.nu-content *)) { transform:rotate(180deg) }
}

.nu-layout .sidebar-foot:where(:not(.nu-content *)) { flex:none;margin-top:auto;padding:11px 8px 0;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px }
.nu-layout .age:where(:not(.nu-content *)) { display:flex;align-items:center;gap:8px;font-size:11px;color:var(--muted) }
.nu-layout .age b:where(:not(.nu-content *)) { background:var(--pink);color:#fff;border-radius:6px;padding:2px 6px;font-size:10px }
.nu-layout .main:where(:not(.nu-content *)) { min-width:0 }
.nu-layout .header:where(:not(.nu-content *)) { 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 }
.nu-layout .header.scrolled:where(:not(.nu-content *)) { border-color:var(--line) }
.nu-layout .burger:where(:not(.nu-content *)) { display:none;width:42px;height:42px;border-radius:10px;background:var(--surface);border:1px solid var(--line);place-items:center }
.nu-layout .search:where(:not(.nu-content *)) { 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) }
.nu-layout .search input:where(:not(.nu-content *)) { flex:1;border:0;outline:0;background:none;font:inherit;color:var(--text) }
.nu-layout .search kbd:where(:not(.nu-content *)) { font:600 11px var(--font-body);background:var(--surface-2);border:1px solid var(--line);border-radius:6px;padding:2px 6px;color:var(--muted) }
.nu-layout .hright:where(:not(.nu-content *)) { 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) */
.nu-layout .chip:where(:not(.nu-content *))
{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)
}
.nu-layout .chip.price:where(:not(.nu-content *)) { color:var(--text-2);font-variant-numeric:tabular-nums }
.nu-layout .chip.price i:where(:not(.nu-content *)) { width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(18,179,124,.2) }
.nu-layout .chip.balance:where(:not(.nu-content *)) { color:var(--text);border-color:rgba(238,27,99,.35);font-variant-numeric:tabular-nums }
.nu-layout .chip.balance small:where(:not(.nu-content *)) { color:var(--pink);font-weight:800 }
/* the header price chip is hidden below 900px, so the drawer carries it on phones */
.nu-layout .nav-price:where(:not(.nu-content *))
{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
}
.nu-layout .nav-price i:where(:not(.nu-content *)) { 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. */
.nu-layout .nav-price span:where(:not(.nu-content *)) { white-space:normal }
.nu-layout .nav-price b:where(:not(.nu-content *)) { color:var(--text);font-weight:800 }
.nu-layout .btn:where(:not(.nu-content *)) { 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 }
.nu-layout .btn:active:where(:not(.nu-content *)) { transform:translateY(1px) scale(.99) }
.nu-layout .btn-ghost:where(:not(.nu-content *)) { background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22) }
.nu-layout .btn-ghost:hover:where(:not(.nu-content *)) { background:rgba(255,255,255,.2) }
/* 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. */
.nu-layout .btn-deposit:where(:not(.nu-content *))
{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)
}
.nu-layout .btn-deposit:hover:where(:not(.nu-content *))
{background:linear-gradient(135deg,#ff7fb3 0%,#f22b7d 45%,#bf1055 100%);
  box-shadow:0 16px 34px -10px rgba(224,30,110,.8)
}
.nu-layout .btn-sm:where(:not(.nu-content *)) { height:36px;padding:0 14px;font-size:13px }
.nu-layout .avatar:where(:not(.nu-content *)) { 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 }
.nu-layout .avatar:hover:where(:not(.nu-content *)) { transform:scale(1.05) }
/* account dropdown (z-scale: header 30 · menu 50) */
.nu-layout .user:where(:not(.nu-content *)) { position:relative;flex:none }
.nu-layout .user-menu:where(:not(.nu-content *)) { 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) }
.nu-layout .user-menu:where(:not(.nu-content *))::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 }
.nu-layout .user-menu a:where(:not(.nu-content *)),
.nu-layout .user-menu button:where(:not(.nu-content *)) { 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 }
.nu-layout .user-menu a:hover:where(:not(.nu-content *)),
.nu-layout .user-menu button:hover:where(:not(.nu-content *)) { background:var(--surface-2);color:var(--text) }
.nu-layout .user-menu .icon:where(:not(.nu-content *)) { width:17px;height:17px;color:var(--muted) }
.nu-layout .user-menu a:hover .icon:where(:not(.nu-content *)),
.nu-layout .user-menu button:hover .icon:where(:not(.nu-content *)) { color:var(--pink) }
.nu-layout .user-menu .sep:where(:not(.nu-content *)) { height:1px;background:var(--line);margin:4px 8px }
.nu-layout .user-menu .danger:where(:not(.nu-content *)) { color:var(--red) }
.nu-layout .user-menu .danger:hover:where(:not(.nu-content *)) { background:#fff1f4;color:var(--red) }
.nu-layout .user-menu .danger:hover .icon:where(:not(.nu-content *)),
.nu-layout .user-menu .danger .icon:where(:not(.nu-content *)) { color:var(--red) }
/* 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. */
.nu-layout .footer:where(:not(.nu-content *)) { background:var(--navy);color:#fff;padding:18px 28px;display:flex;align-items:center;flex-wrap:wrap;gap:12px;row-gap:12px }
.nu-layout .footer .soc:where(:not(.nu-content *)) { display:flex;gap:10px }
.nu-layout .footer .soc a:where(:not(.nu-content *)) { width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.1);display:grid;place-items:center;color:#fff }
.nu-layout .footer .soc a:hover:where(:not(.nu-content *)) { background:var(--pink) }
.nu-layout .footer .right:where(:not(.nu-content *)) { margin-left:auto;display:flex;align-items:center;gap:16px;font-size:12px;color:rgba(255,255,255,.75) }
.nu-layout .footer .right b:where(:not(.nu-content *)) { background:var(--pink);color:#fff;border-radius:6px;padding:3px 7px;font-size:11px }
@media (max-width:900px)
{
	.nu-layout .search:where(:not(.nu-content *)) { display:none }
	.nu-layout .chip.price:where(:not(.nu-content *)) { display:none }
	.nu-layout .header:where(:not(.nu-content *)) { padding:0 16px }
}

@media (max-width:720px)
{
	.nu-layout:where(:not(.nu-content *)) { 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 */
	.nu-layout .sidebar:where(:not(.nu-content *)) { 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 }
	.nu-layout .nav-price:where(:not(.nu-content *)) { display:flex }
	/* the header hides the price chip this small, so the drawer shows it */
	.nu-layout .sidebar.open:where(:not(.nu-content *)) { transform:none }
	body.has-nu-layout .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 }
	body.has-nu-layout .scrim.show { opacity:1;pointer-events:auto }
	body.has-nu-layout.nav-open { overflow:hidden }
	.nu-layout .sidebar .brand img:where(:not(.nu-content *)) { height:34px;width:auto;object-fit:contain }
	.nu-layout .nav a:where(:not(.nu-content *)) { justify-content:flex-start }
	.nu-layout .nav a span:where(:not(.nu-content *)),
	.nu-layout .nav .pill:where(:not(.nu-content *)),
	.nu-layout .nav-label:where(:not(.nu-content *)) { display:flex }
	.nu-layout .rail-toggle:where(:not(.nu-content *)) { display:none }
	/* the drawer replaces the rail on phones */
	.nu-layout .burger:where(:not(.nu-content *)) { display:grid }
	.nu-layout .chip.balance small:where(:not(.nu-content *)) { display:none }
	/* footer */
	.nu-layout .footer:where(:not(.nu-content *)) { padding:14px 16px }
}

@media (max-width:400px)
{
	.nu-layout .header:where(:not(.nu-content *)) { padding:0 12px }
	.nu-layout .hright:where(:not(.nu-content *)) { gap:7px }
	.nu-layout .chip.balance:where(:not(.nu-content *)) { padding:0 11px;font-size:12px }
	.nu-layout .btn-sm:where(:not(.nu-content *)) { padding:0 11px }
}

@media (max-height:480px) and (orientation:landscape)
{
	.nu-layout .header:where(:not(.nu-content *)) { height:56px }
}

@media (prefers-reduced-motion:reduce)
{
	.nu-layout *:where(:not(.nu-content *)),
	.nu-layout *:where(:not(.nu-content *))::before,
	.nu-layout *:where(:not(.nu-content *))::after { animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important }
}

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

/* ---- header: Log in / Sign up replace the balance, avatar and Deposit ---- */
.nu-layout .hauth:where(:not(.nu-content *)) { display:none;align-items:center;gap:8px }
.nu-layout .btn-ghost:where(:not(.nu-content *)) { background:var(--surface);color:var(--text);border:1px solid var(--line) }
.nu-layout .btn-ghost:hover:where(:not(.nu-content *)) { border-color:var(--muted);background:var(--surface-2) }
.nu-layout.is-guest .hright .chip.balance:where(:not(.nu-content *)),
.nu-layout.is-guest .hright .user:where(:not(.nu-content *)),
.nu-layout.is-guest .hright a.btn-deposit:where(:not(.nu-content *)) { display:none }
.nu-layout.is-guest .hauth:where(:not(.nu-content *)) { display:inline-flex }
/* ---- 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. ---- */
.nu-layout.is-guest:where(:not(.nu-content *)) { --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 }
@media (max-width:1100px)
{
	.nu-layout.is-guest:where(:not(.nu-content *)) { --sp-pad:70px }
}

@media (max-width:900px)
{
	/* smaller shoulders (f 14) so the narrower inset still clears the corner */
	.nu-layout.is-guest:where(:not(.nu-content *)) { --sp-pad:56px;--sp-f:14px;--sp-bw:43.82px;--sp-bh:9.74px;--sp-fy:4.26px }
}

@media (max-width:800px)
{
	.nu-layout.is-guest:where(:not(.nu-content *)) { --sp-pad:48px }
}

@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 */
	.nu-layout.is-guest:where(:not(.nu-content *)) { --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 }
}

@media (max-width:359px)
{
	.nu-layout.is-guest:where(:not(.nu-content *)) { --sp-pad:30px;--sp-f:10px;--sp-bw:36.66px;--sp-bh:7.37px;--sp-fy:2.63px }
}

.nu-layout .flinks:where(:not(.nu-content *)),
.nu-layout .hbrand:where(:not(.nu-content *)) { display:none }
/* ---- footer: internal + legal links (opt-footer) ---- */
.nu-layout.is-guest.opt-footer .flinks:where(:not(.nu-content *)) { display:flex }
/* the wrap this row used to add now lives on .footer itself, for both states */
.nu-layout .flinks:where(:not(.nu-content *)) { flex-wrap:wrap;gap:6px 16px;font-size:12px }
.nu-layout .flinks a:where(:not(.nu-content *)) { color:rgba(255,255,255,.72) }
.nu-layout .flinks a:hover:where(:not(.nu-content *)),
.nu-layout .flinks a:focus-visible:where(:not(.nu-content *)) { color:#fff;text-decoration:underline }
@media (max-width:720px)
{
	.nu-layout.is-guest .hbrand:where(:not(.nu-content *)) { display:block;flex:none }
	.nu-layout.is-guest .hbrand img:where(:not(.nu-content *)) { display:block;height:24px;width:auto }
	.nu-layout.is-guest .hauth .btn:where(:not(.nu-content *)) { height:40px }
	/* 16px: iOS does not zoom the page when the field is focused */
	.nu-layout.is-guest .flinks:where(:not(.nu-content *)) { order:3;flex-basis:100% }
	/* links get their own line on phones */
	  /* phones: centre the whole footer. Each group takes its own full-width row
	     (.right drops the margin-left:auto that pins it right on desktop), so the
	     icons, the copyright line and the links stack centred instead of reading
	     left-icons / right-copyright / left-links.
	     Signed-in players saw the uncentred version until now: these three rules
	     were scoped to .is-guest, though nothing about them is guest-only. */
	.nu-layout .footer:where(:not(.nu-content *)) { justify-content:center;text-align:center }
	.nu-layout .footer .soc:where(:not(.nu-content *)) { flex-basis:100%;justify-content:center }
	.nu-layout .footer .right:where(:not(.nu-content *)) { margin-left:0;flex-basis:100%;justify-content:center;flex-wrap:wrap }
	.nu-layout.is-guest .flinks:where(:not(.nu-content *)) { justify-content:center }
}

/* ---- sidebar: personal counters and account-only destinations go ---- */
.nu-layout.is-guest .nav [data-auth-only]:where(:not(.nu-content *)) { display:none }
.nu-layout.is-guest .nav a em.pill[data-mine]:where(:not(.nu-content *)) { display:none }
/* the guest card takes the Link & earn card's place, same shape, different offer */
.nu-layout.is-guest .nav-perks:where(:not(.nu-content *)) { display:none }
.nu-layout .nav-guest:where(:not(.nu-content *))
{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)
}
.nu-layout.is-guest .nav-guest:where(:not(.nu-content *)) { display:block }
.nu-layout.is-collapsed .nav-guest:where(:not(.nu-content *)) { display:none }
@media (min-width:721px) and (max-width:1240px)
{
	.nu-layout:not(.is-expanded) .nav-guest:where(:not(.nu-content *)) { display:none }
}

.nu-layout .nav-guest:where(:not(.nu-content *))::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
}
.nu-layout .ng-k:where(:not(.nu-content *))
{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)
}
.nu-layout .ng-k .icon:where(:not(.nu-content *)) { width:12px;height:12px;flex:none;color:var(--gold-2) }
.nu-layout .ng-t:where(:not(.nu-content *)) { position:relative;margin:6px 0 10px;font:700 12.5px/1.35 var(--font-body);color:#fff }
.nu-layout .ng-t b:where(:not(.nu-content *)) { color:var(--gold-2);font-weight:800 }
.nu-layout .ng-go:where(:not(.nu-content *))
{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
}
.nu-layout .ng-go:hover:where(:not(.nu-content *)) { box-shadow:0 14px 26px -10px rgba(224,30,110,1) }
.nu-layout .ng-go:active:where(:not(.nu-content *)) { transform:scale(.98) }
/* ===================== 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. */
.nu-layout .au-overlay:where(:not(.nu-content *))
{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
}
.nu-layout .au-overlay[hidden]:where(:not(.nu-content *)) { display:none }
.nu-layout :where(.au-overlay) button:where(:not(.nu-content *)) { 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. */
.nu-layout .au-overlay button:focus-visible:where(:not(.nu-content *)) { outline:3px solid var(--pink);outline-offset:2px }
.nu-layout .au-card:where(:not(.nu-content *))
{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)
}
.nu-layout .au-x:where(:not(.nu-content *))
{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
}
.nu-layout .au-x:where(:not(.nu-content *))::before { content:"";position:absolute;inset:-6px;border-radius:10px }
.nu-layout .au-x .icon:where(:not(.nu-content *)) { width:18px;height:18px }
.nu-layout .au-x:hover:where(:not(.nu-content *)) { background:var(--surface-2);color:var(--text) }
.nu-layout .au-card h2:where(:not(.nu-content *)) { margin:0;font:800 21px/1.2 var(--font-head);letter-spacing:-.02em;color:var(--text) }
.nu-layout .au-sub:where(:not(.nu-content *)) { margin:6px 0 0;font-size:13px;color:var(--text-2) }
/* the reward strip: the same two things the sidebar card promises */
.nu-layout .au-gift:where(:not(.nu-content *))
{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)
}
.nu-layout .au-gift .icon:where(:not(.nu-content *)) { width:20px;height:20px;flex:none;color:var(--pink) }
.nu-layout .au-gift p:where(:not(.nu-content *)) { margin:0;font-size:12.5px;line-height:1.45;color:var(--text-2) }
.nu-layout .au-gift b:where(:not(.nu-content *)) { color:var(--text);font-weight:700 }
/* form */
.nu-layout .au-form:where(:not(.nu-content *)) { margin:14px 0 0 }
.nu-layout .au-f:where(:not(.nu-content *)) { margin:0 0 12px }
.nu-layout .au-f label:where(:not(.nu-content *)) { display:block;margin:0 0 5px;font:600 11.5px var(--font-body);letter-spacing:.02em;color:var(--text-2) }
.nu-layout .au-in:where(:not(.nu-content *))
{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. */
.nu-layout .au-in:focus-within:where(:not(.nu-content *)) { border-color:var(--text-2) }
.nu-layout .au-in input:where(:not(.nu-content *))
{flex:1 1 auto;min-width:0;height:46px;background:none;border:0;outline:0;
  font:500 15px var(--font-body);color:var(--text)
}
.nu-layout .au-in input:where(:not(.nu-content *))::placeholder { color:var(--muted) }
.nu-layout .au-in.is-bad:where(:not(.nu-content *)) { border-color:var(--red);box-shadow:0 0 0 3px rgba(255,59,92,.14) }
.nu-layout .au-err:where(:not(.nu-content *)) { display:none;align-items:center;gap:6px;margin:6px 0 0;font-size:11.5px;font-weight:600;color:#c2183a }
.nu-layout .au-err .icon:where(:not(.nu-content *)) { width:13px;height:13px;stroke-width:2.4 }
.nu-layout .au-in.is-bad ~ .au-err:where(:not(.nu-content *)),
.nu-layout .au-err.show:where(:not(.nu-content *)) { display:flex }
.nu-layout .au-hint:where(:not(.nu-content *)) { 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. ---- */
.nu-layout .au-step2:where(:not(.nu-content *)) { display:none }
.nu-layout .au-overlay.is-code .au-step1:where(:not(.nu-content *)) { display:none }
.nu-layout .au-overlay.is-code .au-step2:where(:not(.nu-content *)) { display:block }
.nu-layout .au-in.is-locked:where(:not(.nu-content *)) { background:var(--surface-2) }
.nu-layout .au-in input[readonly]:where(:not(.nu-content *)) { color:var(--text-2);cursor:default }
.nu-layout .au-masked:where(:not(.nu-content *)) { margin:8px 0 14px;font-size:12.5px;color:var(--text-2) }
.nu-layout .au-masked b:where(:not(.nu-content *)) { color:var(--text);font-weight:600;word-break:break-all }
.nu-layout #auCode:where(:not(.nu-content *)) { letter-spacing:.32em;font:600 16px var(--font-body) }
.nu-layout #auCode:where(:not(.nu-content *))::placeholder { letter-spacing:0;font-weight:500 }
/* the expiry row: the rule the user is racing, and the clock */
.nu-layout .au-exp:where(:not(.nu-content *))
{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px 0 14px;
  font:600 12px var(--font-body)
}
.nu-layout .au-exp span:where(:not(.nu-content *)) { color:#c2183a }
.nu-layout .au-exp b:where(:not(.nu-content *)) { font:700 13px var(--font-head);font-variant-numeric:tabular-nums;color:#c2183a }
.nu-layout .au-exp.is-out span:where(:not(.nu-content *)),
.nu-layout .au-exp.is-out b:where(:not(.nu-content *)) { color:var(--text-2) }
.nu-layout .au-again:where(:not(.nu-content *)) { display:flex;flex-direction:column;gap:9px;margin:14px 0 0 }
.nu-layout .au-again button:where(:not(.nu-content *))
{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
}
.nu-layout .au-again button:hover:not([disabled]):where(:not(.nu-content *)) { border-color:var(--muted);background:var(--surface-2) }
.nu-layout .au-again button[disabled]:where(:not(.nu-content *)) { opacity:.45;cursor:default }
.nu-layout .au-go:where(:not(.nu-content *))
{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
}
.nu-layout .au-go:hover:where(:not(.nu-content *)) { box-shadow:0 18px 34px -12px rgba(224,30,110,.9) }
.nu-layout .au-go:active:where(:not(.nu-content *)) { transform:scale(.98) }
/* or / telegram */
.nu-layout .au-or:where(:not(.nu-content *))
{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)
}
.nu-layout .au-or:where(:not(.nu-content *))::before,
.nu-layout .au-or:where(:not(.nu-content *))::after { content:"";flex:1;height:1px;background:var(--line) }
.nu-layout .au-tg:where(:not(.nu-content *))
{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
}
.nu-layout .au-tg:hover:where(:not(.nu-content *)) { border-color:var(--muted);background:var(--surface-2) }
.nu-layout .au-tg .tgic:where(:not(.nu-content *))
{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,#55c9f5,#1d8fd1);color:#fff
}
.nu-layout .au-tg .tgic .icon:where(:not(.nu-content *)) { width:12px;height:12px }
.nu-layout .au-fine:where(:not(.nu-content *)) { margin:14px 0 0;font-size:11.5px;line-height:1.5;color:var(--muted);text-align:center }
.nu-layout .au-fine b:where(:not(.nu-content *)) { 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)
{
	.nu-layout .au-overlay:where(:not(.nu-content *)) { padding:0;align-items:flex-end }
	.nu-layout .au-card:where(:not(.nu-content *))
	{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)
	}
}

@media (prefers-reduced-motion:reduce)
{
	.nu-layout .au-overlay:where(:not(.nu-content *)),
	.nu-layout .au-card:where(:not(.nu-content *)) { animation:none }
	.nu-layout .au-overlay *:where(:not(.nu-content *)) { transition:none!important }
}

/* ---- served build additions ---- */
.nu-layout .icon-16:where(:not(.nu-content *)) { width:16px;height:16px }
/* counts that belong to an account (jackpot tickets, wheel spins, free tickets) */
.nu-layout.is-guest .nav [data-mine]:where(:not(.nu-content *)) { display:none }
.nu-layout .au-captcha:where(:not(.nu-content *)) { margin:10px 0 2px;min-height:65px }

/* ---- keyframes the rules above reference ---- */
@keyframes au-fade{from{opacity:0}to{opacity:1}}
@keyframes au-pop{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes au-slide{from{transform:translateY(100%)}to{transform:none}}
@keyframes menuIn{from{opacity:0;transform:scale(.96) translateY(-6px)}}