/* ===========================================================
   LUXIO — Neon Tokyo Nightdrive social-casino homepage
   INTL-social / _core/social-v2/ — design system: "Neon Tokyo Nightdrive"
   =========================================================== */

:root {
  --lx-bg-deep:      #05060d;
  --lx-bg-purple-1:  #0a1128;
  --lx-bg-purple-2:  #0d1b4d;
  --lx-bg-magenta:   #3d0e7a;
  --lx-bg-pink:      #ff2fb8;
  --lx-gold:         #ff2fb8;
  --lx-gold-deep:    #c400ff;
  --lx-cyan:         #00d4ff;
  --lx-violet:       #7a2fff;
  --lx-white:        #eaf6ff;
  --lx-ink:          #0a0518;
  --lx-text-dim:     #9db4d8;
  --lx-card-bg:      rgba(0, 212, 255, 0.05);
  --lx-card-border:  rgba(0, 212, 255, 0.18);
  --lx-radius-lg:    18px;
  --lx-radius-md:    12px;
  --lx-shadow-glow:  0 0 0 rgba(0,0,0,0);

  /* _core/social-v2 template token aliases — see
     _core/social-v2/templates/auth-modal.template.html "Required CSS
     custom properties" for the contract these satisfy. */
  --sv2-gold:        var(--lx-gold);
  --sv2-gold-deep:   var(--lx-gold-deep);
  --sv2-white:       var(--lx-white);
  --sv2-ink:         var(--lx-ink);
  --sv2-text-dim:    var(--lx-text-dim);
  --sv2-card-bg:     var(--lx-card-bg);
  --sv2-card-border: var(--lx-card-border);
  --sv2-radius-lg:   var(--lx-radius-lg);
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
  background: var(--lx-bg-deep);
  color: var(--lx-white);
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, p { margin: 0; }
button { font-family: inherit; }

.container {
  width: 100%;
  margin: 0;
  padding: 0 20px;
}
@media (min-width: 760px) {
  .container { padding: 0 36px; }
}
@media (min-width: 1180px) {
  .container { padding: 0 56px; }
}

/* ---------- Global vivid backdrop ---------- */
body {
  background:
    radial-gradient(circle at 12% -10%, rgba(0, 229, 255, 0.20), transparent 42%),
    radial-gradient(circle at 90% 0%, rgba(255, 210, 63, 0.16), transparent 38%),
    radial-gradient(circle at 50% 120%, rgba(224, 32, 126, 0.35), transparent 55%),
    linear-gradient(160deg, var(--lx-bg-deep) 0%, var(--lx-bg-purple-1) 38%, var(--lx-bg-purple-2) 68%, var(--lx-bg-magenta) 100%);
  background-attachment: fixed;
}

/* ---------- Sparkle decoration (pure CSS, no JS) ---------- */
.sparkle-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.55) 0, transparent 60%),
    radial-gradient(2px 2px at 80% 10%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 60% 35%, rgba(255,210,63,.6) 0, transparent 60%),
    radial-gradient(2px 2px at 30% 60%, rgba(0,229,255,.5) 0, transparent 60%),
    radial-gradient(1.5px 1.5px at 92% 55%, rgba(255,255,255,.4) 0, transparent 60%),
    radial-gradient(2px 2px at 45% 85%, rgba(255,210,63,.5) 0, transparent 60%);
  background-repeat: no-repeat;
  animation: sparkle-drift 14s ease-in-out infinite alternate;
}
@keyframes sparkle-drift {
  from { opacity: .6; transform: translateY(0); }
  to   { opacity: 1;  transform: translateY(-14px); }
}
@media (prefers-reduced-motion: reduce) {
  .sparkle-field { animation: none; }
}

/* ---------- Shell: sticky top bar + max-width-centered content ----------
   Nav archetype: top-bar-persistent (see _core/social-v2/dictionaries/
   page_architectures.json). Deliberate contrast with the Glimmo reference
   (sidebar-persistent, full-bleed content) — the interaction pattern here
   is a classic sticky horizontal navbar, and content below it is
   max-width-centered, never full-bleed. */
.lx-shell {
  position: relative;
  z-index: 1;
}
.lx-content {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}
@media (min-width: 760px) {
  .lx-content { padding: 0 36px; }
}

.lx-topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  background: rgba(5, 6, 13, .82);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 212, 255, .14);
}
@media (min-width: 760px) {
  .lx-topbar { padding: 14px 36px; }
}

.lx-topbar__brandrow {
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-toggle {
  display: flex;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  align-items: center;
  justify-content: center;
  flex: none;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--lx-white);
  position: relative;
  transition: transform .2s ease, opacity .2s ease;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); background: var(--lx-gold); }
.nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); background: var(--lx-gold); }

