/* ==========================================================================
   STACK — Design System
   Aligned to Stake.com color palette & projectrules.md
   --------------------------------------------------------------------------
   Canvas:          #0F212E  (main viewport background)
   Surface-1:       #1A2C38  (sidebar, structural containers)
   Surface-2:       #213743  (inputs, cards, modals)
   Border/Inactive: #2F4553  (dividers, inactive UI)
   CTA Green:       #00E701  (bet buttons, active states, wins)
   Alert Red:       #E9113C  (crash, losses, mines bomb)
   Accent Blue:     #1475E1  (wallet, info links)
   Text Primary:    #FFFFFF
   Text Muted:      #B1BAD3
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

html, body { max-width: 100%; overflow-x: hidden; }
.route-canvas, .screen, .dt-container { max-width: 100%; box-sizing: border-box; }

:root {
  /* Native scrollbars, form controls and the UA canvas follow the page theme
     instead of flashing white in Windows/Android dark mode. */
  color-scheme: dark;

  /* ── Core palette (Stake-accurate) ── */
  --bg:        #0F212E;
  --surface:   #1A2C38;
  --surface-2: #213743;
  --border:    #2F4553;

  /* ── Brand colors ── */
  --cta:        #00E701;
  --cta-hover:  #1FFF20;
  --alert:      #E9113C;
  --blue:       #1475E1;
  --gold:       #FFC700;
  --cyan:       #00A3FF;

  /* ── Text ── */
  --ink:        #FFFFFF;
  --ink-dim:    #B1BAD3;
  --ink-muted:  #8492A6;
  --ink-cta:    #000000;

  /* ── Structural ── */
  --line:         rgba(255, 255, 255, .05);
  --line-strong:  rgba(255, 255, 255, .10);
  --border-glow:  rgba(0, 231, 1,  .18);
  --border-cyan:  rgba(0, 163, 255, .20);
  --veil:   rgba(255, 255, 255, .03);
  --veil-2: rgba(255, 255, 255, .06);
  --scrim:  rgba(0, 0, 0, .65);
  --shadow: 0 4px 6px rgba(0, 0, 0, .30);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .45);

  /* ── Radii ── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-pill: 999px;

  --pad: 20px;
  --tap: 48px;

  --ease: cubic-bezier(.22, .9, .24, 1);
  --safe-t: env(safe-area-inset-top,    0px);
  --safe-b: env(safe-area-inset-bottom, 0px);

  /* Chrome heights, as tokens. Every offset that used to hardcode 56/60/64
     resolves through --topbar-total / --nav-total instead, so a safe-area
     inset (notch / home indicator) is accounted for in exactly one place and
     the topbar, drawer and bottom-nav can never drift apart again. */
  --topbar-h: 56px;   /* mobile */
  --nav-h:    64px;   /* bottom nav */
  --topbar-total: calc(var(--safe-t) + var(--topbar-h));
  --nav-total:    calc(var(--safe-b) + var(--nav-h));

  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Nebula parallax — set by JS on mousemove/deviceorientation */
  --nebula-x: 0px;
  --nebula-y: 0px;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
  font-variant-numeric: tabular-nums;
  overflow-x: hidden; /* Prevent horizontal layout shift */
}

/* ── Very subtle depth gradient (not a nebula — Stake is near-flat dark) ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 50% at 15% 10%, rgba(0, 163, 255, .04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 60% at 85% 80%, rgba(0, 231, 1,  .03) 0%, transparent 70%);
  transform: translate(var(--nebula-x), var(--nebula-y));
  transition: transform .15s linear;
}



/* All content sits above the nebula */
.splash, .auth, .shell, .modal, .toast { position: relative; z-index: 1; }

[hidden] { display: none !important; }
body.drawer-open { overflow: hidden; }

button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
img { display: block; max-width: 100%; height: auto; }

/* ── Touch: kill the 300ms double-tap-zoom delay and the grey flash ── */
a, button, [role="button"], input, label, summary {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0, 231, 1, .14);
}
a, button, [role="button"] { -webkit-tap-highlight-color: rgba(0, 231, 1, .18); }

/* Scroll chaining: a drawer, sheet or panel that hits its edge must not
   hand the gesture to the page behind it. */
.modal__sheet, .sidebar, .route-table-wrap, #routeModal .modal__sheet {
  overscroll-behavior: contain;
}

:focus-visible { outline: 2px solid var(--cta); outline-offset: 2px; }

  /* Visible only once focused. Every page leads with either the splash or the
     auth stack before any real navigation, so keyboard users otherwise have to
     tab through the entire header and sidebar on every page load. */
  .skip-link {
    position: fixed;
    top: calc(var(--safe-t) + 8px);
    left: 8px;
    z-index: 2000;
    padding: 10px 16px;
    border-radius: var(--r-sm);
    background: var(--cta);
    color: var(--ink-cta);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transform: translateY(-200%);
    transition: transform .18s var(--ease);
  }
  .skip-link:focus,
  .skip-link:focus-visible {
    transform: translateY(0);
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  #main-canvas, .dt-container { scroll-margin-top: var(--topbar-total); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Anti-gravity float (sinusoidal, 2px amplitude, 4s period) ──
   Animates the individual `translate` property, NOT `transform`, so the
   float can never mask transform-based interactions: 3D tilt, hover lift
   (translateZ) and :active press (scale) keep working while floating. */
@keyframes agFloat {
  0%, 100% { translate: 0 -2px; }
  50%       { translate: 0  2px; }
}

/* ── Iridescent border pulse ── */
@keyframes borderPulse {
  0%, 100% { box-shadow: 0 0 0 1px var(--border-glow), 0 8px 32px rgba(0, 231, 1,   .08); }
  50%       { box-shadow: 0 0 0 1px var(--border-cyan), 0 8px 32px rgba(0, 217, 255, .12); }
}

/* ── Ripple: triggered by adding .btn--ripple via JS ── */
@keyframes ripple {
  from { transform: scale(0); opacity: .7; }
  to   { transform: scale(4); opacity: 0;  }
}

/* ── Kinetic number roll ── */
@keyframes numberRoll {
  0%   { filter: blur(3px); transform: translateY(-6px); opacity: 0; }
  100% { filter: blur(0);   transform: translateY(0);    opacity: 1; }
}
.kinetic { animation: numberRoll .18s var(--ease) both; }

/* ================================ Buttons ================================ */

.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: var(--tap); padding: 12px 18px;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 700; letter-spacing: .2px;
  position: relative; overflow: hidden;
  transition: transform .1s var(--ease), box-shadow .14s var(--ease), background-color .14s var(--ease);
}
/* Ripple pseudo-element */
.btn::after {
  content: '';
  position: absolute; inset: 0; margin: auto;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  transform: scale(0); opacity: 0;
  pointer-events: none;
}
.btn--ripple::after { animation: ripple .5s var(--ease) forwards; }
.btn:active { transform: scale(.95); }
.btn[disabled] { opacity: .45; pointer-events: none; }

