/* ============================================================
   LiveRoll — Design Tokens (flagship polish, 2026-04-26)
   Evolution of the original token set toward a richer, more
   tactile casino aesthetic. Backwards compatible — every legacy
   token still resolves to a similar (or identical) value.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Barlow:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── Palette — base ───────────────────────────────────── */
  --ink:       #04060a;                /* deepest shadow / page edge */
  --bg:        #080c09;
  --bg-2:      #0a1110;                /* between bg and card */
  --card:      #0e1410;
  --card2:     #141c15;
  --card3:     #1a2218;                /* highest elevation */

  /* ── Felt — woven ─────────────────────────────────────── */
  --felt:        #1a4d2e;
  --felt-deep:   #0f3520;              /* bottom of woven gradient */
  --felt-edge:   #082014;              /* darkest edge wash */
  --felt-light:  #246b41;              /* highlight ridge */
  --felt-rail:   #2b1810;              /* leather/walnut rail surround */
  --felt-rail-2: #1a0d08;
  --felt-rail-stitch: #6b3f1f;         /* gold-leather stitch */

  /* ── Reds (dice / CTA) ────────────────────────────────── */
  --red:       #c82222;
  --red-2:     #e53333;                /* legacy --red2 */
  --red2:      #e53333;
  --red-deep:  #7a1414;
  --red-glow:  rgba(229, 51, 51, 0.42);

  /* ── Golds (data / accents) ───────────────────────────── */
  --gold:      var(--lg-accent, #d4a843);
  --gold-2:    var(--lg-accent-soft, #efc25c); /* hover / hot data */
  --gold-deep: #8a6a1f;
  --gold-glow: rgba(239, 194, 92, 0.45);

  /* ── Greens (live / success) ──────────────────────────── */
  --green:     var(--lg-win, #3a9e5a);
  --green-2:   #4ec074;
  --green-glow:rgba(78, 192, 116, 0.40);

  /* ── Other ────────────────────────────────────────────── */
  --yellow:    #c49a1a;
  --ivory:     #f0eadc;                /* dice face */
  --bone:      #d8d2c2;                /* dice rim */
  --text:      var(--lg-ink, #f0f0ec);
  --text-2:    #c8d0c4;                /* slightly dimmer body */
  --muted:     #7a8c7a;
  --dim:       #4a5c4a;
  --border:    rgba(26,77,46,0.35);
  --border2:   rgba(26,77,46,0.62);
  --border-gold: rgba(212,168,67,0.30);

  /* ── Typography ───────────────────────────────────────── */
  --font-heading: 'Barlow Condensed', sans-serif;
  --font-body:    'Barlow', sans-serif;
  --font-mono:    'JetBrains Mono', monospace;

  /* ── Spacing ──────────────────────────────────────────── */
  --nav-h:       56px;
  --page-max:    1280px;
  --page-pad-x:  32px;
  --card-gap:    16px;

  /* ── Radii ────────────────────────────────────────────── */
  --r-btn:   8px;
  --r-card:  12px;
  --r-pill:  20px;
  --r-chip:  50%;

  /* ── Shadows ──────────────────────────────────────────── */
  --shadow-modal: 0 24px 80px rgba(0,0,0,0.75), 0 2px 0 rgba(255,255,255,0.04) inset;
  --shadow-cta:   0 4px 14px rgba(200,34,34,0.42), 0 1px 0 rgba(255,255,255,0.18) inset;
  --shadow-toast: 0 16px 48px rgba(0,0,0,0.7);
  --shadow-card:  0 1px 0 rgba(255,255,255,0.03) inset, 0 8px 24px rgba(0,0,0,0.35);
  --shadow-felt:  inset 0 0 60px rgba(0,0,0,0.55), inset 0 0 0 2px rgba(0,0,0,0.6);
  --shadow-rail:  0 8px 32px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,200,120,0.12), inset 0 -1px 0 rgba(0,0,0,0.6);
  --shadow-chip:  0 2px 0 rgba(0,0,0,0.5), 0 4px 8px rgba(0,0,0,0.45);
  --shadow-die:   0 2px 0 rgba(0,0,0,0.55), 0 6px 14px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 4px rgba(0,0,0,0.18);

  /* ── Motion ───────────────────────────────────────────── */
  --t-instant: 80ms;
  --t-fast:    150ms;
  --t-std:     220ms;
  --t-slow:    300ms;
  --ease:      cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Base / reset ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background-color: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Subtle diagonal felt texture across the whole product */
  background-image:
    radial-gradient(ellipse at 50% -10%, rgba(26,77,46,0.10), transparent 60%),
    repeating-linear-gradient(45deg, transparent, transparent 3px, rgba(26,77,46,0.020) 3px, rgba(26,77,46,0.020) 6px);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  margin: 0 0 0.5em 0;
  letter-spacing: 0.01em;
}

code, pre, .mono, .stat-value, .num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

a { color: var(--text); text-decoration: none; transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--gold); }

::selection { background: rgba(212,168,67,0.35); color: var(--ivory); }

/* Custom scrollbar — thin and dark green */
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(26,77,46,0.4); border-radius: 4px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(26,77,46,0.7); }

/* ── Reusable primitives ─────────────────────────────────── */

.btn-primary {
  background: linear-gradient(180deg, var(--red-2) 0%, var(--red) 60%, var(--red-deep) 100%);
  color: #fff;
  border: 1px solid rgba(0,0,0,0.4);
  padding: 12px 20px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  text-shadow: 0 1px 0 rgba(0,0,0,0.4);
}
.btn-primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200,34,34,0.55), 0 1px 0 rgba(255,255,255,0.18) inset; }
.btn-primary:active { transform: translateY(0); filter: brightness(0.95); }
.btn-primary:disabled, .btn-primary.is-disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.3); }

.btn-outline {
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0.05));
  color: var(--text);
  border: 1px solid var(--border);
  padding: 11px 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--r-btn);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn-outline:hover { border-color: var(--border2); background: rgba(255,255,255,0.04); }

.card {
  background: linear-gradient(180deg, var(--card2) 0%, var(--card) 100%);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 18px;
  box-shadow: var(--shadow-card);
  transition: border-color var(--t-fast) var(--ease);
}
.card:hover { border-color: var(--border2); }

.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--card2);
  border: 1px solid var(--border);
  color: var(--muted);
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pill.is-live   { color: var(--green); border-color: rgba(58,158,90,0.35); }
.pill.is-hot    { color: var(--red);   border-color: rgba(200,34,34,0.40); }
.pill.is-gold   { color: var(--gold);  border-color: var(--border-gold); }
.pill.is-locked { color: var(--yellow); border-color: rgba(196,154,26,0.35); }

.stat-value {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 28px;
  color: var(--gold);
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

@keyframes craps-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.45; transform: scale(0.85); }
}
.dot-live {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green-glow);
  animation: craps-pulse 1.5s infinite;
}