.lx-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Baloo 2', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .01em;
  min-height: 44px;
}
.lx-brand__mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--lx-gold), var(--lx-gold-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(255, 47, 184, 0.45);
  flex: none;
}
.lx-brand__mark svg { width: 22px; height: 22px; color: #0a0518; }
.lx-brand__gold {
  background: linear-gradient(90deg, var(--lx-gold) 0%, var(--lx-cyan) 50%, var(--lx-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lx-side__links {
  display: none;
}
.lx-side__links.is-open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%;
  left: 20px;
  right: 20px;
  margin-top: 8px;
  padding: 8px;
  gap: 2px;
  background: rgba(6, 7, 16, .98);
  border: 1px solid rgba(0, 212, 255, .16);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, .55);
}
.lx-side__links a {
  font-weight: 700;
  font-size: 14.5px;
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-radius: 10px;
  color: var(--lx-text-dim);
  transition: color .15s ease, background .15s ease;
}
.lx-side__links a:hover { color: var(--lx-white); }

.lx-topbar__actions { display: flex; align-items: center; gap: 10px; }
.lx-topbar__actions .btn--sm { padding: 8px 14px; }

/* Auth-state chip — swapped in for .lx-topbar__actions once a real session
   exists (gmbc_cc_land's auth-client.js toggles [data-auth-when] display). */
.lx-topbar__account { display: flex; align-items: center; gap: 12px; }
.lx-topbar__account-email {
  font-size: 13px;
  color: var(--lx-text-dim);
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Slim announcement strip under the top bar — carries the same welcome-
   bonus + 18+ messaging the sidebar archetype puts in a persistent card,
   just reshaped for a horizontal-nav layout. */
.lx-announce {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
  padding: 8px 20px;
  background: linear-gradient(90deg, rgba(255, 47, 184, .16), rgba(0, 212, 255, .12));
  border-bottom: 1px solid rgba(0, 212, 255, .12);
  font-size: 12px;
  text-align: center;
}
.lx-announce__bonus {
  font-weight: 800;
  color: var(--lx-white);
}
.lx-announce__bonus strong {
  background: linear-gradient(90deg, var(--lx-gold) 0%, var(--lx-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14.5px;
  border: 2px solid transparent;
  white-space: nowrap;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active { transform: translateY(1px) scale(.98); }
.btn--gold {
  background: linear-gradient(135deg, #ffe27a 0%, var(--lx-gold) 45%, var(--lx-gold-deep) 100%);
  color: #2a0a00;
  box-shadow: 0 8px 24px rgba(255, 168, 0, 0.4), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn--gold:hover { box-shadow: 0 10px 30px rgba(255, 168, 0, 0.6), inset 0 1px 0 rgba(255,255,255,.6); }
.btn--ghost {
  border-color: rgba(255,255,255,.35);
  color: var(--lx-white);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover { border-color: var(--lx-gold); background: rgba(255,255,255,.12); }
.btn--sm { min-height: 38px; padding: 8px 16px; font-size: 13px; }
.btn--block { width: 100%; }
.btn--card {
  width: 100%;
  background: linear-gradient(135deg, var(--lx-violet), var(--lx-bg-pink));
  color: #fff;
  box-shadow: 0 6px 18px rgba(155, 31, 168, 0.45);
}
.btn--card:hover { filter: brightness(1.12); }

/* ---------- Hero ---------- */
.lx-hero {
  position: relative;
  z-index: 10;
  padding: 18px 0 56px;
}
.lx-hero__frame {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  min-height: 420px;
  display: flex;
  align-items: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.lx-hero__frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.lx-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(9,2,20,.92) 0%, rgba(9,2,20,.72) 32%, rgba(9,2,20,.18) 58%, rgba(9,2,20,0) 72%);
}
.lx-hero__content {
  position: relative;
  padding: 40px 34px;
  max-width: 620px;
}
.lx-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  background: rgba(255, 210, 63, 0.14);
  border: 1px solid rgba(255, 210, 63, 0.5);
  color: var(--lx-gold);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.lx-hero__badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #34e37a;
  box-shadow: 0 0 8px #34e37a;
}
.lx-hero h1 {
  font-family: 'Baloo 2', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 50px);
  line-height: 1.08;
  margin-bottom: 16px;
  text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.lx-hero h1 .grad {
  background: linear-gradient(90deg, var(--lx-gold) 0%, #ff8bd6 50%, var(--lx-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lx-hero p.lead {
  font-size: 16.5px;
  color: #e9dcfc;
  max-width: 480px;
  margin-bottom: 26px;
}
.lx-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.lx-hero__stats { display: flex; flex-wrap: wrap; gap: 22px; }
.lx-hero__stats .stat { display: flex; flex-direction: column; }
.lx-hero__stats strong {
  font-family: 'Baloo 2', sans-serif;
  font-size: 21px;
  color: var(--lx-white);
}
.lx-hero__stats span { font-size: 12px; color: var(--lx-text-dim); text-transform: uppercase; letter-spacing: .04em; }

/* ---------- Section head ---------- */
.lx-section-head {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
  position: relative;
  z-index: 5;
}
.lx-section-head .eyebrow {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lx-cyan);
  margin-bottom: 10px;
}
.lx-section-head h2 {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(26px, 4vw, 36px);
  margin-bottom: 12px;
}
.lx-section-head p { color: var(--lx-text-dim); font-size: 15.5px; }

/* ---------- Game grid ---------- */
.lx-games { position: relative; z-index: 5; padding-bottom: 70px; }
/* Deliberate 2-col game-card grid at the narrowest breakpoint (~160px/card
   at 375px viewport, verified legible/tappable in-browser), scaling to
   3-7 columns via the media queries below — matches the shipped Glimmo
   reference (.nj-grid). */
/* game-ui */
.lx-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.lx-card {
  position: relative;
  border-radius: var(--lx-radius-lg);
  padding: 3px;
  background: linear-gradient(145deg, var(--card-accent, var(--lx-gold)), transparent 60%);
  transition: transform .2s ease;
}
.lx-card:hover { transform: translateY(-6px); }
.lx-card__inner {
  background: linear-gradient(165deg, rgba(28, 10, 62, .92), rgba(12, 1, 24, .96));
  border: 1px solid var(--lx-card-border);
  border-radius: calc(var(--lx-radius-lg) - 3px);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.lx-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}
.lx-card__media-link { display: block; width: 100%; height: 100%; }
.lx-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.lx-card:hover .lx-card__media img { transform: scale(1.06); }
.lx-card__tag {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1a0a00;
  background: var(--card-accent, var(--lx-gold));
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
}
.lx-card__players {
  position: absolute;
  bottom: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(9, 2, 20, .65);
  backdrop-filter: blur(4px);
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
}
.lx-card__players .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34e37a;
  box-shadow: 0 0 6px #34e37a;
}
.lx-card__body {
  padding: 18px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.lx-card__title {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
}
.lx-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: var(--lx-text-dim);
}
.lx-card__stars { color: var(--lx-gold); letter-spacing: 1px; font-size: 13px; }

/* ---------- Flagship slot machine: "Console Deck" chrome ----------
   Distinct archetype from nova-jackpot/Glimmo's cabinet-with-badge layout:
   seamless borderless reel strip, a single unified stat bar (balance + bet
   + auto-toggle in one row, not two separate cards), a full-width pill
   spin button below the bar (not a circular button beside auto), and a
   win banner that slides down OVER the reel frame instead of a badge
   popping up below it. Functional class names required by main.js
   (.lx-slot__stage / .lx-slot__cabinet / .lx-slot__cell) are kept as
   secondary classes alongside the new .lx-deck__* vocabulary — see
   SOCIAL_V2_CONTRACT.md §C.9 and templates/slot-ui-variants/. */
.lx-slot { position: relative; z-index: 5; padding-bottom: 70px; }

.lx-slot__stage {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
  padding: 22px 14px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08);
}
.lx-slot__scrim {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 38%, rgba(10, 2, 20, .25), rgba(6, 1, 14, .82) 78%);
}
.lx-slot__cabinet {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
}
.lx-deck__topline {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.lx-deck__title {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: clamp(15px, 2.8vw, 21px);
  background: linear-gradient(90deg, var(--lx-gold) 0%, #fff3c4 50%, var(--lx-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: .02em;
}
.lx-deck__info-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 210, 63, .45);
  background: rgba(255, 210, 63, .1);
  color: var(--lx-gold);
  font-size: 15px;
  cursor: pointer;
}
.lx-deck__info-btn:hover { background: rgba(255, 210, 63, .18); }

/* game-ui */
.lx-deck__reel-frame {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255, 210, 63, .5), inset 0 0 0 6px rgba(6, 1, 14, .9), 0 20px 50px rgba(0, 0, 0, .5);
}
/* game-ui */
.lx-slot__reels {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  width: 100%;
  background: linear-gradient(160deg, rgba(20, 8, 4, .92), rgba(8, 2, 2, .96));
}
.lx-slot__cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #0c0407;
  /* Seamless strip: dividers are hairline borders, not grid gaps. */
  border-right: 1px solid rgba(255, 255, 255, .07);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.lx-slot__cell:nth-child(5n) { border-right: none; }
.lx-slot__cell:nth-child(n+11) { border-bottom: none; }
.lx-slot__cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lx-slot__cell.is-win {
  box-shadow: inset 0 0 0 3px var(--lx-gold), 0 0 20px 5px rgba(255, 210, 63, .75);
  animation: njWinPulse 1s ease-in-out infinite;
  z-index: 1;
}
@keyframes njWinPulse {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--lx-gold), 0 0 14px 3px rgba(255, 210, 63, .55); }
  50%      { box-shadow: inset 0 0 0 3px var(--lx-gold), 0 0 26px 8px rgba(255, 210, 63, .95); }
}
/* Diagonal light bar sweeping across each winning symbol tile. */
.lx-slot__cell.is-win::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .65) 48%, transparent 64%);
  background-size: 250% 250%;
  background-position: 130% 0%;
  animation: njShine 1.7s ease-in-out infinite;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes njShine {
  0%   { background-position: 130% 0%; }
  100% { background-position: -30% 0%; }
}
/* Spinning state: the JS rapidly cycles each cell's symbol image (see
   main.js) — that alone reads as "spinning". No transform/position
   animation here on purpose: an infinite translateY loop snaps back to
   its start position every cycle (visible jump), and since the image
   already exactly fills its cell (object-fit: cover, overflow hidden),
   shifting it exposes the cell's own background at the trailing edge —
   both read as glitches. A static blur/brightness filter avoids both. */
