/* ════════════════════════════════════════════════════════════════
   BASE.CSS — Reset, Variables, Typography, Layout primitives
════════════════════════════════════════════════════════════════ */

/* Google Fonts loaded in index.html */
/* Bootstrap Icons loaded in index.html */

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

:root {
  /* Felt / Table */
  --felt:          #1B7A3E;
  --felt-mid:      #167033;
  --felt-dark:     #0f4d24;
  --felt-shadow:   #093319;
  --rail:          #8B5E14;
  --rail-light:    #B07820;
  --rail-shine:    #D4A030;

  /* Gold palette */
  --gold:          #C9A84C;
  --gold-bright:   #F0C843;
  --gold-pale:     #F5E0A0;
  --gold-dim:      rgba(201,168,76,.22);

  /* UI colours */
  --red:           #D63031;
  --green:         #00B894;
  --blue:          #0984E3;
  --orange:        #E17055;
  --purple:        #6C5CE7;

  /* Backgrounds */
  --bg:            #060C08;
  --bg2:           #0C1A0F;
  --panel:         rgba(4,10,6,.94);
  --panel2:        rgba(8,16,10,.85);
  --border:        rgba(201,168,76,.22);
  --border-soft:   rgba(255,255,255,.08);

  /* Text */
  --text:          #F2EDE4;
  --muted:         rgba(242,237,228,.48);
  --subtle:        rgba(242,237,228,.16);

  /* Chip colours */
  --chip-red:      #C0392B;
  --chip-blue:     #2980B9;
  --chip-green:    #27AE60;
  --chip-black:    #1a1a1a;
  --chip-purple:   #8E44AD;

  /* Spacing / radius */
  --r:             8px;
  --r-lg:          14px;
  --r-pill:        100px;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Barlow Condensed', sans-serif;
  height: 100%;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* Screen system */
.screen {
  display: none;
  width: 100%;
  height: 100dvh;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.screen.active { display: flex; }

/* Animated background gradient used by setup pages */
.casino-bg {
  background:
    radial-gradient(ellipse 70% 45% at 50% 100%, rgba(27,122,62,.42) 0%, transparent 65%),
    radial-gradient(ellipse 90% 40% at 20% 15%, rgba(201,168,76,.04) 0%, transparent 60%),
    linear-gradient(180deg, #050c07 0%, #0b1a0e 100%);
}

/* ── Typography helpers ── */
.font-display { font-family: 'Playfair Display', serif; }
.font-ui      { font-family: 'Barlow Condensed', sans-serif; }
.font-mono    { font-family: 'DM Mono', monospace; }

/* ── Utility ── */
.flex-center { display:flex; align-items:center; justify-content:center; }
.flex-between { display:flex; align-items:center; justify-content:space-between; }
.text-gold  { color: var(--gold-bright); }
.text-muted { color: var(--muted); }
.text-upper { text-transform: uppercase; letter-spacing: .08em; }
.text-sm    { font-size: .75rem; }
.gap-sm     { gap: .4rem; }
.gap-md     { gap: .75rem; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 2px; }