/*
 * base.css
 * Foundation styles: CSS custom properties (design tokens), global reset, body layout,
 * and ambient background effects.
 *
 * This file must be loaded FIRST — all other CSS files depend on the --variables defined here.
 * To reuse in another card game: update the color variables in :root and keep everything else.
 */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Playfair+Display+SC:wght@700&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg:       #04090a;
  --surface:  #081214;
  --felt:     #0a2218;
  --felt2:    #0d2b1e;
  --rail:     #0f1f18;
  --gold:     #c9960e;
  --gold2:    #f0c83a;
  --gold3:    #fae17a;
  --gold-dim: #7a5c08;
  --teal:     #22d4b4;
  --teal-dim: #0d5a4e;
  --red:      #d92b3a;
  --red2:     #ff4d5e;
  --green-win:#22d4b4;
  --card-w:   88px;
  --card-h:   126px;
  --opp-w:    40px;
  --opp-h:    58px;
  --r:        14px;
}

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

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  min-height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  cursor: default;
}
body.lobby-mode { overflow-y: auto; align-items: flex-start; padding: 32px 0 60px; }

/* ── Ambient background glow ── */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 20% 10%, rgba(34,212,180,.04) 0%, transparent 70%),
    radial-gradient(ellipse 60% 60% at 80% 80%, rgba(201,150,14,.05) 0%, transparent 70%),
    radial-gradient(ellipse 100% 100% at 50% 50%, #081a12 0%, #04090a 100%);
}
/* ── Subtle grain texture ── */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.08'/%3E%3C/svg%3E");
  background-size: 200px 200px;
}