.lx-deck__reels.is-spinning .lx-slot__cell img {
  filter: blur(2.5px) brightness(1.3) saturate(1.15);
}
@media (prefers-reduced-motion: reduce) {
  .lx-slot__cell.is-win { animation: none; }
  .lx-slot__cell.is-win::after { animation: none; display: none; }
  .lx-deck__reels.is-spinning .lx-slot__cell img { filter: none; }
}

/* Win banner slides down and covers the top of the reel frame, instead of
   a badge popping up below the cabinet. */
.lx-deck__win {
  position: absolute;
  z-index: 4;
  top: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transform: translateY(-100%);
  background: linear-gradient(135deg, var(--lx-gold), var(--lx-gold-deep));
  color: #2a0a00;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 14px;
  text-align: center;
  padding: 10px 14px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.lx-deck__win.is-visible {
  animation: lxDeckWinDrop .6s cubic-bezier(.34, 1.56, .64, 1) forwards;
}
@keyframes lxDeckWinDrop {
  0%   { opacity: 0; transform: translateY(-100%); }
  60%  { opacity: 1; transform: translateY(4%); }
  100% { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .lx-deck__win.is-visible { animation: none; opacity: 1; transform: translateY(0); }
}

/* Brief golden flash across the whole cabinet the instant a win lands. */
.lx-slot__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: radial-gradient(circle at 50% 45%, rgba(255, 210, 63, .6), transparent 62%);
  opacity: 0;
  pointer-events: none;
}
.lx-slot__stage.is-flash::before {
  animation: njFlash .7s ease-out;
}
@keyframes njFlash {
  0%   { opacity: 0; }
  18%  { opacity: 1; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-slot__stage.is-flash::before { animation: none; }
}

/* Unified stat bar: balance + bet + auto-toggle share one row/card,
   separated by hairline dividers, instead of two separate stat cards
   plus a controls row. */
.lx-deck__bar {
  display: flex;
  align-items: center;
  width: 100%;
  background: rgba(0, 0, 0, .4);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  padding: 10px 6px;
  flex-wrap: wrap;
  row-gap: 10px;
}
.lx-deck__divider {
  width: 1px;
  align-self: stretch;
  min-height: 30px;
  background: rgba(255, 255, 255, .14);
  flex: none;
}
.lx-slot__stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 0;
  min-width: 84px;
  padding: 0 10px;
}
.lx-slot__stat span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--lx-text-dim);
}
.lx-slot__stat strong { font-family: 'Baloo 2', sans-serif; font-size: 17px; color: #fff; display: inline-block; }
.lx-slot__stat strong em { font-style: normal; font-size: 11px; color: var(--lx-gold); margin-left: 4px; }
.lx-slot__stat.is-pulsing strong { animation: njStatPulse .7s ease-out; }
@keyframes njStatPulse {
  0%   { transform: scale(1); text-shadow: none; }
  35%  { transform: scale(1.3); color: var(--lx-gold); text-shadow: 0 0 14px rgba(255, 210, 63, .85); }
  100% { transform: scale(1); color: #fff; text-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-slot__stat.is-pulsing strong { animation: none; }
}

.lx-deck__bet-control {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lx-deck__bet-control strong {
  font-family: 'Baloo 2', sans-serif;
  font-size: 15px;
  color: #fff;
  min-width: 30px;
  text-align: center;
}
.lx-deck__bet-btn {
  flex: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.lx-deck__bet-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.lx-deck__bet-btn:disabled { opacity: .3; cursor: default; }

/* Toggle-switch styled auto-spin control, in place of a pill "Auto" button. */
.lx-deck__auto {
  flex: 1 1 0;
  min-width: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  border: none;
  background: transparent;
  cursor: pointer;
}
.lx-deck__auto-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--lx-text-dim);
}
.lx-deck__auto-track {
  position: relative;
  width: 40px;
  height: 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  transition: background .15s ease, border-color .15s ease;
}
.lx-deck__auto-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}
.lx-deck__auto.is-active .lx-deck__auto-track {
  background: linear-gradient(135deg, var(--lx-gold), var(--lx-gold-deep));
  border-color: transparent;
}
.lx-deck__auto.is-active .lx-deck__auto-knob { transform: translateX(18px); }
.lx-deck__auto.is-active .lx-deck__auto-label { animation: njAutoSpin 1s linear infinite; display: inline-block; }
@keyframes njAutoSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lx-deck__auto.is-active .lx-deck__auto-label { animation: none; }
}

/* Full-width pill spin button below the bar, instead of a circular button
   sharing a row with Auto. */
