/* Global design system: colors, type, spacing */
:root{
  --ds-bg:#0F172A;
  --ds-surface:#0A1020;
  --ds-surface-2:#0B1220;
  --ds-text:#E5E7EB;
  --ds-muted:#94A3B8;
  --ds-green:#22C55E;
  --ds-red:#EF4444;
  --ds-stroke:rgba(148,163,184,.18);

  --ds-radius-lg:18px;
  --ds-radius-md:14px;
  --ds-shadow-card:0 12px 40px rgba(0,0,0,.35);

  --ds-pad-x:12px;

  /* Shared player typography (Inter everywhere; rem scale matches app-shell) */
  --ds-font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ds-text-2xs: 0.65rem; /* chips, micro labels */
  --ds-text-xs: 0.72rem;  /* kickers, status, nav labels */
  --ds-text-sm: 0.82rem;  /* subtitles, secondary HUD / card titles */
  --ds-text-md: 0.92rem;  /* body / controls */
  --ds-text-lg: 1.08rem;  /* titles */
  --ds-text-xl: 1.25rem;  /* emphasis */
  --ds-text-2xl: 1.55rem; /* primary values */

  /* Home-aligned compact listing scale (Games / Wallet / lists) */
  --ds-text-page-title: 1rem;      /* 16px — app-header / page titles */
  --ds-text-page-sub: 0.75rem;     /* 12px */
  --ds-text-heading: 1.05rem;      /* 17px — home section titles */
  --ds-text-card-title: 0.82rem;   /* 13px — home game card titles */
  --ds-text-card-meta: 0.68rem;    /* 11px */
  --ds-text-chip: 0.75rem;         /* 12px */
  --ds-text-search: 0.82rem;       /* 13px */
  --ds-text-btn-sm: 0.72rem;       /* 11.5px PLAY / compact CTAs */
  --ds-text-link: 0.7rem;          /* See all */
  --ds-control-h: 2.5rem;          /* 40px search */
  --ds-chip-h: 2.25rem;            /* 36px filter chips */
  --ds-thumb-sm: 3.5rem;           /* 56px list thumbnails */
  --ds-thumb-md: 5.75rem;          /* 92px — home trending art height */
  --ds-card-featured-w: 8.75rem;   /* home trending card width */
  --ds-play-h: 1.85rem;            /* ~30px */
  --ds-fav-size: 1.75rem;          /* 28px */
  --ds-radius-card: 0.9rem;
  --ds-radius-thumb: 0.65rem;

  /* Auth surface scale (login / register) — exact sizes used by auth UI */
  --ds-text-kicker: 0.7rem;
  --ds-text-meta: 0.75rem;
  --ds-text-input: 0.875rem;
  --ds-text-lead: 0.9rem;
  --ds-text-auth-title: clamp(1.4rem, 4.8vw, 1.7rem);
  --ds-letter-brand: 0.06em;
  --ds-letter-brand-mark: 0.02em;
  --ds-letter-brand-text: 0.08em;
  --ds-letter-kicker: 0.2em;
  --ds-letter-label: 0.12em;
  --ds-letter-cta: 0.12em;
  --ds-leading-tight: 1.2;
  --ds-leading-snug: 1.4;
  --ds-leading-body: 1.45;
  --ds-leading-relaxed: 1.7;

  /* Shared compact type — drawer / nav DNA */
  --ds-text-nav: 0.75rem;                /* 12px */
  --ds-text-section: 0.625rem;           /* 10px */
  --ds-text-signed: 0.625rem;            /* 10px */
  --ds-text-user: 1.625rem;              /* 26px */
  --ds-text-coin-label: 0.625rem;        /* 10px */
  --ds-text-balance: 1.375rem;           /* 22px — fits 7-digit coins in 300px */
  --ds-text-safe: 0.75rem;               /* 12px */
  --ds-weight-nav: 600;
  --ds-weight-section: 700;
  --ds-leading-nav: 1rem;                /* 16px */
  --ds-leading-safe: 1.25rem;
  --ds-letter-section: 0.14em;
  --ds-letter-signed: 0.16em;
  --ds-icon-nav: 1.125rem;               /* 18px */
  --ds-icon-chevron: 0.8125rem;          /* 13px */
  --ds-icon-wallet: 1.375rem;            /* 22px */
  --ds-icon-close: 1.125rem;             /* 18px */
  --ds-row-nav: 2.5rem;                  /* 40px compact rows */
  --bs-offcanvas-width: 300px;

  /* App drawer aliases */
  --ds-sidebar-kicker: var(--ds-text-signed);
  --ds-sidebar-section: var(--ds-text-section);
  --ds-sidebar-user: var(--ds-text-user);
  --ds-sidebar-user-mobile: 1.5rem;
  --ds-sidebar-balance-label: var(--ds-text-coin-label);
  --ds-sidebar-balance: var(--ds-text-balance);
  --ds-sidebar-nav: var(--ds-text-nav);
  --ds-sidebar-safe: var(--ds-text-safe);
  --ds-sidebar-nav-weight: var(--ds-weight-nav);
  --ds-sidebar-section-weight: var(--ds-weight-section);
  --ds-sidebar-letter-kicker: var(--ds-letter-signed);
  --ds-sidebar-letter-section: var(--ds-letter-section);
  --ds-sidebar-leading-nav: var(--ds-leading-nav);
  --ds-sidebar-leading-user: 1.1;
  --ds-sidebar-leading-safe: var(--ds-leading-safe);
  --ds-sidebar-icon: var(--ds-icon-nav);
  --ds-sidebar-icon-box: 1.25rem;        /* 20px */
  --ds-sidebar-icon-gap: 0.625rem;       /* 10px */
  --ds-sidebar-chevron: var(--ds-icon-chevron);
  --ds-sidebar-wallet-icon: var(--ds-icon-wallet);
  --ds-sidebar-close-icon: var(--ds-icon-close);
  --ds-sidebar-row: var(--ds-row-nav);
  --ds-sidebar-pad-x: 1rem;              /* 16px */
  --ds-sidebar-radius: 0.75rem;          /* 12px */
  --ds-sidebar-width: 300px;

  /* App header bar — single source for shell + shared header primitives */
  --ds-header-height: 3rem;                  /* 40px row */
  --ds-header-padding-y: 0.375rem;             /* 6px */
  --ds-header-padding-x: 0.625rem;             /* 10px */
  --ds-header-gap: 0.3125rem;                  /* 5px */
  --ds-header-gap-lg: 0.4375rem;               /* 7px */
  --ds-header-icon-size: 0.875rem;             /* 14px glyph */
  --ds-header-icon-button-size: 1.5rem;        /* 24px touch target */
  --ds-header-icon-radius: 0.5rem;             /* 8px */
  --ds-header-logo-height: 1rem;                 /* title cap height */
  --ds-header-title-size: var(--ds-text-page-title); /* 1rem / 16px */
  --ds-header-title-weight: 800;
  --ds-header-title-leading: 1.2;
  --ds-header-subtitle-size: var(--ds-text-page-sub); /* 0.75rem / 12px */
  --ds-header-tagline-size: 0.6875rem;         /* 11px */
  --ds-header-balance-font-size: 0.75rem;       /* 12px */
  --ds-header-balance-font-weight: 800;
  --ds-header-balance-icon-size: 0.75rem;        /* 12px wallet in pill */
  --ds-header-balance-add-size: 1rem;            /* 16px + circle */
  --ds-header-balance-add-icon-size: 0.5625rem; /* 9px + glyph */
  --ds-header-button-font-size: 0.75rem;       /* compact header CTAs */
  --ds-header-mobile-padding-x: 0.5rem;        /* 8px */
  --ds-header-desktop-padding-x: 0.75rem;      /* 12px */
  /* Full fixed header box (border-box min-height already includes vertical padding) */
  --ds-header-content-gap: 0.375rem;
  --ds-header-offset: var(--ds-header-height);

  /* Compact dual bet cards (Crash + reusable game panels) */
  --ds-bet-card-bg: #0b1220;
  --ds-bet-card-border: rgba(148, 163, 184, 0.14);
  --ds-bet-card-radius: 10px;
  --ds-bet-card-pad: 8px;
  --ds-bet-card-gap: 6px;
  --ds-bet-accent-red: #f87171;
  --ds-bet-accent-blue: #60a5fa;
  --ds-bet-badge-red-bg: rgba(127, 29, 29, 0.55);
  --ds-bet-badge-red-fg: #fecaca;
  --ds-bet-badge-blue-bg: rgba(30, 58, 138, 0.55);
  --ds-bet-badge-blue-fg: #bfdbfe;
  --ds-bet-stepper-h: 34px;
  --ds-bet-step-btn: 26px;
  --ds-bet-preset-h: 26px;
  --ds-bet-toggle-w: 36px;
  --ds-bet-toggle-h: 20px;
  --ds-bet-cta-min-h: 44px;
  --ds-bet-divider: rgba(148, 163, 184, 0.12);
}