/* Primary CTA: Stake green — tasteful glow, not blinding */
.btn--cta {
  background: var(--cta); color: var(--ink-cta);
  box-shadow: 0 0 10px rgba(0, 231, 1, .20);
}
.btn--cta:hover:not(:active) {
  background: var(--cta-hover);
  box-shadow: 0 0 20px rgba(0, 231, 1, .30);
}
/* Ghost / secondary: solid surface-2 border, no glow */
.btn--ghost {
  background: var(--surface-2);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px var(--border);
}
.btn--ghost:hover:not(:active) { background: var(--border); }

/* ================================= Splash ================================ */

.splash {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: calc(var(--safe-t) + 24px) 24px calc(var(--safe-b) + 28px);
  background: var(--bg);
  transition: opacity .45s var(--ease), visibility .45s var(--ease);
}
.splash--out { opacity: 0; visibility: hidden; }

.splash__glow {
  position: absolute; width: min(78vw, 420px); aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 231, 1, .14), rgba(0, 231, 1, 0) 62%);
  animation: splashGlow 3.2s var(--ease) infinite alternate;
}
@keyframes splashGlow { from { opacity: .5; transform: scale(.94); } to { opacity: 1; transform: scale(1.05); } }

.splash__logo {
  position: relative; width: min(62vw, 260px);
  filter: drop-shadow(0 0 28px rgba(0, 231, 1, .30)) drop-shadow(0 12px 28px rgba(0, 0, 0, .5));
  animation: logoIn .9s var(--ease) both, agFloat 4.5s ease-in-out .9s infinite;
}
.splash__foot {
  position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 32px);
  display: grid; justify-items: center; gap: 14px;
}
.splash__bar { width: 132px; height: 3px; border-radius: 99px; background: var(--veil-2); overflow: hidden; }
.splash__bar-fill {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--cta); box-shadow: 0 0 14px rgba(0, 231, 1, .85);
  animation: load 1.5s var(--ease) forwards;
}
.splash__tagline {
  margin: 0; font-size: 12.5px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--ink-dim);
  text-shadow: 0 0 14px rgba(0, 231, 1, .25);
}

@keyframes logoIn  { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes load    { from { width: 0; } to { width: 100%; } }

/* ============================== Auth screens ============================== */

.auth {
  display: flex; flex-direction: column; min-height: 100dvh;
  padding: calc(var(--safe-t) + 6px) 0 calc(var(--safe-b) + 6px);
}
.auth__head { display: flex; justify-content: center; padding: 24px var(--pad) 4px; }
.auth__logo { width: min(46vw, 186px); animation: logoIn .6s var(--ease) both; }

.screen { display: none; flex: 1; flex-direction: column; padding: 0 var(--pad); }
.screen--active { display: flex; animation: screenIn .32s var(--ease) both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.screen__body { flex: 1; padding-top: 8px; }
.screen__title {
  margin: 6px 0 8px; font-size: 27px; font-weight: 800; line-height: 1.18; letter-spacing: -.4px;
  text-shadow: 0 0 24px rgba(0, 231, 1, .18);
}
.screen__sub { margin: 0 0 22px; font-size: 14.5px; color: var(--ink-dim); }
.screen__cta {
  position: sticky; bottom: 0; display: grid; gap: 10px;
  padding: 18px 0 6px;
  background: linear-gradient(180deg, rgba(15, 33, 46, 0), var(--bg) 34%);
}
.fineprint { margin: 2px 0 0; text-align: center; font-size: 11.5px; color: var(--ink-dim); }
.fineprint--left { text-align: left; margin-top: 16px; }
.stackactions { margin: 14px 0 4px; }

/* ── Perk cards ── */
.perks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.perk {
  display: flex; align-items: center; gap: 11px;
  padding: 13px 14px; border-radius: var(--r-md);
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 14px;
}
.perk__dot {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  background: var(--cta);
}

.backbtn {
  display: grid; place-items: center; width: 40px; height: 40px; margin: 4px 0 10px -4px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink); font-size: 18px;
  border: 1px solid var(--border);
}

/* ================================== Forms ================================= */

.form { display: grid; gap: 14px; }
.field { display: grid; gap: 7px; }
.field__label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim);
}
.field:focus-within .field__label { color: var(--ink); }

.field__wrap {
  display: flex; align-items: center; min-height: var(--tap);
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color .14s var(--ease);
}
.field__wrap:focus-within {
  border-color: var(--cta);
}
.field__prefix { padding: 0 10px 0 16px; color: var(--ink-dim); font-weight: 600; }
.field__input {
  flex: 1; min-width: 0; height: var(--tap); padding: 0 16px;
  background: transparent; border: 0; outline: none; font-size: 15px; color: var(--ink);
}
.field__wrap--prefixed .field__input { padding-left: 2px; }
.field__input::placeholder { color: var(--ink-muted); }

.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--ink-dim); }
.check input { flex: none; width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--cta); }

.formerror {
  margin: 0; padding: 11px 13px; border-radius: var(--r-sm);
  background: rgba(233, 17, 60, .12); color: var(--alert);
  border: 1px solid rgba(233, 17, 60, .35);
  font-size: 13px; font-weight: 600;
}

/* ============================== PIN modal ================================= */