.lx-deck__spin-btn {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 56px;
  border-radius: 16px;
  border: none;
  padding: 0 20px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--lx-gold), var(--lx-gold-deep));
  box-shadow: 0 10px 30px rgba(255, 168, 0, .4);
  transition: transform .15s ease;
}
.lx-deck__spin-btn:active { transform: scale(.98); }
.lx-deck__spin-btn:disabled { cursor: default; opacity: .75; }
.lx-deck__spin-btn img {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .25);
}
.lx-deck__spin-btn span {
  font-family: 'Baloo 2', sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #2a0a00;
  white-space: nowrap;
}
.lx-deck__spin-btn.is-spinning img { animation: njSpinRing 1s linear infinite; }
@keyframes njSpinRing { to { transform: rotate(360deg); } }

/* Flying coin particles — spawned by JS, one .lx-coin per particle. */
.lx-coin {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6d5, var(--lx-gold) 55%, var(--lx-gold-deep) 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, .35) inset, 0 2px 6px rgba(0, 0, 0, .4);
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  animation: njCoinFly var(--lx-coin-dur, 1100ms) cubic-bezier(.16, .8, .3, 1) forwards;
  animation-delay: var(--lx-coin-delay, 0ms);
}
@keyframes njCoinFly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(.4) rotate(0deg);
  }
  20% {
    opacity: 1;
    transform: translate(calc(-50% + var(--lx-coin-tx, 0px) * 0.3), calc(-50% + var(--lx-coin-ty, 0px) * 0.3))
               scale(1) rotate(var(--lx-coin-rot, 220deg));
  }
  100% {
    opacity: 0;
    transform: translate(calc(-50% + var(--lx-coin-tx, 0px)), calc(-50% + var(--lx-coin-ty, 0px) + 46px))
               scale(.65) rotate(calc(var(--lx-coin-rot, 220deg) * 2));
  }
}

.lx-slot__note {
  text-align: center;
  color: var(--lx-text-dim);
  font-size: 12px;
  margin-top: 14px;
}

.lx-slot__note--legal {
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 6px;
  line-height: 1.5;
}

.lx-slot__note--legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lx-slot__note--legal a:hover,
.lx-slot__note--legal a:focus-visible {
  color: var(--lx-white);
}

/* ---------- Paytable dialog ---------- */
/* Mobile-first: a bottom sheet anchored to the viewport's bottom edge —
   thumb-reachable, the standard mobile pattern for secondary info panels.
   From 620px it turns into an ordinary centered modal (see media query). */