html, body{
  height: 100%;
  overflow-x: hidden;
  max-width: 100%;
}

body{
  font-family: var(--ds-font-sans);
  background: var(--ds-bg);
  color: var(--ds-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* One display style = same family (weight/spacing create hierarchy) */
.font-display{
  font-family: var(--ds-font-sans);
  font-weight: 900;
}

/* Default link tone in dark UI */
a{ color: rgba(34,197,94,.95); }
a:hover{ color: rgba(34,197,94,1); }

/* Consistent page container padding */
.container-fluid{
  padding-left: var(--ds-pad-x);
  padding-right: var(--ds-pad-x);
}

/* Utility: consistent card base */
.ds-card{
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  border: 1px solid var(--ds-stroke);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow-card);
}

/* ─── Shared app listing (Games / Wallet / Leaderboard / History) ─── */
.app-section-title{
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-heading);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ds-text);
  line-height: 1.25;
}

.app-section-link{
  color: rgba(34,197,94,.95);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--ds-text-link);
}

.app-tabs{
  display: flex;
  gap: 8px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}

.app-tabs--pill{
  background: rgba(148,163,184,.06);
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 999px;
  padding: 6px;
  overflow: hidden;
}

.app-tab{
  flex: 0 0 auto;
  border: 1px solid rgba(148,163,184,.14);
  background: rgba(148,163,184,.06);
  color: rgba(148,163,184,.92);
  height: var(--ds-chip-h);
  min-height: var(--ds-chip-h);
  padding: 0 0.85rem;
  border-radius: 999px;
  font-family: var(--ds-font-sans);
  font-weight: 600;
  font-size: var(--ds-text-chip);
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  line-height: 1.2;
  transition: transform .12s ease, background-color .16s ease, color .16s ease, border-color .16s ease;
}