.modal {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: flex-end; justify-content: center;
}
.modal__scrim { position: absolute; inset: 0; background: var(--scrim); animation: fade .25s var(--ease) both; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.modal__sheet {
  position: relative; width: 100%; max-width: 480px;
  padding: 16px var(--pad) calc(var(--safe-b) + 20px);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  animation: sheetUp .3s var(--ease) both;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }

.modal__grab { width: 40px; height: 4px; margin: 0 auto 14px; border-radius: 99px; background: var(--border); }
.modal__title { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--ink); }
.modal__sub { margin: 0 0 18px; font-size: 13px; color: var(--ink-dim); }
.modal__actions { display: grid; gap: 10px; }

.pindots { display: flex; justify-content: center; gap: 14px; margin: 2px 0 18px; }
.pindot {
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--border);
  transition: transform .14s var(--ease), background-color .14s var(--ease);
}
.pindot--on { background: var(--cta); border-color: var(--cta); }
.pindots--bad { animation: shake .38s var(--ease); }

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-9px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(3px); }
}

.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.key {
  min-height: 52px; border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-size: 20px; font-weight: 600;
  border: 1px solid var(--border);
  transition: background-color .1s var(--ease), transform .1s var(--ease);
}
.key:active { background: var(--border); transform: scale(.97); }
.key:hover  { background: var(--border); }
.key--util { font-size: 14px; font-weight: 700; color: var(--ink-dim); }

.shell { 
  display: flex; 
  flex-direction: column; 
  min-height: 100dvh; 
  overflow-x: hidden; /* Prevent horizontal scroll */
}

/* ==========================================================================
   TOPBAR — Sticky, --topbar-h + safe-area, no wrapping ever
   ========================================================================== */
.topbar {
  position: sticky; 
  top: 0; 
  z-index: 40; /* Below drawer (50) and backdrop (45) */
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  gap: 8px;
  /* box-sizing is border-box, so --safe-t pads the top *inside* the box and
     the content row still gets the full --topbar-h. */
  padding: var(--safe-t) var(--pad) 0;
  height: var(--topbar-total);
  min-height: var(--topbar-total);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 var(--border);
}
.topbar__left { 
  display: flex; 
  align-items: center; 
  gap: 8px; 
  min-width: 0; 
  flex-shrink: 0;
}
.topbar__menubtn { 
  display: grid; 
  place-items: center; 
  width: 40px; 
  height: 40px; 
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink);
  transition: background-color .12s var(--ease);
}
.topbar__menubtn:hover { background: var(--border); }
.topbar__menubtn:active { transform: scale(.95); }
.topbar__menubtn svg { width: 20px; height: 20px; }
.topbar__logo { 
  width: 80px; 
  height: auto; 
  flex-shrink: 0;
}

/* Center Search — Desktop only */
.topbar__search {
  display: none; /* Hidden on mobile/tablet */
  align-items: center; 
  gap: 10px;
  flex: 0 1 340px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  transition: border-color .14s var(--ease);
  min-width: 0;
}
.topbar__search:hover { border-color: var(--border); }
.topbar__search:focus-within { border-color: var(--blue); }
.search__icon { color: var(--ink-dim); flex-shrink: 0; }
.search__input {
  background: transparent; border: 0; outline: none;
  font-size: 13px; color: var(--ink); width: 100%; cursor: pointer;
}
.search__input::placeholder { color: var(--ink-muted); }

/* Right cluster — Condensed on mobile */
.topbar__right { 
  display: flex; 
  align-items: center; 
  gap: 6px; 
  flex-shrink: 0;
  min-width: 0;
}

.wallet-cluster {
  display: flex; 
  align-items: center; 
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
  min-width: 0;
  /* Let the cluster shrink below its content width so a long balance
     ellipsises inside .chip--wallet instead of pushing the row wide. */
  flex-shrink: 1;
  overflow: hidden;
}
.chip--wallet {
  padding: 0; 
  border-radius: 0;
  background: transparent; 
  box-shadow: none;
  font-size: 12px; 
  font-weight: 700; 
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-wallet {
  display: inline-flex; 
  align-items: center; 
  gap: 6px;
  padding: 7px 10px; 
  border-radius: var(--r-sm);
  background: var(--blue); 
  color: #FFFFFF;
  font-size: 13px; 
  font-weight: 700;
  white-space: nowrap;
  transition: opacity .12s var(--ease), transform .1s var(--ease);
  flex-shrink: 0;
}
.btn-wallet:hover { opacity: .88; }
.btn-wallet:active { transform: scale(.96); }
.btn-wallet span { display: none; } /* Icon-only on mobile */
.btn-wallet svg { width: 16px; height: 16px; }

.iconbtn {
  display: grid; 
  place-items: center; 
  width: 36px; 
  height: 36px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink-dim);
  font-size: 16px;
  border: 1px solid var(--border);
  transition: color .12s var(--ease), background-color .12s var(--ease);
  flex-shrink: 0;
}
.iconbtn:hover { color: var(--ink); background: var(--border); }
.iconbtn:active { transform: scale(.95); }

/* ============================ Stake Dashboard Layout ======================== */

.dashboard-layout {
  display: flex; 
  flex: 1; 
  min-height: 0;
  width: 100%; 
  max-width: 1440px; 
  margin: 0 auto;
}

/* ==========================================================================
   SIDEBAR — Mobile/Tablet: Fixed Overlay Drawer | Desktop: Persistent
   ========================================================================== */

/* Backdrop Overlay — Hidden by default */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease);
}
.sidebar-backdrop--open {
  opacity: 1;
  visibility: visible;
}

/* Sidebar Base — Mobile Drawer (≤639px) */
.sidebar {
  position: fixed;
  /* Offsets resolve through the tokens so the drawer always starts directly
     under the topbar and stops directly above the bottom-nav, safe-area
     insets included. */
  top: var(--topbar-total);
  left: 0;
  bottom: var(--nav-total);
  width: 280px;
  max-width: 85vw;
  background: var(--surface);
  border-right: 1px solid var(--border);
  transform: translateX(-100%);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 50;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 12px 10px calc(12px + var(--safe-b));
  display: flex;
  flex-direction: column;
}
.sidebar--open {
  transform: translateX(0);
}