.lx-paytable {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.lx-paytable[hidden] { display: none; }
.lx-paytable__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 1, 10, .74);
  backdrop-filter: blur(2px);
}
.lx-paytable__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: 84vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #1c0a2e 0%, #0c0316 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  border-bottom: none;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  padding: 8px 20px 26px;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .6);
  animation: njSheetUp .28s ease-out;
}
@keyframes njSheetUp {
  from { transform: translateY(28px); opacity: .3; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-paytable__sheet { animation: none; }
}
.lx-paytable__handle {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .25);
  margin: 10px auto 12px;
}
.lx-paytable__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.lx-paytable__header h3 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 16px;
  color: #fff;
  margin: 0;
}
.lx-paytable__close {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.lx-paytable__rule {
  font-size: 12.5px;
  color: var(--lx-text-dim);
  line-height: 1.55;
  margin: 0 0 16px;
}
.lx-paytable__rule strong { color: var(--lx-gold); }

/* game-ui */
.lx-paytable__cols {
  display: grid;
  grid-template-columns: 44px 1fr 40px 40px 40px;
  gap: 8px;
  padding: 0 4px 6px;
}
.lx-paytable__cols span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--lx-text-dim);
  text-align: center;
}
/* game-ui */
.lx-paytable__row {
  display: grid;
  grid-template-columns: 44px 1fr 40px 40px 40px;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.lx-paytable__row img {
  width: 40px;
  height: 40px;
  border-radius: 9px;
  object-fit: cover;
}
.lx-paytable__row .name {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
}
.lx-paytable__row .name em { font-style: normal; color: var(--lx-gold); font-size: 11px; }
.lx-paytable__row .val {
  text-align: center;
  font-weight: 800;
  font-size: 12.5px;
  color: var(--lx-gold);
}

.lx-paytable__lines-title {
  font-family: 'Baloo 2', sans-serif;
  font-size: 14px;
  color: #fff;
  margin: 18px 0 10px;
}
.lx-paytable__lines {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lx-paytable__line {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* game-ui */
.lx-paytable__line-grid {
  flex: none;
  display: grid;
  grid-template-columns: repeat(5, 6px);
  grid-template-rows: repeat(3, 6px);
  gap: 3px;
}
.lx-paytable__line-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .16);
}
.lx-paytable__line-dot.is-on {
  background: var(--lx-gold);
  box-shadow: 0 0 5px rgba(255, 210, 63, .8);
}
.lx-paytable__line-name {
  font-size: 12.5px;
  color: var(--lx-text-dim);
}
.lx-paytable__line-name strong { color: #fff; }

@media (min-width: 620px) {
  .lx-paytable { align-items: center; }
  .lx-paytable__sheet {
    border-radius: 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    max-height: 78vh;
  }
  .lx-paytable__handle { display: none; }
}


/* ---------- Sign-in modal (centered tile-grid variant — see
   _core/social-v2/templates/auth-modal-variants/centered-tile-grid) ----------
   Always a centered card at every width, no bottom-sheet slide-up, 2x2
   icon-tile provider grid instead of a stacked list. The IDs/data-attributes
   the JS binds to (#auth-modal, [data-auth-provider], ...) are shared with
   the bottom-sheet variant's contract — only the markup/class vocabulary
   below is specific to this site. */
.lx-signin { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lx-signin[hidden] { display: none; }
.lx-signin__backdrop { position: absolute; inset: 0; background: rgba(2, 2, 8, .78); backdrop-filter: blur(4px); }
.lx-signin__card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 24px;
  background: linear-gradient(165deg, #14061f 0%, #05020c 100%);
  border: 1px solid rgba(0, 212, 255, .18);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
  padding: 34px 26px 26px;
  animation: lxSigninPop .25s ease-out;
}
@keyframes lxSigninPop {
  from { transform: scale(.94); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-signin__card { animation: none; }
}
.lx-signin__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.lx-signin__icon { font-size: 34px; text-align: center; margin-bottom: 8px; }
.lx-signin__title { font-family: 'Baloo 2', sans-serif; font-size: 20px; color: #fff; text-align: center; margin: 0 0 8px; }
.lx-signin__lead { font-size: 13px; color: var(--lx-text-dim); text-align: center; line-height: 1.5; margin: 0 0 22px; }
.lx-signin__lead strong { color: var(--lx-gold); }

.lx-signin__tiles { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
.lx-signin__tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .14);
  background: rgba(255, 255, 255, .04);
  color: #fff;
  font-weight: 700;
  font-size: 12.5px;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.lx-signin__tile:hover { background: rgba(255, 255, 255, .08); border-color: rgba(0, 212, 255, .35); }
.lx-signin__tile:active { transform: scale(.96); }
.lx-signin__tile-icon { width: 36px; height: 36px; border-radius: 10px; background: #fff; display: flex; align-items: center; justify-content: center; }
.lx-signin__tile-icon svg { width: 20px; height: 20px; }
.lx-signin__tile[hidden] { display: none; }

.lx-signin__divider { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; color: var(--lx-text-dim); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.lx-signin__divider::before, .lx-signin__divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .14); }

.lx-signin__google { margin-bottom: 12px; }
.lx-signin__google-slot { display: flex; justify-content: center; min-height: 44px; }
.lx-signin__google-slot iframe { border-radius: var(--lx-radius-md) !important; }
.lx-signin__tile--google { width: 100%; flex-direction: row; justify-content: center; padding: 14px 10px; }

.lx-signin__fine { font-size: 11px; color: var(--lx-text-dim); line-height: 1.5; text-align: center; margin: 0; }

/* Real-account error slot — auth-client.js fills this on a failed
   login/register attempt (bad credentials, email taken, rate limit, ...). */
.lx-signin__error {
  font-size: 12px;
  color: #ff6b8b;
  background: rgba(255, 107, 139, .1);
  border: 1px solid rgba(255, 107, 139, .3);
  border-radius: 10px;
  padding: 9px 12px;
  margin: 0 0 14px;
  text-align: center;
}

/* Provider-unavailable notice: a shake on the clicked tile + a transient,
   auto-dismissing toast anchored near the bottom of the viewport — NOT a
   persistent inline banner (that's Glimmo's mechanism). Nothing stays on
   screen once the toast's timer clears it. */
@keyframes lxTileShake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px); }
  40% { transform: translateX(4px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(3px); }
}
.lx-signin__tile--shake { animation: lxTileShake .4s ease; border-color: rgba(255, 107, 139, .5) !important; }

.lx-signin__toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  z-index: 310;
  max-width: 88vw;
  background: var(--lx-ink);
  border: 1px solid var(--lx-cyan);
  color: var(--lx-white);
  font-size: 12.5px;
  line-height: 1.4;
  border-radius: 12px;
  padding: 12px 18px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}
.lx-signin__toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.lx-signin__toast[hidden] { display: none; }

.lx-signin__form { display: flex; flex-direction: column; }
.lx-signin__field { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 700; color: var(--lx-text-dim); margin-bottom: 14px; }
.lx-signin__field input {
  min-height: 48px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  padding: 0 16px;
  font-size: 16px;
  font-weight: 500;
  font-family: inherit;
}
.lx-signin__field input::placeholder { color: rgba(255, 255, 255, .35); }
.lx-signin__field input:focus { outline: 2px solid var(--lx-cyan); outline-offset: 1px; }
.lx-signin__submit { width: 100%; margin-top: 4px; margin-bottom: 18px; }

/* ---------- Footer ---------- */
.lx-footer {
  position: relative;
  z-index: 5;
  margin-top: 20px;
  background: linear-gradient(180deg, rgba(6, 1, 16, 0) 0%, rgba(6, 1, 16, .55) 35%, #06010f 100%);
  border-top: 1px solid rgba(255, 255, 255, .08);
}
/* Stacked-centered footer archetype (SOCIAL_V2_CONTRACT.md §C.7): brand
   block centered on top, responsible-gaming block directly under it, nav
   columns centered below that — the opposite ordering from the
   brand-aside-columns archetype (Glimmo), which puts brand/nav side by
   side and responsible-gaming last. */
.lx-footer__brand--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 44px 0 8px;
}
.lx-footer__brand--centered .lx-footer__disclaimer { margin: 0 auto; text-align: center; }

.lx-footer__nav-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 56px;
  padding: 32px 0 8px;
  text-align: center;
}
.lx-footer__nav-row .lx-footer__col ul { align-items: center; }

.lx-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.lx-footer__brand-name {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: .02em;
  background: linear-gradient(90deg, var(--lx-gold) 0%, #fff3c4 50%, var(--lx-gold) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lx-footer__disclaimer {
  font-size: 13px;
  line-height: 1.6;
  color: var(--lx-text-dim);
  max-width: 420px;
  margin: 0 0 18px;
}
.lx-footer__col h5 {
  font-family: 'Baloo 2', sans-serif;
  font-size: 13.5px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 0 0 14px;
}
.lx-footer__col ul { display: flex; flex-direction: column; gap: 10px; }
.lx-footer__col a { font-size: 13.5px; color: var(--lx-text-dim); }
.lx-footer__col a:hover { color: #fff; }

.lx-footer__responsible {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
}
.lx-footer__responsible-text {
  flex: 1 1 380px;
  min-width: 260px;
}
.lx-footer__responsible p {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--lx-text-dim);
  margin: 0;
  max-width: 780px;
}

.lx-footer__orgs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  flex: 0 1 auto;
}
.lx-footer__org {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 10px 18px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  transition: transform .15s ease, background .15s ease;
}
.lx-footer__org:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .12); }
.lx-footer__org img { max-height: 28px; width: auto; display: block; }
/* No licensed logo file for this org — an honest text badge instead of a
   hand-drawn stand-in for their real trademark. Same chip treatment as the
   logo ones so it still reads as part of the same row. */
.lx-footer__org--text {
  font-size: 12px;
  font-weight: 700;
  color: var(--lx-white);
  white-space: nowrap;
}

.lx-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 12px;
  color: var(--lx-text-dim);
}

/* ---------- Utility ---------- */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* =============================================================
   RESPONSIVE — mobile-first, min-width only
   ============================================================= */
@media (min-width: 520px) {
  .lx-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; }
}

@media (min-width: 700px) {
  .lx-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 760px) {
  .lx-hero__frame { min-height: 480px; }
}

/* The hamburger disappears and the nav links become an inline horizontal
   row in the top bar — the archetype stays a top bar at every width,
   unlike the sidebar archetype which switches layout family entirely. */