.app-tabs--pill .app-tab{
  flex: 1;
  border: 0;
  background: transparent;
  min-width: 0;
}

.app-tab.is-active{
  background: rgba(34,197,94,.95);
  border-color: rgba(34,197,94,.35);
  color: #061016;
  box-shadow: 0 10px 22px rgba(34,197,94,.16);
}

.app-tab:active{
  transform: scale(.98);
}

.app-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.app-list-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: var(--ds-shadow-card);
  color: var(--ds-text);
  text-decoration: none;
}

.app-list-title{
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-card-title);
  font-weight: 700;
  color: var(--ds-text);
  line-height: 1.25;
}

.app-list-meta{
  margin: 2px 0 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-card-meta);
  font-weight: 500;
  color: var(--ds-muted);
  line-height: 1.35;
}

.app-list-value{
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-md);
  font-weight: 900;
  color: var(--ds-green);
  line-height: 1.2;
  white-space: nowrap;
}

.app-empty{
  border-radius: var(--ds-radius-lg);
  border: 1px dashed rgba(148,163,184,.22);
  background: rgba(148,163,184,.05);
  padding: 18px 14px;
  color: var(--ds-muted);
  text-align: center;
  font-weight: 800;
  font-size: var(--ds-text-sm);
}

.app-card-title{
  margin: 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-card-title);
  font-weight: 700;
  color: var(--ds-text);
  line-height: 1.25;
}

.app-card-meta{
  margin: 4px 0 0;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-card-meta);
  font-weight: 500;
  color: var(--ds-muted);
  line-height: 1.35;
}

/* ─── Auth typography (login / register) — owned by design system ─── */
.neon-brand{
  font-family: var(--ds-font-sans);
  font-weight: 900;
  font-size: var(--ds-text-xl);
  font-style: italic;
  letter-spacing: var(--ds-letter-brand);
}
.neon-brand-mark{ letter-spacing: var(--ds-letter-brand-mark); }
.neon-brand-text{ letter-spacing: var(--ds-letter-brand-text); }

.auth-eyebrow{
  font-size: var(--ds-text-kicker);
  font-weight: 700;
  letter-spacing: var(--ds-letter-kicker);
  text-transform: uppercase;
}

.auth-copy h1{
  font-size: var(--ds-text-auth-title);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: var(--ds-leading-tight);
}

.auth-copy p:last-child{
  font-size: var(--ds-text-lead);
  line-height: var(--ds-leading-snug);
}

.neon-form-label{
  font-size: var(--ds-text-2xs);
  font-weight: 700;
  letter-spacing: var(--ds-letter-label);
  text-transform: uppercase;
}

.neon-input{
  font: inherit;
  font-size: var(--ds-text-input);
}

.auth-field-hint{
  font-size: var(--ds-text-meta);
}

.auth-captcha-refresh{
  font-size: var(--ds-text-2xs);
  font-weight: 600;
}

.auth-options{
  font-size: var(--ds-text-meta);
}
.auth-options a{
  font-weight: 500;
}

.auth-check{
  font-size: var(--ds-text-meta);
}
.auth-check a{
  font-weight: 600;
}

.auth-terms{
  line-height: var(--ds-leading-body);
}

.btn-neon-primary{
  font: inherit;
  font-size: var(--ds-text-sm);
  font-weight: 800;
  letter-spacing: var(--ds-letter-cta);
}

.neon-auth-switch{
  font-size: var(--ds-text-sm);
}
.neon-auth-switch a{
  font-weight: 700;
}

.neon-footer{
  font-size: var(--ds-text-xs);
  line-height: var(--ds-leading-relaxed);
}
.neon-footer a{
  font-weight: 600;
}