/* LDN Bingo — design tokens */
:root {
  /* Surfaces (dark-first) */
  --ink-900: #0A0D1A;       /* deepest midnight */
  --ink-800: #111527;       /* card */
  --ink-700: #1A1F36;       /* raised */
  --ink-600: #242A45;       /* hairline / divider tint */
  --ink-500: #3A4063;       /* muted text */
  --ink-300: #8B91B5;       /* secondary text */
  --ink-100: #E8E4D6;       /* primary text on dark */

  /* Light surfaces (champagne) */
  --cream-50: #F7F1E1;
  --cream-100: #F1E9D2;
  --cream-200: #E7DCBE;

  /* Brand */
  --burgundy: #7A1F2B;       /* primary, oxblood/cabaret */
  --burgundy-deep: #5C141C;
  --burgundy-soft: #9C3340;
  --brass: #C9A86A;          /* aged metal */
  --brass-bright: #E0BE82;
  --brass-deep: #8E7340;

  /* Player accents */
  --j1: #5E7BFF;             /* bleu nuit electrique */
  --j1-deep: #3B52D9;
  --j2: #E08465;             /* terracotta rosé */
  --j2-deep: #B85D43;

  /* Status */
  --jade: #4FB39A;
  --jade-deep: #2F8A75;
  --warn: #E0A864;

  /* Type */
  --f-display: 'DM Serif Display', 'Cormorant Garamond', Georgia, serif;
  --f-body: 'Inter', system-ui, -apple-system, sans-serif;
  --f-script: 'Caveat', 'Brush Script MT', cursive;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--f-body);
  background: #06070F;
  color: var(--ink-100);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Reusable surface treatments */
.surface-ink {
  background:
    radial-gradient(ellipse at top, rgba(122,31,43,0.18), transparent 60%),
    linear-gradient(180deg, #0E1224 0%, #08091A 100%);
}

.hairline {
  background: linear-gradient(90deg, transparent, rgba(201,168,106,0.4), transparent);
  height: 1px;
  border: 0;
}

.grain::after {
  content: '';
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0.06;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* Tube-roundel motif used in logos */
.roundel-shadow {
  filter: drop-shadow(0 6px 20px rgba(122,31,43,0.45));
}

/* For tiles */
.tile-flip {
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1);
}
.tile-flip.flipped { transform: rotateY(180deg); }
.tile-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  position: absolute; inset: 0;
}
.tile-back { transform: rotateY(180deg); }

/* Curtain reveal */
@keyframes curtain-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-110%); }
}
@keyframes curtain-right {
  0% { transform: translateX(0); }
  100% { transform: translateX(110%); }
}
.curtain-l { animation: curtain-left 2.2s cubic-bezier(.6,.05,.4,.95) forwards; }
.curtain-r { animation: curtain-right 2.2s cubic-bezier(.6,.05,.4,.95) forwards; }

@keyframes neon-flicker {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 8px currentColor) drop-shadow(0 0 24px currentColor); }
  47% { opacity: 0.95; }
  48% { opacity: 0.6; }
  49% { opacity: 0.98; }
}
.neon { animation: neon-flicker 6s infinite; }

@keyframes confetti-fall {
  0%   { transform: translate3d(var(--x,0), -20px, 0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translate3d(var(--x,0), 480px, 0) rotate(720deg); opacity: 0; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.brass-shimmer {
  background: linear-gradient(110deg,
    var(--brass) 0%, var(--brass-bright) 40%,
    #FFF3D6 50%, var(--brass-bright) 60%, var(--brass) 100%);
  background-size: 200% 100%;
  animation: shimmer 4s ease-in-out infinite;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Scrollbar discreet */
.scroll-quiet::-webkit-scrollbar { width: 4px; height: 4px; }
.scroll-quiet::-webkit-scrollbar-thumb { background: var(--ink-600); border-radius: 999px; }

/* Pulse for active state */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,106,0.4); }
  50% { box-shadow: 0 0 0 10px rgba(201,168,106,0); }
}
.glow-pulse { animation: glow-pulse 2.4s ease-out infinite; }