@media (min-width: 900px) {
  .nav-toggle { display: none; }
  .lx-side__links {
    display: flex;
    position: static;
    inset: auto;
    margin-top: 0;
    margin-left: auto;
    margin-right: 24px;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    width: auto;
  }
  .lx-side__links a {
    padding: 10px 14px;
    border-radius: 10px;
    width: auto;
    min-height: 40px;
  }
  .lx-side__links a:hover { background: rgba(255, 255, 255, .07); }

  /* Denser grid from here on — cards shrink to fit more per row. */
  .lx-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; }
  .lx-card { border-radius: 16px; }
  .lx-card__inner { border-radius: 13px; }
  .lx-card__tag {
    top: 8px; left: 8px;
    padding: 4px 9px;
    font-size: 9.5px;
  }
  .lx-card__players {
    bottom: 8px; right: 8px;
    padding: 4px 8px;
    gap: 4px;
    font-size: 9.5px;
  }
  .lx-card__players .dot { width: 5px; height: 5px; }
  .lx-card__body { padding: 12px 12px 14px; gap: 6px; }
  .lx-card__title { font-size: 14px; line-height: 1.15; }
  .lx-card__meta { font-size: 10px; }
  .lx-card__stars { font-size: 10.5px; }
  .lx-card__body .btn {
    min-height: 32px;
    padding: 6px 10px;
    font-size: 11.5px;
  }
}