/* Tablet (640px - 1023px) — No bottom-nav, full height */
@media (min-width: 640px) {
  :root { --topbar-h: 60px; }
  .sidebar { 
    bottom: 0; 
    width: 300px;
  }
}

/* Desktop (≥1024px) — Drawer Pattern (same as mobile/tablet) */
@media (min-width: 1024px) {
  .sidebar { 
    width: 320px;
  }
  /* Keep hamburger visible, keep drawer overlay pattern */
  .main-content { padding-bottom: 24px; } /* No bottom-nav on desktop */
  .game-grid {
    grid-template-columns: repeat(auto-fill, 126px);
    gap: 20px;
  }
  .game-card__media { height: 130px; }
  .crash-layout { display: flex; gap: 20px; }
  .crash-layout__sidebar { flex: 0 0 320px; }
}

.sidebar__group { margin-bottom: 20px; }
.sidebar__section-title {
  padding: 0 10px 8px;
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: .1em;
  text-transform: uppercase; 
  color: var(--ink-muted);
}
.side-link {
  display: flex; 
  align-items: center; 
  gap: 10px;
  padding: 9px 12px; 
  margin-bottom: 2px;
  border-radius: var(--r-sm);
  color: var(--ink-dim); 
  font-size: 13.5px; 
  font-weight: 500;
  text-decoration: none;
  transition: color .12s var(--ease), background-color .12s var(--ease);
  min-height: 44px; /* Touch target */
}
.side-link__icon { 
  width: 18px; 
  height: 18px; 
  flex-shrink: 0;
}
.side-link:hover { color: var(--ink); background: var(--surface-2); }
.side-link:active { background: var(--border); }
.side-link--active {
  color: var(--ink); 
  background: var(--surface-2);
  font-weight: 600;
}
.badge-pill {
  margin-left: auto; 
  padding: 2px 6px;
  border-radius: var(--r-pill);
  background: rgba(233, 17, 60, .15); 
  color: var(--alert);
  font-size: 10px; 
  font-weight: 700; 
  text-transform: uppercase;
  border: 1px solid rgba(233, 17, 60, .30);
  flex-shrink: 0;
}

