@import "tailwindcss";

:root {
  --background: #0a0f0d;
  --foreground: #f1f5f3;

  /* 4-colour deck (matches the concept): spades black, hearts red,
     diamonds blue, clubs green. */
  --suit-spade: #1f2937;
  --suit-heart: #dc2626;
  --suit-diamond: #2563eb;
  --suit-club: #15803d; /* green-700: keeps white-on-green ≥ 4.5:1 (WCAG AA) */

  --felt: #0e6245;
  --felt-edge: #08372a;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none; /* no vertical rubber-band bounce */
}

body {
  background: radial-gradient(120% 80% at 50% 0%, #12231d 0%, var(--background) 60%);
  color: var(--foreground);
  font-family: var(--font-sans), system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none; /* no vertical rubber-band bounce */
  overflow-x: hidden; /* safety net against any sub-pixel horizontal spill */
  touch-action: manipulation; /* kill double-tap-to-zoom + 300ms tap delay */
}

/* Interactive controls: ensure taps register instantly on mobile.
   NOTE: do NOT set `user-select: none` on these — on iOS Safari it suppresses
   the synthesised click event (the :active feedback still fires, but onClick
   never does). cursor:pointer + touch-action keep taps responsive. */
button {
  cursor: pointer;
  touch-action: manipulation;
  -webkit-touch-callout: none;
}