@media (min-width: 1180px) {
  .lx-grid { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1440px) {
  .lx-grid { grid-template-columns: repeat(7, 1fr); }
}

@media (min-width: 980px) {
  .lx-hero__content { padding: 56px 50px; }
}

@media (min-width: 1180px) {
  .lx-hero__frame { min-height: 520px; }
}

@media (min-width: 620px) {
  .lx-slot__stage { padding: 30px 26px 32px; }
  .lx-deck__reel-frame { border-radius: 20px; }
  .lx-deck__spin-btn { height: 62px; }
  .lx-slot__stat { padding: 0 16px; min-width: 104px; }
}

@media (min-width: 640px) {
  .lx-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 900px) {
  .lx-footer__brand--centered { padding-top: 56px; }
}

/* ==========================================================================
   Internal pages (games / promotions / vip-club / rewards / legal / support)
   ========================================================================== */

.lx-side__links a[aria-current="page"] { color: var(--lx-white); }
@media (min-width: 900px) {
  .lx-side__links a[aria-current="page"] { background: rgba(255, 255, 255, .09); }
}
.lx-footer__col a[aria-current="page"] { color: var(--lx-white); }

/* Compact header for pages with no big photo hero — reuses .lx-section-head
   for the eyebrow/title/lead, just gives it room to breathe up top. */
.lx-page-intro { position: relative; z-index: 5; padding: 40px 0 6px; }

/* ---------- Prose (legal-style long-form content) ---------- */
.lx-prose { max-width: 760px; margin: 0 auto; padding: 8px 0 70px; color: var(--lx-text-dim); font-size: 15px; line-height: 1.7; }
.lx-prose__updated { font-size: 12.5px; opacity: .7; margin-bottom: 30px; }
.lx-prose h2 { font-family: 'Baloo 2', sans-serif; color: #fff; font-size: 21px; margin: 34px 0 12px; }
.lx-prose h2:first-child { margin-top: 0; }
.lx-prose p { margin: 0 0 14px; }
.lx-prose ul { margin: 0 0 14px; padding-left: 20px; list-style: disc; }
.lx-prose li { margin-bottom: 6px; }
.lx-prose strong { color: #fff; }
.lx-prose a { color: var(--lx-gold); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Promo / VIP / Help topic cards (shared shape) ---------- */
.lx-promo-grid { display: grid; grid-template-columns: 1fr; gap: 18px; padding-bottom: 70px; }
.lx-promo-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-radius: var(--lx-radius-lg);
  padding: 26px 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  border: 1px solid var(--lx-card-border);
}
.lx-promo-card__icon { font-size: 30px; line-height: 1; }
.lx-promo-card__tag {
  align-self: flex-start;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lx-ink);
  background: var(--lx-gold);
  padding: 4px 10px;
  border-radius: 999px;
}
.lx-promo-card h3 { font-family: 'Baloo 2', sans-serif; font-size: 18px; color: #fff; }
.lx-promo-card p { font-size: 13.5px; color: var(--lx-text-dim); line-height: 1.55; flex: 1; margin: 0; }
.lx-promo-card .btn { align-self: flex-start; margin-top: 4px; }
.lx-promo-card__link { align-self: flex-start; margin-top: 4px; color: var(--lx-gold); font-weight: 700; font-size: 13px; }
.lx-promo-card__link:hover { text-decoration: underline; }

/* ---------- VIP tier ladder ---------- */
.lx-vip-tiers { display: grid; grid-template-columns: 1fr; gap: 16px; padding-bottom: 70px; }
.lx-vip-tier { border-radius: var(--lx-radius-lg); padding: 24px 20px; border: 1px solid var(--lx-card-border); background: var(--lx-card-bg); text-align: center; }
.lx-vip-tier--active { border-color: var(--lx-gold); box-shadow: 0 0 0 1px var(--lx-gold), 0 10px 30px rgba(255, 168, 0, .25); }
.lx-vip-tier__icon { font-size: 34px; margin-bottom: 8px; }
.lx-vip-tier h3 { font-family: 'Baloo 2', sans-serif; color: #fff; font-size: 17px; margin-bottom: 4px; }
.lx-vip-tier__req { font-size: 12px; color: var(--lx-gold); font-weight: 700; margin-bottom: 14px; }
.lx-vip-tier ul { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.lx-vip-tier li { font-size: 12.5px; color: var(--lx-text-dim); display: flex; gap: 8px; align-items: flex-start; }
.lx-vip-tier li::before { content: "✓"; color: var(--lx-gold); font-weight: 800; flex: none; }

@media (min-width: 700px) {
  .lx-promo-grid { grid-template-columns: repeat(2, 1fr); }
  .lx-vip-tiers { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1180px) {
  .lx-promo-grid { grid-template-columns: repeat(3, 1fr); }
  .lx-vip-tiers { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- FAQ accordion (native <details>/<summary>) ---------- */
.lx-faq { max-width: 760px; margin: 0 auto; padding: 8px 0 70px; display: flex; flex-direction: column; gap: 10px; }
.lx-faq details { border: 1px solid var(--lx-card-border); border-radius: 14px; background: var(--lx-card-bg); padding: 2px 18px; }
.lx-faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  min-height: 44px;
  font-weight: 700;
  color: #fff;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.lx-faq summary::-webkit-details-marker { display: none; }
.lx-faq summary::after { content: "+"; font-size: 20px; font-weight: 400; color: var(--lx-gold); flex: none; transition: transform .2s ease; }
.lx-faq details[open] summary::after { transform: rotate(45deg); }
.lx-faq p { font-size: 13.5px; color: var(--lx-text-dim); line-height: 1.6; padding: 0 0 18px; margin: 0; }

/* ---------- Contact page ---------- */
.lx-contact { padding: 8px 0 70px; }
.lx-contact__grid { display: grid; grid-template-columns: 1fr; gap: 30px; }
.lx-contact-form { display: flex; flex-direction: column; }
.lx-contact-form .lx-signin__field { margin-bottom: 16px; }
.lx-contact-form textarea {
  min-height: 130px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  padding: 12px 14px;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
}
.lx-contact-form textarea::placeholder { color: rgba(255, 255, 255, .35); }
.lx-contact-form textarea:focus { outline: 2px solid var(--lx-gold); outline-offset: 1px; }
.lx-contact-info { border-radius: var(--lx-radius-lg); border: 1px solid var(--lx-card-border); background: var(--lx-card-bg); padding: 24px; display: flex; flex-direction: column; gap: 18px; height: fit-content; }
.lx-contact-info h3 { font-family: 'Baloo 2', sans-serif; color: #fff; font-size: 16px; margin: 0; }
.lx-contact-info p { font-size: 13.5px; color: var(--lx-text-dim); line-height: 1.6; margin: 0; }
.lx-contact-info a { color: var(--lx-gold); font-weight: 700; }
@media (min-width: 900px) {
  .lx-contact__grid { grid-template-columns: 1.3fr 1fr; }
}

.lx-page-footnote { max-width: 640px; margin: 10px auto 0; text-align: center; font-size: 12px; color: var(--lx-text-dim); opacity: .8; line-height: 1.5; }
.lx-page-footnote--nowrap { max-width: 100%; white-space: nowrap; overflow-x: auto; padding-bottom: 2px; }
.lx-page-cta { text-align: center; margin-top: 8px; }

/* ---------- Responsible Gaming: reuses .lx-footer__orgs for the org row ---------- */
.lx-rg-orgs { padding: 10px 0 70px; }
.lx-rg-orgs .lx-footer__orgs { justify-content: flex-start; }

/* ==========================================================================
   Cookie consent banner — drives Google Consent Mode v2 (see the inline
   gtag('consent','default',...) snippet in <head>). Shown until the visitor
   makes a choice; reopenable any time via the footer "Cookie Preferences"
   link. Sits above every other overlay (z-index 500 vs 300 for modals).
   ========================================================================== */
.lx-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 500; display: flex; flex-direction: column; padding: 0 16px 16px; }
.lx-cookie[hidden] { display: none; }

.lx-cookie__bar {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  border-radius: var(--lx-radius-lg);
  background: linear-gradient(180deg, #1c0a2e 0%, #0c0316 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .5);
}
.lx-cookie__text { font-size: 13px; color: var(--lx-text-dim); line-height: 1.55; margin: 0; }
.lx-cookie__text a { color: var(--lx-gold); text-decoration: underline; text-underline-offset: 2px; }
.lx-cookie__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.lx-cookie__actions .btn { flex: 1 1 auto; }

.lx-cookie__panel {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto 12px;
  padding: 20px;
  border-radius: var(--lx-radius-lg);
  background: linear-gradient(180deg, #1c0a2e 0%, #0c0316 100%);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: 0 -10px 40px rgba(0, 0, 0, .5);
}
.lx-cookie__panel[hidden] { display: none; }
.lx-cookie__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.lx-cookie__panel-head h3 { font-family: 'Baloo 2', sans-serif; font-size: 16px; color: #fff; margin: 0; }
.lx-cookie__panel-intro { font-size: 12.5px; color: var(--lx-text-dim); line-height: 1.55; margin: 0 0 14px; }

.lx-cookie__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.lx-cookie__row:first-of-type { border-top: none; padding-top: 0; }
.lx-cookie__row-copy { display: flex; flex-direction: column; gap: 4px; }
.lx-cookie__row-copy strong { font-size: 13.5px; color: #fff; }
.lx-cookie__row-copy span { font-size: 12px; color: var(--lx-text-dim); line-height: 1.5; }

.lx-cookie__locked-badge {
  flex: none;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--lx-ink);
  background: var(--lx-gold);
  padding: 6px 12px;
  border-radius: 999px;
}

.lx-cookie__toggle { flex: none; width: 44px; height: 26px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .08); position: relative; cursor: pointer; padding: 0; }
.lx-cookie__toggle-dot { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .15s ease; }
.lx-cookie__toggle.is-on { background: linear-gradient(135deg, var(--lx-gold), var(--lx-gold-deep)); border-color: transparent; }
.lx-cookie__toggle.is-on .lx-cookie__toggle-dot { transform: translateX(18px); }

.lx-cookie__panel-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lx-cookie__panel-actions .btn { flex: 1 1 auto; }

@media (min-width: 700px) {
  .lx-cookie__bar { flex-direction: row; align-items: center; justify-content: space-between; }
  .lx-cookie__text { flex: 1 1 420px; }
  .lx-cookie__actions { flex: none; }
  .lx-cookie__actions .btn { flex: none; }
  .lx-cookie__panel-actions { justify-content: flex-end; }
  .lx-cookie__panel-actions .btn { flex: none; min-width: 160px; }
}

/* ==========================================================================
   Homepage block library (page_architectures.json) — the composition here
   is: stats-strip -> hero-split-copy-visual -> game-grid-carousel ->
   how-it-works-steps -> slot-showcase -> promo-band. Deliberately NOT the
   Glimmo reference's hero-fullbleed-photo -> game-grid-full -> slot-showcase.
   ========================================================================== */

/* ---------- stats-strip ---------- */
.lx-stats-strip {
  position: relative;
  z-index: 5;
  padding: 18px 0;
  border-bottom: 1px solid rgba(0, 212, 255, .1);
}
.lx-stats-strip__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px 40px;
}
.lx-stats-strip .stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.lx-stats-strip .stat strong {
  font-family: 'Baloo 2', sans-serif;
  font-size: 24px;
  background: linear-gradient(90deg, var(--lx-gold) 0%, var(--lx-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lx-stats-strip .stat span { font-size: 11.5px; color: var(--lx-text-dim); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- hero-split-copy-visual ---------- */
.lx-hero-split {
  position: relative;
  z-index: 10;
  padding: 48px 0;
}
.lx-hero-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: center;
}
.lx-hero-split__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}
.lx-hero-split__badges .lx-hero__badge { margin-bottom: 0; }
.lx-hero__badge--age {
  color: var(--lx-cyan);
  background: rgba(0, 212, 255, .12);
  border-color: rgba(0, 212, 255, .5);
}
.lx-hero-split__copy h1 {
  font-family: 'Baloo 2', 'Inter', sans-serif;
  font-weight: 800;
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.08;
  margin-bottom: 16px;
}
.lx-hero-split__copy h1 .grad {
  background: linear-gradient(90deg, var(--lx-gold) 0%, var(--lx-cyan) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.lx-hero-split__copy p.lead { font-size: 16px; color: var(--lx-text-dim); max-width: 480px; margin-bottom: 26px; }
.lx-hero-split__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.lx-hero-split__visual {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  min-height: 260px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5), 0 0 0 1px rgba(0, 212, 255, .12);
}
.lx-hero-split__visual img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) {
  .lx-hero-split__grid { grid-template-columns: 1.05fr .95fr; gap: 48px; }
  .lx-hero-split__visual { min-height: 420px; }
}

/* ---------- game-grid-carousel ---------- */
.lx-carousel {
  position: relative;
  z-index: 5;
  padding-bottom: 60px;
}
.lx-carousel__track {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}
.lx-carousel__track .lx-card {
  flex: 0 0 200px;
  scroll-snap-align: start;
}
@media (min-width: 700px) {
  .lx-carousel__track .lx-card { flex-basis: 230px; }
}

/* ---------- how-it-works-steps ---------- */
.lx-steps {
  position: relative;
  z-index: 5;
  padding: 20px 0 60px;
}
.lx-steps__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
}
@media (min-width: 700px) {
  .lx-steps__grid { grid-template-columns: repeat(4, 1fr); }
}
.lx-step {
  padding: 22px 18px;
  border-radius: var(--lx-radius-lg);
  background: var(--lx-card-bg);
  border: 1px solid var(--lx-card-border);
  text-align: center;
}
.lx-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lx-gold), var(--lx-gold-deep));
  color: #0a0518;
  font-weight: 800;
  font-family: 'Baloo 2', sans-serif;
  margin-bottom: 12px;
}
.lx-step h3 { font-family: 'Baloo 2', sans-serif; font-size: 15.5px; color: #fff; margin-bottom: 6px; }
.lx-step p { font-size: 13px; color: var(--lx-text-dim); line-height: 1.5; margin: 0; }

/* ---------- promo-band ---------- */
.lx-promo-band {
  position: relative;
  z-index: 5;
  padding: 0 0 70px;
}
.lx-promo-band__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 28px 26px;
  border-radius: var(--lx-radius-lg);
  background: linear-gradient(120deg, rgba(255, 47, 184, .18), rgba(0, 212, 255, .12));
  border: 1px solid rgba(0, 212, 255, .2);
}
.lx-promo-band__copy h3 { font-family: 'Baloo 2', sans-serif; font-size: 19px; color: #fff; margin-bottom: 6px; }
.lx-promo-band__copy p { font-size: 13.5px; color: var(--lx-text-dim); margin: 0; max-width: 460px; }

/* ---------- Leaderboard ranked list ---------- */
.lx-leaderboard { display: flex; flex-direction: column; gap: 8px; padding-bottom: 50px; }
.lx-leaderboard__row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--lx-radius-md);
  background: var(--lx-card-bg);
  border: 1px solid var(--lx-card-border);
}
.lx-leaderboard__row--top { border-color: rgba(255, 210, 63, .4); background: linear-gradient(90deg, rgba(255, 47, 184, .1), rgba(0, 212, 255, .08)); }
.lx-leaderboard__rank {
  flex: none;
  width: 32px;
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
  font-size: 16px;
  color: var(--lx-gold);
  text-align: center;
}
.lx-leaderboard__name { flex: 1; font-weight: 700; color: #fff; font-size: 14px; }
.lx-leaderboard__coins { font-size: 13px; color: var(--lx-text-dim); font-weight: 700; }
.lx-leaderboard__coins strong { color: var(--lx-cyan); }

/* Блок залогіненого в топбарі. На відміну від вертикального сайдбара в інших
   шаблонах родини, тут потрібен компактний горизонтальний рядок. */
.lx-topbar__account {
  display: flex;
  align-items: center;
  gap: 10px;
}
.lx-topbar__account-email {
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;   /* у топбарі немає куди переносити довгу адресу */
}
@media (max-width: 640px) {
  .lx-topbar__account-email { max-width: 110px; }
}
/* [data-auth-when] elements use display:flex classes above; [hidden] alone
   loses the cascade tie-break against those, so force it explicitly. */
[data-auth-when][hidden] { display: none !important; }

/* Помилка авторизації. Через hidden лишається невидимою, поки клієнт її не заповнить. */
.lx-signin__error {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(220, 38, 38, .14);
  border: 1px solid rgba(248, 113, 113, .45);
  color: #fecaca;
  font-size: 13px;
  line-height: 1.45;
}
.lx-signin__error[hidden] { display: none; }

/* Google sign-in status line (reuses the old provider-notice slot styling). */
.lx-signin__notice {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 47, 184, .12);
  border: 1px solid rgba(255, 47, 184, .40);
  color: #ffd6f1;
  font-size: 13px;
  line-height: 1.45;
}
.lx-signin__notice[hidden] { display: none; }

/* Системне синє кільце фокуса перекриває підсвітку, і задумана підказка стає
   невидимою — у glimmo це вилізло лише на скріншоті. Одразу фарбуємо фокус
   у колір теми. */
.lx-signin__tile:focus-visible {
  outline: 2px solid var(--lx-gold);
  outline-offset: 2px;
}

/* ==========================================================================
   Міні-діалог про недоступний сторонній вхід.

   Свідомо НЕ банер усередині списку провайдерів: там повідомлення довелося б
   ділити простір із плитками й дублювати підказку підсвіткою кнопки. Окреме
   вікно дає власний фокус, власну дію і не чіпає розкладку модалки під ним.

   z-index 400 — вище модалки авторизації (300), але нижче cookie-банера (500),
   який за задумом теми лишається доступним поверх усього.
   ========================================================================== */
.lx-provider-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lx-provider-modal[hidden] { display: none; }
.lx-provider-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 2, 8, .72);
  backdrop-filter: blur(3px);
}
.lx-provider-modal__box {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 340px;
  padding: 22px 20px 18px;
  text-align: center;
  border-radius: 18px;
  background: linear-gradient(165deg, #1a0b22, #0d0510);
  border: 1px solid rgba(255, 47, 184, .38);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 40px rgba(255, 47, 184, .12);
  animation: lxProviderPop .18s ease-out;
}
@keyframes lxProviderPop {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-provider-modal__box { animation: none; }
}
.lx-provider-modal__icon {
  display: block;
  font-size: 30px;
  line-height: 1;
  margin-bottom: 10px;
}
.lx-provider-modal__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 800;
  color: #fff;
}
.lx-provider-modal__text {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .72);
}
.lx-provider-modal__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.lx-provider-modal__actions .btn { flex: 1 1 auto; min-width: 120px; }