/* Sidebar User Profile Section */
.sidebar__user {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.sidebar__user .side-link {
  padding: 12px;
  border-radius: var(--r-md);
  background: transparent;
  min-height: 56px;
}
.sidebar__user .side-link:hover {
  background: var(--surface-2);
}
.sidebar__user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.sidebar__user-info {
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.sidebar__user-name {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar__user-email {
  font-size: 11px;
  color: var(--ink-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dashboard__content { 
  flex: 1; 
  min-width: 0; 
  /* Sidebar stays an overlay drawer at every breakpoint, so no offset margin is needed */
}

.shell__main { flex: 1; }
.shell .screen--active { 
  padding-bottom: var(--nav-total); /* clear the fixed bottom-nav (+ home indicator) */
}

/* ==========================================================================
   HERO SECTION — Unified Carousel with Aspect Ratio Enforcement
   ========================================================================== */

/* Remove old .hero-banner styles — keep only .hero-section */

.hero-section {
  position: relative;
  width: 100%;
  /* max-width + border-box stop a wide hero from overflowing its container and
     getting clipped on narrow mobile viewports. */
  max-width: 100%;
  box-sizing: border-box;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #1A2C38 0%, #213743 100%);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
   aspect-ratio: 16 / 9; /* Mobile default */
  margin: 24px 0 28px;
}

@media (min-width: 640px) {
  .hero-section { 
    aspect-ratio: 21 / 9; 
    margin: 16px 0 24px;
  }
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 20px 16px; /* Mobile padding */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
  pointer-events: none;
}
.hero-slide.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  position: relative;
}

/* Mobile: Stacked, centered */
@media (max-width: 639px) {
  .hero-slide {
    flex-direction: column;
    text-align: center;
    justify-content: center;
    padding: 20px 16px;
  }
  .hero-content { 
    max-width: 100%; 
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .hero-visual { display: none; }
}

/* Tablet+ (≥640px): Side-by-side */
@media (min-width: 640px) {
  .hero-slide {
    flex-direction: row;
    text-align: left;
    justify-content: space-between;
    padding: 32px 40px;
  }
  .hero-content { 
    max-width: 55%; 
    display: block;
  }
  .hero-visual {
    display: flex;
    width: 45%;
    aspect-ratio: 4 / 3;
    max-height: 200px;
    flex-shrink: 0;
  }
}

.hero-content {
  z-index: 2;
}
.hero-content h1 {
  font-size: clamp(1.25rem, 5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 8px;
  color: #fff;
  letter-spacing: -0.02em;
}
.hero-content p {
  font-size: clamp(0.8rem, 2.5vw, 1.1rem);
  color: var(--ink-dim);
  margin: 0 0 16px;
  line-height: 1.4;
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: var(--cta);
  color: #000;
  border: none;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(0, 231, 1, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn-hero:hover {
  transform: translateY(-2px);
  background: var(--cta-hover);
  box-shadow: 0 0 24px rgba(0, 231, 1, 0.45);
}
.btn-hero:active {
  transform: scale(0.96);
}

.hero-visual {
  background-size: cover;
  background-position: center;
  border-radius: var(--r-md);
  opacity: 0.9;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Banner gradient themes — used as background on .hero-visual */
.banner-crash {
  background: linear-gradient(135deg, #e9113c 0%, #ff4b2b 50%, #1a2c38 100%);
}
.banner-mines {
  background: linear-gradient(135deg, #f7971e 0%, #ffd200 60%, #1a2c38 100%);
}
.banner-plinko {
  background: linear-gradient(135deg, #11998e 0%, #38ef7d 60%, #1a2c38 100%);
}

/* Category headers */
.catalog-header {
  display: flex; align-items: center; justify-content: space-between;
  margin: 28px 0 20px;
}
.catalog-header__title { display: flex; align-items: center; gap: 8px; }
.catalog-header__title h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--ink); }
.glow-icon { color: var(--cta); font-size: 14px; }
.catalog-header__viewall { font-size: 12px; font-weight: 600; color: var(--ink-dim); cursor: pointer; }
.catalog-header__viewall:hover { color: var(--ink); }

/* ======================== Stake Originals Game Grid ======================== */

.game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 112px);
  gap: 12px;
  margin-bottom: 32px;
}

/* Stake-style solid game cards — #213743, hover lifts + subtle green shadow */
.game-card {
  display: flex; flex-direction: column;
  border-radius: var(--r-md);
  background: var(--surface-2);
  text-decoration: none; color: var(--ink);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  --tilt-x: 0deg; --tilt-y: 0deg;
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
}

.game-card:hover {
  transform: perspective(800px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateY(-3px) scale(1.02);
  box-shadow: 0 0 10px rgba(0, 231, 1, .20);
  border-color: var(--border);
}
.game-card:active { transform: scale(.97); }

.game-card__media {
  position: relative; height: 110px;
  display: grid; place-items: center;
  background: var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
/* Crash — dark green tinted */
.game-card__media--crash {
  background: linear-gradient(135deg, #1a2c38 0%, #0f2820 100%);
  color: var(--cta);
}
/* Mines — matches the banner image's top-left so any loading gap blends in.
   Two-class selector on purpose: the banner is 3:4 portrait, but plain
   `.game-card__media` fixed heights (130px @1024+, 110px @640+, 140px in
   ipad.css) are declared LATER in the cascade at equal specificity, so a
   single-class override here would lose to them on source order and the
   wordmark would clip again. (0,2,0) wins regardless of order. */
.game-card__media.game-card__media--mines {
  position: relative;
  aspect-ratio: 3 / 4 !important;
  height: auto !important;
  min-height: 0 !important;
  width: 100%;
  background: #1D4ED8;
  padding: 0;
  overflow: hidden;
  display: block;
}

.game-card__banner {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  aspect-ratio: auto;
}

.game-card__rocket-art { filter: drop-shadow(0 0 8px rgba(0, 231, 1, .40)); }
.game-card__badge-top {
  position: absolute; top: 6px; right: 6px;
  padding: 2px 6px; border-radius: var(--r-pill);
  background: rgba(0, 231, 1, .20); color: var(--cta);
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  border: 1px solid rgba(0, 231, 1, .35);
}

/* Mines Mini Grid — Stake palette: #2F4553 unrevealed, green gem, red bomb */
.mines-mini-grid {
  display: grid; grid-template-columns: repeat(4, 18px); gap: 3px;
}
.mine-cell {
  width: 18px; height: 18px; border-radius: 3px;
  background: #2F4553;
  display: grid; place-items: center; font-size: 10px;
}
.mine-cell--gem {
  background: rgba(0, 231, 1, .15);
  box-shadow: 0 0 6px rgba(0, 231, 1, .35);
  border: 1px solid rgba(0, 231, 1, .40);
}

/* Plinko Mini Art — B1BAD2 pegs, cyan low, red high */
.plinko-mini-pyramid {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
}
.peg-row { display: flex; gap: 8px; }
.peg {
  width: 5px; height: 5px; border-radius: 50%;
  background: #B1BAD2; opacity: .5;
}
.peg--active, .peg--hit {
  background: var(--cyan); box-shadow: 0 0 6px var(--cyan); opacity: 1;
}
.plinko-multipliers {
  display: flex; gap: 3px; margin-top: 4px;
}
.pm {
  font-size: 8px; font-weight: 700; padding: 1px 3px; border-radius: 2px;
  background: var(--surface); color: var(--ink-dim);
}
.pm--high { background: rgba(233, 17, 60, .25); color: var(--alert); }

/* Dice Mini Art */
.dice-mini-cubes { display: flex; gap: 10px; font-size: 32px; color: var(--cyan); text-shadow: 0 0 12px var(--cyan); }
.mini-cube--alt { color: var(--cta); text-shadow: 0 0 12px var(--cta); }
.dice-mini-slider {
  width: 80px; height: 4px; border-radius: 99px;
  background: var(--veil-2); overflow: hidden; margin-top: 4px;
}
.dice-fill { display: block; height: 100%; background: var(--cyan); }

/* Limbo Mini Art */
.limbo-target { text-align: center; }
.limbo-val { font-size: 20px; font-weight: 800; color: var(--cta); text-shadow: 0 0 14px var(--cta); }
.limbo-sub { display: block; font-size: 8px; letter-spacing: .1em; color: var(--ink-dim); }

/* Keno Mini Art */
.keno-mini-grid {
  display: grid; grid-template-columns: repeat(3, 24px); gap: 4px;
}
.k-num {
  width: 24px; height: 20px; border-radius: 4px;
  background: var(--veil-2); font-size: 10px; font-weight: 700;
  display: grid; place-items: center; color: var(--ink-dim);
}
.k-num--hit { background: rgba(0, 217, 255, .3); color: var(--cyan); box-shadow: 0 0 6px var(--cyan); }

/* Card footer & Live Players Badge */
.game-card__footer { padding: 9px 10px; }

/* The mines card is now visibly taller (3:4 portrait banner) than the
   removed landscape cards, so its footer gets a little more room to stay
   balanced. Safe as a sibling selector: media and footer share one parent. */
.game-card__media--mines + .game-card__footer { padding: 12px 14px; }
.game-card__name { font-size: 13.5px; font-weight: 800; margin-bottom: 2px; }
.game-card__players {
  display: flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 600; color: var(--ink-dim);
}
.player-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--cta); box-shadow: 0 0 6px var(--cta);
}

/* Legacy profile / security card wrapper */
.account-drawer-card {
  margin-top: 14px;
  padding: 16px; border-radius: var(--r-lg);
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--border-glow);
}

/* =================── Stat cards (floating glass) ──======================== */
.statlist { display: grid; gap: 8px; margin: 6px 0 0; }
.statlist__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 15px; border-radius: var(--r-md);
  background: var(--surface);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 0 0 1px var(--border-glow), 0 4px 16px rgba(0, 0, 0, .25);
  animation: agFloat 4s ease-in-out infinite;
}
.statlist__row:nth-child(2) { animation-delay: .8s; }
.statlist__row:nth-child(3) { animation-delay: 1.6s; }
.statlist__row dt { font-size: 11.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.statlist__row dd { margin: 0; font-size: 14.5px; font-weight: 700; }

/* ================================== Toast ================================= */

.toast {
  position: fixed; left: 50%; bottom: calc(var(--safe-b) + 22px); z-index: 90;
  transform: translateX(-50%);
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px; border-radius: var(--r-pill);
  background: var(--surface);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--ink);
  font-size: 14px; font-weight: 600;
  box-shadow: var(--shadow), 0 0 0 1px var(--line);
  animation: toastIn .26s var(--ease) both;
}
.toast--ok    { box-shadow: var(--shadow), 0 0 0 1px rgba(0, 231,   1, .45), 0 0 24px rgba(0, 231,   1, .15); }
.toast--alert { box-shadow: var(--shadow), 0 0 0 1px rgba(255, 42, 109, .55), 0 0 24px rgba(255, 42, 109, .20); }
@keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }

@media (max-width: 767px) {
  .toast { bottom: calc(var(--nav-total) + 12px); }
}

/* =========================== Responsive System (Mobile-First) ========================== */

/* === BASE (Mobile ≤639px) === */
:root {
  --tap: 48px;
  --pad: 16px;
}

.shell { min-height: 100dvh; }

/* Mobile base. These re-declare the chrome because the tokens defined up top
   are consumed elsewhere; heights route through --topbar-total / --nav-total
   so the notch and home-indicator insets stay accounted for. Previously this
   block hardcoded `height: 56px` + `padding: 0` (wiping the safe-area top
   padding) and `bottom: 56px` on the drawer, which tucked 8px of the last nav
   item under the 64px bottom-nav. */
.topbar { 
  height: var(--topbar-total); 
  padding: var(--safe-t) var(--pad) 0;
}

.bottom-nav { 
  display: flex; 
  height: var(--nav-total);
  padding: 0 8px var(--safe-b);
}

.sidebar { 
  width: 280px; 
  transform: translateX(-100%); 
  transition: transform .25s var(--ease); 
}

.main-content { padding-bottom: var(--nav-total); }

.hero-section { 
  min-height: 180px; 
  margin: 24px 0 28px; 
}
.hero-slide { 
  flex-direction: column; 
  text-align: center; 
  padding: 16px; 
}
.hero-visual { display: none; }

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS — Tablet & Desktop
   ========================================================================== */

/* Tablet (640px - 1023px) */
@media (min-width: 640px) {
  :root { --pad: 28px; --topbar-h: 60px; --nav-h: 0; }
  
  /* Topbar adjustments */
  .topbar__logo { width: 96px; }
  .wallet-cluster { padding: 4px 10px 4px 12px; gap: 8px; }
  .chip--wallet { font-size: 13px; max-width: 120px; }
  .btn-wallet span { display: inline; }
  .btn-wallet { padding: 7px 14px; }
  
  .game-grid {
    grid-template-columns: repeat(auto-fill, 116px);
    gap: 16px;
  }
  .game-card__media { height: 110px; }
  .bottom-nav { display: none; }
}

/* Desktop (≥1024px) */
@media (min-width: 1024px) {
  :root { --pad: 32px; --topbar-h: 60px; }
  
  /* Topbar adjustments */
  .topbar__search { display: flex; }
  .topbar__logo { width: 112px; }
  .wallet-cluster { padding: 4px 4px 4px 12px; gap: 6px; }
  .chip--wallet { font-size: 13px; max-width: none; }
  .btn-wallet { padding: 7px 14px; }
  .btn-wallet span { display: inline; }
  
  /* Keep drawer pattern on desktop - sidebar is an overlay, not flex flow */
  
  .main-content { padding-bottom: 24px; }
  .game-grid {
    grid-template-columns: repeat(auto-fill, 126px);
    gap: 20px;
  }
  .game-card__media { height: 130px; }
  .crash-layout { display: flex; gap: 20px; }
  .crash-layout__sidebar { flex: 0 0 320px; }
}

/* Large Desktop (≥1280px) */
@media (min-width: 1280px) {
  .game-grid {
    grid-template-columns: repeat(auto-fill, 126px);
  }
  .dashboard-layout { max-width: 1440px; margin: 0 auto; }
}

/* ========================== Reduced motion ================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .splash__logo { animation: none; }
  .splash__bar-fill { width: 100%; }
}

/* =========================== Bottom Navigation (Wave 3 - Canonical) ========================== */

.bottom-nav {
  position: fixed;
  bottom: 0; left: 0;
  width: 100%;
  height: var(--nav-total);
  background: rgba(15, 33, 46, .98);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  z-index: 40; /* Same level as topbar, below sidebar drawer */
  justify-content: space-around;
  align-items: center;
  /* --safe-b keeps the nav labels clear of the iOS home indicator. */
  padding: 0 8px var(--safe-b);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  min-height: 56px; /* Full height for touch target */
  transition: color 0.2s ease, background 0.2s ease;
}

.nav-item i {
  font-size: 1.25rem;
  margin-bottom: 2px;
}
/* Icons are inline SVG since the FontAwesome removal; `font-size` no longer
   sizes them, so the glyph is sized explicitly instead. */
.nav-item svg {
  width: 20px;
  height: 20px;
  margin-bottom: 2px;
}

.nav-item.active,
.nav-item:hover {
  color: var(--cta);
  background: var(--surface-2);
}

/* Badge for notification counts on bottom nav items */
.nav-badge {
  position: absolute;
  top: 2px;
  right: -6px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  color: #fff;
  background: var(--cta, #FF2A6D);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  z-index: 1;
  pointer-events: none;
}

.nav-item {
  position: relative;
}

/* Hide any hamburger/drawer menu button on mobile */
.hamburger,
.menu-toggle,
.dx-menu-toggle {
  display: none !important;
}

/* Hide drawer overlay on mobile — bottom nav replaces it */
.drawer-overlay,
.sidebar-overlay {
  display: none !important;
}

/* =========================== Profile Page Styles ========================== */

.screen[data-screen="profile"] .screen__body {
  padding: 0;
}

.profile-header {
  text-align: center;
   padding: 24px var(--pad);
  background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.profile-avatar {
  width: 72px;
  height: 72px;
  background: var(--blue);
  border-radius: 50%;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  color: #fff;
}

.profile-header h1 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.profile-header p {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-dim);
}

.profile-header .profile-email {
  margin: 0 0 4px;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ink);
}

.page-title {
  font-size: 24px;
  font-weight: 800;
  margin: 0;
  color: #fff;
}

.page-subtitle {
  color: var(--ink-dim);
  font-size: 14px;
  margin: 0 0 20px;
}

.profile-balance-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 20px;
  margin: 0 16px 16px;
  text-align: center;
}

.profile-balance-card h2 {
  margin: 0 0 4px;
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--cta);
  font-variant-numeric: tabular-nums;
}

.profile-balance-card p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.profile-menu {
  margin: 0;
}

.profile-menu-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
   padding: 14px var(--pad);
   background: var(--surface);
   border: 1px solid var(--border);
   margin: 8px var(--pad);
  border-radius: var(--r-md);
  color: var(--ink);
  text-decoration: none;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
  min-height: 48px;
}

.profile-menu-item:hover {
  background: var(--surface-2);
  border-color: var(--border);
}

.profile-menu-item:active {
  background: var(--border);
}

.profile-menu-item i:first-child,
.profile-menu-item svg:first-child {
  color: var(--blue);
  margin-right: 12px;
  width: 20px;
  text-align: center;
}

.profile-menu-item i:last-child,
.profile-menu-item svg:last-child {
  color: var(--ink-dim);
}

/* ---- BUG: profile page text alignment (mobile) ---------------------------
   Every level of the profile screen added its OWN horizontal inset, so the
   rows did not share a left edge and the page read as randomly placed blocks:

     .screen                 padding 0 var(--pad)   -> 20px
     .profile-header         padding 24px var(--pad)-> +20px  = 40px (centred text)
     .profile-balance-card   margin 0 16px          -> +16px  = 36px (centred text)
     .profile-menu-item      margin 8px var(--pad)  -> +20px  = 40px, then its own
                            padding 14px var(--pad)         padding -> text at 60px

   => card edges at 36 / 40 and row text at 60. Three different left edges.

   Fix: the screen wrapper already supplies the page gutter, so every child
   block drops its own horizontal margin/padding and they all align to the
   same edge. Vertical rhythm is untouched. */
.screen[data-screen="profile"] {
  padding-left: var(--pad);
  padding-right: var(--pad);
}

.screen[data-screen="profile"] .profile-header {
  margin-left: 0;
  margin-right: 0;
  /* Full-bleed gradient was fighting the gutter; keep the card square to the
     shared edge so the avatar/email/balance/menu all line up. */
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.screen[data-screen="profile"] .profile-balance-card {
  margin-left: 0;
  margin-right: 0;
}

.screen[data-screen="profile"] .profile-menu {
  margin: 0;
}

.screen[data-screen="profile"] .profile-menu-item {
  margin-left: 0;
  margin-right: 0;
  /* The gutter is the screen's job; the row only needs its own inner padding. */
  padding-left: 14px;
  padding-right: 14px;
}

/* Left-align the row LABEL (not the whole row) so icon+text form one column
   with the header text, while the chevron stays hard right. */
.screen[data-screen="profile"] .profile-menu-item > span {
  display: flex;
  align-items: center;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
}

.screen[data-screen="profile"] .profile-menu-item > i:last-child,
.screen[data-screen="profile"] .profile-menu-item > svg:last-child {
  flex: 0 0 auto;
  margin-left: 12px;
}

/* Hub rows rendered by routes/profile-settings.js use .profile-menu-icon
   instead of a nested <i>, so they are matched explicitly. */
.profile-menu-icon {
  width: 20px;
  height: 20px;
  color: var(--blue);
  flex-shrink: 0;
}

.chevron-right {
  width: 14px;
  height: 14px;
  color: var(--ink-muted);
  flex-shrink: 0;
}

.copy-icon {
  margin-right: 6px;
  vertical-align: -4px;
}

/* =========================== Wave 3: Enhanced Game Card Styles ========================== */

.game-card {
  position: relative;
}

.game-card .card-overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(15, 33, 46, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  border-radius: var(--r-md);
  z-index: 5;
}

.game-card:hover .card-overlay {
  opacity: 1;
}

.card-overlay .btn-play {
  padding: 8px 18px;
  background: var(--cta);
  color: #000;
  border-radius: var(--r-sm);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 0 12px rgba(0, 231, 1, 0.4);
}

.badge-hot {
  position: absolute;
  top: 8px; right: 8px;
  background: var(--alert);
  color: white;
  padding: 3px 8px;
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 10;
  box-shadow: 0 2px 6px rgba(233, 17, 60, 0.4);
}

/* =========================== Wave 3: Referral & Bonus Styles ========================== */

.referral-box {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--pad);
  margin: 20px 0 28px;
}

.referral-box label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-dim);
  margin-bottom: 8px;
}

.referral-box input {
  width: 100%;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  outline: none;
}

.btn-copy {
  padding: 10px 20px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.1s ease;
}

.btn-copy:hover {
  opacity: 0.9;
}

.btn-copy:active {
  transform: scale(0.96);
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 30px;
}

.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
   padding: 16px var(--pad);
}

