/**
 * 10xWin — Icy Blue Neon + Gold Casino (global design tokens)
 * Load before neon.css; overrides bundles without touching PHP/JS.
 */

:root {
  /* Icy blue — primary UI */
  --blue-primary: #00cfff;
  --blue-light: #66e0ff;
  --blue-glow: #00e5ff;
  --blue-deep: #1e90ff;

  /* Gold — rewards / emphasis */
  --gold: #ffd700;
  --gold-warm: #ffc107;
  --gold-dark: #ffb300;

  /* Backgrounds */
  --bg-main: #0b0f1a;
  --bg-card: #101c3a;
  --bg-soft: #0f172a;

  /* Text */
  --text-main: #eaf6ff;
  --text-muted: #a0aec0;

  /* Aliases for existing override layers */
  --neon-cyan: var(--blue-primary);
  --neon-blue: var(--blue-deep);
  --neon-amber: var(--gold);
  --neon-pink: var(--blue-light);
  --neon-lime: var(--blue-deep);
  --neon-purple: var(--blue-deep);
  --text_white: #ffffff;
  --text_color_L1: var(--text-main);
  --text_color_L2: var(--text-muted);
  --text_color_L3: #7dd3fc;
  --text_color_L4: var(--text-main);

  --bg_color_L1: var(--bg-main);
  --bg_color_L2: var(--bg-soft);
  --bg_color_L3: var(--bg-card);
  --Dividing-line_color: rgba(0, 207, 255, 0.22);

  --norm_red-color: #ff4d6d;
  --norm_green-color: #22c55e;
  --norm_secondary-color: var(--gold);
  --norm_Purple-color: var(--blue-primary);
  --norm_bule-color: var(--blue-primary);

  /* Main brand gradient — icy blue neon (no purple) */
  --main-color: var(--blue-primary);
  --main_gradient-color: linear-gradient(
    90deg,
    #000000 0%,
    var(--bg-main) 8%,
    #0c2138 22%,
    #0e3a5c 38%,
    var(--blue-deep) 52%,
    #0e3a5c 64%,
    #0c2138 80%,
    var(--bg-main) 93%,
    #000000 100%
  );
  --main_gradient-color2: linear-gradient(
    180deg,
    #1a4a6e 0%,
    #0f2840 35%,
    var(--bg-soft) 65%,
    var(--bg-main) 88%,
    #000000 100%
  );
  --light-main_gradient-color: var(--main_gradient-color);

  /* Vant */
  --van-primary-color: var(--blue-primary);
  --van-popup-background: rgba(11, 15, 26, 0.97);
  --van-text-color: var(--text-main);
  --van-dialog-background: var(--bg-soft);
  --van-cell-background: rgba(16, 28, 58, 0.94);
  --van-picker-background: var(--bg-soft);
  --van-button-primary-background: linear-gradient(135deg, var(--blue-primary), var(--blue-deep));
  --van-button-primary-border-color: rgba(0, 207, 255, 0.45);
  --van-checkbox-checked-icon-color: var(--blue-primary);
  --van-radio-checked-icon-color: var(--blue-primary);
}

html,
body {
  background-color: var(--bg-main) !important;
  color: var(--text-main);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
}

/* Premium container (matches SPA shells) */
.tw-container,
#app {
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

/* Card system */
.card,
.tw-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  border: 1px solid rgba(0, 207, 255, 0.2);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

/* Buttons */
.btn-primary,
button.btn-primary {
  background: linear-gradient(135deg, var(--blue-primary), var(--blue-deep));
  color: #fff;
  border-radius: 14px;
  border: 1px solid rgba(0, 207, 255, 0.35);
  box-shadow: 0 0 25px rgba(0, 207, 255, 0.35);
}

.btn-gold,
button.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: #000;
  border-radius: 14px;
  border: 1px solid rgba(255, 215, 0, 0.45);
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.35);
}

.glow-blue {
  box-shadow: 0 0 25px rgba(0, 207, 255, 0.5);
}

.glow-gold {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
}

.nav-active {
  color: var(--blue-primary) !important;
}