.stat-card h3 {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-dim);
}

.stat-card p {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--cta);
  font-variant-numeric: tabular-nums;
}

.bonus-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
   padding: var(--pad);
  margin-bottom: 18px;
  /* Full-width + border-box so cards stack cleanly instead of overflowing
     once padding is added on narrow viewports. */
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bonus-card h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}

.bonus-card p {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--ink-dim);
}

.bonus-card .btn-hero {
  align-self: flex-start;
}

.bonus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  width: 100%;
  box-sizing: border-box;
}

/* ==========================================================================
   Wave 4: SPA ROUTE VIEWS
   Page shells rendered into #main-canvas / #dt-route-canvas and the overlay
   host #routeModal. Everything reuses the Wave 1-3 design tokens above.
   ========================================================================== */

.route-canvas {
  min-height: 50vh;
  padding: 4px 0 32px;
}

/* Shell swap animation — same easing as the auth screens, so switching
   routes fades in instead of flashing (no page reload, no white frame). */
.route-in { animation: screenIn .26s var(--ease) both; }

.route-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 6px;
}
.route-head .glow-icon { font-size: 18px; }
.route-title {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--ink);
}
.route-sub {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--ink-dim);
}
.route-sub strong { color: var(--ink); }
.route-center { text-align: center; padding: 34px 16px; }

/* Generic surface card used by most route views */
.route-panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--pad);
  margin-bottom: 16px;
}
.route-panel > :last-child { margin-bottom: 0; }
.route-panel h2 {
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}

/* Tab / filter pill row (wallet tabs, category chips, policy tabs) */
.route-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
  scrollbar-width: none;
}
.route-tabs::-webkit-scrollbar { display: none; }
.route-tab {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-dim);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .14s var(--ease), color .14s var(--ease), border-color .14s var(--ease);
}
.route-tab:hover { color: var(--ink); background: var(--border); }
.route-tab:active { transform: scale(.97); }
.route-tab--active,
.route-tab.route-tab--active {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

/* Data tables (bet history, transactions, VIP tiers) */
.route-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.route-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-dim);
  background: var(--surface-2);
  padding: 10px 12px;
  white-space: nowrap;
}
.route-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  white-space: nowrap;
}
.route-table tr:last-child td { border-bottom: 0; }
.route-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.route-up   { color: var(--cta); font-weight: 700; }
.route-down { color: var(--alert); font-weight: 700; }
.route-muted { color: var(--ink-muted); }
.route-empty {
  margin: 0;
  padding: 26px 12px;
  text-align: center;
  font-size: 13.5px;
  color: var(--ink-muted);
}
.route-table-wrap { overflow-x: auto; border-radius: var(--r-md); }

/* Definition rows (settings, VIP details) */
.route-kv {
  display: grid;
  grid-template-columns: minmax(110px, auto) 1fr;
  gap: 10px 18px;
  margin: 0;
  font-size: 14px;
}
.route-kv dt {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-dim);
  align-self: center;
}
.route-kv dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.route-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* Hash verifier output */
.route-code {
  display: block;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
  color: var(--cta);
}
.route-inline {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .92em;
  color: var(--cyan);
}

/* FAQ accordion */
details.route-faq {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  margin-bottom: 10px;
  overflow: hidden;
}
details.route-faq > summary {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
  -webkit-user-select: none;
  user-select: none;
}
details.route-faq > summary::-webkit-details-marker { display: none; }
details.route-faq > summary::after { content: '+'; color: var(--ink-dim); font-weight: 700; }
details.route-faq[open] > summary::after { content: '\2013'; }
details.route-faq > p {
  margin: 0;
  padding: 0 16px 14px;
  font-size: 13.5px;
  color: var(--ink-dim);
}

/* VIP progress bar */
.route-progress {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}
.route-progress > span {
  display: block;
  height: 100%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--cta), var(--cyan));
}

/* Game media variants used by the route catalog (slots / live / jackpots) */
.game-card__media--slots   { background: linear-gradient(135deg, #1a2c38 0%, #241a38 100%); }
.game-card__media--live    { background: linear-gradient(135deg, #1a2c38 0%, #381a1f 100%); }
.game-card__media--jackpot { background: linear-gradient(135deg, #1a2c38 0%, #38321a 100%); }

a.btn-hero { text-decoration: none; }

/* Route modal sheet: scrollable so long cashier/search shells stay usable */
#routeModal .modal__sheet {
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
#routeModal .route-tabs { margin-bottom: 14px; }
#routeModal .game-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }

/* The wallet chip inside the wallet modal mirrors the header balance style */
.route-balance { color: var(--cta); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Desktop mirror sits inside .dt-container — inherit its rhythm */
#dt-route-canvas { padding-top: 4px; }
#dt-route-canvas .route-panel { padding: 20px; }

/* ==========================================================================
   RECOVERY MODAL — interrupted-round notice (assets/recovery-modal.js)
   ========================================================================== */
.recovery-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0,0,0,0.72);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: recoveryIn 0.25s ease both;
}
@keyframes recoveryIn { from { opacity: 0; } to { opacity: 1; } }
.recovery-modal__card {
  width: min(100%, 400px); padding: 24px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: 0 16px 48px rgba(0,0,0,0.5);
  color: var(--ink);
}
.recovery-modal__card h2 { margin: 0 0 10px; font-size: 20px; font-weight: 800; }
.recovery-modal__card p { margin: 0 0 12px; font-size: 14px; line-height: 1.5; color: var(--ink-dim); }
.recovery-modal__card strong { color: var(--ink); }
.recovery-modal__note { font-size: 12.5px; color: var(--ink-muted); }
.recovery-modal__actions { display: flex; gap: 10px; margin-top: 18px; }
.recovery-modal__go {
    flex: 1; min-height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: var(--cta); color: var(--ink-cta);
    border: none;
    border-radius: var(--r-md);
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
  }
.recovery-modal__dismiss {
  min-height: 44px; padding: 0 16px;
  background: var(--surface-2); color: var(--ink-dim);
  border: 1px solid var(--border); border-radius: var(--r-md);
  font-weight: 600; cursor: pointer;
}


/* ==========================================================================
   Google OAuth
   ========================================================================== */
.auth-divider {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 18px 0 !important;
  color: var(--ink-dim, #B1BAD3) !important;
  font-size: 13px !important;
}
.auth-divider::before,
.auth-divider::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--border, #2F4553) !important;
}
.btn-google {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: 14px 16px !important;
  background: #FFFFFF !important;
  color: #1F1F1F !important;
  border: 1px solid #2F4553 !important;
  border-radius: 12px !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
.btn-google:hover { background: #F5F5F5 !important; }
.btn-google:active { transform: scale(0.98) !important; }
.btn-google:disabled { opacity: 0.6 !important; cursor: wait !important; }
.btn-google svg { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; }